fix(worker-platform): 优化接单工单筛选布局
This commit is contained in:
@@ -2385,10 +2385,12 @@ export default function WorkOrdersPanel() {
|
||||
setPage(1)
|
||||
}}
|
||||
/>
|
||||
<Button type="primary" icon={<SearchOutlined />} onClick={searchOrders}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={clearOrderFilters}>清空筛选</Button>
|
||||
<div className="worker-orders-filter-actions">
|
||||
<Button type="primary" icon={<SearchOutlined />} onClick={searchOrders}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={clearOrderFilters}>清空筛选</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="worker-orders-mock">
|
||||
<Typography.Text type="secondary">本地 Mock</Typography.Text>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user