企业官网建设流程全解析

• 人工智能
• AI 应用
• AI Agent
• RAG
• AI 写作
• 后端
• 桌面应用

Toonflow 是一款 AI 短剧漫剧创作工具，可将小说自动转化为剧本，并结合 AI 生成图片与视频完成短剧全流程制作。本文以 updateBox.md 这份更新说明为骨架，逐一拆解其中「新增、优化、修复」三大类改进的技术内涵，并结合仓库中对应源码（更新对话框、桌面更新流程、国际化与画布节点实现）说明这些能力的真实工作机制。读完你将掌握 Toonflow 各模块的最新能力边界、对应的代码位置，以及桌面端更新失败时的排查与恢复路径。

更新说明的来源与展示方式

updateBox.md是 Toonflow 内置的版本更新说明文档，位于 apps/web/src/components/updateBox.md，由 updateBox.vue 这个更新对话框组件直接消费：

import updateNotes from "./updateBox.md?raw"; const { version, buildCode, markdown = updateNotes } = defineProps<{ version: string; buildCode: string; markdown?: string }>();

要点在于?raw导入方式：该 Markdown 文本在构建期被内联为字符串，随 Web 前端一起打包，无需运行时请求。对话框通过messageMarkdown异步组件（messageMarkdown.vue）渲染，支持标题、列表、代码块等标准 Markdown 语法。

对话框顶部展示版本号与构建代码，其中构建代码同时用作装饰图案的随机种子，用于生成稳定的 12 格色块图（Fowler–Noll–Vo 哈希后按调色板取色，代码注释明确说明仅作装饰、不作完整性校验）。

新增能力逐项拆解

21 种语言界面：国际化体系

更新说明的第一条是「新增多语言界面，支持简繁中文、英语、日语、韩语等 21 种语言，可在首次引导或设置中选择，并支持跟随系统」。

• 语言资源：packages/i18n/src/locales 下存在zhCn.json、zhTw.json、en.json、ja.json、ko.json、ru.json、ar.json、fa.json等 21 份语言包，与更新说明的「21 种语言」一一对应；
• 组件库本地化：UI 层同时接入 Element Plus 与 TDesign 两套组件库的语言包，App.vue 中通过elementLocales[locale.value]与tdesignLocales[locale.value]动态切换，TDesign 缺少的语言以英语为基底、由应用字典补齐；
• 从右向左适配：ar（阿拉伯语）、fa（波斯语）等语言需要 RTL 布局。为不影响画布使用，App.vue 对.vue-flow、pre、code、URL 输入框等保持强制从左到右，并设置unicode-bidi: isolate，即「界面阅读方向随语言反转，但画布坐标、代码与技术值保持 LTR」；
• 项目介绍文档：docs/readme目录下已提供 21 份语言版本的项目说明（readmeEn.md、readmeZhTw.md、readmeJa.md、readmeAr.md等），统一了文档入口与导航。

长文本附件：文本转附件与还原编辑

「首页和 Agent 支持将粘贴的长文本转为附件，可预览正文并还原到输入框继续编辑」对应 Agent 侧的文本附件实现：

• components/agent/textAttachments.ts 负责把粘贴的大段文本封装为附件条目；
• components/agent/attachmentList.vue 与 attachmentPreview.vue 提供列表展示与正文预览；
• 还原到输入框继续编辑的能力让用户不必重新粘贴长文，降低了长文本输入的重复成本。

图像与视频生成节点的提示词编辑器

「图像和视频生成节点支持展开提示词编辑窗口，保留参考素材标签、光标及撤销记录」，这是对画布节点编辑体验的增强：

• 节点组件位于 packages/nodes/imageGenerationNode 与 packages/nodes/videoGenerationNode，两者均含components/generationSettings.vue作为生成设置面板；
• 保留参考素材标签、光标位置与撤销记录意味着提示词编辑不再打断画布的撤销历史栈，可在编辑后整体回退。

批量复制节点与完整分组

「支持批量复制节点和完整分组，保留内部连线、分组层级及相对布局，粘贴后可整体撤销」，对应画布剪贴板与历史机制：

• pages/workspace/panels/canvas/nodeClipboard.ts 实现节点的复制/粘贴；
• pages/workspace/panels/canvas/selectionNodes.ts 与 selectionConnections.ts 处理选中节点及其连线的整体复制；
• 分组层级与相对布局由 groupNode.vue 承载；「粘贴后可整体撤销」依赖 useCanvasHistory.ts 的历史栈，保证一次粘贴构成一个可回退单元。

