文件
hyb-oa/.trellis/tasks/05-31-unify-business-detail-ant-design/research/detail-page-pattern.md
T

1.5 KiB

Detail Page Pattern Notes

Mature Enterprise Baseline

For hyb-oa, the practical baseline is Ant Design Pro style rather than a novel visual design:

  • Top summary identifies the object and status.
  • Main column contains facts, editable fields, evidence, relations and history.
  • Right column contains the current state, allowed actions and compact metadata.
  • Primary action appears once. Secondary actions stay nearby; risky or low-frequency actions move to 更多 or a grouped action section.
  • Explanatory copy is reserved for exceptions, irreversible actions, sensitive data or external-system boundaries.

Repo Findings

  • Existing CSS already supports the target: detail-workspace-grid, detail-command-panel, detail-fact-grid, detail-fact-card, detail-action-stack.
  • ReimbursementDetailPage.tsx and ProjectDetailPage.tsx are good references for a two-column detail workspace.
  • WorkflowTaskDetailPage.tsx already has a horizontal approval action bar and should be protected from regressing into vertical action cards.
  • AssetRegistryPage.tsx is the clearest first implementation target because the right-side operation and summary area is page-local and dense.

Implement a thin BusinessDetailTemplate component family first, then apply it to:

  1. Asset detail right-side action/summary area.
  2. Workflow task detail action panel.

Leave reimbursement, project, purchase and payment detail pages for later slices unless the shared template can be adopted without changing behavior.