完成 APP 建立流程和使用分析、增加主機備機的備援機制、管理者後臺增加資料庫監控

components/admin/system-settings.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import React, { useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -25,6 +25,11 @@ import {
   CheckCircle,
   HardDrive,
   Clock,
+  Database,
+  RefreshCw,
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
   Globe,
 } from "lucide-react"
 
@@ -71,6 +76,12 @@ export function SystemSettings() {
   const [activeTab, setActiveTab] = useState("general")
   const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle")
   const [showSmtpPassword, setShowSmtpPassword] = useState(false)
+  
+  // 資料庫狀態
+  const [databaseStatus, setDatabaseStatus] = useState<any>(null)
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false)
+  const [syncStatus, setSyncStatus] = useState<any>(null)
+  const [isLoadingSync, setIsLoadingSync] = useState(false)
 
   const handleSave = async () => {
     setSaveStatus("saving")
@@ -90,6 +101,99 @@ export function SystemSettings() {
     setSettings((prev) => ({ ...prev, [key]: value }))
   }
 
+  // 獲取資料庫狀態
+  const fetchDatabaseStatus = async () => {
+    setIsLoadingStatus(true)
+    try {
+      const response = await fetch('/api/admin/database-status')
+      const data = await response.json()
+      if (data.success) {
+        setDatabaseStatus(data.data)
+      } else {
+        console.error('獲取資料庫狀態失敗:', data.error)
+      }
+    } catch (error) {
+      console.error('獲取資料庫狀態失敗:', error)
+    } finally {
+      setIsLoadingStatus(false)
+    }
+  }
+
+  // 切換資料庫
+  const switchDatabase = async (database: 'master' | 'slave') => {
+    try {
+      const response = await fetch('/api/admin/database-status', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action: 'switch', database }),
+      })
+      const data = await response.json()
+      if (data.success) {
+        // 重新獲取狀態
+        await fetchDatabaseStatus()
+        alert(data.message)
+      } else {
+        alert(`切換失敗: ${data.message}`)
+      }
+    } catch (error) {
+      console.error('切換資料庫失敗:', error)
+      alert('切換資料庫失敗')
+    }
+  }
+
+  // 獲取同步狀態
+  const fetchSyncStatus = async () => {
+    setIsLoadingSync(true)
+    try {
+      const response = await fetch('/api/admin/database-sync')
+      const data = await response.json()
+      if (data.success) {
+        setSyncStatus(data.data)
+      } else {
+        console.error('獲取同步狀態失敗:', data.error)
+      }
+    } catch (error) {
+      console.error('獲取同步狀態失敗:', error)
+    } finally {
+      setIsLoadingSync(false)
+    }
+  }
+
+  // 同步表資料
+  const syncTable = async (tableName: string) => {
+    try {
+      const response = await fetch('/api/admin/database-sync', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          action: 'sync_table',
+          tableName: tableName
+        })
+      })
+      const data = await response.json()
+      if (data.success) {
+        alert(`成功同步表 ${tableName} 到備機`)
+      } else {
+        alert(`同步表 ${tableName} 失敗: ${data.message}`)
+      }
+    } catch (error) {
+      console.error('同步表失敗:', error)
+      alert('同步表失敗')
+    }
+  }
+
+  // 組件載入時獲取資料庫狀態
+  React.useEffect(() => {
+    if (activeTab === 'performance') {
+      fetchDatabaseStatus()
+      fetchSyncStatus()
+    }
+  }, [activeTab])
+
   return (
     <div className="p-6 max-w-6xl mx-auto">
       <div className="flex items-center justify-between mb-6">
@@ -383,6 +487,243 @@ export function SystemSettings() {
               </div>
             </CardContent>
           </Card>
+
+          {/* 資料庫狀態監控 */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle className="flex items-center gap-2">
+                  <Database className="w-5 h-5" />
+                  資料庫狀態監控
+                </CardTitle>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={fetchDatabaseStatus}
+                  disabled={isLoadingStatus}
+                >
+                  <RefreshCw className={`w-4 h-4 mr-2 ${isLoadingStatus ? 'animate-spin' : ''}`} />
+                  重新整理
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {databaseStatus ? (
+                <>
+                  {/* 備援狀態概覽 */}
+                  <div className="p-4 bg-gray-50 border rounded-lg">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="font-medium">備援系統狀態</span>
+                      <Badge variant={databaseStatus.isEnabled ? "default" : "secondary"}>
+                        {databaseStatus.isEnabled ? "已啟用" : "已停用"}
+                      </Badge>
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      當前使用: {databaseStatus.currentDatabase === 'master' ? '主機' : '備機'} | 
+                      連續失敗: {databaseStatus.consecutiveFailures} 次
+                    </div>
+                    <div className="text-xs text-muted-foreground mt-1">
+                      最後檢查: {new Date(databaseStatus.lastHealthCheck).toLocaleString()}
+                    </div>
+                  </div>
+
+                  {/* 主機資料庫 */}
+                  <div className="p-4 border rounded-lg">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Server className="w-5 h-5" />
+                        <span className="font-medium">主機資料庫</span>
+                        {databaseStatus.currentDatabase === 'master' && (
+                          <Badge variant="default" className="bg-green-100 text-green-800">
+                            當前使用
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {databaseStatus.masterHealthy ? (
+                          <CheckCircle2 className="w-5 h-5 text-green-500" />
+                        ) : (
+                          <XCircle className="w-5 h-5 text-red-500" />
+                        )}
+                        <Badge variant={databaseStatus.masterHealthy ? "default" : "destructive"}>
+                          {databaseStatus.masterHealthy ? '正常' : '故障'}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="text-muted-foreground">主機:</span>
+                        <span className="ml-2 font-mono">mysql.theaken.com:33306</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">資料庫:</span>
+                        <span className="ml-2 font-mono">db_AI_Platform</span>
+                      </div>
+                    </div>
+                    {databaseStatus.currentDatabase !== 'master' && databaseStatus.masterHealthy && (
+                      <Button
+                        size="sm"
+                        className="mt-3"
+                        onClick={() => switchDatabase('master')}
+                      >
+                        切換到主機
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* 備機資料庫 */}
+                  <div className="p-4 border rounded-lg">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Database className="w-5 h-5" />
+                        <span className="font-medium">備機資料庫</span>
+                        {databaseStatus.currentDatabase === 'slave' && (
+                          <Badge variant="default" className="bg-blue-100 text-blue-800">
+                            當前使用
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {databaseStatus.slaveHealthy ? (
+                          <CheckCircle2 className="w-5 h-5 text-green-500" />
+                        ) : (
+                          <XCircle className="w-5 h-5 text-red-500" />
+                        )}
+                        <Badge variant={databaseStatus.slaveHealthy ? "default" : "destructive"}>
+                          {databaseStatus.slaveHealthy ? '正常' : '故障'}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="text-muted-foreground">主機:</span>
+                        <span className="ml-2 font-mono">122.100.99.161:43306</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">資料庫:</span>
+                        <span className="ml-2 font-mono">db_AI_Platform</span>
+                      </div>
+                    </div>
+                    {databaseStatus.currentDatabase !== 'slave' && databaseStatus.slaveHealthy && (
+                      <Button
+                        size="sm"
+                        className="mt-3"
+                        onClick={() => switchDatabase('slave')}
+                      >
+                        切換到備機
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* 狀態說明 */}
+                  <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                    <div className="flex items-start gap-2">
+                      <AlertCircle className="w-4 h-4 text-yellow-600 mt-0.5" />
+                      <div className="text-sm text-yellow-800">
+                        <p className="font-medium">注意事項:</p>
+                        <ul className="mt-1 space-y-1 text-xs">
+                          <li>• 系統會自動在健康檢查時切換資料庫</li>
+                          <li>• 手動切換僅在目標資料庫健康時有效</li>
+                          <li>• 建議在維護時手動切換到備機</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="p-8 text-center">
+                  <Database className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                  <p className="text-muted-foreground">
+                    {isLoadingStatus ? '載入資料庫狀態中...' : '點擊重新整理按鈕載入資料庫狀態'}
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* 資料庫同步管理 */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle className="flex items-center gap-2">
+                  <Database className="w-5 h-5" />
+                  資料庫同步管理
+                </CardTitle>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={fetchSyncStatus}
+                  disabled={isLoadingSync}
+                >
+                  <RefreshCw className={`w-4 h-4 mr-2 ${isLoadingSync ? 'animate-spin' : ''}`} />
+                  重新整理
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {syncStatus ? (
+                <>
+                  {/* 同步狀態概覽 */}
+                  <div className="p-4 bg-gray-50 border rounded-lg">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="font-medium">雙寫同步狀態</span>
+                      <Badge variant={syncStatus.enabled ? "default" : "secondary"}>
+                        {syncStatus.enabled ? "已啟用" : "未啟用"}
+                      </Badge>
+                    </div>
+                    <div className="text-sm text-gray-600">
+                      <p>主機健康: {syncStatus.masterHealthy ? "正常" : "異常"}</p>
+                      <p>備機健康: {syncStatus.slaveHealthy ? "正常" : "異常"}</p>
+                      {syncStatus.lastSyncTime && (
+                        <p>最後同步: {new Date(syncStatus.lastSyncTime).toLocaleString()}</p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 手動同步操作 */}
+                  <div className="space-y-3">
+                    <h4 className="font-medium">手動同步表資料</h4>
+                    <div className="grid grid-cols-2 gap-2">
+                      {['users', 'apps', 'teams', 'competitions', 'proposals', 'activity_logs'].map((tableName) => (
+                        <Button
+                          key={tableName}
+                          variant="outline"
+                          size="sm"
+                          onClick={() => syncTable(tableName)}
+                          className="justify-start"
+                        >
+                          <Database className="w-4 h-4 mr-2" />
+                          同步 {tableName}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* 同步說明 */}
+                  <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                    <div className="flex items-start gap-2">
+                      <AlertCircle className="w-4 h-4 text-blue-600 mt-0.5" />
+                      <div className="text-sm text-blue-800">
+                        <p className="font-medium">同步說明:</p>
+                        <ul className="mt-1 space-y-1 text-xs">
+                          <li>• 手動同步會將主機資料複製到備機</li>
+                          <li>• 建議在維護期間進行同步操作</li>
+                          <li>• 同步過程中請避免對資料進行修改</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="p-8 text-center">
+                  <Database className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+                  <p className="text-muted-foreground">
+                    {isLoadingSync ? '載入同步狀態中...' : '點擊重新整理按鈕載入同步狀態'}
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
         </TabsContent>
 
         {/* 用戶管理 */}