283 lines
8.2 KiB
TypeScript
283 lines
8.2 KiB
TypeScript
|
import { Template } from "interface/template";
|
|||
|
|
import {
|
|||
|
|
Container,
|
|||
|
|
Heading,
|
|||
|
|
Text,
|
|||
|
|
Box,
|
|||
|
|
Flex,
|
|||
|
|
Card,
|
|||
|
|
Button,
|
|||
|
|
TextField,
|
|||
|
|
DropdownMenu,
|
|||
|
|
ScrollArea,
|
|||
|
|
Dialog,
|
|||
|
|
Tabs,
|
|||
|
|
Switch,
|
|||
|
|
IconButton
|
|||
|
|
} from "@radix-ui/themes";
|
|||
|
|
import {
|
|||
|
|
PlusIcon,
|
|||
|
|
MagnifyingGlassIcon,
|
|||
|
|
DownloadIcon,
|
|||
|
|
GearIcon,
|
|||
|
|
CodeIcon,
|
|||
|
|
Cross2Icon,
|
|||
|
|
CheckIcon,
|
|||
|
|
UpdateIcon,
|
|||
|
|
TrashIcon,
|
|||
|
|
ExclamationTriangleIcon
|
|||
|
|
} from "@radix-ui/react-icons";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import type { PluginConfig } from "interface/plugin";
|
|||
|
|
|
|||
|
|
// 模拟插件数据
|
|||
|
|
const mockPlugins: (PluginConfig & { id: number; preview?: string; installed?: boolean })[] = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: "comment-system",
|
|||
|
|
displayName: "评论系统",
|
|||
|
|
version: "1.0.0",
|
|||
|
|
description: "支持多种评论系统集成，包括Disqus、Gitalk等",
|
|||
|
|
author: "Admin",
|
|||
|
|
enabled: true,
|
|||
|
|
icon: "https://api.iconify.design/material-symbols:comment.svg",
|
|||
|
|
preview: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
|
|||
|
|
managePath: "/dashboard/plugins/comment-system",
|
|||
|
|
installed: true,
|
|||
|
|
configuration: {
|
|||
|
|
system: {
|
|||
|
|
title: "评论系统配置",
|
|||
|
|
description: "配置评论系统参数",
|
|||
|
|
data: {
|
|||
|
|
provider: "gitalk",
|
|||
|
|
clientId: "",
|
|||
|
|
clientSecret: ""
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
routes: new Set()
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: "image-optimization",
|
|||
|
|
displayName: "图片优化",
|
|||
|
|
version: "1.0.0",
|
|||
|
|
description: "自动优化上传的图片，支持压缩、裁剪、水印等功能",
|
|||
|
|
author: "ThirdParty",
|
|||
|
|
enabled: false,
|
|||
|
|
icon: "https://api.iconify.design/material-symbols:image.svg",
|
|||
|
|
preview: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500&auto=format",
|
|||
|
|
installed: true,
|
|||
|
|
configuration: {
|
|||
|
|
system: {
|
|||
|
|
title: "图片优化配置",
|
|||
|
|
description: "配置图片优化参数",
|
|||
|
|
data: {
|
|||
|
|
quality: 80,
|
|||
|
|
maxWidth: 1920,
|
|||
|
|
watermark: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
routes: new Set()
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 模拟市场插件数据
|
|||
|
|
interface MarketPlugin {
|
|||
|
|
id: number;
|
|||
|
|
name: string;
|
|||
|
|
displayName: string;
|
|||
|
|
version: string;
|
|||
|
|
description: string;
|
|||
|
|
author: string;
|
|||
|
|
preview?: string;
|
|||
|
|
downloads: number;
|
|||
|
|
rating: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const marketPlugins: MarketPlugin[] = [
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: "image-optimization",
|
|||
|
|
displayName: "图片优化",
|
|||
|
|
version: "1.0.0",
|
|||
|
|
description: "自动优化上传的图片，支持压缩、裁剪、水印等功能",
|
|||
|
|
author: "ThirdParty",
|
|||
|
|
preview: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=500&auto=format",
|
|||
|
|
downloads: 1200,
|
|||
|
|
rating: 4.5
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
name: "markdown-plus",
|
|||
|
|
displayName: "Markdown增强",
|
|||
|
|
version: "2.0.0",
|
|||
|
|
description: "增强的Markdown编辑器，支持更多扩展语法和实时预览",
|
|||
|
|
author: "ThirdParty",
|
|||
|
|
preview: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&auto=format",
|
|||
|
|
downloads: 3500,
|
|||
|
|
rating: 4.8
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default new Template({}, ({ http, args }) => {
|
|||
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|||
|
|
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
|
|||
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|||
|
|
const [selectedPlugin, setSelectedPlugin] = useState<typeof mockPlugins[0] | null>(null);
|
|||
|
|
|
|||
|
|
// 处理插件启用/禁用
|
|||
|
|
const handleTogglePlugin = (pluginId: number) => {
|
|||
|
|
// 这里添加启用/禁用插件的逻辑
|
|||
|
|
console.log('Toggle plugin:', pluginId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box>
|
|||
|
|
{/* 页面标题和操作栏 */}
|
|||
|
|
<Flex justify="between" align="center" className="mb-6">
|
|||
|
|
<Box>
|
|||
|
|
<Heading size="6" className="text-[--gray-12] mb-2">
|
|||
|
|
插件管理
|
|||
|
|
</Heading>
|
|||
|
|
<Text className="text-[--gray-11]">
|
|||
|
|
共 {mockPlugins.length} 个插件
|
|||
|
|
</Text>
|
|||
|
|
</Box>
|
|||
|
|
<Button
|
|||
|
|
className="bg-[--accent-9]"
|
|||
|
|
onClick={() => setIsAddDialogOpen(true)}
|
|||
|
|
>
|
|||
|
|
<PlusIcon className="w-4 h-4" />
|
|||
|
|
安装插件
|
|||
|
|
</Button>
|
|||
|
|
</Flex>
|
|||
|
|
|
|||
|
|
{/* 搜索栏 */}
|
|||
|
|
<Box className="w-full sm:w-64 mb-6">
|
|||
|
|
<TextField.Root
|
|||
|
|
placeholder="搜索插件..."
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
|
|||
|
|
>
|
|||
|
|
<TextField.Slot>
|
|||
|
|
<MagnifyingGlassIcon height="16" width="16" />
|
|||
|
|
</TextField.Slot>
|
|||
|
|
</TextField.Root>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 插件列表 */}
|
|||
|
|
<Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|||
|
|
{mockPlugins.map((plugin) => (
|
|||
|
|
<Card key={plugin.id} className="p-4 border border-[--gray-6] hover-card">
|
|||
|
|
{/* 插件预览图 */}
|
|||
|
|
{plugin.preview && (
|
|||
|
|
<Box className="aspect-video mb-4 rounded-lg overflow-hidden bg-[--gray-3]">
|
|||
|
|
<img
|
|||
|
|
src={plugin.preview}
|
|||
|
|
alt={plugin.displayName}
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 插件信息 */}
|
|||
|
|
<Flex direction="column" gap="2">
|
|||
|
|
<Flex justify="between" align="center">
|
|||
|
|
<Heading size="3">{plugin.displayName}</Heading>
|
|||
|
|
<Switch
|
|||
|
|
checked={plugin.enabled}
|
|||
|
|
onCheckedChange={() => handleTogglePlugin(plugin.id)}
|
|||
|
|
/>
|
|||
|
|
</Flex>
|
|||
|
|
|
|||
|
|
<Text size="1" className="text-[--gray-11]">
|
|||
|
|
版本 {plugin.version} · 作者 {plugin.author}
|
|||
|
|
</Text>
|
|||
|
|
|
|||
|
|
<Text size="2" className="text-[--gray-11] line-clamp-2">
|
|||
|
|
{plugin.description}
|
|||
|
|
</Text>
|
|||
|
|
|
|||
|
|
{/* 操作按钮 */}
|
|||
|
|
<Flex gap="2" mt="2">
|
|||
|
|
{plugin.managePath && plugin.enabled && (
|
|||
|
|
<Button
|
|||
|
|
variant="soft"
|
|||
|
|
className="flex-1"
|
|||
|
|
onClick={() => {
|
|||
|
|
if(plugin.managePath) {
|
|||
|
|
window.location.href = plugin.managePath;
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<GearIcon className="w-4 h-4" />
|
|||
|
|
配置
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
variant="soft"
|
|||
|
|
color="red"
|
|||
|
|
className="flex-1"
|
|||
|
|
>
|
|||
|
|
<TrashIcon className="w-4 h-4" />
|
|||
|
|
卸载
|
|||
|
|
</Button>
|
|||
|
|
</Flex>
|
|||
|
|
</Flex>
|
|||
|
|
</Card>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 安装插件对话框 */}
|
|||
|
|
<Dialog.Root open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
|
|||
|
|
<Dialog.Content style={{ maxWidth: 500 }}>
|
|||
|
|
<Dialog.Title>安装插件</Dialog.Title>
|
|||
|
|
<Dialog.Description size="2" mb="4">
|
|||
|
|
上传插件包进行安装
|
|||
|
|
</Dialog.Description>
|
|||
|
|
|
|||
|
|
<Box className="mt-4">
|
|||
|
|
<Box className="border-2 border-dashed border-[--gray-6] rounded-lg p-8 text-center">
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
className="hidden"
|
|||
|
|
id="plugin-upload"
|
|||
|
|
accept=".zip"
|
|||
|
|
onChange={(e) => {
|
|||
|
|
console.log(e.target.files);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<label
|
|||
|
|
htmlFor="plugin-upload"
|
|||
|
|
className="cursor-pointer"
|
|||
|
|
>
|
|||
|
|
<CodeIcon className="w-12 h-12 mx-auto mb-4 text-[--gray-9]" />
|
|||
|
|
<Text className="text-[--gray-11] mb-2">
|
|||
|
|
点击上传插件包或拖拽到此处
|
|||
|
|
</Text>
|
|||
|
|
<Text size="1" className="text-[--gray-10]">
|
|||
|
|
支持 .zip 格式的插件包
|
|||
|
|
</Text>
|
|||
|
|
</label>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Flex gap="3" mt="4" justify="end">
|
|||
|
|
<Dialog.Close>
|
|||
|
|
<Button variant="soft" color="gray">
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
</Dialog.Close>
|
|||
|
|
<Dialog.Close>
|
|||
|
|
<Button className="bg-[--accent-9]">
|
|||
|
|
开始安装
|
|||
|
|
</Button>
|
|||
|
|
</Dialog.Close>
|
|||
|
|
</Flex>
|
|||
|
|
</Dialog.Content>
|
|||
|
|
</Dialog.Root>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
});
|