chore: update changelog for v0.8.2 and bump version to v0.8.2

# Conflicts:
#	.gitignore
#	CHANGELOG.md
#	web/bun.lock

.github/workflows/github-pages.yml

@@ -24,7 +24,7 @@ jobs:
 
       - name: Install dependencies
         working-directory: web
-        run: bun install --frozen-lockfile
+        run: bun install
 
       - name: Build
         working-directory: web

.github/workflows/publish-plugins.yml

@@ -0,0 +1,47 @@
+name: Publish Official Plugins
+
+# 构建官方插件并把产物(bundle + 清单)强推到孤儿分支 plugins-dist。
+# 与 github-pages.yml 一致,在打版本 tag 时触发 —— 发版时 web 与官方插件一起发布。
+# 前端经 jsDelivr 从该分支远程拉取;构建产物不进 main、不进 git。
+on:
+  push:
+    tags: ["v*"]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+concurrency:
+  group: publish-plugins
+  cancel-in-progress: false
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install build dependencies
+        working-directory: plugins/canvas/registry
+        run: npm install --no-audit --no-fund
+
+      - name: Build official plugins
+        working-directory: plugins/canvas/registry
+        run: npm run build
+
+      - name: Publish to plugins-dist branch
+        working-directory: plugins/canvas/registry/dist
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git init -q
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git checkout -q -b plugins-dist
+          git add -A
+          git commit -q -m "publish official plugins @ ${GITHUB_SHA::7}"
+          git push -f "https://x-access-token:${GH_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" plugins-dist

.gitignore

@@ -8,4 +8,10 @@ data/
 *.tsbuildinfo
 .DS_Store
 .idea
-web/dist
+web/dist
+
+**/dist
+web/public/plugins
+plugins/canvas/*/dist
+plugins/canvas/*/node_modules
+web/public/plugins

CHANGELOG.md

@@ -2,11 +2,41 @@
 
 ## Unreleased
 
+## v0.8.2 - 2026-07-16
+
++ [新增] 图像设置新增「透明背景」开关,开启后生成无背景的透明图像。
++ [修复] 画布节点提示词输入框补上悬停文本光标。
++ [优化] 画布节点输入区域移除灰色底色与边框、美化样式。
+
+## v0.8.1 - 2026-07-16
+
++ [新增] 插件 SDK 扩展:AI 生成能力、面板控制能力。
++ [优化] 3D 全景(1.1.0)支持上传与 AI 生成并升级查看器;
++ [优化] HTML 节点(1.2.0)迁移到统一交互开关;
++ [优化] 便利贴(1.1.0)可拖动移动、自选颜色、移除资源角标与衍生功能;
++ [优化] SVG 节点(1.1.0)透明背景融入画布、可拖动、去除默认值;
++ [优化] 画布节点渲染性能:memo 化节点回调,交互时不再全量重渲染;
++ [修复] 修复 Markdown 节点在点击/移动视角时重复渲染导致图片反复请求的问题;
++ [修复] 修复插件版本号显示不更新，插件面板新增可升级绿点提醒。
+
+## v0.8.0 - 2026-07-15
+
++ [新增] 画布节点插件系统:支持通过 URL 动态安装/启用/更新/卸载远程节点插件。
++ [新增] 插件开发 SDK,可用 TypeScript 开发画布节点插件。
++ [新增] 新增 Markdown、SVG、HTML、3D 全景、便利贴等示例插件。
++ [新增] 官方插件注册表:节点插件面板可从项目仓库读取官方插件列表并一键安装。
++ [新增] 在画布右上角工具栏新增「节点插件」入口。
++ [新增] 支持自定义生图/视频接口调用方式以适配不同中转站。
+
+## v0.7.1 - 2026-07-15
+
++ [修复] 修复页面白屏报错的问题。
+
 ## v0.7.0 - 2026-07-14
 
 + [新增] Agent 对话消息改用 streamdown 流式渲染，提升Markdown 内容展示效果。
 + [新增] Agent 新增画布、工作台、提示词库和素材等站点级工具。
-+ [新增] Agent 面板改为全站常驻右侧栏，开关时同步推动顶栏和页面内容，并保留独立入口按钮。
++ [新增] Agent 面板改为全站常驻右侧栏，开关时同步推动顶栏和页面内容。
 + [新增] Agent 新增 `site_navigate` 工具，支持页面跳转。
 + [新增] Agent 对话运行中支持一键停止，中断当前 Codex turn。
 + [新增] 画布节点支持统一维护名称字段，默认显示在节点上方，并可直接双击名称编辑。
@@ -14,7 +44,6 @@
 + [新增] 画布空白区域支持双击打开节点选择菜单，并在点击位置创建节点。
 + [调整] Codex 会话改为站点级连续线程，跨页面和跨画布保持同一上下文。
 + [调整] 移除仅前端调用 OpenAI responses 接口，统一走 MCP + 本地 Codex 链路。
-+ [调整] 移除配置与用户偏好里的 Codex 连接 Tab，本地 Agent 连接统一在 Agent 全站助手内完成。
 + [调整] 画布节点顶部工具条改为点击选中节点后显示，避免鼠标经过节点时频繁弹出。
 + [优化] 本地 Agent 连接说明明确区分插件 / 手动 MCP 才会增加 Codex token 消耗。
 + [优化] 优化本地 Agent 连接说明，区分 Codex 插件启动和直接运行 Agent 两种方式。

SECURITY.md

@@ -31,6 +31,22 @@ Please include:
 
 ## Scope
 
+### Canvas node plugins
+
+The canvas supports third-party node plugins loaded from a remote URL. By
+design, an installed plugin's code runs directly inside the web app with full
+access to the page, including locally stored data such as AI API keys. This is
+an intentional trade-off for extensibility, and the installer shows a warning
+before installing. Therefore:
+
+- Only install plugins from sources you trust.
+- Reports that a *malicious plugin* can access page data or API keys are **out
+  of scope** — that is the documented behavior of the trust model.
+- Reports **in scope** include: the app loading/executing plugin code without
+  the install confirmation, a plugin escaping its declared node type to break
+  core app integrity in ways not implied by "runs in the page", or the plugin
+  source cache being writable by an unrelated origin.
+
 Examples of in-scope reports:
 
 - Cross-site scripting or token exfiltration in the web app.

VERSION

@@ -1 +1 @@
-v0.7.0
+v0.8.2

docs/content/docs/progress/meta.json

@@ -5,6 +5,7 @@
   "pages": [
     "[更新日志](/docs/progress/changelog)",
     "local-agent-integration-plan",
+    "prompt-chip-input-plan",
     "pending-test",
     "todo"
   ]

docs/content/docs/progress/pending-test.mdx

@@ -5,7 +5,13 @@ description: 当前版本已实现但仍需人工验证的变更项
 
 # 待测试
 
-- 画布节点创建：鼠标左键双击画布空白区域会在点击位置打开节点选择菜单，可创建文本、图片、视频、音频、生成配置和组节点；双击已有节点或连线不应触发菜单。
+- 画布节点插件系统:内置节点(图片/文本/视频/音频/配置/组)改为统一注册表管理,创建菜单由注册表动态生成;需验证六种内置节点的创建、渲染、缩放、连线、小地图颜色、作为生成输入等行为与之前一致。内置节点仅这六种,其余均为插件。
+- 画布节点插件系统:左上菜单新增「节点插件」,可通过 URL 安装远程插件、启用/禁用、更新、卸载;安装时有安全警告说明插件代码在页面内执行、可访问本地数据。可用 `/plugins/sticky-note.js` 安装便利贴节点验证:换色、编辑、「衍生文本节点」(演示 applyOps 增节点+连线)。
+- 画布节点插件系统:示例插件 Markdown(编辑/渲染)、HTML(沙箱 iframe 渲染,支持 {{input}} 注入上游文本)、SVG(渲染/编辑,可取上游文本 SVG 源码)、3D 全景(three.js CDN 动态加载,可从上游图片节点取全景图并拖拽查看);均为远程插件,需分别安装 `/plugins/markdown.js`、`/plugins/html.js`、`/plugins/svg.js`、`/plugins/panorama.js` 后验证创建、渲染、编辑及与上游节点的交互。
+- 画布节点插件系统:卸载或禁用插件后,画布上遗留的该类型节点显示「缺少插件」占位且数据保留,重新安装/启用后恢复渲染;需验证刷新后已启用插件自动加载。
+- 画布节点插件系统:每个插件为 `plugins/canvas/<name>/` 独立目录(各自 package.json + esbuild + src + README,互不耦合),`npm run build` 产物落到 `dist/<name>.js` 并同步到 `web/public/plugins/`;需验证各插件可独立构建与安装。
+- 画布节点插件本地开发:每个插件支持 `npm run dev`(watch 自动构建并同步到 `web/public/plugins/`),配合 `web/.env.local` 的 `VITE_DEV_PLUGINS`(逗号分隔 URL)每次刷新重新拉取、无需反复安装;需验证改源码刷新页面即生效。
+- 画布节点创建:鼠标左键双击画布空白区域会在点击位置打开节点选择菜单,可创建文本、图片、视频、音频、生成配置和组节点;双击已有节点或连线不应触发菜单。
 - 本地 Agent 连接说明：新增提醒说明只有安装 Codex 插件或手动添加 MCP 后才会增加 Codex token 消耗，直接运行 `npx -y @basketikun/canvas-agent` 不会安装 MCP；需验证文案位置清晰。
 - 本地 Agent 连接说明：画布面板和配置页 Codex Tab 改为区分“Codex 插件启动画布”和“直接运行 Agent 后网页连接”两种方式，需验证文案和布局清晰。
 - 全站 Agent：Agent 面板从画布页抽离为全站常驻面板，挂在全局布局右侧，开/关只挤压左侧内容不遮挡；顶栏和画布工具条各有一个开关按钮，需验证在首页、生图、视频、素材、提示词库、画布等页面都能打开面板并保持 SSE 连接不断开。

docs/content/docs/progress/prompt-chip-input-plan.mdx

@@ -0,0 +1,66 @@
+---
+title: 提示词面板引用显示图片缩略图规划
+description: 将提示词面板输入框从 textarea 改造为 contentEditable，让 @ 引用直接显示真实图片缩略图
+---
+
+# 提示词面板 @ 引用显示真实图片缩略图
+
+## 背景 / 要解决的问题
+
+提示词面板（`CanvasNodePromptPanel`）的输入框里，`@` 引用一张图片后，显示的是蓝色文字 chip「图片1」。期望**直接显示这张图片的真实缩略图**，而不是文字编号。
+
+当前该输入框是原生 `<textarea>`，只能承载纯文本，无法内嵌图片。要显示缩略图，必须改用 `contentEditable`（可编辑 div），把引用做成带 `<img>` 的原子小卡片。项目里「组装提示词」组件（`CanvasConfigComposer`）已经是这套 contentEditable + 图片 chip 的成熟实现，可作蓝本。
+
+## 关键约束（为什么不能直接改现有组件）
+
+`CanvasResourceMentionTextarea` 被两处复用：
+
+1. **提示词面板** `web/src/components/canvas/canvas-node-prompt-panel.tsx` —— 本次要改的对象。`highlightLabels` 默认 true，value 是提示词字符串，引用以 label 文本「图片1」嵌在其中，**直接发给 AI**（配合 `web/src/lib/image-reference-prompt.ts` 的「参考图片编号：图片1」前缀）。
+2. **节点内文本编辑** `web/src/components/canvas/canvas-node.tsx`（`isEditingContent` 分支）—— `highlightLabels={false}`，通过 `ref` 调用 `textarea.setSelectionRange(...)` 等 **textarea 专有 API**。若把组件改成 contentEditable，这处会直接崩。
+
+> 结论：**新建一个 contentEditable chip 输入组件，只替换提示词面板那一处**；`CanvasResourceMentionTextarea`（textarea 版）保持不动，继续服务节点内文本编辑。
+
+## 方案：新增 `CanvasPromptChipInput` 组件
+
+新文件 `web/src/components/canvas/canvas-prompt-chip-input.tsx`，参照 `canvas-config-composer.tsx` 的 contentEditable 模式，但有一处**核心差异**：
+
+- 「组装提示词」把引用序列化成 `@[node:UUID]` 标记；
+- 本组件的 value 必须保持**引用的 label 文本**（如「图片1」），这样发给生成的提示词语义不变。因此 chip ↔ 文本的序列化用 **label 文本**，不是 node 标记。
+
+### 组件契约（与现用法一致）
+
+Props：`value: string`、`references: CanvasResourceReference[]`、`onChange(value)`、`onSubmit?()`、`className`、`style`、`placeholder`。图片缩略图取 `reference.previewUrl`（即 `node.metadata.content`，已存在于 `CanvasResourceReference`）。
+
+### 实现要点（大量复用 composer 的做法）
+
+1. **DOM ← value（未聚焦时重建）**：仿 `CanvasConfigComposer` 的重建 effect。用 active label 列表（`references.filter(active).map(label)`，按长度降序）把 value 字符串切成「文本片段 + 命中 label」，命中处插入 chip。聚焦时不重建（`document.activeElement === editor` 直接 return），避免与输入 / IME 打架。
+2. **chip 渲染**：仿 `createReferenceChip`。image 类型 → `size-6` 的 `<img src={reference.previewUrl}>`；其它类型 → 截断文字。chip 为 `contentEditable="false"` 的 `<span>`，用 `dataset.refLabel` 存 label 以便序列化。
+3. **value ← DOM（syncFromEditor）**：仿 `serializeNodes`，但 chip 序列化为 `dataset.refLabel`（label 文本）而非 node 标记；文本节点原样拼接，`<br>` → `\n`。
+4. **@ 菜单**：复用 `textBeforeCaret` + `/@([^\s@]*)$/` 检测；菜单定位改用 `getSelection().getRangeAt(0).getBoundingClientRect()`（比 textarea 的镜像 div 更简单、天然贴着光标）。菜单 UI 沿用现有 `MentionMenu` 的视觉（缩略图 + label + 副标题）。
+5. **原子删除**：直接复用 composer 的 `deleteAdjacentReference` / `adjacentReferenceNode` / `findReferenceSibling`——contentEditable + `contentEditable="false"` chip 天然整体删除。可把这几个通用 DOM 助手连同 `textBeforeCaret` / `placeCaretAtEnd` / `closestEditor` 复制进新组件（保持 composer 不动，规避回归风险）。
+6. **回车发送 + IME**：复用 `isPlainEnterKey` / `isImeComposing`（`@/lib/keyboard-event`）与 `onCompositionStart/End`，发送时调用 `onSubmit`。
+7. **占位符 & 样式**：空值时显示 placeholder（absolute 占位层）；容器套用面板传入的 `className/style`（`min-h-40`、透明底、无边框，与当前一致）。
+
+### 替换点
+
+`canvas-node-prompt-panel.tsx` 里把 `<CanvasResourceMentionTextarea .../>` 换成 `<CanvasPromptChipInput .../>`（同样的 value/references/onChange/onSubmit/className/style/placeholder）。其余（模型选择、设置、生成按钮）不动。
+
+### 不改动
+
+- `CanvasResourceMentionTextarea`（textarea 版）保留，节点内文本编辑继续用它。
+- 生成链路、`image-reference-prompt.ts` 前缀逻辑不变（value 仍是 label 文本）。
+
+## 影响文件
+
+- 新增：`web/src/components/canvas/canvas-prompt-chip-input.tsx`
+- 修改：`web/src/components/canvas/canvas-node-prompt-panel.tsx`（仅替换输入框组件 + 相应 import）
+
+## 验证
+
+1. `npx tsc --noEmit` 通过。
+2. dev server 刷新后：
+   - 连一张图片到图片 / 视频节点 → 面板输入框输入 `@` → 菜单贴着光标弹出 → 选中 → **输入框内显示该图的真实缩略图 chip**（不再是「图片1」文字）。
+   - 光标在 chip 后按一次 Backspace → 整个 chip 一次删除。
+   - 普通文字 + chip 混排，回车触发生成；确认发给生成的 prompt 里引用仍是「图片1」文本（生成结果正常引用到图）。
+   - 中文输入法输入不吞字、不误触发发送。
+   - 回归：双击文本节点进入内文本编辑仍正常（未受影响）。

plugins/canvas/README.md

@@ -0,0 +1,163 @@
+# Infinite Canvas 画布节点插件
+
+给画布扩展自定义节点。每个插件是一个**独立目录**,用 **TypeScript** 编写,自带 `package.json` / `build.mjs` / `src/index.tsx` / `dist/`,互不耦合,可单独构建、发布、升级。
+
+内置节点只有文本、图片、视频、音频、生成配置、组六种;其余节点(Markdown、SVG、HTML、3D 全景、便利贴……)都是插件。
+
+作者只写节点 UI 与逻辑,**类型、JSX、宿主 React、构建全部由 [`@infinite-canvas/plugin-sdk`](./sdk/README.md) 提供**,写 TSX 全程有代码提示;产物仍是宿主加载器现有契约的 ESM(React external、宿主单例)。
+
+## 目录约定
+
+```
+plugins/canvas/
+  sdk/            # 插件 SDK(类型 + automatic JSX 运行时 + 构建助手)
+  template/       # 起步模板:复制它开始写新插件
+  markdown/       # 每个插件一个独立目录
+    package.json
+    build.mjs     # 一行 buildPlugin,产物名取目录名 → dist/markdown.js
+    tsconfig.json
+    src/index.tsx # 插件源码(默认导出 definePlugin(...))
+    README.md
+  svg/ html/ panorama/ sticky-note/ ...
+```
+
+## 快速开始
+
+```bash
+cp -r plugins/canvas/template plugins/canvas/my-plugin
+cd plugins/canvas/my-plugin
+# 改 package.json 的 name;改 src/index.tsx 里的 id / nodes[].type
+npm install
+npm run dev        # watch 构建,产物同步到 web/public/plugins/my-plugin.js
+npm run typecheck  # tsc --noEmit,类型自检
+```
+
+产物名取**目录名**,复制后记得把目录改成插件名。
+
+## 构建 / 发布 / 升级
+
+```bash
+cd plugins/canvas/<name>
+npm install
+npm run build   # → dist/<name>.js,并同步到 web/public/plugins/<name>.js
+npm run dev     # watch,改动自动构建并同步
+```
+
+把 `dist/<name>.js` 托管到任意静态地址(CDN、GitHub Raw、对象存储),用户在画布「节点插件」管理器填该 URL 安装。升级时重新构建覆盖同一 URL,用户点「更新」即可。
+
+## 官方插件注册表
+
+本项目官方插件由 CI 集中构建后发布到孤儿分支 `plugins-dist`(**构建产物不进 git**),画布「节点插件」面板顶部的**官方插件**区经 jsDelivr 从该分支远程拉取并一键安装;第三方插件仍走下方「第三方插件」的 JS URL 安装。构建脚本与发布说明见 [`registry/`](./registry/README.md);清单地址可用 `VITE_PLUGIN_REGISTRY_URL` 覆盖成自建来源。
+
+## 本地开发
+
+`npm run dev` 起 watch,产物会同步到 `web/public/plugins/<name>.js`。此后有两种方式在画布里用到它:
+
+**方式一(推荐):自动发现。** 画布启动时会扫描 `web/public/plugins/` 下的插件,自动加入「节点插件」管理器列表,**默认关闭**;打开开关即启用。无需手动填 URL,启用时会按文件重新拉取,配合 watch 改完刷新即最新。
+
+**方式二:`VITE_DEV_PLUGINS`。** 在 `web/.env.local` 声明(逗号分隔多个),这些插件每次刷新页面都**重新拉取并直接激活**(不缓存、不落库、无开关):
+
+```env
+VITE_DEV_PLUGINS=/plugins/markdown.js,/plugins/svg.js
+```
+
+再起画布 `web`(`npm run dev`)。流程即:改 `src/index.tsx` → watch 自动构建 → 刷新画布看到最新效果,无需反复安装。
+
+## 用 SDK 写插件
+
+默认导出 `definePlugin({...})`(对象形式,**无需再 `const { React } = runtime`**):
+
+```tsx
+import { definePlugin, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+function Content({ ctx }: CanvasNodeContentProps) {
+    const [n, setN] = useState(0);
+    return (
+        <button onMouseDown={(e) => e.stopPropagation()} onClick={() => setN((v) => v + 1)} style={{ color: ctx.theme.node.text }}>
+            {ctx.node.title}: {n}
+        </button>
+    );
+}
+
+export default definePlugin({
+    id: "my-plugin",
+    name: "我的插件",
+    version: "1.0.0",
+    css: "…",                 // 可选:插件样式,自动注入/清理
+    nodes: [ /* CanvasNodeDefinition[] */ ],
+    setup(app) { return () => {}; }, // 可选,返回清理函数;app 含 injectCSS/emit/on
+});
+```
+
+SDK 导出的 hooks(`useState/useEffect/useMemo/useRef/...`)运行时转发宿主 React,类型来自 `@types/react`。SDK 与依赖接入见 [`sdk/README.md`](./sdk/README.md)。
+
+### CanvasNodeDefinition
+
+```ts
+{
+    type: string;                 // 建议 "<pluginId>:<name>",全局唯一
+    title: string;                // 创建菜单/默认标题
+    icon: ReactNode;              // emoji 字符串或任意 ReactNode
+    description?: string;
+    defaultSize: { width, height };
+    defaultMetadata?: object;     // 新建节点初始 metadata(文本内容放 content)
+    minimapColor?: string;
+    showInCreateMenu?: boolean;   // 默认 true
+    hasSourceHandle?: boolean;    // 右侧输出连接点,默认 true
+    keepAspectRatio?: (node) => boolean;
+    resource?: (node) => { kind: "text"|"image"|"video"|"audio", text?, url? } | null; // 作为上游输入被消费时输出什么
+    Content: ({ ctx }) => ReactNode;         // 节点主体渲染
+    Panel?: ({ ctx, onClose }) => ReactNode; // 可选:节点下方面板
+    toolbar?: (ctx) => Array<{ id, title, label, icon, onClick, danger? }>; // 追加到 hover 工具栏
+    onDoubleClick?: (ctx) => boolean;        // 返回 true 表示已处理双击
+}
+```
+
+### ctx:节点与画布交互接口
+
+`Content` / `Panel` / `toolbar` 都会拿到 `ctx`(类型 `CanvasNodeContext`):
+
+| 能力 | 说明 |
+| --- | --- |
+| `ctx.node` | 当前节点数据(含 `metadata.content` 等) |
+| `ctx.theme` / `ctx.scale` | 当前画布主题 token 与缩放,用来让 UI 跟随主题 |
+| `ctx.updateMetadata(patch)` | 更新自身 metadata(如保存内容) |
+| `ctx.updateNode(patch)` | 更新自身 title/width/height |
+| `ctx.getNode(id)` / `ctx.getNodes()` / `ctx.getConnections()` | 读画布 |
+| `ctx.getUpstream()` / `ctx.getDownstream()` | 取上/下游相连节点 |
+| `ctx.applyOps(ops)` | 用画布指令集增删节点/连线、选择、触发生成(见下) |
+| `ctx.emit(event, payload)` / `ctx.on(event, handler)` | 节点/插件间事件通信 |
+| `ctx.storage` | 插件私有持久化(按插件 id 命名空间) |
+
+> `metadata` 的**内置字段**(content、status、model…)是强类型;插件写入的**自定义字段**读出为 `unknown`,按需 `as` 断言(参考 `sticky-note` 的 `pluginColor`)。
+
+### 画布指令集(ctx.applyOps)
+
+```ts
+ctx.applyOps([
+    { type: "add_node", id?, nodeType, title?, x?, y?, width?, height?, metadata? },
+    { type: "update_node", id, patch?, metadata? },
+    { type: "delete_node", id? | ids? },
+    { type: "connect_nodes", fromNodeId, toNodeId },
+    { type: "delete_connections", id? | ids? | all? },
+    { type: "select_nodes", ids },
+    { type: "set_viewport", viewport },
+    { type: "run_generation", nodeId, mode?, prompt? },
+]);
+```
+
+## 重依赖 / 资源
+
+- **重依赖**(three.js、marked 等):不要打进 bundle,运行时 `await import("https://esm.sh/...")` 动态加载(esbuild 自动 external);在 `src/env.d.ts` 声明该模块以通过 tsc。参考 `panorama/`、`markdown/`。
+- **CSS**:写独立 `.css`,`import css from "./styles.css"` 拿到字符串(esbuild `text` loader),放到 `css` 字段自动注入/清理;`src/env.d.ts` 声明 `*.css`。参考 `markdown/`。
+- **HTML**:HTML 节点把 HTML 字符串塞进 sandbox iframe 的 `srcDoc`,自带 `<style>`,不需要插件级 CSS。参考 `html/`。
+
+## 兼容说明
+
+加载器仍接受**默认导出为工厂函数** `(runtime) => CanvasPlugin`(用 `runtime.React`)或**普通对象**;老的 JS 插件无需改动即可运行。SDK 的 automatic JSX 让新插件走对象形式,更简洁。
+
+## 注意
+
+- 插件代码会在画布页面内**直接执行**,可访问浏览器本地数据(含 AI API Key)。发布前请自审,用户也只应安装可信来源。
+- 交互控件记得 `onMouseDown={(e) => e.stopPropagation()}`(避免触发节点拖拽),滚动区域加 `onWheel={(e) => e.stopPropagation()}` 与容器 `data-canvas-no-zoom`(避免被画布缩放拦截)。

plugins/canvas/html/README.md

@@ -0,0 +1,17 @@
+# HTML 节点插件
+
+Infinite Canvas 画布节点插件:用沙箱 iframe 渲染 HTML。源码里的 `{{input}}` 会被替换为上游文本节点内容。
+
+## 构建
+
+```bash
+npm install
+npm run build      # 产物 dist/html.js,并同步到 web/public/plugins/html.js
+npm run dev        # watch
+```
+
+## 安装
+
+画布 → 左上菜单「节点插件」→ 安装 URL 填 `/plugins/html.js`(或托管后的公网 URL)。
+
+插件契约见 `plugins/canvas/README.md`。

plugins/canvas/html/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/html/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-html",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-html",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/html/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-html",
+    "version": "1.2.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas HTML 节点插件",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/html/src/index.tsx

