主题
Mall 电商系统 · 统一设计系统
版本：v3.0（色值落地 + 暗色模式 + 组件状态矩阵 + 错误边界 + 响应式细则） 适用范围：前台商城（Portal）+ 后台管理（Admin） 本文档是所有页面设计的底层约束，任何页面设计必须遵循本规范。 CSS 实现文件：
shadcn-variables.css（Token 定义）、design-system.css（全局规范工具类）
1. 设计原则
| # | 原则 | 释义 | 落地要求 |
|---|---|---|---|
| P1 | 目标导向 | 每个页面只服务一个核心任务 | 页面设计先回答"用户来这里做什么决策"，再谈布局 |
| P2 | 效率优先 | 减少点击数、减少思考成本 | 高频操作 ≤3 步可达；默认值覆盖 80% 场景 |
| P3 | 信息分层 | 重要信息先看到，次要信息按需展开 | 首屏只放决策必需信息；详情用折叠/抽屉/次级页 |
| P4 | 状态可见 | 任何操作都有即时、明确的状态反馈 | 加载/成功/失败/空态四态必备，禁止"无响应"交互 |
| P5 | 防错与可逆 | 危险操作需确认，操作可撤销 | 删除/批量操作二次确认；提供"撤销"或"恢复"路径 |
| P6 | 一致性 | 前后台同一套语言体系 | 同一概念全站统一命名；同类页面统一布局骨架 |
| P7 | 移动优先（前台） | 前台以移动端体验为基准设计 | 前台先保证 375px 可用，再向桌面增强 |
| P8 | 桌面高效（后台） | 后台以桌面端高密度操作为基准 | 后台信息密度可高于前台，但单行操作不超过 5 个 |
2. 用户与终端
2.1 前台商城（Portal）
- 目标用户：C 端消费者（18-45 岁，有网购习惯）
- 终端策略：移动优先的响应式 H5
- 基准视口：375px（iPhone SE）
- 内容最大宽度：1200px（桌面居中展示）
- 断点：
<768px单列移动布局 /768-1199px平板 /≥1200px桌面
- 使用场景：碎片化浏览（通勤/睡前）、目的性购买（搜索直达）、比价决策
2.2 后台管理（Admin）
- 目标用户：商家运营人员（运营/客服/仓管/财务/超管）
- 终端策略：桌面优先 Web 应用
- 最小支持宽度：1280px
- 推荐视口：1440px+
- 使用场景：长时间高频操作、批量处理、数据核对
3. 布局规范
3.1 前台布局骨架
┌─────────────────────────────────────┐
│ 顶部栏 TopBar（吸顶） │ 64px：Logo + 搜索 + 购物车 + 用户
├─────────────────────────────────────┤
│ │
│ 内容区 Content │ 最大宽度 1200px 居中
│ （页面主体，可滚动） │ 移动端全宽，左右留白 16px
│ │
├─────────────────────────────────────┤
│ 底部导航 TabBar（移动端吸底） │ 56px：首页/分类/购物车/我的
│ 页脚 Footer（桌面端展示） │ 链接矩阵 + 备案信息
└─────────────────────────────────────┘规则：
- TopBar 全站吸顶，滚动不消失
- 移动端展示底部 TabBar（首页/分类/购物车/我的 4 项），桌面端隐藏 TabBar 展示 Footer
- 交易流程页（结算/支付）隐藏 TabBar，避免跳出
- 内容区背景色
--background，卡片背景色--card
3.2 后台布局骨架
┌──────────┬──────────────────────────────────────┐
│ │ 顶栏 Header（56px） │ 面包屑 + 用户信息
│ 侧边栏 ├──────────────────────────────────────┤
│ Sidebar │ 标签页 TagsView（40px，可关闭） │
│ (210px) ├──────────────────────────────────────┤
│ │ │
│ 可折叠 │ 内容区 Content │ 内边距 24px
│ →64px │ （页面主体，独立滚动） │ 最大宽度 1600px
│ │ │
└──────────┴──────────────────────────────────────┘规则：
- 侧边栏深色底，两级菜单（一级模块 + 二级页面）
- TagsView 支持多标签页切换与关闭，保留浏览上下文
- 内容区独立滚动，侧边栏与顶栏固定
- 列表页内容区最大宽度 1600px，超宽屏居中
3.3 栅格与间距
| 场景 | 栅格 | 间距基数 |
|---|---|---|
| 前台商品流 | 移动 2 列 / 平板 3 列 / 桌面 4-5 列 | 12px（移动）/ 16px（桌面） |
| 前台内容区 | 单列流式，卡片间距 16px | 16px |
| 后台表单 | 24 栅格，标签对齐方式：右对齐 | 表单项间距 22px |
| 后台卡片 | 卡片间距 16px，卡片内边距 20px | 8 的倍数 |
全局间距刻度：4 / 8 / 12 / 16 / 20 / 24 / 32 / 48（只允许使用这些值）
4. 色彩与视觉 Token
4.1 语义色板（前后台统一）
| Token | 用途 | HSL 值 | HEX 值 | 使用约束 |
|---|---|---|---|---|
--primary | 品牌主色、主按钮、关键链接、选中态 | 221 83% 53% | #2563EB | 一个视图内主按钮 ≤1 个 |
--primary-hover | 主色悬停态 | 221 83% 45% | #1D4ED8 | 按钮/链接 hover |
--primary-active | 主色按下态 | 221 83% 38% | #1E40AF | 按钮 active |
--success | 成功状态、正向数据（上架/已完成/上涨） | 142 76% 36% | #16A34A | 仅状态表达，不做装饰 |
--warning | 警告状态、待办事项（待处理/待发货） | 38 92% 50% | #F59E0B | 配合文字说明，不单独用色 |
--destructive | 危险操作（删除）、负向数据（下跌/失败） | 0 84% 60% | #EF4444 | 删除按钮必须用此色 |
--destructive-hover | 危险色悬停态 | 0 84% 50% | #DC2626 | 删除按钮 hover |
--foreground | 主文字色 | 222 84% 5% | #0F172A | 标题、正文、表格 |
--muted-foreground | 次要文字、辅助说明 | 215 16% 47% | #64748B | 正文以外的描述性文字 |
--border | 分割线、卡片边框、输入框边框 | 214 32% 91% | #E2E8F0 | 1px 实线 |
--input | 输入框边框色（同 border） | 214 32% 91% | #E2E8F0 | focus 时切换为 --ring |
--ring | 焦点环色（同 primary） | 221 83% 53% | #2563EB | 2px 描边，无障碍焦点 |
--background | 页面底色 | 0 0% 100% | #FFFFFF | 内容区背景 |
--card | 卡片/面板底色 | 0 0% 100% | #FFFFFF | 浮于 background 之上 |
--muted | 骨架屏/禁用背景 | 210 40% 96% | #F1F5F9 | 不可交互区域底色 |
--accent | 表格选中行/悬停行背景 | 210 40% 96% | #F1F5F9 | 列表行选中态 |
4.2 字体层级
| 层级 | 字号 | 字重 | 用途 |
|---|---|---|---|
| H1 | 24px | 600 | 后台页面标题 |
| H2 | 20px | 600 | 前台楼层标题 / 后台卡片标题 |
| H3 | 16px | 600 | 卡片内小标题 / 商品名 |
| Body | 14px | 400 | 正文、表格内容 |
| Caption | 12px | 400 | 辅助说明、时间戳、标签 |
| Price | 16-24px | 700 | 价格专用，前台价格用品牌色 |
4.3 圆角与阴影
- 圆角统一
--radius: 8px；按钮 8px、卡片 8px、输入框 8px、标签 4px、头像圆形 - 阴影三级：
shadow-card：卡片默认（轻）shadow-hover：卡片悬停（中）shadow-dialog：弹窗/下拉（重）
4.4 暗色模式 Token 映射
暗色模式通过
.dark类激活，所有 Token 自动映射，无需业务代码额外处理。
| Token | 亮色 HEX | 暗色 HEX | 映射策略 |
|---|---|---|---|
--background | #FFFFFF | #0F172A | 页面底色反转为深色 |
--foreground | #0F172A | #F8FAFC | 主文字反转为浅色 |
--card | #FFFFFF | #1E293B | 卡片比背景浅一档，保持层级 |
--primary | #2563EB | #3B82F6 | 主色提亮，保证对比度 ≥4.5:1 |
--success | #16A34A | #22C55E | 语义色提亮 |
--warning | #F59E0B | #FBBF24 | 语义色提亮 |
--destructive | #EF4444 | #F87171 | 语义色提亮 |
--border | #E2E8F0 | #334155 | 边框加深，保持可见性 |
--muted | #F1F5F9 | #1E293B | 骨架屏/禁用背景 |
--muted-foreground | #64748B | #94A3B8 | 次要文字提亮 |
--sidebar-background | #0F172A | #020617 | 侧边栏更深一档 |
暗色模式规则：
- 暗色模式下阴影加深 1 级（
shadow-card→shadow-hover强度） - 图片/图标在暗色下降低亮度 10%（
filter: brightness(0.9)） - 当前版本后台支持暗色切换，前台默认亮色（后续版本开放）
4.5 响应式断点细则
前台（移动优先）
| 断点 | 视口宽度 | 布局策略 | 商品列数 | 间距基数 |
|---|---|---|---|---|
xs | <375px | 单列，全宽 | 2 列 | 12px |
sm | 375-767px | 单列，全宽 | 2 列 | 12px |
md | 768-1199px | 双栏/三栏 | 3 列 | 16px |
lg | ≥1200px | 内容居中 1200px | 4-5 列 | 16px |
后台（桌面优先）
| 断点 | 视口宽度 | 布局策略 | 侧边栏 | 表格列 |
|---|---|---|---|---|
sm | <1280px | 不推荐，提示升级 | 折叠为 64px | 隐藏次要列（排序值/创建时间） |
md | 1280-1439px | 标准布局 | 可折叠 210/64px | 全列展示，操作列固定 |
lg | 1440-1919px | 推荐视口 | 210px 展开 | 全列 + 内容区最大 1600px 居中 |
xl | ≥1920px | 宽屏优化 | 210px 展开 | 内容区最大 1600px 居中，两侧留白 |
后台响应式规则：
- 侧边栏折叠阈值：视口 <1440px 时默认折叠，用户可手动展开
- 表格操作列始终固定在右侧，不随水平滚动消失
- 面包屑在窄屏下自动省略中间层级（如“商品 / 商品列表”省略为“商品列表”）
5. 组件使用规范
5.1 按钮
| 类型 | 场景 | 约束 |
|---|---|---|
| 主按钮 Primary | 页面唯一核心动作（提交订单/保存） | 同一视图 ≤1 个 |
| 次按钮 Default | 常规操作（查询/重置/编辑） | 不限数量 |
| 文字按钮 Text | 表格行内操作、弱操作 | 行内操作 ≤5 个，超出收进"更多" |
| 危险按钮 Danger | 删除、作废 | 必须配合二次确认 |
尺寸：后台默认 32px；前台主操作按钮 44px（移动端触控标准）；行内按钮 24-28px。
5.2 表格（后台专用）
- 必备列：序号/标识列 + 业务列 + 状态列 + 操作列
- 状态列必须用标签 Tag 表达，禁止纯文字
- 操作列固定在右侧，按钮用文字按钮
- 分页固定在表格底部右侧，展示"共 N 条"
- 列宽：时间列 160px、状态列 100px、操作列按按钮数 120-180px
- 长文本列必须
show-overflow-tooltip
5.3 表单
- 标签位置：后台右对齐（宽度统一 100px）；前台顶对齐（移动端友好）
- 必填项标红星
*，置于标签前 - 校验时机：失焦校验单字段，提交校验全表单
- 错误提示：字段下方红字，不用弹窗报错
- 一个表单只允许一个主提交按钮
5.4 弹窗 vs 抽屉 vs 新页面
| 信息量 | 载体 | 场景举例 |
|---|---|---|
| 轻量（≤5 个字段） | 对话框 Dialog | 修改排序、处理举报 |
| 中量（6-15 个字段） | 抽屉 Drawer | 编辑优惠券、退货详情 |
| 重量（>15 字段或多步骤） | 独立页面 | 添加商品、订单详情 |
规则：弹窗/抽屉内禁止再弹弹窗；删除确认统一用 MessageBox.confirm。
5.5 标签 Tag 状态色约定（全站统一）
| 状态语义 | 颜色 | 举例 |
|---|---|---|
| 进行中/待处理 | warning 橙 | 待付款、待发货、待审核、未处理 |
| 成功/完成 | success 绿 | 已完成、已上架、已处理、已发货 |
| 失败/关闭 | danger 红 | 已取消、已下架、审核拒绝 |
| 中性/无效 | info 灰 | 草稿、已过期、已忽略 |
| 强调/特殊 | primary 蓝 | 默认项、推荐中 |
5.6 搜索与筛选（后台列表页标准结构）
[筛选卡片] 输入框/下拉 + [查询] [重置]
[工具栏] 左侧：新增按钮 右侧：批量操作
[表格]
[分页]- 筛选条件 ≤6 个直接平铺；>6 个收起为"展开更多"
- 查询不自动触发，必须点“查询”（避免频繁请求）
- 重置 = 清空筛选 + 回到第 1 页 + 重新查询
5.7 组件状态矩阵
每个可交互组件必须覆盖以下 6 种视觉状态，禁止遗漏。
5.7.1 输入框（Input / Textarea）
| 状态 | 边框色 | 背景色 | 文字色 | 附加表现 |
|---|---|---|---|---|
| Default | --border | --card | --foreground | 占位符用 --muted-foreground |
| Hover | --muted-foreground | --card | --foreground | 边框色加深 |
| Focus | --ring | --card | --foreground | 2px 焦点环，光标闪烁 |
| Disabled | --border | --muted | --muted-foreground | 禁止点击，cursor: not-allowed |
| Error | --destructive | --card | --foreground | 下方红字错误提示 |
| Readonly | --border | --muted | --foreground | 可选中不可编辑 |
5.7.2 下拉选择（Select）
| 状态 | 表现 |
|---|---|
| Default | 同 Input Default |
| Hover | 同 Input Hover |
| Focus | 同 Input Focus + 下拉面板展开 |
| Disabled | 同 Input Disabled + 箭头置灰 |
| Error | 同 Input Error |
| 已选中 | 显示选中值，未选中时显示占位符“请选择” |
5.7.3 开关（Switch）
| 状态 | 表现 |
|---|---|
| 开 | 填充 --primary，圆点右侧 |
| 关 | 填充 --border，圆点左侧 |
| Hover | 填充色加深 10% |
| Disabled | 透明度 0.5，禁止点击 |
| Loading | 圆点内显示微型 spinner |
5.7.4 按钮（Button）补充交互态
| 状态 | 表现 |
|---|---|
| Default | 背景 --primary，文字 --primary-foreground |
| Hover | 背景 --primary-hover |
| Active | 背景 --primary-active，轻微缩放 0.98 |
| Focus | 2px --ring 描边，offset 2px |
| Disabled | 透明度 0.5，cursor: not-allowed |
| Loading | 文字前显示 spinner，禁止点击 |
5.7.5 表格行（Table Row）
| 状态 | 背景色 | 说明 |
|---|---|---|
| Default | --card | 默认白底 |
| Hover | --accent | 鼠标悬停行高亮 |
| Selected | --accent + 左侧 2px --primary 色条 | 复选框勾选 |
| Disabled | --muted | 不可操作行置灰 |
| Striped | --muted (50% 透明度) | 斑马纹，可选开启 |
6. 交互与反馈规范
6.1 加载状态
| 场景 | 表现 |
|---|---|
| 页面首屏加载 | 骨架屏 Skeleton（前台）/ 表格 loading（后台） |
| 局部刷新 | 区域 loading 遮罩 |
| 按钮提交 | 按钮进入 loading 态并禁用，防重复提交 |
| 下拉加载更多 | 底部 loading 提示（前台列表） |
6.2 操作反馈
| 操作结果 | 反馈方式 | 时长 |
|---|---|---|
| 轻量成功（收藏/加购） | 顶部轻提示 Message | 2s 自动消失 |
| 重要成功（下单/支付） | 结果页（独立页面） | 常驻 |
| 失败 | 错误提示，说明原因 + 建议动作 | 3s |
| 危险操作 | 确认弹窗，说明后果 | 手动关闭 |
6.3 空状态（四态必备）
每个数据区域必须设计四种状态：
| 状态 | 文案范式 | 举例 |
|---|---|---|
| 空数据 | 说明 + 引导动作 | "购物车还是空的，去逛逛 →" |
| 加载中 | 骨架屏/转圈 | — |
| 加载失败 | 说明 + 重试按钮 | "网络开小差了，点击重试" |
| 无搜索结果 | 说明 + 建议 | "没有找到相关商品，换个关键词试试" |
6.4 页面跳转
- 前台：商品详情从列表进入保留返回位置（滚动位置记忆）
- 后台：详情类页面用 TagsView 新标签打开，列表页保持不销毁
- 登录拦截：需登录页面未登录时跳转登录，登录后回跳原页面
6.5 全局错误边界
所有未捕获异常必须友好降级，禁止白屏。
| 错误类型 | HTTP 状态 | 页面表现 | 操作引导 |
|---|---|---|---|
| 403 无权限 | 403 | 插画 + “你没有访问该页面的权限” | [返回首页] [联系管理员] |
| 404 页面不存在 | 404 | 插画 + “你访问的页面不存在” | [返回首页] [返回上一页] |
| 500 服务器错误 | 500 | 插画 + “服务器开小差了” | [点击重试] [返回首页] |
| 网络断开 | — | 顶部红色横幅“网络连接已断开” | 自动检测恢复后自动重连 |
| Token 过期 | 401 | 轻提示“登录已过期” + 跳转登录 | 登录后回跳原页面 |
| 接口超时 | — | 10s 超时提示 + 重试按钮 | “请求超时，请检查网络后重试” |
错误边界规则：
- 前台：错误页复用统一插画组件，保持品牌一致性
- 后台：错误页展示当前用户角色信息，引导联系超管
- 网络状态：顶部监听
navigator.onLine，断网时全局横幅常驻 - API 层：Axios 拦截器统一处理 401/403/500，业务代码无需重复处理
7. 文案规范
7.1 通用文案
| 场景 | 标准文案 | 禁用 |
|---|---|---|
| 删除确认 | "确定删除该{对象}吗？删除后不可恢复" | "你确定吗？" |
| 提交成功 | "{对象}成功"（保存成功/提交成功） | "OK" |
| 加载中 | "加载中..." | 空白 |
| 空购物车 | "购物车还是空的" + "去逛逛" | "暂无数据" |
| 未登录 | "登录后查看更多" + "去登录" | "请先登录！" |
7.2 文案原则
- 用"你"不用"您"（前台亲和）；后台用中性陈述句
- 按钮文案用动宾结构：「新增商品」「批量发货」，不用「点击这里」
- 错误文案必须包含原因 + 建议："库存不足，请减少购买数量"
- 金额统一保留 2 位小数，千分位分隔：
¥1,299.00 - 时间统一
yyyy-MM-dd HH:mm:ss（后台）/ 友好格式（前台：今天/昨天/x分钟前）
8. 前后台一致性映射表
同一业务概念在前后台的命名必须一致：
| 业务概念 | 前台叫法 | 后台叫法 | 状态枚举（统一） |
|---|---|---|---|
| 订单状态 | 待付款/待发货/待收货/已完成/已取消 | 同左 | 0待付/1待发/2待收/3完成/4取消 |
| 商品状态 | 在售/已下架 | 上架/下架 | 1上架/0下架 |
| 售后状态 | 待审核/待退货/待收货/已完成/已拒绝 | 同左 | 0-4 |
| 优惠券状态 | 未使用/已使用/已过期 | 未领取/已领取/已过期 | 按业务定义 |
| 举报状态 | — | 未处理/已处理 | 0/1 |
9. 无障碍规范（Accessibility）
大厂硬性门槛。目标：WCAG 2.1 AA 级。
9.1 色彩对比度
| 元素 | 最低对比度 | 说明 |
|---|---|---|
| 正文文字 | 4.5:1 | 对背景色 |
| 大号文字（≥18px 加粗 / ≥24px） | 3:1 | 标题、价格 |
| 图形/UI 组件边界 | 3:1 | 输入框边框、图表线条 |
| 禁用态 | 不作强制 | 但必须可辨识为"不可用" |
9.2 不能只靠颜色传达信息
- 状态必须「色彩 + 文字/图标」双通道：如订单状态用 Tag 文字而非色块
- 表单错误：红字 + 错误图标 + 文字说明，不能只标红
- 图表：系列用颜色区分时，同时用不同形状符号（圆点/菱形）
9.3 键盘与焦点
- 所有可交互元素可用
Tab顺序到达，焦点顺序符合视觉流 - 焦点态可见：2px
--ring色描边，禁止outline: none后无替代 Esc关闭弹窗/抽屉/下拉；Enter触发默认按钮- 弹窗打开后焦点移入弹窗，关闭后归还触发元素
9.4 触控与视觉辅助
- 移动端可点击目标 ≥ 44×44px（含隐性热区）
- 图片必须有
alt；纯装饰图alt="" - 图标按钮必须有
aria-label（如购物车图标按钮） - 表单控件必须关联
<label>，错误提示用aria-describedby关联 - 尊重系统「减少动态效果」偏好（
prefers-reduced-motion） - 不禁止浏览器缩放，字号随系统设置可放大
10. 动效系统（Motion）
动效服务于反馈与空间关系，不做装饰性炫技。
10.1 时长与缓动
| 时长 | 场景 | 缓动曲线 |
|---|---|---|
| 100ms | 微交互（按钮按压、开关） | ease-out |
| 200ms | 常规过渡（弹窗淡入、颜色变化） | cubic-bezier(0.4, 0, 0.2, 1) |
| 300ms | 大位移（抽屉滑出、页面切换） | 进入用减速曲线，退出用加速曲线 |
10.2 动效原则
- 有意义：每个动效回答"发生了什么/元素从哪来到哪去"
- 不打断：动效期间用户可继续操作，长动效可被中断
- 快进慢出：进入动效比退出快，减少等待感
- 全站一致：同类元素用同一动效语言
10.3 标准场景
| 场景 | 动效 |
|---|---|
| 按钮点击 | 100ms 轻微缩放/涟漪 |
| 弹窗 | 淡入 + 中心缩放 200ms |
| 抽屉 | 侧滑 300ms + 遮罩淡入 |
| 轻提示 Toast | 顶部滑入 200ms，自动滑出 |
| 加购成功 | 商品缩略图抛物线飞入购物车图标 + 角标弹跳 |
| 页面切换 | 淡入 200ms（后台 TagsView 切换） |
| 骨架屏 | 微光扫过（shimmer） |
11. 图标使用规范
| 规则 | 标准 |
|---|---|
| 尺寸 | 16px（行内辅助）/ 20px（按钮导航）/ 24px（卡片标题），同一场景统一 |
| 线宽 | 统一 2px 线性描边风格，禁止线性与面性混用 |
| 语义 | 使用公认隐喻（放大镜=搜索、垃圾桶=删除、齿轮=设置），禁止生僻比喻 |
| 图标+文字 | 图标在左，间距 4-8px；重复操作可只用图标（需 tooltip） |
| 颜色 | 默认继承文字色；选中/激活态用语义色 |
| 可访问性 | 纯图标按钮必须配 aria-label 或 tooltip |
12. 层级与浮层系统（Z-index）
12.1 层级刻度（全站唯一，禁止自定义）
| 层级 | z-index | 元素 |
|---|---|---|
| 基础内容 | 0 | 页面普通内容 |
| 吸顶元素 | 100 | 前台 TopBar、后台 Header、吸顶筛选 |
| 表格吸附列 | 500 | 后台表格固定列 |
| 下拉浮层 | 1000 | Select/DatePicker 弹层、Dropdown |
| 抽屉 | 1500 | Drawer + 遮罩 |
| 弹窗 | 2000 | Dialog + 遮罩 |
| 轻提示 | 3000 | Message/Toast |
| 文字提示 | 4000 | Tooltip |
12.2 浮层规则
- 遮罩：弹窗/抽屉遮罩
rgba(0,0,0,0.45)；点击遮罩可关闭（重要表单除外） - 同一时刻只允许一个弹窗；弹窗内禁止再弹窗（用抽屉或分步替代）
- Toast 最多同时堆叠 3 条，新的在上
- 浮层打开时锁定底层滚动（移动端防穿透）
13. 性能与感知体验规范
13.1 性能预算（Core Web Vitals）
| 指标 | 目标 | 说明 |
|---|---|---|
| LCP（最大内容绘制） | ≤ 2.5s | 首屏主图/主内容 |
| INP（交互响应） | ≤ 200ms | 点击/输入反馈 |
| CLS（累积布局偏移） | ≤ 0.1 | 图片/广告必须预留尺寸 |
13.2 图片规范
- 格式：优先 WebP，降级 JPG/PNG
- 体积：列表缩略图 ≤50KB，详情大图 ≤200KB，Banner ≤300KB
- 首屏外图片懒加载；
<img>必须声明宽高防 CLS - 加载失败显示统一占位图
13.3 感知性能（让等待不难受）
| 策略 | 应用 |
|---|---|
| 乐观更新 | 收藏/加购/开关：先更新 UI 再发请求，失败回滚并提示 |
| 骨架屏 | 与实际布局同构，避免"闪烁"；加载 <300ms 不显示骨架 |
| 渐进加载 | 长列表滚动加载；后台表格虚拟滚动（>100 行） |
| 超时兜底 | 接口 10s 超时提示 + 重试；>2s 显示 loading |
| 防抖节流 | 搜索输入 300ms 防抖；滚动事件节流 |
14. 安全与隐私 UX
| 场景 | 规范 |
|---|---|
| 密码输入 | 默认掩码 + 可切换明文（眼睛图标）；注册时显示强度条（弱/中/强） |
| 敏感信息 | 列表中手机号脱敏 138****8888；地址仅在详情/编辑页完整展示 |
| 协议授权 | 注册/下单需用户主动勾选协议，协议可点开查看全文 |
| 会话安全 | 登录态过期前提醒；过期后跳转登录并回跳；表单内容尽量保留 |
| 防钓鱼 | 任何页面不主动索要密码；密码页展示安全提示 |
| 退出登录 | 清除本地敏感数据（token/用户信息） |
| 验证码 | 图形/短信验证码防暴力破解；发送按钮 60s 倒计时 |
15. 数据可视化规范
15.1 图表选型
| 目的 | 图表 | 约束 |
|---|---|---|
| 趋势 | 折线图 | 系列 ≤5 条 |
| 对比 | 柱状图 | 类目 ≤12 个，超出横向条形图 |
| 占比 | 饼图/环形图 | 类目 ≤6 个，其余合并"其他" |
| 分布 | 散点图 | 仅后台数据分析场景 |
15.2 图表通用规则
- 颜色：用语义色板，单图 ≤6 色；避免红绿同时大面积出现（色盲友好）
- 坐标轴：柱状图 Y 轴必须从 0 开始；网格线用虚线弱化
- 图例：置于底部或顶部，可点击切换系列显隐
- 数值：金额千分位；大数用「万/亿」单位；tooltip 显示精确值
- 空数据：显示"暂无数据"占位，不渲染空坐标轴
- 交互：hover 显示 tooltip；关键图表支持时间范围切换
16. 页面设计文档编写规范
本目录下所有页面设计文档按以下结构编写（PM 视角）：
- 页面定位：这个页面为什么存在？服务什么用户的什么决策？
- 核心指标：这个页面要提升什么数据（转化率/停留时长/处理效率）？
- 页面结构：信息架构与布局（线框描述）
- 功能模块：每个区块的功能、字段、交互规则
- 业务规则：字段校验、状态流转、边界条件
- 状态设计：空态/加载/错误/无结果
- 体验优化：用户视角的优化点（分优先级）
- 验收标准：AC-xxx 格式的可测试条件
17. 骨架屏与动效规格（全站统一）
所有页面的加载态与动效必须复用以下标准骨架组件，禁止各页面自定义。
17.1 全局骨架组件库
17.1.1 商品卡片骨架（ProductCard Skeleton）
┌────────────────┐
│ ██████████████ │ 1:1 正方形灰块，圆角 8px
│ ██████████████ │
│ ██████████████ │
├────────────────┤
│ ██████████ │ 商品名：2 行灰条，宽 80%/60%
│ ██████ │
├────────────────┤
│ ████████ │ 价格：宽 40%，高 16px
├────────────────┤
│ ██████ │ 销量：宽 30%，高 12px
└────────────────┘- 尺寸：与真实商品卡片完全一致（移动 2 列 / 桌面 4-5 列）
- 动画：shimmer 微光扫过（1.5s 循环）
- 颜色：背景
--muted，微光foreground/6%
17.1.2 表格行骨架（TableRow Skeleton）
│ ☐ │ ██ │ ████████ │ ██████ │ ████ │ ██████ │ ██████ │- 每行高度与实际表格行一致（48px）
- 列宽按比例：复选框 40px / 缩略图 40px / 名称 30% / 其余均分
- 显示 5-8 行（与实际数据行数一致）
17.1.3 指标卡片骨架（MetricCard Skeleton）
┌────────────────┐
│ ████████ │ 标题：宽 50%，高 14px
│ ████████████ │ 数值：宽 70%，高 28px
│ ██████ │ 辅助：宽 40%，高 12px
└────────────────┘- 用于仪表盘、会员中心等指标卡片区
- 卡片数量与实际一致（如 6 卡片 = 6 个骨架）
17.1.4 订单卡片骨架（OrderCard Skeleton）
┌──────────────────────────────────┐
│ ████████████ ████████ │ 订单号 + 状态
├──────────────────────────────────┤
│ ██ ██████████ ██████ ████ │ 商品图 + 名 + 价 + 数量
├──────────────────────────────────┤
│ ██████████████ ████████ │ 合计 + 操作按钮
└──────────────────────────────────┘- 用于订单列表、售后列表
- 显示 3-5 个卡片骨架
17.1.5 Banner 骨架（Banner Skeleton）
- 桌面：5:2 比例灰块，高度 300px
- 移动：2:1 比例灰块，高度 180px
- 圆点指示器位置显示 3 个灰色小圆点
17.1.6 表单骨架（Form Skeleton）
- 标签列：宽 100px 灰条，右对齐
- 输入框列：宽 100%，高 32px，圆角 8px
- 显示 4-6 行（与实际表单字段数一致）
17.2 页面级骨架映射表
| 页面 | 骨架组合 | 动画策略 |
|---|---|---|
| 首页 | Banner + 商品卡片×8 + 专题卡片×2 | 各楼层独立加载，先到先显 |
| 分类页 | 左侧栏 8 行灰条 + 右侧宫格 12 灰块 | 左右同时加载 |
| 搜索页 | 排序栏灰条 + 商品卡片×8 | 排序栏立即显示，商品区骨架 |
| 商品详情 | Banner + 价格灰条 + 标题灰条 + 详情灰块 | 从上到下渐进显示 |
| 购物车 | 商品行骨架×3 + 底部结算栏灰条 | 底部栏立即显示，商品区骨架 |
| 确认订单 | 地址卡 + 商品行×2 + 金额灰条 | 整体骨架，一次性显示 |
| 订单列表 | Tab 栏 + 订单卡片×3 | Tab 立即显示，卡片区骨架 |
| 订单详情 | 状态头部 + 物流卡 + 地址卡 + 商品行×2 | 从上到下渐进 |
| 会员中心 | 用户头部 + 资产栏 + 订单入口 + 功能列表 | 整体骨架 |
| 优惠券 | Tab 栏 + 券卡片×3 | Tab 立即显示，券区骨架 |
| 后台仪表盘 | 指标卡×6 + 待办列表 + 图表区 + 表格 | 各模块独立加载 |
| 后台列表页 | 筛选区灰条 + 表格行×8 + 分页灰条 | 筛选区立即显示，表格区骨架 |
| 后台表单页 | 卡片×2-3 + 表单骨架 | 整体骨架 |
17.3 动效规格表
| 动效场景 | 时长 | 缓动 | 实现 |
|---|---|---|---|
| 骨架屏微光 | 1.5s 循环 | linear | ds-shimmer 动画 |
| 页面淡入 | 200ms | ease-decelerate | ds-fade-in 动画 |
| 弹窗淡入 + 缩放 | 200ms | ease-standard | opacity 0→1 + scale 0.95→1 |
| 抽屉侧滑 | 300ms | ease-decelerate | translateX 100%→0 + 遮罩淡入 |
| Toast 滑入 | 200ms | ease-decelerate | translateY -100%→0 |
| 按钮按压 | 100ms | ease-out | scale 1→0.98→1 |
| 加购成功 | 300ms | ease-decelerate | 抛物线飞入 + 角标弹跳 |
| 开关切换 | 200ms | ease-standard | 背景色过渡 + 圆点位移 |
| Tab 切换 | 200ms | ease-standard | 下划线滑动 + 内容淡入 |
| 卡片悬停 | 200ms | ease-standard | shadow-card → shadow-hover |
| 骨架屏→内容 | 200ms | ease-decelerate | 骨架 opacity 1→0，内容 opacity 0→1 |