diff --git a/apps/web/src/components/approval/approval-card.tsx b/apps/web/src/components/approval/approval-card.tsx index f3302966f..946ded02d 100644 --- a/apps/web/src/components/approval/approval-card.tsx +++ b/apps/web/src/components/approval/approval-card.tsx @@ -162,21 +162,23 @@ function LongPressButton({ } }, []) - // Lab-White 虛線邊框按鈕風格 (Dashed Border Style) + // UX 優化: 實心邊框 + 填充色 (更明確的可點擊狀態) const baseStyles = variant === 'danger' ? [ - 'bg-white', - 'border-2 border-dashed border-status-critical', + 'bg-status-critical/10', + 'border-2 border-status-critical/50', 'text-status-critical', - 'hover:bg-status-critical/5', - 'hover:border-solid', + 'hover:bg-status-critical/20', + 'hover:border-status-critical', + 'shadow-sm', ] : [ - 'bg-white', - 'border-2 border-dashed border-claw-blue', + 'bg-claw-blue/10', + 'border-2 border-claw-blue/50', 'text-claw-blue', - 'hover:bg-claw-blue/5', - 'hover:border-solid', + 'hover:bg-claw-blue/20', + 'hover:border-claw-blue', + 'shadow-sm', ] const progressBgColor = variant === 'danger' ? 'bg-status-critical' : 'bg-claw-blue' @@ -423,7 +425,7 @@ export function ApprovalCard({ )} - {/* Multi-Sig Counter - Enhanced */} + {/* Multi-Sig Counter + Progress - Enhanced */}
{t('signatures')} @@ -439,9 +441,37 @@ export function ApprovalCard({ / {request.requiredSignatures}
+ {/* 簽核進度條 */} +
+
+
+ {/* 已簽核人員列表 (有簽名時顯示) */} + {signatures && signatures.length > 0 && ( +
+
+ + 已簽核: + {signatures.map((sig, idx) => ( + + + {sig.signerName} + + {idx < signatures.length - 1 && ·} + + ))} +
+
+ )} + {/* Title & Description - UX 優化: 分離標題與命令 */}
{/* 主標題: 只顯示 | 前的動作描述 */} @@ -468,14 +498,21 @@ export function ApprovalCard({
- {/* Blast Radius Grid - Enhanced */} -
-

- - {tBlast('title')} -

+ {/* Blast Radius - 可折疊面板 */} +
+ +

+ + {tBlast('title')} + {/* 摘要預覽 */} + + ({request.blastRadius?.affectedPods ?? 0} pods) + +

+ +
{request.blastRadius && ( -
+
)} -
+
{/* Data Impact */} {isDestructive && ( @@ -519,13 +556,25 @@ export function ApprovalCard({
)} - {/* Dry-Run Checks - Enhanced */} -
-

- - {tDryRun('validation')} -

-
+ {/* Dry-Run Checks - 可折疊面板 (預設收合) */} +
+ +

+ + {tDryRun('validation')} + {/* 通過/失敗摘要 */} + + {(request.dryRunChecks ?? []).filter(c => c.passed).length}/{(request.dryRunChecks ?? []).length} + +

+ +
+
{(request.dryRunChecks ?? []).map((check) => (
))}
-
+
{/* 結束可滾動區域 */}