351 lines
14 KiB
TypeScript
351 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { useAuth } from "@/contexts/auth-context"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Heart, ExternalLink, Star, Eye, ThumbsUp, MessageSquare, Brain, ImageIcon, Mic, MessageSquare as MessageSquareIcon, Settings, Zap, TrendingUp, Target, Users, Lightbulb, Search, Database, BarChart3, Camera, Smartphone, Monitor, Globe, FileText, Bot } from "lucide-react"
|
||
|
||
export function FavoritesPage() {
|
||
const { user } = useAuth()
|
||
const [sortBy, setSortBy] = useState("favorited")
|
||
const [filterDepartment, setFilterDepartment] = useState("all")
|
||
const [favoriteApps, setFavoriteApps] = useState<any[]>([])
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const [totalPages, setTotalPages] = useState(1)
|
||
|
||
// 載入收藏列表
|
||
const loadFavorites = async (page: number = 1) => {
|
||
if (!user) return
|
||
|
||
setIsLoading(true)
|
||
try {
|
||
const response = await fetch(`/api/user/favorites?userId=${user.id}&page=${page}&limit=12`)
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
setFavoriteApps(data.data.apps)
|
||
setTotalPages(data.data.pagination.totalPages)
|
||
setCurrentPage(page)
|
||
}
|
||
} catch (error) {
|
||
console.error('載入收藏列表錯誤:', error)
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
// 初始載入
|
||
useEffect(() => {
|
||
if (user) {
|
||
loadFavorites()
|
||
}
|
||
}, [user])
|
||
|
||
const handleUseApp = async (app: any) => {
|
||
|
||
try {
|
||
// Increment view count when using the app
|
||
if (user) {
|
||
const response = await fetch(`/api/apps/${app.id}/interactions`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'view',
|
||
userId: user.id
|
||
})
|
||
})
|
||
|
||
if (response.ok) {
|
||
// 記錄用戶活動
|
||
try {
|
||
const activityResponse = await fetch('/api/user/activity', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
userId: user.id,
|
||
action: 'view',
|
||
resourceType: 'app',
|
||
resourceId: app.id,
|
||
details: {
|
||
appName: app.name,
|
||
timestamp: new Date().toISOString()
|
||
}
|
||
})
|
||
})
|
||
|
||
if (activityResponse.ok) {
|
||
} else {
|
||
console.error('活動記錄失敗:', activityResponse.status, activityResponse.statusText)
|
||
}
|
||
} catch (error) {
|
||
console.error('記錄活動失敗:', error)
|
||
}
|
||
|
||
// Reload favorites to update view count
|
||
await loadFavorites(currentPage)
|
||
} else {
|
||
console.error('增加查看次數失敗:', response.status, response.statusText)
|
||
}
|
||
} else {
|
||
}
|
||
} catch (error) {
|
||
console.error('增加查看次數失敗:', error)
|
||
}
|
||
|
||
// Open app in new tab
|
||
if (app.appUrl) {
|
||
const url = app.appUrl.startsWith('http') ? app.appUrl : `https://${app.appUrl}`
|
||
window.open(url, "_blank", "noopener,noreferrer")
|
||
} else {
|
||
}
|
||
}
|
||
|
||
// 圖標映射函數
|
||
const getIconComponent = (iconName: string) => {
|
||
const iconMap: { [key: string]: any } = {
|
||
'Bot': Bot,
|
||
'Brain': Brain,
|
||
'ImageIcon': ImageIcon,
|
||
'Mic': Mic,
|
||
'MessageSquare': MessageSquareIcon,
|
||
'Settings': Settings,
|
||
'Zap': Zap,
|
||
'TrendingUp': TrendingUp,
|
||
'Star': Star,
|
||
'Heart': Heart,
|
||
'Eye': Eye,
|
||
'Target': Target,
|
||
'Users': Users,
|
||
'Lightbulb': Lightbulb,
|
||
'Search': Search,
|
||
'Database': Database,
|
||
'BarChart3': BarChart3,
|
||
'Camera': Camera,
|
||
'Smartphone': Smartphone,
|
||
'Monitor': Monitor,
|
||
'Globe': Globe,
|
||
'FileText': FileText,
|
||
}
|
||
return iconMap[iconName] || Bot
|
||
}
|
||
|
||
const getTypeColor = (type: string) => {
|
||
const colors = {
|
||
文字處理: "bg-blue-100 text-blue-800 border-blue-200",
|
||
圖像生成: "bg-purple-100 text-purple-800 border-purple-200",
|
||
語音辨識: "bg-green-100 text-green-800 border-green-200",
|
||
推薦系統: "bg-orange-100 text-orange-800 border-orange-200",
|
||
音樂生成: "bg-pink-100 text-pink-800 border-pink-200",
|
||
程式開發: "bg-indigo-100 text-indigo-800 border-indigo-200",
|
||
影像處理: "bg-cyan-100 text-cyan-800 border-cyan-200",
|
||
對話系統: "bg-teal-100 text-teal-800 border-teal-200",
|
||
數據分析: "bg-yellow-100 text-yellow-800 border-yellow-200",
|
||
設計工具: "bg-rose-100 text-rose-800 border-rose-200",
|
||
語音技術: "bg-emerald-100 text-emerald-800 border-emerald-200",
|
||
教育工具: "bg-violet-100 text-violet-800 border-violet-200",
|
||
}
|
||
return colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800 border-gray-200"
|
||
}
|
||
|
||
const filteredAndSortedApps = favoriteApps
|
||
.filter((app) => filterDepartment === "all" || app.department === filterDepartment)
|
||
.sort((a, b) => {
|
||
switch (sortBy) {
|
||
case "name":
|
||
return a.name.localeCompare(b.name)
|
||
case "creator":
|
||
return a.creator.localeCompare(b.creator)
|
||
case "department":
|
||
return a.department.localeCompare(b.department)
|
||
case "favorited":
|
||
return new Date(b.favoritedAt).getTime() - new Date(a.favoritedAt).getTime()
|
||
default:
|
||
return 0
|
||
}
|
||
})
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Stats */}
|
||
<div className="flex items-center justify-end">
|
||
<div className="text-sm text-gray-500">
|
||
共 {favoriteApps.length} 個收藏
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter and Sort Controls */}
|
||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
<Select value={filterDepartment} onValueChange={setFilterDepartment}>
|
||
<SelectTrigger className="w-48">
|
||
<SelectValue placeholder="選擇部門" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">所有部門</SelectItem>
|
||
<SelectItem value="ACBU">ACBU</SelectItem>
|
||
<SelectItem value="AUBU">AUBU</SelectItem>
|
||
<SelectItem value="FAB3">FAB3</SelectItem>
|
||
<SelectItem value="FNBU">FNBU</SelectItem>
|
||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||
<SelectItem value="HRBU">HRBU</SelectItem>
|
||
<SelectItem value="IBU">IBU</SelectItem>
|
||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||
<SelectItem value="PBU">PBU</SelectItem>
|
||
<SelectItem value="SBG">SBG</SelectItem>
|
||
<SelectItem value="SBU">SBU</SelectItem>
|
||
<SelectItem value="法務室">法務室</SelectItem>
|
||
<SelectItem value="關係企業發展">關係企業發展</SelectItem>
|
||
<SelectItem value="稽核室">稽核室</SelectItem>
|
||
<SelectItem value="總經理室">總經理室</SelectItem>
|
||
<SelectItem value="HR">HR</SelectItem>
|
||
<SelectItem value="Finance">Finance</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
<Select value={sortBy} onValueChange={setSortBy}>
|
||
<SelectTrigger className="w-48">
|
||
<SelectValue placeholder="排序方式" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="name">按名稱排序</SelectItem>
|
||
<SelectItem value="creator">按創作者排序</SelectItem>
|
||
<SelectItem value="department">按部門排序</SelectItem>
|
||
<SelectItem value="favorited">按收藏時間排序</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Loading State */}
|
||
{isLoading && (
|
||
<div className="text-center py-12">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-2"></div>
|
||
<p className="text-gray-500">載入收藏列表中...</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Apps Grid */}
|
||
{!isLoading && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredAndSortedApps.map((app) => {
|
||
const IconComponent = getIconComponent(app.icon || 'Heart')
|
||
return (
|
||
<Card key={app.id} className="group hover:shadow-lg transition-all duration-300">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center space-x-3">
|
||
<div className={`w-12 h-12 bg-gradient-to-r ${app.iconColor || 'from-purple-500 to-pink-500'} rounded-lg flex items-center justify-center`}>
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-lg group-hover:text-purple-600 transition-colors">
|
||
{app.name}
|
||
</h3>
|
||
<p className="text-sm text-gray-500">by {app.creator}</p>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleUseApp(app)}
|
||
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
||
>
|
||
<ExternalLink className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-gray-600 mb-4 line-clamp-2">{app.description}</p>
|
||
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
<Badge variant="secondary" className={getTypeColor(app.type)}>
|
||
{app.type}
|
||
</Badge>
|
||
<Badge variant="outline">{app.department}</Badge>
|
||
</div>
|
||
|
||
{/* 統計數據區塊 - 優化佈局 */}
|
||
<div className="space-y-4">
|
||
{/* 評分 - 突出顯示 */}
|
||
<div className="flex items-center justify-center bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg px-4 py-3 border border-yellow-200">
|
||
<Star className="w-5 h-5 text-yellow-500 mr-2" />
|
||
<span className="text-lg font-bold text-gray-800">{Number(app.rating).toFixed(1)}</span>
|
||
<span className="text-sm text-gray-500 ml-1">評分</span>
|
||
</div>
|
||
|
||
{/* 其他統計數據 - 3列佈局 */}
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<div className="flex flex-col items-center space-y-1 text-sm text-gray-600 bg-gray-50 rounded-lg px-2 py-2">
|
||
<Eye className="w-4 h-4 text-blue-500" />
|
||
<span className="font-medium text-base">{app.views}</span>
|
||
<span className="text-xs text-gray-400">瀏覽</span>
|
||
</div>
|
||
<div className="flex flex-col items-center space-y-1 text-sm text-gray-600 bg-gray-50 rounded-lg px-2 py-2">
|
||
<ThumbsUp className="w-4 h-4 text-red-500" />
|
||
<span className="font-medium text-base">{app.likes}</span>
|
||
<span className="text-xs text-gray-400">按讚</span>
|
||
</div>
|
||
<div className="flex flex-col items-center space-y-1 text-sm text-gray-600 bg-gray-50 rounded-lg px-2 py-2">
|
||
<MessageSquare className="w-4 h-4 text-green-500" />
|
||
<span className="font-medium text-base">{app.reviewCount}</span>
|
||
<span className="text-xs text-gray-400">評論</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 使用應用按鈕 */}
|
||
<Button
|
||
onClick={() => handleUseApp(app)}
|
||
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2.5"
|
||
>
|
||
使用應用
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Empty State */}
|
||
{!isLoading && filteredAndSortedApps.length === 0 && (
|
||
<div className="text-center py-12">
|
||
<Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||
<h3 className="text-lg font-semibold text-gray-500 mb-2">還沒有收藏任何應用</h3>
|
||
<p className="text-gray-400">開始探索並收藏您喜歡的 AI 應用吧！</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Pagination */}
|
||
{!isLoading && totalPages > 1 && (
|
||
<div className="flex justify-center space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => loadFavorites(currentPage - 1)}
|
||
disabled={currentPage === 1}
|
||
>
|
||
上一頁
|
||
</Button>
|
||
<span className="flex items-center px-4 text-sm text-gray-500">
|
||
第 {currentPage} 頁，共 {totalPages} 頁
|
||
</span>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => loadFavorites(currentPage + 1)}
|
||
disabled={currentPage === totalPages}
|
||
>
|
||
下一頁
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
} |