@@ -0,0 +1,138 @@
+// HTML 节点:沙箱 iframe 渲染 HTML,{{input}} 会替换为上游文本节点内容。
+// 交互:预览态 iframe 默认 pointer-events:none —— 鼠标事件穿透到宿主节点体,
+// 因此点节点任意位置都能拖动,无需在节点上加任何标题栏/按钮。
+// 「编辑/预览」与「交互」开关都放在节点外的悬浮工具条(toolbar 扩展点),状态存 metadata。
+import { definePlugin, useMemo, useRef, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+// 源码编辑器行高/字号,行号槽与文本域必须完全一致才能对齐
+const EDITOR_FONT = 12;
+const EDITOR_LINE = 20;
+
+function HtmlEditor({ ctx, value }: { ctx: CanvasNodeContentProps["ctx"]; value: string }) {
+    const gutterRef = useRef<HTMLDivElement>(null);
+    // 行数:按换行统计,至少 1 行;value 变化时重算
+    const lineCount = useMemo(() => Math.max(1, value.split("\n").length), [value]);
+    const [scrollTop, setScrollTop] = useState(0);
+
+    const codeStyle = { fontFamily: "monospace", fontSize: EDITOR_FONT, lineHeight: `${EDITOR_LINE}px`, boxSizing: "border-box" } as const;
+
+    return (
+        <div data-canvas-no-zoom style={{ height: "100%", width: "100%", display: "flex", overflow: "hidden", borderRadius: 16, background: ctx.theme.node.fill }} onMouseDown={(e) => e.stopPropagation()}>
+            {/* 行号槽:跟随文本域滚动,不可单独滚动 */}
+            <div
+                ref={gutterRef}
+                aria-hidden
+                style={{
+                    ...codeStyle,
+                    flex: "0 0 auto",
+                    padding: "16px 8px 16px 12px",
+                    textAlign: "right",
+                    color: ctx.theme.node.placeholder,
+                    background: `${ctx.theme.toolbar.panel}66`,
+                    borderRight: `1px solid ${ctx.theme.node.stroke}`,
+                    overflow: "hidden",
+                    userSelect: "none",
+                    whiteSpace: "pre",
+                }}
+            >
+                {/* 用负 margin 让整列跟随 scrollTop 平移,和 textarea 同步 */}
+                <div style={{ transform: `translateY(${-scrollTop}px)` }}>
+                    {Array.from({ length: lineCount }, (_, i) => (
+                        <div key={i}>{i + 1}</div>
+                    ))}
+                </div>
+            </div>
+            <textarea
+                autoFocus
+                value={value}
+                placeholder="<div>Hello, {{input}}</div>"
+                spellCheck={false}
+                wrap="off"
+                onChange={(e) => ctx.updateMetadata({ content: e.target.value })}
+                onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+                onMouseDown={(e) => e.stopPropagation()}
+                onWheel={(e) => e.stopPropagation()}
+                style={{ ...codeStyle, flex: "1 1 auto", minWidth: 0, height: "100%", resize: "none", background: "transparent", padding: "16px 16px 16px 12px", outline: "none", border: "none", color: ctx.theme.node.text, whiteSpace: "pre", overflow: "auto" }}
+            />
+        </div>
+    );
+}
+
+function HtmlContent({ ctx }: CanvasNodeContentProps) {
+    const value = ctx.node.metadata?.content || "";
+    const editing = Boolean(ctx.node.metadata?.editing);
+    const upstreamText = useMemo(
+        () =>
+            ctx
+                .getUpstream()
+                .map((node) => node.metadata?.content)
+                .filter(Boolean)
+                .join("\n"),
+        [ctx],
+    );
+    const html = value.replace(/\{\{\s*input\s*\}\}/g, upstreamText);
+
+    if (editing) {
+        return <HtmlEditor ctx={ctx} value={value} />;
+    }
+
+    if (!value) {
+        return (
+            <div style={{ height: "100%", width: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, color: ctx.theme.node.placeholder }}>
+                <span style={{ fontSize: 26 }}>{"</>"}</span>
+                <span style={{ fontSize: 13 }}>选中节点,点上方工具条的 ✎ 编辑 HTML</span>
+            </div>
+        );
+    }
+
+    // 预览态:iframe 的鼠标交互由宿主「交互 ⇄ 移动」开关统一控制(见 interactionToggle),
+    // 这里无需再手动做 pointer-events 穿透。data-canvas-no-zoom 保证交互时滚动作用于页面而非缩放画布。
+    return (
+        <div data-canvas-no-zoom style={{ position: "relative", height: "100%", width: "100%" }}>
+            <iframe
+                title="html-preview"
+                sandbox="allow-scripts allow-forms"
+                srcDoc={html}
+                style={{ height: "100%", width: "100%", border: 0, borderRadius: 16, background: "#fff", display: "block" }}
+            />
+        </div>
+    );
+}
+
+export default definePlugin({
+    id: "html",
+    name: "HTML 节点",
+    version: "1.2.0",
+    description: "沙箱 iframe 渲染 HTML,支持 {{input}} 注入上游文本",
+    nodes: [
+        {
+            type: "html:render",
+            title: "HTML",
+            icon: "🌐",
+            description: "沙箱渲染 HTML",
+            defaultSize: { width: 420, height: 320 },
+            defaultMetadata: { content: "" },
+            minimapColor: "#ec4899",
+            hidePanel: true, // 纯展示型节点:点击/新建不弹出下方生图面板
+            // 宿主统一提供「交互 ⇄ 移动」开关;编辑态强制可交互(编辑器始终可操作)并隐藏该开关
+            interactionToggle: true,
+            forceInteractive: (node) => Boolean(node.metadata?.editing),
+            Content: HtmlContent,
+            // 仅保留「编辑/预览」开关;交互/移动 由宿主自动注入
+            toolbar: (ctx) => {
+                const editing = Boolean(ctx.node.metadata?.editing);
+                return [
+                    {
+                        id: "html-toggle-edit",
+                        title: editing ? "预览渲染结果" : "编辑 HTML 源码",
+                        label: editing ? "预览" : "编辑",
+                        icon: editing ? "👁" : "✎",
+                        active: editing,
+                        onClick: () => ctx.updateMetadata({ editing: !editing }),
+                    },
+                ];
+            },
+        },
+    ],
+});

plugins/canvas/html/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

plugins/canvas/markdown/README.md

@@ -0,0 +1,23 @@
+# Markdown 节点插件
+
+Infinite Canvas 画布节点插件:在画布里编辑与渲染 Markdown。
+
+## 构建
+
+```bash
+npm install
+npm run build      # 产物 dist/markdown.js,并同步到 web/public/plugins/markdown.js
+npm run dev        # watch,改动自动构建
+```
+
+## 安装
+
+画布 → 左上菜单「节点插件」→ 安装 URL 填 `/plugins/markdown.js`(或托管后的公网 URL)。
+
+## 本地开发
+
+`npm run dev` 起 watch,在 `web/.env.local` 加 `VITE_DEV_PLUGINS=/plugins/markdown.js`,起画布后改 `src/index.jsx` 刷新页面即生效,无需反复安装。
+
+插件契约见 `plugins/canvas/README.md`。
+
+> 本插件演示了独立 CSS 文件用法:`src/styles.css` 经 esbuild `text` loader 打进 bundle,通过插件 `css` 字段自动注入/清理。

plugins/canvas/markdown/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/markdown/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-markdown",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-markdown",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/markdown/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-markdown",
+    "version": "1.1.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas Markdown 节点插件",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/markdown/src/env.d.ts

@@ -0,0 +1,10 @@
+// esbuild 以 text loader 把 .css 打成字符串
+declare module "*.css" {
+    const css: string;
+    export default css;
+}
+
+// 重依赖从 CDN 动态加载,不打进 bundle;此处声明以便 TS 提示
+declare module "https://esm.sh/marked@14" {
+    export const marked: { parse: (src: string) => string };
+}

plugins/canvas/markdown/src/index.tsx

@@ -0,0 +1,125 @@
+// Markdown 节点:编辑与渲染 Markdown。marked 从 CDN 按需加载,不打进插件体积。
+// 移动/交互:走宿主统一的「交互 ⇄ 移动」开关(interactionToggle)——默认「移动」态整块可拖,
+//   切「交互」态可滚动/选择;编辑态强制可交互。
+// 防闪烁:解析结果按源码模块级缓存,且只在 HTML 真正变化时写入 DOM——
+//   画布任何重渲染都不会重新解析或重载 Markdown 里的图片。
+// styles.css 由 esbuild 以 text 方式打进 bundle,通过 plugin.css 自动注入。
+import { definePlugin, useEffect, useRef, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+import css from "./styles.css";
+
+type Marked = { parse: (src: string) => string };
+
+let marked: Marked | undefined; // 加载完成后的 marked 实例,模块级缓存,后续同步渲染
+let markedPromise: Promise<Marked> | undefined;
+function loadMarked(): Promise<Marked> {
+    if (marked) return Promise.resolve(marked);
+    if (!markedPromise) markedPromise = import("https://esm.sh/marked@14").then((mod: { marked: Marked }) => (marked = mod.marked));
+    return markedPromise;
+}
+
+const PLACEHOLDER = "*选中节点,点上方工具条的 ✎ 编辑 Markdown*";
+
+// 解析结果按源码缓存(模块级):同一段 Markdown 只解析一次,重复渲染/重挂载都命中缓存,
+// 返回的是同一个字符串引用,配合下方「值不变不写 DOM」彻底避免图片被重新请求。
+const htmlCache = new Map<string, string>();
+function renderMarkdown(source: string): string {
+    if (!marked) return "";
+    const key = source || PLACEHOLDER;
+    let out = htmlCache.get(key);
+    if (out === undefined) {
+        out = marked.parse(key);
+        htmlCache.set(key, out);
+    }
+    return out;
+}
+
+// 预览态:用 ref 手动写 innerHTML,且仅在 html 真正变化时写入。
+// 这样宿主的任何重渲染(点击、移动视角、选中态变化等)都不会触碰已渲染的 DOM,图片不会重新加载。
+function MarkdownPreview({ ctx }: CanvasNodeContentProps) {
+    const [, force] = useState(0);
+    const ref = useRef<HTMLDivElement>(null);
+    const lastHtml = useRef<string | null>(null);
+
+    // marked 未就绪时按需加载,加载完触发一次重渲染填充内容
+    useEffect(() => {
+        if (marked) return;
+        let alive = true;
+        loadMarked().then(() => alive && force((n) => n + 1));
+        return () => {
+            alive = false;
+        };
+    }, []);
+
+    const source = (ctx.node.metadata?.content as string | undefined) || "";
+    const html = renderMarkdown(source);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || lastHtml.current === html) return; // 内容没变:不动 DOM,已加载的图片保持原样
+        el.innerHTML = html;
+        lastHtml.current = html;
+    }, [html]);
+
+    return <div ref={ref} className="cnv-md" data-canvas-no-zoom onWheel={(e) => e.stopPropagation()} style={{ height: "100%", width: "100%", color: ctx.theme.node.text }} />;
+}
+
+function MarkdownEditor({ ctx }: CanvasNodeContentProps) {
+    const value = (ctx.node.metadata?.content as string | undefined) || "";
+    return (
+        <textarea
+            autoFocus
+            value={value}
+            placeholder="# 输入 Markdown"
+            onChange={(e) => ctx.updateMetadata({ content: e.target.value })}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onWheel={(e) => e.stopPropagation()}
+            style={{ height: "100%", width: "100%", resize: "none", background: ctx.theme.node.fill, borderRadius: 16, boxSizing: "border-box", padding: 16, fontFamily: "monospace", fontSize: 14, outline: "none", border: "none", color: ctx.theme.node.text }}
+        />
+    );
+}
+
+function MarkdownContent({ ctx }: CanvasNodeContentProps) {
+    return ctx.node.metadata?.editing ? <MarkdownEditor ctx={ctx} /> : <MarkdownPreview ctx={ctx} />;
+}
+
+export default definePlugin({
+    id: "markdown",
+    name: "Markdown 节点",
+    version: "1.1.0",
+    description: "在画布中编辑与渲染 Markdown",
+    css,
+    nodes: [
+        {
+            type: "markdown:doc",
+            title: "Markdown",
+            icon: "📝",
+            description: "编辑与渲染 Markdown",
+            defaultSize: { width: 360, height: 300 },
+            defaultMetadata: { content: "" },
+            minimapColor: "#6366f1",
+            hidePanel: true, // 纯展示/编辑节点:不弹出下方生图面板
+            // 宿主统一提供「交互 ⇄ 移动」开关;编辑态强制可交互并隐藏该开关
+            interactionToggle: true,
+            forceInteractive: (node) => Boolean(node.metadata?.editing),
+            resource: (node) => ({ kind: "text", text: node.metadata?.content }),
+            Content: MarkdownContent,
+            // 仅保留「编辑/预览」开关(状态存 metadata.editing);交互/移动 由宿主自动注入
+            toolbar: (ctx) => {
+                const editing = Boolean(ctx.node.metadata?.editing);
+                return [
+                    {
+                        id: "md-toggle-edit",
+                        title: editing ? "预览渲染结果" : "编辑 Markdown 源码",
+                        label: editing ? "预览" : "编辑",
+                        icon: editing ? "👁" : "✎",
+                        active: editing,
+                        onClick: () => ctx.updateMetadata({ editing: !editing }),
+                    },
+                ];
+            },
+        },
+    ],
+});

plugins/canvas/markdown/src/styles.css

@@ -0,0 +1,59 @@
+.cnv-md {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    padding: 16px;
+    font-size: 14px;
+    line-height: 1.6;
+}
+.cnv-md h1,
+.cnv-md h2,
+.cnv-md h3 {
+    margin: 0.6em 0 0.3em;
+    font-weight: 600;
+    line-height: 1.3;
+}
+.cnv-md h1 {
+    font-size: 1.5em;
+}
+.cnv-md h2 {
+    font-size: 1.3em;
+}
+.cnv-md p {
+    margin: 0.5em 0;
+}
+.cnv-md a {
+    color: #6366f1;
+    text-decoration: underline;
+}
+.cnv-md code {
+    padding: 0.1em 0.35em;
+    border-radius: 4px;
+    background: rgba(120, 120, 120, 0.16);
+    font-family: monospace;
+    font-size: 0.9em;
+}
+.cnv-md pre {
+    padding: 12px;
+    border-radius: 8px;
+    background: rgba(120, 120, 120, 0.14);
+    overflow: auto;
+}
+.cnv-md pre code {
+    padding: 0;
+    background: transparent;
+}
+.cnv-md ul,
+.cnv-md ol {
+    padding-left: 1.4em;
+    margin: 0.5em 0;
+}
+.cnv-md blockquote {
+    margin: 0.5em 0;
+    padding-left: 0.8em;
+    border-left: 3px solid rgba(120, 120, 120, 0.4);
+    opacity: 0.85;
+}
+.cnv-md img {
+    max-width: 100%;
+}

plugins/canvas/markdown/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

plugins/canvas/panorama/README.md

@@ -0,0 +1,17 @@
+# 3D 全景节点插件
+
+Infinite Canvas 画布节点插件:查看 360° 等距柱状(equirectangular)全景图,可拖拽旋转。可从上游图片节点自动取图。three.js 运行时从 CDN 按需加载,不打进插件体积。
+
+## 构建
+
+```bash
+npm install
+npm run build      # 产物 dist/panorama.js,并同步到 web/public/plugins/panorama.js
+npm run dev        # watch
+```
+
+## 安装
+
+画布 → 左上菜单「节点插件」→ 安装 URL 填 `/plugins/panorama.js`(或托管后的公网 URL)。连接一个全景图片节点到本节点即可查看。
+
+插件契约见 `plugins/canvas/README.md`。

plugins/canvas/panorama/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/panorama/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-panorama",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-panorama",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/panorama/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-panorama",
+    "version": "1.1.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas 3D 全景节点插件",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/panorama/src/env.d.ts

@@ -0,0 +1,2 @@
+// three 从 CDN 动态加载,不打进 bundle;声明为宽松类型以便通过 tsc
+declare module "https://esm.sh/three@0.180.0";

plugins/canvas/panorama/src/index.tsx

@@ -0,0 +1,311 @@
+// 3D 全景节点:等距柱状(equirectangular)360° 全景查看器。
+// 三种取图方式:① 从上游图片节点自动取图 ② 本地上传 ③ AI 生成(复用宿主内置生成面板)。
+// three.js 从 CDN 按需加载,不打进 bundle。AI 生成通过 useBuiltinPanel 声明,结果写回本节点。
+import { definePlugin, useCallback, useEffect, useRef, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps, CanvasNodeContext } from "@infinite-canvas/plugin-sdk";
+
+// three 从 CDN 动态加载(env.d.ts 里声明为 any),不打进 bundle
+let threePromise: Promise<any> | undefined;
+function loadThree(): Promise<any> {
+    if (!threePromise) threePromise = import("https://esm.sh/three@0.180.0");
+    return threePromise;
+}
+
+// AI 生成的固定前置提示词:约束模型产出可用于球面贴图的 equirectangular 全景图。
+// 用户只需描述场景内容,这段会自动拼在前面,保证 2:1、无缝、无畸变文字等。
+const PANORAMA_SYSTEM_PROMPT =
+    "A seamless 360-degree equirectangular panorama, 2:1 aspect ratio, full spherical VR photo, " +
+    "horizontally wrapping seamlessly at the left and right edges, no visible seam, no distortion artifacts, " +
+    "even horizon, no text, no watermark. Scene: ";
+
+// ---------------------------------------------------------------------------
+// 全景查看器:球体内壁贴等距柱状纹理,指针拖动转视角、滚轮缩放 fov。
+// 自适应容器尺寸(ResizeObserver);超过 GPU 上限的大图先降采样,避免加载失败。
+// ---------------------------------------------------------------------------
+function PanoramaViewer({ src, ctx }: { src: string; ctx: CanvasNodeContext }) {
+    const mountRef = useRef<HTMLDivElement>(null);
+    const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
+
+    useEffect(() => {
+        const mount = mountRef.current;
+        if (!mount || !src) return;
+        let disposed = false;
+        let frame = 0;
+        let renderer: any = null;
+        let geometry: any = null;
+        let material: any = null;
+        let texture: any = null;
+        let resizeObserver: ResizeObserver | null = null;
+        let cleanupEvents = () => {};
+
+        setStatus("loading");
+
+        loadThree()
+            .then((THREE: any) => {
+                if (disposed || !mountRef.current) return;
+
+                const scene = new THREE.Scene();
+                const camera = new THREE.PerspectiveCamera(70, 1, 1, 1100);
+                const target = new THREE.Vector3();
+
+                renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+                renderer.setClearColor(0x000000, 1);
+                const canvas: HTMLCanvasElement = renderer.domElement;
+                canvas.style.width = "100%";
+                canvas.style.height = "100%";
+                canvas.style.display = "block";
+                canvas.style.cursor = "grab";
+                mount.appendChild(canvas);
+                const maxTextureSide = Math.min(renderer.capabilities.maxTextureSize || 4096, 4096);
+
+                geometry = new THREE.SphereGeometry(500, 96, 64);
+                geometry.scale(-1, 1, 1); // 翻转法线,从球心向内看
+                material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+                scene.add(new THREE.Mesh(geometry, material));
+
+                // 视角状态
+                let lon = 0;
+                let lat = 0;
+                let fov = 70;
+                let dragging = false;
+                let startX = 0;
+                let startY = 0;
+                let startLon = 0;
+                let startLat = 0;
+
+                const onDown = (event: PointerEvent) => {
+                    dragging = true;
+                    startX = event.clientX;
+                    startY = event.clientY;
+                    startLon = lon;
+                    startLat = lat;
+                    canvas.style.cursor = "grabbing";
+                    canvas.setPointerCapture?.(event.pointerId);
+                };
+                const onMove = (event: PointerEvent) => {
+                    if (!dragging) return;
+                    lon = startLon - (event.clientX - startX) * 0.12;
+                    lat = Math.max(-84, Math.min(84, startLat + (event.clientY - startY) * 0.12));
+                };
+                const onUp = () => {
+                    dragging = false;
+                    canvas.style.cursor = "grab";
+                };
+                const onWheel = (event: WheelEvent) => {
+                    event.preventDefault();
+                    fov = Math.max(38, Math.min(86, fov + event.deltaY * 0.035));
+                };
+                canvas.addEventListener("pointerdown", onDown);
+                canvas.addEventListener("pointermove", onMove);
+                canvas.addEventListener("pointerup", onUp);
+                canvas.addEventListener("pointercancel", onUp);
+                canvas.addEventListener("wheel", onWheel, { passive: false });
+                cleanupEvents = () => {
+                    canvas.removeEventListener("pointerdown", onDown);
+                    canvas.removeEventListener("pointermove", onMove);
+                    canvas.removeEventListener("pointerup", onUp);
+                    canvas.removeEventListener("pointercancel", onUp);
+                    canvas.removeEventListener("wheel", onWheel);
+                };
+
+                const resize = () => {
+                    if (!renderer || !mountRef.current) return;
+                    const width = Math.max(1, mountRef.current.clientWidth);
+                    const height = Math.max(1, mountRef.current.clientHeight);
+                    renderer.setSize(width, height, false);
+                    camera.aspect = width / height;
+                    camera.updateProjectionMatrix();
+                };
+                resizeObserver = new ResizeObserver(resize);
+                resizeObserver.observe(mount);
+                resize();
+
+                const render = () => {
+                    if (disposed || !renderer) return;
+                    if (!dragging) lon += 0.02; // 缓慢自转
+                    camera.fov = fov;
+                    camera.updateProjectionMatrix();
+                    const phi = THREE.MathUtils.degToRad(90 - lat);
+                    const theta = THREE.MathUtils.degToRad(lon);
+                    target.set(500 * Math.sin(phi) * Math.cos(theta), 500 * Math.cos(phi), 500 * Math.sin(phi) * Math.sin(theta));
+                    camera.lookAt(target);
+                    renderer.render(scene, camera);
+                    frame = requestAnimationFrame(render);
+                };
+                render();
+
+                // 载入纹理:大图降采样到 GPU 上限,避免超限导致黑屏/失败
+                const image = new Image();
+                image.crossOrigin = "anonymous";
+                image.onload = () => {
+                    if (disposed || !material) return;
+                    try {
+                        const w = image.naturalWidth || image.width;
+                        const h = image.naturalHeight || image.height;
+                        const scale = Math.min(1, maxTextureSide / w, maxTextureSide / h);
+                        let source: HTMLImageElement | HTMLCanvasElement = image;
+                        if (scale < 1) {
+                            const c = document.createElement("canvas");
+                            c.width = Math.max(1, Math.round(w * scale));
+                            c.height = Math.max(1, Math.round(h * scale));
+                            c.getContext("2d")?.drawImage(image, 0, 0, c.width, c.height);
+                            source = c;
+                        }
+                        texture = source instanceof HTMLCanvasElement ? new THREE.CanvasTexture(source) : new THREE.Texture(source);
+                        texture.colorSpace = THREE.SRGBColorSpace;
+                        texture.minFilter = THREE.LinearFilter;
+                        texture.needsUpdate = true;
+                        material.map = texture;
+                        material.needsUpdate = true;
+                        setStatus("ready");
+                    } catch {
+                        setStatus("error");
+                    }
+                };
+                image.onerror = () => !disposed && setStatus("error");
+                image.src = src;
+            })
+            .catch(() => !disposed && setStatus("error"));
+
+        return () => {
+            disposed = true;
+            cleanupEvents();
+            resizeObserver?.disconnect();
+            if (frame) cancelAnimationFrame(frame);
+            texture?.dispose?.();
+            material?.dispose?.();
+            geometry?.dispose?.();
+            if (renderer) {
+                renderer.domElement?.remove?.();
+                renderer.dispose?.();
+                renderer.forceContextLoss?.();
+            }
+        };
+    }, [src]);
+
+    return (
+        <div style={{ position: "relative", height: "100%", width: "100%", overflow: "hidden", borderRadius: 16, background: "#000" }}>
+            <div ref={mountRef} data-canvas-no-zoom onMouseDown={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()} style={{ position: "absolute", inset: 0 }} />
+            {status !== "ready" ? (
+                <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", pointerEvents: "none", color: ctx.theme.node.placeholder, fontSize: 13, background: status === "error" ? "rgba(0,0,0,0.6)" : `linear-gradient(135deg, ${ctx.theme.node.fill}, #000)` }}>
+                    {status === "error" ? "全景图读取失败,请换 2:1 的 JPG/PNG 全景图" : "正在加载全景…"}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// 空态:两个明确按钮——「上传全景图」和「AI 生成」(打开下方内置生成面板)。
+// 整块不可点,避免误触;拖动节点照常。
+// ---------------------------------------------------------------------------
+function PanoramaEmpty({ ctx }: { ctx: CanvasNodeContext }) {
+    const fileRef = useRef<HTMLInputElement>(null);
+
+    // 本地上传:读为 dataURL 写入自身 metadata.content
+    const onPick = useCallback(
+        (file: File | undefined) => {
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = () => ctx.updateMetadata({ content: String(reader.result || "") });
+            reader.readAsDataURL(file);
+        },
+        [ctx],
+    );
+
+    const t = ctx.theme;
+    const baseBtn = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        cursor: "pointer",
+        borderRadius: 999,
+        padding: "9px 18px",
+        fontSize: 13,
+        fontWeight: 600,
+        border: `1px solid ${t.node.stroke}`,
+        background: t.node.fill,
+        color: t.node.text,
+    } as const;
+
+    return (
+        <div style={{ height: "100%", width: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: 20, borderRadius: 16, boxSizing: "border-box", background: t.node.fill }}>
+            <span style={{ fontSize: 34 }}>🌐</span>
+            <div data-canvas-no-zoom onMouseDown={(e) => e.stopPropagation()} style={{ display: "flex", gap: 10 }}>
+                <input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => onPick(e.target.files?.[0])} />
+                <button type="button" style={baseBtn} onClick={() => fileRef.current?.click()}>
+                    🖼 上传全景图
+                </button>
+                <button type="button" style={{ ...baseBtn, border: "none", background: t.toolbar.activeBg, color: t.toolbar.activeText }} onClick={() => ctx.openPanel()}>
+                    ✨ AI 生成
+                </button>
+            </div>
+            <span style={{ fontSize: 12, color: t.node.placeholder, textAlign: "center" }}>支持 2:1 等距柱状全景图</span>
+        </div>
+    );
+}
+
+function PanoramaContent({ ctx }: CanvasNodeContentProps) {
+    const upstreamImage = ctx
+        .getUpstream()
+        .map((node) => node.metadata?.content)
+        .find((content): content is string => typeof content === "string" && Boolean(content));
+    const source = (typeof ctx.node.metadata?.content === "string" ? ctx.node.metadata.content : "") || upstreamImage || "";
+
+    if (!source) return <PanoramaEmpty ctx={ctx} />;
+    return <PanoramaViewer src={source} ctx={ctx} />;
+}
+
+export default definePlugin({
+    id: "panorama",
+    name: "3D 全景节点",
+    version: "1.1.0",
+    description: "查看 360° 等距柱状全景图,支持上传与 AI 生成,可从上游图片节点取图",
+    nodes: [
+        {
+            type: "panorama:viewer",
+            title: "3D 全景",
+            icon: "🌐",
+            description: "360° 全景查看器(上传 / AI 生成)",
+            defaultSize: { width: 480, height: 300 },
+            defaultMetadata: {},
+            minimapColor: "#0ea5e9",
+            // 宿主自动提供「交互 ⇄ 移动」开关:默认移动(拖动节点),切到交互后可转全景视角
+            interactionToggle: true,
+            // 复用宿主内置生成面板(模型选择/设置/提示词库完全一致),生成结果写回本节点。
+            // 前缀约束模型产出可用于球面贴图的 equirectangular 全景图。
+            useBuiltinPanel: { mode: "image", promptPrefix: PANORAMA_SYSTEM_PROMPT, writeBackToSelf: true },
+            // 作为上游被消费时,输出自身全景图,供下游节点引用
+            resource: (node) => {
+                const content = node.metadata?.content;
+                return typeof content === "string" && content ? { kind: "image", url: content } : null;
+            },
+            Content: PanoramaContent,
+            // 工具条始终提供「AI 生成」(打开下方内置面板);有图时额外提供「换图」
+            toolbar: (ctx) => {
+                const hasOwnContent = typeof ctx.node.metadata?.content === "string" && Boolean(ctx.node.metadata?.content);
+                return [
+                    {
+                        id: "panorama-generate",
+                        title: "用 AI 生成全景图(打开下方面板)",
+                        label: "AI 生成",
+                        icon: "✨",
+                        onClick: () => ctx.openPanel(),
+                    },
+                    ...(hasOwnContent
+                        ? [
+                              {
+                                  id: "panorama-reset",
+                                  title: "清空当前全景图,重新上传",
+                                  label: "换图",
+                                  icon: "🔄",
+                                  onClick: () => ctx.updateMetadata({ content: "" }),
+                              },
+                          ]
+                        : []),
+                ];
+            },
+        },
+    ],
+});

plugins/canvas/panorama/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

plugins/canvas/registry/README.md

@@ -0,0 +1,39 @@
+# 官方插件注册表(集中构建 + 远程发布)
+
+本目录**只放构建脚本**,不放构建产物。官方插件由 CI 构建后发布到孤儿分支 `plugins-dist`,画布经 jsDelivr 从该分支远程拉取并一键安装。第三方插件不进本流程,由用户自行填 JS URL 安装。
+
+```
+registry/
+  package.json    # 构建依赖(esbuild + SDK)
+  build.mjs       # 一次进程构建所有官方插件 → dist/(gitignore)+ 生成清单
+  dist/           # 构建产物(gitignore,不提交;CI 发布到 plugins-dist 分支)
+```
+
+**产物不进 git**:`dist/` 与 `node_modules/` 均被 `.gitignore` 覆盖。`main` 分支只有源码与脚本。
+
+## 发布流程(CI 自动)
+
+`.github/workflows/publish-plugins.yml` 在**打版本 tag(`v*`)**或手动触发(`workflow_dispatch`)时,与 GitHub Pages 发布一起跑:
+
+1. `npm install && npm run build` → 在 `dist/` 产出各 `<id>.js` 与 `official-plugins.json`;
+2. 把 `dist/` 强推到孤儿分支 **`plugins-dist`**(仅含产物,force-push 覆盖)。
+
+前端默认从下面地址读取(可用 `VITE_PLUGIN_REGISTRY_URL` 覆盖):
+
+```
+https://cdn.jsdelivr.net/gh/basketikun/infinite-canvas@plugins-dist/official-plugins.json
+```
+
+清单里每条的 `entry`(相对文件名)由前端解析成与清单同目录的绝对 URL,再走既有 URL 安装流程。jsDelivr 对分支有缓存(约数小时),需要立即生效可对该分支目录做 purge。
+
+## 新增 / 更新官方插件
+
+- 改完某官方插件源码后,在 `build.mjs` 的 `OFFICIAL` 里保持登记(新增插件在此加一条),提交到 `main`;
+- 下次打版本 tag(或手动 `workflow_dispatch`)时,CI 自动重新构建并发布到 `plugins-dist`。
+
+## 本地自测官方面板
+
+```bash
+cd plugins/canvas/registry && npm install && npm run build   # 产出 dist/
+# 用任意静态服务器伺服 dist/,把 VITE_PLUGIN_REGISTRY_URL 指向其 official-plugins.json
+```

plugins/canvas/registry/build.mjs

@@ -0,0 +1,69 @@
+// 官方插件集中构建:一次进程构建所有官方插件 + 生成清单,产物进 dist/(已 gitignore)。
+// 官方插件目录本身不各自安装依赖:统一从本目录 node_modules 解析 SDK(nodePaths)。
+// CI(publish-plugins.yml)把 dist/ 强推到 plugins-dist 分支,前端经 jsDelivr 远程拉取。
+// 本地自测:`npm install && npm run build`,再把 VITE_PLUGIN_REGISTRY_URL 指向本地 dist。
+import { build } from "esbuild";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = dirname(fileURLToPath(import.meta.url));
+const outDir = join(root, "dist");
+const nodeModules = join(root, "node_modules");
+
+// 官方插件登记表:新增官方插件在此登记即可。
+// 版本不在这里写死 —— 从各插件的 package.json 读取(单一真源),
+// 与插件 src 里 definePlugin({version}) 保持一致,避免清单与产物版本脱节。
+const OFFICIAL = [
+    { id: "markdown", dir: "markdown", name: "Markdown 节点", description: "在画布中编辑与渲染 Markdown", icon: "📝" },
+    { id: "svg", dir: "svg", name: "SVG 节点", description: "透明背景渲染 SVG,可接收上游文本节点的 SVG 源码", icon: "🔷" },
+    { id: "html", dir: "html", name: "HTML 节点", description: "沙箱 iframe 渲染 HTML,支持 {{input}} 注入上游文本", icon: "🌐" },
+    { id: "panorama", dir: "panorama", name: "3D 全景节点", description: "查看 360° 等距柱状全景图,可从上游图片节点取图", icon: "🧭" },
+    { id: "sticky-note", dir: "sticky-note", name: "便利贴节点", description: "可自选颜色、双击编辑、拖动即可移动的便利贴", icon: "📌" },
+];
+
+// 读取插件 package.json 的 version 作为清单版本的唯一来源
+async function readPluginVersion(dir) {
+    const pkg = JSON.parse(await readFile(join(root, "..", dir, "package.json"), "utf8"));
+    if (!pkg.version) throw new Error(`插件 ${dir} 的 package.json 缺少 version`);
+    return pkg.version;
+}
+
+await rm(outDir, { recursive: true, force: true });
+await mkdir(outDir, { recursive: true });
+
+for (const plugin of OFFICIAL) {
+    await build({
+        entryPoints: [join(root, "..", plugin.dir, "src", "index.tsx")],
+        outfile: join(outDir, `${plugin.id}.js`),
+        bundle: true,
+        format: "esm",
+        platform: "browser",
+        target: "es2020",
+        // automatic JSX → SDK 的 jsx-runtime(内部用宿主 React),react external
+        jsx: "automatic",
+        jsxImportSource: "@infinite-canvas/plugin-sdk",
+        loader: { ".ts": "ts", ".tsx": "tsx", ".css": "text" },
+        external: ["react", "react-dom"],
+        minify: true,
+        nodePaths: [nodeModules],
+    });
+    console.log(`built ${plugin.id}.js`);
+}
+
+const manifest = {
+    // 清单结构版本;entry 为相对本清单的 bundle 文件名,由前端解析成绝对 URL
+    version: 1,
+    plugins: await Promise.all(
+        OFFICIAL.map(async (plugin) => ({
+            id: plugin.id,
+            name: plugin.name,
+            version: await readPluginVersion(plugin.dir),
+            description: plugin.description,
+            icon: plugin.icon,
+            entry: `${plugin.id}.js`,
+        })),
+    ),
+};
+await writeFile(join(outDir, "official-plugins.json"), JSON.stringify(manifest, null, 4) + "\n");
+console.log(`wrote official-plugins.json (${OFFICIAL.length} plugins) → dist/`);

plugins/canvas/registry/package-lock.json

@@ -0,0 +1,517 @@
+{
+    "name": "canvas-official-plugins",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-official-plugins",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "esbuild": "^0.25.0"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+            "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+            "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+            "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+            "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+            "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+            "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+            "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+            "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+            "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+            "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+            "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+            "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+            "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+            "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+            "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+            "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+            "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+            "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openharmony-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+            "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openharmony"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+            "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+            "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+            "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+            "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/esbuild": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+            "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.25.12",
+                "@esbuild/android-arm": "0.25.12",
+                "@esbuild/android-arm64": "0.25.12",
+                "@esbuild/android-x64": "0.25.12",
+                "@esbuild/darwin-arm64": "0.25.12",
+                "@esbuild/darwin-x64": "0.25.12",
+                "@esbuild/freebsd-arm64": "0.25.12",
+                "@esbuild/freebsd-x64": "0.25.12",
+                "@esbuild/linux-arm": "0.25.12",
+                "@esbuild/linux-arm64": "0.25.12",
+                "@esbuild/linux-ia32": "0.25.12",
+                "@esbuild/linux-loong64": "0.25.12",
+                "@esbuild/linux-mips64el": "0.25.12",
+                "@esbuild/linux-ppc64": "0.25.12",
+                "@esbuild/linux-riscv64": "0.25.12",
+                "@esbuild/linux-s390x": "0.25.12",
+                "@esbuild/linux-x64": "0.25.12",
+                "@esbuild/netbsd-arm64": "0.25.12",
+                "@esbuild/netbsd-x64": "0.25.12",
+                "@esbuild/openbsd-arm64": "0.25.12",
+                "@esbuild/openbsd-x64": "0.25.12",
+                "@esbuild/openharmony-arm64": "0.25.12",
+                "@esbuild/sunos-x64": "0.25.12",
+                "@esbuild/win32-arm64": "0.25.12",
+                "@esbuild/win32-ia32": "0.25.12",
+                "@esbuild/win32-x64": "0.25.12"
+            }
+        }
+    }
+}

