refactor: 菜单栏角色化降噪（role-based-navigation-simplification）
这个提交包含在：
@@ -0,0 +1,110 @@
|
||||
# 菜单栏角色化降噪重构
|
||||
|
||||
## Goal
|
||||
|
||||
把 PC 侧边栏和移动底部导航从“功能模块清单”改成“小团队任务入口”。默认菜单按角色、权限和使用频次显示，优先让用户看清今天要处理什么、要提交什么、要查什么进度；低频配置、后台管理、集成和审计能力后置到 `管理` 或 `更多`。
|
||||
|
||||
## What I Already Know
|
||||
|
||||
- 目标用户是国内、小于 10 人的科技初创公司，常见一人多岗，默认不是专职 OA 操作员。
|
||||
- 已通过 `grill-me` 和 `frontend-design` 审查确认：本轮只重构导航信息架构和菜单壳层，不顺手重构业务页面内容。
|
||||
- 当前前端主导航在 `client/src/components/navigation/NavLinks.tsx`，侧边栏在 `client/src/components/navigation/Sidebar.tsx`，顶部命令区在 `client/src/components/navigation/Topbar.tsx`。
|
||||
- 当前服务端导航注册和默认显隐在 `server/src/services/workspaceSettings.js`，系统导航接口为 `/api/system/navigation`。
|
||||
- 当前移动底部导航在 `client/src/features/mobile/navigation.ts` 和 `client/src/components/mobile/MobileBottomNav.tsx`。
|
||||
- 当前工作区设置页会展示模块显隐表：`client/src/pages/WorkspaceSetupPage.tsx`。
|
||||
- 现有文档已要求 `首页` 不承担常驻新手教学职责，`个人设置` 不承担权限维护默认面，`请假/考勤` 日常优先企业微信。
|
||||
|
||||
## Confirmed Decisions
|
||||
|
||||
- 侧边栏正式按角色显示不同首屏菜单，不再所有人共用一套模块清单。
|
||||
- PC 侧边栏 `请假` 改为 `请假记录`，提交请假不作为默认 PC 主入口；只有 OA 应急接管或指定管理场景才考虑显示提交入口。
|
||||
- 合并 `待办`、`审批待办`、通知、工作台之间的职责：审批人看到 `待我处理`，普通员工默认不显示 `待办`，通知只保留顶部铃铛，工作台只做摘要。
|
||||
- 管理入口从侧边栏多项展开改为一个 `管理`，进入管理页后再分 `人员与组织 / 流程与规则 / 系统与审计 / 功能管理`。
|
||||
- 财务入口改成真实工作名：`付款批次` -> `付款`，`AP 运营` -> `应付账款`，`ERP 集成` -> `外部系统`，`功能开关` -> `功能管理`。
|
||||
- `票据中心` 只对财务/票据管理角色保留，普通员工不显示。
|
||||
- `预算管理` 默认不放一级菜单，进入管理或更多。
|
||||
- 移除侧边栏顶部 `今日优先` 说明卡；后续只保留真实轻量状态提示，且没有真实数据时不显示。
|
||||
- `更多` 只作为低频入口折叠区，不放解释性副标题，不做大卡片。
|
||||
- 移动端底栏同步语义：`首页 / 待办或进度 / 报销 / 我的`，审批人显示 `待办`，非审批人显示 `进度`，不加入 `请假`。
|
||||
- 这套菜单规则要沉淀到 `docs/产品设计规则.md` 和 `.trellis/spec/hyb-oa/frontend-react-vite-design.md`，作为后续功能开发硬约束。
|
||||
|
||||
## Requirements
|
||||
|
||||
- R1: PC 侧边栏一级可见入口应按角色收敛到高频任务，不展示权限允许但低频的后台模块清单。
|
||||
- R2: 审批人/负责人/财务角色应看到 `待我处理`；普通员工默认不看到 `待办` 或 `审批待办` 入口。
|
||||
- R3: `审批待办` 用户文案统一改为 `待我处理`，同时保留原有路由 `/workflow/tasks`。
|
||||
- R4: PC `请假` 用户文案改为 `请假记录`；不得让 PC 默认菜单暗示 OA 是请假日常主办入口。
|
||||
- R5: `个人设置` 不出现在 PC 侧边栏，只从右上角账号菜单进入。
|
||||
- R6: 管理类入口在侧边栏合并为 `管理`；管理页内部再承接具体配置、人员、流程、审计和功能管理入口。
|
||||
- R7: 财务类入口使用真实工作名，避免 `AP 运营`、`ERP 集成`、`功能开关` 这类偏内部平台词占据主菜单。
|
||||
- R8: 前端不得把服务端 `backup` 或低频模块重新提升到 `业务` / `财务` 默认分组。
|
||||
- R9: `更多` 应是轻量折叠入口；不得使用说明卡、副标题或大圆角卡片样式。
|
||||
- R10: 移动底部导航对审批人显示 `待办`，非审批人显示 `进度`；移动底栏不加入 `请假`。
|
||||
- R11: 工作区设置页的模块显隐表达要与新菜单规则一致，减少“主导航/管理区/隐藏”导致的误解。
|
||||
- R12: 更新产品设计规则和前端 Trellis spec，明确新增功能默认不得直接进入一级侧边栏。
|
||||
|
||||
## Scope
|
||||
|
||||
- In scope: PC 侧边栏、系统导航 API、移动底部导航、管理聚合页、工作区设置文案、导航相关测试、产品设计规则和前端 Trellis spec。
|
||||
- Out of scope: 业务页面主体重构、路由路径迁移、审批状态机或权限模型重做、企业微信请假主办流程、生产部署和真实数据写入。
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [x] 普通员工 PC 侧边栏默认只显示少量高频入口，不出现 `待办`、`审批待办`、`票据中心`、`个人设置`、管理配置项。
|
||||
- [x] 审批人/负责人 PC 侧边栏显示 `待我处理`，不再显示 `审批待办`。
|
||||
- [x] 财务/管理员 PC 侧边栏显示真实工作入口，例如 `付款`、`应付账款`、`票据`、`管理`，低频配置不铺开。
|
||||
- [x] `请假` 在 PC 主菜单中改为 `请假记录`，移动底栏不新增请假入口。
|
||||
- [x] `更多` 是轻量折叠行，展开后只承载低频入口，无说明副标题和大卡片视觉。
|
||||
- [x] 侧边栏顶部不再显示 `今日优先` 解释卡。
|
||||
- [x] 移动底栏审批人显示 `待办`，非审批人显示 `进度`。
|
||||
- [x] 工作区设置页文案与新导航分层一致，不再鼓励把低频模块直接放进主导航。
|
||||
- [x] 导航相关单元测试覆盖普通员工、审批人、财务、管理员角色的菜单结果。
|
||||
- [x] 前端 typecheck/build 通过，并保留 PC/移动菜单截图证据。
|
||||
- [x] `docs/产品设计规则.md` 和 `.trellis/spec/hyb-oa/frontend-react-vite-design.md` 已更新菜单规则。
|
||||
|
||||
## Out Of Scope
|
||||
|
||||
- 不重构报销列表、审批中心、财务台账、管理页面主体内容。
|
||||
- 不改路由路径，除非现有路径无法承接新文案。
|
||||
- 不重做权限模型、审批状态机、企业微信请假主办流程。
|
||||
- 不新增真实生产数据写入、生产配置修改或企业微信写入。
|
||||
- 不把所有历史模块删除；低频能力以隐藏、更多或管理承接为主。
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- 需要重点处理服务端导航和前端重分组的职责边界，避免服务端已后置的模块被前端路径规则重新提升。
|
||||
- 需要保持权限控制由服务端和现有权限工具兜底，前端只做展示和分组，不创造越权入口。
|
||||
- 管理合并入口可以先指向现有 `工作区设置` 或新建轻量管理聚合页；本轮不做深层管理页面大改。
|
||||
- 视觉方向按 `frontend-design`：安静、工具型、密集但可扫描；避免说明卡、营销式引导和模块堆砌。
|
||||
|
||||
## Test Plan
|
||||
|
||||
- `cd server && npm test -- --runInBand workspaceSettings.navigation.test.js` 或等价聚焦单测命令。
|
||||
- `cd client && npm run typecheck`
|
||||
- `cd client && npm run build`
|
||||
- 聚焦 Playwright/截图验证：
|
||||
- PC 普通员工侧边栏
|
||||
- PC 审批人/负责人侧边栏
|
||||
- PC 财务或管理员侧边栏
|
||||
- 移动底部导航审批人/非审批人文案
|
||||
- `git diff --check`
|
||||
|
||||
## Verification Results
|
||||
|
||||
- PASS: `cd server && node --check src/services/workspaceSettings.js`
|
||||
- PASS: `cd server && npm test -- workspaceSettings.navigation.test.js`
|
||||
- PASS: `cd server && npm run prisma:validate`
|
||||
- PASS: `cd client && npm run typecheck`
|
||||
- PASS: `cd client && npm run build`
|
||||
- PASS: `cd client && E2E_BASE_URL=http://127.0.0.1:3001 npx playwright test tests/e2e/visual-shell.spec.ts --workers=1 --reporter=list`
|
||||
- PASS: `cd client && E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test tests/e2e/settings-governance.spec.ts --workers=1 --reporter=list`
|
||||
- PASS: `node scripts/qa/check-trellis-governance.mjs`
|
||||
- PASS: `python3 ./.trellis/scripts/task.py validate 05-29-role-based-navigation-simplification`
|
||||
- PASS: `git diff --check`
|
||||
- Screenshot evidence: `output/playwright/role-based-navigation-simplification/employee-desktop.png`, `manager-desktop.png`, `finance-mgr-desktop.png`, `employee-mobile.png`, `manager-mobile.png`.
|
||||
|
||||
## Definition Of Done
|
||||
|
||||
- 需求、实现、验证、文档和截图证据在本 Trellis task 中可追溯。
|
||||
- 代码提交使用中文 commit message，并引用 `role-based-navigation-simplification`。
|
||||
- 面向用户可测试前，如涉及部署，必须部署并完成公网检查后再告知用户可测。
|
||||
在新工单中引用
屏蔽一个用户