實作個人收藏、個人活動紀錄

app/page.tsx

@@ -198,6 +198,29 @@ export default function AIShowcasePlatform() {
         setTotalPages(data.data.pagination.totalPages)
         setTotalApps(data.data.pagination.total)
         setDepartments(data.data.departments || [])
+        
+        // 為每個應用載入統計數據
+        if (data.data.apps && data.data.apps.length > 0) {
+          const updatedApps = await Promise.all(
+            data.data.apps.map(async (app: any) => {
+              try {
+                const userId = user?.id
+                const statsResponse = await fetch(`/api/apps/${app.id}/interactions${userId ? `?userId=${userId}` : ''}`)
+                if (statsResponse.ok) {
+                  const statsData = await statsResponse.json()
+                  if (statsData.success) {
+                    console.log(`載入應用 ${app.name} 的統計數據:`, statsData.data)
+                    return { ...app, ...statsData.data }
+                  }
+                }
+              } catch (error) {
+                console.error(`載入應用 ${app.name} 統計數據錯誤:`, error)
+              }
+              return app
+            })
+          )
+          setAiApps(updatedApps)
+        }
       } else {
         console.error('載入應用數據失敗:', data.error)
         setAiApps([])
@@ -306,6 +329,13 @@ export default function AIShowcasePlatform() {
     setShowAppDetail(true)
   }
 
+  const handleAppDetailClose = async () => {
+    setShowAppDetail(false)
+    setSelectedApp(null)
+    // 重新載入應用數據以更新統計信息
+    await loadApps()
+  }
+
   const handleSwitchToForgotPassword = () => {
     setShowLogin(false)
     setShowForgotPassword(true)
@@ -316,8 +346,8 @@ export default function AIShowcasePlatform() {
     setShowLogin(true)
   }
 
-  const handleTryApp = (appId: string) => {
-    incrementViewCount(appId)
+  const handleTryApp = async (appId: string) => {
+    await incrementViewCount(appId)
     addToRecentApps(appId)
     console.log(`Opening app ${appId}`)
   }
@@ -972,17 +1002,18 @@ export default function AIShowcasePlatform() {
                   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {currentApps.map((app) => {
                       const IconComponent = getIconComponent(app.icon || 'Bot')
-                      const likes = getAppLikes(app.id.toString())
-                      const views = getViewCount(app.id.toString())
-                      const rating = getAppRating(app.id.toString())
+                      const likes = Number(app.likesCount) || 0
+                      const views = Number(app.viewsCount) || 0
+                      const rating = Number(app.rating) || 0
+                      const reviewsCount = Number(app.reviewsCount) || 0
 
                       return (
                         <Card key={app.id} className="group hover:shadow-lg transition-all duration-300 border-0 shadow-md">
                           <CardHeader className="pb-3">
                             <div className="flex items-start justify-between">
                               <div className="flex items-center space-x-3">
-                                <div className="w-10 h-10 bg-gradient-to-r from-gray-100 to-gray-200 rounded-lg flex items-center justify-center">
-                                  <IconComponent className="w-5 h-5 text-gray-600" />
+                                <div className={`w-10 h-10 bg-gradient-to-r ${app.iconColor || 'from-gray-100 to-gray-200'} rounded-lg flex items-center justify-center`}>
+                                  <IconComponent className={`w-5 h-5 ${app.iconColor ? 'text-white' : 'text-gray-600'}`} />
                                 </div>
                                 <div>
                                   <CardTitle className="text-base group-hover:text-blue-600 transition-colors">
@@ -991,6 +1022,9 @@ export default function AIShowcasePlatform() {
                                   <p className="text-xs text-gray-500">by {app.creator}</p>
                                 </div>
                               </div>
+                              <div className="flex items-center space-x-2">
+                                <FavoriteButton appId={app.id.toString()} />
+                              </div>
                             </div>
                           </CardHeader>
                           <CardContent className="pt-0">
@@ -1007,7 +1041,12 @@ export default function AIShowcasePlatform() {
                             </div>
                             <div className="flex items-center justify-between">
                               <div className="flex items-center space-x-3 text-xs text-gray-500">
-                                <LikeButton appId={app.id.toString()} size="sm" />
+                                <LikeButton 
+                                  appId={app.id.toString()} 
+                                  size="sm" 
+                                  likeCount={likes} 
+                                  userLiked={app.userLiked}
+                                />
                                 <div className="flex items-center space-x-1">
                                   <Eye className="w-3 h-3" />
                                   <span>{views}</span>
@@ -1016,9 +1055,12 @@ export default function AIShowcasePlatform() {
                                   <Star className="w-3 h-3 text-yellow-500" />
                                   <span>{rating.toFixed(1)}</span>
                                 </div>
+                                <div className="flex items-center space-x-1">
+                                  <MessageSquare className="w-3 h-3" />
+                                  <span>{reviewsCount}</span>
+                                </div>
                               </div>
                               <div className="flex items-center space-x-2">
-                                <FavoriteButton appId={app.id.toString()} />
                                 <Button
                                   size="sm"
                                   variant="outline"
@@ -1054,7 +1096,7 @@ export default function AIShowcasePlatform() {
         )}
 
         {/* App Detail Dialog */}
-        {selectedApp && <AppDetailDialog open={showAppDetail} onOpenChange={setShowAppDetail} app={selectedApp} />}
+        {selectedApp && <AppDetailDialog open={showAppDetail} onOpenChange={handleAppDetailClose} app={selectedApp} />}
 
         {/* Favorites Dialog */}
         <Dialog open={showFavorites} onOpenChange={setShowFavorites}>