# 小羚羚小程序 · 审批中心改版说明

**文档版本**：V1.4  
**更新日期**：2026-06-29  
**适用范围**：审批中心、还车应结款、提车应收款及相关导航结构

---

## 一、改版背景

本次迭代聚焦审批体验与还车应结款多部门子流程，并调整原型信息架构：去除登录门槛、按功能拆分为独立预览页，便于评审与交付。

---

## 二、信息架构与导航

### 2.1 去除登录

- 原型默认进入「工作台 · 待办」，无需登录页。
- 左侧预览列表可切换 **10 个功能页**（hash 路由）。
- 源码中仍保留登录页组件与样式，**不在默认导航与预览目录中暴露**；评审以「免登录直达工作台」为准。

### 2.2 页面清单

| 路由 | 页面 | 说明 |
| --- | --- | --- |
| `todo` | 工作台 | 待办聚合，默认入口 |
| `business` | 业务 | 运维 / 审批 / 数据可视化入口 |
| `map` | 地图 | 氢能车与加氢站 |
| `mine` | 我的 | 个人信息 |
| `audit` | 审批中心 | 列表 + 本页内跳转各审批详情 |
| `audit-return` | 还车应结款（说明） | 还车应结款专项说明页 |
| `delivery` | 交车 | 列表与办理表单同页切换 |
| `inspection` | 年审 | 列表与办理表单同页切换 |
| `vehicle` | 车辆管理 | 列表与详情同页切换 |
| `third-return` | 三方退车 | 列表与办理同页切换 |
| `replace` | 替换车 | 列表与详情同页切换 |

### 2.3 核心路径

1. 工作台处理待办 → 「去处理」跳转对应业务页  
2. 业务 → 进入各运维 / 审批模块（独立原型页）  
3. 审批中心 → 本页内打开**本期已接入**的审批工作流详情（见 §3.5）

### 2.4 需求文档入口

- 导航栏**不设**「需求说明」按钮（按批注已移除该入口）。
- 需求与 PRD 通过**左侧标注目录**（「PRD 00｜小程序总览」「PRD 01｜审批中心改版说明」）及页面标注节点（如 `page-audit`）查看。

---

## 三、审批中心列表

### 3.1 Tab

四类：**我发起的**、**我的待办**、**我的已办**、**抄送我的**。

### 3.2 筛选与搜索

- **流程类型 Chip**：全部、合同审批、提车应收款、租赁账单、**还车应结款**（含四部门子类型）、车辆调拨等；「更多类型」抽屉展示全部流程类型。
- 「还车应结款」Chip 同时匹配主流程与四个部门子流程。
- **更多筛选**（搜索框右侧筛选按钮）：**发起人**、**发起时间**（开始至结束，按日期区间过滤）。
- **搜索**：按**卡片加粗标题（工作流标题）**模糊匹配；不按单据号、摘要等多字段联合检索。示例：提车应收款搜**客户全称**；还车应结款主流程搜**车牌号**；还车四部门子流程搜**「还车应结款-部门名」**。

> **决策说明**（与 `page-audit` 标注一致）：发起人、发起时间从搜索中拆出，归入「更多筛选」，搜索仅面向列表主识别字段。

### 3.3 列表卡片字段

以提车应收款为例：

| 区域 | 说明 |
| --- | --- |
| 左上角标签 | 流程类型，如「提车应收款」 |
| 右上角状态 | 审批中 + 当前节点审批人（最多 2 人，超出显示 +N） |
| 加粗标题 | 工作流标题（见 §3.4 标题规则） |
| 副标题 | 合同项目名称等 |
| 元信息 | 发起人、实收金额（提车：选中车辆租金 + 服务费 + 保证金合计，**不含氢费预付款**） |
| 底部 | 发起时间精确至分钟；待办卡片可点「去审批」或整卡进入办理页 |

**还车应结款**：主流程以车牌为主标题并展示应退/应补；四部门子流程主标题为「还车应结款-部门名」，不展示汇总金额。四部门子流程全部通过后，须由**业务管理组主动发起**主流程审批，任务才会进入审批列表。

### 3.4 列表卡片标题规则

| 类型 | 主标题（加粗） | 辅信息 | 金额 |
| --- | --- | --- | --- |
| 主流程「还车应结款」 | **车牌号** | 客户、项目等 | 展示应退 / 应补 |
| 四部门子流程 | **还车应结款-部门名** | 车牌、客户等 | 不展示汇总金额 |
| 提车应收款 | **客户全称** | 合同项目 | 实收金额（见 §3.3） |
| 租赁账单 / 替换车申请 | **客户全称** | — | 按业务 |
| 车辆调拨 | **调拨路线摘要** | — | 按业务 |
| 其他流程 | 摘要或单据号 | — | 按业务 |

