新增後台登入功能

app/admin/login/page.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Sparkles, Settings, Eye, EyeOff, AlertCircle } from "lucide-react"
+import HeaderMusicControl from "@/components/header-music-control"
+import IpDisplay from "@/components/ip-display"
+
+export default function AdminLoginPage() {
+  const router = useRouter()
+  const [formData, setFormData] = useState({
+    email: "",
+    password: ""
+  })
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError("")
+
+    try {
+      // 模擬登入驗證
+      if (formData.email === "admin@panjit.com.tw" && formData.password === "Aa123456") {
+        // 登入成功，設置 session 並跳轉到後台
+        sessionStorage.setItem("adminLoggedIn", "true")
+        router.push("/admin")
+      } else {
+        setError("帳號或密碼錯誤")
+      }
+    } catch (error) {
+      setError("登入失敗，請稍後再試")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }))
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex flex-col">
+      {/* 星空背景 */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-500/5 to-transparent"></div>
+      </div>
+
+      {/* Header */}
+      <header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-md sticky top-0 z-[9999] shadow-lg shadow-slate-900/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">
+            {/* Logo 區域 */}
+            <Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0 hover:opacity-80 transition-opacity">
+              <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">
+              {/* IP顯示 */}
+              <div className="hidden sm:block">
+                <IpDisplay />
+              </div>
+              
+              {/* 音樂控制 */}
+              <div className="hidden sm:block">
+                <HeaderMusicControl />
+              </div>
+              <div className="sm:hidden">
+                <HeaderMusicControl mobileSimplified />
+              </div>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* 主要內容 */}
+      <main className="flex-1 flex items-center justify-center py-8 relative z-10">
+        <div className="container mx-auto px-3 sm:px-4">
+          <div className="max-w-md mx-auto">
+            {/* 標題區域 */}
+            <div className="text-center mb-8">
+              <div className="flex items-center justify-center gap-3 mb-4">
+                <Settings className="w-8 h-8 text-cyan-400" />
+                <h2 className="text-3xl md:text-4xl font-bold text-white">後台管理登入</h2>
+              </div>
+              <p className="text-blue-200 text-lg">
+                請輸入管理員帳號密碼以進入後台管理系統
+              </p>
+            </div>
+
+            {/* 登入表單 */}
+            <Card className="bg-slate-800/50 border-slate-600/50 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-white text-center">管理員登入</CardTitle>
+                <CardDescription className="text-blue-200 text-center">
+                  輸入您的管理員憑證
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  {/* 錯誤訊息 */}
+                  {error && (
+                    <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-center gap-2">
+                      <AlertCircle className="w-4 h-4 text-red-400 flex-shrink-0" />
+                      <span className="text-red-300 text-sm">{error}</span>
+                    </div>
+                  )}
+
+                  {/* 帳號輸入 */}
+                  <div className="space-y-2">
+                    <Label htmlFor="email" className="text-blue-200">帳號</Label>
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      placeholder="請輸入管理員帳號"
+                      required
+                      className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-400 focus:border-cyan-400 focus:ring-cyan-400/20"
+                    />
+                  </div>
+
+                  {/* 密碼輸入 */}
+                  <div className="space-y-2">
+                    <Label htmlFor="password" className="text-blue-200">密碼</Label>
+                    <div className="relative">
+                      <Input
+                        id="password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        value={formData.password}
+                        onChange={handleInputChange}
+                        placeholder="請輸入管理員密碼"
+                        required
+                        className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-400 focus:border-cyan-400 focus:ring-cyan-400/20 pr-10"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() => setShowPassword(!showPassword)}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="w-4 h-4 text-slate-400" />
+                        ) : (
+                          <Eye className="w-4 h-4 text-slate-400" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 登入按鈕 */}
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25"
+                  >
+                    {loading ? (
+                      <>
+                        <div className="w-4 h-4 mr-2 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                        登入中...
+                      </>
+                    ) : (
+                      "登入後台"
+                    )}
+                  </Button>
+
+                  {/* 返回首頁 */}
+                  <div className="text-center">
+                    <Link 
+                      href="/" 
+                      className="text-blue-300 hover:text-white transition-colors text-sm"
+                    >
+                      ← 返回首頁
+                    </Link>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+
+            {/* 提示資訊 */}
+            <div className="mt-6 text-center">
+              <p className="text-slate-400 text-sm">
+                忘記密碼？請聯繫系統管理員
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

app/admin/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
@@ -106,6 +107,8 @@ interface AdminStats {
 }
 
 export default function AdminPage() {
+  const router = useRouter()
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [wishes, setWishes] = useState<WishData[]>([])
   const [filteredWishes, setFilteredWishes] = useState<WishData[]>([])
   const [stats, setStats] = useState<AdminStats | null>(null)
@@ -511,9 +514,32 @@ export default function AdminPage() {
     setShowImageModal(true)
   }
 
+  // 登出
+  const handleLogout = () => {
+    sessionStorage.removeItem("adminLoggedIn")
+    router.push("/admin/login")
+  }
+
+  // 檢查登入狀態
   useEffect(() => {
+    const checkAuth = () => {
+      const loggedIn = sessionStorage.getItem("adminLoggedIn")
+      if (loggedIn === "true") {
+        setIsAuthenticated(true)
         fetchData()
-  }, [])
+      } else {
+        router.push("/admin/login")
+      }
+    }
+    
+    checkAuth()
+  }, [router])
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchData()
+    }
+  }, [isAuthenticated])
 
   useEffect(() => {
     filterData()
@@ -530,6 +556,18 @@ export default function AdminPage() {
     )
   }
 
+  // 如果未認證，顯示載入中
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-8 h-8 border-4 border-cyan-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <p className="text-white">驗證中...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative">
       {/* 星空背景 */}
@@ -542,12 +580,12 @@ export default function AdminPage() {
         <div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
           <div className="flex items-center justify-between gap-2">
             {/* Logo 區域 */}
-            <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
+            <Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0 hover:opacity-80 transition-opacity">
               <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>
-            </div>
+            </Link>
 
             {/* 導航區域 */}
             <nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
@@ -564,13 +602,15 @@ export default function AdminPage() {
                 <HeaderMusicControl mobileSimplified />
               </div>
 
-              {/* 返回按鈕 */}
+              {/* 登出按鈕 */}
-              <Link href="/">
+              <Button
-                <Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
+                onClick={handleLogout}
-                  <ArrowLeft className="w-4 h-4 mr-2" />
+                variant="ghost"
-                  返回首頁
+                className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
+              >
+                <Settings className="w-4 h-4 mr-2" />
+                登出
               </Button>
-              </Link>
             </nav>
           </div>
         </div>

app/page.tsx

@@ -120,7 +120,7 @@ export default function HomePage() {
                     分享困擾
                   </Button>
                 </Link>
-                <Link href="/admin">
+                <Link href="/admin/login">
                   <Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
                     <Settings className="w-4 h-4 mr-2" />
                     後台管理