feat(canvas-node-manual): enhance input box to support resource references with thumbnail display

2026-07-24 06:54:06 +08:00 · 2026-07-17 11:19:34 +08:00
parent 5a27aae99e
commit a2586ffe34
10 changed files with 48 additions and 38 deletions
@@ -24,6 +24,7 @@ description: 当前画布节点的主要用途与操作流程
 - 当文本节点为空时，输入框用于填写想生成的文本内容；点击发送后，结果会回填到当前文本节点。
 - 当文本节点已有内容时，输入框用于填写想把本段文本修改成什么；点击发送后，会在右侧生成新的文本节点，并自动连接原节点和新节点。
 - 输入内容可以手写，也可以从提示词库选择。
+- 输入框支持 `@` 引用已连接的图片、文本、视频、音频资源；`@` 引用图片时会在输入框内直接显示真实缩略图，发送时按当前连接自动编号交给模型。因此不需要再记忆「图片1 / 文本1」编号，画布节点右上角也不再显示资源角标。
 - 对话框里的模型下拉来自全局配置里已拉取的模型列表；选择结果只作用于当前节点，不会修改其它节点或全局默认模型。
 - 如果下拉中没有模型，需要先打开配置弹窗拉取模型列表，并设置默认生图模型和默认文本模型。火山方舟 Agent Plan 若提示不支持 `/models`，请手动填写模型名。

@@ -4,6 +4,7 @@
  "defaultOpen": true,
  "pages": [
    "local-development",
-    "canvas-data-structure"
+    "canvas-data-structure",
+    "local-codex-canvas"
  ]
 }
@@ -85,9 +85,12 @@ Base URL 如果已经以 `/v1`、`/api/v3` 或 `/api/plan/v3` 结尾，系统不
 - 生成数量。
 - 视频模型。
 - 视频比例、清晰度、时长、生成声音和水印。
+- 自定义生图 / 视频接口的调用方式，灵活适配不同中转站与自建服务。

 普通图片/文本节点可以直接输入提示词生成结果。生成配置节点可以读取上游节点内容，并按节点自己的配置批量生成多个图片或文本结果。生成配置节点支持预览当前提示词和参考图输入，并调整输入顺序。

+节点下方对话框和组装提示词输入框都支持 `@` 引用已连接的图片、文本、视频、音频等资源；`@` 引用图片时，输入框内会直接显示该图片的真实缩略图，而不再是「图片1」这类文字编号，发送时会按当前连接自动编号交给模型理解。由于引用改在对话框内直接 `@`，画布节点右上角不再显示「图片1 / 文本1」资源角标。
+
 视频生成可从文本节点读取 prompt，从图片节点读取参考图，从视频节点读取参考视频，从音频节点读取参考音频。Seedance 2.0 支持最多 9 张参考图、3 个参考视频、3 个参考音频；分辨率支持 `480p`、`720p`、`1080p`（fast 模型不支持 `1080p`），比例支持 `16:9`、`4:3`、`1:1`、`3:4`、`9:16`、`21:9`、`adaptive`，时长支持 4-15 秒或智能时长。生成成功后会把视频插入画布为视频节点并使用原生播放器预览。参考视频和参考音频优先使用公网可访问 URL；本地素材会以前端可读取的数据传给兼容接口，是否支持取决于具体上游。

 ## 画布助手
@@ -106,6 +109,18 @@ Base URL 如果已经以 `/v1`、`/api/v3` 或 `/api/plan/v3` 结尾，系统不
 - 把助手生成的图片插入画布。
 - 折叠和展开助手面板。

+## 节点插件系统
+
+画布支持通过节点插件扩展新的节点类型，内置节点之外的能力都可以以插件形式加载：
+
+- 支持通过 URL 动态安装、启用、更新和卸载远程节点插件。
+- 提供官方插件注册表，节点插件面板可从项目仓库读取官方插件列表并一键安装。
+- 提供 TypeScript 插件开发 SDK，可自行开发画布节点插件，并使用 AI 生成、面板控制等扩展能力。
+- 内置 Markdown、SVG、HTML、3D 全景、便利贴等示例插件。
+- 插件面板会显示插件版本，并对可升级的插件给出提醒。
+
+Codex App 插件的安装与使用见 [Codex App 插件](/docs/overview/codex-app-plugin)。
+
 ## 提示词库

 前台提示词库支持：
@@ -9,7 +9,6 @@
    "render",
    "docker",
    "third-party-prompt-repositories",
-    "[在线体验](https://canvas.best/)",
-    "local-codex-canvas"
+    "[在线体验](https://canvas.best/)"
  ]
 }
@@ -7,7 +7,7 @@ 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` 后验证创建、渲染、编辑及与上游节点的交互。
+- 画布节点插件系统:示例插件 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)每次刷新重新拉取、无需反复安装;需验证改源码刷新页面即生效。
@@ -4,7 +4,6 @@
  "defaultOpen": true,
  "pages": [
    "security",
-    "donate",
    "sponsor"
  ]
 }
@@ -1,19 +1,33 @@
 ---
-title: 广告赞助
-description: 广告赞助、项目露出和社区推广说明
+title: 赞助支持
+description: 赞助支持、广告合作、项目露出和社区推广说明
 ---

-# 广告赞助
+# 赞助支持
+
+如果本项目对你有帮助，欢迎通过 Star、广告赞助合作、提供 AI 订阅账号等方式支持项目继续维护。
+
+项目开发大量依赖 Codex、Claude 等 AI 编程工具辅助写代码、排查问题和整理文档，这些工具需要持续付费。相关支持会优先用于购买 AI 开发工具、模型服务和项目维护相关资源，帮助项目继续迭代。
+
+## 支持方式
+
+支持方式包括但不限于：
+
+- 给 GitHub 仓库点 Star，帮助项目被更多人看到。
+- 通过广告赞助合作支持项目维护成本。
+- Codex、Claude 等 AI 编程工具订阅账号支持，帮助维护者持续使用 AI 辅助开发。
+
+## 广告赞助

 如果你希望在项目文档、README 或相关页面获得赞助露出，可以直接通过邮箱联系项目维护者沟通位置、周期和展示形式。

-## 适合的赞助内容
+### 适合的赞助内容

 - AI 工具、模型服务、API 服务或开发者工具。
 - 与图片、视频、文本生成工作流相关的产品。
 - 适合开源项目用户和 AI 创作者使用的服务。

-## 建议提供的信息
+### 建议提供的信息

 - 品牌或产品名称。
 - 希望展示的位置和周期。
@@ -27,8 +27,7 @@
 ## 支持与安全

 - [漏洞提交](/docs/support/security)
- [打赏支持](/docs/support/donate)
- [广告赞助](/docs/support/sponsor)
+- [赞助支持](/docs/support/sponsor)

 ## 项目进度

@@ -43,4 +42,4 @@

 ## 原理说明

- [本地 Codex 连接画布原理](/docs/overview/local-codex-canvas)
+- [本地 Codex 连接画布原理](/docs/development/local-codex-canvas)
@@ -10,7 +10,7 @@ const tabs = [
  { title: '开发文档', href: '/docs/development/local-development', prefix: '/docs/development' },
  { title: '项目进度', href: '/docs/progress/changelog', prefix: '/docs/progress' },
  { title: '商务合作', href: '/docs/business/business', prefix: '/docs/business' },
-  { title: '赞助支持', href: '/docs/support/donate', prefix: '/docs/support' },
+  { title: '赞助支持', href: '/docs/support/sponsor', prefix: '/docs/support' },
 ];

 export function DocsTopTabs() {