新增管理者介面

app/admin/page.tsx

@@ -0,0 +1,599 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { 
+  Download, 
+  Eye, 
+  Users, 
+  Heart, 
+  FileText, 
+  BarChart3,
+  RefreshCw,
+  Search,
+  Filter,
+  ArrowLeft,
+  Sparkles,
+  Settings,
+  Plus,
+  ChevronLeft,
+  ChevronRight
+} from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import HeaderMusicControl from "@/components/header-music-control"
+import IpDisplay from "@/components/ip-display"
+
+interface WishData {
+  id: number
+  title: string
+  current_pain: string
+  expected_solution: string
+  expected_effect: string
+  is_public: boolean
+  email: string
+  images: any[]
+  user_session: string
+  status: string
+  category: string
+  priority: number
+  like_count: number
+  created_at: string
+  updated_at: string
+}
+
+interface AdminStats {
+  totalWishes: number
+  publicWishes: number
+  privateWishes: number
+  totalLikes: number
+  categories: { [key: string]: number }
+  recentWishes: number
+}
+
+export default function AdminPage() {
+  const [wishes, setWishes] = useState<WishData[]>([])
+  const [filteredWishes, setFilteredWishes] = useState<WishData[]>([])
+  const [stats, setStats] = useState<AdminStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [visibilityFilter, setVisibilityFilter] = useState("all")
+  const [isExporting, setIsExporting] = useState(false)
+  
+  // 分頁狀態
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 10
+
+  // 獲取所有數據
+  const fetchData = async () => {
+    try {
+      setLoading(true)
+      
+      // 獲取困擾案例數據
+      const wishesResponse = await fetch('/api/admin/wishes')
+      const wishesResult = await wishesResponse.json()
+      
+      if (wishesResult.success) {
+        setWishes(wishesResult.data)
+        setFilteredWishes(wishesResult.data)
+      }
+      
+      // 獲取統計數據
+      const statsResponse = await fetch('/api/admin/stats')
+      const statsResult = await statsResponse.json()
+      
+      if (statsResult.success) {
+        setStats(statsResult.data)
+      }
+      
+    } catch (error) {
+      console.error('獲取數據失敗:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // 過濾數據
+  const filterData = () => {
+    let filtered = wishes
+
+    // 搜索過濾
+    if (searchTerm) {
+      filtered = filtered.filter(wish => 
+        wish.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        wish.current_pain.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        wish.expected_solution.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    }
+
+    // 狀態過濾
+    if (statusFilter !== "all") {
+      filtered = filtered.filter(wish => wish.status === statusFilter)
+    }
+
+    // 可見性過濾
+    if (visibilityFilter !== "all") {
+      filtered = filtered.filter(wish => 
+        visibilityFilter === "public" ? wish.is_public : !wish.is_public
+      )
+    }
+
+    setFilteredWishes(filtered)
+    setCurrentPage(1) // 重置到第一頁
+  }
+
+  // 分頁計算
+  const totalPages = Math.ceil(filteredWishes.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentWishes = filteredWishes.slice(startIndex, endIndex)
+
+  // 分頁組件
+  const PaginationComponent = () => {
+    if (totalPages <= 1) return null
+
+    const getPageNumbers = () => {
+      const pages = []
+      const maxVisiblePages = 5
+      
+      if (totalPages <= maxVisiblePages) {
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push(i)
+        }
+      } else {
+        if (currentPage <= 3) {
+          for (let i = 1; i <= 4; i++) {
+            pages.push(i)
+          }
+          pages.push('...')
+          pages.push(totalPages)
+        } else if (currentPage >= totalPages - 2) {
+          pages.push(1)
+          pages.push('...')
+          for (let i = totalPages - 3; i <= totalPages; i++) {
+            pages.push(i)
+          }
+        } else {
+          pages.push(1)
+          pages.push('...')
+          for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+            pages.push(i)
+          }
+          pages.push('...')
+          pages.push(totalPages)
+        }
+      }
+      
+      return pages
+    }
+
+    return (
+      <div className="flex items-center justify-between mt-6">
+        <div className="text-sm text-blue-300">
+          顯示第 {startIndex + 1} - {Math.min(endIndex, filteredWishes.length)} 筆，共 {filteredWishes.length} 筆
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+            disabled={currentPage === 1}
+            className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+          
+          {getPageNumbers().map((page, index) => (
+            <Button
+              key={index}
+              variant={page === currentPage ? "default" : "outline"}
+              size="sm"
+              onClick={() => typeof page === 'number' && setCurrentPage(page)}
+              disabled={page === '...'}
+              className={
+                page === currentPage
+                  ? "bg-cyan-600 hover:bg-cyan-700 text-white"
+                  : "text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
+              }
+            >
+              {page}
+            </Button>
+          ))}
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+            disabled={currentPage === totalPages}
+            className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
+          >
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // 匯出 CSV
+  const exportToCSV = async () => {
+    try {
+      setIsExporting(true)
+      
+      const response = await fetch('/api/admin/export-csv', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          data: filteredWishes,
+          filename: `困擾案例數據_${new Date().toISOString().split('T')[0]}.csv`
+        })
+      })
+
+      if (response.ok) {
+        const blob = await response.blob()
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `困擾案例數據_${new Date().toISOString().split('T')[0]}.csv`
+        document.body.appendChild(a)
+        a.click()
+        window.URL.revokeObjectURL(url)
+        document.body.removeChild(a)
+      } else {
+        throw new Error('匯出失敗')
+      }
+    } catch (error) {
+      console.error('匯出 CSV 失敗:', error)
+      alert('匯出失敗，請稍後再試')
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  useEffect(() => {
+    filterData()
+  }, [searchTerm, statusFilter, visibilityFilter, wishes])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+        <div className="text-center">
+          <RefreshCw className="w-8 h-8 animate-spin text-white mx-auto mb-4" />
+          <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">
+      {/* 星空背景 */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-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-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 區域 */}
+            <div 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>
+            </div>
+
+            {/* 導航區域 */}
+            <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>
+
+              {/* 返回按鈕 */}
+              <Link href="/">
+                <Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  返回首頁
+                </Button>
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* 主要內容 */}
+      <main className="relative z-10 py-8">
+        <div className="container mx-auto px-3 sm:px-4">
+          {/* 標題區域 */}
+          <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>
+
+          {/* 統計卡片 */}
+          {stats && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-8">
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium text-blue-200">總案例數</CardTitle>
+                  <FileText className="h-4 w-4 text-cyan-400" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold text-white">{stats.totalWishes}</div>
+                  <p className="text-xs text-blue-300">
+                    公開 {stats.publicWishes} + 私密 {stats.privateWishes}
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium text-blue-200">總點讚數</CardTitle>
+                  <Heart className="h-4 w-4 text-pink-400" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold text-white">{stats.totalLikes}</div>
+                  <p className="text-xs text-blue-300">用戶支持總數</p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium text-blue-200">問題領域</CardTitle>
+                  <BarChart3 className="h-4 w-4 text-green-400" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold text-white">{Object.keys(stats.categories).length}</div>
+                  <p className="text-xs text-blue-300">不同類別</p>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium text-blue-200">本週新增</CardTitle>
+                  <Users className="h-4 w-4 text-yellow-400" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold text-white">{stats.recentWishes}</div>
+                  <p className="text-xs text-blue-300">最近7天</p>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* 主要內容區域 */}
+          <Tabs defaultValue="data" className="space-y-6">
+            <TabsList className="grid w-full grid-cols-2 bg-slate-800/50 border-slate-700/50">
+              <TabsTrigger value="data" className="text-blue-200 data-[state=active]:text-white data-[state=active]:bg-slate-700/50">數據管理</TabsTrigger>
+              <TabsTrigger value="analytics" className="text-blue-200 data-[state=active]:text-white data-[state=active]:bg-slate-700/50">數據分析</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="data" className="space-y-6">
+              {/* 搜索和過濾區域 */}
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
+                <CardHeader>
+                  <CardTitle className="text-white flex items-center gap-2">
+                    <Filter className="w-5 h-5 text-cyan-400" />
+                    數據篩選
+                  </CardTitle>
+                  <CardDescription className="text-blue-200">
+                    搜索和過濾困擾案例數據
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div className="relative">
+                      <Search className="absolute left-3 top-3 h-4 w-4 text-blue-400" />
+                      <Input
+                        placeholder="搜索標題或內容..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="pl-10 bg-slate-700/50 border-slate-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400/50"
+                      />
+                    </div>
+                    
+                    <Select value={statusFilter} onValueChange={setStatusFilter}>
+                      <SelectTrigger className="bg-slate-700/50 border-slate-600/50 text-white focus:border-cyan-400/50">
+                        <SelectValue placeholder="狀態" />
+                      </SelectTrigger>
+                      <SelectContent className="bg-slate-800 border-slate-700">
+                        <SelectItem value="all" className="text-white">所有狀態</SelectItem>
+                        <SelectItem value="active" className="text-white">活躍</SelectItem>
+                        <SelectItem value="inactive" className="text-white">非活躍</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <Select value={visibilityFilter} onValueChange={setVisibilityFilter}>
+                      <SelectTrigger className="bg-slate-700/50 border-slate-600/50 text-white focus:border-cyan-400/50">
+                        <SelectValue placeholder="可見性" />
+                      </SelectTrigger>
+                      <SelectContent className="bg-slate-800 border-slate-700">
+                        <SelectItem value="all" className="text-white">全部</SelectItem>
+                        <SelectItem value="public" className="text-white">公開</SelectItem>
+                        <SelectItem value="private" className="text-white">私密</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <Button 
+                      onClick={exportToCSV} 
+                      disabled={isExporting}
+                      className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-lg shadow-green-500/25"
+                    >
+                      {isExporting ? (
+                        <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                      ) : (
+                        <Download className="w-4 h-4 mr-2" />
+                      )}
+                      匯出 CSV
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* 數據表格 */}
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
+                <CardHeader>
+                  <CardTitle className="text-white flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-cyan-400" />
+                    困擾案例列表
+                  </CardTitle>
+                  <CardDescription className="text-blue-200">
+                    共 {filteredWishes.length} 筆數據
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-slate-600/50">
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">ID</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">標題</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">狀態</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">可見性</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">點讚數</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">創建時間</th>
+                          <th className="text-left py-3 px-4 text-blue-200 font-medium">操作</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {currentWishes.map((wish) => (
+                          <tr key={wish.id} className="border-b border-slate-700/30 hover:bg-slate-700/30 transition-colors">
+                            <td className="py-3 px-4 text-white font-mono text-xs">{wish.id}</td>
+                            <td className="py-3 px-4 text-white max-w-xs truncate" title={wish.title}>
+                              {wish.title}
+                            </td>
+                            <td className="py-3 px-4">
+                              <Badge 
+                                variant={wish.status === 'active' ? 'default' : 'secondary'}
+                                className={wish.status === 'active' 
+                                  ? 'bg-green-600/20 text-green-300 border-green-500/30' 
+                                  : 'bg-slate-600/20 text-slate-300 border-slate-500/30'
+                                }
+                              >
+                                {wish.status === 'active' ? '活躍' : '非活躍'}
+                              </Badge>
+                            </td>
+                            <td className="py-3 px-4">
+                              <Badge 
+                                variant={wish.is_public ? 'default' : 'outline'}
+                                className={wish.is_public 
+                                  ? 'bg-blue-600/20 text-blue-300 border-blue-500/30' 
+                                  : 'bg-orange-600/20 text-orange-300 border-orange-500/30'
+                                }
+                              >
+                                {wish.is_public ? '公開' : '私密'}
+                              </Badge>
+                            </td>
+                            <td className="py-3 px-4 text-white flex items-center gap-1">
+                              <Heart className="w-3 h-3 text-pink-400" />
+                              {wish.like_count}
+                            </td>
+                            <td className="py-3 px-4 text-blue-300 text-xs">
+                              {new Date(wish.created_at).toLocaleDateString('zh-TW')}
+                            </td>
+                            <td className="py-3 px-4">
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
+                              >
+                                <Eye className="w-4 h-4 mr-1" />
+                                查看
+                              </Button>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  
+                  {/* 分頁組件 */}
+                  <PaginationComponent />
+                </CardContent>
+              </Card>
+          </TabsContent>
+
+            <TabsContent value="analytics" className="space-y-6">
+              <Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
+                <CardHeader>
+                  <CardTitle className="text-white flex items-center gap-2">
+                    <BarChart3 className="w-5 h-5 text-cyan-400" />
+                    數據分析
+                  </CardTitle>
+                  <CardDescription className="text-blue-200">
+                    困擾案例統計與分析
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* 類別分布 */}
+                    <div>
+                      <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                        <FileText className="w-4 h-4 text-green-400" />
+                        問題類別分布
+                      </h3>
+                      <div className="space-y-3">
+                        {stats && Object.entries(stats.categories).map(([category, count]) => (
+                          <div key={category} className="flex justify-between items-center p-3 bg-slate-700/30 rounded-lg">
+                            <span className="text-white">{category}</span>
+                            <Badge 
+                              variant="outline" 
+                              className="bg-cyan-600/20 text-cyan-300 border-cyan-500/30"
+                            >
+                              {count}
+                            </Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 時間分布 */}
+                    <div>
+                      <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                        <Users className="w-4 h-4 text-yellow-400" />
+                        創建時間分布
+                      </h3>
+                      <div className="space-y-4">
+                        <div className="p-4 bg-slate-700/30 rounded-lg">
+                          <div className="text-2xl font-bold text-white mb-1">{stats?.recentWishes}</div>
+                          <div className="text-blue-300 text-sm">最近7天新增</div>
+                        </div>
+                        <div className="p-4 bg-slate-700/30 rounded-lg">
+                          <div className="text-2xl font-bold text-white mb-1">{stats?.totalWishes}</div>
+                          <div className="text-blue-300 text-sm">總案例數</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </main>
+    </div>
+  )
+}

app/api/admin/export-csv/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { data, filename } = body
+    
+    console.log(`🔍 後台管理 - 匯出 CSV: ${filename}`)
+    
+    // 準備 CSV 數據
+    const headers = [
+      'ID',
+      '標題',
+      '遇到的困擾',
+      '期望的解決方式',
+      '預期效果',
+      '是否公開',
+      '電子郵件',
+      '狀態',
+      '類別',
+      '優先級',
+      '點讚數',
+      '創建時間',
+      '更新時間',
+      '用戶會話'
+    ]
+    
+    // 轉換數據為 CSV 格式
+    const csvRows = [headers.join(',')]
+    
+    data.forEach((wish: any) => {
+      const row = [
+        wish.id,
+        `"${wish.title.replace(/"/g, '""')}"`,
+        `"${wish.current_pain.replace(/"/g, '""')}"`,
+        `"${wish.expected_solution.replace(/"/g, '""')}"`,
+        `"${(wish.expected_effect || '').replace(/"/g, '""')}"`,
+        wish.is_public ? '是' : '否',
+        `"${(wish.email || '').replace(/"/g, '""')}"`,
+        wish.status === 'active' ? '活躍' : '非活躍',
+        `"${(wish.category || '未分類').replace(/"/g, '""')}"`,
+        wish.priority,
+        wish.like_count,
+        `"${new Date(wish.created_at).toLocaleString('zh-TW')}"`,
+        `"${new Date(wish.updated_at).toLocaleString('zh-TW')}"`,
+        `"${wish.user_session.replace(/"/g, '""')}"`
+      ]
+      csvRows.push(row.join(','))
+    })
+    
+    const csvContent = csvRows.join('\n')
+    const csvBuffer = Buffer.from(csvContent, 'utf-8')
+    
+    console.log(`✅ 成功生成 CSV 文件: ${data.length} 筆數據`)
+    
+    // 返回文件
+    return new NextResponse(csvBuffer, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/csv; charset=utf-8',
+        'Content-Disposition': `attachment; filename="${encodeURIComponent(filename)}"`,
+        'Content-Length': csvBuffer.length.toString()
+      }
+    })
+    
+  } catch (error) {
+    console.error('CSV 匯出錯誤:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to export CSV' },
+      { status: 500 }
+    )
+  }
+}

