shanxia2.0/docs/superpowers/specs/2026-09-11-miniprogram-db-from-h5-design.md

设计：mobile-h5 地磅能力迁移至 miniprogram

日期： 2026-09-11
状态： 已确认（用户：方案 1 + Vant Weapp，图表用 b）

背景

将 mobile-h5（Vue3 + Vant4 地磅 H5）的核心业务迁入 miniprogram（uni-app 微信小程序），入口挂在工作台「地磅管理」下四个菜单。

目标

• 完整能力对齐 H5 的仪表盘 / 计划 / 出入库 / 地磅单（列表、详情、新增编辑、关联、生成单据、作废、删除等）。
• UI：自研 components/db-ui/* 视觉对齐 H5 Vant4 主题（主色 #52B788）。不在 uni-app 中直接使用 @vant/weapp（会触发 Behavior is not defined）。
• 表单主数据（往来单位/货物/车辆）走接口选择，不做基础资料/用户管理独立菜单。
• 不迁移免登录第三方填写页（inventory/fill、inventory/plan）。

非目标

• 不修改 mobile-h5 源码工程本身。
• 不把全局 miniprogram 壳（登录/工作台）主色改成 #52B788；地磅模块局部主题。
• 仪表盘一期不做 H5 同款 ECharts，用数字卡片 + 简易条形列表（图表精细还原可二期）。

架构

工作台 地磅管理
  ├─ 仪表盘     → pages/db/dashboard/index
  ├─ 计划管理   → pages/db/plans/list + detail
  ├─ 出入库管理 → pages/db/inventory/list + detail
  └─ 地磅单管理 → pages/db/weighing/list + detail

api/db.js          → /dashboard|/plans|/inventory|/weighing（裸 JSON）
api/dbMaster.js    → /master-data/* options（表单选择器用）
styles/db-*.scss   → 局部 Vant Weapp 主题 + 卡片列表样式（自 H5 移植）

• 鉴权：复用现有 stores/user + utils/request.js Bearer；地磅接口响应按裸 JSON解析（非门户 code 信封）。
• 后端：现有 backend 地磅路由，无新后端需求。

UI 约定

• 组件：@vant/weapp（van-search / van-list / van-tag / van-button / van-field / van-popup / van-empty / Toast / Dialog 等）。
• 主题：CSS 变量对齐 H5 vant-theme.scss / variables.scss（primary #52B788）。
• 布局：自 H5 移植 header + search + card list + FAB + 详情表单分区。

风险与缓解

风险	缓解
Vant4 H5 ≠ Vant Weapp API	按 Weapp 文档改事件/属性；不直接粘贴 H5 SFC
地磅响应非门户信封	dbRequest 专用解析
图表依赖 ECharts	一期条形列表

验收

• 工作台四菜单可进入且功能与 H5 主流程一致（除图表形态与未迁第三方页）。
• 未登录跳转登录；401 清 token。
• 地磅页视觉接近 H5（绿主题卡片列表）。