From 218ea9ad1090a7849559f3226297110c3ea79e3e Mon Sep 17 00:00:00 2001 From: shunli Date: Sat, 30 May 2026 17:47:00 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=A6=96=E6=89=B9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=88=90=E7=86=9F=E8=AE=BE=E8=AE=A1=E5=9F=BA=E7=BA=BF?= =?UTF-8?q?=EF=BC=8805-30-unified-page-design-review=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../spec/hyb-oa/frontend-react-vite-design.md | 91 +++++ .../check.jsonl | 3 + .../design.md | 48 +++ .../implement.jsonl | 2 + .../05-30-unified-page-design-review/prd.md | 124 +++++++ .../mature-enterprise-ui-reference.md | 67 ++++ .../task.json | 36 ++ .../components/onboarding/WelcomeDialog.tsx | 2 +- client/src/features/navigation/schema.ts | 2 + client/src/index.css | 64 ++++ client/src/pages/MobileProfilePage.tsx | 4 +- client/src/pages/NotificationsPage.tsx | 31 +- client/src/pages/PortalHomePage.tsx | 140 ++++++-- client/src/pages/ProfilePage.tsx | 17 +- client/src/pages/ReimbursementsPage.tsx | 4 +- client/src/pages/WorkflowTaskDetailPage.tsx | 322 ++++++++++-------- client/src/pages/WorkflowTasksPage.tsx | 163 ++++----- client/tests/e2e/login-portal-ux.spec.ts | 4 +- .../e2e/pc-core-workflow-visual-wave2.spec.ts | 7 +- .../e2e/pc-detail-mobile-visual-wave3.spec.ts | 22 +- .../e2e/r124-mobile-entry-matrix.spec.ts | 2 +- client/tests/e2e/visual-shell.spec.ts | 4 +- .../e2e/workflow-action-confirm-ui.spec.ts | 2 + .../tests/e2e/workflow-quick-approve.spec.ts | 2 +- 24 files changed, 837 insertions(+), 326 deletions(-) create mode 100644 .trellis/tasks/05-30-unified-page-design-review/check.jsonl create mode 100644 .trellis/tasks/05-30-unified-page-design-review/design.md create mode 100644 .trellis/tasks/05-30-unified-page-design-review/implement.jsonl create mode 100644 .trellis/tasks/05-30-unified-page-design-review/prd.md create mode 100644 .trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md create mode 100644 .trellis/tasks/05-30-unified-page-design-review/task.json diff --git a/.trellis/spec/hyb-oa/frontend-react-vite-design.md b/.trellis/spec/hyb-oa/frontend-react-vite-design.md index 09d32f2f..daa8f203 100644 --- a/.trellis/spec/hyb-oa/frontend-react-vite-design.md +++ b/.trellis/spec/hyb-oa/frontend-react-vite-design.md @@ -31,6 +31,97 @@ and verification contracts. Do not copy broad aesthetic guidance from - Do not add decorative landing-page styling to operational OA pages. - Run `cd client && npm run typecheck && npm run build` for frontend changes. +## Convention: Mature Enterprise Page Baseline + +**What**: From `05-30-unified-page-design-review`, hyb-oa PC/mobile pages use +Feishu approval/workbench mental models plus Ant Design / Ant Design Pro page +patterns as the mature enterprise baseline. This is a product/interaction +reference, not a copy of Feishu or Ant Design branding. + +**Global contracts**: + +- Interaction innovation is off by default for OA, approval, finance, contract, + asset and management surfaces. Prefer established Feishu / Ant Design style + patterns for page layout, action placement, button naming, tabs, filters, + detail panels, confirmations and more menus. Project-specific differences + should simplify or hide low-frequency work for small teams, not invent new + controls or unusual action flows. +- Page titles default to the route name only, such as `工作台`, `待我处理`, `报销`, + `合同台账`, `个人设置` and `通知中心`. Page subtitles are off by default and + appear only for exception, empty, permission-denied, Enterprise WeChat/OA + boundary, external-system boundary or irreversible-action explanations. +- Normal workflows should not be explained in default-visible copy. Do not add + subtitles, card descriptions, helper rows or notice bars that restate obvious + actions such as "待我处理是处理工作", "查看通知消息", "先核对再处理" or "去处理要做的事". +- Header primary actions are reserved for creation or a real page-level primary + action: `新建报销`, `新建采购`, `新增合同`, `新增资产`, `新建项目`. Workbench, + pending-task, notification and read-only record pages must not force a header + button for visual symmetry. +- Button labels use common enterprise verbs: `处理`, `去处理`, `查看详情`, + `查看全部`, `查看进度`, `继续编辑`, `新建`, `新增`, `提交`, `保存`, `取消`, + `撤回`, `作废`, `归档`, `更多`. Do not use slogan-like or invented labels + such as `处理最急的一件`. +- Sidebar entries are role-aware common work entries, not an all-permissions + module catalog. Direct entries may include `工作台`, `待我处理`, `报销`, `采购`, + `合同`, `项目`, `资产`, `付款`, `应付账款`, `票据`, `团队`, `请假记录` and `管理` + when the current role has real use. Low-frequency, frozen, staged or + troubleshooting routes stay in `更多` or the `管理` landing page. +- List pages use a right-side operation column or card tail. Default row actions + are `查看详情`, `处理`, `继续编辑` or `查看进度`; low-frequency or risky actions + such as export, batch, void, download, payment and sensitive attachment + handling move to `更多`, `台账工具` or the detail page. +- Business ledger pages use the same shape: page title and optional creation + action, visible common filters, table/card list and right-side operation + column. `台账工具` contains export, batch, statistics, templates, full-scope + views and advanced filters. +- PC detail pages use an Ant Design Pro style detail workspace: top summary, + main facts/details/evidence, right-side state and action panel, and bottom + history. Do not build PC details as a free stack of equal-weight large cards. +- Workflow approval details use one action bar, not vertical action cards: + `通过` is the primary action, `退回` and `驳回` are secondary actions, and + `转审` defaults to `更多`. Actions that need a reason open a reason input and + confirmation after click. Confirmation must include the current object + summary and consequences. +- Mobile pages use top status/focus content, sectioned single-column details or + card lists, and one bottom safe-area primary action. Secondary, destructive, + approval, payment and transfer actions go into `更多` or a confirmation + panel; do not squeeze multiple risky actions into the bottom bar. +- Normal empty sections should disappear when they have no useful content. Empty + states only explain current filter/status absence and one real next step. + +**Page map**: + +| Surface | Template | First-screen content | Primary action rule | +| --- | --- | --- | --- | +| `工作台` | 工作台总览 | 待办摘要、常用业务入口、必要提醒 | No forced header action. Use `去处理`, `新建报销`, `查看全部` inside relevant sections. | +| `待我处理` | 任务处理列表 | `待处理` / `已处理` tabs, count, minimal filters, task list | Row action is `处理`; `已处理记录` is a tab, not a separate header button. | +| `审批详情` | 详情工作区 | Summary, facts/evidence, right summary/action panel, history | One action bar: primary `通过`, secondary `退回`/`驳回`, `转审` in `更多`. | +| `报销` / `采购` / `合同` / `项目` / `资产` / `付款` / `应付账款` / `票据` | 业务台账列表 | Common filters plus table/card list | Header creation only when the route owns creation; risky tools in `台账工具` or detail. | +| Business details | 详情工作区 | Summary, facts, evidence, relations, history | Right-side state/action panel on PC; bottom primary action on mobile. | +| `管理` | 管理配置页 | Grouped landing: `人员组织`, `审批流程`, `基础资料`, `系统设置`, `审计排障` | Management subpages use search/filter, table and right operation column. | +| `个人设置` | 管理配置页 variant | `个人资料`, `账号安全`, `通知偏好`, `企业微信绑定` | No employee dossier, permission matrix or org maintenance in the default profile path. | +| `通知中心` | 业务台账列表 variant | Event inbox for state changes, reminders, failures and sync results | Notification click deep-links to business detail, workflow task or failure explanation; never duplicates `待我处理`. | +| `请假记录` / `考勤` | 业务台账列表 or record view | Enterprise WeChat-owned records, mirror status, exceptions and audit | Ordinary users do not see OA daily leave/punch approval creation; OA emergency entry only for authorized emergency/admin scope. | +| Mobile routes | Mobile expression of the same template | Top status/focus, card list or sectioned detail | One bottom safe-area primary action; secondary actions in `更多` or confirmation. | + +**Implementation order for design refactors**: + +1. A-class frequent pages: workbench, pending tasks, workflow task detail, + personal settings and notification center. +2. Business ledgers and details: reimbursement, procurement, contracts, + projects, assets, payments, AP and invoices. +3. Management and boundary pages: management landing/subpages, leave records, + attendance, Enterprise WeChat archive and mobile equivalents. + +**Tests Required**: + +- Documentation-only updates: `python3 ./.trellis/scripts/task.py validate + `, `node scripts/qa/check-trellis-governance.mjs` and + `git diff --check`. +- Frontend implementation updates: `cd client && npm run typecheck`, + `cd client && npm run build`, plus focused Playwright or screenshot coverage + for changed A-class, detail, sidebar, action-bar or mobile surfaces. + ## Frozen / Boundary Items Frozen modules and Enterprise WeChat-owned HR/attendance entries must be labeled diff --git a/.trellis/tasks/05-30-unified-page-design-review/check.jsonl b/.trellis/tasks/05-30-unified-page-design-review/check.jsonl new file mode 100644 index 00000000..040727f8 --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/check.jsonl @@ -0,0 +1,3 @@ +{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Trellis task 合同和提交治理要求"} +{"file": ".trellis/spec/hyb-oa/docs-and-evidence.md", "reason": "文档更新和证据记录规则"} +{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "设计规范一致性检查"} diff --git a/.trellis/tasks/05-30-unified-page-design-review/design.md b/.trellis/tasks/05-30-unified-page-design-review/design.md new file mode 100644 index 00000000..ad922dee --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/design.md @@ -0,0 +1,48 @@ +# 统一页面设计规范确认稿 + +## 参照系 + +- 产品心智:飞书审批 / 飞书工作台。 +- 页面与组件模式:Ant Design / Ant Design Pro。 +- 使用方式:借鉴成熟中文企业系统的信息架构、按钮命名、动作位置、列表和详情模式;不复制品牌、Logo、配色或视觉资产。 + +## 全局规则 + +0. 操作型页面默认不做交互创新。页面、按钮、筛选、列表、详情、确认弹窗、更多菜单和移动端动作区优先参考飞书/Ant Design 等成熟系统模式;hyb-oa 的差异只体现在小团队裁剪、权限收敛和业务边界,不自创陌生操作。 +1. 页面标题只写页面名。副标题默认取消,只在异常、空状态、权限不足、企微/OA 边界、外部系统边界或不可逆动作说明时出现。 +2. 正常流程不解释。禁止用副标题、卡片描述、提示条解释用户已经能从标题和按钮理解的动作。 +3. 页头主按钮只用于创建类或真实页面级主动作,例如 `新建报销`、`新建采购`、`新增合同`、`新增资产`。 +4. 按钮使用成熟系统常规文案:`处理`、`去处理`、`查看详情`、`查看全部`、`查看进度`、`继续编辑`、`新建`、`新增`、`提交`、`保存`、`更多`。禁止 `处理最急的一件` 这类口号型按钮。 +5. 列表页右侧固定操作列;低频或高风险动作进入 `更多`、`台账工具` 或详情页。 +6. PC 详情页采用顶部摘要、中部事实/明细/证据、右侧状态与动作栏、底部历史;移动端采用单列分区和底部安全区主动作。 +7. 审批详情不使用竖向动作卡片。PC 使用一个动作条:`通过` 主按钮,`退回`、`驳回` 次按钮,`转审` 默认进 `更多`;需要理由的动作点击后再展开输入和确认。 +8. 移动端底部只保留一个主动作,次动作进入 `更多` 或确认面板。 +9. 通知中心只做事件收件箱,不复制待办,不做快速上手或流程解释。 +10. 请假、补卡、外出、加班和打卡由企业微信主办;OA 只做记录、镜像、异常、审计和应急入口。 + +## 页面归类 + +| 页面 | 模板 | 规则 | +| --- | --- | --- | +| 工作台 | 工作台总览 | 待办摘要、常用业务入口、必要提醒;不强行放页头主按钮。 | +| 待我处理 | 任务处理列表 | `待处理` / `已处理` 两个 Tab;行操作为 `处理`。 | +| 审批详情 | 详情工作区 | 摘要、证据、右侧动作栏、历史;禁止竖向动作卡片。 | +| 报销、采购、合同、项目、资产、付款、应付账款、票据 | 业务台账列表 | 标题、创建按钮、常用筛选、表格/卡片列表、右侧操作列;低频工具进 `台账工具`。 | +| 业务详情 | 详情工作区 | 摘要、事实、证据、关联、右侧状态/动作、底部历史。 | +| 管理 | 管理配置页 | 管理首页分 `人员组织`、`审批流程`、`基础资料`、`系统设置`、`审计排障`;子页表格配置。 | +| 个人设置 | 账号设置页 | `个人资料`、`账号安全`、`通知偏好`、`企业微信绑定`;组织角色只读折叠,维护入口进管理。 | +| 通知中心 | 事件列表 | 状态变化、提醒、失败、同步结果;点击直达业务详情、审批任务或失败说明。 | +| 请假记录、考勤 | 记录/镜像页 | 企业微信主办,OA 记录和异常;普通用户不显示 OA 日常新建请假或审批动作。 | +| 移动页面 | 同模板移动表达 | 顶部状态、卡片/单列详情、底部一个主动作。 | + +## 实施批次 + +1. 第一批:工作台、待我处理、审批详情、个人设置、通知中心。 +2. 第二批:报销、采购、合同、项目、资产、付款、应付账款、票据的列表和详情。 +3. 第三批:管理页、请假记录、考勤、企微归档页和移动端对应页面。 + +## 验收 + +- 规范确认阶段:`git diff --check`、Trellis task validate、governance check。 +- 页面实现阶段:`cd client && npm run typecheck`、`cd client && npm run build`、重点页面 Playwright/截图复核。 +- 面向用户可测前:必须部署并完成公网检查。 diff --git a/.trellis/tasks/05-30-unified-page-design-review/implement.jsonl b/.trellis/tasks/05-30-unified-page-design-review/implement.jsonl new file mode 100644 index 00000000..c4e98452 --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/implement.jsonl @@ -0,0 +1,2 @@ +{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "前端设计规范更新目标文件和页面基线来源"} +{"file": ".trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md", "reason": "成熟企业页面参照系调研"} diff --git a/.trellis/tasks/05-30-unified-page-design-review/prd.md b/.trellis/tasks/05-30-unified-page-design-review/prd.md new file mode 100644 index 00000000..1fdf62d4 --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/prd.md @@ -0,0 +1,124 @@ +# 统一页面设计规范重审 + +## Goal + +重新统一 hyb-oa 全部 PC/移动页面的设计规则,先解决当前已暴露的“文案解释过多、按钮命名不符合常见系统、动作区位置混乱、审批详情动作竖向铺开、页面模板执行不一致”等问题。规范确认前不进入具体页面实现。 + +## What I already know + +- 目标用户是国内、小于 10 人的科技初创公司,角色重叠,默认不是专职 OA 操作员。 +- 用户明确反馈: + - 工作台右上角 `处理最急的一件` 不像常规系统按钮。 + - 工作台、待我处理、审批详情等页面解释性文案过多。 + - `待我处理` 页面不应再用大量解释说明普通工作流。 + - 审批详情页把 `通过`、`驳回`、`退回`、`转审` 等处理动作竖向铺成多个卡片,体验不符合成熟系统。 +- 现有事实源已规定: + - 前端视觉与交互裁决优先使用 `frontend-design` skill。 + - 页面模板有六类:工作台总览、任务处理列表、业务台账列表、主从工作台、详情工作区、管理配置页。 + - 审批动作应集中在待我处理/审批详情执行。 + - HR/考勤日常流程由企业微信主办,OA 做镜像、审计、异常、应急。 +- 当前规范存在执行层缺口:有原则,但缺少足够细的“页面级验收模板”和“动作区具体坐标”,导致实现时继续产生自创文案和自创布局。 +- 当前工作区已有与本任务无关的未提交部署脚本变更:`deploy/trialrun/deploy.sh`、`deploy/trialrun/runbook.md`。本任务不得误纳入后续设计提交。 + +## Research Notes + +- 初步外部参照见 `research/mature-enterprise-ui-reference.md`。 +- 设计方向倾向采用成熟中文企业协同/审批系统的保守模式:常规命名、低解释密度、表格/列表动作列、详情页底部或右侧统一动作区、更多操作收纳。 + +## Assumptions + +- 规范已由用户确认,本任务继续承接第一批 A 类高频页面实现。 +- 后续 B/C 类页面仍按小批量拆分推进,避免一次性重写全系统页面。 +- “全面采用成熟设计”不等于复制某个产品的品牌视觉,而是采用其信息架构、交互位置、按钮语义和页面模板。 + +## Scope + +- 更新当前 Trellis task 的 PRD、设计确认稿和调研记录。 +- 更新 `.trellis/spec/hyb-oa/frontend-react-vite-design.md`,把成熟企业页面基线、动作坐标、文案边界、页面归类和实施批次写成后续页面实现的统一规范。 +- 实施第一批 A 类高频页面:工作台、待我处理、审批详情、个人设置、通知中心。 +- 同步受影响的移动个人设置、报销待办入口文案、顶部壳层通知标题和聚焦 E2E/视觉断言。 +- 本轮不部署、不做公网复检。 + +## Decisions + +- 主参照系已确认:产品心智参考飞书审批/飞书工作台,页面和组件规则参考 Ant Design / Ant Design Pro。后续规范采用成熟中文企业协同/OA 系统的常规命名、低解释密度、列表操作列、详情统一动作区和更多操作收纳,不复制竞品品牌视觉。 +- 交互创新边界已确认:OA、审批、财务、合同、资产、管理等操作型页面默认不做交互创新。页面布局、按钮命名、动作位置、Tab、筛选、详情栏、确认弹窗和更多菜单优先套用飞书/Ant Design 等成熟系统模式;项目特有处理只允许做小团队裁剪和降噪,不自创控件或陌生流程。 +- 说明文字密度已确认:默认不解释正常流程,只解释异常、风险、空状态、权限不足、外部系统边界和不可逆动作。禁止用页面副标题、卡片描述或提示条解释用户已经能从标题/按钮理解的普通动作。 +- 工作台首屏已确认:采用飞书式极简工作台,只保留待办摘要、常用业务入口和必要提醒。按钮使用 `去处理`、`新建报销`、`查看全部` 等常规文案,禁止 `处理最急的一件` 这类口号型、自创型按钮。 +- 审批详情动作区已确认:PC 使用右侧或内容底部统一动作条,结构为一个主按钮、少量次按钮和 `更多`;`通过` 为主按钮,`退回`、`驳回` 为次按钮,`转审` 默认进入 `更多`。点击需填写理由的动作后再展开理由输入和确认弹窗,禁止把多个处理动作竖向铺成大卡片。 +- 列表页行操作已确认:右侧固定操作列,主要动作使用 `查看详情`、`处理`、`继续编辑`、`查看进度` 等成熟文案;导出、批量、作废、下载、付款等低频或高风险动作进入 `更多`、`台账工具` 或详情页,不在行内铺多个按钮。 +- 详情页布局已确认:采用 Ant Design Pro 式详情工作区。PC 结构为顶部摘要、中部事实/明细/证据、右侧状态与动作栏、底部历史;移动端转为单列分区和底部动作区。禁止 PC 详情页自由堆叠多个同权重大卡片。 +- 移动端动作区已确认:底部安全区固定一个主动作,次动作进入 `更多` 或二次确认面板;不把多个审批、付款、删除、转审等动作横向挤在底部,也不把最终动作分散到页面中间区块。 +- 页面标题已确认:标题默认只写页面名,例如 `工作台`、`待我处理`、`报销`、`合同台账`。副标题默认取消,只在异常、空状态、权限不足、企业微信/OA 边界、外部系统边界或不可逆动作说明时出现。 +- 页头主按钮已确认:只放创建类或页面级真实主动作,例如 `新建报销`、`新建采购`、`新增合同`、`新增资产`。工作台、待处理、通知等总览/列表页不为了形式强行放主按钮;待办区域内使用 `去处理`、`查看全部` 等常规入口。 +- 侧边栏入口已确认:常用业务直接展示,管理/低频/冻结/阶段性页面进入 `更多`。默认直接入口包括 `工作台`、`待我处理`、`报销`、`采购`、`合同`、`项目`、`资产`、`付款`、`应付账款`、`票据`、`团队`、`请假记录`、`管理`,但仍需按角色和权限收敛,不能按权限把所有可见模块全铺出来。 +- `待我处理` 页面已确认:采用飞书审批式任务列表,主 Tab 为 `待处理` / `已处理`。顶部只显示数量和必要筛选;列表行展示事项、申请人/发起人、等待时间、状态、业务编号和右侧 `处理` 操作。`已处理记录` 不作为孤立右上角按钮,页面不显示解释性副标题或大段说明。 +- 报销、采购、合同、项目、资产、付款、应付账款、票据等业务页已确认统一采用 `业务台账列表`:页头标题与创建按钮、常用筛选区、表格/卡片列表、右侧操作列。低频或高风险工具统一进入 `台账工具`、`更多` 或详情页,不在列表首屏铺开。 +- 管理配置页已确认:侧边栏只保留 `管理`,管理首页按 `人员组织`、`审批流程`、`基础资料`、`系统设置`、`审计排障` 分组进入;子页采用搜索/筛选、表格和右侧操作列。普通业务页面、工作台和个人设置不得混入管理配置矩阵。 +- 个人设置页已确认:采用常见网站账号设置结构,只包含 `个人资料`、`账号安全`、`通知偏好`、`企业微信绑定`。组织、角色、直属汇报只做折叠只读摘要;人员档案、权限、组织维护和角色管理全部进入 `管理`。 +- 通知中心已确认:只做事件收件箱,显示状态变化、提醒、失败、同步结果和流转消息;点击通知必须跳到业务详情、审批任务或失败说明页。通知中心不复制 `待我处理` 列表,不承担快速上手或流程解释职责。 +- 请假/考勤页已确认:企业微信主办请假、补卡、外出、加班和打卡;OA 页面只做记录、镜像、异常、审计和应急入口。普通用户路径不显示 OA 新建请假或日常审批动作;页面标题使用 `请假记录`、`考勤`,只在边界或异常处说明企业微信/OA 分工。 +- 落地范围已确认:先一次性写全系统统一设计规范,再分批实现。首批实现优先级为 A 类高频页面:工作台、待我处理、审批详情、个人设置、通知中心;随后扩展到报销、采购、合同、项目、资产、付款、应付账款、票据等业务台账和详情页。 + +## Open Questions + +- 当前无阻塞问题。第二批业务台账和详情页另按后续任务推进。 + +## Requirements + +- 设计规范必须先明确唯一主参照和辅助组件规范。 +- 规范必须细化到以下级别: + - 页面标题、面包屑、页头按钮、说明文字允许出现的条件。 + - 工作台、待我处理、审批详情、报销列表、报销详情、采购、合同、项目、资产、付款、应付账款、票据、团队、请假记录、考勤、管理配置、个人设置、通知中心、移动端页面的模板和动作区位置。 + - 列表页操作列、详情页动作区、表单页底部动作、移动端底部动作的统一规则。 + - 按钮命名:使用常见动词,如 `处理`、`查看详情`、`新建`、`提交`、`保存`、`更多`;禁止类似 `处理最急的一件` 的自创口号型按钮。 + - 解释性文案规则:正常流程不解释,只有风险、异常、空状态、权限不足、外部系统边界和不可逆动作才解释。 + - 审批详情动作规则:默认横向主按钮 + 次按钮 + 更多菜单或底部/右侧固定动作区,不把多个动作纵向铺成多个大卡片。 +- 规范必须把页面改造拆成可执行批次,并列明验收标准。 +- 规范确认后,第一批页面实现必须遵守成熟系统基线,不引入自创按钮、解释型副标题或竖向审批动作卡片。 + +## Acceptance Criteria + +- [x] 已与用户确认主要产品参照系。 +- [x] 已更新现有设计规范,不新建分散文档。 +- [x] 规范覆盖全页面类型和关键业务页面。 +- [x] 规范明确常规按钮命名、操作区域坐标、说明文字边界和审批详情动作结构。 +- [x] 规范包含首批实现优先级和验收方式。 +- [x] 已完成第一批页面实现:工作台、待我处理、审批详情、个人设置、通知中心。 +- [x] 已同步受影响 E2E 和视觉截图断言。 + +## Test Plan + +- `git diff --check` +- `python3 ./.trellis/scripts/task.py validate 05-30-unified-page-design-review` +- `node scripts/qa/check-trellis-governance.mjs` +- `cd client && npm run build` +- `cd client && npx playwright test tests/e2e/login-portal-ux.spec.ts tests/e2e/pc-core-workflow-visual-wave2.spec.ts tests/e2e/workflow-action-confirm-ui.spec.ts tests/e2e/visual-shell.spec.ts tests/e2e/pc-detail-mobile-visual-wave3.spec.ts tests/e2e/r124-mobile-entry-matrix.spec.ts --workers=1 --reporter=list` +- 必要时复跑失败用例对应 spec,并检查关键截图。 + +## Out of Scope + +- 不复制竞品品牌、Logo、配色或受保护视觉资产。 +- 不改变已确认的业务边界:请假/考勤日常动作继续优先由企业微信主办;OA 不重复处理。 +- 不把当前无关部署脚本变更混入本任务提交。 +- 不在本轮全面改造采购、合同、项目、资产、付款、应付账款、票据和管理配置等第二/第三批页面。 +- 不做公网部署或公网可测声明。 + +## Technical Notes + +- 主要规范文件候选: + - `.trellis/spec/hyb-oa/frontend-react-vite-design.md` + - `docs/产品设计规则.md` +- 已定位当前明显问题代码: + - `client/src/pages/PortalHomePage.tsx` 已移除 `处理最急的一件`,并补常用入口。 + - `client/src/pages/WorkflowTasksPage.tsx` 已改为 `待处理` / `已处理` Tab 和行内 `处理`。 + - `client/src/pages/WorkflowTaskDetailPage.tsx` 已把审批动作收敛到右侧单一动作栏。 + - `client/src/pages/ProfilePage.tsx`、`MobileProfilePage.tsx` 已统一为 `个人资料`、`账号安全`、`通知偏好`、`企业微信绑定`。 + - `client/src/pages/NotificationsPage.tsx` 已去掉解释型页头和返回工作台按钮,通知操作改为 `查看详情`。 + +## Definition of Done + +- 规范草案完成并经用户确认。 +- 第一批页面实现完成,且不再出现本轮明确禁止的口号型按钮、旧高级面板和竖向审批动作卡片。 +- 文档、前端构建、聚焦 Playwright、截图复核和 Trellis governance 全部通过。 +- 未部署时不得告知用户可以公网测试。 diff --git a/.trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md b/.trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md new file mode 100644 index 00000000..cdaf0ad1 --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md @@ -0,0 +1,67 @@ +# 成熟企业页面参照调研 + +## 目的 + +为 hyb-oa 重新统一页面设计规则选择稳定参照。重点不是复制视觉品牌,而是借鉴成熟中文企业协作/OA 系统在信息架构、按钮命名、动作区位置、列表和详情页处理方式上的共识。 + +## 参照候选 + +### 1. 飞书审批/飞书工作台 + Ant Design Pro/Ant Design 组件规范(推荐) + +适配原因: + +- 飞书审批小组件公开说明中使用 `待办`、`抄送我`、`已发起`、`发起申请` 四类常见入口,且强调从工作台快速查看审批信息并进入处理页面,适合 hyb-oa 工作台和待处理入口收敛。 +- 飞书开放平台审批页协议中也按 `待审批`、`已审批` 等常见分类表达,符合中文用户心智。 +- Ant Design/Ant Design Pro 是中文企业后台常用设计系统,官方文档有列表页、详情页、按钮区、文案、数据展示等成熟规则,可作为页面结构和组件行为的执行基线。 +- Ant Design 按钮规则明确“一个操作区域最多一个主按钮”、行内操作适合文字按钮/链接按钮、危险操作需要二次确认,这能直接纠正当前审批动作区和工作台口号型按钮问题。 + +需要注意: + +- 飞书本身偏协同工具,hyb-oa 是轻 OA/财务/资产系统,不能照搬飞书的信息流和营销化协作入口。 +- Ant Design 是组件/模式系统,不是业务系统;产品入口和业务边界仍以 hyb-oa 现有事实源为准。 + +参考链接: + +- 飞书审批小组件使用手册:https://www.feishu.cn/hc/zh-CN/articles/633391673719-%E9%A3%9E%E4%B9%A6%E5%AE%A1%E6%89%B9-%E5%B0%8F%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C +- 飞书打开审批页协议:https://open.feishu.cn/document/applink-protocol/supported-protocol/open-an-approval-page?lang=zh-CN +- Ant Design 设计模式概览:https://ant.design/docs/spec/overview-cn +- Ant Design 按钮规范:https://ant.design/docs/spec/buttons-cn +- Ant Design 数据列表规范:https://ant.design/docs/spec/data-list-cn +- Ant Design 文案规范:https://ant.design/docs/spec/copywriting-cn + +### 2. 企业微信审批/工作台 + +适配原因: + +- hyb-oa 当前已集成企业微信,HR/考勤边界由企业微信主办,用户可能熟悉企业微信入口。 + +不推荐作为唯一参照: + +- 企业微信更偏移动端和消息入口,PC 业务台账、财务/合同/资产详情页模式不足。 +- 业务上已明确企业微信主办 HR/考勤,OA 主办报销、采购、合同、资产、付款等;如果完全仿企业微信,容易继续混淆 OA 和企业微信边界。 + +### 3. 钉钉 OA/审批 + +适配原因: + +- 国内企业对 `待办`、`已处理`、`发起申请`、`审批详情` 等命名熟悉。 + +不推荐作为唯一参照: + +- 钉钉偏大型组织和平台入口,容易把 hyb-oa 带回模块多、入口多、说明多的方向。 +- hyb-oa 面向小于 10 人的小团队,不需要钉钉式全平台工作台。 + +## 初步结论 + +推荐锁定: + +- 产品心智参照:飞书审批/飞书工作台。 +- 组件和页面模式参照:Ant Design Pro/Ant Design。 + +落地方式: + +- 入口命名采用成熟中文系统常规词,不再用口号式按钮。 +- 工作台只展示摘要和真实行动,不再解释普通入口。 +- 列表页采用标题 + 常用筛选 + 表格/列表 + 操作列。 +- 详情页采用摘要/证据/历史 + 右侧或底部动作区。 +- 审批动作采用一个主按钮、少量次按钮和更多菜单,禁止多个动作纵向铺成大卡片。 diff --git a/.trellis/tasks/05-30-unified-page-design-review/task.json b/.trellis/tasks/05-30-unified-page-design-review/task.json new file mode 100644 index 00000000..b9af512a --- /dev/null +++ b/.trellis/tasks/05-30-unified-page-design-review/task.json @@ -0,0 +1,36 @@ +{ + "id": "unified-page-design-review", + "name": "unified-page-design-review", + "title": "统一页面设计规范重审", + "description": "统一 PC/移动页面设计规范,锁定成熟企业页面基线,先确认规范再实施页面改造。", + "status": "in_progress", + "dev_type": null, + "scope": "frontend,docs", + "package": null, + "priority": "P2", + "creator": "shunli", + "assignee": "shunli", + "createdAt": "2026-05-30", + "completedAt": null, + "branch": null, + "base_branch": "main", + "worktree_path": null, + "commit": null, + "pr_url": null, + "subtasks": [], + "children": [], + "parent": null, + "relatedFiles": [ + ".trellis/spec/hyb-oa/frontend-react-vite-design.md", + ".trellis/tasks/05-30-unified-page-design-review/prd.md", + ".trellis/tasks/05-30-unified-page-design-review/design.md", + ".trellis/tasks/05-30-unified-page-design-review/research/mature-enterprise-ui-reference.md", + "client/src/pages/PortalHomePage.tsx", + "client/src/pages/WorkflowTasksPage.tsx", + "client/src/pages/WorkflowTaskDetailPage.tsx", + "client/src/pages/ProfilePage.tsx", + "client/src/pages/NotificationsPage.tsx" + ], + "notes": "", + "meta": {} +} diff --git a/client/src/components/onboarding/WelcomeDialog.tsx b/client/src/components/onboarding/WelcomeDialog.tsx index 385d2fb6..0f635481 100644 --- a/client/src/components/onboarding/WelcomeDialog.tsx +++ b/client/src/components/onboarding/WelcomeDialog.tsx @@ -26,7 +26,7 @@ const WELCOME_LINKS: WelcomeLinkItem[] = [ { icon: "request_quote", label: "提交报销", - description: "录入票据和报销说明,查看处理进度", + description: "录入票据和报销说明,查看进度", to: "/reimbursements", }, { diff --git a/client/src/features/navigation/schema.ts b/client/src/features/navigation/schema.ts index 5da25f96..dabe6482 100644 --- a/client/src/features/navigation/schema.ts +++ b/client/src/features/navigation/schema.ts @@ -25,8 +25,10 @@ const PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [ { path: "/assets", title: "资产", group: "业务" }, { path: "/workflow/tasks/", title: "审批详情", group: "工作" }, { path: "/workflow/tasks", title: "待我处理", group: "工作" }, + { path: "/notifications", title: "通知", group: "工作" }, { path: "/mobile/assets/scan", title: "移动资产扫描", group: "移动工作台" }, { path: "/mobile/approvals", title: "移动审批", group: "移动工作台" }, + { path: "/mobile/notifications", title: "移动通知", group: "移动工作台" }, { path: "/mobile/wecom-approval-archive", title: "移动企微审批历史", group: "移动工作台" }, { path: "/mobile/capture", title: "移动 PDF 发票上传", group: "移动工作台" }, { path: "/mobile/leave", title: "移动请假", group: "移动工作台" }, diff --git a/client/src/index.css b/client/src/index.css index d08beff1..4b44c9c1 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -660,6 +660,43 @@ @apply border p-3.5; } + .workflow-action-panel { + @apply xl:sticky xl:top-20; + } + + .workflow-action-bar { + @apply flex flex-wrap items-center gap-2; + } + + .workflow-action-more { + @apply relative; + } + + .workflow-action-more > summary { + border: 1px solid rgba(203, 213, 225, 0.92); + background: rgba(255, 255, 255, 0.96); + color: var(--color-text-primary); + border-radius: var(--radius-sm); + @apply flex h-9 cursor-pointer list-none items-center px-3 text-sm font-medium transition-colors hover:bg-slate-50; + } + + .workflow-action-more > summary::-webkit-details-marker { + display: none; + } + + .workflow-action-more[open] > summary { + @apply bg-slate-50; + } + + .workflow-action-more > div, + .workflow-action-more > button { + border: 1px solid rgba(226, 232, 240, 0.94); + background: #fff; + border-radius: var(--radius-sm); + box-shadow: var(--shadow-md); + @apply absolute right-0 top-10 z-20 min-w-28 px-3 py-2 text-left text-sm font-medium text-zinc-800 hover:bg-slate-50; + } + .notification-inbox { @apply space-y-3; } @@ -822,6 +859,33 @@ @apply overflow-hidden rounded-lg divide-y divide-slate-200/80; } + .portal-quick-entry-grid { + @apply grid gap-2 sm:grid-cols-2 xl:grid-cols-3; + } + + .portal-quick-entry { + border: 1px solid rgba(226, 232, 240, 0.94); + background: rgba(255, 255, 255, 0.92); + border-radius: var(--radius-sm); + color: var(--color-text-primary); + @apply flex min-h-[64px] items-center gap-3 px-3.5 py-3 transition-colors hover:border-slate-300 hover:bg-white; + } + + .portal-quick-entry__icon { + background: rgba(0, 57, 138, 0.08); + color: var(--color-accent-primary); + @apply flex size-9 shrink-0 items-center justify-center rounded-lg; + } + + .portal-quick-entry__title { + @apply block truncate text-sm font-semibold; + } + + .portal-quick-entry__action { + color: var(--color-text-tertiary); + @apply mt-0.5 block text-xs font-medium; + } + .portal-task-row { background: rgba(255, 255, 255, 0.88); color: var(--color-text-primary); diff --git a/client/src/pages/MobileProfilePage.tsx b/client/src/pages/MobileProfilePage.tsx index 56a80ba0..c620fe52 100644 --- a/client/src/pages/MobileProfilePage.tsx +++ b/client/src/pages/MobileProfilePage.tsx @@ -164,7 +164,7 @@ export function MobileProfilePage() { - +
账号密码
@@ -176,7 +176,7 @@ export function MobileProfilePage() {
- +