# Design System: 订单胶囊 · 小程序

自动生成，来源：packages/theme/src/tokens.mjs。适用微信原生小程序和 Stitch 手机设计稿。
项目：2773591929840013591。布局参考屏幕：1bb0397d959a4b82a2c8b4b86bac9e04「我的订单 · 去嵌套与轻量卡片（精修）」。
本文件从主题源生成，不会自行更新 Stitch 云端；同步记录见 DESIGN.md。正式页面的实现、验收与发布状态分别记录。

## 1. Visual Theme & Atmosphere — 视觉方向

清楚、轻量、克制的现场订单工具。使用微信原生控件和 iOS 分组列表的组织方式。浅色页面承托单层白色内容表面，依靠排版建立层次。
卡片不是默认布局单元：同组资料用连续行组织，只有需要区分独立订单或任务时才使用一级卡片。一个业务层级不等于一个可见容器。
首屏直接进入搜索、任务或资料，不增加营销标题、统计面板或装饰内容。

## 2. Color Palette & Roles — 色彩

| 角色     | 实际色值 | 用途                                 |
| -------- | -------- | ------------------------------------ |
| 品牌蓝   | #2563EB  | 主操作、选中下划线、关键链接         |
| 按压深蓝 | #1D4ED8  | 按压反馈                             |
| 浅蓝     | #EFF6FF  | 次要操作与轻量提示                   |
| 页面底布 | #F7F9FD  | 整页背景                             |
| 白色表面 | #FFFFFF  | 订单与表单分组                       |
| 控件浅底 | #F2F4F8  | 搜索与次要控件                       |
| 主文字   | #1E293B  | 编号、标题、重要业务内容             |
| 辅助文字 | #64748B  | 客户、车牌、日期等辅助资料           |
| 弱提示   | #94A3B8  | 非必要占位和装饰图标，不承担重要状态 |
| 组内分隔 | #F1F3F7  | 连续行之间的细线                     |
| 成功     | #16866F  | 已确认、已保存，配明确文字           |
| 待处理   | #9A6700  | 待确认、待提柜，配明确文字           |
| 错误     | #C73545  | 失败、缺项与冲突                     |

弱提示色不能用于主要业务字段。完整 TP 如需阅读，使用辅助文字色；状态同时有文字，不仅靠颜色。

### 2.1 状态语义 — 不按页面重新配色

| 状态职责                       | 色值    | 示例与边界                                     | 可选状态图标                   |
| ------------------------------ | ------- | ---------------------------------------------- | ------------------------------ |
| 当前进行／请求处理中           | #2563EB | 装货中、保存中；业务进行中不使用请求加载动画   | 仅请求在途用 loading           |
| 等待动作／待确认               | #9A6700 | 待提柜、待确认、待审核；正常等待不是错误       | time，按需使用                 |
| 已成功／已确认                 | #16866F | 已保存、已确认、已完成某一步；只代表本项完成   | check-circle，按需使用         |
| 失败／需修正                   | #C73545 | 保存失败、识别失败、明确拒绝、提交后缺项与冲突 | error-circle，配原因与恢复入口 |
| 未开始／已跳过／无操作的结束态 | #64748B | 不抢当前步骤的注意力；跳过不能画成成功         | circle 或不放图标              |

状态名称来自真实业务，不根据颜色推导新状态。普通未填写、未拍照和等待不是错误；禁用属于交互状态，不等于待处理。所有必要状态使用可读文字，不能只画彩点。
订单列表的阶段状态默认普通文字，无描边、背景药丸或逐行装饰图标。既有已完成步骤小标签可以保留浅绿底／绿色文字，但不能把整个导航、标题或区块刷绿。
同一语义在列表、详情、照片与认证页保持同色。原件已保存和识别失败可同时成立，分别表达；单步完成不能暗示整单验收完成。
派车单把动作与状态分开：文件图标、「派车单」及进入箭头使用品牌蓝，待确认文字使用待处理色，已确认文字使用成功色；不把整条入口一律涂成蓝色或绿色。只有可操作的内容使用链接蓝，不为只读的失败状态添加可点击外观。

## 3. Typography Rules — 字体与信息层级

系统无衬线字体：-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif。编号可用系统等宽字体，中文保持正常字距。

| 信息职责          | 原生规范                   | 说明                             |
| ----------------- | -------------------------- | -------------------------------- |
| 一级订单/合集标题 | 34–36rpx，字重 600–700     | 一眼识别订单，避免全卡文字都加粗 |
| 成员标题          | 600 30rpx/44rpx 系统无衬线 | 单柜 SO 或任务名称               |
| 列表辅助资料      | 26rpx/40rpx 系统无衬线     | 车牌、日期、客户按稳定顺序排列   |
| 次要编号          | 24rpx，行高 36rpx          | 完整 TP，不省略，必要时换行      |
| 标准操作          | 600 28rpx/1.4 系统无衬线   | 明确动作名称                     |
| 行内操作          | 500 26rpx/1.4 系统无衬线   | 复制、文件入口等次操作           |

优先通过信息位置、字重与留白表达层级，不靠整块底色把每一项突出。避免把所有标签和正文做成同等视觉权重。

