迭代加氢记录与氢费明细:来源标签、变更日志、核对人/对账人,日统计默认收起;统一筛选规范与导航,下线合同模板原型。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -146,25 +146,53 @@ import '../vehicle-management/style.css';
|
||||
|
||||
| 元素 | 类名 | 规格 |
|
||||
|---|---|---|
|
||||
| 容器 | `vm-filter-card` | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 容器 | `vm-filter-card`(兼容 `lc-filter-card`) | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 标题 | `vm-filter-title` | 「筛选条件」,1.125rem / 600 |
|
||||
| 栅格 | `vm-filter-grid` | 默认 4 列;1280px 以下 2 列;640px 以下 1 列 |
|
||||
| 字段 | `vm-filter-field` | 标签在上、控件在下;标签 12px / muted |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;右对齐「重置」「查询」 |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;左侧「更多筛选/收起」,右侧「重置」「查询」 |
|
||||
|
||||
**日期区间(强制)**
|
||||
**参考实现(强制对齐)**:[`lease-business-detail/components/FilterPanel.tsx`](../src/prototypes/lease-business-detail/components/FilterPanel.tsx)
|
||||
|
||||
#### 4.1.1 筛选提示文本(placeholder)— 强制统一
|
||||
|
||||
筛选卡内所有空态提示(输入框、FilterPicker、日期区间、Ant Select)必须一致:
|
||||
|
||||
| 属性 | Token / 值 |
|
||||
|---|---|
|
||||
| 字体 | `var(--vm-font)` |
|
||||
| 字号 | `0.875rem`(14px) |
|
||||
| 字重 | `400` |
|
||||
| 颜色 | `var(--ln-muted-soft)`(`#a1a1aa`) |
|
||||
| 透明度 | `opacity: 1`(覆盖 Ant Select 默认半透明) |
|
||||
|
||||
样式落点:`vehicle-management/style.css` 中 `.vm-filter-card` / `.lc-filter-card` 下的 `::placeholder` 与 `.ant-select-selection-placeholder`。
|
||||
**禁止**各页单独改占位色、字号或字重。
|
||||
|
||||
#### 4.1.2 日期区间(强制)
|
||||
|
||||
- 使用 `DateRangeFilterField`(`vehicle-management/components/DateRangeFilterField`)。
|
||||
- 展示分隔符为中文「**至**」。
|
||||
- 类名:`vm-date-range-field`、`vm-filter-picker-control`。
|
||||
- 弹层必须 portal + `fixed`(避免滚动容器错位)。
|
||||
- **禁止**筛选区用 Ant `RangePicker`、双 `<input type="date">` 等替代方案。
|
||||
|
||||
**折叠筛选**
|
||||
#### 4.1.3 更多筛选 / 收起(强制)
|
||||
|
||||
- 超过 4 项时其余放入 `vm-filter-expand`(见 `src/common/vm-filter-panel.ts`)。
|
||||
- 筛选项数组经 `splitFilterFields()` 拆为首行 + 展开区;首行固定最多 4 项,**禁止**首行放 5 项导致第二行孤零零 1 项。
|
||||
- 展开区项数不得为 4n+1(避免展开后末行仅 1 项);由 `splitFilterFields` 自动从首行借调平衡。
|
||||
- 切换按钮:`vm-filter-toggle` + 角标 `vm-filter-toggle-badge`。
|
||||
超过 4 项时必须折叠;实现与物流业务明细相同:
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 拆分 | `splitFilterFields()` / `shouldShowFilterExpand()`([`src/common/vm-filter-panel.ts`](../src/common/vm-filter-panel.ts)) |
|
||||
| 首行 | 最多 4 项;**禁止**首行 5 项导致第二行仅 1 项 |
|
||||
| 展开区 | `vm-filter-expand` + `is-expanded`;内层 `vm-filter-expand-inner` + 独立 `vm-filter-grid` |
|
||||
| 文案 | 仅「更多筛选」/「收起」(禁用「展开」) |
|
||||
| 按钮 | `vm-btn vm-btn-link vm-filter-toggle`;`data-vm-icon` 为 `filter` / `chevron-up` |
|
||||
| 角标 | 收起且扩展项有值时显示 `vm-filter-toggle-badge`(主色底、白字) |
|
||||
| 操作区布局 | 切换在左(`margin-right: auto`),重置/查询在右 |
|
||||
| 别名 | `ldb-filter-expand` / `ldb-filter-toggle` 等同 `vm-filter-*`;**新代码优先 `vm-filter-*`** |
|
||||
|
||||
新建或改动列表页必须遵循;旧页触及时迁移。
|
||||
|
||||
### 4.2 输入框 `.vm-input`
|
||||
|
||||
@@ -174,15 +202,16 @@ import '../vehicle-management/style.css';
|
||||
| 表单页 | min 44px | 1rem(移动端友好) |
|
||||
|
||||
- 边框:`--ln-hairline-strong`;focus 时主题色边框。
|
||||
- 占位符:`--ln-muted-soft`。
|
||||
- 占位符:见 §4.1.1(`--ln-muted-soft`,0.875rem / 400)。
|
||||
|
||||
### 4.3 下拉选择 `.vm-filter-picker-*`
|
||||
|
||||
| 元素 | 说明 |
|
||||
|---|---|
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高 |
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高(32px) |
|
||||
| `vm-filter-picker-popover` | 下拉面板,卡片圆角 + hover 阴影 |
|
||||
| `vm-filter-picker-option.checked` | 主色浅底 + 深绿字 |
|
||||
| 占位符 | 见 §4.1.1;与日期区间、Ant Select 同色同字号 |
|
||||
|
||||
### 4.4 按钮 `.vm-btn`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user