76 行
4.0 KiB
Markdown
76 行
4.0 KiB
Markdown
# 前端页面降噪第一轮实现方案
|
|
|
|
## Scope
|
|
|
|
第一轮只修改 PC Web 的两个样板页面：
|
|
|
|
- `client/src/pages/PortalHomePage.tsx`
|
|
- `client/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 typecheck`
|
|
- `cd client && npm run build`
|
|
- 对 PC 视口做前后截图或 Playwright 视觉检查：
|
|
- 首页员工路径：打开首页 → 新建报销/查看报销进度。
|
|
- 首页审批人路径：打开首页 → 处理待办/进入审批中心。
|
|
- 报销列表路径：打开报销列表 → 新建报销/查看需处理单据/进入高级台账。
|
|
- 检查首屏动作预算：1 个主按钮、最多 2 个次级入口。
|
|
- 检查说明文案预算：默认可见文案只服务风险、异常、空态。
|