修復 too many connection 問題

app/admin/connection-monitor/page.tsx

@@ -0,0 +1,371 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Database, Trash2, Settings, Activity, Clock, Users } from 'lucide-react';
+
+interface ConnectionStats {
+  totalConnections: number;
+  idleConnections: number;
+  oldConnections: number;
+  maxIdleTime: number;
+  maxConnectionAge: number;
+  connections: Array<{
+    createdAt: string;
+    lastUsed: string;
+    idleTime: number;
+    age: number;
+    userId?: string;
+    sessionId?: string;
+  }>;
+}
+
+export default function ConnectionMonitorPage() {
+  const [stats, setStats] = useState<ConnectionStats | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [maxIdleTime, setMaxIdleTime] = useState<number>(300000); // 5分鐘
+  const [maxConnectionAge, setMaxConnectionAge] = useState<number>(1800000); // 30分鐘
+
+  // 獲取連線統計
+  const fetchStats = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/connection-monitor?action=stats');
+      const data = await response.json();
+      
+      if (data.success) {
+        setStats(data.data);
+        setMessage('統計更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取統計失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 強制清理連線
+  const forceCleanup = async () => {
+    if (!confirm('確定要強制清理所有連線嗎？這可能會影響正在進行的操作！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/connection-monitor?action=cleanup');
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('連線清理完成');
+        setError('');
+        await fetchStats(); // 重新獲取統計
+      } else {
+        setError(data.error || '清理失敗');
+      }
+    } catch (err) {
+      setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 測試智能連線
+  const testConnection = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/connection-monitor?action=test');
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('智能連線測試成功');
+        setError('');
+        await fetchStats(); // 重新獲取統計
+      } else {
+        setError(data.error || '測試失敗');
+      }
+    } catch (err) {
+      setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 更新清理配置
+  const updateConfig = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/connection-monitor', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          action: 'config',
+          maxIdleTime,
+          maxConnectionAge
+        }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('清理配置更新成功');
+        setError('');
+        await fetchStats(); // 重新獲取統計
+      } else {
+        setError(data.error || '配置更新失敗');
+      }
+    } catch (err) {
+      setError('配置更新錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 格式化時間
+  const formatTime = (ms: number) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    
+    if (hours > 0) return `${hours}h ${minutes % 60}m`;
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+    return `${seconds}s`;
+  };
+
+  // 組件載入時獲取統計
+  useEffect(() => {
+    fetchStats();
+    
+    // 每30秒自動更新統計
+    const interval = setInterval(fetchStats, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">連線監控管理</h1>
+          <p className="text-muted-foreground">
+            監控和管理資料庫連線的生命週期
+          </p>
+        </div>
+        <Button 
+          onClick={fetchStats} 
+          disabled={loading}
+          variant="outline"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Activity className="h-4 w-4" />}
+          重新整理
+        </Button>
+      </div>
+
+      {/* 統計概覽 */}
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Database className="h-5 w-5 text-blue-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">總連線數</p>
+                  <p className="text-2xl font-bold">{stats.totalConnections}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Clock className="h-5 w-5 text-yellow-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">空閒連線</p>
+                  <p className="text-2xl font-bold">{stats.idleConnections}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Users className="h-5 w-5 text-red-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">舊連線</p>
+                  <p className="text-2xl font-bold">{stats.oldConnections}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Activity className="h-5 w-5 text-green-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">健康狀態</p>
+                  <p className="text-2xl font-bold">
+                    {stats.idleConnections + stats.oldConnections === 0 ? '良好' : '需清理'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* 操作按鈕 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings className="h-5 w-5" />
+            連線管理
+          </CardTitle>
+          <CardDescription>
+            管理和清理資料庫連線
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Button 
+              onClick={testConnection} 
+              disabled={loading}
+              variant="outline"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
+              測試智能連線
+            </Button>
+            
+            <Button 
+              onClick={forceCleanup} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+              強制清理連線
+            </Button>
+            
+            <Button 
+              onClick={updateConfig} 
+              disabled={loading}
+              variant="secondary"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Settings className="h-4 w-4" />}
+              更新配置
+            </Button>
+          </div>
+
+          {/* 配置設定 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
+            <div className="space-y-2">
+              <Label htmlFor="maxIdleTime">最大空閒時間 (毫秒)</Label>
+              <Input
+                id="maxIdleTime"
+                type="number"
+                value={maxIdleTime}
+                onChange={(e) => setMaxIdleTime(Number(e.target.value))}
+                placeholder="300000 (5分鐘)"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="maxConnectionAge">最大連線年齡 (毫秒)</Label>
+              <Input
+                id="maxConnectionAge"
+                type="number"
+                value={maxConnectionAge}
+                onChange={(e) => setMaxConnectionAge(Number(e.target.value))}
+                placeholder="1800000 (30分鐘)"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 連線詳情 */}
+      {stats && stats.connections.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>連線詳情</CardTitle>
+            <CardDescription>
+              當前活躍的資料庫連線列表
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {stats.connections.map((conn, index) => (
+                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex items-center gap-4">
+                    <Badge variant="outline">#{index + 1}</Badge>
+                    <div>
+                      <p className="text-sm font-medium">
+                        創建時間: {new Date(conn.createdAt).toLocaleString()}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        最後使用: {new Date(conn.lastUsed).toLocaleString()}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant={conn.idleTime > stats.maxIdleTime ? "destructive" : "default"}>
+                      空閒: {formatTime(conn.idleTime)}
+                    </Badge>
+                    <Badge variant={conn.age > stats.maxConnectionAge ? "destructive" : "default"}>
+                      年齡: {formatTime(conn.age)}
+                    </Badge>
+                    {conn.userId && (
+                      <Badge variant="secondary">用戶: {conn.userId}</Badge>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <Activity className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <Database className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 說明資訊 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>智能連線管理說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>自動清理:</strong> 系統每30秒自動檢查並清理空閒或過期的連線</p>
+          <p>• <strong>智能追蹤:</strong> 追蹤每個連線的創建時間、最後使用時間和用戶信息</p>
+          <p>• <strong>即時監控:</strong> 實時顯示連線狀態，幫助識別連線洩漏問題</p>
+          <p>• <strong>自動釋放:</strong> 查詢完成後自動釋放連線，避免連線累積</p>
+          <p>• <strong>用戶關閉網頁:</strong> 空閒連線會在設定的時間後自動清理</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/admin/database-shutdown/page.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, Database, Power, AlertTriangle, CheckCircle } from 'lucide-react';
+
+interface ShutdownStatus {
+  isShuttingDown: boolean;
+  handlerCount: number;
+  registeredHandlers: string[];
+}
+
+export default function DatabaseShutdownPage() {
+  const [status, setStatus] = useState<ShutdownStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  // 獲取關閉狀態
+  const fetchStatus = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/test-shutdown?action=status');
+      const data = await response.json();
+      
+      if (data.success) {
+        setStatus(data.data);
+        setMessage('狀態更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取狀態失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 測試關閉機制
+  const testShutdown = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/test-shutdown?action=test');
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('關閉機制測試成功');
+        setError('');
+        await fetchStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '測試失敗');
+      }
+    } catch (err) {
+      setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 強制關閉測試
+  const forceShutdown = async () => {
+    if (!confirm('確定要執行強制關閉測試嗎？這可能會影響應用程式運行！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/test-shutdown?action=force');
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('強制關閉測試完成');
+        setError('');
+        await fetchStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '強制關閉測試失敗');
+      }
+    } catch (err) {
+      setError('強制關閉錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 優雅關閉測試
+  const gracefulShutdown = async () => {
+    if (!confirm('確定要執行優雅關閉測試嗎？這會關閉所有資料庫連線！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/test-shutdown', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'graceful' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('優雅關閉測試完成');
+        setError('');
+        await fetchStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '優雅關閉測試失敗');
+      }
+    } catch (err) {
+      setError('優雅關閉錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 組件載入時獲取狀態
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">資料庫關閉管理</h1>
+          <p className="text-muted-foreground">
+            監控和管理資料庫連線的關閉機制
+          </p>
+        </div>
+        <Button 
+          onClick={fetchStatus} 
+          disabled={loading}
+          variant="outline"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
+          重新整理狀態
+        </Button>
+      </div>
+
+      {/* 狀態顯示 */}
+      {status && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              關閉狀態
+            </CardTitle>
+            <CardDescription>
+              當前資料庫關閉管理器的運行狀態
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">關閉狀態:</span>
+                <Badge variant={status.isShuttingDown ? "destructive" : "default"}>
+                  {status.isShuttingDown ? "關閉中" : "正常"}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">處理器數量:</span>
+                <Badge variant="outline">{status.handlerCount}</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">狀態:</span>
+                <Badge variant={status.isShuttingDown ? "destructive" : "default"}>
+                  {status.isShuttingDown ? "異常" : "正常"}
+                </Badge>
+              </div>
+            </div>
+            
+            <div>
+              <span className="text-sm font-medium">已註冊的處理器:</span>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {status.registeredHandlers.map((handler, index) => (
+                  <Badge key={index} variant="secondary">
+                    {handler}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 操作按鈕 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Power className="h-5 w-5" />
+            關閉操作
+          </CardTitle>
+          <CardDescription>
+            測試和管理資料庫關閉機制
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Button 
+              onClick={testShutdown} 
+              disabled={loading}
+              variant="outline"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle className="h-4 w-4" />}
+              測試關閉機制
+            </Button>
+            
+            <Button 
+              onClick={forceShutdown} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
+              強制關閉測試
+            </Button>
+            
+            <Button 
+              onClick={gracefulShutdown} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Power className="h-4 w-4" />}
+              優雅關閉測試
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <CheckCircle className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 說明資訊 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>使用說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>測試關閉機制:</strong> 檢查關閉處理器是否正常註冊，不會實際關閉連線</p>
+          <p>• <strong>強制關閉測試:</strong> 模擬強制關閉所有資料庫連線（用於測試）</p>
+          <p>• <strong>優雅關閉測試:</strong> 執行完整的優雅關閉流程（會實際關閉連線）</p>
+          <p>• 當應用程式收到 SIGINT 或 SIGTERM 信號時，會自動執行優雅關閉</p>
+          <p>• 關閉管理器會確保所有資料庫連線池都被正確關閉</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/admin/emergency-cleanup/page.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap } from 'lucide-react';
+
+interface ConnectionDetail {
+  ID: number;
+  USER: string;
+  HOST: string;
+  DB: string;
+  COMMAND: string;
+  TIME: number;
+  STATE: string;
+  INFO?: string;
+}
+
+interface ConnectionData {
+  connectionCount: number;
+  connections: ConnectionDetail[];
+}
+
+export default function EmergencyCleanupPage() {
+  const [connectionData, setConnectionData] = useState<ConnectionData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  // 獲取連線詳情
+  const fetchConnectionDetails = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/emergency-cleanup?action=details');
+      const data = await response.json();
+      
+      if (data.success) {
+        setConnectionData(data.data);
+        setMessage('連線詳情更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取連線詳情失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 執行緊急清理
+  const executeEmergencyCleanup = async () => {
+    if (!confirm('確定要執行緊急清理嗎？這會關閉所有資料庫連線！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/emergency-cleanup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'cleanup' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('緊急清理完成');
+        setError('');
+        await fetchConnectionDetails(); // 重新獲取詳情
+      } else {
+        setError(data.error || '緊急清理失敗');
+      }
+    } catch (err) {
+      setError('緊急清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 強制殺死所有連線
+  const forceKillAllConnections = async () => {
+    if (!confirm('確定要強制殺死所有連線嗎？這會立即終止所有資料庫連線！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/emergency-cleanup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'kill-all' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage('強制殺死連線完成');
+        setError('');
+        await fetchConnectionDetails(); // 重新獲取詳情
+      } else {
+        setError(data.error || '強制殺死連線失敗');
+      }
+    } catch (err) {
+      setError('強制殺死連線錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 組件載入時獲取連線詳情
+  useEffect(() => {
+    fetchConnectionDetails();
+  }, []);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-red-600">緊急連線清理</h1>
+          <p className="text-muted-foreground">
+            緊急清理和強制關閉資料庫連線
+          </p>
+        </div>
+        <Button 
+          onClick={fetchConnectionDetails} 
+          disabled={loading}
+          variant="outline"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
+          重新整理
+        </Button>
+      </div>
+
+      {/* 警告提示 */}
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertDescription>
+          <strong>警告：</strong> 這些操作會立即關閉所有資料庫連線，可能影響正在運行的應用程式。請謹慎使用！
+        </AlertDescription>
+      </Alert>
+
+      {/* 連線統計 */}
+      {connectionData && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              當前連線狀態
+            </CardTitle>
+            <CardDescription>
+              資料庫連線的詳細信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center gap-4">
+              <Badge variant="outline" className="text-lg px-3 py-1">
+                總連線數: {connectionData.connectionCount}
+              </Badge>
+              <Badge 
+                variant={connectionData.connectionCount > 10 ? "destructive" : "default"}
+                className="text-lg px-3 py-1"
+              >
+                狀態: {connectionData.connectionCount > 10 ? "異常" : "正常"}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 緊急操作 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-red-600">
+            <Zap className="h-5 w-5" />
+            緊急操作
+          </CardTitle>
+          <CardDescription>
+            立即清理和關閉資料庫連線
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Button 
+              onClick={executeEmergencyCleanup} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+              緊急清理連線
+            </Button>
+            
+            <Button 
+              onClick={forceKillAllConnections} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
+              強制殺死所有連線
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 連線詳情列表 */}
+      {connectionData && connectionData.connections.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>連線詳情列表</CardTitle>
+            <CardDescription>
+              當前所有資料庫連線的詳細信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {connectionData.connections.map((conn, index) => (
+                <div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex items-center gap-4">
+                    <Badge variant="outline">#{conn.ID}</Badge>
+                    <div>
+                      <p className="text-sm font-medium">
+                        用戶: {conn.USER} | 主機: {conn.HOST}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        資料庫: {conn.DB} | 命令: {conn.COMMAND}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        時間: {conn.TIME}s | 狀態: {conn.STATE}
+                      </p>
+                      {conn.INFO && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <Database className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 使用說明 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>使用說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>緊急清理連線:</strong> 停止監控並關閉所有連線池，這是較溫和的方式</p>
+          <p>• <strong>強制殺死所有連線:</strong> 直接殺死資料庫中的所有連線，這是更激進的方式</p>
+          <p>• <strong>重新整理:</strong> 獲取最新的連線狀態和詳情</p>
+          <p>• 建議先嘗試「緊急清理連線」，如果無效再使用「強制殺死所有連線」</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/admin/ip-cleanup/page.tsx

@@ -0,0 +1,442 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap, Globe } from 'lucide-react';
+
+interface ConnectionDetail {
+  ID: number;
+  USER: string;
+  HOST: string;
+  DB: string;
+  COMMAND: string;
+  TIME: number;
+  STATE: string;
+  INFO?: string;
+}
+
+interface ConnectionStatus {
+  ip: string;
+  connectionCount: number;
+  connections: ConnectionDetail[];
+}
+
+interface LocalStats {
+  clientIP: string;
+  trackedConnections: number;
+  connections: Array<{
+    connectionId: string;
+    createdAt: string;
+    lastUsed: string;
+    userAgent?: string;
+  }>;
+}
+
+export default function IPCleanupPage() {
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
+  const [localStats, setLocalStats] = useState<LocalStats | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [targetIP, setTargetIP] = useState<string>('');
+
+  // 獲取當前 IP 的連線狀態
+  const fetchCurrentIPStatus = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ip-cleanup?action=status');
+      const data = await response.json();
+      
+      if (data.success) {
+        setConnectionStatus(data.data);
+        setMessage('當前 IP 連線狀態更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取當前 IP 連線狀態失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 獲取指定 IP 的連線狀態
+  const fetchSpecificIPStatus = async () => {
+    if (!targetIP.trim()) {
+      setError('請輸入目標 IP 地址');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/ip-cleanup?action=status-specific&ip=${encodeURIComponent(targetIP)}`);
+      const data = await response.json();
+      
+      if (data.success) {
+        setConnectionStatus(data.data);
+        setMessage(`指定 IP ${targetIP} 的連線狀態更新成功`);
+        setError('');
+      } else {
+        setError(data.error || '獲取指定 IP 連線狀態失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 獲取本地連線統計
+  const fetchLocalStats = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ip-cleanup?action=local-stats');
+      const data = await response.json();
+      
+      if (data.success) {
+        setLocalStats(data.data);
+        setMessage('本地連線統計更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取本地連線統計失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 清理當前 IP 的連線
+  const cleanupCurrentIP = async () => {
+    if (!confirm('確定要清理當前 IP 的所有連線嗎？')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ip-cleanup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'cleanup-current' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage(data.message || '當前 IP 連線清理完成');
+        setError('');
+        await fetchCurrentIPStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '當前 IP 連線清理失敗');
+      }
+    } catch (err) {
+      setError('當前 IP 連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 清理指定 IP 的連線
+  const cleanupSpecificIP = async () => {
+    if (!targetIP.trim()) {
+      setError('請輸入目標 IP 地址');
+      return;
+    }
+
+    if (!confirm(`確定要清理 IP ${targetIP} 的所有連線嗎？`)) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ip-cleanup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ 
+          action: 'cleanup-specific',
+          targetIP: targetIP.trim()
+        }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage(data.message || `IP ${targetIP} 連線清理完成`);
+        setError('');
+        await fetchSpecificIPStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || `IP ${targetIP} 連線清理失敗`);
+      }
+    } catch (err) {
+      setError(`IP ${targetIP} 連線清理錯誤: ` + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 清理本地追蹤的連線
+  const cleanupLocalConnections = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ip-cleanup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'cleanup-local' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage(data.message || '本地連線清理完成');
+        setError('');
+        await fetchLocalStats(); // 重新獲取統計
+      } else {
+        setError(data.error || '本地連線清理失敗');
+      }
+    } catch (err) {
+      setError('本地連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 組件載入時獲取狀態
+  useEffect(() => {
+    fetchCurrentIPStatus();
+    fetchLocalStats();
+  }, []);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">IP 連線管理</h1>
+          <p className="text-muted-foreground">
+            基於 IP 地址的智能連線清理和管理
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button 
+            onClick={fetchCurrentIPStatus} 
+            disabled={loading}
+            variant="outline"
+          >
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
+            當前 IP
+          </Button>
+          <Button 
+            onClick={fetchLocalStats} 
+            disabled={loading}
+            variant="outline"
+          >
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
+            本地統計
+          </Button>
+        </div>
+      </div>
+
+      {/* 當前 IP 連線狀態 */}
+      {connectionStatus && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Globe className="h-5 w-5" />
+              IP 連線狀態
+            </CardTitle>
+            <CardDescription>
+              IP: {connectionStatus.ip} | 連線數: {connectionStatus.connectionCount}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center gap-4">
+              <Badge variant="outline" className="text-lg px-3 py-1">
+                連線數: {connectionStatus.connectionCount}
+              </Badge>
+              <Badge 
+                variant={connectionStatus.connectionCount > 5 ? "destructive" : "default"}
+                className="text-lg px-3 py-1"
+              >
+                狀態: {connectionStatus.connectionCount > 5 ? "異常" : "正常"}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 本地連線統計 */}
+      {localStats && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              本地連線統計
+            </CardTitle>
+            <CardDescription>
+              客戶端 IP: {localStats.clientIP} | 追蹤連線數: {localStats.trackedConnections}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {localStats.connections.map((conn, index) => (
+                <div key={index} className="flex items-center justify-between p-2 border rounded">
+                  <div>
+                    <p className="text-sm font-medium">連線 ID: {conn.connectionId}</p>
+                    <p className="text-xs text-muted-foreground">
+                      創建: {new Date(conn.createdAt).toLocaleString()} | 
+                      最後使用: {new Date(conn.lastUsed).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 操作按鈕 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Trash2 className="h-5 w-5" />
+            IP 連線清理
+          </CardTitle>
+          <CardDescription>
+            清理指定 IP 地址的資料庫連線
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Button 
+              onClick={cleanupCurrentIP} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+              清理當前 IP 連線
+            </Button>
+            
+            <Button 
+              onClick={cleanupLocalConnections} 
+              disabled={loading}
+              variant="outline"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
+              清理本地追蹤連線
+            </Button>
+          </div>
+
+          {/* 指定 IP 清理 */}
+          <div className="space-y-2">
+            <Label htmlFor="targetIP">指定 IP 地址</Label>
+            <div className="flex gap-2">
+              <Input
+                id="targetIP"
+                value={targetIP}
+                onChange={(e) => setTargetIP(e.target.value)}
+                placeholder="例如: 192.168.1.100"
+                className="flex-1"
+              />
+              <Button 
+                onClick={fetchSpecificIPStatus} 
+                disabled={loading || !targetIP.trim()}
+                variant="outline"
+              >
+                <Eye className="h-4 w-4" />
+              </Button>
+              <Button 
+                onClick={cleanupSpecificIP} 
+                disabled={loading || !targetIP.trim()}
+                variant="destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 連線詳情列表 */}
+      {connectionStatus && connectionStatus.connections.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>連線詳情列表</CardTitle>
+            <CardDescription>
+              IP {connectionStatus.ip} 的所有資料庫連線
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {connectionStatus.connections.map((conn, index) => (
+                <div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex items-center gap-4">
+                    <Badge variant="outline">#{conn.ID}</Badge>
+                    <div>
+                      <p className="text-sm font-medium">
+                        用戶: {conn.USER} | 主機: {conn.HOST}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        資料庫: {conn.DB} | 命令: {conn.COMMAND}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        時間: {conn.TIME}s | 狀態: {conn.STATE}
+                      </p>
+                      {conn.INFO && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <Database className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 使用說明 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>IP 連線管理說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>當前 IP 連線:</strong> 顯示和清理當前訪問者的所有資料庫連線</p>
+          <p>• <strong>指定 IP 連線:</strong> 輸入特定 IP 地址來查看和清理該 IP 的連線</p>
+          <p>• <strong>本地追蹤連線:</strong> 清理應用程式內部追蹤的連線記錄</p>
+          <p>• <strong>智能清理:</strong> 只清理指定 IP 的連線，不影響其他用戶</p>
+          <p>• <strong>關閉網站時:</strong> 系統會自動清理當前 IP 的所有連線</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/admin/ultimate-kill/page.tsx

@@ -0,0 +1,314 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap, Skull } from 'lucide-react';
+
+interface ConnectionStatus {
+  currentConnections: number;
+  maxConnections: number;
+  usagePercentage: number;
+  connectionDetails: Array<{
+    ID: number;
+    USER: string;
+    HOST: string;
+    DB: string;
+    COMMAND: string;
+    TIME: number;
+    STATE: string;
+    INFO?: string;
+  }>;
+  connectionCount: number;
+}
+
+export default function UltimateKillPage() {
+  const [status, setStatus] = useState<ConnectionStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  // 獲取連線狀態
+  const fetchStatus = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ultimate-kill?action=status');
+      const data = await response.json();
+      
+      if (data.success) {
+        setStatus(data.data);
+        setMessage('狀態更新成功');
+        setError('');
+      } else {
+        setError(data.error || '獲取狀態失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 終極清理 - 殺死所有連線
+  const ultimateKill = async () => {
+    if (!confirm('確定要執行終極清理嗎？這會強制殺死所有資料庫連線！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ultimate-kill', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'kill-all' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage(data.message || '終極清理完成');
+        setError('');
+        await fetchStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '終極清理失敗');
+      }
+    } catch (err) {
+      setError('終極清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 強制重啟資料庫連線
+  const forceRestart = async () => {
+    if (!confirm('確定要強制重啟資料庫連線嗎？這會先殺死所有連線然後重新建立！')) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await fetch('/api/ultimate-kill', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'restart' }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        setMessage(data.message || '強制重啟完成');
+        setError('');
+        await fetchStatus(); // 重新獲取狀態
+      } else {
+        setError(data.error || '強制重啟失敗');
+      }
+    } catch (err) {
+      setError('強制重啟錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 組件載入時獲取狀態
+  useEffect(() => {
+    fetchStatus();
+    
+    // 每10秒自動更新狀態
+    const interval = setInterval(fetchStatus, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-red-600">終極連線清理</h1>
+          <p className="text-muted-foreground">
+            強制殺死所有資料庫連線 - 最後手段
+          </p>
+        </div>
+        <Button 
+          onClick={fetchStatus} 
+          disabled={loading}
+          variant="outline"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
+          重新整理
+        </Button>
+      </div>
+
+      {/* 嚴重警告 */}
+      <Alert variant="destructive">
+        <Skull className="h-4 w-4" />
+        <AlertDescription>
+          <strong>嚴重警告：</strong> 這些操作會立即強制殺死所有資料庫連線，可能導致正在運行的應用程式崩潰。請確保沒有重要操作正在進行！
+        </AlertDescription>
+      </Alert>
+
+      {/* 連線狀態概覽 */}
+      {status && (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Database className="h-5 w-5 text-blue-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">總連線數</p>
+                  <p className="text-2xl font-bold">{status.currentConnections}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-5 w-5 text-yellow-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">最大連線數</p>
+                  <p className="text-2xl font-bold">{status.maxConnections}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Zap className="h-5 w-5 text-red-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">使用率</p>
+                  <p className="text-2xl font-bold">{status.usagePercentage.toFixed(1)}%</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-6">
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-5 w-5 text-green-500" />
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">狀態</p>
+                  <p className="text-2xl font-bold">
+                    {status.connectionCount <= 1 ? '正常' : '異常'}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* 終極操作 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-red-600">
+            <Skull className="h-5 w-5" />
+            終極操作
+          </CardTitle>
+          <CardDescription>
+            強制殺死所有資料庫連線 - 最後手段
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Button 
+              onClick={ultimateKill} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Skull className="h-4 w-4" />}
+              終極清理 - 殺死所有連線
+            </Button>
+            
+            <Button 
+              onClick={forceRestart} 
+              disabled={loading}
+              variant="destructive"
+              className="w-full"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />}
+              強制重啟資料庫連線
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 連線詳情列表 */}
+      {status && status.connectionDetails.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>連線詳情列表</CardTitle>
+            <CardDescription>
+              當前所有資料庫連線的詳細信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {status.connectionDetails.map((conn, index) => (
+                <div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
+                  <div className="flex items-center gap-4">
+                    <Badge variant="outline">#{conn.ID}</Badge>
+                    <div>
+                      <p className="text-sm font-medium">
+                        用戶: {conn.USER} | 主機: {conn.HOST}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        資料庫: {conn.DB} | 命令: {conn.COMMAND}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        時間: {conn.TIME}s | 狀態: {conn.STATE}
+                      </p>
+                      {conn.INFO && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <Database className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 使用說明 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>終極清理說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>終極清理:</strong> 直接殺死資料庫中的所有連線，立即生效</p>
+          <p>• <strong>強制重啟:</strong> 先殺死所有連線，等待系統穩定，然後重新建立連線</p>
+          <p>• <strong>自動更新:</strong> 頁面每10秒自動更新連線狀態</p>
+          <p>• <strong>最後手段:</strong> 這些操作是最後的手段，會立即終止所有連線</p>
+          <p>• 建議先嘗試「終極清理」，如果問題持續再使用「強制重啟」</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}