oaops1-seven-day-trial-prep 记录PC参考体系调研

2026-05-26 16:01:11 +08:00
@@ -39,13 +39,14 @@
  - 重排信息架构：按员工、审批人、财务、管理员重排入口。
  - 视觉统一：统一间距、字号、按钮、卡片、表格和移动布局。
 - 建议优先批次：Portal/首页、报销、审批、移动入口、财务/AP；合同、项目、资产和后台配置放第二批。
- 试运行前可做范围已补充调研：见 `research/pretrial-frontend-scope.md`。PC 页面风格不统一应纳入启动前清障，但只做“PC 样板收敛 + 文案减噪 + 默认视图降噪 + 视觉证据补齐”，不要做全局改版。
+- 试运行前可做范围已补充调研：见 `research/pretrial-frontend-scope.md`。PC 页面风格不统一应纳入启动前清障，但只做“PC 样板收敛 + 文案减噪 + 默认视图降噪 + 视觉证据补齐”，不要做全局改版。参考体系见 `research/pretrial-reference-systems.md`：品牌看 Hyinda，主体验看飞书工作台/审批，PC 样板看 Ant Design，业务覆盖只参考钉钉、泛微、合思/每刻。

 ## 证据引用

 - 权限矩阵报告：`research/prep-permission-matrix/summary.json`。
 - 本准备 PRD：`prd.md`。
 - 试运行前前端可改范围调研：`research/pretrial-frontend-scope.md`。
+- 试运行前 PC 参考体系调研：`research/pretrial-reference-systems.md`。

 ## 边界

@@ -5,6 +5,7 @@
 - `docs/产品设计规则.md`
 - `.trellis/spec/hyb-oa/frontend-react-vite-design.md`
 - `docs/trialrun/人工试运行报告.md` 中 OAFRONT6、OAKISS1、PCDESIGN1 结论
+- `research/pretrial-reference-systems.md`
 - 当前前端抽样文件：
  - `client/src/pages/PortalHomePage.tsx`
  - `client/src/pages/ReimbursementsPage.tsx`
@@ -51,6 +52,8 @@

 这是用户明确指出的试运行前问题，建议作为清障型 UI 小修里的独立优先项处理。

+参考体系按 `research/pretrial-reference-systems.md` 执行：品牌看 Hyinda 官网，主体验看飞书工作台/飞书审批，PC 样板看 Ant Design 中后台模式，业务覆盖只参考钉钉、泛微、合思/每刻，不照抄任何竞品视觉或专有交互。
+
 范围限定在高频 PC 页面和容易误导真实用户的页面：

 - Portal/首页、报销列表和详情、审批列表和详情。
