diff --git a/.changeset/approval-center-density-amount.md b/.changeset/approval-center-density-amount.md new file mode 100644 index 0000000000..c3a9392a6b --- /dev/null +++ b/.changeset/approval-center-density-amount.md @@ -0,0 +1,20 @@ +--- +"@object-ui/console": patch +--- + +fix(approvals): Approval Center density + amount emphasis (#2762 P2) + +- **Column rebalance** — the inbox table gave five auto columns equal width, + leaving 审批事项 (Request) over-wide next to a cramped 状态 (Status). The + Record column (the primary content) now gets the widest share, Request a + moderate one, and Status/Submitted fixed widths so they never crowd. +- **Lead with the amount** — the drawer summary card now surfaces the + decision-critical amount as a filled figure at the top of the card instead + of burying it in the generic field grid (and drops it from that grid so it + shows once). + +Also verified two P2 items need no change: light mode already works — +`ConsoleShell` mounts `ThemeProvider defaultTheme="system"` (follows the OS +`prefers-color-scheme`) with a `ModeToggle`, and the page's own classes carry +full light/dark variants; and the queue already has a bulk approve/reject +toolbar for the select-all/per-row selection. diff --git a/apps/console/src/pages/system/ApprovalsInboxPage.tsx b/apps/console/src/pages/system/ApprovalsInboxPage.tsx index fa20451132..fb2cd57e22 100644 --- a/apps/console/src/pages/system/ApprovalsInboxPage.tsx +++ b/apps/console/src/pages/system/ApprovalsInboxPage.tsx @@ -268,11 +268,13 @@ function payloadSummary( payload: unknown, display?: Record, max = 6, + excludeKey?: string, ): Array<[string, string]> { if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return []; const out: Array<[string, string]> = []; for (const [k, v] of Object.entries(payload as Record)) { if (PAYLOAD_SYSTEM_KEYS.has(k)) continue; + if (excludeKey && k === excludeKey) continue; // shown as the lead amount if (v == null || typeof v === 'object') continue; if (String(v).trim() === '') continue; const resolved = display?.[k]; @@ -300,7 +302,7 @@ const AMOUNT_KEY_RE = /(amount|total|price|value|cost|sum|budget|salary|fee|reve */ function decisionAmountEntry( r: ApprovalRequestRow, -): { label: string; value: number; display: string } | null { +): { key: string; label: string; value: number; display: string } | null { const payload = r.payload; if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return null; for (const [k, v] of Object.entries(payload as Record)) { @@ -310,7 +312,7 @@ function decisionAmountEntry( ? v : (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v)) ? Number(v) : null); if (num == null || !Number.isFinite(num)) continue; - return { label: prettifyKey(k), value: num, display: r.payload_display?.[k] ?? num.toLocaleString() }; + return { key: k, label: prettifyKey(k), value: num, display: r.payload_display?.[k] ?? num.toLocaleString() }; } return null; } @@ -1294,12 +1296,17 @@ export function ApprovalsInboxPage() { /> )} - {tr('colRequest', 'Request')} - {tr('colRecord', 'Record')} - {tr('colRequester', 'Requester')} - {/* min-width keeps the status pill on one line (#2762 P0-1) */} - {tr('colStatus', 'Status')} - {tr('colWaiting', 'Submitted')} + {/* Column widths rebalanced (#2762 P2): the Record is the + primary content so it gets the widest share, the + Request a moderate one, and Status/Submitted fixed + widths so they never crowd — instead of the browser + spreading five auto columns evenly and leaving 审批事项 + over-wide next to a cramped 状态. */} + {tr('colRequest', 'Request')} + {tr('colRecord', 'Record')} + {tr('colRequester', 'Requester')} + {tr('colStatus', 'Status')} + {tr('colWaiting', 'Submitted')} @@ -1558,6 +1565,13 @@ export function ApprovalsInboxPage() { {/* Business summary card */} + {(() => { + // Decision-critical amount leads the card (#2762 P2) — a filled + // figure at the top instead of a value buried bottom-right in the + // generic field grid. Excluded from that grid below so it shows once. + const drawerAmount = decisionAmountEntry(selected); + const summary = payloadSummary(selected.payload, selected.payload_display, 6, drawerAmount?.key); + return (
@@ -1587,9 +1601,17 @@ export function ApprovalsInboxPage() {
- {payloadSummary(selected.payload, selected.payload_display).length > 0 && ( -
- {payloadSummary(selected.payload, selected.payload_display).map(([k, v]) => ( + {drawerAmount && ( +
+
{drawerAmount.label}
+
+ {drawerAmount.display} +
+
+ )} + {summary.length > 0 && ( +
+ {summary.map(([k, v]) => (
{k}
{v}
@@ -1695,6 +1717,8 @@ export function ApprovalsInboxPage() { )} + ); + })()} {(selected.flow_steps?.length ?? 0) > 1 && (