Agent 的 FFmpeg 媒体处理工具

「Agent 新增 FFmpeg 媒体处理工具，支持查询媒体信息、转码、截帧、拼接和滤镜处理（需安装 FFmpeg）」，是 Agent 能力体系的重要扩展：

• 工具侧实现位于 packages/tools/ffmpeg/src/index.ts，为 Agent 提供媒体处理调用入口；
• 底层由 packages/ffmpeg 包提供运行能力，其中src/browser.ts、src/remote.ts、src/runtime.ts、src/catalog.ts分别对应浏览器内运行、远程执行、运行时管理与能力目录；
• 服务端提供 apps/server/src/routes/ffmpeg 一组路由，包含download.ts（下载 FFmpeg）、execute.ts（执行任务）、progress.ts（进度上报）、events.ts（事件推送）、status.ts（状态查询）、cancel.ts（取消任务），构成「下载→执行→进度→取消」的完整闭环；
• 该工具需要先安装 FFmpeg，UI 上由 components/settings/ffmpegRequired.vue 负责安装引导与缺失提示。

macOS 原生编辑菜单与更新后的版本核验

「macOS 新增原生编辑菜单，支持剪切、复制、粘贴、全选、撤销和重做」来自桌面原生层，相关脚本见 apps/desktop/scripts/localizeMac.ts。

「新增更新重启后的版本核验，更新未成功时提供完整安装包下载入口」则由前端与桌面端共同实现：

• 更新状态通过updateSnapshot统一描述，见 apps/server/src/types/desktop.ts，其中installFailure字段携带attemptId、目标版本/哈希、当前版本/哈希、失败消息与downloadUrl下载地址；
• 前端在 App.vue 中监听桌面更新快照：一旦检测到installFailure，就关闭更新说明框并弹出「更新未成功」对话框，展示当前运行版本与本次更新目标的版本、构建标识对比，并提供「前往下载页」按钮直达完整安装包；
• 为避免重复打扰，同一失败尝试在单个页面会话内只提醒一次（sessionStorage去重），退出客户端后新会话可再次提醒。

优化项背后的机制

语言切换即时生效与 RTL 适配

「语言切换即时生效并记住选择，完善界面文案、系统提示和日期时间的本地化，适配从右向左阅读」。语言选择持久化在设置存储中（settingsstore，见 stores/settings.ts 相关实现），切换后组件库 locale 计算属性即时更新；RTL 适配策略在上一节已说明。

节点连线高亮说明与文本附件随项目带入

「调整节点连线高亮设置的说明，使选项含义更明确」属于画布连线的设置文案优化。

「从首页创建项目时，文本附件会一并带入 Agent；只有附件也能开始对话，历史文本附件支持直接预览」意味着文本附件成为项目上下文的组成部分，即使没有主提示词，仅凭附件也能启动 Agent 对话，并且历史会话中的附件可直接预览查看。

文件占用处理与路径保护

「优化文件保存、素材预览与下载同时进行时的占用处理，减少短暂文件锁导致的操作失败」对应资源读写与锁竞争问题；「完善 Agent 和 MCP 的文件路径判断，加强对已打开画布和文档的保护」对应工作区文件系统与画布文档的路径校验逻辑，相关实现见 utils/workspace/files.ts 与 lib/workspaceFiles.ts 等服务端/前端两侧的文件访问封装。

FFmpeg 下载可靠性

「改善 FFmpeg 下载、解压取消及临时文件清理的可靠性」与 apps/server/src/routes/ffmpeg/download.ts、cancel.ts对应：下载过程支持取消，取消时同步清理解压中的临时文件，避免残留脏数据影响后续安装。

桌面更新跟踪与断网恢复

「优化 Windows 和 Intel 芯片 Mac 的更新重启及失败处理；离开设置页后仍会跟踪更新状态，支持短暂断网后恢复查询」的实现在 stores/desktopUpdate.ts：

• 更新观察不在设置页内完成，而是由全局 store 常驻跟踪（App.vue 中watch(desktopUpdateSnapshot, ...)持续监听，onBeforeUnmount时才停止）；
• 观察机制最多持续 3 分钟，期间即使短暂断网，也会在恢复后重新拉取/api/desktop/update状态，确认更新是否已交接成功；
• 读取接口带 3 次重试与 10 秒超时，检查接口超时 45 秒、应用更新接口 180 秒，适配不同阶段的耗时差异。

