# 小程序供应商端 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. 页面骨架（必须同构）

供应商端“工作台”页面的标准骨架（区块顺序不可随意调整）：

1. **Header（渐变）**
   - 标题（左）+ 退出登录（右）
   - 站点信息：头像 + 站点名称 + 区域
2. **统计卡（悬浮）**
   - 3 列：待报价询价单 / 我的报价 / 待备货任务
3. **常用功能（宫格）**
   - 4 列布局；每格图标 + 文案
4. **待处理备货任务（列表）**
   - 任务卡：任务号 + 状态标签 + 配送员/截止时间 + 商品横向缩略 + 件数/金额/主按钮

---

## 3. 组件样式与结构要点

### 3.1 Header（`header / topline / logout / merchant`）

- 渐变：`linear-gradient(145deg, #087f57, #0a9f6d)`
- `logout`：描边胶囊（白色半透明边框），高度约 36px
- `merchant`：头像 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，字重 700
- `btn`：主绿实心胶囊按钮（34px 高左右）

---

## 4. 状态映射（供应商端）

用于任务卡/列表的状态标签映射建议：

- `pending_prepare` → 待备货（`tag pending`）
- `stocking` → 备货中（`tag stocking`）
- `prepared` / `picked_up` / `completed` → 只在详情或历史列表展示（同体系弱化）

---

## 5. 实施约定（强约束）

- **禁止“在旧 UI 上微调”**：必须先按 Demo 提炼结构与 token，再覆盖旧样式。
- **功能零损失**：接口/字段/跳转/按钮行为必须与改造前一致。
- **统一 class 命名**：优先复用 Demo 的 class（header/stats/tools/task…），减少“看起来像但不一致”的情况。