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)
}}
/>
- } onClick={searchOrders}>
- 查询
-
-
+
+ } onClick={searchOrders}>
+ 查询
+
+
+
本地 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;'))
+})