From 540602fd63df45d149998f6048d009eabd169a57 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 26 Mar 2026 13:26:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20Phase=2017=20=E5=AF=A9=E6=A0=B8?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=20UI/UX=20=E4=BF=AE=E5=BE=A9=20-=20SlidePane?=
 =?UTF-8?q?l=20=E2=86=92=20ApprovalModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

問題:
- SlidePanel 側邊滑入與右側 OpenClaw 固定面板衝突
- 480px 寬度不足，內容被擠壓截斷
- 標題「審核詳情」只顯示「情」

解決方案:
- 新建 ApprovalModal 全屏 Modal 組件
- 居中對話框 (max-width: 672px)
- 深色遮罩 (60%) 強制用戶聚焦
- 符合 Nothing.tech「一次專注一件事」設計哲學

設計參考: GitHub PR Review, AWS IAM Console

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/ai/openclaw-state-machine.tsx  |  11 +-
 apps/web/src/components/ui/approval-modal.tsx | 153 ++++++++++++++++++
 apps/web/src/components/ui/index.ts           |   3 +
 3 files changed, 161 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/ui/approval-modal.tsx

diff --git a/apps/web/src/components/ai/openclaw-state-machine.tsx b/apps/web/src/components/ai/openclaw-state-machine.tsx
index 1630eb272..3e2bec026 100644
--- a/apps/web/src/components/ai/openclaw-state-machine.tsx
+++ b/apps/web/src/components/ai/openclaw-state-machine.tsx
@@ -22,7 +22,7 @@ import { cn } from '@/lib/utils'
 import { OpenClawPanel, type OpenClawStatus } from './openclaw-panel'
 import { ThinkingStream, DEFAULT_THINKING_MESSAGES } from './thinking-stream'
 import { ApprovalCard, type ApprovalRequest } from '@/components/approval/approval-card'
-import { SlidePanel } from '@/components/ui/slide-panel'
+import { ApprovalModal } from '@/components/ui/approval-modal'
 import { RefreshCw, AlertCircle, CheckCircle2, AlertTriangle, Shield, XCircle, ChevronRight } from 'lucide-react'
 
 // =============================================================================
@@ -410,8 +410,8 @@ export function OpenClawStateMachine({
         </div>
       )}
 
-      {/* Slide Panel - 詳情面板 */}
-      <SlidePanel
+      {/* Approval Modal - 全屏審核對話框 (Phase 17 UI/UX 修復) */}
+      <ApprovalModal
         open={selectedIndex !== null}
         onClose={() => setSelectedIndex(null)}
         title="審核詳情"
