5.5 KiB
5.5 KiB
PC 前端视觉一致性第一批
Goal
以 frontend-design 为视觉决策来源,把 PC 端从“多套页面局部样式并存”收敛为克制、精密、低噪音的 Hyinda 工作台。第一批只做设计底座和两个样板页:/portal 首页、/reimbursements 报销列表,形成后续页面迁移的可复用骨架。
What I Already Know
- 用户已确认执行“PC 前端视觉一致性第一批”建议。
- 前端视觉最终裁决以
frontend-designskill 为准,docs/产品设计规则.md作为业务、品牌和验收参考。 - 公网页面抽样显示:
/portal当前首屏层级偏多:标题 9 个、链接 42 个、SectionPanel8 个,信息像模块拼接。/reimbursements当前可见按钮约 19 个,主操作、状态切换、范围切换、导出和批量操作竞争注意力。- 代码中并存
PageHeader、WorkspaceHeader、WorkbenchHero、SectionPanel、WorkspaceSection、card-std和页面局部卡片写法。
- PC OA 应该像工作台:浅色、清晰边界、主任务突出、批量操作可达但不抢首屏。
Research References
research/pc-visual-audit.md:公网只读抽样与代码样板审视结论。
Requirements
- 统一 PC 工作台基础样式:
- 降低全局背景、侧边栏、顶栏、卡片和指标卡的装饰噪音。
- 保留 Hyinda 品牌蓝作为主行动色,不新增营销式视觉。
- 收敛卡片圆角、阴影和渐变强度,让页面更像办公系统。
- 首页
/portal:- 首屏优先展示:欢迎/角色、核心指标、待处理、常用动作。
- 员工视角下把“我的申请与资产、继续工作、常用入口、项目与协同”等低频或重复内容下沉到更轻的二级区域。
- 保留经理/管理员视角的业务信息,但减少标题和大卡片堆叠感。
- 报销列表
/reimbursements:- 主操作只突出“新建报销”。
- 导出、批量操作、统计分析等降为次级工具区,不和主按钮同权。
- 状态切换保留,但视觉上应更像筛选控件而不是一排主按钮。
- 不改变报销创建、导出、批量、删除草稿、筛选、分页和权限逻辑。
- 自动化与视觉验证:
- 前端 typecheck/build 通过。
- Focused Playwright 覆盖
/portal、/reimbursements可见性和主要操作入口。 - 补 PC 截图证据。
Scope
- 共享 PC 视觉底座:
client/src/design/theme.css、client/src/index.css、PC 壳层导航和通用按钮样式。 - 第一批样板页:
/portal首页、/reimbursements报销列表。 - 回归验证:登录/Portal 交互、PC 首页、PC 报销列表、移动首页和移动审批列表的既有视觉壳层基线。
- 任务记录:当前 Trellis task 下的 PRD、研究记录、实施记录和验证记录。
Acceptance Criteria
- PC 侧边栏/顶栏/卡片视觉更克制,阴影和渐变显著减少。
/portal员工视角首屏信息减少,不再出现多个同级大区块抢注意力。/portal保留待处理、常用动作、通知/动态、最近访问等入口,但低频内容下沉。/reimbursements只把“新建报销”作为主 CTA,导出/批量/统计分析成为次级工具。/reimbursements原有列表、状态 tab、权限、删除草稿、批量模式入口仍可用。- 不修改后端接口、权限模型、路由语义、数据库或真实业务数据。
- 前端 typecheck/build、UI 设计规则检查、focused E2E、Trellis governance、
git diff --check通过。
Definition Of Done
- 第一批 PC 视觉收敛代码、测试和任务记录完成。
- 本地验证、视觉壳层回归、登录/Portal 回归、Trellis 治理校验和截图证据完成。
- 下一步进入提交与部署批准;未经部署和公网检查,不告知用户可以公网测试。
Test Plan
- 本地验证通过:
cd client && npm run typecheckcd client && npm run buildcd client && E2E_BASE_URL=http://127.0.0.1:<port> npx playwright test tests/e2e/login-portal-ux.spec.ts --workers=1 --reporter=listcd client && E2E_BASE_URL=http://127.0.0.1:<port> npx playwright test tests/e2e/visual-shell.spec.ts --workers=1 --reporter=list或新增 focused 用例。node scripts/qa/check-ui-design-rules.mjs --strictpython3 ./.trellis/scripts/task.py validate 05-27-pc-frontend-visual-consistency-wave1node scripts/qa/check-trellis-governance.mjsgit diff --check
- 生成桌面截图证据,保存到
output/playwright/pc-frontend-visual-consistency-wave1/。 - 提交代码后再请求部署批准;未经部署和公网检查,不告知用户可以公网测试。
Out Of Scope
- 不做全站页面一次性重构。
- 不改移动核心业务流程。
- 不新增第三方 UI 库。
- 不改后端 API、权限、审批、报销状态机、数据库或部署环境变量。
- 不删除业务功能,只调整信息层级、视觉密度和入口权重。
Technical Notes
- 设计源:
frontend-designskill。 - 产品规则:
docs/产品设计规则.md。 - 前端规范:
.trellis/spec/hyb-oa/frontend-react-vite-design.md。 - 主要文件:
client/src/index.cssclient/src/components/navigation/Sidebar.tsxclient/src/components/navigation/Topbar.tsxclient/src/components/patterns/ListWorkspace.tsxclient/src/components/patterns/SectionPanel.tsxclient/src/components/patterns/MetricCard.tsxclient/src/components/patterns/WorkbenchHero.tsxclient/src/pages/PortalHomePage.tsxclient/src/pages/ReimbursementsPage.tsx