21 种语言项目文档

「补齐 21 种语言的项目介绍文档，统一文档入口与导航」对应 docs/readme 下的 21 份语言文档（阿拉伯语、孟加拉语、英语、波斯语、菲律宾语、印地语、印尼语、日语、韩语、马拉地语、马来语、旁遮普语、俄语、泰米尔语、泰卢固语、泰语、土耳其语、乌尔都语、越南语、繁体中文，加简体中文共 21 种），为各语言用户提供一致的入门路径。

修复项的技术要点

画布快捷键冲突与自定义复制快捷键

「修复桌面画布复制粘贴与文本编辑的快捷键冲突，并支持自定义节点复制快捷键」对应画布工具配置：lib/canvasShortcuts.ts 定义默认快捷键，components/settings/panels/general/canvasShortcuts.vue 提供自定义设置界面；画布侧通过 pages/workspace/panels/canvas/useCanvasTools.ts 将快捷键绑定到复制/粘贴动作上，避免与输入框内的文本编辑快捷键互相抢占。

Windows 文件名大小写重命名

「修复 Windows 下仅修改文件名大小写时重命名不生效的问题」：在 Windows/NTFS 文件系统上，仅改变大小写的重命名容易因同名判断被忽略，修复后资产与工作区文件的重命名接口能正确处理这类大小写变更。

临时文件清理误报保存失败

「修复部分文件已保存成功，却因临时文件清理失败而显示保存失败的问题」对应保存链路中「先写临时文件、再落盘、最后清理」的顺序问题：清理失败不应反向污染保存成功的判定，相关实现见 apps/server/src/routes/assets/save.ts 与 apps/server/src/routes/workspaces/files/write.ts 的写入流程。

参数校验错误与服务异常区分

「修复部分参数校验错误被当作服务异常处理的问题」：接口层将参数校验失败（4xx 语义）与运行期异常（5xx 语义）分别返回，前端 stores/desktopUpdate.ts 中getUpdateError也优先读取响应体里的message字段，避免把可修复的用户输入错误包装成服务故障。

更新状态机健壮性

「修复部分更新未生效、退出后未重新打开的问题」与「修复重复操作、切换更新源、取消更新或系统时间变化引起的更新状态异常，完善下载失败和异常更新包的提示」共同指向桌面更新状态机：

• types/desktop.ts 中的updateSnapshot以updateAvailable/updateReady/updating三个布尔值区分「发现新版本 / 已下载就绪 / 正在应用」三种阶段，避免重复提交安装请求；
• 切换更新源（官方 / GitHub / 自定义地址）时，stores/desktopUpdate.ts 会立即清空旧源的版本与错误状态，防止跨源串扰；
• 上轮观察超时后只允许重新读取、不允许再次提交安装，避免客户端已交接但前端没收到结果时的重复安装；
• 安装失败时通过installFailure携带完整上下文（目标/当前版本与哈希、失败消息、下载地址），前端据此展示「更新未成功」对话框并引导下载完整安装包，参见 App.vue 的失败分支处理。

面向开发者的更新说明接入方式

如果你希望在 Toonflow 仓库基础上维护自己的更新说明，可以遵循以下模式：

1. 将 Markdown 更新说明放在组件目录内，如 apps/web/src/components/updateBox.md，用?raw导入；
2. 通过version、buildCode两个 prop 传入当前版本与构建代码，markdownprop 可覆盖默认内容；
3. 由 App.vue 根据桌面更新快照（version、hash）决定是否弹出，并在关闭/展示完成时调用rememberUpdateBox写入updateBoxSeenBuilds设置，保证同一构建只展示一次；
4. 若更新应用失败，切换到「更新未成功」对话框，展示目标/当前版本对比并提供下载入口。

结语

updateBox.md虽然是一份简短的版本说明，但它精确反映了 Toonflow 一个版本周期的工程重点：国际化与 RTL 适配、文本附件与提示词编辑体验、画布分组复制与历史回退、FFmpeg 媒体工具链、macOS 原生菜单，以及桌面更新状态机的稳定性打磨。对照仓库源码阅读这份更新说明，可以更清楚地看到每个功能点的真实实现位置与工作机制，为二次开发、问题定位与版本迭代提供直接线索。

• 人工智能
• AI 应用
• AI Agent
• RAG
• AI 写作
• 后端
• 桌面应用