4.0 KiB
4.0 KiB
前端页面降噪第一轮实现方案
Scope
第一轮只修改 PC Web 的两个样板页面：
client/src/pages/PortalHomePage.tsxclient/src/pages/ReimbursementsPage.tsx
不修改后端 API、数据库、权限、审批状态机、报销业务规则、移动端/企业微信页面。审批中心和报销详情作为第二轮扩展对象，本轮不改。
Design Direction
按 frontend-design 口径，本轮采用“安静、任务优先、工作台式极简”的方向：不做营销感英雄区，不新增装饰性视觉；重点是信息层级、主动作、低频能力后置和文案压缩。页面应保持 OA 场景所需的密度，但第一屏只能让用户看到下一步。
硬性规则：
- 每个页面首屏只允许 1 个主按钮。
- 每个页面首屏最多 2 个次级入口。
- 说明文案只服务风险、异常、空态。
- 低频能力隐藏/后置，不删除。
Portal Home
目标：从“综合仪表盘”改为“今日任务入口”。
实现要点：
- 保留
WorkbenchHero和现有数据源，压缩 subtitle，不再解释所有角色能力。 - 新增或重组首屏任务区，优先展示：
- 当前最重要待办。
- 可发起的主动作。
- 最近申请/报销状态入口。
- 首屏主按钮策略：
- 有审批待办时，主按钮为“处理待办”，指向
/workflow/tasks。 - 无审批待办且可创建报销时，主按钮为“新建报销”，指向
/reimbursements。 - 其他场景使用当前可用的最高优先级 quick action。
- 有审批待办时，主按钮为“处理待办”，指向
- 首屏次级入口最多两个，例如“查看报销进度”“全部待办”。
团队状态、通知/动态、角色重点、项目与组织、采用率等保留为首屏之后的次级区，不与任务入口并排抢注意力。GettingStartedCard只在真正的新用户引导时显示；避免长期占据核心任务区。
Reimbursements
目标：从“全功能台账”改为“员工进度视图”，台账能力后置。
实现要点：
WorkspaceHeader的主按钮固定为“新建报销”。- 新建下拉仍保留模板创建、差旅关联等能力，但默认按钮语义保持单一；复杂来源放入下拉或“更多创建方式”。
- 默认视图突出草稿待补、审批中/被驳回需处理、最近已通过/已支付，不把财务台账能力作为第一层。
- 将
导出、批量操作、仅自己/全范围、统计分析、复杂筛选收纳到“高级/台账”区域或更多菜单，仅对有权限用户显示。 - 删除现有普通状态说明卡：
- “草稿可以继续编辑或删除”
- “审批中单据以详情页为主” 仅在空态、错误、批量模式、删除确认等风险/异常场景保留说明。
- 列表行主动作保留“编辑/查看”，删除草稿后置到更多或仅在草稿状态的次级动作里出现。
Shared Implementation Notes
- 优先复用现有共享组件和 CSS 类：
PageScaffold、ListWorkspace、WorkspaceHeader、WorkbenchHero、FilterBar、PrimaryTable、MetricCard、StatusBadge。 - 不引入新的 UI 框架或大范围样式系统。
- 若需要补少量页面级样式，优先扩展现有
portal-*、ops-*类，避免在页面 JSX 中堆大量一次性 Tailwind。 - 不改变 API 查询参数语义；如需“高级/台账”开关，优先用前端状态和现有 URL 参数表达。
- 保留现有权限判断，不能让无权限用户看到不可执行入口。
Verification Plan
cd client && npm run typecheckcd client && npm run build- 对 PC 视口做前后截图或 Playwright 视觉检查：
- 首页员工路径：打开首页 → 新建报销/查看报销进度。
- 首页审批人路径：打开首页 → 处理待办/进入审批中心。
- 报销列表路径：打开报销列表 → 新建报销/查看需处理单据/进入高级台账。
- 检查首屏动作预算：1 个主按钮、最多 2 个次级入口。
- 检查说明文案预算：默认可见文案只服务风险、异常、空态。