迭代加氢记录与氢费明细:来源标签、变更日志、核对人/对账人,日统计默认收起;统一筛选规范与导航,下线合同模板原型。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
王冕
2026-07-18 12:30:22 +08:00
parent 7987536ea9
commit c3691be29d
27 changed files with 3328 additions and 4365 deletions

View File

@@ -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`