PC 前端布局统一改造

Goal

在 OAOPS1 真实试运行并行推进的前提下，启动第一批实施类改造：统一 PC 页面布局、信息密度、命令区、表格/列表和详情区体验，降低“页面啰嗦、操作复杂、风格不统一”的用户体感问题。视觉裁决以 frontend-design 为准，但 OA 业务系统保持克制、密集、清晰的工作台风格。

What I Already Know

OAOPS1 七天真实试运行仍是独立并行主线，不因本任务暂停。
已归档审查结论建议第一批实施优先做 PC 前端布局统一，移动和流程规则后置。
前端已有 Wave2-Wave4 基础，不能再做一次大而全重构。
现有代码已经有可复用模式：ListWorkspace、WorkspaceHeader、FilterBar、PrimaryTable、PageScaffold、EntityOverviewHero、SectionPanel、ops-*、detail-*、finance-*、admin-*。
frontend-design 要求界面有明确设计方向；本任务的方向是“安静、精密、运营型 OA 工作台”，不是营销页、装饰页或大面积视觉噱头。

Assumptions

第一批优先 PC，不改移动主体验，除非发现 PC 改动破坏移动响应式。
优先通过共享组件和共享 CSS class 收敛，不给每个页面各写一套新样式。
本任务不改变审批、报销、付款、发票、权限、企业微信或后端业务规则。
不做生产部署，除非完成本地验证后另行获得明确批准。

Scope

PC 工作台、列表页、详情页、财务密集页和 C 类管理页的布局统一。
共享前端 pattern、CSS class、页面容器、命令区、表格/列表容器和视觉密度调整。
必要的 focused Playwright、typecheck、build 和 UI governance 验证。
仅限前端展示层，不触碰业务规则、后端接口、数据库和生产配置。

Requirements

固化 PC 页面模板：
- 工作台：今日动作、待办、常用入口、异常提示，不做模块橱窗。
- 列表页：ListWorkspace + WorkspaceHeader + FilterBar + PrimaryTable + ops-*。
- 详情页：PageScaffold + EntityOverviewHero + SectionPanel + detail-*。
- 财务密集页：finance-* + ops-table-focus，保留高密度但减少说明型文案。
- 管理 C 类页：admin-* + ops-*，统一命令区和表格密度。
第一批页面范围优先覆盖：
- /portal
- 报销列表与详情
- 审批中心与审批详情
- 票据池、付款批次、AP
- 系统设置、用户管理、主数据、功能开关、通知渠道、审计日志
压缩页面文案：删除重复说明、弱化低频帮助文本，把复杂说明移到空状态、错误态或二次确认。
统一操作区：主动作靠近页面标题或当前记录，危险/高风险动作必须保留二次确认。
统一表格密度和状态展示：状态、金额、时间、人员、异常原因位置稳定。
保持现有权限、路由、接口、feature flag、测试数据过滤和安全边界不变。

Acceptance Criteria

关键 PC 页面采用统一页面骨架、命令区、表格/列表和详情模式。
页面文案明显收敛，不再出现重复说明型段落或页面级帮助堆叠。
财务/AP/票据池仍保持高密度操作效率，危险操作保留确认和审计提示。
管理页命令区、统计条、表格容器和空状态保持一致。
不改变后端接口、数据库、权限模型、审批规则、企业微信配置或生产配置。
cd client && npm run typecheck && npm run build 通过。
node scripts/qa/check-ui-design-rules.mjs 通过。
至少运行 focused Playwright 覆盖 PC 关键页，必要时补截图/交互证据。

Definition of Done

改造范围内页面在桌面宽度下没有明显布局漂移、文字挤压、操作区混乱或卡片套卡片。
移动响应式没有被 PC 改造破坏。
本地验证通过；如果用户要求可测，再获得部署批准后执行公网验证。
Trellis task 校验和治理检查通过。
提交信息使用中文并引用本任务 ID。

Out of Scope

不重写整套设计系统。
不改移动端业务主体验。
不改业务流程、审批阈值、付款规则、发票验真 provider、权限模型或数据库 schema。
不采购、部署或改生产配置。
不把官网营销视觉照搬到 OA 工作台。

Test Plan

cd client && npm run typecheck
cd client && npm run build
node scripts/qa/check-ui-design-rules.mjs
python3 ./.trellis/scripts/task.py validate 05-28-pc-frontend-layout-unification
node scripts/qa/check-trellis-governance.mjs
git diff --check

Focused Playwright 根据最终修改页面选择，优先覆盖：

cd client && npx playwright test tests/e2e/login-portal-ux.spec.ts
cd client && npx playwright test tests/e2e/workflow-*.spec.ts
cd client && npx playwright test tests/e2e/reimbursement-payment-batch-flow.spec.ts
cd client && npx playwright test tests/e2e/invoice-ocr-flow.spec.ts

Technical Notes

Frontend spec: .trellis/spec/hyb-oa/frontend-react-vite-design.md
Project governance: .trellis/spec/hyb-oa/project-governance.md
Prior审查: .trellis/tasks/archive/2026-05/05-27-oa-product-flow-test-policy-audit/research/overall-audit-matrices.md
页面专项审查: .trellis/tasks/archive/2026-05/05-27-oa-frontend-layout-page-fit-review/research/page-layout-and-fit-review.md
Likely shared code: client/src/components/patterns/、client/src/index.css、client/src/design/

Completion Note

2026-05-28：已完成第一批 PC 布局统一改造。改动集中在共享 pattern/CSS、Portal、报销/审批详情、系统设置、主数据、功能开关和通知渠道等展示层；没有修改后端接口、数据库、权限、审批规则或生产配置。

5.7 KiB 原始文件 Blame 文件历史