oaops1-seven-day-trial-prep 记录试运行前PC前端清障范围
这个提交包含在：
@@ -39,11 +39,13 @@
|
||||
- 重排信息架构：按员工、审批人、财务、管理员重排入口。
|
||||
- 视觉统一：统一间距、字号、按钮、卡片、表格和移动布局。
|
||||
- 建议优先批次：Portal/首页、报销、审批、移动入口、财务/AP；合同、项目、资产和后台配置放第二批。
|
||||
- 试运行前可做范围已补充调研：见 `research/pretrial-frontend-scope.md`。PC 页面风格不统一应纳入启动前清障，但只做“PC 样板收敛 + 文案减噪 + 默认视图降噪 + 视觉证据补齐”，不要做全局改版。
|
||||
|
||||
## 证据引用
|
||||
|
||||
- 权限矩阵报告：`research/prep-permission-matrix/summary.json`。
|
||||
- 本准备 PRD：`prd.md`。
|
||||
- 试运行前前端可改范围调研：`research/pretrial-frontend-scope.md`。
|
||||
|
||||
## 边界
|
||||
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
# 试运行前前端可改范围调研
|
||||
|
||||
## 调研来源
|
||||
|
||||
- `docs/产品设计规则.md`
|
||||
- `.trellis/spec/hyb-oa/frontend-react-vite-design.md`
|
||||
- `docs/trialrun/人工试运行报告.md` 中 OAFRONT6、OAKISS1、PCDESIGN1 结论
|
||||
- 当前前端抽样文件：
|
||||
- `client/src/pages/PortalHomePage.tsx`
|
||||
- `client/src/pages/ReimbursementsPage.tsx`
|
||||
- `client/src/pages/WorkflowTasksPage.tsx`
|
||||
- `client/src/pages/ApOperationsPage.tsx`
|
||||
- `client/src/components/navigation/NavLinks.tsx`
|
||||
- `client/src/features/navigation/schema.ts`
|
||||
- `node scripts/qa/check-ui-design-rules.mjs --json`
|
||||
|
||||
## 当前判断
|
||||
|
||||
前端基础质量已经能进入真实使用稳定化：设计规则扫描 130 个文件，0 findings；PC 只读视觉矩阵和移动矩阵已有历史通过证据。当前问题主要不是页面不可用，而是信息密度、默认暴露范围、解释文案、测试数据噪声、角色默认视图和 PC 页面风格不统一仍会增加试运行认知成本。
|
||||
|
||||
需要特别区分：自动化视觉矩阵通过只说明“没有明显打不开、遮挡、403、UUID 主展示等硬伤”，不等于 PC 端页面已经形成统一体验。当前抽样可以看到页面同时存在 `ListWorkspace/WorkspaceHeader`、`PageScaffold + WorkbenchHero`、`SectionPanel`、直接 `card-std` 和页面内自定义表格/分区等多套写法；这会让不同 PC 页面在标题层级、卡片密度、表格工具条、按钮层级和说明文案上观感不一致。
|
||||
|
||||
试运行前可以做小范围清障，但不建议做全局改版。所有改动必须满足：
|
||||
|
||||
- 不改审批、OCR、付款、AP、权限、状态机或后端数据语义。
|
||||
- 不新增公网业务写入。
|
||||
- 不改变企业微信主办/链接回 OA 的边界。
|
||||
- 不把试运行起点推迟成无限 UI 打磨。
|
||||
- 每项改动能用现有 typecheck/build/视觉矩阵验证。
|
||||
|
||||
## 试运行前可以做
|
||||
|
||||
### A. 补视觉与动态详情证据
|
||||
|
||||
这是最低风险，建议优先做。
|
||||
|
||||
- 补 5 类动态详情页截图证据：报销详情、审批详情、项目详情、人员详情、打印/留痕页。
|
||||
- 启动当天复跑 UI 设计规则、PC 只读视觉矩阵和移动入口矩阵。
|
||||
- 目的：证明“能用、无遮挡、不误导、不泄露内部编号”，不追求视觉重构。
|
||||
|
||||
### B. 文案减噪
|
||||
|
||||
适合试运行前做，但要控制在页面字幕、说明、空状态和提示层。
|
||||
|
||||
- 压缩 Portal、报销、审批、财务/AP 的副标题和说明。
|
||||
- 删除设计意图式、流程解释式、重复式文案。
|
||||
- 保留三类信息：当前状态、下一步动作、异常原因。
|
||||
- 不改确认弹窗中的风险说明；高风险动作仍要说明后果。
|
||||
|
||||
### C. PC 页面风格统一收口
|
||||
|
||||
这是用户明确指出的试运行前问题，建议作为清障型 UI 小修里的独立优先项处理。
|
||||
|
||||
范围限定在高频 PC 页面和容易误导真实用户的页面：
|
||||
|
||||
- Portal/首页、报销列表和详情、审批列表和详情。
|
||||
- 财务/AP、付款批次、合同台账、项目、资产台账。
|
||||
- HR/考勤、预算、差旅、ERP、功能开关等冻结/后置或 C 类管理页只做边界表达和样式收敛。
|
||||
|
||||
可做改动：
|
||||
|
||||
- 统一 PC 页头：列表页优先 `WorkspaceHeader`，首页保留工作台样式但减少营销化大块说明，详情页用事实源摘要。
|
||||
- 统一卡片密度：高频工作页统一 `p-4 md:p-5` 为主，避免同一层级混用过大留白、过重卡片和过多说明。
|
||||
- 统一表格/筛选：列表页按“页头 -> 关键筛选 -> 表格/卡片 -> 分页/批量动作”排列，高级筛选折叠。
|
||||
- 统一按钮层级：主动作使用品牌蓝，次动作弱化，危险动作只在允许状态出现并保持二次确认。
|
||||
- 统一文案层级：标题说业务对象，副标题只保留状态/下一步/异常原因，删除解释设计意图的长段落。
|
||||
- 统一空/错/加载状态：按现有 `card-std` 和共享组件表达，不在不同页面临时自造提示样式。
|
||||
|
||||
不做改动：
|
||||
|
||||
- 不改 API、权限、审批、OCR、付款、AP 状态机。
|
||||
- 不重排全部信息架构，不新建大型设计系统。
|
||||
- 不为低频管理页做深度视觉重构，只做“安全摘要 + 高级配置”的默认收敛。
|
||||
|
||||
验收建议：
|
||||
|
||||
- 补 PC 1280/1440 截图对比，至少覆盖首页、报销、审批、AP/付款、合同/项目/资产。
|
||||
- 复跑 `node scripts/qa/check-ui-design-rules.mjs --strict`。
|
||||
- 若改前端代码，执行 `cd client && npm run typecheck && npm run build`。
|
||||
- 若涉及实际页面截图，复跑 `bash scripts/qa/run-oafront3-pc-readonly-visual.sh`。
|
||||
|
||||
### D. 导航与冻结边界清晰化
|
||||
|
||||
适合试运行前做，能降低误点风险。
|
||||
|
||||
- 保持主导航收敛，备用模块继续默认收起。
|
||||
- 对预算、差旅、ERP、切换控制台等后置/冻结模块强化“未启用/仅管理/仅历史/只读”标识。
|
||||
- HR/考勤页面需要继续表达“企业微信主办，OA 留存/审计”，避免员工误以为 OA 是日常新建入口。
|
||||
|
||||
### E. 默认视图降噪
|
||||
|
||||
只改默认筛选、折叠和排序，不改数据。
|
||||
|
||||
- AP 默认优先待付款、异常、待补资料，不把全量历史测试记录压到首屏。
|
||||
- 合同/项目默认隐藏或弱化 `TEST/SMOKE` 数据，保留正式合同、到期、负责人、归档位置。
|
||||
- 资产台账默认展示资产列表和详情；分类维护、ERP 同步状态和高级字段放折叠区。
|
||||
- 功能开关、通知渠道等 C 类管理页默认展示安全摘要，高级配置折叠。
|
||||
|
||||
### F. 移动轻任务微调
|
||||
|
||||
只处理明显卡点，不重做移动体系。
|
||||
|
||||
- 报销移动卡片保留单号、状态、金额、报销人、下一步动作。
|
||||
- 审批移动页优先“待我审批/我发起的进度”，避免混成无分组流水。
|
||||
- 深层详情继续用统一返回、状态和吸底动作，不加新导航。
|
||||
|
||||
## 试运行前不建议做
|
||||
|
||||
- Portal 首屏大重排或角色工作台重构。
|
||||
- 全站视觉统一大改版；试运行前只做 PC 样板收敛和高频页面观感对齐。
|
||||
- 审批中心流程重构、批量审批策略变化、快捷审批语义调整。
|
||||
- 报销/OCR/发票上传主链路调整。
|
||||
- 付款批次、AP、财务复核状态机调整。
|
||||
- 合同、项目、资产的数据模型或权限模型调整。
|
||||
- 预算、ERP、差旅、HR 深镜像、应急接管、恢复回写、RuleOps 等后置能力开发。
|
||||
|
||||
## 建议拆分
|
||||
|
||||
### 试运行前小任务：`oa-frontend-pretrial-cleanup`
|
||||
|
||||
目标：1 到 2 天内完成低风险清障，不能拖延 7 天真实试运行。
|
||||
|
||||
范围：
|
||||
|
||||
1. UI 证据补齐：动态详情页截图、PC 只读视觉矩阵、移动入口矩阵。
|
||||
2. PC 风格统一收口：页头、卡片密度、表格/筛选、按钮层级、空/错/加载状态。
|
||||
3. 高频页文案减噪：Portal、报销、审批、财务/AP。
|
||||
4. 冻结/后置模块边界提示：预算、差旅、ERP、HR/考勤、切换控制台。
|
||||
5. 默认视图降噪：AP、合同/项目、资产台账。
|
||||
|
||||
验收：
|
||||
|
||||
- `node scripts/qa/check-ui-design-rules.mjs --strict`
|
||||
- `cd client && npm run typecheck && npm run build`
|
||||
- `bash scripts/qa/run-oafront3-pc-readonly-visual.sh`
|
||||
- `QA_ISSUE_ID=oa-frontend-pretrial VISUAL_MATRIX_SCOPE=mobile bash scripts/qa/run-visual-matrix.sh live`
|
||||
- 若改移动页，补代表性移动/企业微信截图。
|
||||
|
||||
### 试运行后任务：`oa-frontend-experience-maturity`
|
||||
|
||||
目标：基于 7 天真实反馈做更完整的体验成熟化。
|
||||
|
||||
范围：
|
||||
|
||||
- Portal 角色工作台重排。
|
||||
- 报销/OCR 提交流程进一步减步。
|
||||
- 财务/AP 专用工作台。
|
||||
- 合同/项目/资产管理页信息架构。
|
||||
- C 类后台配置页安全摘要与高级模式。
|
||||
|
||||
## 推荐结论
|
||||
|
||||
试运行前可以做，而且 PC 页面风格不统一建议纳入启动前清障。但边界必须窄：只做“PC 样板收敛 + 文案减噪 + 默认视图降噪 + 视觉证据补齐”。如果要做，建议独立建一个小 task，严格限定 1 到 2 天，不把它并入 OAOPS1 7 天试运行准备，也不让它阻断真实业务闭环。
|
||||
在新工单中引用
屏蔽一个用户