Merge pull request #1713 from ChinoKou/dev

feat: WebUI 添加更新标签页组件以显示可更新插件

Author: SengokuCola

dashboard/src/routes/plugins/UpdatesTab.tsx

@@ -0,0 +1,90 @@
+import type { GitStatus, MaimaiVersion, PluginInfo, PluginLoadProgress, PluginStatsData } from './types'
+import { PluginCard } from './PluginCard'
+
+interface UpdatesTabProps {
+  plugins: PluginInfo[]
+  searchQuery: string
+  categoryFilter: string
+  showCompatibleOnly: boolean
+  gitStatus: GitStatus | null
+  maimaiVersion: MaimaiVersion | null
+  pluginStats: Record<string, PluginStatsData>
+  loadProgress: PluginLoadProgress | null
+  onInstall: (plugin: PluginInfo) => void
+  onUpdate: (plugin: PluginInfo) => void
+  onUninstall: (plugin: PluginInfo) => void
+  checkPluginCompatibility: (plugin: PluginInfo) => boolean
+  needsUpdate: (plugin: PluginInfo) => boolean
+  getStatusBadge: (plugin: PluginInfo) => React.JSX.Element | null
+  getIncompatibleReason: (plugin: PluginInfo) => string | null
+}
+
+export function UpdatesTab({
+  plugins,
+  searchQuery,
+  categoryFilter,
+  showCompatibleOnly,
+  gitStatus,
+  maimaiVersion,
+  pluginStats,
+  loadProgress,
+  onInstall,
+  onUpdate,
+  onUninstall,
+  checkPluginCompatibility,
+  needsUpdate,
+  getStatusBadge,
+  getIncompatibleReason,
+}: UpdatesTabProps) {
+  // 过滤可更新插件
+  const filteredPlugins = plugins.filter(plugin => {
+    // 跳过没有 manifest 的插件
+    if (!plugin.manifest) {
+      return false
+    }
+    
+    // 只显示已安装且可更新
+    if (!plugin.installed || !needsUpdate(plugin)) {
+      return false
+    }
+    
+    // 搜索过滤
+    const matchesSearch = searchQuery === '' ||
+      plugin.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      plugin.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (plugin.manifest.keywords && plugin.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
+    
+    // 分类过滤
+    const matchesCategory = categoryFilter === 'all' ||
+      (plugin.manifest.categories && plugin.manifest.categories.includes(categoryFilter))
+    
+    // 兼容性过滤
+    const matchesCompatibility = !showCompatibleOnly || 
+      !maimaiVersion || 
+      checkPluginCompatibility(plugin)
+    
+    return matchesSearch && matchesCategory && matchesCompatibility
+  })
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-5">
+      {filteredPlugins.map((plugin) => (
+        <PluginCard
+          key={plugin.id}
+          plugin={plugin}
+          gitStatus={gitStatus}
+          maimaiVersion={maimaiVersion}
+          pluginStats={pluginStats}
+          loadProgress={loadProgress}
+          onInstall={onInstall}
+          onUpdate={onUpdate}
+          onUninstall={onUninstall}
+          checkPluginCompatibility={checkPluginCompatibility}
+          needsUpdate={needsUpdate}
+          getStatusBadge={getStatusBadge}
+          getIncompatibleReason={getIncompatibleReason}
+        />
+      ))}
+    </div>
+  )
+}

dashboard/src/routes/plugins/index.tsx

@@ -38,6 +38,7 @@ import {
 import { InstallDialog } from './InstallDialog'
 import { InstalledTab } from './InstalledTab'
 import { MarketplaceTab } from './MarketplaceTab'
+import { UpdatesTab } from './UpdatesTab'
 import type { GitStatus, MaimaiVersion, MarketplaceSortKey, PluginInfo, PluginLoadProgress } from './types'
 
 // 主导出组件：包装 RestartProvider
@@ -712,25 +713,6 @@ function PluginsPageContent() {
     }).length
   }
 
-  // 过滤插件用于可更新标签页
-  const filteredUpdatablePlugins = plugins.filter(plugin => {
-    if (!plugin.manifest) return false
-    
-    const matchesSearch = searchQuery === '' ||
-      plugin.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      plugin.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      (plugin.manifest.keywords && plugin.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
-    
-    const matchesCategory = categoryFilter === 'all' ||
-      (plugin.manifest.categories && plugin.manifest.categories.includes(categoryFilter))
-    
-    const matchesCompatibility = !showCompatibleOnly || 
-      !maimaiVersion || 
-      checkPluginCompatibility(plugin)
-    
-    return plugin.installed && needsUpdate(plugin) && matchesSearch && matchesCategory && matchesCompatibility
-  })
-
   return (
     <ScrollArea className="h-full">
       <div className="space-y-6 p-4 sm:p-6">
@@ -969,15 +951,25 @@ function PluginsPageContent() {
             getStatusBadge={getStatusBadge}
             getIncompatibleReason={getIncompatibleReason}
           />
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredUpdatablePlugins.map((plugin) => (
-              <div key={plugin.id}>
-                {/* PluginCard would go here */}
-              </div>
-            ))}
-          </div>
-        )}
+        ) : activeTab === 'updates' ? (
+          <UpdatesTab
+            plugins={plugins}
+            searchQuery={searchQuery}
+            categoryFilter={categoryFilter}
+            showCompatibleOnly={showCompatibleOnly}
+            gitStatus={gitStatus}
+            maimaiVersion={maimaiVersion}
+            pluginStats={pluginStats}
+            loadProgress={loadProgress}
+            onInstall={openInstallDialog}
+            onUpdate={handleUpdate}
+            onUninstall={handleUninstall}
+            checkPluginCompatibility={checkPluginCompatibility}
+            needsUpdate={needsUpdate}
+            getStatusBadge={getStatusBadge}
+            getIncompatibleReason={getIncompatibleReason}
+          />
+        ) : null}
 
         {/* 安装对话框 */}
         <InstallDialog