plugins/canvas/registry/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "canvas-official-plugins",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas 官方插件的集中构建(CI 发布到 plugins-dist 分支)",
+    "scripts": {
+        "build": "node build.mjs"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "esbuild": "^0.25.0"
+    }
+}

plugins/canvas/sdk/README.md

@@ -0,0 +1,77 @@
+# @infinite-canvas/plugin-sdk
+
+Infinite Canvas 画布节点插件的 **TypeScript SDK**。插件作者只写节点 UI 与逻辑,类型、JSX、运行时桥接、构建全部由 SDK 提供;产物仍是宿主加载器现有契约的 ESM(React external,宿主单例)。
+
+## 提供什么
+
+| 能力 | 说明 |
+| --- | --- |
+| **完整类型** | `CanvasPlugin` / `CanvasNodeDefinition` / `CanvasNodeContext` / `CanvasAgentOp` / `CanvasTheme` / `CanvasNodeData` … 全部有提示 |
+| `definePlugin(...)` | 给插件对象(或工厂)补全类型;对象形式无需再 `const { React } = runtime` |
+| automatic JSX | `jsxImportSource` 指向本包,TSX 自动转发到宿主 React,**不打包第二份 React** |
+| 类型化 hooks | `import { useState, useEffect, useMemo, useRef, ... }`,运行时转发宿主 React |
+| `buildPlugin(...)` | 统一 esbuild 构建,插件 `build.mjs` 只需一行 |
+
+## 最小插件
+
+```tsx
+// src/index.tsx
+import { definePlugin, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+function Content({ ctx }: CanvasNodeContentProps) {
+    const [n, setN] = useState(0);
+    return (
+        <button onMouseDown={(e) => e.stopPropagation()} onClick={() => setN((v) => v + 1)} style={{ color: ctx.theme.node.text }}>
+            {ctx.node.title}: {n}
+        </button>
+    );
+}
+
+export default definePlugin({
+    id: "my-plugin",
+    name: "我的插件",
+    version: "1.0.0",
+    nodes: [
+        {
+            type: "my-plugin:node",
+            title: "示例",
+            icon: "✨",
+            defaultSize: { width: 240, height: 160 },
+            Content,
+        },
+    ],
+});
+```
+
+```js
+// build.mjs
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+await buildPlugin(import.meta.url);
+```
+
+`npm run build` 产出 `dist/<目录名>.js` 并同步到 `web/public/plugins/`。
+
+## 依赖接入
+
+插件 `package.json`:
+
+```json
+{
+    "type": "module",
+    "scripts": { "build": "node build.mjs", "dev": "node build.mjs --watch", "typecheck": "tsc --noEmit" },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}
+```
+
+插件 `tsconfig.json` 关键项:`"jsx": "react-jsx"`、`"jsxImportSource": "@infinite-canvas/plugin-sdk"`、`"moduleResolution": "bundler"`。
+
+## 设计约束
+
+- **React 单例**:JSX 与 hooks 惰性读取 `globalThis.InfiniteCanvasRuntime.React`(宿主在加载插件前注入),react 全程 external,绝不打包第二份。
+- **重依赖**:three、marked 等在源码里 `await import("https://esm.sh/...")` 动态加载,esbuild 自动 external,不进 bundle。
+- **类型真源**:`src/types.ts` 是宿主 `web/src/types/canvas-plugin.ts` 公开契约的镜像;宿主契约变更时同步此处。

plugins/canvas/sdk/build.mjs

@@ -0,0 +1,75 @@
+// 共享构建助手:插件的 build.mjs 只需一行 `buildPlugin(import.meta.url)`。
+// 统一 esbuild 配置(automatic JSX 指向本 SDK、react external、TS/TSX/CSS loader、
+// 产物同步到 web/public/plugins),消除各插件重复的构建脚本。
+
+import { build, context } from "esbuild";
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { basename, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * @param {string} metaUrl 插件 build.mjs 的 import.meta.url
+ * @param {{ name?: string, entry?: string, publicDir?: string, esbuild?: object, plugins?: import("esbuild").Plugin[] }} [overrides]
+ */
+export async function buildPlugin(metaUrl, overrides = {}) {
+    const root = dirname(fileURLToPath(metaUrl));
+    const name = overrides.name ?? basename(root); // 目录名即产物名,如 markdown → markdown.js
+    const distDir = join(root, "dist");
+    // 默认同步到仓库内 web/public/plugins(plugins/canvas/<name> → 上溯三层到仓库根)
+    const publicDir = overrides.publicDir ?? join(root, "..", "..", "..", "web", "public", "plugins");
+    const watch = process.argv.includes("--watch");
+    const entry = overrides.entry ?? join(root, "src", "index.tsx");
+
+    const syncToPublic = {
+        name: "sync-to-public",
+        setup(builder) {
+            builder.onEnd(async (result) => {
+                if (result.errors.length) return;
+                await mkdir(publicDir, { recursive: true });
+                await cp(join(distDir, `${name}.js`), join(publicDir, `${name}.js`));
+                // 维护本地插件清单 index.json,供画布启动时自动发现(该目录已 gitignore,仅本地开发用)
+                const indexPath = join(publicDir, "index.json");
+                let list = [];
+                try {
+                    const parsed = JSON.parse(await readFile(indexPath, "utf8"));
+                    if (Array.isArray(parsed)) list = parsed;
+                } catch {
+                    // 无清单则新建
+                }
+                const entry = `/plugins/${name}.js`;
+                if (!list.includes(entry)) {
+                    list.push(entry);
+                    await writeFile(indexPath, JSON.stringify(list, null, 2) + "\n");
+                }
+                console.log(`[${name}] synced → web/public/plugins/${name}.js`);
+            });
+        },
+    };
+
+    const options = {
+        entryPoints: [entry],
+        outfile: join(distDir, `${name}.js`),
+        bundle: true,
+        format: "esm",
+        platform: "browser",
+        target: "es2020",
+        // automatic JSX → 转发到本 SDK 的 jsx-runtime(内部用宿主 React),插件无需自带 React
+        jsx: "automatic",
+        jsxImportSource: "@infinite-canvas/plugin-sdk",
+        loader: { ".js": "jsx", ".jsx": "jsx", ".ts": "ts", ".tsx": "tsx", ".css": "text" },
+        // 宿主提供单例 React,插件不打包 react;https:// 依赖 esbuild 自动 external
+        external: ["react", "react-dom"],
+        minify: !watch,
+        plugins: [syncToPublic, ...(overrides.plugins ?? [])],
+        ...overrides.esbuild,
+    };
+
+    if (watch) {
+        const ctx = await context(options);
+        await ctx.watch();
+        console.log(`[${name}] watching src/ ...`);
+    } else {
+        await build(options);
+        console.log(`[${name}] built → dist/${name}.js`);
+    }
+}

plugins/canvas/sdk/package-lock.json

@@ -0,0 +1,535 @@
+{
+    "name": "@infinite-canvas/plugin-sdk",
+    "version": "0.1.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+            "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+            "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+            "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+            "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+            "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+            "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+            "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+            "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+            "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+            "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+            "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+            "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+            "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+            "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+            "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+            "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+            "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+            "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+            "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openharmony-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+            "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openharmony"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+            "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+            "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+            "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+            "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/esbuild": {
+            "version": "0.25.12",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+            "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.25.12",
+                "@esbuild/android-arm": "0.25.12",
+                "@esbuild/android-arm64": "0.25.12",
+                "@esbuild/android-x64": "0.25.12",
+                "@esbuild/darwin-arm64": "0.25.12",
+                "@esbuild/darwin-x64": "0.25.12",
+                "@esbuild/freebsd-arm64": "0.25.12",
+                "@esbuild/freebsd-x64": "0.25.12",
+                "@esbuild/linux-arm": "0.25.12",
+                "@esbuild/linux-arm64": "0.25.12",
+                "@esbuild/linux-ia32": "0.25.12",
+                "@esbuild/linux-loong64": "0.25.12",
+                "@esbuild/linux-mips64el": "0.25.12",
+                "@esbuild/linux-ppc64": "0.25.12",
+                "@esbuild/linux-riscv64": "0.25.12",
+                "@esbuild/linux-s390x": "0.25.12",
+                "@esbuild/linux-x64": "0.25.12",
+                "@esbuild/netbsd-arm64": "0.25.12",
+                "@esbuild/netbsd-x64": "0.25.12",
+                "@esbuild/openbsd-arm64": "0.25.12",
+                "@esbuild/openbsd-x64": "0.25.12",
+                "@esbuild/openharmony-arm64": "0.25.12",
+                "@esbuild/sunos-x64": "0.25.12",
+                "@esbuild/win32-arm64": "0.25.12",
+                "@esbuild/win32-ia32": "0.25.12",
+                "@esbuild/win32-x64": "0.25.12"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/sdk/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@infinite-canvas/plugin-sdk",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas 画布节点插件 SDK:类型、automatic JSX 运行时、构建助手",
+    "exports": {
+        ".": "./src/index.ts",
+        "./jsx-runtime": "./src/jsx-runtime.ts",
+        "./jsx-dev-runtime": "./src/jsx-dev-runtime.ts",
+        "./build": "./build.mjs"
+    },
+    "scripts": {
+        "typecheck": "tsc --noEmit"
+    },
+    "peerDependencies": {
+        "@types/react": ">=18"
+    },
+    "devDependencies": {
+        "@types/react": "19.1.12",
+        "esbuild": "^0.25.0",
+        "typescript": "^5"
+    }
+}

plugins/canvas/sdk/src/define-plugin.ts

@@ -0,0 +1,18 @@
+import type { CanvasPlugin, CanvasPluginFactory, PluginRuntime } from "./types";
+
+// 身份帮助函数:为插件对象(或工厂)补全类型,给作者完整补全与校验。
+// 采用 automatic JSX 后,插件通常不再需要 runtime,直接写对象形式即可:
+//
+//   export default definePlugin({ id, name, version, nodes: [...] })
+//
+// 仍支持工厂形式(需要 runtime.version/emit/on 时):
+//
+//   export default definePlugin((runtime) => ({ ... }))
+
+export function definePlugin(plugin: CanvasPlugin): CanvasPlugin;
+export function definePlugin(factory: CanvasPluginFactory): CanvasPluginFactory;
+export function definePlugin(input: CanvasPlugin | CanvasPluginFactory): CanvasPlugin | CanvasPluginFactory {
+    return input;
+}
+
+export type { PluginRuntime };

plugins/canvas/sdk/src/index.ts

@@ -0,0 +1,8 @@
+// @infinite-canvas/plugin-sdk 公开入口。
+//
+// 插件作者用 TS/TSX 编写,只关注节点 UI 与逻辑;类型、JSX、运行时桥接、构建
+// 全部由本 SDK 提供,产物仍是宿主 loader 现有契约的 ESM(React external,宿主单例)。
+
+export * from "./types";
+export { definePlugin } from "./define-plugin";
+export { getReact, getRuntime, useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef, useReducer, useContext, useId } from "./runtime";

plugins/canvas/sdk/src/jsx-dev-runtime.ts

@@ -0,0 +1,16 @@
+// automatic JSX 的 dev 变体(编译器在 dev 模式会引用 jsxDEV)。转发到同一套 createElement。
+
+import type * as React from "react";
+
+import { getReact } from "./runtime";
+import { Fragment } from "./jsx-runtime";
+
+export { Fragment };
+export type { JSX } from "./jsx-runtime";
+
+export function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: unknown): React.ReactElement {
+    const react = getReact();
+    const resolvedType = type === Fragment ? react.Fragment : type;
+    const config = key === undefined ? props : { ...(props ?? {}), key };
+    return react.createElement(resolvedType as never, config as never);
+}

plugins/canvas/sdk/src/jsx-runtime.ts

@@ -0,0 +1,38 @@
+// automatic JSX 运行时:esbuild/tsc 的 `jsxImportSource` 指向本包时,
+// TSX 会被编译成对本模块 jsx()/jsxs() 的调用。这里统一转发到宿主 React.createElement,
+// 让插件写纯 TSX、无需手动 `const { React } = runtime`,同时 react 全程 external。
+
+import type * as React from "react";
+
+import { getReact } from "./runtime";
+
+// Fragment 哨兵:渲染时才解析为宿主 React.Fragment,避免模块顶层触碰运行时。
+export const Fragment = Symbol.for("infinite-canvas.jsx.fragment") as unknown as React.ExoticComponent<{ children?: React.ReactNode }>;
+
+function createElement(type: unknown, props: Record<string, unknown> | null, key?: unknown): React.ReactElement {
+    const react = getReact();
+    const resolvedType = type === Fragment ? react.Fragment : type;
+    // automatic 运行时已把 children 放进 props;key 单独传入以避免展开 key 警告。
+    const config = key === undefined ? props : { ...(props ?? {}), key };
+    return react.createElement(resolvedType as never, config as never);
+}
+
+export function jsx(type: unknown, props: Record<string, unknown> | null, key?: unknown): React.ReactElement {
+    return createElement(type, props, key);
+}
+
+// jsxs 用于静态多子节点;转发逻辑与 jsx 一致(children 已在 props 内)。
+export const jsxs = jsx;
+
+// 让 `jsxImportSource` 指向本包的编译器能从这里取到 JSX 内建标签类型(复用 @types/react)。
+export namespace JSX {
+    export type Element = React.JSX.Element;
+    export type ElementType = React.JSX.ElementType;
+    export type ElementClass = React.JSX.ElementClass;
+    export type ElementAttributesProperty = React.JSX.ElementAttributesProperty;
+    export type ElementChildrenAttribute = React.JSX.ElementChildrenAttribute;
+    export type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
+    export type IntrinsicAttributes = React.JSX.IntrinsicAttributes;
+    export type IntrinsicClassAttributes<T> = React.JSX.IntrinsicClassAttributes<T>;
+    export type IntrinsicElements = React.JSX.IntrinsicElements;
+}

plugins/canvas/sdk/src/runtime.ts

@@ -0,0 +1,37 @@
+// 运行时桥接:所有对宿主 React 的访问都惰性读取全局运行时,
+// 保证插件与画布共用同一份 React(不打包第二份),且不在模块顶层触碰运行时
+// (宿主 loader 会先 import 插件模块、再设置运行时)。
+
+import type * as React from "react";
+
+import type { PluginRuntime } from "./types";
+
+type RuntimeGlobal = { InfiniteCanvasRuntime?: PluginRuntime };
+
+/** 取宿主注入的插件运行时(含 React、事件总线、injectCSS 等)。 */
+export function getRuntime(): PluginRuntime {
+    const runtime = (globalThis as unknown as RuntimeGlobal).InfiniteCanvasRuntime;
+    if (!runtime) {
+        throw new Error("[plugin-sdk] Infinite Canvas 运行时未就绪:请在画布宿主中加载本插件");
+    }
+    return runtime;
+}
+
+/** 取宿主的 React 实例。仅在渲染/hook 调用时(运行时已就绪)使用。 */
+export function getReact(): typeof React {
+    return getRuntime().React as unknown as typeof React;
+}
+
+// --- 类型完整的 hooks 转发:签名取自 @types/react,运行时转发到宿主 React ---
+// 这样插件作者可以直接 `import { useState } from "@infinite-canvas/plugin-sdk"`,
+// 无需再从 runtime 里解构 React。
+
+export const useState: typeof React.useState = ((...args: unknown[]) => (getReact().useState as (...a: unknown[]) => unknown)(...args)) as typeof React.useState;
+export const useEffect: typeof React.useEffect = ((...args: unknown[]) => (getReact().useEffect as (...a: unknown[]) => unknown)(...args)) as typeof React.useEffect;
+export const useLayoutEffect: typeof React.useLayoutEffect = ((...args: unknown[]) => (getReact().useLayoutEffect as (...a: unknown[]) => unknown)(...args)) as typeof React.useLayoutEffect;
+export const useMemo: typeof React.useMemo = ((...args: unknown[]) => (getReact().useMemo as (...a: unknown[]) => unknown)(...args)) as typeof React.useMemo;
+export const useCallback: typeof React.useCallback = ((...args: unknown[]) => (getReact().useCallback as (...a: unknown[]) => unknown)(...args)) as typeof React.useCallback;
+export const useRef: typeof React.useRef = ((...args: unknown[]) => (getReact().useRef as (...a: unknown[]) => unknown)(...args)) as typeof React.useRef;
+export const useReducer: typeof React.useReducer = ((...args: unknown[]) => (getReact().useReducer as (...a: unknown[]) => unknown)(...args)) as typeof React.useReducer;
+export const useContext: typeof React.useContext = ((...args: unknown[]) => (getReact().useContext as (...a: unknown[]) => unknown)(...args)) as typeof React.useContext;
+export const useId: typeof React.useId = ((...args: unknown[]) => (getReact().useId as (...a: unknown[]) => unknown)(...args)) as typeof React.useId;

plugins/canvas/sdk/src/types.ts

@@ -0,0 +1,331 @@
+// Infinite Canvas 插件公共契约类型。
+//
+// 这是插件作者面向的「公开接口」子集,自包含、不依赖宿主 `@/` 内部模块,
+// 因此可以被独立构建的插件包直接 import,获得完整的 TS 提示。
+//
+// 真源:宿主 `web/src/types/canvas-plugin.ts` 及其引用的类型。本文件是它的公开镜像,
+// 若宿主契约变更,请同步更新此处(两者结构保持一致即可,无需逐字节相同)。
+
+import type { ComponentType, ReactNode } from "react";
+
+// ---------------------------------------------------------------------------
+// 画布基础几何与节点数据
+// ---------------------------------------------------------------------------
+
+export type Position = { x: number; y: number };
+
+export type ViewportTransform = { x: number; y: number; k: number };
+
+// 内置节点类型;插件节点建议用 "<pluginId>:<name>"。放开为字符串以便扩展。
+export type CanvasBuiltinNodeType = "image" | "text" | "config" | "video" | "audio" | "group";
+export type CanvasNodeTypeId = CanvasBuiltinNodeType | (string & {});
+
+export type CanvasNodeStatus = "idle" | "success" | "loading" | "error";
+export type CanvasGenerationMode = "text" | "image" | "video" | "audio";
+export type CanvasImageGenerationType = "generation" | "edit";
+
+// 节点 metadata 是扁平可选字段袋;插件自定义字段可直接写入(内容惯例放 content)。
+export type CanvasNodeMetadata = {
+    content?: string;
+    composerContent?: string;
+    prompt?: string;
+    status?: CanvasNodeStatus;
+    errorDetails?: string;
+    fontSize?: number;
+    generationMode?: CanvasGenerationMode;
+    generationType?: CanvasImageGenerationType;
+    model?: string;
+    size?: string;
+    quality?: string;
+    count?: number;
+    seconds?: string;
+    vquality?: string;
+    generateAudio?: string;
+    watermark?: string;
+    audioVoice?: string;
+    audioFormat?: string;
+    audioSpeed?: string;
+    audioInstructions?: string;
+    references?: string[];
+    naturalWidth?: number;
+    naturalHeight?: number;
+    freeResize?: boolean;
+    isBatchRoot?: boolean;
+    batchRootId?: string;
+    batchChildIds?: string[];
+    batchUsesReferenceImages?: boolean;
+    primaryImageId?: string;
+    imageBatchExpanded?: boolean;
+    storageKey?: string;
+    mimeType?: string;
+    bytes?: number;
+    durationMs?: number;
+    groupId?: string;
+    // 插件可写入任意自定义字段
+    [key: string]: unknown;
+};
+
+export type CanvasNodeData = {
+    id: string;
+    type: CanvasNodeTypeId;
+    title: string;
+    position: Position;
+    width: number;
+    height: number;
+    metadata?: CanvasNodeMetadata;
+};
+
+export type CanvasConnection = {
+    id: string;
+    fromNodeId: string;
+    toNodeId: string;
+};
+
+// ---------------------------------------------------------------------------
+// 主题 token(用来让插件 UI 跟随画布明暗主题)
+// ---------------------------------------------------------------------------
+
+export type CanvasTheme = {
+    canvas: {
+        background: string;
+        dot: string;
+        line: string;
+        selectionStroke: string;
+        selectionFill: string;
+    };
+    node: {
+        label: string;
+        fill: string;
+        panel: string;
+        stroke: string;
+        activeStroke: string;
+        placeholder: string;
+        text: string;
+        muted: string;
+        faint: string;
+    };
+    toolbar: {
+        panel: string;
+        border: string;
+        item: string;
+        itemHover: string;
+        activeBg: string;
+        activeText: string;
+    };
+};
+
+// ---------------------------------------------------------------------------
+// 画布指令集(ctx.applyOps):与 AI Agent 同级的画布操作能力
+// ---------------------------------------------------------------------------
+
+export type CanvasAgentOp =
+    | { type: "add_node"; id?: string; nodeType?: CanvasNodeTypeId; title?: string; position?: { x: number; y: number }; x?: number; y?: number; width?: number; height?: number; metadata?: CanvasNodeMetadata }
+    | { type: "update_node"; id: string; patch?: Partial<CanvasNodeData>; metadata?: CanvasNodeMetadata }
+    | { type: "delete_node"; id?: string; ids?: string[]; nodeType?: CanvasNodeTypeId }
+    | { type: "delete_connections"; id?: string; ids?: string[]; all?: boolean }
+    | { type: "connect_nodes"; id?: string; fromNodeId: string; toNodeId: string }
+    | { type: "set_viewport"; viewport: ViewportTransform }
+    | { type: "select_nodes"; ids: string[] }
+    | { type: "run_generation"; nodeId: string; mode?: CanvasGenerationMode; prompt?: string };
+
+// ---------------------------------------------------------------------------
+// 资源:插件节点作为上游输入被消费时输出什么(接入生成/引用体系)
+// ---------------------------------------------------------------------------
+
+export type CanvasResourceKind = "image" | "video" | "audio" | "text";
+export type CanvasNodeResource = { kind: CanvasResourceKind; text?: string; url?: string };
+
+// ---------------------------------------------------------------------------
+// AI 生成:插件直接复用宿主的模型/密钥配置发起生成(生图/生视频/生文本/生音频)
+//
+// 插件本身拿不到 API Key 与模型配置,这些能力由宿主注入。前置/系统提示词由
+// 插件自行拼进 prompt(宿主不感知),因此不同插件可各自定制自己的提示词策略。
+// 若宿主 AI 配置未就绪,会抛错(并由宿主提示用户去配置),插件用 try/catch 处理即可。
+// ---------------------------------------------------------------------------
+
+// 生成公共可选项;references 为图生图/图生视频的参考图(dataURL 或可访问 URL)
+export type GenerateOptions = {
+    signal?: AbortSignal;
+    references?: string[];
+    model?: string; // 指定模型(取自 ai.listModels 的 value);缺省用宿主当前配置
+};
+
+export type GenerateImageOptions = GenerateOptions & {
+    count?: number; // 期望生成张数(宿主会按模型上限裁剪)
+    size?: string; // 形如 "1024x1024" / "auto";缺省用宿主当前配置
+};
+
+export type GenerateImageResult = {
+    // 生成图的 dataURL(已可直接作为 <img src> 或 three 纹理使用)
+    images: string[];
+};
+
+export type GenerateVideoOptions = GenerateOptions & {
+    size?: string;
+    seconds?: string;
+};
+
+export type GenerateVideoResult = {
+    url: string; // 视频可访问 URL
+    mimeType: string;
+    width?: number;
+    height?: number;
+    durationMs?: number;
+};
+
+export type GenerateTextOptions = {
+    signal?: AbortSignal;
+    model?: string;
+    system?: string; // 附加系统提示词(拼在宿主系统提示之后)
+    onDelta?: (text: string) => void; // 流式增量回调
+};
+
+export type GenerateTextResult = {
+    text: string;
+};
+
+// 一个可选模型:value 传回给 generateXxx({ model }),label 用于展示
+export type ModelCapability = "image" | "video" | "text" | "audio";
+export type ModelOption = { value: string; label: string };
+
+// 宿主注入的 AI 生成能力,挂在 ctx.ai 下。任何插件均可调用。
+export type CanvasPluginAi = {
+    generateImage: (prompt: string, options?: GenerateImageOptions) => Promise<GenerateImageResult>;
+    generateVideo: (prompt: string, options?: GenerateVideoOptions) => Promise<GenerateVideoResult>;
+    generateText: (prompt: string, options?: GenerateTextOptions) => Promise<GenerateTextResult>;
+    // 列出某能力下用户已配置的可选模型;不传能力则返回全部
+    listModels: (capability?: ModelCapability) => ModelOption[];
+    // 该能力当前默认选中的模型 value(可作为下拉框初始值)
+    defaultModel: (capability: ModelCapability) => string;
+};
+
+// ---------------------------------------------------------------------------
+// 节点上下文:每个节点渲染时注入,是插件与画布交互的核心接口
+// ---------------------------------------------------------------------------
+
+export type PluginStorage = {
+    get: <T = unknown>(key: string) => Promise<T | null>;
+    set: (key: string, value: unknown) => Promise<void>;
+    remove: (key: string) => Promise<void>;
+};
+
+export type CanvasNodeContext = {
+    // 自身数据
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+    scale: number;
+    isSelected: boolean; // 该节点当前是否被选中(用于按需启用 iframe 交互等)
+    updateMetadata: (patch: CanvasNodeMetadata) => void;
+    updateNode: (patch: Partial<Pick<CanvasNodeData, "title" | "width" | "height">>) => void;
+    // 图访问
+    getNode: (id: string) => CanvasNodeData | null;
+    getNodes: () => CanvasNodeData[];
+    getConnections: () => CanvasConnection[];
+    getUpstream: () => CanvasNodeData[];
+    getDownstream: () => CanvasNodeData[];
+    // 画布操作(复用 Agent 指令集)
+    applyOps: (ops: CanvasAgentOp[]) => void;
+    // 节点间/插件间通信
+    emit: (event: string, payload?: unknown) => void;
+    on: (event: string, handler: (payload: unknown) => void) => () => void;
+    // AI 生成能力(生图/生视频/生文本),复用宿主模型配置
+    ai: CanvasPluginAi;
+    // 打开/关闭本节点下方的自定义 Panel(需在节点定义里提供 Panel)
+    openPanel: () => void;
+    closePanel: () => void;
+    // 插件私有持久化,按插件 id 命名空间隔离
+    storage: PluginStorage;
+};
+
+// ---------------------------------------------------------------------------
+// 节点定义:内置节点与插件节点统一走这套结构
+// ---------------------------------------------------------------------------
+
+export type CanvasNodeToolbarItem = {
+    id: string;
+    title: string;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    danger?: boolean;
+};
+
+export type CanvasNodeContentProps = { ctx: CanvasNodeContext };
+export type CanvasNodePanelProps = { ctx: CanvasNodeContext; onClose: () => void };
+
+// 复用宿主内置生成面板(与图片/视频/文本节点同一个组件:模型选择、参数设置、
+// 提示词库、运行/停止状态全部一致)。声明它即可获得完整生成体验,无需自写面板。
+export type CanvasBuiltinPanelConfig = {
+    mode: "image" | "video" | "text" | "audio"; // 生成类型,决定面板里的模型/设置项
+    // 提交给模型前自动拼在用户提示词前面的固定前缀(如全景图的 equirectangular 约束)
+    promptPrefix?: string;
+    // true(默认)时生成结果写回本节点自身 metadata.content;false 则按内置逻辑生成到下游新节点
+    writeBackToSelf?: boolean;
+};
+
+export type CanvasNodeDefinition = {
+    type: string; // 建议 "<pluginId>:<name>",全局唯一
+    title: string;
+    icon: ReactNode; // emoji 字符串或任意 ReactNode
+    description?: string;
+    defaultSize: { width: number; height: number };
+    defaultMetadata?: CanvasNodeMetadata;
+    minimapColor?: string;
+    showInCreateMenu?: boolean; // 默认 true
+    hasSourceHandle?: boolean; // 右侧输出连接点,默认 true
+    hidePanel?: boolean; // 为 true 时:点击/新建不弹出下方面板(含内置生图面板),纯展示型节点用
+    // 为 true 时:节点卡片背景与边框透明,内容直接融入画布(如 SVG/矢量图);选中时仍显示选中描边
+    transparentBackground?: boolean;
+    autoOpenPanel?: boolean; // 为 true 时:单击节点自动打开自定义 Panel(默认仅内置节点单击自动打开)
+    // 复用宿主内置生成面板;与自定义 Panel 二选一(同时提供时优先 Panel)
+    useBuiltinPanel?: CanvasBuiltinPanelConfig;
+    // 为 true 时:宿主自动在工具条加「交互 ⇄ 移动」开关,并按 metadata.interactive 控制内容层指针事件。
+    // 默认(interactive 未设/为 false)为「移动」态:内容不吃指针,拖动整块移动节点;
+    // 切到「交互」态后内容可点击/拖拽(如全景转视角、iframe 操作)。适合内部有交互的展示型节点。
+    interactionToggle?: boolean;
+    // 配合 interactionToggle:返回 true 表示当前节点内容「强制可交互」(如编辑态),
+    // 此时忽略 interactive 标志、始终允许操作,并隐藏移动/交互开关。缺省视为 false。
+    forceInteractive?: (node: CanvasNodeData) => boolean;
+    keepAspectRatio?: (node: CanvasNodeData) => boolean;
+    resource?: (node: CanvasNodeData) => CanvasNodeResource | null;
+    // 渲染
+    Content?: ComponentType<CanvasNodeContentProps>;
+    Panel?: ComponentType<CanvasNodePanelProps>; // 节点下方面板(自定义)
+    toolbar?: (ctx: CanvasNodeContext) => CanvasNodeToolbarItem[];
+    onDoubleClick?: (ctx: CanvasNodeContext) => boolean; // 返回 true 表示已处理
+};
+
+// ---------------------------------------------------------------------------
+// 插件运行时与插件包
+// ---------------------------------------------------------------------------
+
+// 插件启动时(setup)可访问的应用能力
+export type CanvasPluginApp = {
+    version: string;
+    emit: (event: string, payload?: unknown) => void;
+    on: (event: string, handler: (payload: unknown) => void) => () => void;
+    // 注入插件样式,返回移除函数;传 key 时同 key 覆盖旧样式
+    injectCSS: (css: string, key?: string) => () => void;
+};
+
+// 宿主注入的运行时(工厂形式插件的入参),内含宿主 React 实例避免双 React
+export type PluginRuntime = CanvasPluginApp & {
+    React: typeof import("react");
+    jsx: typeof import("react").createElement;
+    Fragment: typeof import("react").Fragment;
+};
+
+// 插件包(默认导出对象,或返回它的工厂函数)
+export type CanvasPlugin = {
+    id: string; // 唯一,kebab-case
+    name: string;
+    version: string;
+    description?: string;
+    minAppVersion?: string;
+    css?: string; // 插件样式,启用时自动注入、卸载/禁用时自动清理
+    nodes: CanvasNodeDefinition[];
+    setup?: (app: CanvasPluginApp) => void | (() => void);
+};
+
+export type CanvasPluginFactory = (runtime: PluginRuntime) => CanvasPlugin;