app/api/admin/export-excel/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { data, filename } = body
+    
+    console.log(`🔍 後台管理 - 匯出 Excel: ${filename}`)
+    
+    // 動態導入 xlsx
+    const XLSX = await import('xlsx')
+    
+    // 準備 Excel 數據
+    const excelData = data.map((wish: any) => ({
+      'ID': wish.id,
+      '標題': wish.title,
+      '遇到的困擾': wish.current_pain,
+      '期望的解決方式': wish.expected_solution,
+      '預期效果': wish.expected_effect || '',
+      '是否公開': wish.is_public ? '是' : '否',
+      '電子郵件': wish.email || '',
+      '狀態': wish.status === 'active' ? '活躍' : '非活躍',
+      '類別': wish.category || '未分類',
+      '優先級': wish.priority,
+      '點讚數': wish.like_count,
+      '創建時間': new Date(wish.created_at).toLocaleString('zh-TW'),
+      '更新時間': new Date(wish.updated_at).toLocaleString('zh-TW'),
+      '用戶會話': wish.user_session
+    }))
+    
+    // 創建工作簿
+    const workbook = XLSX.utils.book_new()
+    
+    // 創建工作表
+    const worksheet = XLSX.utils.json_to_sheet(excelData)
+    
+    // 設置列寬
+    const columnWidths = [
+      { wch: 8 },   // ID
+      { wch: 30 },  // 標題
+      { wch: 40 },  // 遇到的困擾
+      { wch: 40 },  // 期望的解決方式
+      { wch: 30 },  // 預期效果
+      { wch: 10 },  // 是否公開
+      { wch: 25 },  // 電子郵件
+      { wch: 10 },  // 狀態
+      { wch: 15 },  // 類別
+      { wch: 8 },   // 優先級
+      { wch: 8 },   // 點讚數
+      { wch: 20 },  // 創建時間
+      { wch: 20 },  // 更新時間
+      { wch: 25 }   // 用戶會話
+    ]
+    worksheet['!cols'] = columnWidths
+    
+    // 添加工作表到工作簿
+    XLSX.utils.book_append_sheet(workbook, worksheet, '困擾案例數據')
+    
+    // 生成 Excel 文件
+    const excelBuffer = XLSX.write(workbook, { 
+      type: 'buffer', 
+      bookType: 'xlsx' 
+    })
+    
+    console.log(`✅ 成功生成 Excel 文件: ${excelData.length} 筆數據`)
+    
+    // 返回文件
+    return new NextResponse(excelBuffer, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'Content-Disposition': `attachment; filename="${encodeURIComponent(filename)}"`,
+        'Content-Length': excelBuffer.length.toString()
+      }
+    })
+    
+  } catch (error) {
+    console.error('Excel 匯出錯誤:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to export Excel' },
+      { status: 500 }
+    )
+  }
+}

