html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-08-06 15:32:02 +08:00
parent 9e7e1afac8
commit 33a0c48b78
22 changed files with 685 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/QueryToolbar.vue
+9 -8
View File
@@ -16,6 +16,7 @@ export interface QueryOption {
export interface QueryField {
key: string
type: QueryFieldType
label?: string
width?: string | number
placeholder?: string
options?: QueryOption[]
@@ -86,14 +87,14 @@ defineExpose({ search, reset })
:aria-label="ariaLabel"
>
<div class="query-toolbar__filters">
<template v-for="field in fields" :key="field.key">
<div v-for="field in fields" :key="field.key" class="query-toolbar__field" :style="fieldStyle(field)">
<span v-if="field.label" class="query-toolbar__label">{{ field.label }}</span>
<el-input
v-if="field.type === 'input'"
:model-value="model[field.key] as string"
:placeholder="field.placeholder || defaultPlaceholder(field)"
clearable
v-bind="field.props"
:style="fieldStyle(field)"
@update:model-value="updateField(field.key, $event)"
>
<template #prefix><Search :size="16" /></template>
@@ -104,7 +105,6 @@ defineExpose({ search, reset })
:placeholder="field.placeholder || defaultPlaceholder(field)"
clearable
v-bind="field.props"
:style="fieldStyle(field)"
@update:model-value="updateField(field.key, $event)"
>
<el-option v-for="option in field.options || []" :key="String(option.value)" :label="option.label" :value="option.value" :disabled="option.disabled" />
@@ -120,10 +120,9 @@ defineExpose({ search, reset })
start-placeholder="开始日期"
end-placeholder="结束日期"
v-bind="field.props"
:style="fieldStyle(field)"
@update:model-value="updateField(field.key, $event)"
/>
</template>
</div>
</div>
<div class="query-toolbar__actions">
<el-button type="primary" @click="search"><Search :size="16" />{{ searchText }}</el-button>
@@ -135,9 +134,11 @@ defineExpose({ search, reset })
<style scoped>
.query-toolbar { display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px; border: 1px solid var(--cc-border); background: #fff; }
.query-toolbar__filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 10px; }
.query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: var(--query-field-width, 260px); max-width: 100%; min-width: 0; }
.query-toolbar__filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 12px 16px; }
.query-toolbar__field { display: grid; width: var(--query-field-width, 260px); max-width: 100%; min-width: 0; gap: 6px; }
.query-toolbar__label { color: var(--cc-text); font-size: 12px; font-weight: 600; line-height: 1.4; }
.query-toolbar__field :deep(.el-input), .query-toolbar__field :deep(.el-select), .query-toolbar__field :deep(.el-date-editor) { width: 100%; max-width: 100%; min-width: 0; }
.query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
</style>