plugins/canvas/sdk/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": ".",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "allowJs": true,
+        "checkJs": false
+    },
+    "include": ["src", "build.mjs"]
+}

plugins/canvas/sticky-note/README.md

@@ -0,0 +1,17 @@
+# 便利贴节点插件
+
+Infinite Canvas 画布节点插件:彩色便利贴,可换色、编辑,并演示用 `ctx.applyOps` 衍生一个连到自己的文本节点(节点间交互示例)。
+
+## 构建
+
+```bash
+npm install
+npm run build      # 产物 dist/sticky-note.js,并同步到 web/public/plugins/sticky-note.js
+npm run dev        # watch
+```
+
+## 安装
+
+画布 → 左上菜单「节点插件」→ 安装 URL 填 `/plugins/sticky-note.js`(或托管后的公网 URL)。
+
+插件契约见 `plugins/canvas/README.md`。

plugins/canvas/sticky-note/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/sticky-note/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-sticky-note",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-sticky-note",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/sticky-note/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-sticky-note",
+    "version": "1.1.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas 便利贴节点插件",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/sticky-note/src/index.tsx

@@ -0,0 +1,161 @@
+// 便利贴节点:纯展示便利贴——整块可拖动、双击编辑、右上角自选颜色。
+// 不再声明 resource(避免宿主在右上角显示「文本N」资源角标),也不再衍生节点。
+import { definePlugin, useEffect, useRef, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+// 预设便签色(点选切换),并额外提供自定义取色
+const PRESET_COLORS = ["#fde68a", "#fca5a5", "#fdba74", "#a7f3d0", "#bfdbfe", "#ddd6fe", "#f9a8d4", "#e7e5e4"];
+const DEFAULT_COLOR = PRESET_COLORS[0];
+
+function StickyNoteContent({ ctx }: CanvasNodeContentProps) {
+    const [editing, setEditing] = useState(false);
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    // 取色时的本地预览色:仅本组件即时重渲染,避免每次都写宿主 store
+    const [draftColor, setDraftColor] = useState<string | null>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const commitTimerRef = useRef<number | null>(null);
+
+    // pluginColor 是插件自定义 metadata 字段(读出为 unknown,按需断言)
+    const committedColor = (ctx.node.metadata?.pluginColor as string | undefined) || DEFAULT_COLOR;
+    const color = draftColor ?? committedColor;
+    const content = (ctx.node.metadata?.content as string | undefined) || "";
+
+    // 点击便利贴外部时:退出编辑并收起调色板。
+    // 监听 pointerdown 的 capture 阶段:宿主画布在 pointerdown 上 preventDefault(会抑制
+    // 兼容 mousedown 事件),所以必须用 pointerdown;capture 阶段又能先于宿主的 stopPropagation
+    // 触发,避免「按 Esc 能退出、点别处退不出」。
+    useEffect(() => {
+        if (!editing && !paletteOpen) return;
+        const onDocDown = (e: PointerEvent) => {
+            if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+                setEditing(false);
+                setPaletteOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", onDocDown, true);
+        return () => document.removeEventListener("pointerdown", onDocDown, true);
+    }, [editing, paletteOpen]);
+
+    const pickColor = (next: string) => ctx.updateMetadata({ pluginColor: next });
+
+    // 连续取色(系统取色器拖动时 onChange 高频触发)会不停调用 updateMetadata,
+    // 而宿主每次都会整表重建 + 全画布重渲染 + 持久化,导致卡顿。
+    // 这里先本地预览(setDraftColor),再节流提交到宿主。
+    const previewColor = (next: string) => {
+        setDraftColor(next);
+        if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+        commitTimerRef.current = window.setTimeout(() => {
+            commitTimerRef.current = null;
+            pickColor(next);
+        }, 150);
+    };
+
+    // 立即提交(点击预设色、取色器关闭时用):清掉待提交的节流并写入。
+    const commitColor = (next: string) => {
+        if (commitTimerRef.current) {
+            clearTimeout(commitTimerRef.current);
+            commitTimerRef.current = null;
+        }
+        setDraftColor(next);
+        pickColor(next);
+    };
+
+    useEffect(() => () => {
+        if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    }, []);
+
+    // 宿主里的颜色一旦真正变化(提交完成 / 撤销重做),清掉本地预览,回到 store 为准。
+    // 拖动取色期间 committedColor 不变,draftColor 得以保留,故不影响即时预览。
+    useEffect(() => {
+        setDraftColor(null);
+    }, [committedColor]);
+
+    // 交互控件上按下时阻止冒泡,避免误触发节点拖动/双击编辑
+    const stop = (e: { stopPropagation: () => void }) => e.stopPropagation();
+
+    return (
+        <div
+            ref={rootRef}
+            data-canvas-no-zoom
+            style={{ position: "relative", height: "100%", width: "100%", display: "flex", flexDirection: "column", background: color, borderRadius: 16, padding: 14, boxSizing: "border-box", cursor: editing ? "text" : "move", boxShadow: "inset 0 1px 0 rgba(255,255,255,.45)" }}
+            onDoubleClick={(e) => {
+                e.stopPropagation();
+                setEditing(true);
+            }}
+        >
+            {/* 右上角:当前颜色小圆点,点开后自选颜色(预设 + 自定义) */}
+            <div style={{ position: "absolute", top: 8, right: 8, zIndex: 5 }} onMouseDown={stop} onDoubleClick={stop}>
+                <button
+                    type="button"
+                    title="选择颜色"
+                    onClick={() => setPaletteOpen((v) => !v)}
+                    style={{ width: 22, height: 22, borderRadius: "50%", border: "2px solid rgba(0,0,0,.25)", background: color, cursor: "pointer", padding: 0, boxShadow: "0 1px 3px rgba(0,0,0,.2)" }}
+                />
+                {paletteOpen ? (
+                    <div style={{ position: "absolute", top: 28, right: 0, display: "grid", gridTemplateColumns: "repeat(4, 20px)", gap: 6, padding: 8, borderRadius: 12, background: "#fff", boxShadow: "0 8px 24px rgba(0,0,0,.18)" }}>
+                        {PRESET_COLORS.map((c) => (
+                            <button
+                                key={c}
+                                type="button"
+                                title={c}
+                                onClick={() => {
+                                    commitColor(c);
+                                    setPaletteOpen(false);
+                                }}
+                                style={{ width: 20, height: 20, borderRadius: "50%", border: c === color ? "2px solid #1c1917" : "2px solid rgba(0,0,0,.12)", background: c, cursor: "pointer", padding: 0 }}
+                            />
+                        ))}
+                        {/* 自定义取色:点击彩环唤起系统取色器。拖动时本地预览 + 节流提交,松开(blur)时立即提交 */}
+                        <label title="自定义颜色" style={{ position: "relative", width: 20, height: 20, borderRadius: "50%", cursor: "pointer", background: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red)", border: "2px solid rgba(0,0,0,.12)", boxSizing: "border-box" }}>
+                            <input type="color" value={color} onChange={(e) => previewColor(e.target.value)} onBlur={(e) => commitColor(e.target.value)} style={{ position: "absolute", inset: 0, opacity: 0, width: "100%", height: "100%", border: "none", padding: 0, cursor: "pointer" }} />
+                        </label>
+                    </div>
+                ) : null}
+            </div>
+
+            {/* 内容区:双击进入编辑;非编辑态整块可直接拖动移动节点 */}
+            {editing ? (
+                <textarea
+                    autoFocus
+                    value={content}
+                    placeholder="输入便利贴内容…（点击别处或按 Esc 退出编辑）"
+                    onChange={(e) => ctx.updateMetadata({ content: e.target.value })}
+                    onBlur={() => setEditing(false)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Escape") {
+                            e.stopPropagation();
+                            setEditing(false);
+                        }
+                    }}
+                    onMouseDown={stop}
+                    onPointerDown={stop}
+                    onWheel={stop}
+                    style={{ flex: 1, width: "100%", resize: "none", border: "none", outline: "none", background: "transparent", color: "#1c1917", fontSize: 15, lineHeight: 1.5, fontFamily: "inherit" }}
+                />
+            ) : (
+                <div style={{ flex: 1, whiteSpace: "pre-wrap", overflow: "hidden", color: content ? "#1c1917" : "rgba(28,25,23,.45)", fontSize: 15, lineHeight: 1.5, userSelect: "none", paddingRight: 22 }}>{content || "双击编辑便利贴"}</div>
+            )}
+        </div>
+    );
+}
+
+export default definePlugin({
+    id: "sticky-note",
+    name: "便利贴节点",
+    version: "1.1.0",
+    description: "可自选颜色、双击编辑、拖动即可移动的便利贴",
+    nodes: [
+        {
+            type: "sticky-note:note",
+            title: "便利贴",
+            icon: "📌",
+            description: "彩色便利贴",
+            defaultSize: { width: 240, height: 200 },
+            defaultMetadata: { content: "", pluginColor: DEFAULT_COLOR },
+            minimapColor: "#f59e0b",
+            // 纯记事节点:不弹出下方生成面板(默认会是「生成图片」的提示词面板)
+            hidePanel: true,
+            Content: StickyNoteContent,
+        },
+    ],
+});

plugins/canvas/sticky-note/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

plugins/canvas/svg/README.md

@@ -0,0 +1,17 @@
+# SVG 节点插件
+
+Infinite Canvas 画布节点插件:编辑与渲染 SVG,无自身内容时自动取上游文本节点里的 SVG 源码。
+
+## 构建
+
+```bash
+npm install
+npm run build      # 产物 dist/svg.js,并同步到 web/public/plugins/svg.js
+npm run dev        # watch
+```
+
+## 安装
+
+画布 → 左上菜单「节点插件」→ 安装 URL 填 `/plugins/svg.js`(或托管后的公网 URL)。
+
+插件契约见 `plugins/canvas/README.md`。

plugins/canvas/svg/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/svg/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-svg",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-svg",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/svg/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-svg",
+    "version": "1.1.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas SVG 节点插件",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/svg/src/index.tsx

@@ -0,0 +1,97 @@
+// SVG 节点:编辑与渲染 SVG,透明背景直接融入画布;无自身内容时可取上游文本节点里的 SVG 源码。
+import { definePlugin, useEffect, useRef, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+function SvgContent({ ctx }: CanvasNodeContentProps) {
+    const [editing, setEditing] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const stored = ctx.node.metadata?.content as string | undefined;
+    const upstream = ctx
+        .getUpstream()
+        .map((node) => node.metadata?.content)
+        .find((text): text is string => typeof text === "string" && text.trim().startsWith("<svg"));
+    const value = stored ?? "";
+    const svg = value.trim() || upstream || "";
+
+    // 无自身内容但有上游 SVG:自动采用上游源码
+    useEffect(() => {
+        if (stored === undefined && upstream) ctx.updateMetadata({ content: upstream });
+    }, [ctx, stored, upstream]);
+
+    // 点击节点外部时退出编辑。用 pointerdown 的 capture 阶段:宿主画布在 pointerdown 上
+    // preventDefault 会抑制 mousedown,capture 又能先于宿主 stopPropagation 触发。
+    useEffect(() => {
+        if (!editing) return;
+        const onDocDown = (e: PointerEvent) => {
+            if (rootRef.current && !rootRef.current.contains(e.target as Node)) setEditing(false);
+        };
+        document.addEventListener("pointerdown", onDocDown, true);
+        return () => document.removeEventListener("pointerdown", onDocDown, true);
+    }, [editing]);
+
+    // 交互控件上按下时阻止冒泡,避免误触发节点拖动/双击编辑
+    const stop = (e: { stopPropagation: () => void }) => e.stopPropagation();
+
+    const toggle = { position: "absolute", right: 8, top: 8, zIndex: 20, width: 32, height: 32, display: "grid", placeItems: "center", borderRadius: 8, border: `1px solid ${ctx.theme.node.stroke}`, background: `${ctx.theme.toolbar.panel}dd`, color: ctx.theme.node.text, cursor: "pointer" } as const;
+
+    return (
+        <div
+            ref={rootRef}
+            data-canvas-no-zoom
+            style={{ position: "relative", height: "100%", width: "100%", display: "flex", flexDirection: "column", cursor: editing ? "text" : "move" }}
+            onDoubleClick={(e) => {
+                e.stopPropagation();
+                setEditing(true);
+            }}
+        >
+            <button type="button" style={toggle} onMouseDown={stop} onClick={() => setEditing((v) => !v)} title={editing ? "预览" : "编辑源码"}>
+                {editing ? "👁" : "✎"}
+            </button>
+            {editing ? (
+                <textarea
+                    autoFocus
+                    value={value}
+                    placeholder="粘贴 SVG 源码,如 <svg …>…</svg>"
+                    onChange={(e) => ctx.updateMetadata({ content: e.target.value })}
+                    onKeyDown={(e) => {
+                        if (e.key === "Escape") {
+                            e.stopPropagation();
+                            setEditing(false);
+                        }
+                    }}
+                    onMouseDown={stop}
+                    onPointerDown={stop}
+                    onWheel={stop}
+                    style={{ height: "100%", width: "100%", resize: "none", background: ctx.theme.node.fill, borderRadius: 16, padding: 16, boxSizing: "border-box", fontFamily: "monospace", fontSize: 12, outline: "none", border: `1px solid ${ctx.theme.node.stroke}`, color: ctx.theme.node.text }}
+                />
+            ) : svg ? (
+                // pointerEvents:none 让整块可拖动移动,双击/拖拽都命中外层节点
+                <div style={{ height: "100%", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: 12, boxSizing: "border-box", pointerEvents: "none" }} dangerouslySetInnerHTML={{ __html: svg }} />
+            ) : (
+                <div style={{ height: "100%", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: 16, boxSizing: "border-box", color: ctx.theme.node.placeholder, fontSize: 13, textAlign: "center", pointerEvents: "none" }}>双击编辑,粘贴 SVG 源码</div>
+            )}
+        </div>
+    );
+}
+
+export default definePlugin({
+    id: "svg",
+    name: "SVG 节点",
+    version: "1.1.0",
+    description: "透明背景渲染 SVG 矢量图,可接收上游文本节点的 SVG 源码",
+    nodes: [
+        {
+            type: "svg:vector",
+            title: "SVG",
+            icon: "🔷",
+            description: "渲染 SVG 矢量图",
+            defaultSize: { width: 320, height: 320 },
+            defaultMetadata: {},
+            minimapColor: "#14b8a6",
+            // 背景/边框透明,矢量图直接融入画布
+            transparentBackground: true,
+            Content: SvgContent,
+        },
+    ],
+});

plugins/canvas/svg/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

plugins/canvas/template/README.md

@@ -0,0 +1,25 @@
+# 插件模板(TypeScript + SDK)
+
+复制本目录即可开始写一个新的画布节点插件。
+
+## 上手
+
+```bash
+cp -r plugins/canvas/template plugins/canvas/my-plugin
+cd plugins/canvas/my-plugin
+# 改 package.json 的 name;改 src/index.tsx 里的 id / name / type
+npm install
+npm run dev      # watch 构建,产物同步到 web/public/plugins/my-plugin.js
+npm run typecheck
+```
+
+然后启动画布 `web`,在「节点插件」管理器里启用(自动发现)即可看到你的节点。发布时把 `dist/<name>.js` 托管到任意静态地址,用户填 URL 安装。
+
+> 产物名取**目录名**(`my-plugin/` → `my-plugin.js`),所以复制后记得把目录改成你的插件名。
+
+## 你只需要关心
+
+- `src/index.tsx` 里 `Content({ ctx })` 的节点 UI 与逻辑;
+- `definePlugin({...})` 里的 `id` / `nodes[].type` / `defaultSize` 等元信息。
+
+类型、JSX、宿主 React、构建都由 `@infinite-canvas/plugin-sdk` 提供,写 TSX 全程有补全。`ctx` 的完整能力见 `plugins/canvas/README.md` 与 SDK 的类型定义。

plugins/canvas/template/build.mjs

@@ -0,0 +1,3 @@
+import { buildPlugin } from "@infinite-canvas/plugin-sdk/build";
+
+await buildPlugin(import.meta.url);

plugins/canvas/template/package-lock.json

@@ -0,0 +1,65 @@
+{
+    "name": "canvas-plugin-template",
+    "version": "1.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "canvas-plugin-template",
+            "version": "1.0.0",
+            "devDependencies": {
+                "@infinite-canvas/plugin-sdk": "file:../sdk",
+                "@types/react": "19.1.12",
+                "typescript": "^5"
+            }
+        },
+        "../sdk": {
+            "name": "@infinite-canvas/plugin-sdk",
+            "version": "0.1.0",
+            "dev": true,
+            "devDependencies": {
+                "@types/react": "19.1.12",
+                "esbuild": "^0.25.0",
+                "typescript": "^5"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18"
+            }
+        },
+        "node_modules/@infinite-canvas/plugin-sdk": {
+            "resolved": "../sdk",
+            "link": true
+        },
+        "node_modules/@types/react": {
+            "version": "19.1.12",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+            "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/typescript": {
+            "version": "5.9.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+            "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        }
+    }
+}

plugins/canvas/template/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "canvas-plugin-template",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "description": "Infinite Canvas 插件起步模板(TypeScript + SDK)",
+    "scripts": {
+        "build": "node build.mjs",
+        "dev": "node build.mjs --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@infinite-canvas/plugin-sdk": "file:../sdk",
+        "@types/react": "19.1.12",
+        "typescript": "^5"
+    }
+}

plugins/canvas/template/src/index.tsx