部门子流程包括：**还车应结款-业务管理组**、**还车应结款-能源服务组**、**还车应结款-运维组**、**还车应结款-安全部**。

### 3.5 跳转与本期原型范围

**已接入详情页（页内跳转）**：提车应收款、还车应结款（含四部门子类型）、租赁账单、车辆调拨、替换车申请。待办 Tab 展示底部操作栏；其余 Tab 为只读查看态。

**列表占位（点击 Toast 提示，暂无办理页）**：合同审批、氢费对账单（对站/对客）、车辆异动等。演示时可在列表中看到待办，但无法进入完整办理流程。

**审批操作弹窗**：待办详情底部「通过」「驳回」「终止」「评论」均从手机屏幕底部滑出半屏表单（限定在手机预览框内）；通过/驳回/终止除标题外字段一致（通知方式、附件上传、抄送人、审批意见）。「通过」标题为「审批通过」。

### 3.6 更多筛选交互（小程序式）

| 能力 | 规则 |
| --- | --- |
| 底部抽屉 | 「更多筛选」及同类 `.xll-mod-sheet-*` 抽屉从**手机预览框底部**滑出，遮罩与面板相对当前页面模块定位，**不铺满浏览器全屏** |
| 发起人 | 表单行展示「请选择 ›」；点击后弹出底部**滚轮选择器**，选项来自 mock 发起人列表，首项「不限」 |
| 发起时间 | 「开始日期 至 结束日期」两行可点；分别弹出**年 / 月 / 日**三列滚轮，工具栏「取消 / 确定」 |
| 嵌套层级 | 滚轮选择器叠在筛选抽屉之上（`z-index` 更高），同样限定在手机预览框内；选中高亮条在文字下层，不遮挡选项文字 |

---

## 四、还车应结款审批

### 4.1 流程结构

**主工作流**：`还车应结款` — 汇总四部门费用，判定保证金抵扣后的应退/应补。

**四个子流程**（各部门独立提交审批）：

| 子流程 | 提交部门 |
| --- | --- |
| 还车应结款-业务管理组 | 业务管理组 |
| 还车应结款-能源服务组 | 能源服务组 |
| 还车应结款-运维组 | 运维组 |
| 还车应结款-安全部 | 安全部 |

**提交规则**：

1. 四个子流程分别由对应部门填报费用并**独立提交审批**；
2. 四个子流程**全部审批通过**后，**不会自动生成**主流程「还车应结款」审批任务；
3. 须由**业务管理组**在还车结算侧**主动发起**主流程审批，发起后任务进入审批列表；
4. 主流程进入列表后，由财务等环节整体审批；详情页展示四部门子流程通过状态；
5. 四部门未全部通过前，主流程不可发起；若已进入主流程详情，「通过」操作在四部门未全过时仍被拦截。

#### 原型 mock 场景（开发 / 测试对照）

| 场景 | 车牌 | 单据号 | 说明 |
| --- | --- | --- | --- |
| A | 粤B58888F | HC-2026-0418 | 四部门已通过 → 业务管理组已发起 → 主流程在「我的待办」（财务审核） |
| B | 浙F06901F | HC-2026-0625 | 四部门子流程均在待办（审批中）；主流程未发起 |
| C | 苏E12345F | HC-2026-0610 | 四部门已通过 → 业务管理组**尚未发起** → 主流程不出现在列表 |

> 主流程发起人 mock 为业务管理组人员（如陈高伟）；发起时间晚于四部门子流程全部通过时间。

### 4.2 Hero 区规则

| 类型 | Hero 主信息 | 是否展示应退/应补 |
| --- | --- | --- |
| 主流程「还车应结款」 | 应退还总额 / 应补缴总额；保证金、待结算总额、车辆实际租金；「结算明细」抽屉；部门子流程进度 | **是** |
| 业务管理组子流程 | 「还车应结款-业务管理组」+ **车牌重点样式** | 否 |
| 能源服务组子流程 | 「还车应结款-能源服务组」+ 车牌重点样式 | 否 |
| 运维组子流程 | 「还车应结款-运维组」+ 车牌重点样式 | 否 |
| 安全部子流程 | 「还车应结款-安全部」+ 车牌重点样式 | 否 |

**车牌重点样式**：Hero 内展示「车牌号」标签 + 加粗胶囊样式车牌，便于子流程快速识别车辆。

子流程 Hero **不展示**保证金、待结算总额、应退/应补等汇总类金额。

### 4.3 分组费用明细

#### 业务管理组

- 固定费项表格（如 ETC 费用、停车费等）。
- **不含**违章处理违约金、保险上浮（归属安全部）。
- 底部展示本部门应结算总额。

