统一PC前端布局密度（05-28-pc-frontend-layout-unification）
这个提交包含在：
@@ -44,6 +44,12 @@ classes in `client/src/index.css`:
|
||||
secondary actions.
|
||||
- `ops-table-focus` for the primary desktop table container.
|
||||
- `ops-inline-alert` for temporary mode hints such as batch operation notices.
|
||||
- `PrimaryTable` already applies `ops-table-focus` by default; page code may
|
||||
add responsive visibility classes such as `hidden md:block`, but should not
|
||||
recreate a separate table frame.
|
||||
- Finance/admin status summaries should prefer the shared `finance-status-strip`
|
||||
and `finance-metric-card` classes unless the task introduces a new reusable
|
||||
metric component.
|
||||
|
||||
**Why**: This keeps high-frequency PC pages dense and predictable without
|
||||
recreating page-local Tailwind command bars. It also lets `frontend-design`
|
||||
@@ -67,7 +73,7 @@ change the visual treatment once while preserving component contracts.
|
||||
</div>
|
||||
</FilterBar>
|
||||
|
||||
<PrimaryTable className="hidden md:block ops-table-focus">...</PrimaryTable>
|
||||
<PrimaryTable className="hidden md:block">...</PrimaryTable>
|
||||
```
|
||||
|
||||
**Tests Required**:
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Validate Trellis workflow, scope and no production side effects"}
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Validate frontend design contracts, tests and UI governance"}
|
||||
{"file": ".trellis/tasks/archive/2026-05/05-27-oa-product-flow-test-policy-audit/research/overall-audit-matrices.md", "reason": "Validate implementation remains aligned with governance review roadmap"}
|
||||
{"file": ".trellis/tasks/archive/2026-05/05-27-oa-frontend-layout-page-fit-review/research/page-layout-and-fit-review.md", "reason": "Validate page taxonomy and design direction are followed"}
|
||||
@@ -0,0 +1,4 @@
|
||||
{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Trellis task, approval and commit boundaries for implementation"}
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Primary frontend design and verification rules for PC OA pages"}
|
||||
{"file": ".trellis/tasks/archive/2026-05/05-27-oa-product-flow-test-policy-audit/research/overall-audit-matrices.md", "reason": "Governance review conclusions and execution roadmap"}
|
||||
{"file": ".trellis/tasks/archive/2026-05/05-27-oa-frontend-layout-page-fit-review/research/page-layout-and-fit-review.md", "reason": "Page taxonomy, fit matrix and frontend design direction"}
|
||||
@@ -0,0 +1,60 @@
|
||||
# 实施方案
|
||||
|
||||
## 推荐方案
|
||||
|
||||
采用“共享模板先行 + 重点页面收敛”的方式，而不是逐页重画。
|
||||
|
||||
1. 盘点现有 PC 页面是否已经使用 `ListWorkspace`、`WorkspaceHeader`、`FilterBar`、`PrimaryTable`、`PageScaffold` 和 `ops-*` / `finance-*` / `admin-*`。
|
||||
2. 先补共享层：
|
||||
- 统一页面宽度、标题层级、标题动作区、统计条密度、命令区间距、表格容器边界。
|
||||
- 保持现有 class contract，不破坏已经通过 Wave2-Wave4 的页面。
|
||||
3. 再改重点页面：
|
||||
- 工作台：突出今日动作和待办，折叠低频入口。
|
||||
- 报销/审批：列表统一筛选和主表，详情统一摘要、票据/附件、审批、付款/证据四区。
|
||||
- 财务/AP/票据池：保留高密，但统一统计、操作面板和表格焦点。
|
||||
- C 类管理页：统一统计条、命令区、表格、空状态，减少页面说明。
|
||||
4. 最后做视觉与交互验证：
|
||||
- typecheck/build
|
||||
- UI design rules
|
||||
- focused Playwright
|
||||
- 必要时用截图检查桌面和移动响应式。
|
||||
|
||||
## 风险控制
|
||||
|
||||
- 不动业务数据流、接口、权限、审批状态机和数据库。
|
||||
- 不把“视觉优化”变成流程重构。
|
||||
- 不新增重复 UI 系统；优先复用已有 pattern 和 CSS class。
|
||||
- 高风险动作只调整位置和呈现，不取消二次确认。
|
||||
|
||||
## 第一批文件候选
|
||||
|
||||
实际实现前再按代码确认，候选区域包括：
|
||||
|
||||
- `client/src/components/patterns/`
|
||||
- `client/src/index.css`
|
||||
- `client/src/pages/PortalHomePage.tsx`
|
||||
- `client/src/pages/ReimbursementsPage.tsx`
|
||||
- `client/src/pages/ReimbursementDetailPage.tsx`
|
||||
- `client/src/pages/WorkflowTasksPage.tsx`
|
||||
- `client/src/pages/WorkflowTaskDetailPage.tsx`
|
||||
- `client/src/pages/InvoicePoolPage.tsx`
|
||||
- `client/src/pages/PaymentBatchesPage.tsx`
|
||||
- `client/src/pages/ApOperationsPage.tsx`
|
||||
- `client/src/pages/UserManagementPage.tsx`
|
||||
- `client/src/pages/MasterDataPage.tsx`
|
||||
- `client/src/pages/FeatureFlagsPage.tsx`
|
||||
- `client/src/pages/NotificationChannelsPage.tsx`
|
||||
- `client/src/pages/AuditLogsPage.tsx`
|
||||
|
||||
## 不做事项
|
||||
|
||||
- 不新增登录、邮箱、企业微信功能。
|
||||
- 不接发票验真真实 provider。
|
||||
- 不改制度签收、用印台账、采购比价或审批阈值。
|
||||
- 不部署公网。
|
||||
|
||||
## 完成记录
|
||||
|
||||
- 共享层：收敛 `theme.css` 半径、`ListWorkspace` 标题/筛选/表格密度、`index.css` 的 `ops-*`、`finance-*`、`admin-*` 和 Portal 类。
|
||||
- 页面层：压缩 Portal 工作台文案与面板密度，系统设置改为带图标的管理入口卡片，报销批量操作、详情错误态、主数据/功能开关/通知渠道间距统一。
|
||||
- 验证：typecheck、build、UI design rules、Trellis governance、Wave2/Wave4 focused Playwright 均通过。
|
||||
@@ -0,0 +1,105 @@
|
||||
# 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
|
||||
|
||||
- [x] 关键 PC 页面采用统一页面骨架、命令区、表格/列表和详情模式。
|
||||
- [x] 页面文案明显收敛，不再出现重复说明型段落或页面级帮助堆叠。
|
||||
- [x] 财务/AP/票据池仍保持高密度操作效率，危险操作保留确认和审计提示。
|
||||
- [x] 管理页命令区、统计条、表格容器和空状态保持一致。
|
||||
- [x] 不改变后端接口、数据库、权限模型、审批规则、企业微信配置或生产配置。
|
||||
- [x] `cd client && npm run typecheck && npm run build` 通过。
|
||||
- [x] `node scripts/qa/check-ui-design-rules.mjs` 通过。
|
||||
- [x] 至少运行 focused Playwright 覆盖 PC 关键页，必要时补截图/交互证据。
|
||||
|
||||
## Definition of Done
|
||||
|
||||
- 改造范围内页面在桌面宽度下没有明显布局漂移、文字挤压、操作区混乱或卡片套卡片。
|
||||
- 移动响应式没有被 PC 改造破坏。
|
||||
- 本地验证通过；如果用户要求可测，再获得部署批准后执行公网验证。
|
||||
- Trellis task 校验和治理检查通过。
|
||||
- 提交信息使用中文并引用本任务 ID。
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 不重写整套设计系统。
|
||||
- 不改移动端业务主体验。
|
||||
- 不改业务流程、审批阈值、付款规则、发票验真 provider、权限模型或数据库 schema。
|
||||
- 不采购、部署或改生产配置。
|
||||
- 不把官网营销视觉照搬到 OA 工作台。
|
||||
|
||||
## Test Plan
|
||||
|
||||
```bash
|
||||
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 根据最终修改页面选择，优先覆盖：
|
||||
|
||||
```bash
|
||||
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、报销/审批详情、系统设置、主数据、功能开关和通知渠道等展示层；没有修改后端接口、数据库、权限、审批规则或生产配置。
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "pc-frontend-layout-unification",
|
||||
"name": "pc-frontend-layout-unification",
|
||||
"title": "PC前端布局统一改造",
|
||||
"description": "在OAOPS1真实试运行并行推进的前提下，统一PC页面布局、信息密度、命令区、表格/列表和详情区体验。",
|
||||
"status": "in_progress",
|
||||
"dev_type": null,
|
||||
"scope": "frontend-pc-layout",
|
||||
"package": "client",
|
||||
"priority": "P2",
|
||||
"creator": "shunli",
|
||||
"assignee": "shunli",
|
||||
"createdAt": "2026-05-28",
|
||||
"completedAt": null,
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户