小程序供应商端 UI 改造指南（基于 Demo 强约束）

1. 目标与范围

本指南用于指导 miniprogram 供应商端进行一次完整、可验收、可追踪的 UI 改造。
改造原则：视觉样式按 Demo 执行、业务功能保持不变。

视觉基准（唯一）：mobile-ui/sanqiang-supplier-ui-demo.html
规范总结（Token/组件/结构）：docs/小程序-供应商端UI规范-sanqiang-supplier-ui-demo.md
功能基准（保持）：现有供应商端接口、备货/报价业务流、权限与路由保护逻辑
首要目标：首页必须按 Demo 的布局与配色 1:1 落地

2. 总体改造原则

2.1 不受现有 UI 影响

改造时禁止“参考现有页面微调”，必须先从 Demo 提炼设计语言，再反向覆盖现有页面。

2.2 首页强约束（最高优先级）

pages/supplier/home/home.vue 必须完全遵循 Demo 的信息架构、视觉层级、区块顺序与交互节奏。

2.3 功能零损失

不改接口契约（请求参数、响应字段）
不改业务流程（询价单报价、备货任务开始/完成、凭证上传、详情查看、拨号、退出登录）
不改权限与路由保护逻辑（登录态、角色态）
不改功能集合与入口：现有页面已有功能必须原样保留，禁止新增、删减、替换功能项
若设计稿与现有功能不一致：以现有功能为准，设计仅做视觉适配

3. Demo 设计要点提炼（供应商端）

基于 mobile-ui/sanqiang-supplier-ui-demo.html，以下样式点不可偏离：

3.1 页面骨架

顶部渐变头部：标题、退出登录、站点信息
头部下方悬浮统计卡：三列数字统计
常用功能宫格：4 列
待处理备货任务列表：任务卡结构同构

3.2 任务卡结构

第一行：任务号 + 状态标签
第二行：配送员与截止时间（弱文案）
中段：商品缩略横滑列表
底部：件数/金额 + 主按钮

3.3 状态标签语义

pending：浅黄底 + 琥珀字（待备货）
stocking：浅绿底 + 绿色字（备货中）

4. 改造页面清单（供应商端）

主页面（miniprogram/src/pages/supplier）：

home/home.vue：供应商工作台首页（强约束）
inquiry/inquiry.vue：询价单（按同体系卡片/筛选/列表）
quotation/quotation.vue：我的报价（列表卡片统一）
delivery/delivery.vue：备货任务列表（Tab/卡片统一）
delivery/detail/detail.vue：备货任务详情（凭证区/卡片统一）
product/detail.vue：商品详情（已统一到详情 demo 风格；需与供应商体系一致不冲突）
price-list/price-list.vue：价格清单（嵌入明细的外壳与空态统一）
address/address.vue / address/edit.vue：取货地址（卡片/按钮统一）
profile/profile.vue：个人中心（头部/菜单统一）
settings/avatar.vue / settings/password.vue：设置页（卡片/按钮统一）

5. 分批改造计划（推荐执行顺序）

第 0 批：样式基建批（必须先做）

统一 Token（颜色/圆角/间距/阴影/字号）
统一状态映射（tag pending/stocking）
统一卡片/按钮基础样式（形成可复用片段）

第 1 批：首页强约束批（最高优先级）

目标：home/home.vue 与 Demo 逐区块对齐（结构同构、视觉一致），功能保持不变。

验收门槛：

头部/统计/宫格/任务卡顺序与 Demo 一致
任意区块不出现旧风格组件
关键动作可用：退出登录、功能入口跳转、任务卡进详情

第 2 批：任务链路批

delivery/delivery.vue 列表与状态 Tab 同体系
delivery/detail/detail.vue 详情卡片与凭证上传同体系

第 3 批：报价链路批

inquiry/inquiry.vue 筛选/商品行/输入框/保存按钮统一
quotation/quotation.vue 列表卡片与状态标签统一
price-list/price-list.vue 空态与嵌入容器统一

第 4 批：资料与设置批

profile/profile.vue、settings/*、address/* 统一（避免跳转断层）

第 5 批：收口与文档批

清理遗留样式与重复实现
回写规范与改造记录（本文件）

6. 验收标准

6.1 视觉验收

首页信息架构与 Demo 一致（顺序、层级、区块形态）
颜色、间距、圆角、阴影与 Demo 语义一致
供应商端页面之间跳转无“风格断层”

6.2 交互验收

点击态、禁用态、加载态、空态、错误态覆盖完整
拨号、跳转、提交按钮反馈完整

6.3 业务验收

主流程可走通：询价→报价→备货→上传凭证→完成
首页功能入口与改造前保持一致（数量、名称、行为、跳转一致）

7. 变更记录（模板）

说明：供应商端每次 UI 改造完成后，必须新增一条记录。建议按时间倒序维护（最新在上）。

[YYYY-MM-DD] 批次名称（示例：第 1 批-首页强约束批）

改造页面：
- miniprogram/src/pages/supplier/home/home.vue
视觉变更点：
- 头部/统计卡/宫格/任务卡按 sanqiang-supplier-ui-demo 同构改造
功能保持说明：
- 保持现有接口与字段不变
- 保持原有业务流程不变（询价、报价、备货、凭证、拨号、退出）
联调与验收结果：
- 通过 / 未通过（填写具体问题）
遗留问题：
- 无 / 有（列出具体待办）

小程序-供应商端UI改造指南.md 5.4 KB Постоянная ссылка История Исходник