1.5 KiB
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.tsxandProjectDetailPage.tsxare good references for a two-column detail workspace.WorkflowTaskDetailPage.tsxalready has a horizontal approval action bar and should be protected from regressing into vertical action cards.AssetRegistryPage.tsxis the clearest first implementation target because the right-side operation and summary area is page-local and dense.
Recommended Task Slice
Implement a thin BusinessDetailTemplate component family first, then apply it to:
- Asset detail right-side action/summary area.
- 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.