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 至少各验证一次安全区与底部栏表现