#### 能源服务组

- 氢量差补缴、交/还车氢量、退还单价、预付款退费等。

#### 运维组

- 费项：清洗、保养、维修、车损、工具/证件/广告丢失、送接车服务、轮胎磨损等。
- 表格列：**序号 / 费用项 / 金额 / 无忧包减免**（横向滚动，减免为输入框样式只读展示）。
- **应结算 = 金额 − 无忧包减免**（按行合计后汇总）。

#### 安全部

- **固定费项三行**（由安全部填报）：
  1. 违章处理违约金  
  2. 保险上浮  
  3. 其他违规费用  
- 保留违章统计区：违章次数、已缴/未缴金额等。
- 应结算总额为上述三行费用合计。

#### 部门结算卡片状态标签

各分组费用卡片右上角展示本部门子流程提交状态：

| 状态 | 展示文案 | 触发条件 |
| --- | --- | --- |
| 待提交 | 待提交 | 表单未提交、子流程未发起 |
| 审批中 | 审批中 | 用户已提交子流程审批 |
| 已提交 | 已提交 | 该部门子流程全部审批完成 |
| 已驳回 | 已驳回 | 子流程审批被驳回 |

**主流程详情**：四张分组卡片右上角均展示「已提交」（四部门已全部完成子流程审批，且业务管理组已发起主流程后才可进入主流程详情）。

### 4.4 审批操作

- **审批情况**：纵向时间轴，节点展示审批人头像、状态 Tag、时间与评论气泡。
- **待办态底部**：评论、终止、驳回、通过（规则同提车应收款）。
- **查看态**：隐藏操作栏，仅浏览。

---

## 五、提车应收款审批

### 5.1 页面目标

审批人核对实收金额、车辆明细、氢费预付款（如有）及开票信息。

### 5.2 布局细节

- **车辆明细**：区块标题行（`.tc-section-head`）与首张车辆卡片之间保留 **12px** 上间距，避免标题分隔线与首卡紧贴。
- **审批情况**：时间轴支持评论展示；待办态底部操作同还车应结款。

### 5.3 实收金额口径

| 位置 | 规则 |
| --- | --- |
| 列表卡片 | 选中车辆 **租金 + 服务费 + 保证金 − 减免** 合计（**不含氢费预付款**），由车辆明细动态汇总 |
| 详情 Hero | 与列表卡片**同一口径**，展示实收款总额 |

> **原型缺口**：当前列表已按 §3.3 动态计算，部分 mock 详情 Hero 仍使用静态 `actualAmount` 字段，评审时需对齐（见 `.spec/prototype-review.md`）。

---

## 六、验收要点

请在预览中逐项确认（可提供截图或页面路径反馈）：

- [ ] 打开原型无需登录，默认进入工作台  
- [ ] 左侧可切换 10 个功能页  
- [ ] 导航栏无「需求说明」按钮；PRD 可从标注目录打开  
- [ ] 审批中心「还车应结款」Chip 可筛出主流程 + 四部门子流程  
- [ ] **更多筛选**抽屉在手机预览框内弹出（非全浏览器宽）  
- [ ] **更多筛选**：发起人、发起时间为滚轮选择器（非原生输入框）  
- [ ] **搜索**仅匹配卡片加粗标题（工作流标题）  
- [ ] 子流程列表卡片主标题为「还车应结款-部门名」；主流程卡片以车牌为主标题并展示应退/应补  
- [ ] 四部门子流程详情 Hero 为部门标题 + 车牌重点样式，无汇总金额  
- [ ] 主流程还车应结款 Hero 展示应退/应补、结算明细与四部门子流程进度  
- [ ] 四部门子流程未全部通过时，主流程不可发起；四部门全过但业务管理组未发起时，主流程不出现在列表  
- [ ] 业务管理组无违章违约金、保险上浮；安全部固定三行费项  
- [ ] 运维组费用表含「无忧包减免」列，应结算 = 金额 − 减免  
- [ ] 提车应收款车辆明细首卡与标题间距 12px  
- [ ] 提车列表实收金额与详情 Hero 口径一致（不含氢费预付款）  
- [ ] 审批时间轴展示头像、状态与评论；待办态可操作通过/驳回/终止/评论  

**预览地址示例**：`http://localhost:51721/prototypes/xll-miniapp#page=audit`

---

## 七、关联文档

| 文档 | 位置 |
| --- | --- |
| 小程序总览 | 标注目录「PRD 00｜小程序总览」 |
| 原型评审结论 | `src/prototypes/xll-miniapp/.spec/prototype-review.md` |
| 页面标注 | `page-audit`、`page-audit-return`、`page-audit-pickup` 等 |
