自研项目 · 无线画布项目 · 2026 至今
AI 短剧智能生成平台
面向 AI 短剧行业的智能化生产工具：无限画布节点编辑器 + 3D 实时导演台 + 团队协作 + 后台权限，支撑短剧从素材到成片的协同生产。全程从 0 到 1 主导核心前端研发。
Vue 3
Vue Flow
Three.js
豆包 AI 网关
Agora 实时通话
Pinia
自研
14000+
累计代码行数
50+
通用组件封装
60+
对接后端接口
9种
细粒度角色权限
01
项目概述
AI 短剧无限画布平台是面向影视制作团队的 AI 创意工作台，以「可视化流程画布」与「3D 实时导演台」两大主视图为核心，外加成员管理与后台运维。平台集成豆包系 AI 网关，支持文本对话、文生图、文生视频等多模态生成；通过 9 种工种角色实现细粒度权限管控，配合三层持久化与网络熔断机制保障创作数据不丢。作为核心前端，我独立承担了无限画布、3D 导演台、公私域资源库、后台权限、1V1 实时语音通话、工作流引擎等模块的从 0 到 1 搭建与持续迭代。
02
技术栈
Vue 3 (Composition API)
Vue Flow 节点引擎
Three.js 3D 导演台
Pinia 状态管理
Vite 构建
Element Plus
WebSocket 信令
Agora 声网 SDK
OSS 缩略图
豆包系 AI 网关 (seedream / seedance)
JSZip 批量打包
03
我的职责与核心成果
🎨
无限画布编辑器
基于 Vue Flow 搭建多类型节点可视化编辑器，完成核心节点重构与交互升级，落地图片宫格切分、高清渲染、标注绘制等能力。
🎬
3D 导演台
基于 Three.js 开发 3D 场景编辑器，实现多格式模型导入、场景机位管控、画布素材联动，依托双层本地持久化保障数据安全。
🗂️
资源管理体系
从零搭建个人 + 团队公私域资源库，接入 OSS 缩略图方案，通过虚拟滚动、批量压缩下载等优化解决海量资源性能问题。
🔐
权限与实时能力
搭建 9 角色细粒度权限体系与双 Token 机制；独立承接 1V1 实时语音通话与工作流引擎两大创新功能。
04
技术攻坚 · 真实踩坑
这些是从 0 到 1 落地过程中真实遇到的核心难题，也是最能体现工程能力的部分。
性能攻坚
海量节点卡顿
几千个节点时页面严重卡顿、交互失灵。
解决方案：采用节点按需渲染 + 图片资源压缩 + 闲置资源销毁 + 帧频节流（16ms 强制 60fps 上限），搭配三层数据防抖持久化与 50 步撤销重做，彻底解决卡顿，操作稳定性大幅提升。
坐标一致性
Canvas 游标错位
canvas 用 CSS transform 缩放/平移后，绘制坐标未计入变换，导致游标与绘制位置不一致。
解决方案：统一让 canvas 像素尺寸与显示尺寸保持一致，坐标换算时同步考虑 transform 的缩放与位移，矩形/标注位置精确对齐。
跨域
图片跨域污染
设置 crossOrigin 后 Canvas 被污染，无法调用 toDataURL() 导出。
解决方案：移除 crossOrigin 属性避免污染，导出采用原图尺寸离屏绘制，文本/拖拽层用 displayScale + zoom 联合缩放，保存像素不再模糊。
实时通信
1V1 语音通话竞态
Agora 接入时遇到通话竞态、超时无响应、UID 冲突、忙线等边界异常。
解决方案：复用 WebSocket 聊天通道做信令（约定 ___VOICE_CALL___ 等标记），处理来电弹窗生命周期、30s 超时、忙线回复、UID_CONFLICT 自动重试，保证 1:1 通话行为稳健。
海量渲染
资源库滚动卡顿
上千条图片/视频直接渲染到 DOM，滚动时大量节点引发卡顿与内存泄漏。
解决方案：引入虚拟滚动只渲染可视区域 ~30 条；点击时才创建 video 用 Canvas 截取首帧后立即销毁；缓存上限 150 条并自动清理，滚动流畅且内存可控。
数据安全
三层持久化 + 网络熔断
编辑中的画布数据在网络抖动时易丢失。
解决方案：本地 ref → Pinia → LocalStorage → 远程 API 三层落地，网络失败累计达阈值触发全屏熔断遮罩，配合 online/offline 监听，数据零丢失。
05
项目成果
- 实现 AI 多模态生成与 1s 准实时多人协作预览核心能力，完成全页面交互重构与性能优化。
- 累计开发 14000+ 行代码，封装 50+ 通用组件，对接 60+ 后端接口，整体架构稳定可扩展。
- 解决画布海量节点卡顿、资源加载缓慢、跨域异常、通话不稳定等行业常见问题，产品稳定性与用户体验大幅提升。
- 搭建完整的画布编辑、资源管理、权限管控、工作流体系，支撑产品商业化迭代落地。
© 2026 酒歌 · 前端开发工程师 · 本页内容基于真实项目沉淀整理