8.3 KiB
8.3 KiB
菜单栏角色化降噪重构
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
- 普通员工 PC 侧边栏默认只显示少量高频入口,不出现
待办、审批待办、票据中心、个人设置、管理配置项。 - 审批人/负责人 PC 侧边栏显示
待我处理,不再显示审批待办。 - 财务/管理员 PC 侧边栏显示真实工作入口,例如
付款、应付账款、票据、管理,低频配置不铺开。 请假在 PC 主菜单中改为请假记录,移动底栏不新增请假入口。更多是轻量折叠行,展开后只承载低频入口,无说明副标题和大卡片视觉。- 侧边栏顶部不再显示
今日优先解释卡。 - 移动底栏审批人显示
待办,非审批人显示进度。 - 工作区设置页文案与新导航分层一致,不再鼓励把低频模块直接放进主导航。
- 导航相关单元测试覆盖普通员工、审批人、财务、管理员角色的菜单结果。
- 前端 typecheck/build 通过,并保留 PC/移动菜单截图证据。
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 typecheckcd 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。 - 面向用户可测试前,如涉及部署,必须部署并完成公网检查后再告知用户可测。