feat(plugin-sdk): add TypeScript SDK for Infinite Canvas plugins with automatic JSX and build support

web/src/components/canvas/canvas-plugin-manager-modal.tsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
-import { App, Button, Input, Modal, Popconfirm, Switch } from "antd";
-import { AlertTriangle, Puzzle, RefreshCw, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { App, Button, Input, Modal, Popconfirm, Switch, Tabs } from "antd";
+import { AlertTriangle, Download, Puzzle, RefreshCw, Trash2 } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
 import { installPluginFromUrl, setPluginEnabled, uninstallPlugin, updatePlugin } from "@/lib/canvas/plugin-loader";
+import { fetchOfficialPlugins, type OfficialPluginEntry } from "@/lib/canvas/plugin-registry";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { usePluginStore, type InstalledPlugin } from "@/stores/canvas/use-plugin-store";
 
@@ -15,7 +16,32 @@ export function CanvasPluginManagerModal({ open, onClose }: { open: boolean; onC
     const [installing, setInstalling] = useState(false);
     const [busyId, setBusyId] = useState<string | null>(null);
 
-    const handleInstall = async () => {
+    const [official, setOfficial] = useState<OfficialPluginEntry[]>([]);
+    const [loadingOfficial, setLoadingOfficial] = useState(false);
+    const [officialError, setOfficialError] = useState<string | null>(null);
+
+    const recordById = useMemo(() => new Map(plugins.map((item) => [item.id, item])), [plugins]);
+    const localPlugins = useMemo(() => plugins.filter((item) => item.local), [plugins]);
+    const thirdPartyPlugins = useMemo(() => plugins.filter((item) => !item.local && !item.official), [plugins]);
+
+    const loadOfficial = useCallback(async () => {
+        setLoadingOfficial(true);
+        setOfficialError(null);
+        try {
+            setOfficial(await fetchOfficialPlugins());
+        } catch (error) {
+            setOfficialError(error instanceof Error ? error.message : String(error));
+        } finally {
+            setLoadingOfficial(false);
+        }
+    }, []);
+
+    // 打开面板时拉取官方清单(仅在尚未加载过时,避免重复请求)
+    useEffect(() => {
+        if (open && official.length === 0 && !loadingOfficial && !officialError) void loadOfficial();
+    }, [open, official.length, loadingOfficial, officialError, loadOfficial]);
+
+    const handleInstallUrl = async () => {
         const target = url.trim();
         if (!target) return;
         setInstalling(true);
@@ -30,6 +56,18 @@ export function CanvasPluginManagerModal({ open, onClose }: { open: boolean; onC
         }
     };
 
+    const handleInstallOfficial = async (entry: OfficialPluginEntry) => {
+        setBusyId(entry.id);
+        try {
+            const plugin = await installPluginFromUrl(entry.url, { official: true });
+            message.success(`已安装 ${plugin.name}`);
+        } catch (error) {
+            message.error(`安装失败：${error instanceof Error ? error.message : String(error)}`);
+        } finally {
+            setBusyId(null);
+        }
+    };
+
     const runOnPlugin = async (record: InstalledPlugin, action: () => Promise<void>, successText: string) => {
         setBusyId(record.id);
         try {
@@ -42,72 +80,124 @@ export function CanvasPluginManagerModal({ open, onClose }: { open: boolean; onC
         }
     };
 
+    // 已安装插件的操作区:启用开关 +(非本地)更新/卸载
+    const installedControls = (record: InstalledPlugin) => (
+        <>
+            <Switch size="small" checked={record.enabled} loading={busyId === record.id} onChange={(checked) => runOnPlugin(record, () => setPluginEnabled(record, checked), checked ? "已启用" : "已禁用")} />
+            {!record.local && (
+                <>
+                    <Button type="text" size="small" icon={<RefreshCw className="size-4" />} loading={busyId === record.id} title="从来源更新" onClick={() => runOnPlugin(record, async () => void (await updatePlugin(record)), "已更新")} />
+                    <Popconfirm title="卸载该插件？" okText="卸载" cancelText="取消" onConfirm={() => uninstallPlugin(record.id)}>
+                        <Button type="text" size="small" danger icon={<Trash2 className="size-4" />} title="卸载" />
+                    </Popconfirm>
+                </>
+            )}
+        </>
+    );
+
+    const versionTag = (version: string) => (
+        <span className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px]" style={{ background: theme.toolbar.activeBg, color: theme.node.muted }}>
+            v{version}
+        </span>
+    );
+
+    const emptyHint = (text: string) => (
+        <div className="py-10 text-center text-sm" style={{ color: theme.node.muted }}>
+            {text}
+        </div>
+    );
+
+    // 通用插件行:图标 + 标题(名称 + 版本)+ 描述 + 右侧操作
+    const row = (key: string, icon: ReactNode, name: string, version: string, subtitle: string | undefined, right: ReactNode) => (
+        <div key={key} className="flex items-center gap-3 rounded-xl border px-3 py-2.5" style={{ borderColor: theme.node.stroke, background: theme.node.fill }}>
+            <span className="grid size-9 shrink-0 place-items-center rounded-lg text-base" style={{ background: theme.toolbar.activeBg, color: theme.node.muted }}>
+                {icon}
+            </span>
+            <div className="min-w-0 flex-1">
+                <div className="flex min-w-0 items-center gap-2 text-sm font-medium" style={{ color: theme.node.text }}>
+                    <span className="truncate">{name}</span>
+                    {versionTag(version)}
+                </div>
+                {subtitle ? (
+                    <div className="mt-0.5 truncate text-xs" style={{ color: theme.node.muted }}>
+                        {subtitle}
+                    </div>
+                ) : null}
+            </div>
+            {right}
+        </div>
+    );
+
+    const officialTab = (
+        <div className="space-y-2">
+            <div className="flex items-center justify-between">
+                <div className="text-xs" style={{ color: theme.node.muted }}>
+                    本项目官方插件,来自仓库注册表
+                </div>
+                <Button type="text" size="small" icon={<RefreshCw className={`size-4 ${loadingOfficial ? "animate-spin" : ""}`} />} onClick={loadOfficial} disabled={loadingOfficial}>
+                    刷新
+                </Button>
+            </div>
+            {officialError ? (
+                <div className="rounded-lg border px-3 py-2 text-xs" style={{ borderColor: theme.node.stroke, color: theme.node.muted }}>
+                    加载失败：{officialError}
+                </div>
+            ) : loadingOfficial && official.length === 0 ? (
+                emptyHint("正在获取官方插件…")
+            ) : official.length === 0 ? (
+                emptyHint("暂无官方插件")
+            ) : (
+                <div className="thin-scrollbar max-h-[46vh] space-y-2 overflow-auto">
+                    {official.map((entry) => {
+                        const record = recordById.get(entry.id);
+                        return row(
+                            entry.id,
+                            entry.icon || <Puzzle className="size-4" />,
+                            entry.name,
+                            entry.version,
+                            entry.description,
+                            record ? (
+                                installedControls(record)
+                            ) : (
+                                <Button type="primary" size="small" icon={<Download className="size-4" />} loading={busyId === entry.id} onClick={() => handleInstallOfficial(entry)}>
+                                    安装
+                                </Button>
+                            ),
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+
+    const localTab = <div className="thin-scrollbar max-h-[52vh] space-y-2 overflow-auto">{localPlugins.map((record) => row(record.id, <Puzzle className="size-4" />, record.name, record.version, record.description || record.url, installedControls(record)))}</div>;
+
+    const thirdPartyTab = (
+        <div className="space-y-3">
+            <div className="flex gap-2">
+                <Input placeholder="输入插件 JS 文件 URL，例如 https://.../plugin.js" value={url} onChange={(event) => setUrl(event.target.value)} onPressEnter={handleInstallUrl} allowClear />
+                <Button type="primary" loading={installing} onClick={handleInstallUrl} icon={<Puzzle className="size-4" />}>
+                    安装
+                </Button>
+            </div>
+            <div className="thin-scrollbar max-h-[42vh] space-y-2 overflow-auto">{thirdPartyPlugins.length === 0 ? emptyHint("还没有安装第三方插件") : thirdPartyPlugins.map((record) => row(record.id, <Puzzle className="size-4" />, record.name, record.version, record.description || record.url, installedControls(record)))}</div>
+        </div>
+    );
+
+    const tabs = [
+        { key: "official", label: "官方插件", children: officialTab },
+        ...(localPlugins.length > 0 ? [{ key: "local", label: "本地插件", children: localTab }] : []),
+        { key: "third", label: "第三方插件", children: thirdPartyTab },
+    ];
+
     return (
         <Modal title="节点插件" open={open} onCancel={onClose} footer={null} centered width={640}>
-            <div className="space-y-4">
+            <div className="space-y-3">
                 <div className="flex items-start gap-2 rounded-lg border px-3 py-2 text-xs leading-5" style={{ borderColor: "#f59e0b55", background: "#f59e0b14", color: theme.node.text }}>
                     <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-500" />
                     <span>插件代码会在当前页面内直接执行，可访问本地数据（包含 AI API Key）。请仅安装你信任来源的插件。</span>
                 </div>
-
-                <div className="flex gap-2">
-                    <Input
-                        placeholder="输入插件 JS 文件 URL，例如 https://.../plugin.js"
-                        value={url}
-                        onChange={(event) => setUrl(event.target.value)}
-                        onPressEnter={handleInstall}
-                        allowClear
-                    />
-                    <Button type="primary" loading={installing} onClick={handleInstall} icon={<Puzzle className="size-4" />}>
-                        安装
-                    </Button>
-                </div>
-
-                <div className="thin-scrollbar max-h-[46vh] space-y-2 overflow-auto">
-                    {plugins.length === 0 ? (
-                        <div className="py-10 text-center text-sm" style={{ color: theme.node.muted }}>
-                            还没有安装任何插件
-                        </div>
-                    ) : (
-                        plugins.map((record) => (
-                            <div key={record.id} className="flex items-center gap-3 rounded-xl border px-3 py-2.5" style={{ borderColor: theme.node.stroke, background: theme.node.fill }}>
-                                <span className="grid size-9 shrink-0 place-items-center rounded-lg" style={{ background: theme.toolbar.activeBg, color: theme.node.muted }}>
-                                    <Puzzle className="size-4" />
-                                </span>
-                                <div className="min-w-0 flex-1">
-                                    <div className="flex items-center gap-2 text-sm font-medium" style={{ color: theme.node.text }}>
-                                        <span className="truncate">{record.name}</span>
-                                        <span className="rounded-full px-1.5 py-0.5 text-[10px]" style={{ background: theme.toolbar.activeBg, color: theme.node.muted }}>
-                                            v{record.version}
-                                        </span>
-                                        {record.local && (
-                                            <span className="rounded-full px-1.5 py-0.5 text-[10px]" style={{ background: "#22c55e22", color: "#16a34a" }}>
-                                                本地
-                                            </span>
-                                        )}
-                                    </div>
-                                    <div className="truncate text-xs" style={{ color: theme.node.muted }}>
-                                        {record.description || record.url}
-                                    </div>
-                                </div>
-                                <Switch
-                                    size="small"
-                                    checked={record.enabled}
-                                    loading={busyId === record.id}
-                                    onChange={(checked) => runOnPlugin(record, () => setPluginEnabled(record, checked), checked ? "已启用" : "已禁用")}
-                                />
-                                {!record.local && (
-                                    <>
-                                        <Button type="text" size="small" icon={<RefreshCw className="size-4" />} loading={busyId === record.id} title="从来源更新" onClick={() => runOnPlugin(record, async () => void (await updatePlugin(record)), "已更新")} />
-                                        <Popconfirm title="卸载该插件？" okText="卸载" cancelText="取消" onConfirm={() => uninstallPlugin(record.id)}>
-                                            <Button type="text" size="small" danger icon={<Trash2 className="size-4" />} title="卸载" />
-                                        </Popconfirm>
-                                    </>
-                                )}
-                            </div>
-                        ))
-                    )}
-                </div>
+                <Tabs defaultActiveKey="official" items={tabs} />
             </div>
         </Modal>
     );