@@ -0,0 +1,99 @@
+# 试运行前 PC 前端参考体系调研
+
+## 调研目的
+
+回答“是否需要为 PC 页面统一增加目标网站或类似系统参考”。结论是：需要，但不应指定单一竞品照抄。hyb-oa 的 PC 页面应使用分层参考体系，避免一会儿像飞书、一会儿像泛微、一会儿像通用后台模板。
+
+## 调研来源
+
+- 现有事实源：`docs/产品设计规则.md` 已固定 Hyinda 官网品牌气质，并把飞书工作台/飞书审批作为唯一主 UI/布局参考。
+- 飞书审批官方帮助：
+  - `https://www.feishu.cn/hc/zh-CN/articles/360033971554-飞书审批管理员手册`
+  - `https://www.feishu.cn/hc/zh-CN/articles/633391673719-飞书审批-小组件使用手册`
+- 钉钉审批官方页面和管理员手册：
+  - `https://page.dingtalk.com/wow/dingtalk/act/approval-web`
+  - `https://static.dingtalk.com/media/lBDOASk63s4-WqFDznPJIHA.pdf`
+- Ant Design 设计规范：
+  - `https://ant.design/docs/spec/navigation/`
+  - `https://3x.ant.design/docs/spec/data-display-cn`
+  - `https://ant.design/docs/spec/research-form/`
+  - `https://5x.ant.design/docs/spec/data-list/`
+  - `https://4x-ant-design.antgroup.com/docs/spec/detail-page`
+- 泛微 e-office 官方产品资料：
+  - `https://www.eofficeoa.com/productupdate`
+  - `https://e-office.cn/oa/product/purchase`
+- 费控/报销产品资料：
+  - 合思：`https://www.hosecloud.com/`
+  - 每刻：`https://www.maycur.com/`
+
+## 候选参考判断
+
+| 参考对象 | 适合借鉴 | 不适合借鉴 | 结论 |
+| --- | --- | --- | --- |
+| Hyinda 官网 | 品牌蓝、浅色背景、清晰边界、稳重科技气质 | 官网英雄页、营销叙事、大图大标题 | 品牌气质基线，不做交互参考 |
+| 飞书工作台/飞书审批 | 工作台任务聚合、待办/已发起/抄送分组、审批入口、消息直达详情、管理后台的搜索/导出/交接 | IM、云文档、多维表格、开放平台生态、飞书专有文案和细节 | 主参考，决定 PC 工作台和审批体验方向 |
+| Ant Design | PC 中后台导航、表格、筛选、表单、详情页、空状态、按钮层级等可复用模式 | 直接引入 Ant 组件库、照搬视觉皮肤、把页面变成重型后台 | 实施参考，决定页面样板和控件语义 |
+| 钉钉审批 | 审批模板覆盖、假勤/财务/物品领用等轻流程场景、移动审批轻任务 | 钉钉生态、强移动优先、营销页样式 | 功能覆盖参考，不做 PC 视觉参考 |
+| 泛微 e-office | OA 台账、合同/采购/付款/权限/日志等业务完整性 | 重型 OA 复杂度、自定义配置过多、页面密度过高 | 后台台账和字段完整性参考，不做主视觉参考 |
+| 合思/每刻 | 报销、发票、OCR、财务复核、付款/AP、电子档案的专业路径 | 预算/差旅/银企深集成、大型费控平台复杂度 | 财务流程参考，不做全局 UI 参考 |
+
+## 推荐参考体系
+
+### 1. 主目标：飞书工作台/飞书审批
+
+用于统一“用户每天怎么进来处理事”：
+
+- 首页只突出待处理、我发起的进度、常用入口和异常提醒。
+- 审批列表分清“待我审批 / 已处理 / 我发起的 / 抄送或通知”。
+- 消息或通知点击后直达业务详情或审批详情。
+- 管理后台可以有搜索、导出、交接和权限管理，但普通员工不看这些复杂配置。
+
+### 2. 实施样板：Ant Design PC 中后台模式
+
+用于统一“页面怎么长、控件怎么排”：
+
+- PC 列表页：页头 -> 关键筛选 -> 表格/列表 -> 分页/批量动作。
+- PC 详情页：摘要 -> 关键字段 -> 附件/发票/审批流/日志 -> 主操作。
+- 表格适合结构化数据和横纵向比较；列表适合概要扫读；卡片只用于轻量分组，不堆叠成营销布局。
+- 表单同类内容使用同类控件，提示和标题简短；复杂表单分组，不在单区块内塞过多字段。
+- C 类配置页默认“安全摘要 + 高级配置”，降低误操作。
+
+### 3. 业务覆盖参考：钉钉、泛微、合思/每刻
+
+用于确认“有没有漏场景”，不指导视觉：
+
+- 钉钉：审批模板、假勤、财务、物品领用等高频场景覆盖。
+- 泛微：合同、采购、付款、台账、权限和日志留痕。
+- 合思/每刻：报销、发票、OCR、财务复核、付款/AP、档案归集。
+
+## PC 清障落地映射
+
+| hyb-oa 页面 | 主参考 | 本轮试运行前只做 |
+| --- | --- | --- |
+| Portal/首页 | 飞书工作台 + Hyinda 品牌 | 减少说明，突出待办、进度、异常、常用入口 |
+| 报销列表 | Ant 列表/表格 + 合思/每刻流程 | 统一筛选、状态、金额、申请人、下一步动作 |
+| 报销详情 | Ant 详情页 + 飞书审批单据 | 摘要、明细、发票、附件、审批流、付款状态分区一致 |
+| 审批列表/详情 | 飞书审批 + Ant 详情页 | 分清待办/已处理/我发起，详情突出对象、状态、历史和动作 |
+| AP/付款 | Ant 表格 + 合思/每刻财务路径 | 默认待付款/异常，历史和导出次级化 |
+| 合同/项目 | 泛微台账 + Ant 列表/详情 | 默认正式数据、负责人、到期、归档位置，弱化 TEST/SMOKE |
+| 资产台账 | Ant 列表/详情 | 日常资产列表和详情优先，分类/ERP/高级字段折叠 |
+| C 类配置页 | Ant 配置页 | 安全摘要优先，高级配置折叠，危险动作二次确认 |
+
+## 应避免
+
+- 不把飞书、钉钉、泛微、合思或每刻的文案、视觉细节、专有交互复制进 hyb-oa。
+- 不把 OA 做成飞书生态入口；企业微信仍只是入口和消息触达，业务主办仍在 OA。
+- 不用泛微/e-office 的复杂度来扩张 V1。
+- 不因参考合思/每刻而启用预算硬控、差旅、银企直连或大费控平台能力。
+- 不在试运行前引入新的 UI 组件库。
+
+## 推荐结论
+
+应在 `oa-frontend-pretrial-cleanup` 中明确“目标参考体系”：
+
+1. 品牌看 Hyinda 官网。
+2. 主体验看飞书工作台/飞书审批。
+3. PC 样板看 Ant Design 中后台模式。
+4. 业务覆盖看钉钉、泛微、合思/每刻。
+
+这比指定单一目标网站更稳妥。单一竞品容易导致照抄、范围膨胀或风格冲突；分层参考能约束每个页面只借鉴它该借鉴的部分。