## 4. Component Stylings — 组件与表面

- 分组表面：白底，圆角 24rpx，外边框为 0，阴影为 none。每条视觉路径最多一层卡片；组内成员不再有独立底色、描边或阴影。
- Cell / CellGroup：一个分组共用一个表面；连续资料行只用细分隔线。右侧放状态或一个次操作，不能再放一串描边按钮。
- Button：圆角 20rpx；标准高度 88rpx；紧凑操作高度 64rpx。任务区一个主操作，次操作浅底，辅助操作采用图标文字。紧凑控件的可点击热区可以扩大，不撑高整条资料行。
- Search：浅底，无外描边，圆角 16rpx，高度 80rpx；查询入口用文字。
- Input：标签、输入、提示分开；组内默认弱边界；错误和焦点使用清楚的边界反馈。必填说明不能只放在占位文字中。
- Tabs：使用文字与下划线，轨道厚度 4rpx，不用多个描边按钮模拟切换。
- 状态：优先普通文字；同屏反复出现的阶段状态不做彩色药丸。确有独立业务意义时才使用 Tag。
- TP、派车单和成员资料不单独包装成小卡片。

实现使用微信原生 WXML、WXSS 与本地图标；设计稿应明确表达布局和交互。

### 4.1 图标 — 用途、几何与实际渲染

- 原生实现使用项目内统一的 SVG 图标；同页沿用同一套图形语言，不混搭 SF Symbols、Lucide、Material Symbols 或 emoji。Stitch/H5 导出优先使用内联 SVG 表达同样语义，不能依赖远程图标字体加载成功。
- 图标用途固定：搜索 search、地点 location、文件入口 file、复制 file-copy、分享 share、进入 chevron-right、展开 chevron-down、收起 chevron-up。底部三入口分别为 add-rectangle／view-list／user。状态图标与动作图标分开，未执行的保存、复制动作不用成功勾选。
- 尺寸档位：行内辅助和状态图标 32rpx，搜索与工具操作 40rpx，底部导航 48rpx；按 750rpx 坐标换算到 390 CSS px，不能把 rpx 直接当 px。同类图标同尺寸，视觉大小不随文案长短变化。
- 自绘导出 SVG 统一 viewBox="0 0 24 24"、2 单位线宽、圆头和圆角连接，等比缩放；原生页面和设计稿使用相同的图形语义。不要混用过粗实心图形与过细线性图形。
- 图文用 flex 居中对齐，间距 8rpx；同一行图标在固定宽度槽位中居中，编号和文字沿统一边界对齐。多行资料的图标对齐首行中心，不悬在整段文字中间；图标不被挤压、拉伸或裁掉。
- 地点、日期等辅助图标使用辅助文字色；可操作图标跟随操作文字；状态图标跟随状态语义。弱提示色不能承担必要状态。Tab 未选中用中性灰、选中用品牌蓝，同一几何图形保持稳定，不凭空增加高亮底块或自造填充版。
- 纯图标操作保留明确的可访问名称与至少 44×44 CSS px 热区；装饰图标不重复朗读，不依赖 emoji 或小图形单独传达操作。
- 导出截图必须看到真实图形：禁止露出 search、content_copy、check_circle、signal_cellular 等英文图标名、方块缺字或错位基线。微信系统导航、胶囊和状态栏在正式小程序由平台绘制，不再复制一套业务图标覆盖。

## 5. Layout Principles — 移动端组织

- Stitch 指定 MOBILE、390 CSS px 宽，一次只生成一个页面和一个明确状态。普通列表参考约 1000px 高；长内容允许自然延伸，不缩小全页来硬塞。
- 尺寸规范为 750rpx 坐标；换算公式：CSS px = rpx × 画布宽度 / 750。不要直接在 390px 画布上把 750rpx 当成 750px，也不要把所有数值机械除以二。
- 页面左右边距 32rpx，分组内边距 32rpx，分组间距 24rpx–28rpx，组内相关行距 16rpx，独立区块间距 48rpx。
- 标题、资料、操作沿固定左边界对齐；将有关信息自然放在同一行，不用每字段一框表达归属。
- 合集是组头、连续成员行和组尾操作；独立订单是摘要和组尾操作。允许业务分层，不增加表面层数。
- 手动表单是分组标题和连续字段；个人中心是个人摘要和设置行；照片页是图片网格和逐图说明。
- 微信系统导航与底部三入口保持一致。设计稿可标示系统区域，正式实现由系统渲染；不画手机机身或页面外说明。
- 主要触控区域至少 44×44 CSS px；可以扩大透明热区。底部操作避开安全区，完整编号与长地点不横向溢出。

## 6. Anti-Patterns — 生成禁区

禁止卡片套卡片、整屏描边控件、边框和阴影叠加、把每个字段做成背景块、把所有操作都做成主按钮。
禁止新增营销 Hero、统计指标、桌面侧栏、图表、插画、装饰图形或未确认功能。
不增加资料字段，不合并不同业务含义，不隐藏完整 TP，不把照片保存或识别成功当成步骤完成。
页面业务内容、权限、流程和状态以当前 PRD 及本次任务为准，样例数据只是原型数据。