# PC 前端视觉一致性第一批

## Goal

以 `frontend-design` 为视觉决策来源，把 PC 端从“多套页面局部样式并存”收敛为克制、精密、低噪音的 Hyinda 工作台。第一批只做设计底座和两个样板页：`/portal` 首页、`/reimbursements` 报销列表，形成后续页面迁移的可复用骨架。

## What I Already Know

- 用户已确认执行“PC 前端视觉一致性第一批”建议。
- 前端视觉最终裁决以 `frontend-design` skill 为准，`docs/产品设计规则.md` 作为业务、品牌和验收参考。
- 公网页面抽样显示：
  - `/portal` 当前首屏层级偏多：标题 9 个、链接 42 个、`SectionPanel` 8 个，信息像模块拼接。
  - `/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

- [x] PC 侧边栏/顶栏/卡片视觉更克制，阴影和渐变显著减少。
- [x] `/portal` 员工视角首屏信息减少，不再出现多个同级大区块抢注意力。
- [x] `/portal` 保留待处理、常用动作、通知/动态、最近访问等入口，但低频内容下沉。
- [x] `/reimbursements` 只把“新建报销”作为主 CTA，导出/批量/统计分析成为次级工具。
- [x] `/reimbursements` 原有列表、状态 tab、权限、删除草稿、批量模式入口仍可用。
- [x] 不修改后端接口、权限模型、路由语义、数据库或真实业务数据。
- [x] 前端 typecheck/build、UI 设计规则检查、focused E2E、Trellis governance、`git diff --check` 通过。

## Definition Of Done

- 第一批 PC 视觉收敛代码、测试和任务记录完成。
- 本地验证、视觉壳层回归、登录/Portal 回归、Trellis 治理校验和截图证据完成。
- 下一步进入提交与部署批准；未经部署和公网检查，不告知用户可以公网测试。

## Test Plan

- 本地验证通过：
  - `cd client && npm run typecheck`
  - `cd client && npm run build`
  - `cd client && E2E_BASE_URL=http://127.0.0.1:<port> npx playwright test tests/e2e/login-portal-ux.spec.ts --workers=1 --reporter=list`
  - `cd 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 --strict`
  - `python3 ./.trellis/scripts/task.py validate 05-27-pc-frontend-visual-consistency-wave1`
  - `node scripts/qa/check-trellis-governance.mjs`
  - `git diff --check`
- 生成桌面截图证据，保存到 `output/playwright/pc-frontend-visual-consistency-wave1/`。
- 提交代码后再请求部署批准；未经部署和公网检查，不告知用户可以公网测试。

## Out Of Scope

- 不做全站页面一次性重构。
- 不改移动核心业务流程。
- 不新增第三方 UI 库。
- 不改后端 API、权限、审批、报销状态机、数据库或部署环境变量。
- 不删除业务功能，只调整信息层级、视觉密度和入口权重。

## Technical Notes

- 设计源：`frontend-design` skill。
- 产品规则：`docs/产品设计规则.md`。
- 前端规范：`.trellis/spec/hyb-oa/frontend-react-vite-design.md`。
- 主要文件：
  - `client/src/index.css`
  - `client/src/components/navigation/Sidebar.tsx`
  - `client/src/components/navigation/Topbar.tsx`
  - `client/src/components/patterns/ListWorkspace.tsx`
  - `client/src/components/patterns/SectionPanel.tsx`
  - `client/src/components/patterns/MetricCard.tsx`
  - `client/src/components/patterns/WorkbenchHero.tsx`
  - `client/src/pages/PortalHomePage.tsx`
  - `client/src/pages/ReimbursementsPage.tsx`