From a485bea6e88e5d900f6c8f6bb2a2cf01b1f73e6d Mon Sep 17 00:00:00 2001 From: shunli Date: Tue, 26 May 2026 16:01:11 +0800 Subject: [PATCH] =?UTF-8?q?oaops1-seven-day-trial-prep=20=E8=AE=B0?= =?UTF-8?q?=E5=BD=95PC=E5=8F=82=E8=80=83=E4=BD=93=E7=B3=BB=E8=B0=83?= =?UTF-8?q?=E7=A0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../research/prep-readiness.md | 3 +- .../research/pretrial-frontend-scope.md | 3 + .../research/pretrial-reference-systems.md | 99 +++++++++++++++++++ 3 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 .trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-reference-systems.md diff --git a/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/prep-readiness.md b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/prep-readiness.md index 17a34683..ee47394a 100644 --- a/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/prep-readiness.md +++ b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/prep-readiness.md @@ -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`。 ## 边界 diff --git a/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-frontend-scope.md b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-frontend-scope.md index c1c8cd62..92cd9ceb 100644 --- a/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-frontend-scope.md +++ b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-frontend-scope.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/首页、报销列表和详情、审批列表和详情。 diff --git a/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-reference-systems.md b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-reference-systems.md new file mode 100644 index 00000000..f1aef9a3 --- /dev/null +++ b/.trellis/tasks/05-26-oaops1-seven-day-trial-prep/research/pretrial-reference-systems.md @@ -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. 业务覆盖看钉钉、泛微、合思/每刻。 + +这比指定单一目标网站更稳妥。单一竞品容易导致照抄、范围膨胀或风格冲突；分层参考能约束每个页面只借鉴它该借鉴的部分。