@@ -0,0 +1,69 @@
+// 插件模板:复制本目录 → 改 id/name/type → 写你的节点。
+// 这是一个演示节点:编辑文本、跟随主题、读取上游节点、用画布指令衍生新节点。
+import { definePlugin, useState } from "@infinite-canvas/plugin-sdk";
+import type { CanvasNodeContentProps } from "@infinite-canvas/plugin-sdk";
+
+function TemplateContent({ ctx }: CanvasNodeContentProps) {
+    const [editing, setEditing] = useState(false);
+    const content = ctx.node.metadata?.content || "";
+
+    // 读取上游相连节点的文本内容(演示 ctx.getUpstream)
+    const upstreamText = ctx
+        .getUpstream()
+        .map((node) => node.metadata?.content)
+        .filter(Boolean)
+        .join("\n");
+
+    // 用画布指令集衍生一个文本节点并连线(演示 ctx.applyOps)
+    const spawnBelow = () => {
+        const id = `template-${ctx.node.id}-${ctx.getNodes().length}`;
+        ctx.applyOps([
+            { type: "add_node", id, nodeType: "text", title: "衍生节点", x: ctx.node.position.x, y: ctx.node.position.y + ctx.node.height + 40, metadata: { content, status: "success" } },
+            { type: "connect_nodes", fromNodeId: ctx.node.id, toNodeId: id },
+        ]);
+    };
+
+    const btn = { padding: "4px 10px", borderRadius: 8, border: `1px solid ${ctx.theme.node.stroke}`, background: ctx.theme.toolbar.panel, color: ctx.theme.node.text, cursor: "pointer", fontSize: 12 } as const;
+
+    return (
+        // data-canvas-no-zoom + stopPropagation:交互控件避免触发画布拖拽/缩放
+        <div data-canvas-no-zoom onMouseDown={(e) => e.stopPropagation()} style={{ height: "100%", width: "100%", display: "flex", flexDirection: "column", gap: 8, padding: 12, boxSizing: "border-box", color: ctx.theme.node.text }}>
+            <div style={{ display: "flex", gap: 6 }}>
+                <button type="button" style={btn} onClick={() => setEditing((v) => !v)}>
+                    {editing ? "完成" : "编辑"}
+                </button>
+                <button type="button" style={btn} onClick={spawnBelow}>
+                    衍生文本
+                </button>
+            </div>
+            {editing ? (
+                <textarea autoFocus value={content} placeholder="输入内容…" onChange={(e) => ctx.updateMetadata({ content: e.target.value })} onWheel={(e) => e.stopPropagation()} style={{ flex: 1, resize: "none", border: "none", outline: "none", background: "transparent", color: ctx.theme.node.text, fontSize: 14, lineHeight: 1.5 }} />
+            ) : (
+                <div onWheel={(e) => e.stopPropagation()} style={{ flex: 1, overflow: "auto", whiteSpace: "pre-wrap", fontSize: 14, lineHeight: 1.5 }}>
+                    {content || upstreamText || <span style={{ color: ctx.theme.node.placeholder }}>点“编辑”写点什么,或连一个上游文本节点</span>}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default definePlugin({
+    id: "template", // ← 改成你的唯一 id(kebab-case)
+    name: "模板节点",
+    version: "1.0.0",
+    description: "插件起步模板:改我。",
+    nodes: [
+        {
+            type: "template:node", // ← 建议 "<id>:<name>",全局唯一
+            title: "模板",
+            icon: "✨",
+            description: "起步示例节点",
+            defaultSize: { width: 280, height: 200 },
+            defaultMetadata: { content: "" },
+            minimapColor: "#8b5cf6",
+            // 作为上游输入被消费时输出文本(可连给生成/其它节点);不需要可删
+            resource: (node) => ({ kind: "text", text: node.metadata?.content }),
+            Content: TemplateContent,
+        },
+    ],
+});

plugins/canvas/template/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react-jsx",
+        "jsxImportSource": "@infinite-canvas/plugin-sdk",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "types": []
+    },
+    "include": ["src"]
+}

web/package.json

@@ -14,6 +14,7 @@
     "dependencies": {
         "@ant-design/icons": "^6.1.1",
         "@ant-design/pro-components": "3.0.0-beta.3",
+        "@codemirror/lang-javascript": "^6.2.5",
         "@codemirror/lang-json": "^6.0.2",
         "@tanstack/react-query": "^5.100.9",
         "@uiw/react-codemirror": "^4.25.9",

web/src/components/canvas/asset-picker-modal.tsx

@@ -16,7 +16,7 @@ type Props = {
 
 export function AssetPickerModal({ open, onInsert, onClose }: Props) {
     return (
-        <Modal title="选择素材" open={open} onCancel={onClose} footer={null} width={860} destroyOnHidden styles={{ body: { padding: "0 24px 24px", minHeight: 480 } }}>
+        <Modal title="选择资产" open={open} onCancel={onClose} footer={null} width={860} destroyOnHidden styles={{ body: { padding: "0 24px 24px", minHeight: 480 } }}>
             <MyAssetsTab onInsert={onInsert} />
         </Modal>
     );
@@ -90,7 +90,7 @@ function MyAssetsTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) =>
                     className="w-56"
                     size="small"
                     prefix={<Search className="size-3.5 text-stone-400" />}
-                    placeholder="搜索素材"
+                    placeholder="搜索资产"
                     value={keyword}
                     allowClear
                     onChange={(e) => {
@@ -122,7 +122,7 @@ function MyAssetsTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) =>
                     ))}
                 </div>
             ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有素材" className="py-12" />
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有资产" className="py-12" />
             )}
 
             {filtered.length > PAGE_SIZE && (

web/src/components/canvas/canvas-config-composer.tsx

@@ -116,11 +116,11 @@ export function CanvasConfigComposer({ value, inputs, onChange, onClose }: Canva
             <div className="mb-2 flex items-center justify-between gap-2">
                 <div className="flex min-w-0 items-baseline gap-2">
                     <div className="shrink-0 text-xs font-semibold">组装提示词</div>
-                    <div className="truncate text-[11px] opacity-55">@ 引用已连接素材，发送前按当前连接重新编号</div>
+                    <div className="truncate text-[11px] opacity-55">@ 引用已连接资产，发送前按当前连接重新编号</div>
                 </div>
                 <Button size="small" type="text" className="!h-7 !w-7 !min-w-7 !p-0" icon={<X className="size-3.5" />} onClick={onClose} />
             </div>
-            <div className="relative rounded-xl border" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
+            <div className="relative rounded-xl">
                 {!value.trim() ? <div className="pointer-events-none absolute left-3 top-2 text-sm leading-7" style={{ color: theme.node.placeholder }}>输入提示词，按 @ 引用连接的图片或文本</div> : null}
                 <div
                     ref={editorRef}

web/src/components/canvas/canvas-config-node-panel.tsx

@@ -146,9 +146,9 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
     const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
     const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
     const currentModel = node.metadata?.model;
-    const model = currentModel && modelMatchesCapability(currentModel, mode)
+    const model = currentModel && modelMatchesCapability(globalConfig, currentModel, mode)
         ? currentModel
-        : defaultModel && modelMatchesCapability(defaultModel, mode)
+        : defaultModel && modelMatchesCapability(globalConfig, defaultModel, mode)
             ? defaultModel
             : fallbackModel;
     return {
@@ -156,6 +156,7 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
         model,
         quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
         size: node.metadata?.size || globalConfig.size || defaultConfig.size,
+        background: node.metadata?.background ?? globalConfig.background ?? defaultConfig.background,
         videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
         vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
         videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,

web/src/components/canvas/canvas-local-agent-panel.tsx

@@ -5,6 +5,7 @@ import copyToClipboard from "copy-to-clipboard";
 import { Copy, FolderOpen, History, KeyRound, Link2, LoaderCircle, PlugZap, Plus, RefreshCw, Square, Terminal, Trash2 } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
+import { randomId } from "@/lib/utils";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import { useAgentStore, type AgentAttachment, type AgentChatItem, type AgentEventLog, type AgentPanelTab, type AgentPendingToolCall, type AgentThreadSummary } from "@/stores/use-agent-store";
@@ -54,7 +55,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
     const connectedRef = useRef(false);
     const errorLoggedRef = useRef(false);
     const attachmentUrlsRef = useRef(new Set<string>());
-    const clientIdRef = useRef(typeof crypto === "undefined" ? `${Date.now()}` : crypto.randomUUID());
+    const clientIdRef = useRef(randomId());
     const endpoint = useMemo(() => url.trim().replace(/\/$/, ""), [url]);
     const urlAgentAutoConnect = searchParams.has("agentUrl") && searchParams.has("agentToken");
     const loadThreads = useCallback(async () => {
@@ -926,8 +927,8 @@ function siteToolSummary(name: string, result: unknown) {
     const data = result && typeof result === "object" ? (result as Record<string, unknown>) : {};
     if (name === "canvas_list_projects") return `共 ${numberField(data, "total")} 个画布`;
     if (name === "prompts_search") return `找到 ${numberField(data, "total")} 条提示词`;
-    if (name === "assets_list") return `共 ${numberField(data, "total")} 个素材`;
-    if (name === "assets_add") return "已加入我的素材";
+    if (name === "assets_list") return `共 ${numberField(data, "total")} 个资产`;
+    if (name === "assets_add") return "已加入我的资产";
     if (name === "workbench_image_generate" || name === "workbench_video_generate") return typeof data.note === "string" ? data.note : "已在工作台执行";
     if (name === "workbench_image_get_config" || name === "workbench_video_get_config") return "已读取工作台配置";
     return "已完成";
@@ -1045,7 +1046,7 @@ function formatThreadTime(value?: number) {
 }
 
 function createId() {
-    return typeof crypto === "undefined" ? `${Date.now()}-${Math.random()}` : crypto.randomUUID();
+    return randomId();
 }
 
 function clamp(value: number, min: number, max: number) {

web/src/components/canvas/canvas-mini-map.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
+import { getNodeDefinition } from "@/lib/canvas/node-registry";
 import { useThemeStore } from "@/stores/use-theme-store";
-import { CanvasNodeType, type CanvasNodeData, type ViewportTransform } from "@/types/canvas";
+import { type CanvasNodeData, type ViewportTransform } from "@/types/canvas";
 
 export function Minimap({ nodes, viewport, viewportSize, onViewportChange }: { nodes: CanvasNodeData[]; viewport: ViewportTransform; viewportSize: { width: number; height: number }; onViewportChange: (viewport: ViewportTransform) => void }) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -113,7 +114,7 @@ export function Minimap({ nodes, viewport, viewportSize, onViewportChange }: { n
             >
                 {nodes.map((node) => {
                     const pos = toMinimap(node.position.x, node.position.y);
-                    const color = node.type === CanvasNodeType.Image ? "#10b981" : node.type === CanvasNodeType.Video ? "#f97316" : node.type === CanvasNodeType.Audio ? "#a855f7" : node.type === CanvasNodeType.Config ? "#60a5fa" : node.type === CanvasNodeType.Group ? "#94a3b8" : theme.node.muted;
+                    const color = getNodeDefinition(node.type)?.minimapColor || theme.node.muted;
                     return (
                         <div
                             key={node.id}

web/src/components/canvas/canvas-node-hover-toolbar.tsx

@@ -7,6 +7,7 @@ import { formatBytes, getDataUrlByteSize } from "@/lib/image-utils";
 import { useCopyText } from "@/hooks/use-copy-text";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasNodeType, type CanvasNodeData, type ViewportTransform } from "@/types/canvas";
+import type { CanvasNodeToolbarItem } from "@/types/canvas-plugin";
 import { ImageToolSettingsModal, type ImageToolbarSettingsTool } from "./canvas-image-toolbar-settings-modal";
 import { IMAGE_QUICK_TOOLS_STORAGE_KEY, buildImageToolbarTools, defaultImageQuickToolIds, readImageQuickToolsConfig, type ImageQuickToolId } from "./canvas-image-toolbar-tools";
 
@@ -35,6 +36,7 @@ type CanvasNodeHoverToolbarProps = {
     onRetry: (node: CanvasNodeData) => void;
     onToggleFreeResize: (node: CanvasNodeData) => void;
     onDelete: (node: CanvasNodeData) => void;
+    extraTools?: CanvasNodeToolbarItem[];
 };
 
 type ToolbarTool = {
@@ -72,6 +74,7 @@ export function CanvasNodeHoverToolbar({
     onRetry,
     onToggleFreeResize,
     onDelete,
+    extraTools = [],
 }: CanvasNodeHoverToolbarProps) {
     const [quickImageToolIds, setQuickImageToolIds] = useState<ImageQuickToolId[]>(defaultImageQuickToolIds);
     const [showImageToolLabels, setShowImageToolLabels] = useState(true);
@@ -137,7 +140,7 @@ export function CanvasNodeHoverToolbar({
     ];
     const nodeToolbarTools: ToolbarTool[] = [
         ...(canRetry ? [{ id: "retry", title: "重新生成", label: "重试", icon: <RefreshCw className="size-4" />, onClick: () => onRetry(node) }] : []),
-        ...(hasImage || hasVideo || isText ? [{ id: "saveAsset", title: "加入我的素材", label: "存素材", icon: <FolderPlus className="size-4" />, onClick: () => onSaveAsset(node) }] : []),
+        ...(hasImage || hasVideo || isText ? [{ id: "saveAsset", title: "加入我的资产", label: "存资产", icon: <FolderPlus className="size-4" />, onClick: () => onSaveAsset(node) }] : []),
         ...(hasImage || hasVideo || hasAudio ? [{ id: "download", title: hasAudio ? "下载音频" : hasVideo ? "下载视频" : "下载图片", label: "下载", icon: <Download className="size-4" />, onClick: () => onDownload(node) }] : []),
         ...(canOpenDialog ? [{ id: "edit", title: "编辑", label: "编辑", icon: <MessageSquare className="size-4" />, onClick: () => onToggleDialog(node) }] : []),
         ...(isText ? [{ id: "editText", title: "编辑文本", label: "编辑文字", icon: <Pencil className="size-4" />, onClick: () => onEditText(node) }] : []),
@@ -150,7 +153,7 @@ export function CanvasNodeHoverToolbar({
         ...(isAudio ? [{ id: "uploadAudio", title: hasAudio ? "替换音频" : "上传音频", label: hasAudio ? "替换音频" : "上传音频", icon: <Music2 className="size-4" />, onClick: () => onUpload(node) }] : []),
         ...(hasImage ? imageTools.map((tool) => ({ id: tool.id, title: tool.title, label: tool.label, icon: tool.icon, active: tool.active, onClick: tool.onClick })) : []),
     ];
-    const toolbarTools = hasImage ? [...baseToolbarTools, ...nodeToolbarTools].filter((tool) => quickImageToolIdSet.has(tool.id as ImageQuickToolId)) : [...baseToolbarTools, ...nodeToolbarTools];
+    const toolbarTools = hasImage ? [...baseToolbarTools, ...nodeToolbarTools].filter((tool) => quickImageToolIdSet.has(tool.id as ImageQuickToolId)) : [...baseToolbarTools, ...nodeToolbarTools, ...extraTools];
     const selectableImageToolbarTools = [...baseToolbarTools, ...nodeToolbarTools].filter((tool) => tool.id !== "retry") as ImageToolbarSettingsTool[];
 
     const closeImageToolSettings = () => {

web/src/components/canvas/canvas-node-prompt-panel.tsx

@@ -25,13 +25,14 @@ type CanvasNodePromptPanelProps = {
     onStop: (nodeId: string) => void;
     mentionReferences?: CanvasResourceReference[];
     onImageSettingsOpenChange?: (open: boolean) => void;
+    modeOverride?: CanvasNodeGenerationMode; // 插件节点用 useBuiltinPanel.mode 指定生成类型
 };
 
-export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onStop, mentionReferences = [], onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
+export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onStop, mentionReferences = [], onImageSettingsOpenChange, modeOverride }: CanvasNodePromptPanelProps) {
     const globalConfig = useEffectiveConfig();
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
-    const mode = defaultMode(node.type);
+    const mode = modeOverride ?? defaultMode(node.type);
     const config = buildNodeConfig(globalConfig, node, mode);
     const hasTextContent = node.type === CanvasNodeType.Text && Boolean(node.metadata?.content?.trim());
     const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
@@ -67,8 +68,8 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                 references={mentionReferences}
                 onChange={updatePrompt}
                 onSubmit={submit}
-                className="thin-scrollbar h-24 w-full resize-none rounded-xl border px-3 py-2 text-sm leading-5 outline-none"
-                style={{ background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text }}
+                className="thin-scrollbar h-40 w-full cursor-text resize-none rounded-xl px-3 py-2 text-sm leading-5 outline-none"
+                style={{ background: "transparent", color: theme.node.text }}
                 placeholder={promptPlaceholder(mode, hasImageContent, hasTextContent)}
             />
 
@@ -77,7 +78,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                     <CanvasPromptLibrary onSelect={updatePrompt} />
                     {mode === "image" ? (
                         <>
-                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="image" onMissingConfig={() => openConfigDialog(true)} />
+                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="image" onMissingConfig={() => openConfigDialog(true)} className="max-w-[190px]" />
                             <CanvasImageSettingsPopover
                                 config={config}
                                 placement="topLeft"
@@ -89,16 +90,16 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                         </>
                     ) : mode === "video" ? (
                         <>
-                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="video" onMissingConfig={() => openConfigDialog(true)} />
+                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="video" onMissingConfig={() => openConfigDialog(true)} className="max-w-[190px]" />
                             <CanvasVideoSettingsPopover config={config} buttonClassName="!h-10 !max-w-[170px] !justify-start !rounded-full !px-3" onConfigChange={(key, value) => onConfigChange(node.id, videoConfigPatch(key, value))} />
                         </>
                     ) : mode === "audio" ? (
                         <>
-                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="audio" onMissingConfig={() => openConfigDialog(true)} />
+                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="audio" onMissingConfig={() => openConfigDialog(true)} className="max-w-[190px]" />
                             <CanvasAudioSettingsPopover config={config} buttonClassName="!h-10 !max-w-[170px] !justify-start !rounded-full !px-3" onConfigChange={(key, value) => onConfigChange(node.id, audioConfigPatch(key, value))} />
                         </>
                     ) : (
-                        <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="text" onMissingConfig={() => openConfigDialog(true)} />
+                        <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} capability="text" onMissingConfig={() => openConfigDialog(true)} className="max-w-[190px]" />
                     )}
                 </div>
                 <Button
@@ -134,9 +135,9 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
     const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
     const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
     const currentModel = node.metadata?.model;
-    const model = currentModel && modelMatchesCapability(currentModel, mode)
+    const model = currentModel && modelMatchesCapability(globalConfig, currentModel, mode)
         ? currentModel
-        : defaultModel && modelMatchesCapability(defaultModel, mode)
+        : defaultModel && modelMatchesCapability(globalConfig, defaultModel, mode)
             ? defaultModel
             : fallbackModel;
     return {
@@ -144,6 +145,7 @@ function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: Can
         model,
         quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
         size: node.metadata?.size || globalConfig.size || defaultConfig.size,
+        background: node.metadata?.background ?? globalConfig.background ?? defaultConfig.background,
         videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
         vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
         videoGenerateAudio: node.metadata?.generateAudio || globalConfig.videoGenerateAudio || defaultConfig.videoGenerateAudio,

web/src/components/canvas/canvas-node.tsx

@@ -1,12 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { ChevronRight, Group, Image as ImageIcon, Music2, RefreshCw, Star, Video } from "lucide-react";
+import { ChevronRight, Group, Image as ImageIcon, Music2, Puzzle, RefreshCw, Star, Video } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
 import { formatBytes } from "@/lib/image-utils";
+import { getNodeDefinition } from "@/lib/canvas/node-registry";
+import { buildNodeContext } from "@/lib/canvas/plugin-node-context";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
 import { CanvasNodeType, type CanvasNodeData, type Position } from "@/types/canvas";
+import type { CanvasNodeContext, CanvasPluginHost } from "@/types/canvas-plugin";
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
 
 type ResizeCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
@@ -25,6 +28,8 @@ type CanvasNodeProps = {
     showImageInfo: boolean;
     resourceLabel?: CanvasResourceReference;
     mentionReferences?: CanvasResourceReference[];
+    pluginHost?: CanvasPluginHost;
+    registryVersion?: number;
     renderPanel?: (node: CanvasNodeData) => ReactNode;
     renderNodeContent?: (node: CanvasNodeData) => ReactNode;
     batchCount?: number;
@@ -36,6 +41,7 @@ type CanvasNodeProps = {
     batchRecovering?: boolean;
     batchMotion?: { x: number; y: number; index: number };
     onMouseDown: (event: React.MouseEvent, nodeId: string) => void;
+    onSelectCapture?: (event: React.MouseEvent, nodeId: string) => void;
     onHoverStart: (nodeId: string) => void;
     onHoverEnd: (nodeId: string) => void;
     onConnectStart: (event: React.MouseEvent, nodeId: string, handleType: "source" | "target") => void;
@@ -61,6 +67,7 @@ type NodeContentRendererProps = {
     batchOpening: boolean;
     batchRecovering: boolean;
     renderNodeContent?: (node: CanvasNodeData) => ReactNode;
+    pluginContext?: CanvasNodeContext | null;
     onContentChange: (nodeId: string, content: string) => void;
     onStopEditing: () => void;
     mentionReferences: CanvasResourceReference[];
@@ -84,6 +91,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     showImageInfo,
     resourceLabel,
     mentionReferences = [],
+    pluginHost,
     renderPanel,
     renderNodeContent,
     batchCount = 0,
@@ -95,6 +103,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     batchRecovering = false,
     batchMotion,
     onMouseDown,
+    onSelectCapture,
     onHoverStart,
     onHoverEnd,
     onConnectStart,
@@ -110,6 +119,8 @@ export const CanvasNode = React.memo(function CanvasNode({
 }: CanvasNodeProps) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const [hovered, setHovered] = useState(false);
+    const definition = getNodeDefinition(data.type);
+    const pluginContext = useMemo<CanvasNodeContext | null>(() => (pluginHost ? buildNodeContext(pluginHost, data, theme, scale, isSelected) : null), [pluginHost, data, theme, scale, isSelected]);
     const [isEditingContent, setIsEditingContent] = useState(false);
     const [isEditingTitle, setIsEditingTitle] = useState(false);
     const [titleDraft, setTitleDraft] = useState(data.title || "");
@@ -118,7 +129,14 @@ export const CanvasNode = React.memo(function CanvasNode({
     const hasAudioContent = data.type === CanvasNodeType.Audio && Boolean(data.metadata?.content);
     const isGroup = data.type === CanvasNodeType.Group;
     const isBatchRoot = data.type === CanvasNodeType.Image && Boolean(data.metadata?.isBatchRoot) && batchCount > 1;
+    // 支持「交互/移动」开关的节点:移动态(默认)内容不吃指针,拖动整块;交互态内容可操作。
+    // forceInteractive(如编辑态)强制可交互;空态(无内容)始终可交互,避免上传/生成按钮点不动。
+    const supportsInteractionToggle = Boolean(definition?.interactionToggle);
+    const forceInteractive = supportsInteractionToggle ? Boolean(definition?.forceInteractive?.(data)) : false;
+    const contentInteractive = !supportsInteractionToggle || forceInteractive || !data.metadata?.content ? true : Boolean(data.metadata?.interactive);
     const isBatchChild = data.type === CanvasNodeType.Image && Boolean(data.metadata?.batchRootId);
+    // 透明背景节点(如 SVG):卡片背景/边框透明,直接融入画布;选中/关联态仍显示描边以便定位
+    const transparentBg = Boolean(definition?.transparentBackground);
     const isActive = isConnectionTarget || isSelected || isFocusRelated;
     const imageBorderColor = isActive ? selectionBlue : isRelated && !isBatchChild ? theme.node.muted : "transparent";
     const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -259,7 +277,7 @@ export const CanvasNode = React.memo(function CanvasNode({
             startTop: data.position.y,
             startWidth: data.width,
             startHeight: data.height,
-            keepRatio: (data.type === CanvasNodeType.Image && !data.metadata?.freeResize) || data.type === CanvasNodeType.Video,
+            keepRatio: (data.type === CanvasNodeType.Image && !data.metadata?.freeResize) || data.type === CanvasNodeType.Video || Boolean(definition?.keepAspectRatio?.(data)),
             ratio: (data.metadata?.naturalWidth || data.width) / (data.metadata?.naturalHeight || data.height || 1),
         };
         window.addEventListener("mousemove", handleResizeMove);
@@ -292,6 +310,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                 setHovered(false);
                 onHoverEnd(data.id);
             }}
+            onMouseDownCapture={(event) => onSelectCapture?.(event, data.id)}
             onContextMenu={(event) => onContextMenu(event, data.id)}
         >
             <div className="absolute left-3 top-[-28px] z-[65] max-w-[calc(100%-24px)]" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
@@ -331,8 +350,8 @@ export const CanvasNode = React.memo(function CanvasNode({
             <div
                 className="relative h-full w-full overflow-visible rounded-3xl border-2"
                 style={{
-                    background: isGroup ? `${theme.toolbar.panel}66` : hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
-                    borderColor: isGroup ? (isGroupDropTarget || isActive ? selectionBlue : theme.node.stroke) : hasImageContent ? imageBorderColor : isActive ? selectionBlue : isRelated ? theme.node.muted : theme.node.stroke,
+                    background: isGroup ? `${theme.toolbar.panel}66` : hasImageContent || hasVideoContent || transparentBg ? "transparent" : theme.node.fill,
+                    borderColor: isGroup ? (isGroupDropTarget || isActive ? selectionBlue : theme.node.stroke) : hasImageContent ? imageBorderColor : isActive ? selectionBlue : isRelated ? theme.node.muted : transparentBg ? "transparent" : theme.node.stroke,
                     borderStyle: isGroup ? "dashed" : "solid",
                     boxShadow: isGroupDropTarget ? `0 0 0 2px ${selectionBlue}66, inset 0 0 0 999px ${selectionBlue}10` : isActive ? `0 0 0 1px ${selectionBlue}55` : isRelated && !isBatchChild ? `0 0 0 1px ${theme.node.muted}55, 0 18px 48px rgba(0,0,0,.14)` : undefined,
                 }}
@@ -343,6 +362,10 @@ export const CanvasNode = React.memo(function CanvasNode({
                         onToggleBatch?.(data.id);
                         return;
                     }
+                    if (definition?.onDoubleClick && pluginContext) {
+                        if (definition.onDoubleClick(pluginContext)) event.stopPropagation();
+                        return;
+                    }
                     if (data.type === CanvasNodeType.Image && hasImageContent) {
                         event.stopPropagation();
                         onViewImage?.(data);
@@ -357,7 +380,8 @@ export const CanvasNode = React.memo(function CanvasNode({
                     className={`relative flex h-full w-full items-center justify-center rounded-[inherit] ${isBatchRoot ? "overflow-visible" : "overflow-hidden"}`}
                     style={
                         {
-                            background: isGroup ? "transparent" : hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
+                            background: isGroup ? "transparent" : hasImageContent || hasVideoContent || transparentBg ? "transparent" : theme.node.fill,
+                            pointerEvents: contentInteractive ? undefined : "none",
                             "--batch-from-x": `${batchMotion?.x || 0}px`,
                             "--batch-from-y": `${batchMotion?.y || 0}px`,
                             "--batch-from-rotate": `${6 + (batchMotion?.index || 0) * 4}deg`,
@@ -377,6 +401,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                         batchOpening={batchOpening}
                         batchRecovering={batchRecovering}
                         renderNodeContent={renderNodeContent}
+                        pluginContext={pluginContext}
                         mentionReferences={mentionReferences}
                         onContentChange={onContentChange}
                         onStopEditing={() => setIsEditingContent(false)}
@@ -400,9 +425,9 @@ export const CanvasNode = React.memo(function CanvasNode({
             </div>
 
             {!isGroup ? <ConnectionHandleDot side="left" visible={hovered || isSelected || isConnecting} onMouseDown={(event) => onConnectStart(event, data.id, "target")} /> : null}
-            {!isGroup ? <ConnectionHandleDot side="right" visible={data.type !== CanvasNodeType.Config && (hovered || isSelected || isConnecting)} onMouseDown={(event) => onConnectStart(event, data.id, "source")} /> : null}
+            {!isGroup ? <ConnectionHandleDot side="right" visible={(definition?.hasSourceHandle ?? true) && data.type !== CanvasNodeType.Config && (hovered || isSelected || isConnecting)} onMouseDown={(event) => onConnectStart(event, data.id, "source")} /> : null}
 
-            {showPanel && !isGroup && renderPanel ? <div className="absolute left-1/2 top-full z-[70] w-[500px] -translate-x-1/2 pt-4">{renderPanel(data)}</div> : null}
+            {showPanel && !isGroup && renderPanel ? <div className="absolute left-1/2 top-full z-[70] w-[600px] -translate-x-1/2 pt-4">{renderPanel(data)}</div> : null}
         </div>
     );
 });
@@ -413,8 +438,16 @@ function NodeContent(props: NodeContentRendererProps) {
     if (props.node.metadata?.status === "loading") return <LoadingContent theme={props.theme} />;
     if (props.node.metadata?.status === "error") return <ErrorContent node={props.node} theme={props.theme} onRetry={props.onRetry} />;
 
-    const Renderer = nodeContentRenderers[props.node.type];
-    return Renderer ? <Renderer {...props} /> : <UnknownNodeContent theme={props.theme} />;
+    const Renderer = nodeContentRenderers[props.node.type as CanvasNodeType];
+    if (Renderer) return <Renderer {...props} />;
+
+    // 插件节点:有注册渲染器则渲染,否则展示缺少插件占位
+    const definition = getNodeDefinition(props.node.type);
+    if (definition?.Content && props.pluginContext) {
+        const PluginContent = definition.Content;
+        return <PluginContent ctx={props.pluginContext} />;
+    }
+    return <MissingPluginContent theme={props.theme} type={props.node.type} />;
 }
 
 const nodeContentRenderers = {
@@ -473,10 +506,12 @@ function ErrorContent({ node, theme, onRetry }: Pick<NodeContentRendererProps, "
     );
 }
 
-function UnknownNodeContent({ theme }: Pick<NodeContentRendererProps, "theme">) {
+function MissingPluginContent({ theme, type }: Pick<NodeContentRendererProps, "theme"> & { type: string }) {
     return (
-        <div className="flex h-full w-full items-center justify-center text-sm" style={{ color: theme.node.placeholder }}>
-            未知节点
+        <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.placeholder }}>
+            <Puzzle className="size-7 opacity-40" />
+            <span className="text-sm">缺少插件</span>
+            <span className="text-[11px] opacity-70">节点类型 “{type}” 的插件未安装或未启用</span>
         </div>
     );
 }

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

@@ -0,0 +1,225 @@
+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, hasUpgrade, type OfficialPluginEntry } from "@/lib/canvas/plugin-registry";
+import { useThemeStore } from "@/stores/use-theme-store";
+import { usePluginStore, type InstalledPlugin } from "@/stores/canvas/use-plugin-store";
+
+export function CanvasPluginManagerModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const { message } = App.useApp();
+    const plugins = usePluginStore((state) => state.plugins);
+    const [url, setUrl] = useState("");
+    const [installing, setInstalling] = useState(false);
+    const [busyId, setBusyId] = useState<string | null>(null);
+
+    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);
+        try {
+            const plugin = await installPluginFromUrl(target);
+            message.success(`已安装插件 ${plugin.name}`);
+            setUrl("");
+        } catch (error) {
+            message.error(`安装失败：${error instanceof Error ? error.message : String(error)}`);
+        } finally {
+            setInstalling(false);
+        }
+    };
+
+    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 {
+            await action();
+            message.success(successText);
+        } catch (error) {
+            message.error(`${error instanceof Error ? error.message : String(error)}`);
+        } finally {
+            setBusyId(null);
+        }
+    };
+
+    // 已安装插件的操作区:启用开关 +(非本地)更新/卸载
+    // upgradable=true 时(远程有更高版本),更新按钮高亮为主色以提示升级
+    const installedControls = (record: InstalledPlugin, upgradable = false) => (
+        <>
+            <Switch size="small" checked={record.enabled} loading={busyId === record.id} onChange={(checked) => runOnPlugin(record, () => setPluginEnabled(record, checked), checked ? "已启用" : "已禁用")} />
+            {!record.local && (
+                <>
+                    <Button
+                        type={upgradable ? "primary" : "text"}
+                        size="small"
+                        icon={<RefreshCw className="size-4" />}
+                        loading={busyId === record.id}
+                        title={upgradable ? "有新版本，点击升级" : "从来源更新"}
+                        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>
+                </>
+            )}
+        </>
+    );
+
+    // 图标外挂一个绿点(右上角),用于「有可升级版本」的提示。
+    // boxShadow 画一圈与卡片同色的描边环,让绿点从图标上「浮起」。
+    const withUpgradeDot = (icon: ReactNode) => (
+        <span className="relative inline-flex">
+            {icon}
+            <span className="absolute -right-1 -top-1 size-2 rounded-full" style={{ background: "#22c55e", boxShadow: `0 0 0 2px ${theme.node.fill}` }} title="有新版本可升级" />
+        </span>
+    );
+
+    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);
+                        // 已安装且远程版本更高 → 显示绿点并高亮升级按钮
+                        const upgradable = Boolean(record && hasUpgrade(record.version, entry.version));
+                        const icon = entry.icon || <Puzzle className="size-4" />;
+                        return row(
+                            entry.id,
+                            upgradable ? withUpgradeDot(icon) : icon,
+                            entry.name,
+                            // 有升级时标题版本展示为「本地 → 远程」,让用户看清升级到哪个版本
+                            upgradable && record ? `${record.version} → ${entry.version}` : entry.version,
+                            entry.description,
+                            record ? (
+                                installedControls(record, upgradable)
+                            ) : (
+                                <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-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>
+                <Tabs defaultActiveKey="official" items={tabs} />
+            </div>
+        </Modal>
+    );
+}

web/src/components/canvas/canvas-resource-mention-textarea.tsx

@@ -89,9 +89,11 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
         ...(style || {}),
         color: showOverlay ? "transparent" : style?.color,
         caretColor: style?.color || theme.node.text,
-        ...(showOverlay ? { background: "transparent", backgroundColor: "transparent" } : {}),
+        cursor: "text",
+        // showOverlay 时高亮 div 覆盖在 textarea 上,若不把 textarea 提到上层,原生插入光标(caret)会被盖住看不见
+        ...(showOverlay ? { position: "relative", zIndex: 1, background: "transparent", backgroundColor: "transparent" } : {}),
     } as CSSProperties;
-    const menu = mention && candidates.length && textareaRef.current ? <MentionMenu textarea={textareaRef.current} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} onSelect={insertReference} /> : null;
+    const menu = mention && candidates.length && textareaRef.current ? <MentionMenu textarea={textareaRef.current} caretIndex={mention.start} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} onSelect={insertReference} /> : null;
 
     return (
         <div className={`relative h-full w-full ${containerClassName || ""}`}>
@@ -136,6 +138,18 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
                         onKeyDown?.(event);
                         return;
                     }
+                    if ((event.key === "Backspace" || event.key === "Delete") && !mention) {
+                        const el = textareaRef.current;
+                        if (el && el.selectionStart === el.selectionEnd) {
+                            const result = deleteAdjacentLabel(value, el.selectionStart, event.key === "Backspace" ? "backward" : "forward", activeLabels);
+                            if (result) {
+                                event.preventDefault();
+                                updateValue(result.value, result.caret);
+                                requestAnimationFrame(updateSelectionState);
+                                return;
+                            }
+                        }
+                    }
                     if (mention && candidates.length) {
                         if (event.key === "ArrowDown") {
                             event.preventDefault();
@@ -199,16 +213,24 @@ function MentionHighlightText({ value, labels, placeholder }: { value: string; l
     );
 }
 
-function MentionMenu({ textarea, references, activeIndex, theme, onSelect }: { textarea: HTMLTextAreaElement; references: CanvasResourceReference[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (reference: CanvasResourceReference) => void }) {
+function MentionMenu({ textarea, caretIndex, references, activeIndex, theme, onSelect }: { textarea: HTMLTextAreaElement; caretIndex: number; references: CanvasResourceReference[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (reference: CanvasResourceReference) => void }) {
     const selectedRef = useRef(false);
     const rect = textarea.getBoundingClientRect();
     const boundary = textarea.closest(".ant-modal-content")?.getBoundingClientRect() || { left: 8, top: 8, right: window.innerWidth - 8, bottom: window.innerHeight - 8 };
     const menuWidth = 256;
     const maxMenuHeight = 224;
     const gap = 6;
-    const left = clamp(rect.left, boundary.left + 8, boundary.right - menuWidth - 8);
-    const showAbove = rect.bottom + gap + maxMenuHeight > boundary.bottom && rect.top - gap - maxMenuHeight >= boundary.top;
-    const top = clamp(showAbove ? rect.top - gap - maxMenuHeight : rect.bottom + gap, boundary.top + 8, boundary.bottom - maxMenuHeight - 8);
+    // 菜单锚定到 @ 所在的光标像素位置(而非 textarea 底边),避免输入框较高时菜单离 @ 太远。
+    // 画布可能被缩放,rect 是缩放后坐标,而镜像测量得到的是布局坐标,需按 scale 换算。
+    const scale = textarea.offsetWidth ? rect.width / textarea.offsetWidth : 1;
+    const computed = window.getComputedStyle(textarea);
+    const lineHeight = (parseFloat(computed.lineHeight) || parseFloat(computed.fontSize) * 1.4 || 20) * scale;
+    const caret = getCaretPoint(textarea, caretIndex);
+    const caretLeft = rect.left + (caret.left - textarea.scrollLeft) * scale;
+    const caretTop = rect.top + (caret.top - textarea.scrollTop) * scale;
+    const left = clamp(caretLeft, boundary.left + 8, boundary.right - menuWidth - 8);
+    const showAbove = caretTop + lineHeight + gap + maxMenuHeight > boundary.bottom && caretTop - gap - maxMenuHeight >= boundary.top;
+    const top = clamp(showAbove ? caretTop - gap - maxMenuHeight : caretTop + lineHeight + gap, boundary.top + 8, boundary.bottom - maxMenuHeight - 8);
 
     const stopCanvasInteraction = (event: PointerEvent | MouseEvent) => {
         event.stopPropagation();
@@ -273,6 +295,58 @@ function clamp(value: number, min: number, max: number) {
     return Math.min(Math.max(value, min), max);
 }
 
+// 通过镜像 div 复刻 textarea 的排版,测出第 index 个字符处光标相对 textarea 的像素坐标(布局尺度,未含缩放)。
+const MIRROR_STYLE_PROPS = ["boxSizing", "width", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "lineHeight", "fontFamily", "textAlign", "textIndent", "letterSpacing", "wordSpacing", "tabSize", "textTransform"] as const;
+
+function getCaretPoint(textarea: HTMLTextAreaElement, index: number) {
+    const computed = window.getComputedStyle(textarea);
+    const mirror = document.createElement("div");
+    const style = mirror.style;
+    style.position = "absolute";
+    style.top = "0";
+    style.left = "-9999px";
+    style.visibility = "hidden";
+    style.whiteSpace = "pre-wrap";
+    style.overflowWrap = "break-word";
+    for (const prop of MIRROR_STYLE_PROPS) style[prop] = computed[prop];
+    mirror.textContent = textarea.value.slice(0, index);
+    const marker = document.createElement("span");
+    marker.textContent = textarea.value.slice(index) || ".";
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    const point = { left: marker.offsetLeft, top: marker.offsetTop };
+    document.body.removeChild(mirror);
+    return point;
+}
+
 function escapeRegExp(value: string) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+
+// 纯 textarea 无法做真正的原子 token,这里在删除时把整个引用 label 当作一个整体一次删掉,
+// 避免逐字删除把「图片1」删成「图片」。labels 需按长度降序传入以优先匹配更长的 label。
+function deleteAdjacentLabel(value: string, caret: number, direction: "backward" | "forward", labels: string[]): { value: string; caret: number } | null {
+    if (direction === "backward") {
+        const before = value.slice(0, caret);
+        for (const label of labels) {
+            if (!label) continue;
+            const match = new RegExp(`(^|\\s)(${escapeRegExp(label)})\\s*$`).exec(before);
+            if (match) {
+                const start = match.index + match[1].length; // label 起始位置(保留前面的分隔空格)
+                return { value: value.slice(0, start) + value.slice(caret), caret: start };
+            }
+        }
+    } else {
+        // 向后删除:光标前须是行首或空白,避免切进其它文字中间
+        if (caret > 0 && !/\s/.test(value[caret - 1])) return null;
+        const after = value.slice(caret);
+        for (const label of labels) {
+            if (!label) continue;
+            const match = new RegExp(`^(\\s*)(${escapeRegExp(label)})(?=\\s|$)`).exec(after);
+            if (match) {
+                return { value: value.slice(0, caret) + value.slice(caret + match[0].length), caret };
+            }
+        }
+    }
+    return null;
+}

web/src/components/canvas/canvas-side-panel.tsx

@@ -0,0 +1,224 @@
+import { useMemo, useState } from "react";
+import { Empty, Input, Select, Tag } from "antd";
+import { ChevronRight, FileText, Image as ImageIcon, Music2, Search, Settings2, Square, Type, Video } from "lucide-react";
+
+import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
+import { getNodeDefinition } from "@/lib/canvas/node-registry";
+import { cn } from "@/lib/utils";
+import { useAssetStore, type Asset, type AssetKind } from "@/stores/use-asset-store";
+import { useThemeStore } from "@/stores/use-theme-store";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+
+import type { InsertAssetPayload } from "./asset-picker-modal";
+
+type PanelTab = "canvas" | "assets";
+
+type Props = {
+    nodes: CanvasNodeData[];
+    selectedNodeIds: Set<string>;
+    onFocusNode: (nodeId: string) => void;
+    onInsertAsset: (payload: InsertAssetPayload) => void;
+};
+
+const NODE_TYPE_ICON: Record<string, typeof Square> = {
+    [CanvasNodeType.Image]: ImageIcon,
+    [CanvasNodeType.Video]: Video,
+    [CanvasNodeType.Audio]: Music2,
+    [CanvasNodeType.Text]: Type,
+    [CanvasNodeType.Config]: Settings2,
+    [CanvasNodeType.Group]: Square,
+};
+
+const STATUS_COLOR: Record<string, string> = {
+    success: "#22c55e",
+    loading: "#f59e0b",
+    error: "#ef4444",
+    idle: "transparent",
+};
+
+export function CanvasSidePanel({ nodes, selectedNodeIds, onFocusNode, onInsertAsset }: Props) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const [tab, setTab] = useState<PanelTab>("canvas");
+
+    return (
+        <aside className="flex h-full w-[280px] shrink-0 flex-col overflow-hidden border-r" style={{ background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }} data-canvas-no-zoom>
+            <div className="flex items-center gap-1 px-3 pt-3">
+                <TabButton label="画布" active={tab === "canvas"} theme={theme} onClick={() => setTab("canvas")} />
+                <TabButton label="资产" active={tab === "assets"} theme={theme} onClick={() => setTab("assets")} />
+            </div>
+            <div className="mt-2 min-h-0 flex-1 overflow-hidden">{tab === "canvas" ? <CanvasNodesTab nodes={nodes} selectedNodeIds={selectedNodeIds} onFocusNode={onFocusNode} theme={theme} /> : <CanvasAssetsTab onInsert={onInsertAsset} theme={theme} />}</div>
+        </aside>
+    );
+}
+
+function TabButton({ label, active, theme, onClick }: { label: string; active: boolean; theme: CanvasTheme; onClick: () => void }) {
+    return (
+        <button type="button" onClick={onClick} className={cn("rounded-lg px-3 py-1.5 text-sm font-semibold transition", active ? "" : "opacity-55 hover:opacity-90")} style={active ? { background: theme.toolbar.activeBg, color: theme.toolbar.activeText } : { color: theme.node.text }}>
+            {label}
+        </button>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// 画布 Tab —— 列出节点,点击居中放大并选中
+// ---------------------------------------------------------------------------
+
+const NODE_FILTER_OPTIONS = [
+    { label: "全部", value: "all" },
+    { label: "图片", value: CanvasNodeType.Image },
+    { label: "视频", value: CanvasNodeType.Video },
+    { label: "文本", value: CanvasNodeType.Text },
+    { label: "音频", value: CanvasNodeType.Audio },
+    { label: "配置", value: CanvasNodeType.Config },
+    { label: "分组", value: CanvasNodeType.Group },
+];
+
+function nodePreviewText(node: CanvasNodeData) {
+    if (node.type === CanvasNodeType.Text) return node.metadata?.content || node.metadata?.prompt || "";
+    return getNodeDefinition(node.type)?.title || node.type;
+}
+
+function CanvasNodesTab({ nodes, selectedNodeIds, onFocusNode, theme }: { nodes: CanvasNodeData[]; selectedNodeIds: Set<string>; onFocusNode: (nodeId: string) => void; theme: CanvasTheme }) {
+    const [keyword, setKeyword] = useState("");
+    const [typeFilter, setTypeFilter] = useState<string>("all");
+
+    const filtered = useMemo(() => {
+        const query = keyword.trim().toLowerCase();
+        return nodes.filter((node) => (typeFilter === "all" || node.type === typeFilter) && (!query || [node.title, node.metadata?.content, node.metadata?.prompt].filter(Boolean).join(" ").toLowerCase().includes(query)));
+    }, [nodes, keyword, typeFilter]);
+
+    return (
+        <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 px-3 pb-2.5 pt-1">
+                <span className="text-xs font-medium opacity-60">画布元素</span>
+                {filtered.length ? <span className="text-xs opacity-35">{filtered.length}</span> : null}
+                <Select size="small" variant="borderless" className="ml-auto w-20" value={typeFilter} onChange={setTypeFilter} options={NODE_FILTER_OPTIONS} />
+            </div>
+            <div className="px-3 pb-2.5">
+                <Input size="small" allowClear prefix={<Search className="size-3.5 text-stone-400" />} placeholder="搜索节点" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
+                {filtered.length ? (
+                    <div className="space-y-1.5">
+                        {filtered.map((node) => {
+                            const Icon = NODE_TYPE_ICON[node.type] || FileText;
+                            const isImage = node.type === CanvasNodeType.Image && node.metadata?.content;
+                            const active = selectedNodeIds.has(node.id);
+                            return (
+                                <button
+                                    key={node.id}
+                                    type="button"
+                                    onClick={() => onFocusNode(node.id)}
+                                    className={cn("flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition", active ? "" : "hover:bg-black/5 dark:hover:bg-white/5")}
+                                    style={active ? { background: theme.toolbar.activeBg } : undefined}
+                                >
+                                    <span className="grid size-10 shrink-0 place-items-center overflow-hidden rounded-md" style={{ background: theme.node.fill }}>
+                                        {isImage ? <img src={node.metadata!.content} alt={node.title} className="size-full object-cover" /> : <Icon className="size-4.5 opacity-70" />}
+                                    </span>
+                                    <span className="min-w-0 flex-1 space-y-0.5">
+                                        <span className="block truncate text-sm font-medium leading-snug">{node.title || getNodeDefinition(node.type)?.title || "未命名节点"}</span>
+                                        <span className="block truncate text-xs leading-snug opacity-50">{nodePreviewText(node)}</span>
+                                    </span>
+                                    {node.metadata?.status && node.metadata.status !== "idle" ? <span className="size-1.5 shrink-0 rounded-full" style={{ background: STATUS_COLOR[node.metadata.status] || "transparent" }} /> : null}
+                                </button>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div className="pt-16 text-center text-sm opacity-40">画布暂无节点</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// 资产 Tab —— 按类型折叠分组 + 标签筛选,点击插入画布
+// ---------------------------------------------------------------------------
+
+const ASSET_GROUPS: { kind: AssetKind; label: string; icon: typeof Square }[] = [
+    { kind: "image", label: "图片", icon: ImageIcon },
+    { kind: "video", label: "视频", icon: Video },
+    { kind: "text", label: "文本", icon: FileText },
+];
+
+function buildInsertPayload(asset: Asset): InsertAssetPayload {
+    if (asset.kind === "text") return { kind: "text", content: asset.data.content, title: asset.title };
+    if (asset.kind === "video") return { kind: "video", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height };
+    return { kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title };
+}
+
+function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetPayload) => void; theme: CanvasTheme }) {
+    const assets = useAssetStore((state) => state.assets);
+    const [keyword, setKeyword] = useState("");
+    const [tagFilter, setTagFilter] = useState<string>("all");
+    const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+    const allTags = useMemo(() => Array.from(new Set(assets.flatMap((asset) => asset.tags || []))).slice(0, 20), [assets]);
+
+    const filtered = useMemo(() => {
+        const query = keyword.trim().toLowerCase();
+        return assets.filter((asset) => (tagFilter === "all" || (asset.tags || []).includes(tagFilter)) && (!query || [asset.title, ...(asset.tags || [])].join(" ").toLowerCase().includes(query)));
+    }, [assets, keyword, tagFilter]);
+
+    const groups = useMemo(() => ASSET_GROUPS.map((group) => ({ ...group, items: filtered.filter((asset) => asset.kind === group.kind) })).filter((group) => group.items.length > 0), [filtered]);
+
+    return (
+        <div className="flex h-full flex-col">
+            <div className="px-3 pb-2">
+                <Input size="small" allowClear prefix={<Search className="size-3.5 text-stone-400" />} placeholder="搜索资产" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+            </div>
+            {allTags.length ? (
+                <div className="flex flex-wrap gap-1.5 px-3 pb-2">
+                    <Tag.CheckableTag checked={tagFilter === "all"} className={cn("prompt-filter-tag", tagFilter === "all" && "is-active")} onChange={() => setTagFilter("all")}>
+                        全部
+                    </Tag.CheckableTag>
+                    {allTags.map((tag) => (
+                        <Tag.CheckableTag key={tag} checked={tagFilter === tag} className={cn("prompt-filter-tag", tagFilter === tag && "is-active")} onChange={() => setTagFilter((prev) => (prev === tag ? "all" : tag))}>
+                            {tag}
+                        </Tag.CheckableTag>
+                    ))}
+                </div>
+            ) : null}
+            <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
+                {groups.length ? (
+                    <div className="space-y-1">
+                        {groups.map((group) => {
+                            const isCollapsed = collapsed[group.kind];
+                            return (
+                                <div key={group.kind}>
+                                    <button type="button" onClick={() => setCollapsed((prev) => ({ ...prev, [group.kind]: !prev[group.kind] }))} className="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs font-semibold opacity-75 transition hover:opacity-100">
+                                        <ChevronRight className={cn("size-3.5 transition-transform", !isCollapsed && "rotate-90")} />
+                                        <group.icon className="size-3.5" />
+                                        <span>{group.label}</span>
+                                        <span className="opacity-50">{group.items.length}</span>
+                                    </button>
+                                    {isCollapsed ? null : (
+                                        <div className="grid grid-cols-2 gap-2 px-1 pb-2 pt-1">
+                                            {group.items.map((asset) => (
+                                                <AssetCard key={asset.id} asset={asset} theme={theme} onClick={() => onInsert(buildInsertPayload(asset))} />
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无资产" className="pt-16" />
+                )}
+            </div>
+        </div>
+    );
+}
+
+function AssetCard({ asset, theme, onClick }: { asset: Asset; theme: CanvasTheme; onClick: () => void }) {
+    const cover = asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : "");
+    return (
+        <button type="button" onClick={onClick} className="group relative overflow-hidden rounded-lg border text-left transition hover:shadow-md" style={{ borderColor: theme.node.stroke, background: theme.node.panel }}>
+            {cover ? <img src={cover} alt={asset.title} className="aspect-square w-full object-cover" /> : <div className="flex aspect-square items-center justify-center p-2 text-center text-[11px] leading-4 opacity-60">{asset.title}</div>}
+            <div className="truncate px-2 py-1.5 text-[11px] font-medium">{asset.title}</div>
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-stone-950/0 text-xs font-medium text-white opacity-0 transition group-hover:bg-stone-950/55 group-hover:opacity-100">插入</div>
+        </button>
+    );
+}

web/src/components/canvas/canvas-toolbar.tsx

@@ -1,9 +1,10 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button, Segmented, Switch } from "antd";
-import { CircleDot, Eraser, FolderOpen, Grid2x2, Group, Hand, Image as ImageIcon, Info, Moon, Music2, Palette, Redo2, Settings2, Square, Sun, Trash2, Type, Undo2, Upload, Video } from "lucide-react";
+import { CircleDot, Eraser, Grid2x2, Group, Hand, Image as ImageIcon, Info, Moon, Music2, Palette, Puzzle, Redo2, Settings2, Square, Sun, Trash2, Type, Undo2, Upload, Video } from "lucide-react";
 
 import { canvasThemes, type CanvasBackgroundMode, type CanvasColorTheme, type CanvasTheme } from "@/lib/canvas-theme";
+import { getNodePluginId, listNodeDefinitions, useNodeRegistryVersion } from "@/lib/canvas/node-registry";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 
@@ -19,6 +20,7 @@ export function CanvasToolbar({
     onAddText,
     onAddConfig,
     onAddGroup,
+    onAddExtensionNode,
     onUndo,
     onRedo,
     onUpload,
@@ -27,7 +29,6 @@ export function CanvasToolbar({
     onDeselect,
     onBackgroundModeChange,
     onShowImageInfoChange,
-    onOpenMyAssets,
 }: {
     selectedCount: number;
     canUndo: boolean;
@@ -40,6 +41,7 @@ export function CanvasToolbar({
     onAddText: () => void;
     onAddConfig: () => void;
     onAddGroup: () => void;
+    onAddExtensionNode: (type: string) => void;
     onUndo: () => void;
     onRedo: () => void;
     onUpload: () => void;
@@ -48,9 +50,9 @@ export function CanvasToolbar({
     onDeselect: () => void;
     onBackgroundModeChange: (mode: CanvasBackgroundMode) => void;
     onShowImageInfoChange: (show: boolean) => void;
-    onOpenMyAssets: () => void;
 }) {
     const wrapRef = useRef<HTMLDivElement>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
     const colorTheme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const theme = canvasThemes[colorTheme];
@@ -58,13 +60,31 @@ export function CanvasToolbar({
     const [tipX, setTipX] = useState(0);
     const [appearanceOpen, setAppearanceOpen] = useState(false);
     const [panelX, setPanelX] = useState(0);
+    const [extensionsOpen, setExtensionsOpen] = useState(false);
+    const [extPanelX, setExtPanelX] = useState(0);
+    // 扩展(插件)节点,随注册表变化实时更新
+    useNodeRegistryVersion();
+    const extensionDefs = listNodeDefinitions().filter((def) => def.showInCreateMenu !== false && getNodePluginId(def.type) !== "builtin");
     const dockStyle = { background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.toolbar.item, boxShadow: colorTheme === "dark" ? "0 18px 45px rgba(0,0,0,.32)" : "0 16px 40px rgba(28,25,23,.12)" };
     const hoverStyle = { background: theme.toolbar.itemHover, color: theme.toolbar.activeText };
     const activeStyle = { background: theme.toolbar.activeBg, color: theme.toolbar.activeText };
     const tip = hovered ? toolLabel(hovered) : "";
 
+    // 点击工具栏(含弹出面板)以外的地方,关闭弹出的扩展节点/画布外观面板
+    useEffect(() => {
+        if (!extensionsOpen && !appearanceOpen) return;
+        const handlePointerDown = (event: PointerEvent) => {
+            if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+                setExtensionsOpen(false);
+                setAppearanceOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+    }, [extensionsOpen, appearanceOpen]);
+
     return (
-        <div className="pointer-events-none absolute bottom-5 z-50 flex justify-center" style={{ left: 300, right: 16 }}>
+        <div ref={rootRef} className="pointer-events-none absolute bottom-5 z-50 flex justify-center" style={{ left: 300, right: 16 }}>
             {tip ? <DockTip label={tip} x={tipX} theme={theme} /> : null}
             <div ref={wrapRef} className="thin-scrollbar pointer-events-auto flex h-14 max-w-full items-center gap-1 overflow-x-auto rounded-xl border px-2 shadow-lg backdrop-blur [&>*]:shrink-0" style={dockStyle}>
                 <ToolbarButton id="tool-hand" label="移动/选择" active={!selectedCount} hovered={hovered} activeStyle={activeStyle} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onDeselect}>
@@ -95,13 +115,30 @@ export function CanvasToolbar({
                 <ToolbarButton id="tool-group" label="组" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onAddGroup}>
                     <Group className="size-4.5" />
                 </ToolbarButton>
-                <ToolbarButton id="tool-upload" label="上传素材" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onUpload}>
+                {extensionDefs.length ? (
+                    <ToolbarButton
+                        id="tool-extensions"
+                        label="扩展节点"
+                        active={extensionsOpen}
+                        hovered={hovered}
+                        activeStyle={activeStyle}
+                        hoverStyle={hoverStyle}
+                        wrapRef={wrapRef}
+                        onTipX={setTipX}
+                        onHover={setHovered}
+                        onClick={(event) => {
+                            setExtPanelX(getTipX(wrapRef.current, event.currentTarget));
+                            setAppearanceOpen(false);
+                            setExtensionsOpen((value) => !value);
+                        }}
+                    >
+                        <Puzzle className="size-4.5" />
+                    </ToolbarButton>
+                ) : null}
+                <ToolbarButton id="tool-upload" label="上传资产" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onUpload}>
                     <Upload className="size-4.5" />
                 </ToolbarButton>
                 <Divider theme={theme} />
-                <ToolbarButton id="tool-assets" label="我的素材" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onOpenMyAssets}>
-                    <FolderOpen className="size-4.5" />
-                </ToolbarButton>
                 <ToolbarButton
                     id="tool-style"
                     label="画布外观"
@@ -114,6 +151,7 @@ export function CanvasToolbar({
                     onHover={setHovered}
                     onClick={(event) => {
                         setPanelX(getTipX(wrapRef.current, event.currentTarget));
+                        setExtensionsOpen(false);
                         setAppearanceOpen((value) => !value);
                     }}
                 >
@@ -133,6 +171,36 @@ export function CanvasToolbar({
                 </ToolbarButton>
             </div>
 
+            {extensionsOpen && extensionDefs.length ? (
+                <div
+                    className="thin-scrollbar pointer-events-auto absolute bottom-[72px] z-30 max-h-[50vh] w-[240px] -translate-x-1/2 overflow-y-auto rounded-xl border p-2 shadow-xl backdrop-blur"
+                    style={{ left: extPanelX || "50%", background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.toolbar.item }}
+                >
+                    <div className="px-1.5 pb-1.5 text-[11px] font-medium opacity-50">扩展节点</div>
+                    <div className="grid gap-0.5">
+                        {extensionDefs.map((def) => (
+                            <button
+                                key={def.type}
+                                type="button"
+                                className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm transition"
+                                style={{ color: theme.toolbar.item }}
+                                onMouseEnter={(event) => (event.currentTarget.style.background = theme.toolbar.itemHover)}
+                                onMouseLeave={(event) => (event.currentTarget.style.background = "transparent")}
+                                onClick={() => {
+                                    onAddExtensionNode(def.type);
+                                    setExtensionsOpen(false);
+                                }}
+                            >
+                                <span className="grid size-7 shrink-0 place-items-center rounded-md text-base" style={{ background: theme.toolbar.itemHover }}>
+                                    {def.icon}
+                                </span>
+                                <span className="min-w-0 flex-1 truncate">{def.title}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            ) : null}
+
             {appearanceOpen ? (
                 <div
                     className="pointer-events-auto absolute bottom-[72px] z-30 w-[248px] -translate-x-1/2 rounded-xl border p-2.5 shadow-xl backdrop-blur"
@@ -287,8 +355,8 @@ function toolLabel(id: string) {
     if (id === "tool-audio") return "音频";
     if (id === "tool-config") return "生成配置";
     if (id === "tool-group") return "组";
-    if (id === "tool-upload") return "上传素材";
-    if (id === "tool-assets") return "我的素材";
+    if (id === "tool-extensions") return "扩展节点";
+    if (id === "tool-upload") return "上传资产";
     if (id === "tool-style") return "画布外观";
     if (id === "tool-delete") return "删除选中";
     if (id === "tool-clear") return "清空画布";

web/src/components/canvas/infinite-canvas.tsx

@@ -152,7 +152,7 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
                 onCanvasDeselect?.();
             }
             panState.current.isPanning = false;
-            document.body.style.cursor = "default";
+            document.body.style.cursor = "";
         };
 
         window.addEventListener("pointermove", handlePointerMove);
@@ -167,7 +167,12 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
         const container = containerRef.current;
         if (!container) return;
 
-        const preventWheelScroll = (event: WheelEvent) => event.preventDefault();
+        // 阻止画布滚动导致页面滚动;但浮层(创建菜单/弹窗等)内允许原生滚动
+        const preventWheelScroll = (event: WheelEvent) => {
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest("[data-canvas-no-zoom],.ant-modal,.ant-popover,.ant-dropdown,.ant-select-dropdown,.ant-picker-dropdown")) return;
+            event.preventDefault();
+        };
         container.addEventListener("wheel", preventWheelScroll, { passive: false });
         return () => container.removeEventListener("wheel", preventWheelScroll);
     }, [containerRef]);

web/src/components/canvas/nodes/builtin-nodes.tsx

@@ -0,0 +1,37 @@
+import { FileText, Group, Image as ImageIcon, Music2, Settings2, Video } from "lucide-react";
+
+import { NODE_SPECS } from "@/constant/canvas";
+import { registerNodeDefinitions } from "@/lib/canvas/node-registry";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+import type { CanvasNodeDefinition, CanvasNodeResource } from "@/types/canvas-plugin";
+
+// 内置节点的可扩展元数据(尺寸/初始 metadata 复用 NODE_SPECS)。
+// 渲染仍由 canvas-node 内部渲染器负责,故不提供 Content。
+function builtinResource(node: CanvasNodeData): CanvasNodeResource | null {
+    if (node.type === CanvasNodeType.Image && node.metadata?.content) return { kind: "image", url: node.metadata.content };
+    if (node.type === CanvasNodeType.Video && node.metadata?.content) return { kind: "video", url: node.metadata.content };
+    if (node.type === CanvasNodeType.Audio && node.metadata?.content) return { kind: "audio", url: node.metadata.content };
+    if (node.type === CanvasNodeType.Text && (node.metadata?.content || node.metadata?.prompt)) return { kind: "text", text: node.metadata.content || node.metadata.prompt };
+    return null;
+}
+
+const iconClass = "size-5";
+
+const BUILTIN_DEFINITIONS: CanvasNodeDefinition[] = [
+    { type: CanvasNodeType.Text, title: "文本", icon: <FileText className={iconClass} />, minimapColor: undefined, resource: builtinResource },
+    { type: CanvasNodeType.Image, title: "图片", icon: <ImageIcon className={iconClass} />, minimapColor: "#10b981", keepAspectRatio: (node: CanvasNodeData) => !node.metadata?.freeResize, resource: builtinResource },
+    { type: CanvasNodeType.Video, title: "视频", icon: <Video className={iconClass} />, minimapColor: "#f97316", keepAspectRatio: () => true, resource: builtinResource },
+    { type: CanvasNodeType.Audio, title: "音频", icon: <Music2 className={iconClass} />, minimapColor: "#a855f7", resource: builtinResource },
+    { type: CanvasNodeType.Config, title: "生成配置", icon: <Settings2 className={iconClass} />, minimapColor: "#60a5fa", hasSourceHandle: false },
+    { type: CanvasNodeType.Group, title: "组", icon: <Group className={iconClass} />, minimapColor: "#94a3b8" },
+].map((def) => {
+    const spec = NODE_SPECS[def.type];
+    return { ...def, title: spec.title, defaultSize: { width: spec.width, height: spec.height }, defaultMetadata: spec.metadata };
+});
+
+let registered = false;
+export function registerBuiltinNodes() {
+    if (registered) return;
+    registered = true;
+    registerNodeDefinitions(BUILTIN_DEFINITIONS, "builtin");
+}

web/src/components/image-settings-panel.tsx

@@ -33,7 +33,7 @@ export const imageAspectOptions = aspectOptions.map((item) => ({ value: item.siz
 
 type ImageSettingsPanelProps = {
     config: AiConfig;
-    onConfigChange: (key: "quality" | "size" | "count", value: string) => void;
+    onConfigChange: (key: "quality" | "size" | "count" | "background", value: string) => void;
     theme: CanvasTheme;
     showTitle?: boolean;
     className?: string;
@@ -46,6 +46,7 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
     const quality = config.quality || "auto";
     const count = Math.max(1, Math.min(maxCount, Math.floor(Math.abs(Number(config.count)) || 1)));
     const activeSize = config.size || "auto";
+    const transparentBackground = config.background === "transparent";
     const selectedAspect = aspectOptions.find((item) => (item.size || item.value) === activeSize || item.value === activeSize);
     const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
     const selectAspect = (value: string) => {
@@ -117,6 +118,17 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
                         ))}
                     </div>
                 </div>
+                <div className="flex items-center justify-between gap-3">
+                    <div className="space-y-0.5">
+                        <SettingTitle color={theme.node.muted}>透明背景</SettingTitle>
+                        <div className="text-xs" style={{ color: theme.node.muted, opacity: 0.75 }}>
+                            开启后生成无背景的透明图像(仅部分模型可用)
+                        </div>
+                    </div>
+                    <span onMouseDown={(event) => event.stopPropagation()}>
+                        <Switch size="small" checked={transparentBackground} onChange={(checked) => onConfigChange("background", checked ? "transparent" : "")} />
+                    </span>
+                </div>
                 <div className="space-y-2.5">
                     <SettingTitle color={theme.node.muted}>生成张数</SettingTitle>
                     <div className="grid grid-cols-4 gap-2.5">

web/src/components/layout/app-config-modal.tsx

@@ -1,20 +1,18 @@
 import { App, Button, Form, Input, Modal, Progress, Select, Tabs } from "antd";
-import { CircleAlert, Cloud, Plus, RefreshCw, Trash2, Wifi } from "lucide-react";
+import { Cloud, Pencil, Plus, RefreshCw, Trash2, Wifi } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { ModelPicker } from "@/components/model-picker";
-import { fetchChannelModels } from "@/services/api/image";
+import { ChannelEditorDrawer } from "@/components/layout/channel-editor-drawer";
 import { syncAppDataToWebdav, type AppSyncDomainKey, type AppSyncProgressEvent } from "@/services/app-sync";
 import { testWebdavConnection, WEBDAV_MANIFEST_FILE_NAME } from "@/services/webdav-sync";
 import { audioFormatOptions, audioVoiceOptions, normalizeAudioSpeedValue } from "@/lib/audio-generation";
-import { createModelChannel, defaultBaseUrlForApiFormat, filterModelsByCapability, modelOptionLabel, modelOptionsFromChannels, normalizeModelOptionValue, useConfigStore, type AiConfig, type ApiCallFormat, type ConfigTabKey, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
+import { createModelChannel, modelOptionsFromChannels, normalizeModelOptionValue, selectableModelsByCapability, useConfigStore, type AiConfig, type ApiCallFormat, type ConfigTabKey, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
 
 type ModelGroup = {
     capability: ModelCapability;
     modelKey: "imageModel" | "videoModel" | "textModel" | "audioModel";
-    modelsKey: "imageModels" | "videoModels" | "textModels" | "audioModels";
     defaultLabel: string;
-    optionsLabel: string;
 };
 
 type WebdavDomainProgress = {
@@ -26,21 +24,16 @@ type WebdavDomainProgress = {
 };
 
 const modelGroups: ModelGroup[] = [
-    { capability: "image", modelKey: "imageModel", modelsKey: "imageModels", defaultLabel: "默认生图模型", optionsLabel: "生图模型可选项" },
-    { capability: "video", modelKey: "videoModel", modelsKey: "videoModels", defaultLabel: "默认视频模型", optionsLabel: "视频模型可选项" },
-    { capability: "text", modelKey: "textModel", modelsKey: "textModels", defaultLabel: "默认文本模型", optionsLabel: "文本模型可选项" },
-    { capability: "audio", modelKey: "audioModel", modelsKey: "audioModels", defaultLabel: "默认音频模型", optionsLabel: "音频模型可选项" },
-];
-
-const apiFormatOptions: Array<{ label: string; value: ApiCallFormat }> = [
-    { label: "OpenAI", value: "openai" },
-    { label: "Gemini", value: "gemini" },
+    { capability: "image", modelKey: "imageModel", defaultLabel: "默认生图模型" },
+    { capability: "video", modelKey: "videoModel", defaultLabel: "默认视频模型" },
+    { capability: "text", modelKey: "textModel", defaultLabel: "默认文本模型" },
+    { capability: "audio", modelKey: "audioModel", defaultLabel: "默认音频模型" },
 ];
 
 const webdavDomainKeys: AppSyncDomainKey[] = ["canvas", "assets", "image-workbench", "video-workbench"];
 const webdavDomainLabels: Record<AppSyncDomainKey, string> = {
     canvas: "画布",
-    assets: "我的素材",
+    assets: "我的资产",
     "image-workbench": "生图工作台",
     "video-workbench": "视频创作台",
 };
@@ -58,7 +51,7 @@ function createWebdavDomainProgress(): Record<AppSyncDomainKey, WebdavDomainProg
 export function AppConfigPanel({ showDoneButton = false, initialTab = "channels" }: { showDoneButton?: boolean; initialTab?: ConfigTabKey }) {
     const { message } = App.useApp();
     const [activeTab, setActiveTab] = useState<ConfigTabKey>(initialTab);
-    const [loadingChannelId, setLoadingChannelId] = useState("");
+    const [editingChannelId, setEditingChannelId] = useState("");
     const [testingWebdav, setTestingWebdav] = useState(false);
     const [syncingWebdav, setSyncingWebdav] = useState(false);
     const [webdavSyncStatus, setWebdavSyncStatus] = useState("");
@@ -70,8 +63,8 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
     const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
     const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
     const clearPromptContinue = useConfigStore((state) => state.clearPromptContinue);
-    const modelOptions = config.models.map((model) => ({ label: modelOptionLabel(config, model), value: model }));
     const webdavReady = Boolean(webdav.url.trim());
+    const editingChannel = config.channels.find((channel) => channel.id === editingChannelId) || null;
     useEffect(() => setActiveTab(initialTab), [initialTab]);
 
     const saveConfig = (nextConfig: AiConfig) => {
@@ -86,22 +79,12 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
         clearPromptContinue();
     };
 
-    const updateChannels = (channels: ModelChannel[]) => {
-        const nextConfig = withChannels(config, channels);
-        saveConfig(nextConfig);
-    };
-
-    const updateChannel = (id: string, patch: Partial<ModelChannel>) => {
-        updateChannels(config.channels.map((channel) => (channel.id === id ? { ...channel, ...patch, models: patch.models ? uniqueModels(patch.models) : channel.models } : channel)));
-    };
-
-    const updateChannelApiFormat = (channel: ModelChannel, apiFormat: ApiCallFormat) => {
-        const baseUrl = !channel.baseUrl.trim() || channel.baseUrl.trim() === defaultBaseUrlForApiFormat(channel.apiFormat) ? defaultBaseUrlForApiFormat(apiFormat) : channel.baseUrl;
-        updateChannel(channel.id, { apiFormat, baseUrl });
-    };
+    const updateChannels = (channels: ModelChannel[]) => saveConfig(withChannels(config, channels));
 
     const addChannel = () => {
-        updateChannels([...config.channels, createModelChannel({ name: `渠道 ${config.channels.length + 1}` })]);
+        const channel = createModelChannel({ name: `渠道 ${config.channels.length + 1}` });
+        updateChannels([...config.channels, channel]);
+        setEditingChannelId(channel.id);
     };
 
     const deleteChannel = (id: string) => {
@@ -112,46 +95,8 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
         updateChannels(config.channels.filter((channel) => channel.id !== id));
     };
 
-    const refreshChannelModels = async (channel: ModelChannel) => {
-        if (!channel.baseUrl.trim() || !channel.apiKey.trim()) {
-            message.error("请先填写该渠道的 Base URL 和 API Key");
-            return;
-        }
-        setLoadingChannelId(channel.id);
-        try {
-            const models = await fetchChannelModels(channel);
-            updateChannels(config.channels.map((item) => (item.id === channel.id ? { ...item, models } : item)));
-            message.success(`${channel.name} 模型列表已更新`);
-        } catch (error) {
-            message.error(error instanceof Error ? error.message : "读取模型失败");
-        } finally {
-            setLoadingChannelId("");
-        }
-    };
-
-    const refreshAllModels = async () => {
-        const runnable = config.channels.filter((channel) => channel.baseUrl.trim() && channel.apiKey.trim());
-        if (!runnable.length) {
-            message.error("请先填写至少一个渠道的 Base URL 和 API Key");
-            return;
-        }
-        setLoadingChannelId("all");
-        try {
-            const entries = await Promise.all(runnable.map(async (channel) => [channel.id, await fetchChannelModels(channel)] as const));
-            const modelMap = new Map(entries);
-            updateChannels(config.channels.map((channel) => (modelMap.has(channel.id) ? { ...channel, models: modelMap.get(channel.id) || [] } : channel)));
-            message.success("模型列表已更新");
-        } catch (error) {
-            message.error(error instanceof Error ? error.message : "读取模型失败");
-        } finally {
-            setLoadingChannelId("");
-        }
-    };
-
-    const updateCapabilityModels = (group: ModelGroup, models: string[]) => {
-        const next = uniqueModels(models.map((model) => normalizeModelOptionValue(model, config.channels)).filter(Boolean));
-        updateConfig(group.modelsKey, next);
-        if (!next.includes(config[group.modelKey])) updateConfig(group.modelKey, next[0] || "");
+    const saveChannel = (channel: ModelChannel) => {
+        updateChannels(config.channels.map((item) => (item.id === channel.id ? channel : item)));
     };
 
     const testWebdav = async () => {
@@ -196,7 +141,7 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
         try {
             const result = await syncAppDataToWebdav(webdav, updateWebdavProgress);
             updateWebdavConfig("lastSyncedAt", result.syncedAt);
-            message.success(`同步完成：${result.projects} 个画布，${result.assets} 个素材，${result.imageLogs + result.videoLogs} 条记录，本次上传 ${result.uploadedFiles} 个文件 ${formatBytes(result.uploadedBytes)}`);
+            message.success(`同步完成：${result.projects} 个画布，${result.assets} 个资产，${result.imageLogs + result.videoLogs} 条记录，本次上传 ${result.uploadedFiles} 个文件 ${formatBytes(result.uploadedBytes)}`);
         } catch (error) {
             setWebdavSyncStatus(error instanceof Error ? error.message : "WebDAV 同步失败");
             message.error(error instanceof Error ? error.message : "WebDAV 同步失败");
@@ -215,107 +160,48 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
                         key: "channels",
                         label: "渠道",
                         children: (
-                            <Form layout="vertical" requiredMark={false}>
-                                <div className="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-stone-200 p-3 dark:border-stone-800">
-                                    <div className="min-w-0 flex-1">
-                                        <div className="flex w-fit max-w-full flex-wrap items-center gap-1.5 rounded-md border border-amber-300 bg-amber-50 px-2.5 py-1.5 text-xs text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/30 dark:text-amber-100">
-                                            <CircleAlert className="size-3.5 shrink-0" />
-                                            <span className="font-semibold">重要：</span>
-                                            <span>新增或拉取模型后，需要到“模型”Tab 选择可选项才会显示。</span>
-                                            <Button type="link" size="small" className="h-auto p-0 text-xs font-semibold text-amber-900 dark:text-amber-100" onClick={() => setActiveTab("models")}>
-                                                去模型设置
-                                            </Button>
-                                        </div>
-                                    </div>
-                                    <div className="flex shrink-0 gap-2">
-                                        <Button icon={<RefreshCw className="size-4" />} loading={Boolean(loadingChannelId)} onClick={() => void refreshAllModels()}>
-                                            拉取全部
-                                        </Button>
-                                        <Button type="primary" icon={<Plus className="size-4" />} onClick={addChannel}>
-                                            新增渠道
-                                        </Button>
-                                    </div>
+                            <div>
+                                <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+                                    <div className="text-xs text-stone-500">每个渠道选择一个协议并拉取模型，为每个模型指定能力（生图/视频/文本/音频），并可自定义调用脚本。</div>
+                                    <Button type="primary" icon={<Plus className="size-4" />} onClick={addChannel}>
+                                        新增渠道
+                                    </Button>
                                 </div>
-                                <div className="space-y-3">
+                                <div className="space-y-2">
                                     {config.channels.map((channel) => (
-                                        <section key={channel.id} className="rounded-lg border border-stone-200 p-3 dark:border-stone-800">
-                                            <div className="mb-3 flex items-center justify-between gap-3">
-                                                <div className="min-w-0">
-                                                    <div className="truncate text-sm font-semibold">{channel.name || "未命名渠道"}</div>
-                                                    <div className="mt-1 text-xs text-stone-500">
-                                                        {apiFormatLabel(channel.apiFormat)} · 已保存 {channel.models.length} 个模型
-                                                    </div>
-                                                </div>
-                                                <div className="flex shrink-0 gap-2">
-                                                    <Button size="small" loading={loadingChannelId === channel.id} onClick={() => void refreshChannelModels(channel)}>
-                                                        拉取模型
-                                                    </Button>
-                                                    <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => deleteChannel(channel.id)} />
+                                        <div key={channel.id} className="flex items-center justify-between gap-3 rounded-lg border border-stone-200 px-4 py-3 dark:border-stone-800">
+                                            <div className="min-w-0">
+                                                <div className="truncate text-sm font-semibold">{channel.name || "未命名渠道"}</div>
+                                                <div className="mt-1 truncate text-xs text-stone-500">
+                                                    {apiFormatLabel(channel.apiFormat)} · {channel.models.length} 个模型 · {channel.baseUrl || "未填写接口地址"}
                                                 </div>
                                             </div>
-                                            <div className="grid gap-4 md:grid-cols-2">
-                                                <Form.Item label="渠道名称" className="mb-0">
-                                                    <Input value={channel.name} onChange={(event) => updateChannel(channel.id, { name: event.target.value })} />
-                                                </Form.Item>
-                                                <Form.Item label="调用格式" className="mb-0">
-                                                    <Select value={channel.apiFormat} options={apiFormatOptions} onChange={(value: ApiCallFormat) => updateChannelApiFormat(channel, value)} />
-                                                </Form.Item>
-                                                <Form.Item label="Base URL" className="mb-0">
-                                                    <Input value={channel.baseUrl} onChange={(event) => updateChannel(channel.id, { baseUrl: event.target.value })} />
-                                                </Form.Item>
-                                                <Form.Item label="API Key" className="mb-0">
-                                                    <Input.Password value={channel.apiKey} onChange={(event) => updateChannel(channel.id, { apiKey: event.target.value })} />
-                                                </Form.Item>
-                                                <Form.Item label="模型列表" className="mb-0 md:col-span-2">
-                                                    <Select mode="tags" showSearch allowClear maxTagCount="responsive" placeholder="输入模型名，或点击拉取模型" value={channel.models} onChange={(models) => updateChannel(channel.id, { models })} />
-                                                </Form.Item>
+                                            <div className="flex shrink-0 gap-2">
+                                                <Button size="small" icon={<Pencil className="size-3.5" />} onClick={() => setEditingChannelId(channel.id)}>
+                                                    编辑
+                                                </Button>
+                                                <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => deleteChannel(channel.id)} />
                                             </div>
-                                        </section>
+                                        </div>
                                     ))}
                                 </div>
-                            </Form>
+                            </div>
                         ),
                     },
                     {
-                        key: "models",
-                        label: "模型",
+                        key: "preferences",
+                        label: "偏好设置",
                         children: (
                             <Form layout="vertical" requiredMark={false}>
-                                <div className="mb-4 rounded-lg border border-stone-200 p-3 dark:border-stone-800">
-                                    <div className="text-sm font-semibold">默认模型和可选项</div>
-                                    <div className="mt-1 text-xs leading-5 text-stone-500">可选项决定各处下拉框展示哪些模型；同名模型会以括号里的渠道名区分。</div>
-                                </div>
-                                <div className="grid gap-4 md:grid-cols-2">
-                                    {modelGroups.map((group) => (
-                                        <Form.Item key={group.modelsKey} label={group.optionsLabel} className="mb-0">
-                                            <Select
-                                                mode="tags"
-                                                showSearch
-                                                allowClear
-                                                maxTagCount="responsive"
-                                                placeholder={config.models.length ? `请选择或输入${group.optionsLabel}` : "先到渠道里填写或拉取模型"}
-                                                value={config[group.modelsKey]}
-                                                options={modelOptions}
-                                                onChange={(models) => updateCapabilityModels(group, models)}
-                                            />
-                                        </Form.Item>
-                                    ))}
-                                </div>
-                                <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                                <div className="mb-2 text-sm font-semibold">默认模型</div>
+                                <div className="mb-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                                     {modelGroups.map((group) => (
                                         <Form.Item key={group.modelKey} label={group.defaultLabel} className="mb-0">
                                             <ModelPicker config={config} value={config[group.modelKey]} onChange={(model) => updateConfig(group.modelKey, model)} capability={group.capability} fullWidth />
                                         </Form.Item>
                                     ))}
                                 </div>
-                            </Form>
-                        ),
-                    },
-                    {
-                        key: "preferences",
-                        label: "生成偏好",
-                        children: (
-                            <Form layout="vertical" requiredMark={false}>
+                                <div className="mb-2 text-sm font-semibold">生成偏好</div>
                                 <div className="grid gap-4 md:grid-cols-4">
                                     <Form.Item label="画布默认生图张数" extra="新建画布生图和配置节点默认使用，单个节点仍可单独覆盖。" className="mb-4">
                                         <Input
@@ -366,7 +252,7 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
                                                 <Cloud className="size-4" />
                                                 WebDAV 同步
                                             </div>
-                                            <div className="mt-1 text-xs text-stone-500">同步画布、我的素材、生成记录和本地媒体文件，不包含 AI API Key；浏览器会直接连接 WebDAV 服务。</div>
+                                            <div className="mt-1 text-xs text-stone-500">同步画布、我的资产、生成记录和本地媒体文件，不包含 AI API Key；浏览器会直接连接 WebDAV 服务。</div>
                                         </div>
                                         <div className="text-xs text-stone-500">{webdav.lastSyncedAt ? `上次同步 ${formatWebdavTime(webdav.lastSyncedAt)}` : "尚未同步"}</div>
                                     </div>
@@ -407,6 +293,7 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
                     </Button>
                 </div>
             ) : null}
+            <ChannelEditorDrawer open={Boolean(editingChannel)} channel={editingChannel} onSave={saveChannel} onClose={() => setEditingChannelId("")} />
         </>
     );
 }
@@ -420,7 +307,7 @@ export function AppConfigModal() {
             title={
                 <div>
                     <div className="text-lg font-semibold">配置与用户偏好</div>
-                    <div className="mt-1 text-xs font-normal text-stone-500">渠道聚合、模型选择和同步偏好</div>
+                    <div className="mt-1 text-xs font-normal text-stone-500">渠道聚合、默认模型和同步偏好</div>
                 </div>
             }
             open={isConfigOpen}
@@ -436,48 +323,33 @@ export function AppConfigModal() {
 }
 
 function withChannels(config: AiConfig, channels: ModelChannel[]): AiConfig {
-    const models = modelOptionsFromChannels(channels);
-    const imageModels = keepOrSuggest(config.imageModels, filterModelsByCapability(models, "image"), models);
-    const videoModels = keepOrSuggest(config.videoModels, filterModelsByCapability(models, "video"), models);
-    const textModels = keepOrSuggest(config.textModels, filterModelsByCapability(models, "text"), models);
-    const audioModels = keepOrSuggest(config.audioModels, filterModelsByCapability(models, "audio"), models);
-    return {
+    const next: AiConfig = {
         ...config,
         channels,
-        models,
+        models: modelOptionsFromChannels(channels),
         baseUrl: channels[0]?.baseUrl || config.baseUrl,
         apiKey: channels[0]?.apiKey || config.apiKey,
         apiFormat: channels[0]?.apiFormat || config.apiFormat,
-        imageModels,
-        videoModels,
-        textModels,
-        audioModels,
-        imageModel: normalizeDefaultModel(config.imageModel, imageModels),
-        videoModel: normalizeDefaultModel(config.videoModel, videoModels),
-        textModel: normalizeDefaultModel(config.textModel, textModels),
-        audioModel: normalizeDefaultModel(config.audioModel, audioModels),
+    };
+    return {
+        ...next,
+        imageModel: pickDefaultModel(next, "image", config.imageModel),
+        videoModel: pickDefaultModel(next, "video", config.videoModel),
+        textModel: pickDefaultModel(next, "text", config.textModel),
+        audioModel: pickDefaultModel(next, "audio", config.audioModel),
     };
 }
 
-function keepOrSuggest(current: string[], suggested: string[], allModels: string[]) {
-    const available = new Set(allModels);
-    const kept = uniqueModels(current).filter((model) => available.has(model));
-    return kept.length ? kept : suggested;
-}
-
-function normalizeDefaultModel(value: string, options: string[]) {
-    if (options.includes(value)) return value;
-    return options[0] || value;
+function pickDefaultModel(config: AiConfig, capability: ModelCapability, current: string) {
+    const options = selectableModelsByCapability(config, capability);
+    const normalized = normalizeModelOptionValue(current, config.channels);
+    return options.includes(normalized) ? normalized : options[0] || "";
 }
 
 function normalizeImageCount(value: string) {
     return String(Math.max(1, Math.min(15, Math.floor(Math.abs(Number(value)) || 3))));
 }
 
-function uniqueModels(models: string[]) {
-    return Array.from(new Set(models.map((model) => model.trim()).filter(Boolean)));
-}
-
 function apiFormatLabel(apiFormat: ApiCallFormat) {
     return apiFormat === "gemini" ? "Gemini" : "OpenAI";
 }

web/src/components/layout/channel-editor-drawer.tsx

@@ -0,0 +1,134 @@
+import { Button, Drawer, Input, Segmented, Select, Space } from "antd";
+import { ListPlus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { defaultBaseUrlForApiFormat, guessCapability, normalizeChannelModels, type ApiCallFormat, type ChannelModel, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
+import { ModelScriptEditor } from "./model-script-editor";
+import { ModelSelectModal } from "./model-select-modal";
+
+const apiFormatOptions: Array<{ label: string; value: ApiCallFormat }> = [
+    { label: "OpenAI", value: "openai" },
+    { label: "Gemini", value: "gemini" },
+];
+
+const capabilityOptions: Array<{ label: string; value: ModelCapability }> = [
+    { label: "生图", value: "image" },
+    { label: "视频", value: "video" },
+    { label: "文本", value: "text" },
+    { label: "音频", value: "audio" },
+];
+
+type ScriptTarget = { name: string; capability: ModelCapability; value: string };
+
+export function ChannelEditorDrawer({ open, channel, onSave, onClose }: { open: boolean; channel: ModelChannel | null; onSave: (channel: ModelChannel) => void; onClose: () => void }) {
+    const [draft, setDraft] = useState<ModelChannel | null>(channel);
+    const [selectOpen, setSelectOpen] = useState(false);
+    const [scriptTarget, setScriptTarget] = useState<ScriptTarget | null>(null);
+
+    useEffect(() => {
+        if (open && channel) setDraft(channel);
+    }, [open, channel]);
+
+    if (!draft) return null;
+
+    const patch = (value: Partial<ModelChannel>) => setDraft((current) => (current ? { ...current, ...value } : current));
+    const setModels = (models: ChannelModel[]) => patch({ models });
+
+    const changeApiFormat = (apiFormat: ApiCallFormat) => {
+        const baseUrl = !draft.baseUrl.trim() || draft.baseUrl.trim() === defaultBaseUrlForApiFormat(draft.apiFormat) ? defaultBaseUrlForApiFormat(apiFormat) : draft.baseUrl;
+        patch({ apiFormat, baseUrl });
+    };
+
+    const applySelection = (names: string[]) => {
+        const map = new Map(draft.models.map((model) => [model.name, model]));
+        setModels(names.map((name) => map.get(name) || { name, capability: guessCapability(name) }));
+    };
+
+    const setCapability = (name: string, capability: ModelCapability) => setModels(draft.models.map((model) => (model.name === name ? { ...model, capability } : model)));
+    const setScript = (name: string, script: string) => setModels(draft.models.map((model) => (model.name === name ? { ...model, script: script || undefined } : model)));
+    const removeModel = (name: string) => setModels(draft.models.filter((model) => model.name !== name));
+
+    const save = () => {
+        onSave({ ...draft, name: draft.name.trim() || "未命名渠道", models: normalizeChannelModels(draft.models) });
+        onClose();
+    };
+
+    return (
+        <Drawer
+            open={open}
+            width={640}
+            title="编辑渠道"
+            onClose={onClose}
+            styles={{ body: { paddingTop: 16 } }}
+            extra={
+                <Space>
+                    <Button onClick={onClose}>取消</Button>
+                    <Button type="primary" onClick={save}>
+                        保存
+                    </Button>
+                </Space>
+            }
+        >
+            <div className="grid gap-4 md:grid-cols-2">
+                <label className="block">
+                    <span className="mb-1 block text-sm font-medium">渠道名称</span>
+                    <Input value={draft.name} onChange={(event) => patch({ name: event.target.value })} />
+                </label>
+                <label className="block">
+                    <span className="mb-1 block text-sm font-medium">协议</span>
+                    <Select className="w-full" value={draft.apiFormat} options={apiFormatOptions} onChange={changeApiFormat} />
+                </label>
+                <label className="block md:col-span-2">
+                    <span className="mb-1 block text-sm font-medium">接口地址</span>
+                    <Input value={draft.baseUrl} onChange={(event) => patch({ baseUrl: event.target.value })} placeholder="https://api.example.com" />
+                </label>
+                <label className="block md:col-span-2">
+                    <span className="mb-1 block text-sm font-medium">API Key</span>
+                    <Input.Password value={draft.apiKey} onChange={(event) => patch({ apiKey: event.target.value })} placeholder="sk-..." />
+                </label>
+            </div>
+
+            <div className="mt-6 mb-3 flex flex-wrap items-center justify-between gap-2">
+                <div>
+                    <div className="text-sm font-semibold">渠道模型</div>
+                    <div className="mt-0.5 text-xs text-stone-500">已选 {draft.models.length} 个；为每个模型指定能力并可自定义调用脚本。</div>
+                </div>
+                <Button type="primary" icon={<ListPlus className="size-4" />} onClick={() => setSelectOpen(true)}>
+                    选择模型
+                </Button>
+            </div>
+
+            <div className="space-y-2 rounded-lg border border-stone-200 p-2 dark:border-stone-800">
+                {draft.models.length ? (
+                    draft.models.map((model) => (
+                        <div key={model.name} className="flex flex-wrap items-center gap-3 rounded-md px-2 py-1.5 hover:bg-stone-50 dark:hover:bg-stone-900/40">
+                            <span className="min-w-0 flex-1 truncate text-sm" title={model.name}>
+                                {model.name}
+                            </span>
+                            <div className="flex shrink-0 items-center gap-2">
+                                <Segmented size="small" value={model.capability} options={capabilityOptions} onChange={(value) => setCapability(model.name, value as ModelCapability)} />
+                                <Button size="small" type={model.script ? "primary" : "default"} ghost={Boolean(model.script)} onClick={() => setScriptTarget({ name: model.name, capability: model.capability, value: model.script || "" })}>
+                                    {model.script ? "脚本已设" : "调用脚本"}
+                                </Button>
+                                <Button size="small" danger type="text" icon={<Trash2 className="size-3.5" />} onClick={() => removeModel(model.name)} />
+                            </div>
+                        </div>
+                    ))
+                ) : (
+                    <div className="px-2 py-8 text-center text-sm text-stone-500">点击「选择模型」拉取或手动增加模型。</div>
+                )}
+            </div>
+
+            <ModelSelectModal open={selectOpen} channel={draft} selectedNames={draft.models.map((model) => model.name)} onConfirm={applySelection} onClose={() => setSelectOpen(false)} />
+
+            <ModelScriptEditor
+                open={Boolean(scriptTarget)}
+                capability={scriptTarget?.capability || "text"}
+                modelName={scriptTarget?.name || ""}
+                value={scriptTarget?.value || ""}
+                onSave={(script) => scriptTarget && setScript(scriptTarget.name, script)}
+                onClose={() => setScriptTarget(null)}
+            />
+        </Drawer>
+    );
+}

web/src/components/layout/model-script-editor.tsx

@@ -0,0 +1,112 @@
+import { javascript } from "@codemirror/lang-javascript";
+import CodeMirror from "@uiw/react-codemirror";
+import { Button, Modal } from "antd";
+import { useEffect, useState } from "react";
+
+import { PLUGIN_RETURNS, PLUGIN_TEMPLATES, PLUGIN_VARIABLES } from "@/services/api/model-plugin";
+import type { ModelCapability } from "@/stores/use-config-store";
+
+const capabilityLabels: Record<ModelCapability, string> = { image: "生图", video: "视频", text: "文本", audio: "音频" };
+
+function isDarkMode() {
+    return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+}
+
+export function ModelScriptEditor({ open, capability, modelName, value, onSave, onClose }: { open: boolean; capability: ModelCapability; modelName: string; value: string; onSave: (script: string) => void; onClose: () => void }) {
+    const [draft, setDraft] = useState(value);
+    useEffect(() => {
+        if (open) setDraft(value);
+    }, [open, value]);
+
+    const variables = PLUGIN_VARIABLES.filter((variable) => !variable.capabilities || variable.capabilities.includes(capability));
+
+    return (
+        <Modal
+            open={open}
+            title={
+                <div>
+                    <div className="text-base font-semibold">
+                        {capabilityLabels[capability]}
+                        {modelName ? ` - ${modelName}` : ""}
+                    </div>
+                    <div className="mt-1 text-xs font-normal text-stone-500">脚本是一段异步函数体，直接使用下方变量，最后 return 结果；留空则使用系统默认调用。</div>
+                </div>
+            }
+            width={1080}
+            centered
+            onCancel={onClose}
+            styles={{ body: { padding: 0 } }}
+            footer={
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                        {PLUGIN_TEMPLATES[capability].map((template) => (
+                            <Button key={template.label} size="small" onClick={() => setDraft(template.script)}>
+                                插入{template.label}模板
+                            </Button>
+                        ))}
+                        <Button size="small" danger onClick={() => setDraft("")}>
+                            恢复默认调用
+                        </Button>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Button onClick={onClose}>取消</Button>
+                        <Button
+                            type="primary"
+                            onClick={() => {
+                                onSave(draft.trim());
+                                onClose();
+                            }}
+                        >
+                            保存
+                        </Button>
+                    </div>
+                </div>
+            }
+        >
+            <div className="flex h-[60vh] min-h-[420px] border-t border-stone-200 dark:border-stone-800">
+                <aside className="flex w-[320px] shrink-0 flex-col overflow-y-auto border-r border-stone-200 bg-stone-50/80 dark:border-stone-800 dark:bg-stone-900/40">
+                    <div className="border-b border-stone-200/70 px-4 py-3 dark:border-stone-800/70">
+                        <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-stone-400">返回要求</div>
+                        <div className="text-xs leading-6 text-stone-600 dark:text-stone-300">{PLUGIN_RETURNS[capability]}</div>
+                    </div>
+                    <div className="px-4 py-3">
+                        <div className="mb-2.5 flex items-center justify-between">
+                            <span className="text-[11px] font-semibold uppercase tracking-wide text-stone-400">可用变量</span>
+                            <span className="text-[10px] text-stone-400">点击插入</span>
+                        </div>
+                        <div className="space-y-1.5">
+                            {variables.map((variable) => (
+                                <button
+                                    key={variable.name}
+                                    type="button"
+                                    onClick={() => setDraft((current) => (current ? `${current}\n${variable.name}` : variable.name))}
+                                    className="group block w-full rounded-lg border border-transparent px-2.5 py-2 text-left transition-colors hover:border-stone-200 hover:bg-white dark:hover:border-stone-700 dark:hover:bg-stone-800/60"
+                                >
+                                    <div className="flex flex-wrap items-baseline gap-1.5">
+                                        <code className="rounded bg-stone-200/80 px-1.5 py-0.5 font-mono text-[11px] font-semibold text-stone-800 group-hover:bg-blue-100 group-hover:text-blue-700 dark:bg-stone-800 dark:text-stone-100 dark:group-hover:bg-blue-950 dark:group-hover:text-blue-300">
+                                            {variable.name}
+                                        </code>
+                                        <span className="font-mono text-[10px] text-stone-400">{variable.type}</span>
+                                    </div>
+                                    <div className="mt-1 text-xs leading-5 text-stone-500 dark:text-stone-400">{variable.desc}</div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </aside>
+                <div className="min-w-0 flex-1 overflow-hidden bg-white dark:bg-stone-950">
+                    <CodeMirror
+                        value={draft}
+                        onChange={setDraft}
+                        height="100%"
+                        theme={isDarkMode() ? "dark" : "light"}
+                        extensions={[javascript()]}
+                        placeholder={"// 留空使用系统默认调用；点击右下角「插入模板」查看示例。"}
+                        style={{ height: "100%", fontSize: 13 }}
+                        className="h-full [&_.cm-editor]:h-full [&_.cm-gutters]:border-none [&_.cm-scroller]:overflow-auto"
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+}

web/src/components/layout/model-select-modal.tsx

@@ -0,0 +1,153 @@
+import { App, Button, Checkbox, Input, Modal, Tabs } from "antd";
+import { RefreshCw, Search } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { fetchChannelModels } from "@/services/api/image";
+import type { ModelChannel } from "@/stores/use-config-store";
+
+// 选择渠道模型弹窗：拉取上游模型列表或手动增加，勾选后才会进入渠道模型列表。
+export function ModelSelectModal({ open, channel, selectedNames, onConfirm, onClose }: { open: boolean; channel: ModelChannel | null; selectedNames: string[]; onConfirm: (names: string[]) => void; onClose: () => void }) {
+    const { message } = App.useApp();
+    const [existing, setExisting] = useState<string[]>([]);
+    const [fetched, setFetched] = useState<string[]>([]);
+    const [selected, setSelected] = useState<Set<string>>(new Set());
+    const [activeTab, setActiveTab] = useState("new");
+    const [search, setSearch] = useState("");
+    const [manual, setManual] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!open) return;
+        setExisting(selectedNames);
+        setFetched([]);
+        setSelected(new Set(selectedNames));
+        setActiveTab(selectedNames.length ? "existing" : "new");
+        setSearch("");
+        setManual("");
+    }, [open, selectedNames]);
+
+    const currentList = activeTab === "new" ? fetched : existing;
+    const visibleList = useMemo(() => {
+        const keyword = search.trim().toLowerCase();
+        return keyword ? currentList.filter((name) => name.toLowerCase().includes(keyword)) : currentList;
+    }, [currentList, search]);
+    const visibleSelectedCount = visibleList.filter((name) => selected.has(name)).length;
+
+    const toggle = (name: string, checked: boolean) =>
+        setSelected((current) => {
+            const next = new Set(current);
+            if (checked) next.add(name);
+            else next.delete(name);
+            return next;
+        });
+
+    const selectVisible = (checked: boolean) =>
+        setSelected((current) => {
+            const next = new Set(current);
+            visibleList.forEach((name) => (checked ? next.add(name) : next.delete(name)));
+            return next;
+        });
+
+    const addManual = () => {
+        const name = manual.trim();
+        if (!name) return;
+        if (!fetched.includes(name) && !existing.includes(name)) setFetched((current) => [name, ...current]);
+        setSelected((current) => new Set(current).add(name));
+        setManual("");
+        setActiveTab("new");
+    };
+
+    const fetchModels = async () => {
+        if (!channel) return;
+        if (!channel.baseUrl.trim() || !channel.apiKey.trim()) {
+            message.error("请先填写接口地址和 API Key");
+            return;
+        }
+        setLoading(true);
+        try {
+            const models = await fetchChannelModels(channel);
+            setFetched(models);
+            setActiveTab("new");
+            message.success(`已拉取 ${models.length} 个模型`);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "拉取模型失败");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const confirm = () => {
+        const ordered = [...existing, ...fetched].filter((name, index, list) => list.indexOf(name) === index).filter((name) => selected.has(name));
+        onConfirm(ordered);
+        onClose();
+    };
+
+    return (
+        <Modal
+            open={open}
+            width={880}
+            centered
+            onCancel={onClose}
+            title={
+                <span>
+                    选择渠道模型 <span className="ml-2 text-xs font-normal text-stone-500">已选择 {selected.size} / {new Set([...existing, ...fetched]).size}</span>
+                </span>
+            }
+            styles={{ body: { maxHeight: "62vh", overflowY: "auto" } }}
+            footer={[
+                <Button key="cancel" onClick={onClose}>
+                    取消
+                </Button>,
+                <Button key="confirm" type="primary" onClick={confirm}>
+                    确定
+                </Button>,
+            ]}
+        >
+            <div className="flex flex-wrap items-center gap-3">
+                <Input className="min-w-[200px] flex-1" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="搜索模型" prefix={<Search className="size-4 text-stone-400" />} allowClear />
+                <Input className="min-w-[180px] flex-1" value={manual} onChange={(event) => setManual(event.target.value)} onPressEnter={addManual} placeholder="输入模型名称" />
+                <Button onClick={addManual}>增加模型</Button>
+                <Button icon={<RefreshCw className="size-4" />} loading={loading} onClick={() => void fetchModels()}>
+                    拉取模型列表
+                </Button>
+            </div>
+            <div className="mt-2 text-xs text-stone-500">如果上游不提供 OpenAI /models 模型列表接口，请在这里手动增加模型名称。</div>
+
+            <Tabs
+                className="mt-3"
+                activeKey={activeTab}
+                onChange={setActiveTab}
+                items={[
+                    { key: "new", label: `新获取的模型 (${fetched.length})` },
+                    { key: "existing", label: `已有的模型 (${existing.length})` },
+                ]}
+            />
+
+            <div className="mb-3 flex items-center justify-between gap-2">
+                <span className="text-xs text-stone-500">当前列表已选择 {visibleSelectedCount} / {visibleList.length}</span>
+                <div className="flex gap-2">
+                    <Button size="small" disabled={!visibleList.length} onClick={() => selectVisible(true)}>
+                        全选当前列表
+                    </Button>
+                    <Button size="small" disabled={!visibleSelectedCount} onClick={() => selectVisible(false)}>
+                        取消当前列表
+                    </Button>
+                </div>
+            </div>
+
+            {visibleList.length ? (
+                <div className="grid grid-cols-1 gap-x-8 gap-y-3 md:grid-cols-2">
+                    {visibleList.map((name) => (
+                        <Checkbox key={name} checked={selected.has(name)} onChange={(event) => toggle(name, event.target.checked)}>
+                            <span className="truncate" title={name}>
+                                {name}
+                            </span>
+                        </Checkbox>
+                    ))}
+                </div>
+            ) : (
+                <div className="py-8 text-center text-sm text-stone-500">{activeTab === "new" ? "点击「拉取模型列表」获取上游模型，或手动增加模型名称。" : "暂无已选择的模型。"}</div>
+            )}
+        </Modal>
+    );
+}

web/src/components/layout/user-status-actions.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import { BookOpen, Keyboard, Settings2 } from "lucide-react";
+import { BookOpen, Keyboard, Puzzle, Settings2 } from "lucide-react";
 
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { GitHubLink } from "@/components/layout/github-link";
@@ -14,9 +14,10 @@ type UserStatusActionsProps = {
     showConfig?: boolean;
     variant?: "default" | "canvas";
     onOpenShortcuts?: () => void;
+    onOpenPlugins?: () => void;
 };
 
-export function UserStatusActions({ showConfig = true, variant = "default", onOpenShortcuts }: UserStatusActionsProps) {
+export function UserStatusActions({ showConfig = true, variant = "default", onOpenShortcuts, onOpenPlugins }: UserStatusActionsProps) {
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -29,6 +30,11 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
 
     return (
         <div className="inline-flex shrink-0 items-center gap-1">
+            {onOpenPlugins ? (
+                <button type="button" className={naturalIconClass} style={iconStyle} onClick={onOpenPlugins} aria-label="节点插件" title="节点插件">
+                    <Puzzle className="size-4" />
+                </button>
+            ) : null}
             <a href={DOCS_URL} target="_blank" rel="noopener noreferrer" className={naturalIconClass} style={iconStyle} aria-label="文档" title="文档">
                 <BookOpen className="size-4" />
             </a>

web/src/components/model-picker.tsx

@@ -83,7 +83,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
 
 function emptyModelLabel(config: AiConfig, capability?: ModelCapability) {
     const label = capability === "image" ? "生图" : capability === "video" ? "视频" : capability === "text" ? "文本" : capability === "audio" ? "音频" : "";
-    if (capability && config.models.length) return "请先在上方配置可选模型";
+    if (capability && config.models.length) return `请先在渠道里为${label}指定模型`;
     return config.models.length ? `暂无匹配的${label}模型` : "请先到配置里添加渠道和模型";
 }
 

web/src/constant/canvas.ts

@@ -1,5 +1,6 @@
 import { CanvasNodeType } from "@/types/canvas";
 import type { CanvasNodeMetadata } from "@/types/canvas";
+import { getNodeSpec as getRegistryNodeSpec } from "@/lib/canvas/node-registry";
 
 type CanvasNodeSpec = {
     width: number;
@@ -44,6 +45,9 @@ export const NODE_SPECS = {
     },
 } satisfies Record<CanvasNodeType, CanvasNodeSpec>;
 
-export function getNodeSpec(type: CanvasNodeType) {
-    return NODE_SPECS[type];
+// 内置类型返回内置 spec;插件类型从注册表解析
+export function getNodeSpec(type: string) {
+    if ((Object.values(CanvasNodeType) as string[]).includes(type)) return NODE_SPECS[type as CanvasNodeType];
+    const spec = getRegistryNodeSpec(type);
+    return { width: spec.width, height: spec.height, title: spec.title, metadata: spec.metadata };
 }

web/src/constant/env.ts

@@ -1,3 +1,6 @@
 export const APP_VERSION = __APP_VERSION__ || "dev";
 
 export const DOCS_URL = import.meta.env.VITE_DOC_URL || "https://docs.canvas.best";
+
+// 官方插件清单地址:CI 发布到 plugins-dist 分支,经 jsDelivr 远程拉取;可用环境变量覆盖成自建来源
+export const PLUGIN_REGISTRY_URL = import.meta.env.VITE_PLUGIN_REGISTRY_URL || "https://cdn.jsdelivr.net/gh/basketikun/infinite-canvas@plugins-dist/official-plugins.json";

web/src/constant/navigation-tools.ts

@@ -23,7 +23,7 @@ export const navigationTools = [
     },
     {
         slug: "assets",
-        label: "我的素材",
+        label: "我的资产",
         icon: Images,
     },
     {

web/src/lib/agent/agent-site-tools.ts

@@ -6,10 +6,10 @@ import { imageAspectOptions, imageQualityOptions } from "@/components/image-sett
 import { videoResolutionOptions, videoSecondOptions, videoSizeOptions } from "@/components/video-settings-panel";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
 import { useAssetStore } from "@/stores/use-asset-store";
-import { modelOptionLabel, modelOptionName, normalizeModelOptionValue, useConfigStore } from "@/stores/use-config-store";
+import { modelOptionLabel, modelOptionName, normalizeModelOptionValue, selectableModelsByCapability, useConfigStore } from "@/stores/use-config-store";
 import { useWorkbenchAgentStore } from "@/stores/use-workbench-agent-store";
 
-// 在网页端执行 Agent 的「站点级」工具（画布列表、工作台生成、提示词搜索、素材增删查等）。
+// 在网页端执行 Agent 的「站点级」工具（画布列表、工作台生成、提示词搜索、资产增删查等）。
 // 这些工具的数据都在浏览器本地（localforage / zustand），因此由本模块直接读写对应 store 后返回结果。
 
 export const SITE_TOOL_NAMES = [
@@ -36,8 +36,8 @@ export const SITE_TOOL_LABELS: Record<SiteToolName, string> = {
     workbench_video_get_config: "视频配置",
     workbench_video_generate: "视频创作台生成",
     prompts_search: "搜索提示词",
-    assets_list: "素材列表",
-    assets_add: "添加素材",
+    assets_list: "资产列表",
+    assets_add: "添加资产",
 };
 
 type SiteToolInput = Record<string, unknown>;
@@ -87,7 +87,7 @@ function getImageConfig() {
     const model = config.imageModel || config.model;
     return {
         current: { model, modelName: modelOptionName(model), quality: config.quality || "auto", size: config.size || "1:1", count: config.count || "1" },
-        models: config.imageModels.map((value) => ({ value, label: modelOptionLabel(config, value) })),
+        models: selectableModelsByCapability(config, "image").map((value) => ({ value, label: modelOptionLabel(config, value) })),
         qualityOptions: imageQualityOptions,
         sizeOptions: imageAspectOptions,
         countRange: { min: 1, max: 15 },
@@ -135,7 +135,7 @@ function getVideoConfig() {
             generateAudio: config.videoGenerateAudio !== "false",
             watermark: config.videoWatermark === "true",
         },
-        models: config.videoModels.map((value) => ({ value, label: modelOptionLabel(config, value) })),
+        models: selectableModelsByCapability(config, "video").map((value) => ({ value, label: modelOptionLabel(config, value) })),
         sizeOptions: videoSizeOptions,
         secondsOptions: videoSecondOptions,
         resolutionOptions: videoResolutionOptions,
@@ -194,7 +194,7 @@ async function searchPrompts(input: SiteToolInput) {
 
 function listAssets(input: SiteToolInput) {
     const { assets, hydrated } = useAssetStore.getState();
-    if (!hydrated) throw new Error("素材还在加载中，请稍后重试");
+    if (!hydrated) throw new Error("资产还在加载中，请稍后重试");
     const kind = input.kind === "text" || input.kind === "image" || input.kind === "video" ? input.kind : "all";
     const keyword = String(input.keyword || "").trim().toLowerCase();
     const filtered = assets.filter((asset) => {
@@ -221,7 +221,7 @@ function listAssets(input: SiteToolInput) {
 async function addAsset(input: SiteToolInput) {
     const kind = input.kind;
     const title = String(input.title || "").trim();
-    if (!title) throw new Error("请提供素材标题 title");
+    if (!title) throw new Error("请提供资产标题 title");
     const tags = Array.isArray(input.tags) ? input.tags.filter((tag): tag is string => typeof tag === "string") : [];
     const source = typeof input.source === "string" ? input.source : "Agent";
     const note = typeof input.note === "string" ? input.note : undefined;

web/src/lib/canvas/canvas-agent-ops.ts

@@ -1,12 +1,12 @@
 import { nanoid } from "nanoid";
 
-import { getNodeSpec } from "@/constant/canvas";
-import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type CanvasNodeMetadata, type ViewportTransform } from "@/types/canvas";
+import { getNodeSpec, isRegisteredNodeType } from "@/lib/canvas/node-registry";
+import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type CanvasNodeMetadata, type CanvasNodeTypeId, type ViewportTransform } from "@/types/canvas";
 
 export type CanvasAgentOp =
-    | { type: "add_node"; id?: string; nodeType?: CanvasNodeType; title?: string; position?: { x: number; y: number }; x?: number; y?: number; width?: number; height?: number; metadata?: CanvasNodeMetadata }
+    | { type: "add_node"; id?: string; nodeType?: CanvasNodeTypeId; title?: string; position?: { x: number; y: number }; x?: number; y?: number; width?: number; height?: number; metadata?: CanvasNodeMetadata }
     | { type: "update_node"; id: string; patch?: Partial<CanvasNodeData>; metadata?: CanvasNodeMetadata }
-    | { type: "delete_node"; id?: string; ids?: string[]; nodeType?: CanvasNodeType }
+    | { type: "delete_node"; id?: string; ids?: string[]; nodeType?: CanvasNodeTypeId }
     | { type: "delete_connections"; id?: string; ids?: string[]; all?: boolean }
     | { type: "connect_nodes"; id?: string; fromNodeId: string; toNodeId: string }
     | { type: "set_viewport"; viewport: ViewportTransform }
@@ -42,7 +42,7 @@ export function applyCanvasAgentOps(snapshot: CanvasAgentSnapshot, ops?: CanvasA
     (Array.isArray(ops) ? ops : []).forEach((op, index) => {
         if (!op?.type) return;
         if (op.type === "add_node") {
-            const nodeType = Object.values(CanvasNodeType).includes(op.nodeType as CanvasNodeType) ? op.nodeType! : CanvasNodeType.Text;
+            const nodeType = op.nodeType && isRegisteredNodeType(op.nodeType) ? op.nodeType : CanvasNodeType.Text;
             const spec = getNodeSpec(nodeType);
             const node: CanvasNodeData = {
                 id: op.id || `${nodeType}-${Date.now()}-${index}`,

web/src/lib/canvas/canvas-event-bus.ts

@@ -0,0 +1,47 @@
+import localforage from "localforage";
+
+import type { PluginStorage } from "@/types/canvas-plugin";
+
+// 画布内轻量事件总线,供节点/插件互相通信
+type Handler = (payload: unknown) => void;
+const handlers = new Map<string, Set<Handler>>();
+
+export function emitCanvasEvent(event: string, payload?: unknown) {
+    handlers.get(event)?.forEach((handler) => {
+        try {
+            handler(payload);
+        } catch (error) {
+            console.error(`[canvas-event] handler for "${event}" failed`, error);
+        }
+    });
+}
+
+export function onCanvasEvent(event: string, handler: Handler) {
+    let set = handlers.get(event);
+    if (!set) {
+        set = new Set();
+        handlers.set(event, set);
+    }
+    set.add(handler);
+    return () => set!.delete(handler);
+}
+
+// 插件私有存储,按 pluginId 命名空间隔离
+const stores = new Map<string, LocalForage>();
+
+export function createPluginStorage(pluginId: string): PluginStorage {
+    let store = stores.get(pluginId);
+    if (!store) {
+        store = localforage.createInstance({ name: "infinite-canvas-plugins", storeName: pluginId });
+        stores.set(pluginId, store);
+    }
+    return {
+        get: (key) => store!.getItem(key),
+        set: async (key, value) => {
+            await store!.setItem(key, value);
+        },
+        remove: async (key) => {
+            await store!.removeItem(key);
+        },
+    };
+}

web/src/lib/canvas/canvas-resource-references.ts

@@ -1,5 +1,6 @@
 import { imageReferenceLabel } from "@/lib/image-reference-prompt";
 import { seedanceReferenceLabel } from "@/lib/seedance-video";
+import { getNodeDefinition } from "@/lib/canvas/node-registry";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
 
 export type CanvasResourceKind = "image" | "video" | "audio" | "text";
@@ -71,7 +72,7 @@ function labelResourceNodes(nodes: CanvasNodeData[], active: boolean) {
                 label,
                 title: node.title || label,
                 previewUrl: node.metadata?.content,
-                text: node.type === CanvasNodeType.Text ? node.metadata?.content || node.metadata?.prompt : undefined,
+                text: resourceText(node),
                 active,
             },
         ];
@@ -89,10 +90,17 @@ function isResourceNode(node: CanvasNodeData) {
     return Boolean(resourceKind(node));
 }
 
+function resourceText(node: CanvasNodeData): string | undefined {
+    if (node.type === CanvasNodeType.Text) return node.metadata?.content || node.metadata?.prompt;
+    const resource = getNodeDefinition(node.type)?.resource?.(node);
+    return resource?.kind === "text" ? resource.text : undefined;
+}
+
 function resourceKind(node: CanvasNodeData): CanvasResourceKind | null {
     if (node.type === CanvasNodeType.Image && node.metadata?.content) return "image";
     if (node.type === CanvasNodeType.Video && node.metadata?.content) return "video";
     if (node.type === CanvasNodeType.Audio && node.metadata?.content) return "audio";
     if (node.type === CanvasNodeType.Text && (node.metadata?.content || node.metadata?.prompt)) return "text";
-    return null;
+    // 插件节点通过 definition.resource 声明可作为输入
+    return getNodeDefinition(node.type)?.resource?.(node)?.kind || null;
 }

web/src/lib/canvas/node-registry.ts

@@ -0,0 +1,59 @@
+import { create } from "zustand";
+
+import type { CanvasNodeDefinition } from "@/types/canvas-plugin";
+import { CanvasNodeType } from "@/types/canvas";
+
+const definitions = new Map<string, CanvasNodeDefinition>();
+const ownerByType = new Map<string, string>(); // type -> pluginId(内置为 "builtin")
+
+// 注册表版本号,注册/卸载时自增,驱动创建菜单等 UI 重渲染
+export const useNodeRegistryVersion = create<{ version: number }>(() => ({ version: 0 }));
+function bump() {
+    useNodeRegistryVersion.setState((state) => ({ version: state.version + 1 }));
+}
+
+export function registerNodeDefinitions(defs: CanvasNodeDefinition[], pluginId = "builtin") {
+    defs.forEach((def) => {
+        definitions.set(def.type, def);
+        ownerByType.set(def.type, pluginId);
+    });
+    bump();
+}
+
+export function unregisterPluginNodes(pluginId: string) {
+    for (const [type, owner] of ownerByType) {
+        if (owner !== pluginId) continue;
+        definitions.delete(type);
+        ownerByType.delete(type);
+    }
+    bump();
+}
+
+export function getNodeDefinition(type: string) {
+    return definitions.get(type);
+}
+
+export function getNodePluginId(type: string) {
+    return ownerByType.get(type) || "builtin";
+}
+
+export function listNodeDefinitions() {
+    return Array.from(definitions.values());
+}
+
+export function isRegisteredNodeType(type: string) {
+    return definitions.has(type);
+}
+
+const FALLBACK_SPEC = { width: 340, height: 240, title: "节点", metadata: {} as CanvasNodeDefinition["defaultMetadata"] };
+
+// 提供默认尺寸/标题/初始 metadata,createCanvasNode 与 agent-ops 复用
+export function getNodeSpec(type: string) {
+    const def = definitions.get(type);
+    if (!def) return FALLBACK_SPEC;
+    return { width: def.defaultSize.width, height: def.defaultSize.height, title: def.title, metadata: def.defaultMetadata };
+}
+
+export function isBuiltinNodeType(type: string) {
+    return (Object.values(CanvasNodeType) as string[]).includes(type);
+}

web/src/lib/canvas/plugin-loader.ts

@@ -0,0 +1,172 @@
+import { registerNodeDefinitions, unregisterPluginNodes } from "@/lib/canvas/node-registry";
+import { getPluginRuntime } from "@/lib/canvas/plugin-runtime";
+import { usePluginStore, type InstalledPlugin } from "@/stores/canvas/use-plugin-store";
+import type { CanvasPlugin } from "@/types/canvas-plugin";
+
+const cleanups = new Map<string, () => void>();
+
+// 远程插件默认导出可以是 CanvasPlugin,或接收 runtime 返回 CanvasPlugin 的工厂
+// (工厂形式用 runtime.React,无需 bundle 自带 React)
+async function evaluatePluginSource(source: string): Promise<CanvasPlugin> {
+    const blob = new Blob([source], { type: "text/javascript" });
+    const url = URL.createObjectURL(blob);
+    try {
+        const mod = (await import(/* @vite-ignore */ url)) as { default?: unknown; plugin?: unknown };
+        const exported = mod.default ?? mod.plugin;
+        const plugin = typeof exported === "function" ? (exported as (runtime: unknown) => unknown)(getPluginRuntime()) : exported;
+        assertPlugin(plugin);
+        return plugin;
+    } finally {
+        URL.revokeObjectURL(url);
+    }
+}
+
+function assertPlugin(plugin: unknown): asserts plugin is CanvasPlugin {
+    const value = plugin as Partial<CanvasPlugin> | null;
+    if (!value || typeof value !== "object") throw new Error("插件未导出有效对象");
+    if (!value.id || !Array.isArray(value.nodes) || !value.nodes.length) throw new Error("插件缺少 id 或 nodes");
+}
+
+export function activatePlugin(plugin: CanvasPlugin) {
+    registerNodeDefinitions(plugin.nodes, plugin.id);
+    const runtime = getPluginRuntime();
+    const disposers: Array<() => void> = [];
+    // 插件声明的样式:启用时注入,禁用/卸载时清理
+    if (plugin.css) disposers.push(runtime.injectCSS(plugin.css, plugin.id));
+    const cleanup = plugin.setup?.(runtime);
+    if (typeof cleanup === "function") disposers.push(cleanup);
+    if (disposers.length) cleanups.set(plugin.id, () => disposers.forEach((dispose) => dispose()));
+}
+
+export function deactivatePlugin(pluginId: string) {
+    cleanups.get(pluginId)?.();
+    cleanups.delete(pluginId);
+    unregisterPluginNodes(pluginId);
+}
+
+async function fetchPluginSource(url: string) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`下载失败 (HTTP ${response.status})`);
+    return response.text();
+}
+
+// 加缓存穿透参数,配合 watch 构建拿到最新产物
+function withCacheBust(url: string) {
+    return `${url}${url.includes("?") ? "&" : "?"}t=${Date.now()}`;
+}
+
+// 从 URL 安装(或覆盖更新)一个插件,成功后立即启用。
+// bustCache=true 时下载绕过 HTTP/CDN 缓存(升级场景必需,避免拿到旧产物),
+// 但落库的 url 始终保持干净(不带 ?t=),便于后续再次更新。
+export async function installPluginFromUrl(url: string, opts?: { official?: boolean; bustCache?: boolean }) {
+    const source = await fetchPluginSource(opts?.bustCache ? withCacheBust(url) : url);
+    const plugin = await evaluatePluginSource(source);
+    deactivatePlugin(plugin.id); // 覆盖旧版本
+    usePluginStore.getState().upsert({ id: plugin.id, name: plugin.name || plugin.id, version: plugin.version || "0.0.0", description: plugin.description, url, source, enabled: true, official: opts?.official });
+    activatePlugin(plugin);
+    return plugin;
+}
+
+export async function updatePlugin(record: InstalledPlugin) {
+    // 升级必须拿到最新产物,强制绕过缓存
+    return installPluginFromUrl(record.url, { official: record.official, bustCache: true });
+}
+
+export async function setPluginEnabled(record: InstalledPlugin, enabled: boolean) {
+    usePluginStore.getState().setEnabled(record.id, enabled);
+    if (!enabled) {
+        deactivatePlugin(record.id);
+        return;
+    }
+    // 本地插件启用时按 url 重新拉取,拿到最新构建(缓存 source 可能已过期)
+    const source = record.local ? await fetchPluginSource(withCacheBust(record.url)) : record.source;
+    const plugin = await evaluatePluginSource(source);
+    activatePlugin(plugin);
+}
+
+export function uninstallPlugin(id: string) {
+    deactivatePlugin(id);
+    usePluginStore.getState().remove(id);
+}
+
+let loaded = false;
+
+// 应用启动时加载已安装且启用的插件
+export async function ensurePluginsLoaded() {
+    if (loaded) return;
+    loaded = true;
+    await usePluginStore.persist.rehydrate();
+    await loadLocalPlugins(); // 先发现本地插件(默认关闭),再统一按 enabled 激活
+    const records = usePluginStore.getState().plugins.filter((record) => record.enabled);
+    await Promise.all(
+        records.map(async (record) => {
+            try {
+                // 本地插件用最新产物,其余用缓存的源码
+                const source = record.local ? await fetchPluginSource(withCacheBust(record.url)) : record.source;
+                activatePlugin(await evaluatePluginSource(source));
+            } catch (error) {
+                console.error(`[plugin] 加载失败: ${record.id}`, error);
+            }
+        }),
+    );
+    await loadDevPlugins();
+}
+
+// 自动发现 web/public/plugins 下的本地插件:加入列表但默认关闭,
+// 本地开发放好插件文件即可在管理器里看到并一键启用,无需手动填 URL。
+// 已在列表中的:刷新元数据(version/name/description/source)到最新产物,
+// 但保留用户的 enabled 开关 —— 否则改了插件版本后,持久化 store 里的旧 version 永不更新。
+async function loadLocalPlugins() {
+    let urls: unknown;
+    try {
+        const response = await fetch("/plugins/index.json");
+        if (!response.ok) return;
+        urls = await response.json();
+    } catch {
+        return; // 无本地清单(如生产环境未构建插件)则跳过
+    }
+    if (!Array.isArray(urls) || !urls.length) return;
+    const store = usePluginStore.getState();
+    await Promise.all(
+        urls.map(async (url: string) => {
+            try {
+                const source = await fetchPluginSource(withCacheBust(url));
+                const plugin = await evaluatePluginSource(source);
+                const existing = store.plugins.find((item) => item.id === plugin.id);
+                store.upsert({
+                    id: plugin.id,
+                    name: plugin.name || plugin.id,
+                    version: plugin.version || "0.0.0",
+                    description: plugin.description,
+                    url,
+                    source,
+                    enabled: existing?.enabled ?? false, // 保留用户开关,新发现默认关闭
+                    local: true,
+                });
+            } catch (error) {
+                console.error(`[plugin] 本地插件发现失败: ${url}`, error);
+            }
+        }),
+    );
+}
+
+// 本地开发:VITE_DEV_PLUGINS 里的 URL 每次启动都重新拉取(不缓存、不落库),
+// 配合 watch 构建即可「改代码→刷新页面」看到最新插件,无需反复安装。
+async function loadDevPlugins() {
+    const raw = import.meta.env.VITE_DEV_PLUGINS;
+    if (!raw) return;
+    const urls = raw.split(",").map((item) => item.trim()).filter(Boolean);
+    await Promise.all(
+        urls.map(async (url) => {
+            try {
+                const source = await fetchPluginSource(withCacheBust(url));
+                const plugin = await evaluatePluginSource(source);
+                deactivatePlugin(plugin.id);
+                activatePlugin(plugin);
+                console.info(`[plugin] dev 插件已加载: ${plugin.id} (${url})`);
+            } catch (error) {
+                console.error(`[plugin] dev 插件加载失败: ${url}`, error);
+            }
+        }),
+    );
+}

web/src/lib/canvas/plugin-node-context.ts

@@ -0,0 +1,30 @@
+import { createPluginStorage, emitCanvasEvent, onCanvasEvent } from "@/lib/canvas/canvas-event-bus";
+import { getNodePluginId } from "@/lib/canvas/node-registry";
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import type { CanvasNodeData } from "@/types/canvas";
+import type { CanvasNodeContext, CanvasPluginHost } from "@/types/canvas-plugin";
+
+// 把宿主能力 + 节点 + 主题/缩放,组装成注入给插件节点的上下文
+export function buildNodeContext(host: CanvasPluginHost, node: CanvasNodeData, theme: CanvasTheme, scale: number, isSelected = false): CanvasNodeContext {
+    const storage = createPluginStorage(getNodePluginId(node.type));
+    return {
+        node,
+        theme,
+        scale,
+        isSelected,
+        updateMetadata: (patch) => host.updateMetadata(node.id, patch),
+        updateNode: (patch) => host.updateNode(node.id, patch),
+        getNode: (id) => host.getNode(id),
+        getNodes: () => host.getNodes(),
+        getConnections: () => host.getConnections(),
+        getUpstream: () => host.getUpstream(node.id),
+        getDownstream: () => host.getDownstream(node.id),
+        applyOps: (ops) => host.applyOps(ops),
+        emit: (event, payload) => emitCanvasEvent(event, payload),
+        on: (event, handler) => onCanvasEvent(event, handler),
+        ai: host.ai,
+        openPanel: () => host.openPanel(node.id),
+        closePanel: () => host.closePanel(),
+        storage,
+    };
+}

web/src/lib/canvas/plugin-registry.ts

@@ -0,0 +1,49 @@
+import { PLUGIN_REGISTRY_URL } from "@/constant/env";
+
+// 官方插件清单里的一条(entry 已解析成绝对 URL)
+export type OfficialPluginEntry = {
+    id: string;
+    name: string;
+    version: string;
+    description?: string;
+    icon?: string;
+    url: string;
+};
+
+type RawEntry = { id?: string; name?: string; version?: string; description?: string; icon?: string; entry?: string; url?: string };
+type RawManifest = { plugins?: RawEntry[] };
+
+// 拉取官方插件清单;entry(相对文件名)按清单地址解析成绝对 URL,再走既有 URL 安装流程
+export async function fetchOfficialPlugins(registryUrl: string = PLUGIN_REGISTRY_URL): Promise<OfficialPluginEntry[]> {
+    const response = await fetch(registryUrl, { headers: { accept: "application/json" } });
+    if (!response.ok) throw new Error(`获取官方插件列表失败 (HTTP ${response.status})`);
+    const data = (await response.json()) as RawManifest;
+    const list = Array.isArray(data?.plugins) ? data.plugins : [];
+    return list
+        .filter((item): item is RawEntry & { id: string } => Boolean(item && item.id && (item.entry || item.url)))
+        .map((item) => ({
+            id: item.id,
+            name: item.name || item.id,
+            version: item.version || "0.0.0",
+            description: item.description,
+            icon: item.icon,
+            url: item.url ? item.url : new URL(item.entry as string, registryUrl).toString(),
+        }));
+}
+
+// 语义化版本比较:返回 >0 表示 a 更高,<0 表示 b 更高,0 表示相等。
+// 只按 major.minor.patch 数值比较,忽略非数字段(预发布标签等)。
+function compareSemver(a: string, b: string): number {
+    const parse = (v: string) => v.split(".").map((part) => parseInt(part, 10) || 0);
+    const [pa, pb] = [parse(a), parse(b)];
+    for (let i = 0; i < 3; i++) {
+        const diff = (pa[i] || 0) - (pb[i] || 0);
+        if (diff !== 0) return diff;
+    }
+    return 0;
+}
+
+// 远程版本是否比本地已安装版本更高(即有可升级的更新)
+export function hasUpgrade(installedVersion: string, remoteVersion: string): boolean {
+    return compareSemver(remoteVersion, installedVersion) > 0;
+}

web/src/lib/canvas/plugin-runtime.ts

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { emitCanvasEvent, onCanvasEvent } from "@/lib/canvas/canvas-event-bus";
+import type { CanvasPluginApp } from "@/types/canvas-plugin";
+
+// 插件运行时:远程插件通过它拿到宿主的 React 实例,避免多份 React 实例
+export type PluginRuntime = CanvasPluginApp & {
+    React: typeof React;
+    jsx: typeof React.createElement;
+    Fragment: typeof React.Fragment;
+    injectCSS: (css: string, key?: string) => () => void;
+};
+
+let runtime: PluginRuntime | null = null;
+
+// 注入插件样式:同 key 覆盖旧样式,返回移除函数
+function injectCSS(css: string, key?: string) {
+    const id = key ? `canvas-plugin-style-${key}` : undefined;
+    if (id) document.getElementById(id)?.remove();
+    const style = document.createElement("style");
+    if (id) style.id = id;
+    style.dataset.canvasPluginStyle = "true";
+    style.textContent = css;
+    document.head.appendChild(style);
+    return () => style.remove();
+}
+
+export function getPluginRuntime(): PluginRuntime {
+    if (!runtime) {
+        runtime = {
+            React,
+            jsx: React.createElement,
+            Fragment: React.Fragment,
+            injectCSS,
+            version: typeof __APP_VERSION__ === "string" ? __APP_VERSION__ : "dev",
+            emit: emitCanvasEvent,
+            on: onCanvasEvent,
+        };
+        (window as unknown as { InfiniteCanvasRuntime?: PluginRuntime }).InfiniteCanvasRuntime = runtime;
+    }
+    return runtime;
+}

web/src/lib/seedance-video.ts

@@ -141,7 +141,7 @@ export function buildSeedancePromptText(prompt: string, images: ReferenceImage[]
     ];
     const text = prompt.trim();
     if (!labels.length) return text;
-    return `参考素材编号：${labels.join("、")}。请按这些编号理解提示词中的图片、视频和音频引用。\n\n${text}`;
+    return `参考资产编号：${labels.join("、")}。请按这些编号理解提示词中的图片、视频和音频引用。\n\n${text}`;
 }
 
 export function seedanceVideoReferenceError(videos: ReferenceVideo[]) {
@@ -166,4 +166,4 @@ export function seedanceVideoReferenceError(videos: ReferenceVideo[]) {
     return "";
 }
 
-export const seedanceVideoReferenceHint = "参考视频需为 mp4/mov，H.264/H.265，FPS 24-60；含真人人脸素材请使用火山授权 asset:// 素材。";
+export const seedanceVideoReferenceHint = "参考视频需为 mp4/mov，H.264/H.265，FPS 24-60；含真人人脸资产请使用火山授权 asset:// 资产。";