主题
Mall 电商系统 · 页面设计文档总索引
版本：v3.0（色值落地 + 暗色模式 + 组件状态矩阵 + 错误边界 + 骨架屏动效规格） 本目录是 Mall 电商系统全部页面的产品设计规范，从产品经理视角定义"每个页面为什么存在、如何设计、如何验收"。 任何页面的新增或改版，必须先有本目录下的设计文档，再进入开发。
一、文档体系结构
docs/design/
├── index.md ← 本文档（总索引）
├── design-system.md ← 统一设计系统（前后台共同遵守的底层规范）
│
├── portal/ ← 前台商城（C端消费者）
│ ├── 00-overview.md 产品概览：定位/画像/信息架构/导航/核心流程
│ ├── 01-home.md 首页与商品发现（首页/分类/搜索/品牌/专题）
│ ├── 02-product.md 商品详情页
│ ├── 03-trade.md 交易流程（购物车/确认订单/支付）
│ ├── 04-order.md 订单中心与售后
│ ├── 05-member.md 会员中心（个人/地址/密码/收藏/历史/优惠券）
│ └── 06-account.md 账号体系与帮助中心（登录/注册/帮助/举报）
│
├── uml/ ← UML 模型图（产品经理视角）
│ ├── index.md UML 图总索引（22 张图阅读指引）
│ ├── 00-architecture.md 系统架构 + 模块依赖
│ ├── 01-use-cases.md 前台/后台用例图
│ ├── 02-activities.md 核心业务流程图
│ ├── 03-state-machines.md 订单/退货/会员状态机
│ ├── 04-data-models.md 6 大业务域 ER 图
│ └── 05-sequences.md 关键交互序列图
│
└── admin/ ← 后台管理（B端运营团队）
├── 00-overview.md 产品概览：定位/角色权限模型/信息架构/布局范式
├── 01-dashboard.md 仪表盘
├── 02-pms.md 商品管理（商品/分类/类型属性/品牌/运费模板）
├── 03-oms.md 订单管理（订单/发货/退货/订单设置）
├── 04-sms.md 营销管理（优惠券/秒杀/推荐位/广告）
├── 05-cms.md 内容管理（专题/话题/优选/帮助/举报处理）
└── 06-ums.md 用户与权限（会员/等级/账号/角色/菜单/资源）二、阅读指引
| 你是谁 | 推荐阅读顺序 |
|---|---|
| 新加入的产品/设计 | design-system.md → portal/00 → admin/00 → 具体页面 |
| 前端开发 | design-system.md（组件/状态规范）→ 负责模块的页面文档 |
| 后端开发 | 对应模块页面文档（业务规则/状态机）→ admin/00（权限模型） |
| 测试 | 各页面文档末尾的"验收标准（AC-xxx）" |
| 产品经理 | 全部，重点 00-overview 与 design-system |
| 需要理解系统全貌 | uml/index.md → 架构图 → 用例图 → 状态机 → 流程图 |
三、统一设计系统速览
详见 design-system.md，核心要点：
- 8 大设计原则：目标导向 / 效率优先 / 信息分层 / 状态可见 / 防错可逆 / 一致性 / 移动优先（前台）/ 桌面高效（后台）
- 终端策略：前台移动优先响应式（375px 基准，1200px 上限）；后台桌面优先（1280px 起）
- 布局骨架：前台 = 吸顶TopBar + 内容区 + 底部TabBar；后台 = 侧边栏 + 顶栏 + TagsView + 内容区
- 状态色约定：待处理=橙 / 完成=绿 / 失败=红 / 中性=灰 / 强调=蓝（全站统一）
- 四态必备：每个数据区域必须设计 空态/加载/错误/无结果
- 弹窗/抽屉/页面选择：≤5字段用Dialog，6-15字段用Drawer，>15字段用独立页面
- 文案规范：金额 ¥1,299.00；删除确认说明后果；错误提示含原因+建议
- 色值对照：全部 Token 提供 HSL + HEX 双格式，开发可直接复制
- 暗色模式：完整 Token 映射表，后台支持暗色切换
- 组件状态矩阵：Input/Select/Switch/Button/TableRow 全部覆盖 6 种交互状态
- 全局错误边界：403/404/500/网络断开/Token过期/接口超时 统一降级策略
- 响应式断点：前台 4 档（xs/sm/md/lg）+ 后台 4 档（sm/md/lg/xl）
- 骨架屏规格：6 种标准骨架组件 + 13 个页面级骨架映射 + 11 种动效规格
大厂标准专项规范（v2.1 新增，详见 design-system.md 第 9-15 节）：
| 专项 | 核心要求 |
|---|---|
| 无障碍（9） | WCAG 2.1 AA：对比度 4.5:1、键盘可达、焦点可见、触控 ≥44px、不只靠颜色传达信息 |
| 动效系统（10） | 时长刻度 100/200/300ms、快进慢出、动效服务反馈不做装饰 |
| 图标规范（11） | 尺寸 16/20/24、统一 2px 线性、公认隐喻、纯图标按钮配 aria-label |
| 层级系统（12） | z-index 全站唯一刻度（吸顶100/下拉1000/抽屉1500/弹窗2000/Toast3000） |
| 性能规范（13） | LCP≤2.5s / INP≤200ms / CLS≤0.1；图片 WebP 懒加载；乐观更新 |
| 安全隐私（14） | 密码强度条、手机号脱敏、协议勾选、会话过期回跳 |
| 数据可视化（15） | 图表选型（趋势折线/对比柱/占比饼）、色盲友好、空数据不渲染空轴 |
| 骨架屏与动效（17） | 6 种标准骨架组件 + 13 个页面骨架映射 + 11 种动效规格 |
四、前台页面清单（Portal）
| 页面 | 路由 | 优先级 | 设计文档 |
|---|---|---|---|
| 登录入口页 | / | P0 | 06-account.md |
| 首页 | /portal/home | P0 | 01-home.md |
| 分类页 | /portal/category | P0 | 01-home.md |
| 搜索页 | /portal/search | P0 | 01-home.md |
| 品牌推荐页 | /portal/brands | P1 | 01-home.md |
| 专题详情页 | /portal/subject/:id | P1 | 01-home.md |
| 商品详情页 | /portal/product/:id | P0 | 02-product.md |
| 购物车 | /portal/cart | P0 | 03-trade.md |
| 确认订单 | /portal/checkout | P0 | 03-trade.md |
| 支付 | /portal/pay/:orderId | P0 | 03-trade.md |
| 订单列表 | /portal/orders | P0 | 04-order.md |
| 订单详情 | /portal/orders/:id | P0 | 04-order.md |
| 申请售后 | /portal/return-apply | P1 | 04-order.md |
| 个人中心 | /portal/member | P1 | 05-member.md |
| 收货地址 | /portal/member/address | P1 | 05-member.md |
| 修改密码 | /portal/member/password | P2 | 05-member.md |
| 我的收藏 | /portal/member/collection | P2 | 05-member.md |
| 浏览历史 | /portal/member/history | P2 | 05-member.md |
| 我的优惠券 | /portal/coupon | P1 | 05-member.md |
| 会员注册 | /portal/register | P0 | 06-account.md |
| 帮助中心 | /portal/help | P2 | 06-account.md |
五、后台页面清单（Admin）
| 模块 | 页面 | 路由 | 优先级 | 设计文档 |
|---|---|---|---|---|
| — | 仪表盘 | /admin/home | P0 | 01-dashboard.md |
| PMS | 商品列表 | /pms/product | P0 | 02-pms.md |
| PMS | 新增/修改商品 | /pms/addProduct | P0 | 02-pms.md |
| PMS | 商品分类 | /pms/productCate | P0 | 02-pms.md |
| PMS | 商品类型/属性 | /pms/productAttr | P0 | 02-pms.md |
| PMS | 品牌管理 | /pms/brand | P0 | 02-pms.md |
| PMS | 运费模板 | /pms/feightTemplate | P1 | 02-pms.md |
| OMS | 订单列表 | /oms/order | P0 | 03-oms.md |
| OMS | 订单详情 | /oms/orderDetail | P0 | 03-oms.md |
| OMS | 退货申请处理 | /oms/returnApply | P0 | 03-oms.md |
| OMS | 订单设置 | /oms/orderSetting | P1 | 03-oms.md |
| OMS | 退货原因设置 | /oms/returnReason | P1 | 03-oms.md |
| SMS | 优惠券列表 | /sms/coupon | P0 | 04-sms.md |
| SMS | 秒杀活动 | /sms/flash | P1 | 04-sms.md |
| SMS | 品牌推荐 | /sms/brand | P1 | 04-sms.md |
| SMS | 新品推荐 | /sms/new | P1 | 04-sms.md |
| SMS | 人气推荐 | /sms/hot | P1 | 04-sms.md |
| SMS | 专题推荐 | /sms/subject | P1 | 04-sms.md |
| SMS | 广告列表 | /sms/advertise | P1 | 04-sms.md |
| CMS | 专题管理 | /cms/subject | P1 | 05-cms.md |
| CMS | 话题管理 | /cms/topic | P2 | 05-cms.md |
| CMS | 优选专区 | /cms/preferenceArea | P2 | 05-cms.md |
| CMS | 帮助管理 | /cms/help | P1 | 05-cms.md |
| CMS | 举报处理 | /cms/memberReport | P1 | 05-cms.md |
| UMS | 会员列表 | /ums/member | P0 | 06-ums.md |
| UMS | 会员等级 | /ums/memberLevel | P0 | 06-ums.md |
| UMS | 用户列表 | /ums/admin | P0 | 06-ums.md |
| UMS | 角色列表 | /ums/role | P0 | 06-ums.md |
| UMS | 菜单列表 | /ums/menu | P0 | 06-ums.md |
| UMS | 资源列表 | /ums/resource | P0 | 06-ums.md |
六、页面文档编写规范
每份页面设计文档遵循统一结构（见 design-system.md 第 16 节）：
- 页面定位 —— 为什么存在？服务谁的什么决策？
- 核心指标 —— 用什么数据衡量这个页面的成功？
- 页面结构 —— 信息架构与布局（ASCII 线框）
- 功能模块 —— 每个区块的功能、字段、交互规则
- 业务规则 —— 字段校验、状态流转、边界条件
- 状态设计 —— 空态/加载/错误/无结果
- 体验优化 —— 用户视角的优化点（分 P0/P1/P2 优先级）
- 验收标准 —— AC-xxx 格式的可测试条件
命名约定：验收标准编号 = AC- + 页面缩写 + 序号（如 AC-P01 商品详情、AC-OL01 订单列表）。
七、设计评审与变更流程
- 新增页面：PM 先产出页面设计文档 → 设计评审（PM/UI/前后端/测试）→ 通过后进入开发
- 变更页面：修改对应设计文档并标注版本 → 同步评审 → 开发
- 验收依据：测试用例以文档中的"验收标准（AC-xxx）"为基准编写
- 文档即事实：当实现与文档不符时，以文档为准修复实现；若文档有误，先修订文档再改实现