小程序-供应商端UI规范-sanqiang-supplier-ui-demo.md 3.6 KB
小程序供应商端 UI 规范（基于 sanqiang-supplier-ui-demo.html）
适用范围：
miniprogram/src/pages/supplier/**
视觉基准（唯一）：mobile-ui/sanqiang-supplier-ui-demo.html
原则：视觉与布局按 Demo 执行；接口/字段/业务流程保持不变。
1. 设计 Token（必须统一）
1.1 颜色
- 主绿：
#0a9f6d - 深绿：
#087f57 - 品牌黄（金额/强调）：
#d6a343（金额可偏深：#be7a12） - 页面背景：
#f3f7f5 - 卡片底色：
#ffffff - 正文：
#1f2a26 - 弱文案：
#6f7e77 - 边框：
#d9e9e1 - 警示（待处理）：
#cf8a19 - 进行中/可用：
#189b65 - 阴影（统一）：
0 8px 20px rgba(10, 159, 109, 0.10)
1.2 字体与字号（视觉层级）
- 字体：
-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif - Header 标题：18px / 字重 700
- Section 标题：16px / 字重 600
- 正文信息：12–13px
- 辅助说明：11–12px
- 金额数字：16px / 字重 700
1.3 圆角/边框/间距
- Header 下缘圆角：24px
- 统计卡圆角：16px
- 工具宫格外壳圆角：16px
- 工具卡圆角：12px
- 任务卡圆角：14px
- 商品缩略卡圆角：10px
- 统一边框：
1px solid var(--border) - 统一卡片间距：section 之间 12px，卡片之间 10px
2. 页面骨架（必须同构）
供应商端“工作台”页面的标准骨架（区块顺序不可随意调整）：
- Header（渐变）
- 标题（左）+ 退出登录（右）
- 站点信息：头像 + 站点名称 + 区域
- 统计卡（悬浮）
- 3 列：待报价询价单 / 我的报价 / 待备货任务
- 常用功能（宫格）
- 4 列布局；每格图标 + 文案
- 待处理备货任务（列表）
- 任务卡：任务号 + 状态标签 + 配送员/截止时间 + 商品横向缩略 + 件数/金额/主按钮
3. 组件样式与结构要点
3.1 Header（header / topline / logout / merchant）
- 渐变：
linear-gradient(145deg, #087f57, #0a9f6d) logout：描边胶囊（白色半透明边框），高度约 36pxmerchant：头像 48×48 圆形，白色 0.24 透明度底
3.2 统计卡（stats / stat）
- 位置：覆盖在 Header 下缘（负 margin 形成悬浮）
- 结构：3 列等宽；数字大、label 小
- 数字色：深绿
#087f57
3.3 功能宫格（tools / tool / icon）
- 4 列；每项最小高度约 74px
- item 背景：
#f8fcfa，边框：#e8f3ee - 图标容器：24×24，圆角 8，底色
#dff1e8
3.4 任务卡（task / tag / goods / foot）
task：白底 + 边框 + 轻阴影tag语义：pending：#fff4dd背景 +#cf8a19字stocking：#e9f9f2背景 +#189b65字
goods：横向滚动缩略卡列表；缩略卡白底 + 细边框money：#be7a12，字号 16px，字重 700btn：主绿实心胶囊按钮（34px 高左右）
4. 状态映射（供应商端）
用于任务卡/列表的状态标签映射建议：
pending_prepare→ 待备货（tag pending）stocking→ 备货中（tag stocking）prepared/picked_up/completed→ 只在详情或历史列表展示（同体系弱化）
5. 实施约定（强约束）
- 禁止“在旧 UI 上微调”：必须先按 Demo 提炼结构与 token，再覆盖旧样式。
- 功能零损失：接口/字段/跳转/按钮行为必须与改造前一致。
- 统一 class 命名：优先复用 Demo 的 class（header/stats/tools/task…），减少“看起来像但不一致”的情况。