app/api/admin/stats/route.ts

@@ -0,0 +1,107 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+export async function GET(request: NextRequest) {
+  try {
+    console.log('🔍 後台管理 - 獲取統計數據...')
+    
+    // 獲取基本統計
+    const totalWishes = await prisma.wish.count({
+      where: { status: 'active' }
+    })
+    
+    const publicWishes = await prisma.wish.count({
+      where: { 
+        status: 'active',
+        isPublic: true 
+      }
+    })
+    
+    const privateWishes = totalWishes - publicWishes
+    
+    // 獲取總點讚數
+    const totalLikes = await prisma.wishLike.count()
+    
+    // 獲取本週新增（最近7天）
+    const oneWeekAgo = new Date()
+    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
+    
+    const recentWishes = await prisma.wish.count({
+      where: {
+        status: 'active',
+        createdAt: {
+          gte: oneWeekAgo
+        }
+      }
+    })
+    
+    // 獲取所有困擾案例進行自動分類
+    const allWishes = await prisma.wish.findMany({
+      where: { 
+        status: 'active'
+      },
+      select: {
+        id: true,
+        title: true,
+        currentPain: true,
+        expectedSolution: true,
+        category: true
+      }
+    })
+    
+    // 導入分類函數
+    const { categorizeWishMultiple } = await import('@/lib/categorization')
+    
+    // 對每個困擾案例進行分類
+    const categories: { [key: string]: number } = {}
+    
+    allWishes.forEach(wish => {
+      // 如果資料庫中已有分類，使用資料庫的分類
+      if (wish.category && wish.category !== 'NULL' && wish.category !== '') {
+        categories[wish.category] = (categories[wish.category] || 0) + 1
+      } else {
+        // 否則進行自動分類
+        const wishData = {
+          title: wish.title,
+          currentPain: wish.currentPain,
+          expectedSolution: wish.expectedSolution
+        }
+        
+        const categories_result = categorizeWishMultiple(wishData)
+        if (categories_result.length > 0) {
+          // 使用第一個分類的名稱，但排除「其他問題」
+          const primaryCategory = categories_result[0].name
+          if (primaryCategory !== '其他問題') {
+            categories[primaryCategory] = (categories[primaryCategory] || 0) + 1
+          }
+        }
+        // 注意：不統計「其他問題」和「未分類」的案例
+      }
+    })
+    
+    const stats = {
+      totalWishes,
+      publicWishes,
+      privateWishes,
+      totalLikes,
+      recentWishes,
+      categories
+    }
+    
+    console.log(`✅ 成功獲取統計數據: 總計 ${totalWishes} 個困擾案例`)
+    
+    return NextResponse.json({ 
+      success: true, 
+      data: stats 
+    })
+    
+  } catch (error) {
+    console.error('後台管理統計 API Error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch admin stats' },
+      { status: 500 }
+    )
+  }
+}

