# 小羚羚小程序 · 设计规范（DESIGN）

**版本**：V1.0  
**更新日期**：2026-06-29  
**适用范围**：`src/prototypes/xll-miniapp` 全部页面与内联模块

---

## 1. 产品身份

- **产品**：氢能车辆运营移动端小程序原型（一线运维 / 管理人员）
- **形态**：390×844 手机预览框 + 微信式顶栏（状态栏 / 导航栏 / 胶囊）+ 底部 Tab
- **气质**：务实、清晰、字段可读；偏 Arco Design 中性色 + 品牌绿，非营销页
- **不适用**：桌面宽屏布局、深色模式（本期未定义）

---

## 2. 色彩系统

| Token | 值 | 用途 |
| --- | --- | --- |
| `XLL_GREEN` | `#7AB929` | 主色、Tab 选中、主按钮 |
| `XLL_GREEN_DEEP` | `#6AA322` | 主色深阶、强调文字 |
| `XLL_GREEN_SOFT` | `rgba(122,185,41,0.14)` | 主色浅底、Chip 选中 |
| `COLOR_TEXT` | `#1D2129` | 主文字 |
| `COLOR_TEXT_SEC` | `#4E5969` | 次级文字 |
| `COLOR_MUTED` | `#86909C` | 辅助 / 标签（**仅用于 ≥13px 或非关键信息**） |
| `COLOR_LINE` | `#E5E6EB` | 分割线 |
| `COLOR_BG` | `#FFFFFF` | 卡片 / 顶栏 / 底栏 |
| `COLOR_PAGE` | `#F2F3F5` | 页面底、输入框底 |
| `COLOR_DANGER` | `#F53F3F` | 驳回 / 危险 |
| `COLOR_WARN` | `#FF7D00` | 审批中 / 警告 |
| `COLOR_SUCCESS` | `#00B42A` | 通过 / 成功 |

**流程 accent**（审批卡片色条、类型标签）：按 `AC_FLOW_THEME` 映射，不替代主色。

**对比度**：正文与背景 ≥ **4.5:1**（WCAG AA）；大号标题（≥18px 或 bold ≥14px）≥ **3:1**。

---

## 3. 字体与层级

- **字体栈**：`-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif`
- **移动端正文**：列表标题、表单值、搜索框 **15–16px**
- **辅助信息**：12–13px，不得承载唯一关键决策信息
- **Tab / 底栏标签**：最小 **12px**，推荐 **13px**；避免 11px 作为可读主文案
- **金额 Hero**：28–36px，`font-variant-numeric: tabular-nums`
- **字重**：标题 700–800；正文 500–600；标签 600

---

## 4. 布局与间距

- **手机框**：`max-width: 390px`，圆角 28px，居中于灰底渐变
- **安全区**：底部 sheet / 操作栏使用 `env(safe-area-inset-bottom)`
- **页面内边距**：列表 / 模块横向 **14–16px**
- **卡片**：圆角 **14px**，间距 **12px**，轻阴影 + 1px 浅边框
- **模块根**：`.xll-mod-root` 占满 body，内部滚动；详情 `.xll-mod-detail-wrap`

---

## 5. 核心组件规则

### 5.1 导航

- **顶栏**：高 48px；返回 / 铃铛 **44×44** 触控区；标题居中 17px bold
- **底栏 Tab**：高 52px + safe area；图标 24px + 文字标签；`role="tablist"` + `aria-selected`
- **内页返回**：模块内 `onRegisterBack` 栈式返回（sheet → 详情 → 列表）

### 5.2 列表卡片（`.xll-mod-card`）

- 左侧 **3px** 流程色条（`--mod-accent`）
- 结构：类型标签 + 状态 → 加粗标题 → 副标题 → 元信息 → 底栏时间 + 「去审批」
- 整卡可点；待办态显式按钮
- **必须**：键盘 `focus-visible` 环（2px `XLL_GREEN`）

### 5.3 筛选与搜索

- 搜索框 min-height **44px**，15px 字号
- Chip 高 **36px**；横向滚动
- **更多筛选 / 更多类型**：`.xll-mod-sheet-overlay`，相对手机框 `absolute`，**禁止** Ant Design 全浏览器宽 `Drawer`

### 5.4 滚轮选择器（`.xll-mp-picker-*`）

- 三列年/月/日或单列选项；行高 **44px**
- 高亮条 `z-index: 0`，文字列 `z-index: 1`
- 叠在 sheet 之上

### 5.5 详情 Hero（`.tc-hero`）

- 按流程渐变（提车橙、还车紫、调拨绿等）
- 还车子流程：部门名 + **车牌胶囊**重点样式，不展示汇总金额
- 主流程还车：应退/应补 + 结算明细

### 5.6 底部操作栏（`.tc-action-bar` / `.xll-mod-action-bar`）

- 固定底栏；按钮 min-height **44–48px**
- 待办：评论 | 终止 | 驳回 | 通过（通过为主色填充）
- 审批半屏表单：`.tc-mini-sheet-*`，限定手机框内

### 5.7 反馈

- 操作结果优先 **手机框内** toast / inline 提示
- 避免仅依赖 viewport 级 Ant `message`（与预览框脱节）
-  destructive 操作需半屏确认表单

---

## 6. 动效

- Sheet / 卡片入场：`translateY` / `opacity`，**0.24s ease**
- 按压：`:active` 背景或 `scale(0.98)`，150ms
- **`prefers-reduced-motion: reduce`**：关闭 sheet 动画与卡片入场

---

## 7. 无障碍

- 交互控件 min **44×44px**
- 图标按钮必须 `aria-label`
- 可点击 div/卡片：`role="button"` + `tabIndex={0}` + **`:focus-visible`**
- 表单输入保留可见 focus 环
- 状态不单靠颜色（审批状态含文案）

---

## 8. 禁止做法（Don't）

- 不用 emoji 作功能图标（用 SVG：`IconSearch`、`IconFilter` 等）
- 不在手机预览框外弹出全宽 Ant Drawer（除标注工具等 IDE 层）
- 不用 11px 承载 Tab 标签或列表关键字段
- 不用 `#86909C` 12px 文字表达必须阅读的金额 / 状态
- 不混用两套底部面板模式（sheet vs Ant Drawer）于同一产品主路径

---

## 9. 页面范围

| 路由 | 模块 |
| --- | --- |
| `todo` | 工作台待办卡片 |
| `business` | 业务入口宫格 |
| `audit` | 审批中心（Tab + 筛选 + 详情） |
| `delivery` / `inspection` / `vehicle` / … | 运维办理长表单 |
| `map` / `mine` | 地图、我的 |

---

## 10. Mock 与原型边界

- 数据为前端 mock；toast 表示占位行为
- 标注目录承载 PRD；导航栏不设「需求说明」入口
