新增資料庫架構

app/settings/page.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Sparkles, ArrowLeft, Database, Settings, TestTube, Trash2 } from "lucide-react"
+import HeaderMusicControl from "@/components/header-music-control"
+import MigrationDialog from "@/components/migration-dialog"
+import { testSupabaseConnection, MigrationService } from "@/lib/supabase-service"
+
+export default function SettingsPage() {
+  const [showMigration, setShowMigration] = useState(false)
+  const [isConnected, setIsConnected] = useState(false)
+  const [localDataCount, setLocalDataCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    checkLocalData()
+    checkConnection()
+  }, [])
+
+  const checkLocalData = () => {
+    try {
+      const wishes = JSON.parse(localStorage.getItem("wishes") || "[]")
+      setLocalDataCount(wishes.length)
+    } catch (error) {
+      setLocalDataCount(0)
+    }
+  }
+
+  const checkConnection = async () => {
+    setIsLoading(true)
+    try {
+      const connected = await testSupabaseConnection()
+      setIsConnected(connected)
+    } catch (error) {
+      setIsConnected(false)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const clearAllData = () => {
+    if (confirm("確定要清除所有本地數據嗎？此操作無法復原。")) {
+      MigrationService.clearLocalStorageData()
+      // 也清除其他設定
+      localStorage.removeItem("backgroundMusicState")
+      localStorage.removeItem("user_session")
+      setLocalDataCount(0)
+      alert("本地數據已清除")
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
+      {/* 星空背景 */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {[...Array(25)].map((_, i) => (
+          <div
+            key={i}
+            className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
+            style={{
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              animationDelay: `${Math.random() * 3}s`,
+              animationDuration: `${2 + Math.random() * 2}s`,
+            }}
+          />
+        ))}
+        <div className="absolute top-1/4 left-1/3 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-purple-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
+      </div>
+
+      {/* Header */}
+      <header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
+          <div className="flex items-center justify-between gap-2">
+            <Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
+              <div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
+                <Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
+              </div>
+              <h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
+            </Link>
+
+            <nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
+              <div className="hidden sm:block">
+                <HeaderMusicControl />
+              </div>
+              <div className="sm:hidden">
+                <HeaderMusicControl mobileSimplified />
+              </div>
+
+              <Link href="/">
+                <Button variant="ghost" size="sm" className="text-blue-200 hover:text-white hover:bg-blue-800/50">
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  返回首頁
+                </Button>
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="py-8 md:py-12 px-4">
+        <div className="container mx-auto max-w-4xl">
+          <div className="text-center mb-8 md:mb-12">
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 flex items-center justify-center gap-3">
+              <Settings className="w-8 h-8 text-cyan-400" />
+              系統設定
+            </h2>
+            <p className="text-blue-200 text-sm md:text-base">管理數據存儲和系統配置</p>
+          </div>
+
+          <div className="space-y-6 md:space-y-8">
+            {/* Supabase 連接狀態 */}
+            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+              <CardHeader>
+                <CardTitle className="text-white flex items-center gap-3">
+                  <Database className="w-6 h-6 text-blue-400" />
+                  Supabase 數據庫狀態
+                </CardTitle>
+                <CardDescription className="text-blue-200">雲端數據庫連接和配置狀態</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-4 h-4 rounded-full ${isConnected ? "bg-green-400" : "bg-red-400"}`}></div>
+                    <span className="text-white">連接狀態</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge className={isConnected ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200"}>
+                      {isLoading ? "檢查中..." : isConnected ? "已連接" : "未連接"}
+                    </Badge>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={checkConnection}
+                      disabled={isLoading}
+                      className="text-blue-200 hover:text-white"
+                    >
+                      <TestTube className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                {!isConnected && (
+                  <div className="p-4 bg-red-900/20 border border-red-600/30 rounded-lg">
+                    <p className="text-red-200 text-sm">無法連接到 Supabase。請檢查：</p>
+                    <ul className="text-red-200 text-xs mt-2 ml-4 space-y-1">
+                      <li>• 環境變數 NEXT_PUBLIC_SUPABASE_URL 是否正確</li>
+                      <li>• 環境變數 NEXT_PUBLIC_SUPABASE_ANON_KEY 是否正確</li>
+                      <li>• Supabase 項目是否正常運行</li>
+                      <li>• 網路連接是否正常</li>
+                    </ul>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* 數據遷移 */}
+            {localDataCount > 0 && (
+              <Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-600/50">
+                <CardHeader>
+                  <CardTitle className="text-white flex items-center gap-3">
+                    <Database className="w-6 h-6 text-blue-400" />
+                    數據遷移
+                    <Badge className="bg-orange-500/20 text-orange-200 border border-orange-400/30">需要處理</Badge>
+                  </CardTitle>
+                  <CardDescription className="text-blue-200">
+                    發現 {localDataCount} 個本地困擾案例，建議遷移到雲端數據庫
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Button
+                    onClick={() => setShowMigration(true)}
+                    className="w-full bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white"
+                  >
+                    開始數據遷移
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* 數據管理 */}
+            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+              <CardHeader>
+                <CardTitle className="text-white flex items-center gap-3">
+                  <Trash2 className="w-6 h-6 text-red-400" />
+                  數據管理
+                </CardTitle>
+                <CardDescription className="text-blue-200">清除本地存儲的數據</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="p-4 bg-slate-700/50 rounded-lg">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-white">本地困擾案例</span>
+                    <Badge variant="secondary">{localDataCount} 個</Badge>
+                  </div>
+                  <p className="text-slate-300 text-sm">存儲在瀏覽器本地的困擾案例數據</p>
+                </div>
+
+                <Button onClick={clearAllData} disabled={localDataCount === 0} variant="destructive" className="w-full">
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  清除所有本地數據
+                </Button>
+              </CardContent>
+            </Card>
+
+            {/* 系統資訊 */}
+            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+              <CardHeader>
+                <CardTitle className="text-white">系統資訊</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <span className="text-slate-400">版本</span>
+                    <div className="text-white">v1.0.0</div>
+                  </div>
+                  <div>
+                    <span className="text-slate-400">數據庫</span>
+                    <div className="text-white">{isConnected ? "Supabase" : "LocalStorage"}</div>
+                  </div>
+                  <div>
+                    <span className="text-slate-400">用戶會話</span>
+                    <div className="text-white text-xs truncate">
+                      {typeof window !== "undefined"
+                        ? localStorage.getItem("user_session")?.slice(-8) || "未設定"
+                        : "載入中..."}
+                    </div>
+                  </div>
+                  <div>
+                    <span className="text-slate-400">瀏覽器</span>
+                    <div className="text-white">
+                      {typeof window !== "undefined" ? navigator.userAgent.split(" ").pop() : "未知"}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </main>
+
+      {/* 遷移對話框 */}
+      {showMigration && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="w-full max-w-2xl">
+            <MigrationDialog
+              onComplete={() => {
+                setShowMigration(false)
+                checkLocalData()
+              }}
+              onSkip={() => setShowMigration(false)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

app/settings/storage-management.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { 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 { Progress } from "@/components/ui/progress"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Cloud, Trash2, RefreshCw, CheckCircle, AlertTriangle, HardDrive } from "lucide-react"
+import { StorageHealthService } from "@/lib/supabase-service-updated"
+
+export default function StorageManagement() {
+  const [storageHealth, setStorageHealth] = useState<{
+    healthy: boolean
+    stats?: { totalFiles: number; totalSize: number }
+    error?: string
+  } | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [cleanupResult, setCleanupResult] = useState<{ cleaned: number; error?: string } | null>(null)
+
+  useEffect(() => {
+    checkStorageHealth()
+  }, [])
+
+  const checkStorageHealth = async () => {
+    setIsLoading(true)
+    try {
+      const health = await StorageHealthService.checkStorageHealth()
+      setStorageHealth(health)
+    } catch (error) {
+      setStorageHealth({ healthy: false, error: `檢查失敗: ${error}` })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const cleanupOrphanedImages = async () => {
+    if (!confirm("確定要清理孤立的圖片嗎？這將刪除沒有被任何困擾案例引用的圖片。")) {
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      const result = await StorageHealthService.cleanupOrphanedImages()
+      setCleanupResult(result)
+      // 重新檢查存儲狀態
+      await checkStorageHealth()
+    } catch (error) {
+      setCleanupResult({ cleaned: 0, error: `清理失敗: ${error}` })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 存儲狀態 */}
+      <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+        <CardHeader>
+          <CardTitle className="text-white flex items-center gap-3">
+            <Cloud className="w-6 h-6 text-blue-400" />
+            Supabase Storage 狀態
+          </CardTitle>
+          <CardDescription className="text-blue-200">雲端圖片存儲服務狀態和使用情況</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div
+                className={`w-4 h-4 rounded-full ${
+                  storageHealth?.healthy ? "bg-green-400" : "bg-red-400"
+                } ${isLoading ? "animate-pulse" : ""}`}
+              ></div>
+              <span className="text-white">存儲服務狀態</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge
+                className={storageHealth?.healthy ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200"}
+              >
+                {isLoading ? "檢查中..." : storageHealth?.healthy ? "正常運行" : "服務異常"}
+              </Badge>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={checkStorageHealth}
+                disabled={isLoading}
+                className="text-blue-200 hover:text-white"
+              >
+                <RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
+              </Button>
+            </div>
+          </div>
+
+          {/* 存儲統計 */}
+          {storageHealth?.stats && (
+            <div className="grid grid-cols-2 gap-4">
+              <div className="p-4 bg-slate-700/50 rounded-lg text-center">
+                <div className="text-2xl font-bold text-white mb-1">{storageHealth.stats.totalFiles}</div>
+                <div className="text-sm text-slate-300">圖片檔案</div>
+              </div>
+              <div className="p-4 bg-slate-700/50 rounded-lg text-center">
+                <div className="text-2xl font-bold text-white mb-1">
+                  {formatFileSize(storageHealth.stats.totalSize)}
+                </div>
+                <div className="text-sm text-slate-300">總使用空間</div>
+              </div>
+            </div>
+          )}
+
+          {/* 存儲使用進度條 */}
+          {storageHealth?.stats && (
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-300">存儲使用量</span>
+                <span className="text-slate-400">{formatFileSize(storageHealth.stats.totalSize)} / 1GB (免費額度)</span>
+              </div>
+              <Progress
+                value={Math.min((storageHealth.stats.totalSize / (1024 * 1024 * 1024)) * 100, 100)}
+                className="w-full"
+              />
+            </div>
+          )}
+
+          {/* 錯誤訊息 */}
+          {storageHealth?.error && (
+            <Alert className="border-red-500/50 bg-red-900/20">
+              <AlertTriangle className="h-4 w-4 text-red-400" />
+              <AlertDescription className="text-red-100">
+                <div className="space-y-1">
+                  <p>存儲服務檢查失敗：</p>
+                  <p className="text-sm">{storageHealth.error}</p>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 存儲管理 */}
+      <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+        <CardHeader>
+          <CardTitle className="text-white flex items-center gap-3">
+            <HardDrive className="w-6 h-6 text-purple-400" />
+            存儲管理
+          </CardTitle>
+          <CardDescription className="text-blue-200">管理和優化雲端圖片存儲</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="p-4 bg-slate-700/50 rounded-lg">
+            <h4 className="text-white font-semibold mb-2 flex items-center gap-2">
+              <Trash2 className="w-4 h-4 text-orange-400" />
+              清理孤立圖片
+            </h4>
+            <p className="text-slate-300 text-sm mb-3">清理沒有被任何困擾案例引用的圖片檔案，釋放存儲空間。</p>
+            <Button
+              onClick={cleanupOrphanedImages}
+              disabled={isLoading || !storageHealth?.healthy}
+              className="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              {isLoading ? "清理中..." : "開始清理"}
+            </Button>
+          </div>
+
+          {/* 清理結果 */}
+          {cleanupResult && (
+            <Alert
+              className={`${
+                cleanupResult.error ? "border-red-500/50 bg-red-900/20" : "border-green-500/50 bg-green-900/20"
+              }`}
+            >
+              {cleanupResult.error ? (
+                <AlertTriangle className="h-4 w-4 text-red-400" />
+              ) : (
+                <CheckCircle className="h-4 w-4 text-green-400" />
+              )}
+              <AlertDescription className={cleanupResult.error ? "text-red-100" : "text-green-100"}>
+                {cleanupResult.error ? (
+                  <div>
+                    <p>清理過程中發生錯誤：</p>
+                    <p className="text-sm mt-1">{cleanupResult.error}</p>
+                  </div>
+                ) : (
+                  <div>
+                    <p>清理完成！</p>
+                    <p className="text-sm mt-1">
+                      {cleanupResult.cleaned > 0
+                        ? `成功清理了 ${cleanupResult.cleaned} 個孤立的圖片檔案`
+                        : "沒有發現需要清理的孤立圖片"}
+                    </p>
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* 存儲最佳實踐 */}
+          <div className="p-4 bg-blue-900/20 border border-blue-600/30 rounded-lg">
+            <h4 className="text-blue-200 font-semibold mb-2">💡 存儲最佳實踐</h4>
+            <ul className="text-blue-100 text-sm space-y-1">
+              <li>• 定期清理孤立圖片以節省存儲空間</li>
+              <li>• 上傳前壓縮大圖片以減少存儲使用量</li>
+              <li>• 避免上傳重複的圖片內容</li>
+              <li>• 使用適當的圖片格式（WebP 通常最優）</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}