docs: define the remaining mobile market parity demo design.

docs/superpowers/specs/2026-10-11-market-remaining-mobile-parity-demo-design.md

@@ -0,0 +1,120 @@
+# 市场现场端剩余模块移动复刻 HTML Demo 设计
+
+**日期：** 2026-10-11  
+**状态：** 方案已确认，待 HTML Demo 验收  
+**范围：** 市场专员与地区经理的协议单、催缴信息、缴费信息、样本信息、运费信息，共 10 个移动端入口的交互原型
+
+## 1. 目标
+
+基于已经确认的“市场专员预签约订单”移动改造方向，为其余五类市场现场模块制作一个可直接浏览、可点击的 HTML Demo。Demo 以对应 Web 页面为字段和业务操作权威，以现有 OA 工作流移动页面和 Vant 4 为组件与交互权威，将桌面表格、弹窗和工具栏转换成适合手机的卡片、全屏表单和底部操作区。
+
+本次只制作 HTML 原型，不修改 `mobile-oa-h5`、`mobile-h5`、后端接口或数据库。
+
+## 2. 已确认方案
+
+采用单文件综合交互稿：一个 HTML 内提供角色、模块和页面状态切换，覆盖市场专员 / 地区经理 × 五个模块。这样可以同时检查十个入口的一致性，也能演示列表、详情、新增、编辑及模块专属操作。
+
+不采用五模块分文件或十屏静态总览，因为前者不利于整体评审，后者无法验证表单和业务操作。
+
+## 3. 视觉与通用交互
+
+- 小程序品牌主色为 `#0a9f6d`，不得使用 Web 管理端主色 `#10b981`。
+- 页面顶部为白色导航栏，不显示绿色渐变头图。
+- 列表顶部只保留关键词搜索框，不显示“全部状态”等筛选项。
+- 列表采用单列业务卡片，状态、类型、结论字段使用语义化 Tag。
+- 页面滚动到底部自动追加下一页；Demo 用本地数据模拟 Vant List 的 loading、finished 和“已加载更多”反馈。
+- 支持新增的模块使用右下角 56px 圆形悬浮 `+`；只读模块不显示新增按钮。
+- 表单与详情以移动端全屏页呈现；正文滚动，底部固定取消 / 保存或返回操作栏。
+- 单选使用只读 Field + 底部 Picker，日期使用底部 Date Picker，附件使用上传触发卡 + 文件卡片。
+- 所有点击目标不小于 44×44px；不使用 backdrop blur。
+
+## 4. 顶层演示结构
+
+Demo 顶部提供仅用于原型评审的控制条：
+
+1. 角色切换：市场专员 / 地区经理。
+2. 模块切换：协议单 / 催缴信息 / 缴费信息 / 样本信息 / 运费信息。
+3. 当前数据范围说明：专员仅看本人现场单据；经理看负责地区与指定经理单据。
+
+业务手机画布内部不显示此控制条，以免把 Demo 导航误认为产品界面。
+
+## 5. 模块设计
+
+### 5.1 协议单
+
+列表卡片覆盖 Web 列表的业务信息：来源、采集日期、实验室流转编号、母亲姓名、协议 / 捐赠编号、样本类型、是否同存、采集地区、采集医院、采集时间、缴费方式、首期缴费时间、市场专员、地区经理、运输方式。
+
+卡片操作：审核、编辑、查看、删除。右下角显示新增按钮。
+
+表单按以下分区展示：
+
+- 协议信息：业务来源、协议 / 捐赠编号、登记 / 捐赠日期、协议总金额、备注。
+- 采集信息：采集地区、采集医院、采集时间；地区变更后清空并重新选择医院。
+- 客户信息：母亲姓名、联系电话、证件号码、预产期。
+- 样本信息：样本类型、样本编码、存储年限，可新增多笔样本。
+- 附件与确认：协议附件、知情同意书、健康调查表或科研捐赠附件；上传卡为附件行第一项。
+
+### 5.2 催缴信息
+
+催缴为只读列表，不显示新增按钮。卡片字段：协议号、客户与联系电话、样本编码、市场专员、缴费方式、期次、应缴日、应缴金额、已缴金额、欠缴金额、催缴状态、协议状态。
+
+卡片操作为“协议单”。点击已缴金额可查看该期转账明细；点击协议单进入只读协议详情。
+
+### 5.3 缴费信息
+
+列表卡片字段：协议号、客户与联系电话、样本编码、缴费方式、合同额、已缴、待缴、整体期次进度、缴费进度。
+
+卡片操作：查看、缴费确认（仅后端允许时显示）、协议单。列表不显示新增悬浮按钮，转账登记在缴费详情内完成。
+
+详情展示缴费汇总、分期计划和转账卡片。转账操作覆盖登记、编辑、提交财务确认和撤回。转账表单字段为转账金额、转账时间、转账方式、转账凭证、备注。
+
+### 5.4 样本信息
+
+列表卡片字段：协议状态、预产期、母亲姓名、新生儿姓名、样本编码、实验室入库编码、样本类型、采集、接收、质检、入库、储存证、保险。
+
+卡片操作：查看、查看储存证的质检信息；符合业务条件时显示登记储存证、登记保险。科研捐赠来源不展示储存证与保险操作。
+
+登记表单字段：办理时间、办理人员、附件、备注。Demo 使用底部人员选择器与附件卡片演示 Vant 风格交互。
+
+### 5.5 运费信息
+
+列表按批次卡片展示：批次号、运输方式、运费金额、关联数、来源、母亲姓名、子女姓名、样本编码、样本类型、创建人、创建时间。
+
+卡片操作：编辑、关联样本、取消关联。右下角显示新增按钮。
+
+新增 / 编辑字段为运输方式、运费金额和关联样本。关联 / 取消关联使用移动卡片多选，不把 Web 表格直接压缩到手机宽度。
+
+专员入口只展示自己相关样本明细，仍可查看批次级信息；经理入口展示负责范围内的完整明细。Demo 在专员角色下明确显示“其他专员明细已脱敏”，且不泄露具体条数或人员信息。
+
+## 6. 角色差异
+
+两类角色使用同一套组件和视觉规则，但入口、示例数据与范围提示独立：
+
+- 市场专员：示例列表仅表现本人单据；运费卡片对其他专员明细脱敏。
+- 地区经理：示例列表表现所负责地区及单据指定经理的数据；运费展示完整关联明细。
+- 两类角色的按钮集合由相同业务规则与后端 `allowedActions` 决定，不因前端角色标签自行放宽权限。
+
+## 7. Demo 交互边界
+
+- 搜索框对当前本地示例数据执行即时关键词过滤。
+- 滚动分页为原型模拟，不发真实 API 请求。
+- 表单选择器、级联、附件添加 / 删除、确认弹窗和 Toast 均为可点击演示。
+- 保存、删除、审核、缴费确认等操作只更新 Demo 的临时 UI 状态，不写业务数据。
+- Demo 不承诺完整校验、异常重试、真实上传、鉴权和租户隔离实现；这些在正式开发计划中落实。
+
+## 8. 输出物
+
+- 正式 HTML：`docs/demos/2026-10-11-market-remaining-mobile-parity-demo.html`
+- 浏览器伴随预览：同步写入当前 `.superpowers/brainstorm/` 会话，便于即时查看。
+
+## 9. 验收标准
+
+1. 一个 HTML 可切换两种角色和五个模块。
+2. 十个入口均无绿色头图区和状态筛选，只保留关键词搜索。
+3. 卡片字段与对应 Web 列表一致，不用三字段通用摘要代替。
+4. 按钮和业务功能与 Web 对齐，并使用移动端交互表达。
+5. 协议与运费显示圆形新增按钮；催缴、缴费、样本不在列表页显示新增按钮。
+6. 地区与医院能够演示级联；附件为上传卡 + 文件卡同行布局。
+7. 列表能够演示滚动动态分页。
+8. 专员运费脱敏与经理完整明细的差异可见。
+9. 页面主色为 `#0a9f6d`，组件观感与 OA 工作流 / Vant 4 一致。