600 lines
25 KiB
TypeScript
600 lines
25 KiB
TypeScript
"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>
|
||
)
|
||
}
|