# BX Mobile UI 规范（Fresh Mint）

> 适用范围：`bx/bx-mobile`（Vue 3 + Vant 4）  
> 设计基线：`bx/报销业务/mobile-ui-demo/v1-fresh-mint.html`  
> 目标：将移动端报销业务页面统一为「清新薄荷」视觉与交互体系。

---

## 1. 设计目标与风格

- 风格关键词：清爽、轻量、业务优先、卡片化。
- 信息层级：先“状态与动作”，再“明细内容”。
- 页面节奏：标题/概览 -> 筛选/快捷动作 -> 列表卡片 -> 底部操作。

---

## 2. Token 与主题

统一使用 `src/styles/index.css` 中变量，不在页面内重复定义主色。

- 主色：`--primary: #00c98d`，深色：`--primary-dark: #00a874`
- 主背景：`--primary-bg: #eafff6`
- 文本：`--text / --text-secondary / --text-muted`
- 语义色：`--success / --warning / --danger / --info / --processing`
- 圆角：卡片 `12px`，输入/按钮 `8px`，大弹层 `16px`
- 阴影：默认 `--shadow`，强调卡片 `--shadow-md`

Vant 覆盖要求：

- `van-button--primary`、`van-tabs__line`、`van-tabbar-item--active`、`van-loading` 全部对齐主色。
- `van-nav-bar` 使用浅薄荷底，标题为深薄荷色。

---

## 3. 页面骨架

### 3.1 基础容器

- 页面内容容器统一使用 `.page`（`padding: 12px 16px 80px`）。
- 底部固定操作栏统一使用 `.bottom-action-bar`，并带 `env(safe-area-inset-bottom)`。

### 3.2 全宽组件

下列组件使用“突破 `.page` 左右 padding”的全宽规则（已在全局样式定义）：

- `van-nav-bar`
- `van-search`
- `van-tabs`
- `van-pull-refresh`

---

## 4. 首页规范（菜单卡片式）

- 结构：欢迎头部 -> 菜单宫格 -> 待办卡片。
- 欢迎头部可展示：用户身份、核心指标、审批进度环形图。
- 菜单宫格建议 `3~4` 列，支持消息红点。
- 待办区域使用卡片列表，单项包含：标题、来源/时间、主操作按钮。

---

## 5. 登录页规范

- 结构：品牌区 -> 登录卡片 -> 底部链接。
- 登录卡片字段：账号、密码、记住账号（可选）。
- 必备交互：
  - 密码可见切换
  - 登录按钮 loading + 防重复提交
  - 错误态（红框 + 错误文案）
- 建议反馈链路：字段错误 -> toast 提示 -> 保留用户输入。

---

## 6. 卡片列表规范（报销单/审批单）

- 卡片内容：
  - 第一行：单号/标题 + 状态标签
  - 第二行：金额（重点）+ 时间/人员
  - 第三行：摘要信息
  - 底部：操作按钮组
- 操作按钮规则：
  - 首要操作主色（如“查看/提交”）
  - 次要操作中性描边
  - 危险操作红色
  - 异步操作必须 loading

---

## 7. 费用项选择（一级/二级）

- 交互载体：底部 Sheet。
- 布局：左侧一级分类，右侧二级分类（联动）。
- 必备能力：
  - 关键词搜索（一级/二级都可匹配）
  - 最近使用
  - 已选路径回显：`一级 / 二级`
  - 未完成选择时禁用“确定”

---

## 8. 树形列表规范

- 用于组织/部门/单据等层级数据浏览。
- 必备视觉元素：
  - 缩进 + 连线 + 展开箭头
  - 节点图标（按类型区分）
  - 选中高亮
  - 节点状态标签/计数
- 交互：
  - 点击父节点展开/收起
  - 点击任意节点进入选中态
  - 筛选后自动展开命中路径

---

## 9. 状态与文案语义

- `success`：已通过 / 已完成
- `warning`：待处理 / 待审批
- `danger`：驳回 / 异常 / 风险
- `info`：处理中 / 审核中
- `muted`：草稿 / 已关闭 / 中性信息

文案原则：短句、动词优先、避免技术术语暴露给最终用户。

---

## 10. 交互与可用性

- 所有可点击卡片、按钮必须有按下反馈（缩放或底色变化）。
- 所有异步行为必须体现状态（loading、disabled、结果反馈）。
- 空态必须显示图标 + 说明 + 主操作。
- 图片/附件区统一预览样式，避免每页各自定义。

---

## 11. 开发落地建议（bx-mobile）

- 优先复用现有全局类：
  - `card` / `card-header` / `card-body`
  - `status-tag`
  - `apply-list-item`
  - `bottom-action-bar`
- 新页面开发顺序：
  1. 先搭骨架（page / header / list / bottom bar）
  2. 再套 token
  3. 最后补交互（loading / 错误态 / 回显）
- 避免在 `scoped` 中重复写 token 与 Vant 覆盖，优先回收到 `src/styles/index.css`。

---

## 12. 验收清单

- 视觉：配色、圆角、阴影、间距与规范一致
- 交互：登录、提交、筛选、弹层均有 loading/禁用/错误反馈
- 结构：首页、登录、列表、详情、表单风格统一
- 终端：iOS/Android 至少各验证一次安全区与底部栏表现