diff --git a/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx b/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx index a0d0b6ea..b1d4001d 100644 --- a/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx +++ b/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx @@ -2385,10 +2385,12 @@ export default function WorkOrdersPanel() { setPage(1) }} /> - - +
+ + +
本地 Mock diff --git a/apps/frontend/src/styles/worker.css b/apps/frontend/src/styles/worker.css index 0762e2d7..0dadd3cb 100644 --- a/apps/frontend/src/styles/worker.css +++ b/apps/frontend/src/styles/worker.css @@ -139,49 +139,55 @@ min-width: 0; } -/* 单行筛选栏:搜索框、筛选条件、清空按钮同一行且不换行;空间不足时行内横向滚动 */ +/* 筛选条件按内容分配宽度;空间不足时整组换行,避免单个下拉挤占整行。 */ .worker-orders-filter-bar { display: flex; align-items: center; - flex-wrap: nowrap; + flex-wrap: wrap; gap: 8px; width: 100%; - overflow-x: auto; - scrollbar-width: thin; - padding-bottom: 2px; } .worker-orders-search-input { - flex: 1.4 1 240px; - min-width: 180px; - max-width: 300px; + flex: 1 1 260px; + min-width: 220px; + max-width: 340px; } .worker-orders-filter-select { - flex: 1 1 110px; - min-width: 88px; + flex: 0 1 165px; + width: 165px; + min-width: 145px; + max-width: 185px; } .worker-orders-filter-select--wide { - flex: 1.6 1 140px; - min-width: 112px; + flex: 0 1 220px; + width: 220px; + min-width: 190px; + max-width: 240px; } -/* 状态:多选标签可截断,宽度让给时间区间 */ +/* 状态是多选标签,保留独立宽度但不再随剩余空间无限拉伸。 */ .worker-orders-filter-select--compact { - flex: 0.9 1 96px; - min-width: 80px; + flex: 0 1 170px; + width: 170px; + min-width: 150px; + max-width: 190px; } /* 时间区间:留足两个完整日期(YYYY-MM-DD)与「开始日期/结束日期」占位文案的宽度 */ .worker-orders-date-range { - flex: 0 0 230px; - width: 230px; - min-width: 230px; + flex: 0 0 220px; + width: 220px; + min-width: 220px; } -.worker-orders-filter-bar > .ant-btn { +.worker-orders-filter-actions { + display: flex; + align-items: center; flex: 0 0 auto; + gap: 8px; } .worker-orders-mock { diff --git a/apps/frontend/tests/work-order-filter-layout.test.ts b/apps/frontend/tests/work-order-filter-layout.test.ts new file mode 100644 index 00000000..afae9e75 --- /dev/null +++ b/apps/frontend/tests/work-order-filter-layout.test.ts @@ -0,0 +1,18 @@ +import assert from 'node:assert/strict' +import { readFile } from 'node:fs/promises' +import test from 'node:test' + +test('接单工单筛选按内容分配宽度,店铺下拉不能吞掉查询区', async () => { + const [panel, css] = await Promise.all([ + readFile(new URL('../src/pages/admin/panels/WorkOrdersPanel.tsx', import.meta.url), 'utf8'), + readFile(new URL('../src/styles/worker.css', import.meta.url), 'utf8'), + ]) + + assert.ok(panel.includes('className="worker-orders-filter-actions"')) + assert.ok(css.includes('flex-wrap: wrap')) + assert.ok(css.includes('.worker-orders-filter-select--wide')) + assert.ok(css.includes('width: 220px')) + assert.ok(css.includes('max-width: 240px')) + assert.ok(css.includes('.worker-orders-filter-actions')) + assert.ok(!css.includes('overflow-x: auto;\n scrollbar-width: thin;')) +})