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 <cursoragent@cursor.com>

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` 映射即可。