1164 lines
46 KiB
TypeScript
1164 lines
46 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { useNavigate } from '@tanstack/react-router'
|
||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import { Search, Download, Star, CheckCircle2, AlertCircle, Loader2, AlertTriangle, RefreshCw, Trash2, Settings2, RotateCw, Info } from 'lucide-react'
|
||
import type { PluginInfo } from '@/types/plugin'
|
||
import { RestartProvider, useRestart } from '@/lib/restart-context'
|
||
import { RestartOverlay } from '@/components/restart-overlay'
|
||
import {
|
||
fetchPluginList,
|
||
checkGitStatus,
|
||
connectPluginProgressWebSocket,
|
||
installPlugin,
|
||
uninstallPlugin,
|
||
updatePlugin,
|
||
getMaimaiVersion,
|
||
isPluginCompatible,
|
||
getInstalledPlugins,
|
||
checkPluginInstalled,
|
||
getInstalledPluginVersion,
|
||
type GitStatus,
|
||
type PluginLoadProgress,
|
||
type MaimaiVersion,
|
||
type InstalledPlugin
|
||
} from '@/lib/plugin-api'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { Progress } from '@/components/ui/progress'
|
||
import { recordPluginDownload, getPluginStats, type PluginStatsData } from '@/lib/plugin-stats'
|
||
|
||
// 分类名称映射
|
||
const CATEGORY_NAMES: Record<string, string> = {
|
||
'Group Management': '群组管理',
|
||
'Entertainment & Interaction': '娱乐互动',
|
||
'Utility Tools': '实用工具',
|
||
'Content Generation': '内容生成',
|
||
'Multimedia': '多媒体',
|
||
'External Integration': '外部集成',
|
||
'Data Analysis & Insights': '数据分析与洞察',
|
||
'Other': '其他',
|
||
}
|
||
|
||
// 主导出组件：包装 RestartProvider
|
||
export function PluginsPage() {
|
||
return (
|
||
<RestartProvider>
|
||
<PluginsPageContent />
|
||
</RestartProvider>
|
||
)
|
||
}
|
||
|
||
// 内部组件：实际内容
|
||
function PluginsPageContent() {
|
||
const navigate = useNavigate()
|
||
const { triggerRestart, isRestarting } = useRestart()
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [categoryFilter, setCategoryFilter] = useState('all')
|
||
const [activeTab, setActiveTab] = useState('all') // all | installed | updates
|
||
const [showCompatibleOnly, setShowCompatibleOnly] = useState(true) // 默认只显示兼容的
|
||
const [plugins, setPlugins] = useState<PluginInfo[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [gitStatus, setGitStatus] = useState<GitStatus | null>(null)
|
||
const [loadProgress, setLoadProgress] = useState<PluginLoadProgress | null>(null)
|
||
const [maimaiVersion, setMaimaiVersion] = useState<MaimaiVersion | null>(null)
|
||
const [, setInstalledPlugins] = useState<InstalledPlugin[]>([])
|
||
const [pluginStats, setPluginStats] = useState<Record<string, PluginStatsData>>({})
|
||
|
||
// 安装对话框状态
|
||
const [installDialogOpen, setInstallDialogOpen] = useState(false)
|
||
const [installingPlugin, setInstallingPlugin] = useState<PluginInfo | null>(null)
|
||
const [selectedBranch, setSelectedBranch] = useState('main')
|
||
const [customBranch, setCustomBranch] = useState('')
|
||
const [branchInputMode, setBranchInputMode] = useState<'preset' | 'custom'>('preset')
|
||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
|
||
|
||
const { toast } = useToast()
|
||
|
||
// 加载插件统计数据
|
||
const loadPluginStats = async (pluginList: PluginInfo[]) => {
|
||
const statsPromises = pluginList.map(async (plugin) => {
|
||
try {
|
||
const stats = await getPluginStats(plugin.id)
|
||
return { id: plugin.id, stats }
|
||
} catch (error) {
|
||
console.warn(`Failed to load stats for ${plugin.id}:`, error)
|
||
return { id: plugin.id, stats: null }
|
||
}
|
||
})
|
||
|
||
const results = await Promise.all(statsPromises)
|
||
const statsMap: Record<string, PluginStatsData> = {}
|
||
|
||
results.forEach(({ id, stats }) => {
|
||
if (stats) {
|
||
statsMap[id] = stats
|
||
}
|
||
})
|
||
|
||
setPluginStats(statsMap)
|
||
}
|
||
|
||
// 统一管理 WebSocket 和数据加载
|
||
useEffect(() => {
|
||
let ws: WebSocket | null = null
|
||
let isUnmounted = false
|
||
|
||
const init = async () => {
|
||
// 1. 先连接 WebSocket（异步获取 token）
|
||
ws = await connectPluginProgressWebSocket(
|
||
(progress) => {
|
||
if (isUnmounted) return
|
||
|
||
setLoadProgress(progress)
|
||
|
||
// 如果加载完成，清除进度
|
||
if (progress.stage === 'success') {
|
||
setTimeout(() => {
|
||
if (!isUnmounted) {
|
||
setLoadProgress(null)
|
||
}
|
||
}, 2000)
|
||
} else if (progress.stage === 'error') {
|
||
setLoading(false)
|
||
setError(progress.error || '加载失败')
|
||
}
|
||
},
|
||
(error) => {
|
||
console.error('WebSocket error:', error)
|
||
if (!isUnmounted) {
|
||
toast({
|
||
title: 'WebSocket 连接失败',
|
||
description: '无法实时显示加载进度',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
)
|
||
|
||
// 2. 等待 WebSocket 连接建立
|
||
await new Promise<void>((resolve) => {
|
||
if (!ws) {
|
||
resolve()
|
||
return
|
||
}
|
||
|
||
const checkConnection = () => {
|
||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||
console.log('WebSocket connected, starting to load plugins')
|
||
resolve()
|
||
} else if (ws && ws.readyState === WebSocket.CLOSED) {
|
||
console.warn('WebSocket closed before loading plugins')
|
||
resolve()
|
||
} else {
|
||
setTimeout(checkConnection, 100)
|
||
}
|
||
}
|
||
|
||
checkConnection()
|
||
})
|
||
|
||
// 3. 检查 Git 状态
|
||
if (!isUnmounted) {
|
||
const status = await checkGitStatus()
|
||
setGitStatus(status)
|
||
|
||
if (!status.installed) {
|
||
toast({
|
||
title: 'Git 未安装',
|
||
description: status.error || '请先安装 Git 才能使用插件安装功能',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 4. 获取麦麦版本
|
||
if (!isUnmounted) {
|
||
const version = await getMaimaiVersion()
|
||
setMaimaiVersion(version)
|
||
}
|
||
|
||
// 5. 加载插件列表（包含已安装信息）
|
||
if (!isUnmounted) {
|
||
try {
|
||
setLoading(true)
|
||
setError(null)
|
||
const data = await fetchPluginList()
|
||
|
||
if (!isUnmounted) {
|
||
// 获取已安装插件列表
|
||
const installed = await getInstalledPlugins()
|
||
setInstalledPlugins(installed)
|
||
|
||
// 将已安装信息合并到插件数据中
|
||
const mergedData = data.map(plugin => {
|
||
const isInstalled = checkPluginInstalled(plugin.id, installed)
|
||
const installedVersion = getInstalledPluginVersion(plugin.id, installed)
|
||
|
||
return {
|
||
...plugin,
|
||
installed: isInstalled,
|
||
installed_version: installedVersion
|
||
}
|
||
})
|
||
|
||
|
||
// 添加本地安装但不在市场的插件
|
||
for (const installedPlugin of installed) {
|
||
const existsInMarket = mergedData.some(p => p.id === installedPlugin.id)
|
||
if (!existsInMarket && installedPlugin.manifest) {
|
||
// 添加本地插件到列表
|
||
mergedData.push({
|
||
id: installedPlugin.id,
|
||
manifest: {
|
||
manifest_version: installedPlugin.manifest.manifest_version || 1,
|
||
name: installedPlugin.manifest.name,
|
||
version: installedPlugin.manifest.version,
|
||
description: installedPlugin.manifest.description || '',
|
||
author: installedPlugin.manifest.author,
|
||
license: installedPlugin.manifest.license || 'Unknown',
|
||
host_application: installedPlugin.manifest.host_application,
|
||
homepage_url: installedPlugin.manifest.homepage_url,
|
||
repository_url: installedPlugin.manifest.repository_url,
|
||
keywords: installedPlugin.manifest.keywords || [],
|
||
categories: installedPlugin.manifest.categories || [],
|
||
default_locale: (installedPlugin.manifest.default_locale as string) || 'zh-CN',
|
||
locales_path: installedPlugin.manifest.locales_path as string | undefined,
|
||
},
|
||
downloads: 0,
|
||
rating: 0,
|
||
review_count: 0,
|
||
installed: true,
|
||
installed_version: installedPlugin.manifest.version,
|
||
published_at: new Date().toISOString(),
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
}
|
||
}
|
||
|
||
setPlugins(mergedData)
|
||
|
||
// 6. 加载所有插件的统计数据
|
||
loadPluginStats(mergedData)
|
||
}
|
||
} catch (err) {
|
||
if (!isUnmounted) {
|
||
const errorMessage = err instanceof Error ? err.message : '加载插件列表失败'
|
||
setError(errorMessage)
|
||
toast({
|
||
title: '加载失败',
|
||
description: errorMessage,
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
} finally {
|
||
if (!isUnmounted) {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
init()
|
||
|
||
return () => {
|
||
isUnmounted = true
|
||
if (ws) {
|
||
ws.close()
|
||
}
|
||
}
|
||
}, [toast])
|
||
|
||
// 获取插件状态徽章
|
||
const getStatusBadge = (plugin: PluginInfo) => {
|
||
// 优先显示兼容性状态
|
||
if (!plugin.installed && maimaiVersion && !checkPluginCompatibility(plugin)) {
|
||
return (
|
||
<Badge variant="destructive" className="gap-1">
|
||
<AlertCircle className="h-3 w-3" />
|
||
不兼容
|
||
</Badge>
|
||
)
|
||
}
|
||
|
||
if (plugin.installed) {
|
||
// 版本比较：去除两边空格并进行比较
|
||
const installedVer = plugin.installed_version?.trim()
|
||
const marketVer = plugin.manifest.version?.trim()
|
||
|
||
if (installedVer !== marketVer) {
|
||
// console.log(`[Plugin ${plugin.id}] 版本不一致:`, {
|
||
// installed: installedVer,
|
||
// market: marketVer,
|
||
// installedType: typeof plugin.installed_version,
|
||
// marketType: typeof plugin.manifest.version
|
||
// })
|
||
|
||
// 简单的版本比较：只有当市场版本比已安装版本新时才显示"可更新"
|
||
// 如果本地版本更新（比如手动更新或市场数据过期），则显示"已安装"
|
||
const installedParts = installedVer?.split('.').map(Number) || [0, 0, 0]
|
||
const marketParts = marketVer?.split('.').map(Number) || [0, 0, 0]
|
||
|
||
// 比较主版本号、次版本号、修订号
|
||
for (let i = 0; i < 3; i++) {
|
||
if ((marketParts[i] || 0) > (installedParts[i] || 0)) {
|
||
// 市场版本更新
|
||
return (
|
||
<Badge variant="outline" className="gap-1 text-orange-600 border-orange-600">
|
||
<AlertCircle className="h-3 w-3" />
|
||
可更新
|
||
</Badge>
|
||
)
|
||
} else if ((marketParts[i] || 0) < (installedParts[i] || 0)) {
|
||
// 本地版本更新
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Badge variant="default" className="gap-1">
|
||
<CheckCircle2 className="h-3 w-3" />
|
||
已安装
|
||
</Badge>
|
||
)
|
||
}
|
||
return null
|
||
}
|
||
|
||
// 检查插件兼容性
|
||
const checkPluginCompatibility = (plugin: PluginInfo): boolean => {
|
||
if (!maimaiVersion || !plugin.manifest?.host_application) return true
|
||
|
||
return isPluginCompatible(
|
||
plugin.manifest.host_application.min_version,
|
||
plugin.manifest.host_application.max_version,
|
||
maimaiVersion
|
||
)
|
||
}
|
||
|
||
// 检查是否需要更新（市场版本比已安装版本新）
|
||
const needsUpdate = (plugin: PluginInfo): boolean => {
|
||
if (!plugin.installed || !plugin.installed_version || !plugin.manifest?.version) {
|
||
return false
|
||
}
|
||
|
||
const installedVer = plugin.installed_version.trim()
|
||
const marketVer = plugin.manifest.version.trim()
|
||
|
||
if (installedVer === marketVer) return false
|
||
|
||
const installedParts = installedVer.split('.').map(Number)
|
||
const marketParts = marketVer.split('.').map(Number)
|
||
|
||
// 比较主版本号、次版本号、修订号
|
||
for (let i = 0; i < 3; i++) {
|
||
if ((marketParts[i] || 0) > (installedParts[i] || 0)) {
|
||
return true // 市场版本更新
|
||
} else if ((marketParts[i] || 0) < (installedParts[i] || 0)) {
|
||
return false // 本地版本更新
|
||
}
|
||
}
|
||
|
||
return false
|
||
}
|
||
|
||
// 过滤插件
|
||
const filteredPlugins = plugins.filter(plugin => {
|
||
// 跳过没有 manifest 的插件
|
||
if (!plugin.manifest) {
|
||
console.warn('[过滤] 跳过无 manifest 的插件:', plugin.id)
|
||
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))
|
||
|
||
// 标签页过滤
|
||
let matchesTab = true
|
||
if (activeTab === 'installed') {
|
||
matchesTab = plugin.installed === true
|
||
} else if (activeTab === 'updates') {
|
||
matchesTab = plugin.installed === true && needsUpdate(plugin)
|
||
}
|
||
|
||
// 兼容性过滤
|
||
const matchesCompatibility = !showCompatibleOnly ||
|
||
!maimaiVersion ||
|
||
checkPluginCompatibility(plugin)
|
||
|
||
return matchesSearch && matchesCategory && matchesTab && matchesCompatibility
|
||
})
|
||
|
||
// 打开安装对话框
|
||
const openInstallDialog = (plugin: PluginInfo) => {
|
||
if (!gitStatus?.installed) {
|
||
toast({
|
||
title: '无法安装',
|
||
description: 'Git 未安装',
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
// 检查插件兼容性
|
||
if (maimaiVersion && !checkPluginCompatibility(plugin)) {
|
||
toast({
|
||
title: '无法安装',
|
||
description: '插件与当前麦麦版本不兼容',
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
setInstallingPlugin(plugin)
|
||
setSelectedBranch('main')
|
||
setCustomBranch('')
|
||
setBranchInputMode('preset')
|
||
setShowAdvancedOptions(false)
|
||
setInstallDialogOpen(true)
|
||
}
|
||
|
||
// 安装插件处理
|
||
const handleInstall = async () => {
|
||
if (!installingPlugin) return
|
||
|
||
const branch = branchInputMode === 'custom' ? customBranch : selectedBranch
|
||
|
||
if (!branch || branch.trim() === '') {
|
||
toast({
|
||
title: '分支名称不能为空',
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
setInstallDialogOpen(false)
|
||
|
||
await installPlugin(
|
||
installingPlugin.id,
|
||
installingPlugin.manifest.repository_url || '',
|
||
branch
|
||
)
|
||
|
||
// 记录下载统计
|
||
recordPluginDownload(installingPlugin.id).catch(err => {
|
||
console.warn('Failed to record download:', err)
|
||
})
|
||
|
||
toast({
|
||
title: '安装成功',
|
||
description: `${installingPlugin.manifest.name} 已成功安装`,
|
||
})
|
||
|
||
// 重新加载已安装插件列表
|
||
const installed = await getInstalledPlugins()
|
||
setInstalledPlugins(installed)
|
||
|
||
// 重新合并已安装信息到插件列表
|
||
setPlugins(prevPlugins =>
|
||
prevPlugins.map(p => {
|
||
if (p.id === installingPlugin.id) {
|
||
const isInstalled = checkPluginInstalled(p.id, installed)
|
||
const installedVersion = getInstalledPluginVersion(p.id, installed)
|
||
|
||
return {
|
||
...p,
|
||
installed: isInstalled,
|
||
installed_version: installedVersion
|
||
}
|
||
}
|
||
return p
|
||
})
|
||
)
|
||
} catch (error) {
|
||
toast({
|
||
title: '安装失败',
|
||
description: error instanceof Error ? error.message : '未知错误',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setInstallingPlugin(null)
|
||
}
|
||
}
|
||
|
||
// 卸载插件处理
|
||
const handleUninstall = async (plugin: PluginInfo) => {
|
||
try {
|
||
await uninstallPlugin(plugin.id)
|
||
|
||
toast({
|
||
title: '卸载成功',
|
||
description: `${plugin.manifest.name} 已成功卸载`,
|
||
})
|
||
|
||
// 重新加载已安装插件列表
|
||
const installed = await getInstalledPlugins()
|
||
setInstalledPlugins(installed)
|
||
|
||
// 重新合并已安装信息到插件列表
|
||
setPlugins(prevPlugins =>
|
||
prevPlugins.map(p => {
|
||
if (p.id === plugin.id) {
|
||
const isInstalled = checkPluginInstalled(p.id, installed)
|
||
const installedVersion = getInstalledPluginVersion(p.id, installed)
|
||
|
||
return {
|
||
...p,
|
||
installed: isInstalled,
|
||
installed_version: installedVersion
|
||
}
|
||
}
|
||
return p
|
||
})
|
||
)
|
||
} catch (error) {
|
||
toast({
|
||
title: '卸载失败',
|
||
description: error instanceof Error ? error.message : '未知错误',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 更新插件处理
|
||
const handleUpdate = async (plugin: PluginInfo) => {
|
||
if (!gitStatus?.installed) {
|
||
toast({
|
||
title: '无法更新',
|
||
description: 'Git 未安装',
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
const result = await updatePlugin(
|
||
plugin.id,
|
||
plugin.manifest.repository_url || '',
|
||
'main'
|
||
)
|
||
|
||
toast({
|
||
title: '更新成功',
|
||
description: `${plugin.manifest.name} 已从 ${result.old_version} 更新到 ${result.new_version}`,
|
||
})
|
||
|
||
// 重新加载已安装插件列表
|
||
const installed = await getInstalledPlugins()
|
||
setInstalledPlugins(installed)
|
||
|
||
// 重新合并已安装信息到插件列表
|
||
setPlugins(prevPlugins =>
|
||
prevPlugins.map(p => {
|
||
if (p.id === plugin.id) {
|
||
const isInstalled = checkPluginInstalled(p.id, installed)
|
||
const installedVersion = getInstalledPluginVersion(p.id, installed)
|
||
|
||
return {
|
||
...p,
|
||
installed: isInstalled,
|
||
installed_version: installedVersion
|
||
}
|
||
}
|
||
return p
|
||
})
|
||
)
|
||
} catch (error) {
|
||
toast({
|
||
title: '更新失败',
|
||
description: error instanceof Error ? error.message : '未知错误',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-6 p-4 sm:p-6">
|
||
{/* 标题 */}
|
||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold">插件市场</h1>
|
||
<p className="text-muted-foreground mt-2">浏览和管理麦麦的插件</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => triggerRestart()}
|
||
disabled={isRestarting}
|
||
>
|
||
<RotateCw className={`h-4 w-4 mr-2 ${isRestarting ? 'animate-spin' : ''}`} />
|
||
重启麦麦
|
||
</Button>
|
||
<Button onClick={() => navigate({ to: '/plugin-mirrors' })}>
|
||
<Settings2 className="h-4 w-4 mr-2" />
|
||
配置镜像源
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 安装提示 */}
|
||
<Card className="border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-900">
|
||
<CardContent className="py-3">
|
||
<div className="flex items-center gap-2">
|
||
<Info className="h-4 w-4 text-blue-600 flex-shrink-0" />
|
||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||
安装、卸载或更新插件后，需要<span className="font-semibold">重启麦麦</span>才能使更改生效
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Git 状态警告 */}
|
||
{gitStatus && !gitStatus.installed && (
|
||
<Card className="border-orange-600 bg-orange-50 dark:bg-orange-950/20">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<AlertTriangle className="h-5 w-5 text-orange-600" />
|
||
<div>
|
||
<CardTitle className="text-lg text-orange-900 dark:text-orange-100">
|
||
Git 未安装
|
||
</CardTitle>
|
||
<CardDescription className="text-orange-800 dark:text-orange-200">
|
||
{gitStatus.error || '请先安装 Git 才能使用插件安装功能'}
|
||
</CardDescription>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-orange-800 dark:text-orange-200">
|
||
您可以从 <a href="https://git-scm.com/downloads" target="_blank" rel="noopener noreferrer" className="underline font-medium">git-scm.com</a> 下载并安装 Git。
|
||
安装完成后，请重启麦麦应用。
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 搜索和筛选栏 */}
|
||
<Card className="p-4">
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
{/* 搜索框 */}
|
||
<div className="flex-1 relative">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
placeholder="搜索插件..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
|
||
{/* 分类筛选 */}
|
||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||
<SelectTrigger className="w-full sm:w-[200px]">
|
||
<SelectValue placeholder="选择分类" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部分类</SelectItem>
|
||
<SelectItem value="Group Management">群组管理</SelectItem>
|
||
<SelectItem value="Entertainment & Interaction">娱乐互动</SelectItem>
|
||
<SelectItem value="Utility Tools">实用工具</SelectItem>
|
||
<SelectItem value="Content Generation">内容生成</SelectItem>
|
||
<SelectItem value="Multimedia">多媒体</SelectItem>
|
||
<SelectItem value="External Integration">外部集成</SelectItem>
|
||
<SelectItem value="Data Analysis & Insights">数据分析与洞察</SelectItem>
|
||
<SelectItem value="Other">其他</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 兼容性筛选 */}
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="compatible-only"
|
||
checked={showCompatibleOnly}
|
||
onCheckedChange={(checked) => setShowCompatibleOnly(checked === true)}
|
||
/>
|
||
<label
|
||
htmlFor="compatible-only"
|
||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
||
>
|
||
只显示兼容当前版本的插件
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 标签页 */}
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<TabsList className="grid w-full grid-cols-3">
|
||
<TabsTrigger value="all">
|
||
全部插件 ({
|
||
plugins.filter(p => {
|
||
if (!p.manifest) return false
|
||
const matchesSearch = searchQuery === '' ||
|
||
p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
(p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
|
||
const matchesCategory = categoryFilter === 'all' ||
|
||
(p.manifest.categories && p.manifest.categories.includes(categoryFilter))
|
||
const matchesCompatibility = !showCompatibleOnly ||
|
||
!maimaiVersion ||
|
||
checkPluginCompatibility(p)
|
||
return matchesSearch && matchesCategory && matchesCompatibility
|
||
}).length
|
||
})
|
||
</TabsTrigger>
|
||
<TabsTrigger value="installed">
|
||
已安装 ({
|
||
plugins.filter(p => {
|
||
if (!p.manifest) return false
|
||
const matchesSearch = searchQuery === '' ||
|
||
p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
(p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
|
||
const matchesCategory = categoryFilter === 'all' ||
|
||
(p.manifest.categories && p.manifest.categories.includes(categoryFilter))
|
||
const matchesCompatibility = !showCompatibleOnly ||
|
||
!maimaiVersion ||
|
||
checkPluginCompatibility(p)
|
||
return p.installed && matchesSearch && matchesCategory && matchesCompatibility
|
||
}).length
|
||
})
|
||
</TabsTrigger>
|
||
<TabsTrigger value="updates">
|
||
可更新 ({
|
||
plugins.filter(p => {
|
||
if (!p.manifest) return false
|
||
const matchesSearch = searchQuery === '' ||
|
||
p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
(p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
|
||
const matchesCategory = categoryFilter === 'all' ||
|
||
(p.manifest.categories && p.manifest.categories.includes(categoryFilter))
|
||
const matchesCompatibility = !showCompatibleOnly ||
|
||
!maimaiVersion ||
|
||
checkPluginCompatibility(p)
|
||
return p.installed && needsUpdate(p) && matchesSearch && matchesCategory && matchesCompatibility
|
||
}).length
|
||
})
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
|
||
{/* 进度条 - 仅显示插件清单加载进度 */}
|
||
{loadProgress && loadProgress.stage === 'loading' && loadProgress.operation === 'fetch' && (
|
||
<Card className="p-4">
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
<span className="text-sm font-medium">加载插件列表</span>
|
||
</div>
|
||
<span className="text-sm font-medium">{loadProgress.progress}%</span>
|
||
</div>
|
||
<Progress value={loadProgress.progress} className="h-2" />
|
||
<div className="text-xs text-muted-foreground">
|
||
{loadProgress.message}
|
||
</div>
|
||
{loadProgress.total_plugins > 0 && (
|
||
<div className="text-xs text-muted-foreground text-center">
|
||
已加载 {loadProgress.loaded_plugins} / {loadProgress.total_plugins} 个插件
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 加载错误显示 */}
|
||
{loadProgress && loadProgress.stage === 'error' && loadProgress.error && (
|
||
<Card className="border-destructive bg-destructive/10">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<AlertTriangle className="h-5 w-5 text-destructive" />
|
||
<div>
|
||
<CardTitle className="text-lg text-destructive">
|
||
加载失败
|
||
</CardTitle>
|
||
<CardDescription className="text-destructive/80">
|
||
{loadProgress.error}
|
||
</CardDescription>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 插件卡片网格 */}
|
||
{loading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
<span className="ml-3 text-muted-foreground">加载插件列表中...</span>
|
||
</div>
|
||
) : error ? (
|
||
<Card className="p-6">
|
||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||
<AlertTriangle className="h-12 w-12 text-destructive mb-4" />
|
||
<h3 className="text-lg font-semibold mb-2">加载失败</h3>
|
||
<p className="text-sm text-muted-foreground mb-4">{error}</p>
|
||
<Button onClick={() => window.location.reload()}>
|
||
重新加载
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
) : filteredPlugins.length === 0 ? (
|
||
<Card className="p-6">
|
||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||
<Search className="h-12 w-12 text-muted-foreground mb-4" />
|
||
<h3 className="text-lg font-semibold mb-2">未找到插件</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
{searchQuery || categoryFilter !== 'all'
|
||
? '尝试调整搜索条件或筛选器'
|
||
: '暂无可用插件'}
|
||
</p>
|
||
</div>
|
||
</Card>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{filteredPlugins.map((plugin) => (
|
||
<Card
|
||
key={plugin.id}
|
||
className="flex flex-col hover:shadow-lg transition-shadow h-full"
|
||
>
|
||
<CardHeader>
|
||
<div className="flex items-start justify-between gap-2">
|
||
<CardTitle className="text-xl">{plugin.manifest?.name || plugin.id}</CardTitle>
|
||
<div className="flex flex-col gap-1">
|
||
{plugin.manifest?.categories && plugin.manifest.categories[0] && (
|
||
<Badge variant="secondary" className="text-xs whitespace-nowrap">
|
||
{CATEGORY_NAMES[plugin.manifest.categories[0]] || plugin.manifest.categories[0]}
|
||
</Badge>
|
||
)}
|
||
{getStatusBadge(plugin)}
|
||
</div>
|
||
</div>
|
||
<CardDescription className="line-clamp-2">{plugin.manifest?.description || '无描述'}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="flex-1">
|
||
<div className="space-y-3">
|
||
{/* 统计信息 */}
|
||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||
<div className="flex items-center gap-1">
|
||
<Download className="h-4 w-4" />
|
||
<span>{(pluginStats[plugin.id]?.downloads ?? plugin.downloads ?? 0).toLocaleString()}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||
<span>{(pluginStats[plugin.id]?.rating ?? plugin.rating ?? 0).toFixed(1)}</span>
|
||
</div>
|
||
</div>
|
||
{/* 标签 */}
|
||
<div className="flex flex-wrap gap-2">
|
||
{plugin.manifest?.keywords && plugin.manifest.keywords.slice(0, 3).map((keyword) => (
|
||
<Badge key={keyword} variant="outline" className="text-xs">
|
||
{keyword}
|
||
</Badge>
|
||
))}
|
||
{plugin.manifest?.keywords && plugin.manifest.keywords.length > 3 && (
|
||
<Badge variant="outline" className="text-xs">
|
||
+{plugin.manifest.keywords.length - 3}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
{/* 版本和作者 */}
|
||
<div className="text-xs text-muted-foreground pt-2 border-t space-y-1">
|
||
<div>v{plugin.manifest?.version || 'unknown'} · {plugin.manifest?.author?.name || 'Unknown'}</div>
|
||
{/* 支持版本 */}
|
||
{plugin.manifest?.host_application && (
|
||
<div className="flex items-center gap-1">
|
||
<span>支持:</span>
|
||
<span className="font-medium">
|
||
{plugin.manifest.host_application.min_version}
|
||
{plugin.manifest.host_application.max_version
|
||
? ` - ${plugin.manifest.host_application.max_version}`
|
||
: ' - 最新版本'
|
||
}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="pt-4">
|
||
<div className="flex items-center justify-end gap-2 w-full">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => navigate({ to: '/plugin-detail', search: { pluginId: plugin.id } })}
|
||
>
|
||
查看详情
|
||
</Button>
|
||
{plugin.installed ? (
|
||
needsUpdate(plugin) ? (
|
||
<Button
|
||
size="sm"
|
||
disabled={!gitStatus?.installed}
|
||
title={!gitStatus?.installed ? 'Git 未安装' : undefined}
|
||
onClick={() => handleUpdate(plugin)}
|
||
>
|
||
<RefreshCw className="h-4 w-4 mr-1" />
|
||
更新
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
disabled={!gitStatus?.installed}
|
||
title={!gitStatus?.installed ? 'Git 未安装' : undefined}
|
||
onClick={() => handleUninstall(plugin)}
|
||
>
|
||
<Trash2 className="h-4 w-4 mr-1" />
|
||
卸载
|
||
</Button>
|
||
)
|
||
) : (
|
||
<Button
|
||
size="sm"
|
||
disabled={
|
||
!gitStatus?.installed ||
|
||
loadProgress?.operation === 'install' ||
|
||
(maimaiVersion !== null && !checkPluginCompatibility(plugin))
|
||
}
|
||
title={
|
||
!gitStatus?.installed
|
||
? 'Git 未安装'
|
||
: (maimaiVersion !== null && !checkPluginCompatibility(plugin))
|
||
? `不兼容当前版本 (需要 ${plugin.manifest?.host_application?.min_version || '未知'}${plugin.manifest?.host_application?.max_version ? ` - ${plugin.manifest.host_application.max_version}` : '+'}，当前 ${maimaiVersion?.version})`
|
||
: undefined
|
||
}
|
||
onClick={() => openInstallDialog(plugin)}
|
||
>
|
||
<Download className="h-4 w-4 mr-1" />
|
||
{loadProgress?.operation === 'install' && loadProgress?.plugin_id === plugin.id ? '安装中...' : '安装'}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</CardFooter>
|
||
{/* 安装/卸载/更新进度显示 - 在卡片下方 */}
|
||
{loadProgress &&
|
||
(loadProgress.stage === 'loading' || loadProgress.stage === 'success' || loadProgress.stage === 'error') &&
|
||
loadProgress.operation !== 'fetch' &&
|
||
loadProgress.plugin_id === plugin.id && (
|
||
<div className="px-6 pb-4 -mt-2">
|
||
<div className={`space-y-2 p-3 rounded-lg border ${
|
||
loadProgress.stage === 'success'
|
||
? 'bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-900'
|
||
: loadProgress.stage === 'error'
|
||
? 'bg-red-50 dark:bg-red-950/20 border-red-200 dark:border-red-900'
|
||
: 'bg-muted/50'
|
||
}`}>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
{loadProgress.stage === 'loading' ? (
|
||
<Loader2 className="h-3 w-3 animate-spin" />
|
||
) : loadProgress.stage === 'success' ? (
|
||
<CheckCircle2 className="h-3 w-3 text-green-600" />
|
||
) : (
|
||
<AlertCircle className="h-3 w-3 text-red-600" />
|
||
)}
|
||
<span className={`text-xs font-medium ${
|
||
loadProgress.stage === 'success'
|
||
? 'text-green-700 dark:text-green-300'
|
||
: loadProgress.stage === 'error'
|
||
? 'text-red-700 dark:text-red-300'
|
||
: ''
|
||
}`}>
|
||
{loadProgress.stage === 'loading' ? (
|
||
<>
|
||
{loadProgress.operation === 'install' && '正在安装'}
|
||
{loadProgress.operation === 'uninstall' && '正在卸载'}
|
||
{loadProgress.operation === 'update' && '正在更新'}
|
||
</>
|
||
) : loadProgress.stage === 'success' ? (
|
||
<>
|
||
{loadProgress.operation === 'install' && '安装完成'}
|
||
{loadProgress.operation === 'uninstall' && '卸载完成'}
|
||
{loadProgress.operation === 'update' && '更新完成'}
|
||
</>
|
||
) : (
|
||
<>
|
||
{loadProgress.operation === 'install' && '安装失败'}
|
||
{loadProgress.operation === 'uninstall' && '卸载失败'}
|
||
{loadProgress.operation === 'update' && '更新失败'}
|
||
</>
|
||
)}
|
||
</span>
|
||
</div>
|
||
{loadProgress.stage !== 'error' && (
|
||
<span className={`text-xs font-medium ${
|
||
loadProgress.stage === 'success' ? 'text-green-700 dark:text-green-300' : ''
|
||
}`}>{loadProgress.progress}%</span>
|
||
)}
|
||
</div>
|
||
{loadProgress.stage !== 'error' && (
|
||
<Progress
|
||
value={loadProgress.progress}
|
||
className={`h-1.5 ${loadProgress.stage === 'success' ? '[&>div]:bg-green-500' : ''}`}
|
||
/>
|
||
)}
|
||
<div className={`text-xs ${
|
||
loadProgress.stage === 'success'
|
||
? 'text-green-600 dark:text-green-400 truncate'
|
||
: loadProgress.stage === 'error'
|
||
? 'text-red-600 dark:text-red-400'
|
||
: 'text-muted-foreground truncate'
|
||
}`}>
|
||
{loadProgress.stage === 'error' ? (loadProgress.error || loadProgress.message || '操作失败') : loadProgress.message}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 安装对话框 */}
|
||
<Dialog open={installDialogOpen} onOpenChange={setInstallDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>安装插件</DialogTitle>
|
||
<DialogDescription>
|
||
安装 {installingPlugin?.manifest.name}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
{/* 基本信息 */}
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">
|
||
版本: {installingPlugin?.manifest.version}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
作者: {typeof installingPlugin?.manifest.author === 'string'
|
||
? installingPlugin.manifest.author
|
||
: installingPlugin?.manifest.author?.name}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 高级选项开关 */}
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="advanced-options"
|
||
checked={showAdvancedOptions}
|
||
onCheckedChange={(checked) => setShowAdvancedOptions(checked as boolean)}
|
||
/>
|
||
<label
|
||
htmlFor="advanced-options"
|
||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||
>
|
||
高级选项
|
||
</label>
|
||
</div>
|
||
|
||
{/* 高级选项内容 */}
|
||
{showAdvancedOptions && (
|
||
<div className="space-y-4 p-4 border rounded-lg">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">分支选择</label>
|
||
|
||
<Tabs value={branchInputMode} onValueChange={(value) => setBranchInputMode(value as 'preset' | 'custom')}>
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="preset" className="text-xs">预设分支</TabsTrigger>
|
||
<TabsTrigger value="custom" className="text-xs">自定义分支</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 预设分支选择 */}
|
||
{branchInputMode === 'preset' && (
|
||
<div className="mt-3">
|
||
<Select value={selectedBranch} onValueChange={setSelectedBranch}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="选择分支" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="main">main (默认)</SelectItem>
|
||
<SelectItem value="master">master</SelectItem>
|
||
<SelectItem value="dev">dev (开发版)</SelectItem>
|
||
<SelectItem value="develop">develop</SelectItem>
|
||
<SelectItem value="beta">beta (测试版)</SelectItem>
|
||
<SelectItem value="stable">stable (稳定版)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 自定义分支输入 */}
|
||
{branchInputMode === 'custom' && (
|
||
<div className="space-y-2 mt-3">
|
||
<input
|
||
type="text"
|
||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||
placeholder="输入分支名称，例如: feature/new-feature"
|
||
value={customBranch}
|
||
onChange={(e) => setCustomBranch(e.target.value)}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
输入 Git 分支名称、标签或提交哈希
|
||
</p>
|
||
</div>
|
||
)}
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{!showAdvancedOptions && (
|
||
<p className="text-sm text-muted-foreground">
|
||
将从默认分支 (main) 安装插件
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setInstallDialogOpen(false)}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleInstall}>
|
||
<Download className="h-4 w-4 mr-2" />
|
||
安装
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 重启遮罩层 */}
|
||
<RestartOverlay />
|
||
</div>
|
||
</ScrollArea>
|
||
)
|
||
}
|
||
|