From daace3ff74399eda4079c775281cc15ea1b7b61c Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Sat, 10 Oct 2026 22:03:35 +0800 Subject: [PATCH] docs: note OA-style UI and placeholder market menu icons Record that market H5 pages follow OA approval UI patterns, and specialist/manager storage menu icons stay empty until assets are provided. Co-authored-by: Cursor --- ...-10-market-miniapp-role-features-design.md | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/docs/superpowers/specs/2026-10-10-market-miniapp-role-features-design.md b/docs/superpowers/specs/2026-10-10-market-miniapp-role-features-design.md index 7b330d47..abe5a0d4 100644 --- a/docs/superpowers/specs/2026-10-10-market-miniapp-role-features-design.md +++ b/docs/superpowers/specs/2026-10-10-market-miniapp-role-features-design.md @@ -33,7 +33,8 @@ Web 管理端「市场 → 存储服务」已形成面向市场部客服的后 2. 菜单注册在 `sys_menu` 的「移动端菜单」下，走角色-菜单授权。 3. 业务界面落在 `mobile-oa-h5`；小程序仅配置入口 path → 打开 H5。 4. 明确数据范围与运费脱敏；专员页只用专员 scope，经理页只用经理 scope。 -5. 明确非目标。 +5. 明确 UI 样式参照与菜单 icon 占位策略。 +6. 明确非目标。 ### 1.3 已确认决策 @@ -43,6 +44,8 @@ Web 管理端「市场 → 存储服务」已形成面向市场部客服的后 | 菜单配置 | 挂在 `sys_menu` **「移动端菜单」** 根下；角色勾选授权 | | 业务承载 | **`mobile-oa-h5`**；小程序首页只挂链接，经 `web-view` 打开 | | 发版策略 | 业务迭代优先发 H5；小程序仅在新增入口/改壳时发版 | +| **UI 样式** | **参考 OA 审批模块**的界面样式思路（列表卡片、表单页、底栏、详情结构等），在 `mobile-oa-h5` / `mobile-h5` OA 既有页上对齐节奏与组件习惯，不照搬 Web Element 桌面布局 | +| **首页业务 icon** | 市场专员、地区经理存储业务相关菜单 icon **先空置占位**；资源到位后再补 PNG / path→icon 映射（见 §2.5） | | 市场专员数据范围 | 单据 `sales_user_id` = 当前用户（不以 `create_by`） | | 地区经理数据范围 | **C**：主数据负责地区（`is_leader=1`） **∪** 单据 `region_manager_user_id` = 当前用户 | | 操作能力 | 各自菜单下：预签/协议/催缴/缴费/样本/运费均可建改查（专员运费另有脱敏） | @@ -108,14 +111,35 @@ flowchart LR - 角色授权：市场专员角色勾选「市场专员」子树；地区经理角色勾选「地区经理」子树；兼岗勾选两套。 - 协议单叶子在 H5 内可用 Tab 区分细胞存储 / 科研捐赠（仍属该角色自己的页面实例，不与另一角色共用组件路由）。 -### 2.4 H5 路由命名（建议） +### 2.4 UI 样式（参考 OA 审批） + +业务 H5 页的视觉与交互**对齐现有 OA 审批模块思路**，优先对照： + +- `mobile-oa-h5`：`OaStart` / `OaDetail`、列表卡片节奏、表单分区、底栏主操作、状态戳/时间线等已有组件习惯 +- `mobile-h5`：OA 任务中心列表（如草稿/待办）的卡片与空态，若壳层有过渡页时一并参照 + +原则： + +- 清爽移动端信息密度；主操作在底栏或卡片主按钮；状态用 Tag/戳，避免桌面多列表格照搬。 +- Token / 色板遵循项目小程序侧既有规范（三墙 / 现有 OA H5），**不**套用 web-admin Fresh Mint 主色到移动端。 +- 可抽与 OA 同构的布局壳（顶栏标题、可滚动正文、固定底栏），业务字段按存储业务填充。 + +### 2.5 首页菜单 icon（先空置） + +市场专员、地区经理存储业务相关菜单（含目录与六类业务叶子）的小程序宫格 **icon 本期空置占位**： + +- 种子菜单可先不绑定正式 PNG；`mini_menu` path→icon 映射可返回空或统一占位，**不**临时借用 OA 审批 icon 冒充业务含义。 +- 首页宫格在无 icon 时展示文字标题即可（或极简占位底），保证可点可进。 +- 产品后续提供切图后，再补 `mobile-h5/static/menu-icons/`（或约定目录）及 `backend/app/api/mini_menu.py` 映射；不阻塞业务页开发。 + +### 2.6 H5 路由命名（建议） | 角色 | 前缀 | 示例 | |------|------|------| | 市场专员 | `/market/specialist/` | `/market/specialist/presign`、`.../protocol`、`.../payment-chase`、`.../payment`、`.../sample`、`.../freight` | | 地区经理 | `/market/manager/` | `/market/manager/presign`、… 同上六模块 | -专员页与经理页**禁止共用同一路由**；可抽共享业务组件，但页面入口、菜单 path、权限码分离。 +专员页与经理页**禁止共用同一路由**；可抽共享业务组件，但页面入口、菜单 path、权限码分离。样式按 §2.4，不另起视觉体系。 ## 3. 角色与数据范围 @@ -191,14 +215,15 @@ flowchart LR - 质检 / 生产 / 入库放行 - 在 `mobile-h5` 内实现本需求业务列表/表单（与免发版策略冲突） - 专员/经理共用同一 H5 路由、靠前端隐藏区分 -- HTML Demo、完整视觉稿（另文） +- 本期绘制/选定存储业务正式菜单 icon（空置即可，资源后补） +- HTML Demo、脱离 OA 另起一套移动端视觉体系 - 将本 scope 强制推广到 Web 全部菜单（另决策） ## 7. 数据范围与菜单实现要点（供后续实现计划） 1. SQL 种子：在「移动端菜单」下插入专员/经理两目录及各 6 个叶子；角色在 Web 勾选。 -2. `mobile-h5`：首页已有菜单拉取则复用；点击市场类 path 时拼 `OA_H5_ORIGIN` + `/market/{specialist|manager}/...` + `token`。 -3. `mobile-oa-h5`：注册两套路由与页面；共享组件可抽，入口不可合并。 +2. `mobile-h5`：首页已有菜单拉取则复用；点击市场类 path 时拼 `OA_H5_ORIGIN` + `/market/{specialist|manager}/...` + `token`；市场业务 icon 空置占位（§2.5）。 +3. `mobile-oa-h5`：注册两套路由与页面；UI 对齐 OA 审批样式思路（§2.4）；共享业务组件可抽，入口不可合并。 4. API：按 path 或显式 `fieldScope` 施加专员/经理过滤；写前二次校验。 5. 运费：批次可见性 + 明细级专员脱敏，独立查询策略。 6. 租户隔离始终生效。 @@ -224,8 +249,10 @@ flowchart LR 4. 经理页可见可改分管地区 ∪ 单据地区经理为自己的数据。 5. 兼岗用户两套入口均可用，且各自 scope 不串。 6. 更新 H5 业务页后，无需因该业务改动而重新发布微信小程序（壳与菜单 path 未变的前提下）。 +7. H5 列表/表单观感与 OA 审批模块同一思路；首页市场业务菜单无正式 icon 时仍可进入功能。 ## 10. 后续 - 本文审阅通过后编写实现计划：菜单 SQL、H5 路由脚手架、scope 中间层、分模块页面、运费脱敏、联调与测试。 - 实现计划中写死：菜单 `path` 与 `web-view` URL 拼装规则（对齐现有 OA）。 +- 产品提供菜单切图后，单开小任务补 icon 资源与 `mini_menu` 映射即可。