归档Wave3视觉重塑任务（05-27-pc-detail-mobile-visual-wave3）
这个提交包含在：
@@ -0,0 +1,4 @@
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "核对 Wave3 页面是否符合前端设计与验收边界"}
|
||||
{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "前端类型检查、构建和测试质量门禁"}
|
||||
{"file": ".trellis/spec/hyb-oa/docs-and-evidence.md", "reason": "Trellis 任务证据、截图和报告路径脱敏要求"}
|
||||
{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "治理检查和敏感信息排除"}
|
||||
@@ -0,0 +1,4 @@
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Wave3 前端视觉与交互裁决、截图和移动约束"}
|
||||
{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "React 组件拆分、复用和可维护性约束"}
|
||||
{"file": ".trellis/spec/frontend/type-safety.md", "reason": "TypeScript 类型和 props 约束"}
|
||||
{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "详情、通知和测试证据不得泄露敏感资料"}
|
||||
@@ -0,0 +1,48 @@
|
||||
# 实施记录
|
||||
|
||||
## 执行策略
|
||||
|
||||
1. 先审视目标页面的组件结构和现有样式，复用 Wave2 已建立的工作台语言。
|
||||
2. 只增加必要的共享样式或小组件，不重写业务逻辑。
|
||||
3. PC 详情页按“状态/摘要/动作/证据/历史”重新压缩层级。
|
||||
4. 移动关键页按单手办理和企业微信 WebView 约束处理密度、按钮和列表。
|
||||
5. 增加 focused Playwright mock 视觉用例，覆盖 PC 和移动截图。
|
||||
|
||||
## 风险控制
|
||||
|
||||
- 不修改后端 API、schema、权限、审批状态机、通知投递、企业微信和部署环境变量。
|
||||
- 不写公网业务数据。
|
||||
- 动作按钮、确认弹窗、错误提示和权限判断必须保持可达。
|
||||
- 移动页不得回退到 PC 表格体验。
|
||||
|
||||
## 待记录
|
||||
|
||||
## 实施改动
|
||||
|
||||
- PC 报销详情 `/reimbursements/:id`：按“办理摘要、付款状态、关联项目、附件材料、明细与票据、审批进度/记录、可执行动作”重排层级，复用新的 detail surface 样式。
|
||||
- PC 审批详情 `/workflow/tasks/:id`：审批对象摘要、审批动作和处理历史改为紧凑控制台结构，动作区使用统一 action card。
|
||||
- PC 通知中心 `/notifications`：桌面端从表格改为通知流卡片，保留未读筛选、类型筛选、直达业务和标记已读。
|
||||
- 移动关键页 `/mobile`、`/mobile/reimbursements`、`/mobile/approvals`、`/mobile/approvals/:taskId`、`/mobile/notifications`、`/mobile/me`：增加当前任务/列表高亮、移动命令面板和未读/重点卡片状态，不引入 PC 表格。
|
||||
- 新增 focused Playwright 用例 `client/tests/e2e/pc-detail-mobile-visual-wave3.spec.ts`，mock API 覆盖 PC 与移动截图。
|
||||
- 将 Wave3 可复用 detail/mobile surface 规则沉淀到 `.trellis/spec/hyb-oa/frontend-react-vite-design.md`。
|
||||
|
||||
## 验证命令
|
||||
|
||||
- `cd client && npm run typecheck`：通过。
|
||||
- `cd client && npm run build`：通过。
|
||||
- `cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list`：2 passed。
|
||||
- `cd client && npx playwright test tests/e2e/pc-core-workflow-visual-wave2.spec.ts --workers=1 --reporter=list`：1 passed，用于确认 Wave2 核心页面无明显回退。
|
||||
- `node scripts/qa/check-ui-design-rules.mjs`：0 findings。
|
||||
- `python3 ./.trellis/scripts/task.py validate 05-27-pc-detail-mobile-visual-wave3`：通过。
|
||||
- `node scripts/qa/check-trellis-governance.mjs`：通过。
|
||||
- `git diff --check`：通过。
|
||||
|
||||
## 截图证据
|
||||
|
||||
- Focused 截图输出：`output/playwright/pc-detail-mobile-visual-wave3/`
|
||||
- 覆盖文件：`01-pc-reimbursement-detail.png`、`02-pc-workflow-detail.png`、`03-pc-notifications.png`、`04-mobile-home.png`、`05-mobile-reimbursements.png`、`06-mobile-approvals.png`、`07-mobile-approval-detail.png`、`08-mobile-notifications.png`、`09-mobile-me.png`。
|
||||
|
||||
## 收尾判断
|
||||
|
||||
- 本轮未修改后端 API、数据库 schema、权限模型、审批状态机、企业微信配置或 SMTP 配置。
|
||||
- 本轮未执行公网部署和公网真实环境 smoke；部署与公网复核应作为合并后的下一步。
|
||||
@@ -0,0 +1,91 @@
|
||||
# PC详情与移动关键页视觉重塑 Wave3
|
||||
|
||||
## Goal
|
||||
|
||||
在 Wave2 已完成登录页、工作台、报销列表和审批中心后，继续用 `frontend-design` 收敛高频“点进去之后”的体验：报销详情、审批详情、通知中心和移动关键页。目标是让真实试运行用户从列表进入详情、从通知进入待办、从手机进入报销/审批时，仍然看到统一、简洁、低噪音的 Hyinda 工作台体验。
|
||||
|
||||
## Start Confirmation
|
||||
|
||||
- 用户在 2026-05-27 确认“开始”。
|
||||
- 本任务是前端视觉与交互重塑，不改变后端 API、权限模型、审批规则、状态机、数据库 schema、企业微信配置或公网真实数据。
|
||||
- 设计裁决来源：`frontend-design` skill；项目事实源仍按 Trellis task、`.trellis/spec/hyb-oa/` 和 `docs/` 执行。
|
||||
|
||||
## Scope
|
||||
|
||||
- 报销详情 `/reimbursements/:id`：
|
||||
- 降低说明性文案和卡片堆叠。
|
||||
- 强化单据状态、审批进度、票据/附件、付款/财务状态和主要动作。
|
||||
- 保留现有提交、撤回、审批、付款、打印、导出、附件和审计相关能力。
|
||||
- 审批详情 `/workflow/tasks/:id`：
|
||||
- 统一为紧凑审批控制台。
|
||||
- 强化当前节点、申请摘要、风险提示、审批动作和历史轨迹。
|
||||
- 保留通过、驳回、退回、转审等现有入口。
|
||||
- 通知中心 `/notifications`：
|
||||
- 将通知列表从“消息堆叠”收敛为可扫描的任务/提醒流。
|
||||
- 强化未读、类型、关联业务和批量处理入口。
|
||||
- 移动关键页：
|
||||
- `/mobile`、`/mobile/reimbursements`、`/mobile/approvals`、`/mobile/me`、`/mobile/notifications`。
|
||||
- 不引入 PC 表格，不让按钮出屏，不堆叠说明文字。
|
||||
- 保留企业微信 WebView 入口语义、底部导航、PDF 上传和审批操作可达性。
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 不改财务/付款/AP/票据池和 C 类管理页；这些进入 Wave4。
|
||||
- 不改后端接口、数据模型、权限、审批状态机、通知投递逻辑、企业微信 OAuth 或 SMTP 配置。
|
||||
- 不执行公网真实业务写入、真实付款、ERP 写入、数据库重置或企业微信写入。
|
||||
- 不把 `docs/产品设计规则.md` 重新扩展为视觉规则。
|
||||
|
||||
## Design Direction
|
||||
|
||||
- Tone：quiet command surface，克制、紧凑、面向办理。
|
||||
- Composition：详情页用“状态带 + 关键摘要 + 主动作 + 证据/历史”的层级；移动端用任务卡和固定动作区，不复制 PC。
|
||||
- Copy：删除“解释系统如何工作”的文本，保留业务下一步、风险和不可逆动作提示。
|
||||
- Density：PC 详情页允许更高信息密度；移动端优先单手可扫、按钮稳定、不横向溢出。
|
||||
- Safety：涉及付款、驳回、退回、删除、附件和导出等动作，保持原确认与错误提示。
|
||||
|
||||
## Requirements
|
||||
|
||||
- Wave3 页面视觉必须与 Wave2 的登录页、Portal、报销列表和审批待办保持同一套工作台语言。
|
||||
- 报销详情和审批详情必须突出当前可做动作，不让次级信息抢占首屏。
|
||||
- 通知中心必须能快速区分未读、业务类型和后续入口。
|
||||
- 移动关键页必须在 390px 和常见企业微信 WebView 宽度下无横向滚动、无桌面表格、无按钮文字溢出。
|
||||
- 现有业务能力不能丢失；若入口降级为次级工具，必须仍可达。
|
||||
- 页面和测试不得保存密码、token、Secret、完整账号、真实票据、合同正文、银行资料、完整本地路径或 raw payload。
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [x] 报销详情、审批详情、通知中心和移动关键页完成统一视觉与交互层级收敛。
|
||||
- [x] Wave2 页面不发生明显回退。
|
||||
- [x] PC 详情页首屏核心状态、主要动作和风险/证据入口更清晰。
|
||||
- [x] 移动关键页无 PC 表格、无横向溢出、无按钮文字挤压。
|
||||
- [x] `cd client && npm run typecheck` 通过。
|
||||
- [x] `cd client && npm run build` 通过。
|
||||
- [x] Focused Playwright 覆盖报销详情、审批详情、通知中心和移动关键页，并生成截图证据。
|
||||
- [x] `node scripts/qa/check-trellis-governance.mjs` 与 `git diff --check` 通过。
|
||||
|
||||
## Test Plan
|
||||
|
||||
```bash
|
||||
cd client && npm run typecheck
|
||||
cd client && npm run build
|
||||
cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list
|
||||
node scripts/qa/check-trellis-governance.mjs
|
||||
git diff --check
|
||||
```
|
||||
|
||||
发布前后按需补充：
|
||||
|
||||
```bash
|
||||
SYNC_ENV=0 LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash deploy/trialrun/deploy.sh
|
||||
LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh
|
||||
E2E_BASE_URL=https://oa.hyinda.com npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list
|
||||
```
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- 前端设计 skill：`frontend-design`
|
||||
- 前端 spec：`.trellis/spec/hyb-oa/frontend-react-vite-design.md`
|
||||
- 前端基础 spec：`.trellis/spec/frontend/`
|
||||
- 产品体验事实源：`docs/产品设计规则.md`
|
||||
- Wave2 参考：`.trellis/tasks/archive/2026-05/05-27-05-27-pc-core-workflow-visual-wave2/`
|
||||
- 现有视觉巡检：`client/tests/e2e/oafront3-pc-readonly-visual.spec.ts`
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "pc-detail-mobile-visual-wave3",
|
||||
"name": "pc-detail-mobile-visual-wave3",
|
||||
"title": "PC详情与移动关键页视觉重塑 Wave3",
|
||||
"description": "用 frontend-design 统一 PC 报销详情、审批详情、通知中心和移动关键页的视觉层级与交互密度。",
|
||||
"status": "completed",
|
||||
"dev_type": null,
|
||||
"scope": "client",
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "shunli",
|
||||
"assignee": "shunli",
|
||||
"createdAt": "2026-05-27",
|
||||
"completedAt": "2026-05-27",
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户