@@ -419,10 +419,9 @@ export function OpenClawStateMachine({
         onNext={handleNextApproval}
         current={selectedIndex !== null ? selectedIndex + 1 : undefined}
         total={pendingApprovals.length}
-        width="lg"
       >
         {selectedApproval && (
-          <div className="p-4">
+          <div className="p-6">
             <ApprovalCard
               request={selectedApproval}
               onApprove={() => {
@@ -442,7 +441,7 @@ export function OpenClawStateMachine({
             />
           </div>
         )}
-      </SlidePanel>
+      </ApprovalModal>
 
       {/* Idle state - no pending approvals */}
       {machineState === 'idle' && pendingApprovals.length === 0 && !isLoading && (
diff --git a/apps/web/src/components/ui/approval-modal.tsx b/apps/web/src/components/ui/approval-modal.tsx
new file mode 100644
index 000000000..2987c3cfe
--- /dev/null
+++ b/apps/web/src/components/ui/approval-modal.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+/**
+ * ApprovalModal - 全屏審核 Modal
+ * ===============================
+ * Phase 17: UI/UX 修復 - 取代 SlidePanel
+ *
+ * 設計決策:
+ * - 審核是關鍵決策，需要用戶全神貫注
+ * - 全屏遮罩強制用戶注意，防止誤操作
+ * - 居中對話框提供足夠空間顯示所有資訊
+ * - 符合 Nothing.tech「一次專注一件事」設計哲學
+ *
+ * 參考: GitHub PR Review, AWS IAM Console
+ */
+
+import { useEffect, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+import { X, ChevronLeft, ChevronRight, Shield } from 'lucide-react'
+
+interface ApprovalModalProps {
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  title?: string
+  /** 上一個/下一個導航 */
+  onPrev?: () => void
+  onNext?: () => void
+  /** 當前位置 (1-based) */
+  current?: number
+  total?: number
+}
+
+export function ApprovalModal({
+  open,
+  onClose,
+  children,
+  title = '審核詳情',
+  onPrev,
+  onNext,
+  current,
+  total,
+}: ApprovalModalProps) {
+  // ESC 關閉 + 方向鍵導航
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+    if (e.key === 'ArrowLeft' && onPrev) onPrev()
+    if (e.key === 'ArrowRight' && onNext) onNext()
+  }, [onClose, onPrev, onNext])
+
+  // 鎖定背景滾動
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+      document.addEventListener('keydown', handleKeyDown)
+    }
+    return () => {
+      document.body.style.overflow = ''
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open, handleKeyDown])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop - 深色遮罩，強調聚焦 */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={onClose}
+      />
+
+      {/* Modal Container */}
+      <div
+        className={cn(
+          'relative z-10 w-full max-w-2xl max-h-[90vh]',
+          'bg-white rounded-2xl shadow-2xl',
+          'flex flex-col',
+          'animate-in zoom-in-95 fade-in duration-200',
+          'mx-4' // 手機邊距
+        )}
+      >
+        {/* Header */}
+        <div className="flex-shrink-0 flex items-center justify-between px-6 py-4 border-b border-nothing-gray-100">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-claw-blue/10 rounded-xl">
+              <Shield className="w-5 h-5 text-claw-blue" />
+            </div>
+            <div>
+              <h2 className="font-heading text-lg font-bold text-nothing-gray-900">
+                {title}
+              </h2>
+              <p className="text-xs text-nothing-gray-500 font-mono">
+                Multi-Sig Authorization Required
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {/* 導航控制 */}
+            {(onPrev || onNext) && current && total && total > 1 && (
+              <div className="flex items-center gap-2 px-3 py-1.5 bg-nothing-gray-50 rounded-lg">
+                <button
+                  onClick={onPrev}
+                  disabled={current <= 1}
+                  className={cn(
+                    'p-1 rounded transition-colors',
+                    current <= 1
+                      ? 'text-nothing-gray-300 cursor-not-allowed'
+                      : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
+                  )}
+                  title="上一個 (←)"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+                <span className="text-sm font-mono text-nothing-gray-600 tabular-nums min-w-[3rem] text-center">
+                  {current} / {total}
+                </span>
+                <button
+                  onClick={onNext}
+                  disabled={current >= total}
+                  className={cn(
+                    'p-1 rounded transition-colors',
+                    current >= total
+                      ? 'text-nothing-gray-300 cursor-not-allowed'
+                      : 'text-nothing-gray-600 hover:bg-nothing-gray-200'
+                  )}
+                  title="下一個 (→)"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            )}
+
+            {/* 關閉按鈕 */}
+            <button
+              onClick={onClose}
+              className="p-2 rounded-xl hover:bg-nothing-gray-100 transition-colors"
+              title="關閉 (ESC)"
+            >
+              <X className="w-5 h-5 text-nothing-gray-500" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content - 可滾動 */}
+        <div className="flex-1 overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/ui/index.ts b/apps/web/src/components/ui/index.ts
index 20219d211..cd6e24069 100644
--- a/apps/web/src/components/ui/index.ts
+++ b/apps/web/src/components/ui/index.ts
@@ -34,3 +34,6 @@ export {
   GridLinesBg,
   type DotMatrixBgProps,
 } from './dot-matrix-bg'
+
+// Approval Modal (Phase 17 UI/UX 修復)
+export { ApprovalModal } from './approval-modal'