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

fix(admin): compact query toolbar fields

Browse Source
This commit is contained in:
ouyangxq
2026-09-01 11:53:54 +08:00
parent 041452f2ff
commit b4c29e2226
3 changed files with 68 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/DomesticOutboundListLayout.test.ts
+2 -1
View File
@@ -42,7 +42,8 @@ describe('domestic outbound list responsive contracts', () => {
const listLayout = source('src/shared/components/ListPageLayout.vue')
expect(queryToolbar).toContain('@media (max-width: 720px)')
expect(queryToolbar).toContain('.query-toolbar__field { width: 100%; }')
expect(queryToolbar).toContain('.query-toolbar__field { width: 100%; flex: 0 0 auto; }')
expect(queryToolbar).toContain('.query-toolbar__control { width: 100%; flex: 0 0 auto; }')
expect(queryToolbar).toContain('grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))')
expect(dataTable).toContain('@media (max-width: 720px)')
expect(dataTable).toContain('flex-direction: column')
src/shared/components/QueryToolbar.test.ts
+50 -1
View File
@@ -73,7 +73,56 @@ describe('QueryToolbar layout preferences', () => {
expect(wrapper.find('.query-toolbar__tail .query-toolbar__actions').exists()).toBe(true)
const source = readFileSync(resolve(process.cwd(), 'src/shared/components/QueryToolbar.vue'), 'utf8')
expect(source).toContain('.query-toolbar__tail { display: flex; align-items: flex-end; width: auto; flex: 0 0 auto; gap: 10px; }')
expect(source).toContain('.query-toolbar__tail { display: flex; width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; align-items: flex-end; flex-wrap: wrap; gap: 10px; }')
expect(source).not.toContain('.query-toolbar__filters { display: contents; }')
})
it('derives compact widths by field type while explicit business widths win', () => {
const compactFields: QueryField[] = [
{ key: 'status', type: 'select', label: '短状态' },
{ key: 'date', type: 'date', label: '日期' },
{ key: 'keyword', type: 'input', label: '长关键词' },
{ key: 'range', type: 'daterange', label: '日期范围' },
{ key: 'warehouse', type: 'select', label: '业务显式宽度', width: 236 },
]
const wrapper = mountToolbar({
modelValue: { status: '', date: '', keyword: '', range: [], warehouse: '' },
fields: compactFields,
availableFields: compactFields,
})
const styles = wrapper.findAll('.query-toolbar__field').map((field) => field.attributes('style'))
expect(styles).toEqual([
'--query-field-width: 180px;',
'--query-field-width: 180px;',
'--query-field-width: 260px;',
'--query-field-width: 300px;',
'--query-field-width: 236px;',
])
})
it('keeps a short status and long keyword left aligned without stretching or desktop overflow', () => {
const mixedFields: QueryField[] = [
{ key: 'status', type: 'select', label: '状态' },
{ key: 'keyword', type: 'input', label: '订单号/入仓码/客户名称' },
]
const wrapper = mountToolbar({
modelValue: { status: '', keyword: '' },
fields: mixedFields,
availableFields: mixedFields,
})
const renderedFields = wrapper.findAll('.query-toolbar__field')
expect(renderedFields[0].attributes('style')).toBe('--query-field-width: 180px;')
expect(renderedFields[1].attributes('style')).toBe('--query-field-width: 260px;')
expect(renderedFields[1].classes()).toContain('query-toolbar__tail')
expect(renderedFields[1].find('.query-toolbar__actions').exists()).toBe(true)
const source = readFileSync(resolve(process.cwd(), 'src/shared/components/QueryToolbar.vue'), 'utf8')
expect(source).toContain('justify-content: flex-start; flex-wrap: wrap;')
expect(source).toContain('flex: 0 0 var(--query-field-width)')
expect(source).toContain('overflow-x: clip')
expect(source).toContain('@media (max-width: 720px)')
expect(source).toContain('.query-toolbar__field { width: 100%; flex: 0 0 auto; }')
expect(source).toContain('.query-toolbar__control { width: 100%; flex: 0 0 auto; }')
})
it('submits the current filters once when Enter is released in a text input', async () => {
src/shared/components/QueryToolbar.vue
+16 -8
View File
@@ -133,9 +133,16 @@ function datePickerType(field: QueryField): 'date' | 'daterange' {
return field.type === 'daterange' ? 'daterange' : 'date'
}
const defaultFieldWidths: Record<QueryFieldType, number> = {
select: 180,
date: 180,
input: 260,
daterange: 300,
}
function fieldStyle(field: QueryField) {
if (field.width === undefined) return undefined
const width = typeof field.width === 'number' ? `${field.width}px` : field.width
const fieldWidth = field.width ?? defaultFieldWidths[field.type]
const width = typeof fieldWidth === 'number' ? `${fieldWidth}px` : fieldWidth
return { '--query-field-width': width }
}
@@ -245,12 +252,13 @@ defineExpose({ search, reset })
</template>
<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: 12px 16px; }
.query-toolbar__field, .query-toolbar__control { display: grid; width: var(--query-field-width, 260px); max-width: 100%; min-width: 0; gap: 6px; }
.query-toolbar { box-sizing: border-box; display: flex; width: 100%; min-width: 0; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 10px; overflow-x: clip; padding: 16px; border: 1px solid var(--cc-border); background: #fff; }
.query-toolbar__filters { display: flex; width: 100%; min-width: 0; flex: 1 1 100%; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; }
.query-toolbar__field { display: grid; width: var(--query-field-width); max-width: 100%; min-width: 0; flex: 0 0 var(--query-field-width); gap: 6px; }
.query-toolbar__control { display: grid; width: var(--query-field-width); max-width: 100%; min-width: 0; flex: 0 0 var(--query-field-width); gap: 6px; }
.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__field :deep(.el-input__inner), .query-toolbar__field :deep(.el-select__selected-item), .query-toolbar__field :deep(.el-date-editor), .query-toolbar__actions :deep(.el-button) { font-size: var(--cc-list-query-font-size); }
.query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.query-toolbar__actions { display: flex; max-width: 100%; min-width: 0; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
:global(.cc-layout-preference-popper) { max-width: calc(100vw - 24px); }
@@ -260,6 +268,6 @@ defineExpose({ search, reset })
.query-toolbar__field, .query-toolbar__control { gap: 4px; }
.query-toolbar__actions { gap: 6px; }
}
@media (min-width: 721px) { .query-toolbar__filters { display: contents; } .query-toolbar__tail { display: flex; align-items: flex-end; width: auto; flex: 0 0 auto; gap: 10px; } }
@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__tail { display: contents; } .query-toolbar__control { 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 (min-width: 721px) { .query-toolbar__tail { display: flex; width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; align-items: flex-end; flex-wrap: wrap; gap: 10px; } .query-toolbar__tail > .query-toolbar__control { flex: 0 0 var(--query-field-width); } }
@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%; flex: 0 0 auto; } .query-toolbar__tail { display: contents; } .query-toolbar__control { width: 100%; flex: 0 0 auto; } .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>