22 KiB
22 KiB
小程序端 UI 规范（山峡化工）
适用范围：
miniprogram（客户端 / 供应商端 / 配送员端）及工作台 WebView 业务 H5（web-admin/m/**）
设计基准文件（Demo）：
mobile-ui/sanqiang-client-ui-demo.htmlmobile-ui/sanqiang-client-cart-ui-demo.htmlmobile-ui/sanqiang-client-order-ui-demo.htmlmobile-ui/sanqiang-client-profile-ui-demo.htmlmobile-ui/sanqiang-supplier-ui-demo.htmlmobile-ui/sanqiang-deliverer-ui-demo.html- 工作台 WebView 列表卡（新标准）：
bak/mobile-ui/shanxia-mp-crm-customer-list-card-demo.html、shanxia-mp-crm-product-list-card-demo.html- 工作台 WebView 确认弹窗：
bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html- 工作台 WebView 过渡对照（非新标）：
bak/mobile-ui/shanxia-mp-crm-pl-cert-style-align-demo.html（旧 expense-card）- 附件宫格参考：
miniprogram/pages/bx/invoice/mine.vue（我的发票夹）- 设计说明：
docs/superpowers/specs/2026-10-18-mp-webview-flat-list-card-standard-design.md
目录
- 设计目标与适配范围
- 设计 Token（颜色 / 字体 / 间距 / 圆角）
- 三端统一视觉骨架
- 客户端页面规范
- 供应商端页面规范
- 配送员端页面规范
- 组件规范（分类、卡片、结算条、状态标签、菜单宫格）
- 交互与可用性规范
- 页面改造检查清单
- 约束与落地策略
- 从 Demo 到 uni-app 的 class 映射建议
- 工作台 WebView 业务页（CRM / 危化品证等）
1. 设计目标与适配范围
- 目标：在不改变业务流程的前提下，提升小程序三端的视觉一致性、操作效率和信息可读性。
- 原则：
- 同品牌：统一绿色与大麦黄品牌感。
- 同骨架：标题区、统计区、功能区、任务/列表区的结构节奏一致。
- 角色可分：允许角色页面在信息密度和状态强调上有差异，但不打破整体系统。
- 设备宽度：以
375px为主基线，兼容414px。
2. 设计 Token（颜色 / 字体 / 间距 / 圆角）
2.1 颜色
// 品牌主色
$brand-green: #0a9f6d;
$brand-green-dark: #087f57;
$brand-green-soft: #e9f9f2;
// 品牌辅助
$barley-yellow: #d6a343;
$barley-yellow-soft: #fff7e8;
// 中性色
$bg-page: #f5f8f7;
$surface: #ffffff;
$text-primary: #1f2a26;
$text-muted: #6b7b74;
$border: #dcebe4;
// 语义色
$danger: #d14343;
$warning: #cf8a19;
$success: #189b65;
2.2 字体与字号
- 字体：
-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif - 标题：
18px / 20px - 正文：
13px / 14px - 辅助：
11px / 12px - 数字金额：
16px / 20px，建议半粗体以上（600/700）
2.3 间距与圆角
- 间距节奏：
8 / 10 / 12 / 14 / 16 - 卡片圆角：
12px / 14px / 16px - 大容器圆角：
18px / 22px - 胶囊按钮：
14px / 17px / 20px
3. 三端统一视觉骨架
3.1 页面结构
- 顶部 Header（渐变品牌区）
- 统计或关键提示区（可选）
- 功能入口区（宫格）
- 主业务区（商品/任务/订单列表）
- 底部固定区（仅客户端：首页结算条 + TabBar）
3.2 Header 统一规则
- 渐变：绿色系
linear-gradient(145deg, $brand-green-dark, $brand-green) - 标题左对齐，退出/操作按钮右对齐
- 下缘采用较大圆角（20~24px）形成模块感
自定义导航与微信胶囊（SHALL）
- 使用
navigationStyle: custom的页面，业务顶栏 SHALL 避开状态栏与右上角胶囊。 - 量纲 SHALL 来自
statusBarHeight与getMenuButtonBoundingClientRect（见utils/safeArea.js）。 - CSS 变量：
--sq-safe-top、--sq-nav-height、--sq-header-height、--sq-capsule-right-safe；微信端 SHALL 通过顶栏根节点内联 style 注入，不得仅依赖 H5document。 - 白底顶栏：总高
--sq-header-height，内容行高--sq-nav-height，右侧列预留--sq-capsule-right-safe，该列 SHALL NOT 放置可点击业务按钮。 - 渐变大头：
padding-top含--sq-safe-top，padding-right含--sq-capsule-right-safe。
3.3 卡片与容器
- 默认白底 + 浅边框（
$border） - 阴影轻量，避免厚重
- 卡片内部信息按“标题 -> 次级说明 -> 操作”组织
4. 客户端页面规范
4.1 首页（sanqiang-client-ui-demo.html）
- 顶部：地址 + 搜索框
- 分类区：
- 一级分类为“两行五列（每页 10 个）”
- 多页横向滑动，页数对应滑块数量
- 滑块支持点击翻页
- 二级分类：左侧竖向列表 + 右侧商品区
- 商品卡：图、名称、规格、价格、加购按钮
- 底部结算条：数量、总价、去结算主按钮
4.2 购物车（sanqiang-client-cart-ui-demo.html）
- 供应站分组展示
- 商品行含规格、价格、加减数量器
- 结算区固定在底部，主按钮突出
4.3 订单（sanqiang-client-order-ui-demo.html）
- 顶部状态筛选（全部/待支付/待配送/配送中/已完成）
- 订单卡片显示：订单号、状态、时间、配送节点、金额
- 操作按钮按主次分层（主按钮优先关键操作）
4.4 个人中心（sanqiang-client-profile-ui-demo.html）
- 头部用户信息 + 统计
- 常用功能列表（地址/发票/结算/退款/客服）
- 优惠券与退出登录操作置于可快速触达区域
5. 供应商端页面规范
对应：sanqiang-supplier-ui-demo.html
- 结构：工作台头部 -> 统计 -> 常用功能 -> 备货任务列表
- 常用功能采用 4 列宫格，标签简短直观
- 任务卡展示关键信息：
- 任务号
- 状态标签（待备货 / 备货中）
- 配送员与截止时间
- 商品缩略信息
- 件数与金额、主操作按钮
6. 配送员端页面规范
对应：sanqiang-deliverer-ui-demo.html
- 与供应商端保持同风格、同配色、同布局节奏
- 功能菜单放在任务列表上方（与供应商端摆放逻辑一致）
- 任务区域需突出：
- 取货信息
- 配送信息
- 联系动作
- 件数和主操作按钮（如“导航并取货”）
7. 组件规范
7.0 商品图片与多媒体规范（强约束）
目的：统一三端商品图片展示口径，避免运营上传图片后在不同页面“变形/撑高/被截断”。
7.0.1 商品主图（列表缩略图）
- 推荐比例：
1:1（正方形） - 推荐尺寸：
800×800~2000×2000像素（JPG/PNG/WebP） - 小程序展示规则：
- 列表/购物车/订单/任务里的商品缩略图容器为固定方图
- 图片采用 居中裁切填充（
aspectFill）：非 1:1 的图片会被裁切到方形，主体请尽量居中
7.0.2 商品轮播图（详情页顶部 Banner）
- 推荐比例：
4:3 - 推荐尺寸：宽度约
750px（例如750×562） - 小程序展示规则：
- 详情页顶部轮播区域按 4:3 容器展示
- 图片采用 居中裁切填充（
aspectFill）：非 4:3 的图片会被裁切，主体请尽量居中
7.0.3 商品详情媒体（详情图/视频列表）
- 图片比例：不强制比例（建议宽度约
750px） - 小程序展示规则（图片）：
- 采用 宽度自适应高度（
widthFix）：图片按屏幕宽度铺满，高度随原图等比变化 - 建议避免在图片最顶部/最底部放置关键小字，留出适当上下留白以适配不同机型
- 采用 宽度自适应高度（
- 小程序展示规则（视频）：
- 建议
720p以内，并尽量缩短时长以利加载
- 建议
7.1 分类卡片（客户端首页）
- 每页 2 行 * 5 列
- 卡片允许“无背景/无边框”简洁样式，但激活态需可辨识
- 图标/图片占位应较大（提高扫读效率）
7.2 分类分页滑块
- 有几页就有几个滑块
- 当前页滑块高亮
- 可点击切换页，并与滑动同步
7.3 状态标签
warning：待处理（琥珀）success：进行中/完成（绿色系）danger：异常/风险（红色）- 避免同屏过多高饱和颜色
7.4 底部结算条（客户端）
- 信息结构：数量 -> 总价 -> 主按钮
- 主按钮保持最高视觉优先级
- 结算条整体与页面保持品牌一致（浅色底或深色底二选一，保持统一）
7.5 功能宫格
- 推荐 3 或 4 列
- 图标尺寸、文字字号、卡片高度统一
- 文案优先“动词 + 对象”（如：查看任务、我的报价）
8. 交互与可用性规范
- 触达尺寸：可点击元素不小于
44x44 - 点击反馈：按钮/卡片需有明确反馈（颜色/阴影/位移之一）
- 滑动冲突：一级分类横滑区域不要与主内容纵向滚动冲突
- 信息层级：同一块内容避免超过 2 个主视觉焦点
- 文本策略：长文本省略 + 关键字段完整可见（订单号、金额、状态）
9. 页面改造检查清单
- 是否遵循本规范 Token（颜色/间距/圆角/字号）
- 三端是否保持同品牌风格和一致骨架
- 客户端分类是否满足“2 行 5 列 + 分页滑块”
- 配送员端菜单是否在任务列表上方
- 供应商端与配送员端配色和组件风格是否一致
- 底部结算条层级是否清晰、按钮是否突出
- 状态标签颜色语义是否一致
- 若为工作台 WebView 业务页：是否满足第 12 节清单
10. 约束与落地策略
- 以本文档、
mobile-ui/sanqiang-*.html，以及工作台 WebView 扁平列表卡 Demo（客户/产品 list-card）为小程序 / WebView UI 改造的视觉权威；style-align / expense-card 仅作过渡对照。 - 改造时优先顺序：
- 统一 Token
- 统一布局骨架
- 页面组件映射
- 细节与动效优化
- 后续新增页面需先在本规范补充“页面结构和组件映射”，再落代码。
11. 从 Demo 到 uni-app 的 class 映射建议
目的：让开发可直接按 Demo 结构迁移到
miniprogram/src/pages/**.vue，减少“重命名 + 重排”成本。
建议：优先保留 Demo class 名，若历史页面已存在 class，可做“旧类名 = 新类名别名”过渡。
11.1 客户端首页映射（pages/client/home/home.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 页面根容器 | phone |
client-home-page |
| 顶部头部 | top, top-row, search |
client-header, client-header-row, client-search |
| 一级分类分页容器 | first-level |
client-first-level |
| 一级分类分页项 | first-page |
client-first-page |
| 一级分类卡片 | first-chip |
client-first-chip |
| 一级分类滑块组 | first-level-indicator |
client-first-indicator |
| 一级分类滑块项 | indicator-dot |
client-first-indicator-dot |
| 分类主布局 | category-layout |
client-category-layout |
| 二级分类侧栏 | second-level, second-item |
client-second-level, client-second-item |
| 商品区 | goods-area, goods-list, goods-card |
client-goods-area, client-goods-list, client-goods-card |
| 底部结算条 | cart-bar, cart-inner, settle |
client-cart-bar, client-cart-inner, client-settle-btn |
11.2 客户端购物车映射（pages/client/cart/cart.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 页面头部 | top, title, sub |
cart-header, cart-title, cart-sub |
| 店铺分组卡 | store, store-head, store-name |
cart-store-card, cart-store-head, cart-store-name |
| 商品行 | item, thumb, name, spec |
cart-item-row, cart-item-thumb, cart-item-name, cart-item-spec |
| 数量控制 | qty, qbtn, qnum |
cart-qty, cart-qty-btn, cart-qty-num |
| 底部结算 | bar, total, btn |
cart-footer, cart-total, cart-checkout-btn |
11.3 客户端订单映射（pages/client/order/order.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 顶部筛选 | tabs, tab |
order-tabs, order-tab-item |
| 订单卡 | order, head, no |
order-card, order-card-head, order-no |
| 状态标签 | status pending/delivering |
order-status status-pending/status-delivering |
| 订单商品摘要 | goods, img, meta |
order-goods-row, order-goods-thumb, order-goods-meta |
| 卡片底部动作 | ft, actions, btn |
order-footer, order-actions, order-action-btn |
11.4 客户端个人中心映射（pages/client/profile/profile.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 头部用户区 | header, user, avatar, name |
profile-header, profile-user, profile-avatar, profile-name |
| 统计区 | stats, s |
profile-stats, profile-stat-item |
| 功能列表 | card, row, left, arrow |
profile-menu-card, profile-menu-row, profile-menu-left, profile-menu-arrow |
| 退出按钮 | logout |
profile-logout-btn |
11.5 供应商端映射（pages/supplier/home/home.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 头部 | header, topline, merchant |
supplier-header, supplier-header-top, supplier-merchant |
| 统计卡 | stats, stat |
supplier-stats, supplier-stat-item |
| 功能宫格 | tools, tool, icon |
supplier-tools, supplier-tool-item, supplier-tool-icon |
| 任务列表 | tasks, task |
supplier-task-list, supplier-task-card |
| 任务状态 | tag pending/stocking |
supplier-task-tag tag-pending/tag-stocking |
11.6 配送员端映射（pages/deliverer/home/home.vue）
| Demo 区块 | Demo class | 建议 uni-app class |
|---|---|---|
| 头部与统计 | 同供应商结构 | deliverer-header, deliverer-stats |
| Tab 区 | tabs, tab |
deliverer-tabs, deliverer-tab-item |
| 菜单宫格（在任务上方） | tools, tool |
deliverer-tools, deliverer-tool-item |
| 任务卡 | task, line1, status |
deliverer-task-card, deliverer-task-head, deliverer-task-status |
| 取货/配送信息块 | blk, phone-row, dial |
deliverer-info-block, deliverer-phone-row, deliverer-dial-btn |
11.7 危化品证上传 H5（运输管理）
- 列表路径
/m/pl/plan-cert，详情路径/m/pl/plan-cert/:id，均复用MpWebviewShell；视觉骨架以第 12 节扁平折叠卡为准（绿顶栏 + 可选业务 Tab + 三栏筛选含「更多」+ 扁平卡）；存量 expense-card / style-align 为过渡，改造时迁到 12.3。SHALL NOT 再使用与骨架冲突的独立密集cert-*工具条 / Chip 硬挤。 - 卡片列表与左右边界留白约 12px；详情为独立页面，顶部只保留普通绿顶栏和固定标题，不使用票根、Hero 或记录摘要等特殊区。
- 业务规则：筛选与齐备/上传权限、详情段次与产品信息、证书上传分组等仍服从运输业务与既有 API；不展示导出。
- 附件上传确认对齐第 12.5 节发票夹宫格；确认弹窗对齐第 12.6 节；375px/414px 无整页横滚，触达 ≥ 44px。
11.8 实施建议（迁移顺序）
- 先挂 class，不改业务逻辑：先在现有模板上补 class，确保样式可落。
- 再替换样式变量：将页面颜色/间距替换为本规范 Token。
- 最后收敛重复样式：把通用样式抽到
src/styles或公共组件。 - 状态类统一命名：统一
tag-*/status-*，减少后续维护成本。 - 交互类保持语义化：如
*-indicator-dot、*-checkout-btn，便于后续脚本绑定。
12. 工作台 WebView 业务页（CRM / 危化品证等）
列表卡权威 Demo（新标准）：
bak/mobile-ui/shanxia-mp-crm-customer-list-card-demo.html、shanxia-mp-crm-product-list-card-demo.html
确认弹窗 Demo：bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html
过渡对照（非新标）：bak/mobile-ui/shanxia-mp-crm-pl-cert-style-align-demo.html（旧 expense-card）
OpenSpec：openspec/changes/zkxw-engineering-standards/specs/ui-conventions/spec.md→「工作台 WebView 业务页」
设计说明：docs/superpowers/specs/2026-10-18-mp-webview-flat-list-card-standard-design.md
色板：本节与全文 §2 一致，主色#0a9f6d，禁止 Fresh Mint#10b981。
适用于小程序工作台菜单打开的 H5（/m/crm/*、/m/pl/plan-cert 等）。参考实现：客户管理、产品管理。附件宫格仍参考「我的发票夹」。
12.1 列表页骨架（自上而下）
| 顺序 | 区块 | 说明 |
|---|---|---|
| 1 | 绿顶栏 | 返回、标题（固定页面名）；胶囊搜索可放在顶栏内（对齐 MpBusinessHeader） |
| 2 | 业务 Tab（可选） | 仅业务有多视图/多状态时出现（如客户视图）；不是每页必有；无需要时不硬塞状态 Tab |
| 3 | 三栏筛选 | 紧贴搜索下方；固定 3 格：前 2 项京东式下拉，第 3 项「更多」 |
| 4 | 列表卡片 | 见 12.3 扁平折叠卡；与左右边界留白（约 12px）；条数汇总在卡片之后；滚到底继续加载，不再放「加载更多」按钮 |
| 5 | Speed Dial / 批量底栏 | 新增用右下角「＋」；批量仅勾选后出底栏 |
禁止：顶栏下再堆「新增 / 筛选 / 显示 / 刷新」多行工具条。
12.2 「更多」筛选弹窗
底部 Sheet 收纳全部条件，控件类型：
- 单选 Chip：状态、类型、视图
- 模糊检索：文本关键字
- 日期 / 日期时间
- 日期区间 / 数值区间
以上为共用筛选能力集合；每个页面只展示桌面端/后端已支持并能真实生效的字段，不得为了展示某种控件伪造无效筛选。危化品证页当前无独立“证书上传时间”查询字段，保持与 Web 端字段一致。
顶栏只保留标题和「关闭」。重置、确定放在底栏，对齐客户管理（mp-customer-filter-vant__foot）。不要把这两个按钮放进顶栏左右文字。重置会清空并立即查询。「更多」内有额外条件时，顶栏「更多」显示「更多·已筛」。
12.3 列表卡片（扁平折叠卡，新标准）
- 顶行：标题（单行省略）+ 浅底状态标签；可勾选时勾选在标题左侧
- meta 行：弱文案摘要（如
状态 · 编号 · 时间），无色块底 - 预览区：少量关键字段，左右 label/value；无灰底 / 绿底色块
- 「更多字段 / 收起」：展开按钮上方无虚线
- 展开区：其余字段扁平 KV；空值
— - 虚线底栏：允许多钮；每卡仅一个实心主色按钮（通常「查看」）；危险操作用浅底危险描边
有金额业务：金额进 meta/预览/展开之一，不用独立金额色块区作为默认层。字段集对齐 PC 约定可见列（或已确认固定全集）；不做移动端「显示字段」勾选驱动卡片。
建议 class（H5）：mp-wv-card + mp-*-list-card / __meta / __preview / __toggle / __extra / __row（结构不得缺层）。
12.3.1 过渡：旧 expense-card
存量可暂留：标题+Tag → 可选金额大区 → 副信息 → 灰底 KV → 时间 → 虚线底栏（对照 style-align Demo）。新增与改造必须用 12.3；不得新建灰底 KV / 绿底强调条列表卡。客户、产品、报价已达标；合同、危化证等仍用旧卡者为过渡、待改造。仅一个底栏按钮时按内容宽度靠右，不拉满整行。
12.4 独立详情页
详情使用独立路由页面，支持直达、刷新和返回，SHALL NOT 放入 Bottom Sheet 或桌面弹窗。结构为：普通绿顶栏（返回 + 固定页面标题）→ 业务 Tab（如有）→ 信息卡（上标签下值或 section+h3+KV）→ 底栏主操作。编号、状态、金额等业务信息放入正文；顶部不设置票根、Hero、动态记录标题、副标题或状态标签等特殊区。审批流使用头像时间轴，附件回显见 12.5。
12.5 附件上传与回显（对齐我的发票夹）
- 宫格约 72×72，圆角 8px，
att-grid/att-img/att-add/att-doc-thumb - 图：缩略填充；非图：扩展名 + 文件名
- 编辑：角标删除 + 虚线「+」
- 不把管理端 140×96 附件卡直接搬到手机端作为主形态
12.6 确认弹窗
- 白底圆角约 14–16px；遮罩无 blur；底栏横排取消 | 确认，等宽、高约 40px；禁止纵向堆叠
- 普通确认：确认键三墙绿实心
#0a9f6d - 删除/不可恢复：危险警示视觉 + 确认键危险红
#dc2626（文案如「确认删除」） - 示意：
shanxia-mp-crm-product-delete-confirm-demo.html
12.7 改造检查清单（WebView 业务页）
- Token 为三墙绿，无
#10b981主色 - 列表卡为扁平折叠范式，无新建灰底 KV / 绿底强调条
- 权威 Demo 对照客户/产品 list-card（非仅 style-align）
- 业务 Tab 仅需要时出现；顺序：绿顶栏（含搜索）→ 可选 Tab → 三栏筛选 → 扁平卡
- 「更多」含业务实际需要的非 Chip 条件；已筛有提示
- 确认弹窗横排；删除为危险红语义
- 详情为独立路由、普通绿顶栏且无票根/顶部特殊区；Tab 为锚点；底栏固定；附件为发票夹宫格
- 搜索与筛选为输入即查；表单可见控件为 Vant，选择器用底部弹层并支持即时模糊检索
- 对照客户/产品/报价单页面目视验收后再合入
12.8 样式改造补遗（报价单已落地）
后续 H5 改造以客户、产品、报价单页面为准。规范正文见 OpenSpec「H5 样式改造补遗（以报价单管理落地为准）」。要点：绿头 Tab 白字均分、筛选行白字透明底、更多筛选底栏重置/确定、滚动分页、即时检索、表单绿竖条标题与固定底栏、左右只留壳层间距、明细与选择器用 Vant 底部弹层、详情 Tab 作锚点且字段与 Web 查看弹窗一致。