hyb-oa/.trellis/tasks/05-27-05-27-pc-core-workflow-visual-wave2/prd.md

PC 核心工作流视觉重塑 Wave2

Goal

按 frontend-design 重新收敛 PC 核心入口视觉和交互层级，让登录页、工作台、报销列表和审批待办从“通用中后台模板”转向“精密、低噪音、高密度的小团队工作台”。

Start Confirmation

• 用户在 2026-05-27 确认“按照你的建议执行”。
• 本任务是前端视觉与交互改进，不改变后端 API、权限模型、审批规则、状态机、数据库 schema、企业微信配置或公网真实数据。

Scope

• 登录页：精简登录方式层级和提示信息，强化“工作台入口”感，不改登录能力。
• PC 工作台 /portal：压缩解释性文案，突出今日待处理、快捷动作、动态和二级入口。
• 报销列表 /reimbursements：收敛指标、筛选、范围、导出和批量操作的视觉层级，让表格成为主角。
• 审批待办 /workflow/tasks：统一为紧凑任务控制台，减少说明感，强化待处理/已处理/批量操作。
• 共享样式：在现有 React/Vite/Tailwind 与组件基础上添加少量可复用 PC 工作台样式，避免为单页自造一套完整 UI。

Out of Scope

• 不改移动专项页面，除非共享样式自然影响且可验证。
• 不改报销详情、审批详情、通知中心、财务/AP/票据池和 C 类管理页；这些进入 Wave3/Wave4。
• 不新增业务能力、不新增字段、不写公网业务数据、不部署生产配置。
• 不把 docs/产品设计规则.md 重新扩展为视觉规则；视觉裁决继续以 frontend-design 为准。

Design Direction

• Tone：precision operations console，克制、精密、低噪音、高密度。
• Composition：少大卡片，强命令栏，表格/列表为主角；状态和动作比解释文字更重要。
• Copy：删除或弱化“为何这么设计”的提示，保留业务下一步和风险提示。
• Motion：保留轻量进入动画，不引入夸张动效。
• Density：PC 端允许更紧凑，移动端不作为本轮主改范围。

Requirements

• 登录页继续支持账号密码、邮箱验证码、企业微信入口、忘记密码和 PWA 更新提示。
• 登录页不能恢复 PWA 自动刷新清空表单的问题。
• 工作台继续按角色展示不同内容，不泄露无权限入口。
• 报销列表继续支持状态切换、范围切换、代理、导出、批量审批、删除草稿和分页。
• 审批待办继续支持审批/驳回/退回/转审入口和已处理查看。
• 页面不得展示完整账号、Secret、token、真实票据、合同正文、银行资料、完整本地路径或 raw payload。

Acceptance Criteria

• 四个核心入口视觉更统一：登录、工作台、报销列表、审批待办。
• 解释性文案明显减少；核心动作和状态更突出。
• PC 表格/列表页的命令区更紧凑，不牺牲现有业务能力。
• cd client && npm run typecheck 通过。
• cd client && npm run build 通过。
• 相关 Playwright/视觉截图至少覆盖登录页、工作台、报销列表和审批待办。
• node scripts/qa/check-trellis-governance.mjs 与 git diff --check 通过。

Test Plan

cd client && npm run typecheck
cd client && npm run build
node scripts/qa/check-trellis-governance.mjs
git diff --check

按可用本地服务补充 Playwright 视觉截图：

cd client && npx playwright test <focused visual specs> --workers=1 --reporter=list

Technical Notes

• 前端设计 skill：frontend-design
• 前端 spec：.trellis/spec/hyb-oa/frontend-react-vite-design.md
• 产品体验事实：docs/产品设计规则.md
• 现有证据参考：output/playwright/pc-frontend-visual-consistency-wave1/、output/playwright/oafront3-pc-readonly-postdeploy/