统一首批页面成熟设计基线（05-30-unified-page-design-review）
这个提交包含在：
@@ -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
|
||||
<task>`, `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
|
||||
|
||||
在新工单中引用
屏蔽一个用户