修改後臺數據分析架構
This commit is contained in:
@@ -21,12 +21,24 @@ import {
|
||||
Settings,
|
||||
Plus,
|
||||
ChevronLeft,
|
||||
ChevronRight
|
||||
ChevronRight,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Minus,
|
||||
Target,
|
||||
BookOpen,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Shield,
|
||||
EyeOff,
|
||||
HelpCircle
|
||||
} 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"
|
||||
import RadarChart from "@/components/radar-chart"
|
||||
import { categories, categorizeWishMultiple, type Wish } from "@/lib/categorization"
|
||||
|
||||
interface WishData {
|
||||
id: number
|
||||
@@ -46,6 +58,15 @@ interface WishData {
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface CategoryData {
|
||||
name: string
|
||||
count: number
|
||||
percentage: number
|
||||
color: string
|
||||
keywords: string[]
|
||||
description?: string
|
||||
}
|
||||
|
||||
interface AdminStats {
|
||||
totalWishes: number
|
||||
publicWishes: number
|
||||
@@ -53,6 +74,16 @@ interface AdminStats {
|
||||
totalLikes: number
|
||||
categories: { [key: string]: number }
|
||||
recentWishes: number
|
||||
categoryDetails: CategoryData[]
|
||||
recentTrends: {
|
||||
thisWeek: number
|
||||
lastWeek: number
|
||||
growth: number
|
||||
growthLabel: string
|
||||
growthIcon: "up" | "down" | "flat"
|
||||
growthColor: string
|
||||
}
|
||||
topKeywords: { word: string; count: number }[]
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
@@ -64,11 +95,147 @@ export default function AdminPage() {
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [visibilityFilter, setVisibilityFilter] = useState("all")
|
||||
const [isExporting, setIsExporting] = useState(false)
|
||||
const [showCategoryGuide, setShowCategoryGuide] = useState(false)
|
||||
const [showPrivacyDetails, setShowPrivacyDetails] = useState(false)
|
||||
|
||||
// 分頁狀態
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const itemsPerPage = 10
|
||||
|
||||
// 分析許願內容(包含所有數據,包括私密的)
|
||||
const analyzeWishes = (wishList: WishData[]): AdminStats => {
|
||||
const totalWishes = wishList.length
|
||||
const publicWishes = wishList.filter((wish) => wish.is_public !== false).length
|
||||
const privateWishes = wishList.filter((wish) => wish.is_public === false).length
|
||||
const totalLikes = wishList.reduce((sum, wish) => sum + wish.like_count, 0)
|
||||
|
||||
const categoryStats: { [key: string]: number } = {}
|
||||
const keywordCount: { [key: string]: number } = {}
|
||||
|
||||
// 初始化分類統計
|
||||
categories.forEach((cat) => {
|
||||
categoryStats[cat.name] = 0
|
||||
})
|
||||
categoryStats["其他問題"] = 0
|
||||
|
||||
// 分析每個許願(多標籤統計)- 包含所有數據
|
||||
wishList.forEach((wish) => {
|
||||
// 轉換數據格式以匹配 categorization.ts 的 Wish 接口
|
||||
const convertedWish: Wish = {
|
||||
id: wish.id.toString(),
|
||||
title: wish.title,
|
||||
currentPain: wish.current_pain,
|
||||
expectedSolution: wish.expected_solution,
|
||||
expectedEffect: wish.expected_effect || "",
|
||||
createdAt: wish.created_at,
|
||||
isPublic: wish.is_public,
|
||||
email: wish.email,
|
||||
images: wish.images,
|
||||
like_count: wish.like_count || 0,
|
||||
}
|
||||
|
||||
const wishCategories = categorizeWishMultiple(convertedWish)
|
||||
|
||||
wishCategories.forEach((category) => {
|
||||
categoryStats[category.name]++
|
||||
|
||||
// 統計關鍵字
|
||||
if (category.keywords) {
|
||||
const fullText =
|
||||
`${wish.title} ${wish.current_pain} ${wish.expected_solution} ${wish.expected_effect}`.toLowerCase()
|
||||
category.keywords.forEach((keyword: string) => {
|
||||
if (fullText.includes(keyword.toLowerCase())) {
|
||||
keywordCount[keyword] = (keywordCount[keyword] || 0) + 1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 計算百分比和準備數據
|
||||
const categoryDetails: CategoryData[] = categories.map((cat) => ({
|
||||
name: cat.name,
|
||||
count: categoryStats[cat.name] || 0,
|
||||
percentage: totalWishes > 0 ? Math.round(((categoryStats[cat.name] || 0) / totalWishes) * 100) : 0,
|
||||
color: cat.color,
|
||||
keywords: cat.keywords,
|
||||
description: cat.description,
|
||||
}))
|
||||
|
||||
// 改進的趨勢計算
|
||||
const now = new Date()
|
||||
const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
|
||||
const twoWeeksAgo = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const thisWeek = wishList.filter((wish) => new Date(wish.created_at) >= oneWeekAgo).length
|
||||
const lastWeek = wishList.filter((wish) => {
|
||||
const date = new Date(wish.created_at)
|
||||
return date >= twoWeeksAgo && date < oneWeekAgo
|
||||
}).length
|
||||
|
||||
// 改進的成長趨勢計算
|
||||
let growth = 0
|
||||
let growthLabel = "持平"
|
||||
let growthIcon: "up" | "down" | "flat" = "flat"
|
||||
let growthColor = "#6B7280"
|
||||
|
||||
if (lastWeek === 0 && thisWeek > 0) {
|
||||
// 上週沒有,本週有 → 全新開始
|
||||
growth = 100
|
||||
growthLabel = "開始增長"
|
||||
growthIcon = "up"
|
||||
growthColor = "#10B981"
|
||||
} else if (lastWeek === 0 && thisWeek === 0) {
|
||||
// 兩週都沒有
|
||||
growth = 0
|
||||
growthLabel = "尚無數據"
|
||||
growthIcon = "flat"
|
||||
growthColor = "#6B7280"
|
||||
} else if (lastWeek > 0) {
|
||||
// 正常計算成長率
|
||||
growth = Math.round(((thisWeek - lastWeek) / lastWeek) * 100)
|
||||
|
||||
if (growth > 0) {
|
||||
growthLabel = "持續增長"
|
||||
growthIcon = "up"
|
||||
growthColor = "#10B981"
|
||||
} else if (growth < 0) {
|
||||
growthLabel = "有所下降"
|
||||
growthIcon = "down"
|
||||
growthColor = "#EF4444"
|
||||
} else {
|
||||
growthLabel = "保持穩定"
|
||||
growthIcon = "flat"
|
||||
growthColor = "#6B7280"
|
||||
}
|
||||
}
|
||||
|
||||
// 取得熱門關鍵字
|
||||
const topKeywords = Object.entries(keywordCount)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.slice(0, 15)
|
||||
.map(([word, count]) => ({ word, count }))
|
||||
|
||||
return {
|
||||
totalWishes,
|
||||
publicWishes,
|
||||
privateWishes,
|
||||
totalLikes,
|
||||
categories: categoryStats,
|
||||
recentWishes: thisWeek,
|
||||
categoryDetails,
|
||||
recentTrends: {
|
||||
thisWeek,
|
||||
lastWeek,
|
||||
growth,
|
||||
growthLabel,
|
||||
growthIcon,
|
||||
growthColor,
|
||||
},
|
||||
topKeywords,
|
||||
}
|
||||
}
|
||||
|
||||
// 獲取所有數據
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
@@ -79,16 +246,13 @@ export default function AdminPage() {
|
||||
const wishesResult = await wishesResponse.json()
|
||||
|
||||
if (wishesResult.success) {
|
||||
setWishes(wishesResult.data)
|
||||
setFilteredWishes(wishesResult.data)
|
||||
}
|
||||
const wishesData = wishesResult.data
|
||||
setWishes(wishesData)
|
||||
setFilteredWishes(wishesData)
|
||||
|
||||
// 獲取統計數據
|
||||
const statsResponse = await fetch('/api/admin/stats')
|
||||
const statsResult = await statsResponse.json()
|
||||
|
||||
if (statsResult.success) {
|
||||
setStats(statsResult.data)
|
||||
// 使用本地分析函數生成詳細統計
|
||||
const detailedStats = analyzeWishes(wishesData)
|
||||
setStats(detailedStats)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
@@ -537,59 +701,338 @@ export default function AdminPage() {
|
||||
</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>
|
||||
{/* 隱私說明卡片 */}
|
||||
<Card className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50">
|
||||
<CardHeader className="pb-3 md:pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Shield className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="text-base md:text-xl lg:text-2xl text-white truncate">數據隱私說明</CardTitle>
|
||||
<CardDescription className="text-white/90 text-xs md:text-sm lg:text-base">
|
||||
本分析包含所有提交的案例,包括選擇保持私密的困擾
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowPrivacyDetails(!showPrivacyDetails)}
|
||||
className="text-indigo-200 hover:text-white hover:bg-indigo-700/50 px-2 md:px-3 flex-shrink-0 md:hidden"
|
||||
>
|
||||
{showPrivacyDetails ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</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}
|
||||
<div className={`${showPrivacyDetails ? "block" : "hidden"} md:block`}>
|
||||
<CardContent className="pt-0">
|
||||
<div className="grid sm:grid-cols-2 gap-3 md:gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-indigo-200 flex items-center gap-2">
|
||||
<Eye className="w-3 h-3 md:w-4 md:h-4" />
|
||||
公開案例 ({stats?.publicWishes || 0} 個)
|
||||
</h4>
|
||||
<p className="text-indigo-100 text-xs md:text-sm leading-relaxed">
|
||||
這些案例會顯示在「聆聽心聲」頁面,供其他人查看和產生共鳴
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-indigo-200 flex items-center gap-2">
|
||||
<EyeOff className="w-3 h-3 md:w-4 md:h-4" />
|
||||
私密案例 ({stats?.privateWishes || 0} 個)
|
||||
</h4>
|
||||
<p className="text-indigo-100 text-xs md:text-sm leading-relaxed">
|
||||
這些案例保持匿名且私密,僅用於統計分析,幫助了解整體趨勢
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 統計概覽 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6">
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-3 md:p-6 text-center">
|
||||
<div className="w-8 h-8 md:w-12 md:h-12 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<Users className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-xl md:text-3xl font-bold text-white mb-1">{stats?.totalWishes || 0}</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">總案例數</div>
|
||||
<div className="text-xs text-slate-400 mt-1">
|
||||
公開 {stats?.publicWishes || 0} + 私密 {stats?.privateWishes || 0}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-3 md:p-6 text-center">
|
||||
<div className="w-8 h-8 md:w-12 md:h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<TrendingUp className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-xl md:text-3xl font-bold text-white mb-1">{stats?.recentTrends?.thisWeek || 0}</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">本週新增</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-3 md:p-6 text-center">
|
||||
<div className="w-8 h-8 md:w-12 md:h-12 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<Target className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-xl md:text-3xl font-bold text-white mb-1">
|
||||
{stats?.categoryDetails?.filter((c) => c.count > 0).length || 0}
|
||||
</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">問題領域</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-3 md:p-6 text-center">
|
||||
<div
|
||||
className="w-8 h-8 md:w-12 md:h-12 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${stats?.recentTrends?.growthColor || '#6B7280'}80, ${stats?.recentTrends?.growthColor || '#6B7280'}60)`,
|
||||
}}
|
||||
>
|
||||
{stats?.recentTrends?.growthIcon === "up" ? (
|
||||
<TrendingUp className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
) : stats?.recentTrends?.growthIcon === "down" ? (
|
||||
<TrendingDown className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
) : (
|
||||
<Minus className="w-4 h-4 md:w-6 md:h-6 text-white" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xl md:text-3xl font-bold text-white mb-1">
|
||||
{stats?.recentTrends?.growth && stats.recentTrends.growth > 0 ? "+" : ""}
|
||||
{stats?.recentTrends?.growth || 0}%
|
||||
</div>
|
||||
<div className="text-xs md:text-sm" style={{ color: stats?.recentTrends?.growthColor || '#6B7280' }}>
|
||||
{stats?.recentTrends?.growthLabel || "持平"}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400 mt-1">上週: {stats?.recentTrends?.lastWeek || 0} 個</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 分類指南 */}
|
||||
<Card className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<BookOpen className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="text-base md:text-xl lg:text-2xl text-white">問題分類說明</CardTitle>
|
||||
<CardDescription className="text-white/90 text-xs md:text-sm lg:text-base">
|
||||
了解我們如何分類和分析各種職場困擾
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowCategoryGuide(!showCategoryGuide)}
|
||||
className="text-indigo-200 hover:text-white hover:bg-indigo-800/50 self-start sm:self-auto flex-shrink-0"
|
||||
>
|
||||
{showCategoryGuide ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4 mr-1" />
|
||||
收起
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4 mr-1" />
|
||||
展開
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{showCategoryGuide && (
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-3 md:gap-4">
|
||||
{categories.map((category, index) => (
|
||||
<div
|
||||
key={category.name}
|
||||
className="p-3 md:p-4 rounded-lg bg-slate-800/50 border border-slate-600/30 hover:bg-slate-700/60 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start gap-2 md:gap-3 mb-2">
|
||||
<div className="text-lg md:text-2xl">{category.icon}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-semibold text-white text-sm md:text-base">{category.name}</h4>
|
||||
<div
|
||||
className="w-2 h-2 md:w-3 md:h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: category.color }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-xs md:text-sm text-slate-300 leading-relaxed">{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 md:mt-3 pt-2 md:pt-3 border-t border-slate-600/30">
|
||||
<div className="text-xs text-slate-400 mb-2">常見關鍵字:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{category.keywords.slice(0, 6).map((keyword, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 md:px-2 py-0.5 bg-slate-600/50 text-slate-300 border-slate-500/50"
|
||||
>
|
||||
{keyword}
|
||||
</Badge>
|
||||
))}
|
||||
{category.keywords.length > 6 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 md:px-2 py-0.5 bg-slate-600/30 text-slate-400 border-slate-500/30"
|
||||
>
|
||||
+{category.keywords.length - 6}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 手機版:垂直佈局,桌面版:並排佈局 */}
|
||||
<div className="space-y-6 md:space-y-0 lg:grid lg:grid-cols-2 lg:gap-8 md:gap-12">
|
||||
{/* 雷達圖 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-purple-600 to-indigo-700 rounded-full flex items-center justify-center">
|
||||
<BarChart3 className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||
</div>
|
||||
問題分布圖譜
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/90 text-xs md:text-sm">
|
||||
各類職場困擾的完整案例分布(包含私密數據)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64 sm:h-80 md:h-64 lg:h-80 xl:h-96">
|
||||
{stats?.categoryDetails && <RadarChart data={stats.categoryDetails} />}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 分類詳細統計 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-cyan-600 to-blue-700 rounded-full flex items-center justify-center">
|
||||
<Target className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||
</div>
|
||||
完整案例統計
|
||||
<Badge className="bg-gradient-to-r from-pink-700/60 to-purple-700/60 text-white border border-pink-400/50 text-xs px-2 py-1">
|
||||
含私密數據
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/90 text-xs md:text-sm">
|
||||
每個領域的所有案例數量(包含公開和私密案例)
|
||||
{stats?.categoryDetails?.filter((cat) => cat.count > 0).length && (
|
||||
<span className="block text-xs text-slate-400 mt-1">
|
||||
共 {stats.categoryDetails.filter((cat) => cat.count > 0).length} 個活躍分類
|
||||
{stats.categoryDetails.filter((cat) => cat.count > 0).length > 4 && ",可滾動查看全部"}
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 md:space-y-4">
|
||||
<div className="max-h-64 md:max-h-80 overflow-y-auto pr-2 space-y-3 md:space-y-4 scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800">
|
||||
{stats?.categoryDetails
|
||||
?.filter((cat) => cat.count > 0)
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.map((category, index) => (
|
||||
<div
|
||||
key={category.name}
|
||||
className="flex items-center justify-between p-3 md:p-4 rounded-lg bg-slate-700/30 border border-slate-600/30 hover:bg-slate-600/40 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||||
<div className="text-base md:text-xl">
|
||||
{categories.find((cat) => cat.name === category.name)?.icon || "❓"}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-semibold text-white flex items-center gap-2 mb-1">
|
||||
<span className="truncate">{category.name}</span>
|
||||
<div
|
||||
className="w-2 h-2 md:w-3 md:h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: category.color }}
|
||||
></div>
|
||||
{index < 3 && (
|
||||
<span className="text-xs bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-cyan-200 px-1.5 md:px-2 py-0.5 rounded-full border border-cyan-500/30 flex-shrink-0">
|
||||
TOP {index + 1}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs md:text-sm text-slate-300">{category.count} 個案例</div>
|
||||
{category.description && (
|
||||
<div className="text-xs text-slate-400 mt-1 line-clamp-2">{category.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-slate-600/50 text-slate-200 flex-shrink-0 ml-2">
|
||||
{category.percentage}%
|
||||
</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>
|
||||
{/* 滾動提示 */}
|
||||
{stats?.categoryDetails?.filter((cat) => cat.count > 0).length && stats.categoryDetails.filter((cat) => cat.count > 0).length > 4 && (
|
||||
<div className="text-center pt-2 border-t border-slate-600/30">
|
||||
<div className="text-xs text-slate-400 flex items-center justify-center gap-2">
|
||||
<div className="w-1 h-1 bg-slate-400 rounded-full animate-bounce"></div>
|
||||
<span>向下滾動查看更多分類</span>
|
||||
<div
|
||||
className="w-1 h-1 bg-slate-400 rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 熱門關鍵字 */}
|
||||
{stats?.topKeywords && stats.topKeywords.length > 0 && (
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
|
||||
<TrendingUp className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||
</div>
|
||||
最常見的問題關鍵字
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/90 text-xs md:text-sm">
|
||||
在所有案例中最常出現的詞彙,反映團隊面臨的核心挑戰
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
{stats.topKeywords.map((keyword, index) => (
|
||||
<Badge
|
||||
key={keyword.word}
|
||||
variant="secondary"
|
||||
className="bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-cyan-200 border border-cyan-500/30 px-2 md:px-3 py-1 md:py-1.5 text-xs md:text-sm"
|
||||
>
|
||||
{keyword.word} ({keyword.count})
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
# 請將此檔案複製為 .env.local 並確保資料庫連接正常
|
||||
|
||||
# MySQL 資料庫連接
|
||||
DATABASE_TYPE=mysql
|
||||
DATABASE_URL="mysql://wish_pool:Aa123456@mysql.theaken.com:33306/db_wish_pool?schema=public"
|
||||
|
||||
# 應用程式配置
|
||||
|
||||
72
pnpm-lock.yaml
generated
72
pnpm-lock.yaml
generated
@@ -176,6 +176,9 @@ importers:
|
||||
vaul:
|
||||
specifier: ^0.9.6
|
||||
version: 0.9.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
xlsx:
|
||||
specifier: ^0.18.5
|
||||
version: 0.18.5
|
||||
zod:
|
||||
specifier: ^3.24.1
|
||||
version: 3.25.76
|
||||
@@ -1403,6 +1406,10 @@ packages:
|
||||
resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
adler-32@1.3.1:
|
||||
resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
agent-base@7.1.4:
|
||||
resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
|
||||
engines: {node: '>= 14'}
|
||||
@@ -1529,6 +1536,10 @@ packages:
|
||||
caniuse-lite@1.0.30001727:
|
||||
resolution: {integrity: sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==}
|
||||
|
||||
cfb@1.2.2:
|
||||
resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
chalk@5.4.1:
|
||||
resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
|
||||
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
||||
@@ -1583,6 +1594,10 @@ packages:
|
||||
code-block-writer@12.0.0:
|
||||
resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
|
||||
|
||||
codepage@1.15.0:
|
||||
resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
color-convert@2.0.1:
|
||||
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
||||
engines: {node: '>=7.0.0'}
|
||||
@@ -1644,6 +1659,11 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
crc-32@1.2.2:
|
||||
resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
|
||||
engines: {node: '>=0.8'}
|
||||
hasBin: true
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||
engines: {node: '>= 8'}
|
||||
@@ -1922,6 +1942,10 @@ packages:
|
||||
resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
frac@1.1.2:
|
||||
resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
fraction.js@4.3.7:
|
||||
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
|
||||
|
||||
@@ -2826,6 +2850,10 @@ packages:
|
||||
resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
ssf@0.11.2:
|
||||
resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
statuses@2.0.1:
|
||||
resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
|
||||
engines: {node: '>= 0.8'}
|
||||
@@ -3062,6 +3090,14 @@ packages:
|
||||
engines: {node: '>= 8'}
|
||||
hasBin: true
|
||||
|
||||
wmf@1.0.2:
|
||||
resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
word@0.3.0:
|
||||
resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
wrap-ansi@6.2.0:
|
||||
resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
|
||||
engines: {node: '>=8'}
|
||||
@@ -3089,6 +3125,11 @@ packages:
|
||||
utf-8-validate:
|
||||
optional: true
|
||||
|
||||
xlsx@0.18.5:
|
||||
resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
|
||||
engines: {node: '>=0.8'}
|
||||
hasBin: true
|
||||
|
||||
y18n@5.0.8:
|
||||
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -4393,6 +4434,8 @@ snapshots:
|
||||
mime-types: 3.0.1
|
||||
negotiator: 1.0.0
|
||||
|
||||
adler-32@1.3.1: {}
|
||||
|
||||
agent-base@7.1.4: {}
|
||||
|
||||
ajv@6.12.6:
|
||||
@@ -4530,6 +4573,11 @@ snapshots:
|
||||
|
||||
caniuse-lite@1.0.30001727: {}
|
||||
|
||||
cfb@1.2.2:
|
||||
dependencies:
|
||||
adler-32: 1.3.1
|
||||
crc-32: 1.2.2
|
||||
|
||||
chalk@5.4.1: {}
|
||||
|
||||
chokidar@3.6.0:
|
||||
@@ -4590,6 +4638,8 @@ snapshots:
|
||||
|
||||
code-block-writer@12.0.0: {}
|
||||
|
||||
codepage@1.15.0: {}
|
||||
|
||||
color-convert@2.0.1:
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
@@ -4640,6 +4690,8 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.8.3
|
||||
|
||||
crc-32@1.2.2: {}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
dependencies:
|
||||
path-key: 3.1.1
|
||||
@@ -4903,6 +4955,8 @@ snapshots:
|
||||
|
||||
forwarded@0.2.0: {}
|
||||
|
||||
frac@1.1.2: {}
|
||||
|
||||
fraction.js@4.3.7: {}
|
||||
|
||||
fresh@2.0.0: {}
|
||||
@@ -5829,6 +5883,10 @@ snapshots:
|
||||
|
||||
sqlstring@2.3.3: {}
|
||||
|
||||
ssf@0.11.2:
|
||||
dependencies:
|
||||
frac: 1.1.2
|
||||
|
||||
statuses@2.0.1: {}
|
||||
|
||||
statuses@2.0.2: {}
|
||||
@@ -6077,6 +6135,10 @@ snapshots:
|
||||
dependencies:
|
||||
isexe: 2.0.0
|
||||
|
||||
wmf@1.0.2: {}
|
||||
|
||||
word@0.3.0: {}
|
||||
|
||||
wrap-ansi@6.2.0:
|
||||
dependencies:
|
||||
ansi-styles: 4.3.0
|
||||
@@ -6099,6 +6161,16 @@ snapshots:
|
||||
|
||||
ws@8.18.3: {}
|
||||
|
||||
xlsx@0.18.5:
|
||||
dependencies:
|
||||
adler-32: 1.3.1
|
||||
cfb: 1.2.2
|
||||
codepage: 1.15.0
|
||||
crc-32: 1.2.2
|
||||
ssf: 0.11.2
|
||||
wmf: 1.0.2
|
||||
word: 0.3.0
|
||||
|
||||
y18n@5.0.8: {}
|
||||
|
||||
yallist@3.1.1: {}
|
||||
|
||||
Reference in New Issue
Block a user