app/api/admin/wishes/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+export async function GET(request: NextRequest) {
+  try {
+    console.log('🔍 後台管理 - 獲取所有困擾案例數據...')
+    
+    // 獲取所有困擾案例（包含私密的）
+    const wishes = await prisma.$queryRaw`
+      SELECT id, title, current_pain, expected_solution, expected_effect, 
+             is_public, email, images, user_session, status, category, priority,
+             created_at, updated_at
+      FROM wishes 
+      WHERE status = 'active'
+      ORDER BY id DESC
+      LIMIT 1000
+    `
+    
+    // 獲取點讚數
+    const wishIds = (wishes as any[]).map(w => w.id)
+    const likeCountMap = {}
+    
+    if (wishIds.length > 0) {
+      const likes = await prisma.wishLike.findMany({
+        where: {
+          wishId: { in: wishIds }
+        },
+        select: {
+          wishId: true
+        }
+      })
+      
+      // 計算點讚數
+      likes.forEach(like => {
+        likeCountMap[Number(like.wishId)] = (likeCountMap[Number(like.wishId)] || 0) + 1
+      })
+    }
+    
+    // 轉換數據格式
+    const formattedWishes = (wishes as any[]).map((wish) => ({
+      id: Number(wish.id),
+      title: wish.title,
+      current_pain: wish.current_pain,
+      expected_solution: wish.expected_solution,
+      expected_effect: wish.expected_effect,
+      is_public: Boolean(wish.is_public),
+      email: wish.email,
+      images: wish.images,
+      user_session: wish.user_session,
+      status: wish.status,
+      category: wish.category,
+      priority: Number(wish.priority),
+      like_count: likeCountMap[Number(wish.id)] || 0,
+      created_at: wish.created_at ? new Date(wish.created_at).toISOString() : new Date().toISOString(),
+      updated_at: wish.updated_at ? new Date(wish.updated_at).toISOString() : new Date().toISOString()
+    }))
+    
+    console.log(`✅ 成功獲取 ${formattedWishes.length} 筆困擾案例數據`)
+    
+    return NextResponse.json({ 
+      success: true, 
+      data: formattedWishes 
+    })
+    
+  } catch (error) {
+    console.error('後台管理 API Error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch admin data' },
+      { status: 500 }
+    )
+  }
+}

app/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Sparkles, MessageCircle, Users, BarChart3 } from "lucide-react"
+import { Sparkles, MessageCircle, Users, BarChart3, Settings } from "lucide-react"
 import HeaderMusicControl from "@/components/header-music-control"
 import IpDisplay from "@/components/ip-display"
 
@@ -120,6 +120,12 @@ export default function HomePage() {
                     分享困擾
                   </Button>
                 </Link>
+                <Link href="/admin">
+                  <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" />
+                    後台管理
+                  </Button>
+                </Link>
               </div>
 
               {/* 平板版導航 */}