爱笑的毛毛虫 b4d2b34fae feat(canvas): 设计token系统 - 建立三层架构骨架 (#101)
* feat(canvas): 设计token系统 - 建立三层架构骨架 #94 #96

建立 Primitive→Semantic→Component 三层设计 token 体系,覆盖 9 个维度:
色彩/间距/字号/圆角/阴影/Elevation/动效/描边/不透明度。

- Primitive 层:纯值无语义,含 neutral 色板+节点类型色板+状态色、
  4px 栅格间距、10档字号、10档圆角、阴影+glow、12档 z-index、
  动效(duration+easing+delay+motion-scale)、描边、不透明度
- Semantic 层:引用 Primitive,随主题切换,含通用语义色、
  Canvas 语义(--cn-*)、Aceternity spatial 语义、节点类型语义、状态语义
- Component 层:引用 Semantic,含 Dock/Node/Modal/Panel/Prompt面板/
  进度条/缩放控制专属 token
- @theme inline 映射:节点类型色、状态色、Canvas 语义色、字号映射到 Tailwind utility
- prefers-reduced-motion 三级降级(L0正常/L1简化/L2禁用)
- AGENTS.md 新增 Design Token 使用规范,禁止新增裸 px 值
- 附带修复 canvas-drawing-excalidraw-editor.tsx TS7006 类型注解
- 附带修复 canvas-drawing-editor-modal.tsx TS2339 engine 字段缺失

Wayfinder 决策来源:#95 #96 #97 #98 #99

* fix(canvas): 设计token系统 - 修复CSS变量循环引用和命名兼容性 #94 #96

修复两个问题:

1. CSS变量循环引用:Primitive层 --color-node-*/--color-status-* 与
   @theme inline 中的 --color-node-*/--color-status-* 同名,经 Semantic
   层中转后形成循环(A→B→A)。改用 --palette- 前缀隔离 Primitive 色板,
   打断循环链路。

2. 变量名小数点兼容性:--space-0.5/1.5/2.5/3.5 中的小数点被部分 CSS
   linter 误判为类选择器。改为 --space-half/-1-half/-2-half/-3-half,
   保持语义清晰的同时提升工具链兼容性。

* refactor(canvas): 画布核心组件 - 迁移硬编码值到设计token #94

批次1:5个画布核心组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token,统一视觉语言:

- canvas-node.tsx:text-[10/11/9/17px]→fs-tiny/label/micro/heading-lg,
  rounded-[18px]→node-radius
- canvas-node-hover-toolbar.tsx:text-[11/17/10/9px]→fs-*,
  rounded-[14/9px]→dock-radius/dock-item-radius,z-[70]→z-panel-floating
- canvas-toolbar.tsx:text-[9/10/11px]→fs-*,
  rounded-[17/16/11/10px]→panel-radius/dock-item-radius-*,
  z-[30/40]→z-toolbar/z-toolbar-floating
- canvas-assistant-panel.tsx:text-[8/9/10/11px]→fs-*
- canvas-script-node.tsx:text-[9/10/11px]→fs-*

视觉零回归(token值与原硬编码值一致),代码可维护性提升。

* refactor(canvas): 画布辅助组件 - 迁移硬编码值到设计token #94

批次2:6个画布辅助组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token:

- canvas-style-picker-modal.tsx:text-[10/11px]→fs-tiny/label
- canvas-file-drop-overlay.tsx:z-[110]→z-modal-overlay,
  rounded-[28/20px]→r-5xl/r-3xl
- canvas-character-reference-node.tsx:text-[10px]→fs-tiny
- canvas-drawing-editor-modal.tsx:text-[11px]→fs-label
- canvas-video-prompt-tools.tsx:z-[1500]→z-toast,
  rounded-[12/10px]→r-lg/dock-item-radius
- asset-picker-modal.tsx:text-[10px]→fs-tiny

视觉零回归(token值与原硬编码值一致)。

* refactor(*): 全项目硬编码值 - 批量迁移到设计token #94

批次3:全项目 .tsx 文件中 372 处裸 text-[Npx]/rounded-[Npx] 批量
替换为对应设计token,剩余 25 处无直接 token 对应的低频值保留。

替换覆盖(按频率):
- text-[10px]→fs-tiny (132处)
- text-[11px]→fs-label (100处)
- text-[9px]→fs-micro (45处)
- text-[12px]→fs-caption, text-[13/14px]→fs-body, text-[15px]→fs-body-lg
- text-[18px]→fs-heading-lg, text-[22px]→fs-title, text-[8px]→fs-micro
- rounded-[9/10px]→dock-item-radius, rounded-[12px]→r-lg
- rounded-[14px]→dock-radius, rounded-[16px]→r-2xl
- rounded-[17px]→panel-radius, rounded-[8px]→r-md

涉及 components/ 和 pages/ 下所有 .tsx 文件。
视觉零回归(token值与原硬编码值一致)。

* feat(canvas): 节点视觉层次规范 - 色带+状态徽章+四态递进 #97 #94

基于 Wayfinder 地图 #97 决议执行节点视觉重设计:

1. 节点类型色带(决策1)
   - 新增 nodeTypeColorVar() 函数,10种节点类型对应色带色
   - 节点左侧3px色条,引用 --cn-type-* token
   - 远距离最强信号,用户扫视画布即可识别节点类型

2. 节点状态徽章(决策2)
   - 新增 NodeStatusBadge 组件,loading/success/error 三态
   - 左上角圆角徽章,backdrop-blur 玻璃质感
   - success 态 2s 后自动淡出(canvas-status-success-fade 动画)

3. 四态递进视觉权重(决策3)
   - idle:无额外阴影
   - hover:轻微抬升阴影(16px 48px)
   - selected:2px 边框环(accent.primary 40% 透明度)
   - selected-primary:4px 软色环 + resize handle
   - active:6px 外发光环 + inner glow(最强强调)
   - 120-150ms ease-out 过渡

4. 阴影迁移
   - boxShadow 从硬编码改为分层语义化表达
   - 边框色 hover 态使用 color-mix 动态加深

Closes #97

---------

Co-authored-by: sikongyue <3155157671@qq.com>
2026-08-03 21:38:38 +08:00

影策 logo

影策

让一个故事,从文字走向银幕

GitHub stars Version License

一个故事也许始于一页小说、一个人物,或一句还没写完的对白。影策从章节中梳理角色与情节,让人物的外观、声音和气质成为可复用的角色资产,再把分镜、图片、视频和音频组织在同一张画布上。从最初的文字到可以被看见、被听见的镜头,创作者始终掌握故事的方向。

影策是一款面向 AI 影视与短剧创作的开源工作台,集成自由画布、结构化分镜、角色卡、3D 导演台、素材库、异步生成任务和 Agent 协作能力。

项目仍在快速开发,数据结构可能直接调整。当前更适合个人、本地或可信环境部署,不建议未经安全配置直接开放公网多人使用。

在线体验

赞助商

赞助商 网站 说明
ArtDance ArtDance 本项目 Seedance 模型的天使投资人。

主要功能

  • 自由画布:多项目、节点与连线、框选布局、撤销重做、小地图、导入导出和公开只读分享。
  • AI 生成:支持文本、图片、视频和音频任务,以及参考图编辑、首尾帧、运镜、视频续写和局部修改。
  • 影视工作流:结构化分镜脚本、角色卡、批量镜头节点、3D 导演台和控制图回写。
  • 任务与素材:后端异步队列、任务日志、失败重试、素材库及登录后的后端同步。
  • Agent 能力:网页画布助手、本地 Canvas Agent、Codex App 插件和技能库。
  • 管理与安全:用户与系统渠道、用量分析、私有 OSS、资源归属校验和敏感配置加密。

界面预览

登录与注册
登录与注册
AI 创作工作台
AI 创作工作台
短剧项目制作概览
短剧项目制作概览
自由画布创作工作台
自由画布创作工作台

交流与反馈

感谢 Linux.do 社区 对项目的认可与支持,欢迎在社区参与讨论和分享使用体验。

Issue 反馈、技术讨论和产品升级建议都可以在 QQ 群中沟通。群内还会不定期组织 AI 学习与培训交流会。

影策 QQ 交流群

新服务器一键部署(推荐)

适用于刚买的 Linux 云服务器。准备一台 Ubuntu、Debian、CentOS 或 Rocky Linux 服务器,在云厂商防火墙(安全组)中先仅对自己的公网 IP 放行 TCP 3000 端口,然后登录服务器执行这一条命令:

curl -fsSL https://raw.githubusercontent.com/ddcat-ai/open-ai-canvas/main/scripts/install-server.sh | sudo bash

脚本会自动安装 Docker 和 Docker Compose,把项目源码安装到 /opt/open-ai-canvas,生成随机数据库密码,在服务器本地构建网页与后端镜像,并启动网页、后端、PostgreSQL 和 Redis。该流程不依赖 GitHub Container Registry(GHCR)的匿名拉取权限;数据库和上传文件使用 Docker 数据卷持久保存,重新启动容器不会丢失。

完成后打开 http://服务器IP:3000。第一个注册的账号会自动成为管理员;登录后在系统设置中配置模型渠道即可开始使用。公开注册默认关闭,但不影响第一个管理员注册。

再次执行同一条命令即可拉取新代码并更新。常用排查命令:

cd /opt/open-ai-canvas
sudo docker compose --env-file .env -f docker-compose.deploy.yml -f docker-compose.build.yml ps
sudo docker compose --env-file .env -f docker-compose.deploy.yml -f docker-compose.build.yml logs -f --tail=200

首次部署需要下载构建依赖并编译前后端,耗时和资源占用会高于直接拉取镜像;后续更新会复用 Docker 构建缓存。需要固定代码版本时,可通过 REPOSITORY_REF 指定分支或标签。

直接使用 GitHub Packages 镜像

如果服务器不需要源码目录,可以使用只拉取 GitHub Container Registry(GHCR)镜像的快速脚本。脚本会下载部署 Compose 文件,不会 clone Git 仓库;首次执行仍会自动安装 Docker、生成 /opt/open-ai-canvas/.env 并启动全部服务:

curl -fsSL https://raw.githubusercontent.com/ddcat-ai/open-ai-canvas/main/scripts/install-server-image.sh | sudo bash

该快速脚本仍依赖 GHCR 容器包的可见性。容器包尚未公开时,必须先执行 docker login ghcr.io,或在直接运行脚本时提供 GHCR_USERNAME 和 GHCR_TOKEN 环境变量完成登录;未配置凭据时请使用上方推荐的源码构建脚本。默认使用 latest 标签,固定版本或修改端口可在首次执行后编辑 /opt/open-ai-canvas/.env,然后重新执行脚本。

部署配置和 PostgreSQL 密码保存在 /opt/open-ai-canvas/.env,不要发送给他人,也不要删除 backend-data、postgres-data 和 redis-data 数据卷。数据卷持久化不等于备份,请定期备份 PostgreSQL 和上传文件。直接使用 IP 访问仅适合首次配置;公网长期使用必须绑定域名并配置 HTTPS。

本地开发

需要 Bun、Go 和可用的 OpenAI 兼容模型渠道。

git clone https://github.com/ddcat-ai/open-ai-canvas.git
cd open-ai-canvas

cd backend
go run ./cmd/server

# 另开终端
cd web
bun install
bun run dev

打开 http://localhost:3000,注册首个管理员账号,再在系统设置中配置渠道和模型。

资源配额、Worker/渠道/账号任务并发、业务频控、任务超时和渠道中转策略可在“系统配置 → 资源与策略”中统一热更新,支持重置和自用模式;系统渠道可选择跟随全局值,或单独设置 1-999 的最大并发数。未保存后台配置时 Worker 和全局渠道并发分别回退到 CANVAS_WORKER_CONCURRENCY 和 CANVAS_CHANNEL_CONCURRENCY,两者默认均为 3。渠道槽位暂满时任务会等待,不会直接标记失败。

Docker 一体化运行:

docker compose -f docker-compose.local.yml up -d --build

数据说明

  • 用户自定义 AI API Key 保存在浏览器本地;登录态拉取模型目录时会临时提交给自部署后端但不会保存,创建异步任务时会加密入队;仅应使用可信部署,生产环境必须启用 HTTPS。
  • 画布和素材登录后同步到后端,本地 localForage 继续承担缓存和降级存储。
  • 媒体资源在启用 OSS 时保存到私有 OSS,否则保存到后端数据目录;删除业务记录不会自动清理 OSS 对象。
  • 用户主动上传、Agent 会话附件和 AI 生成资源的单文件上限、账号容量及 UTC 日上传总量由后台“资源与策略”统一维护,默认分别为 50MB、32MB、64MB、2GB 和 200MB;管理员可按可信部署需要调整,单文件业务上限最高 999MB,Nginx 请求体硬上限为 1024MB。

公网部署安全

  • 服务首次启动后应先在受控网络完成首个管理员注册,再开放公网入口。
  • 生产环境保持 CANVAS_REGISTRATION_ENABLED=false,确需开放注册时应同时配置系统渠道用量预算。
  • CANVAS_CORS_ORIGINS 必须设置为实际前端 Origin 列表,不要在公网使用 *。
  • 后端和前端必须通过 HTTPS 提供服务,并限制数据目录、数据库、备份和 .settings-key 的访问权限。

项目文件

上游致谢与二次开发

本项目基于 basketikun/infinite-canvas v0.5.0(提交 568f0f1838df8de31fe885a4e130e2f346dd14ab)进行二次开发。上游项目由 basketikun 维护,该基线提交作者为 HouYunFei;上游作者和贡献者继续保留其对应代码的权利与署名。

当前二次开发由 ddcat 维护,主要改动包括:

  • 新增 Go/Gin/GORM/PostgreSQL/SQLite 多用户后端、登录会话、管理员后台、异步任务中心和用量分析。
  • 新增私有 OSS、后端资源存储、跨设备画布与素材同步、公开只读分享和资源归属校验。
  • 扩展文本、图片、视频和音频生成,增加影视分镜、短剧流水线、角色参考与 3D 导演台。
  • 重构画布工作区、交互状态和 Aceternity 风格空间 UI,并增强 Canvas Agent 与 Codex App 插件。
  • 收敛上游代理、任务密钥、上传额度、日志脱敏和公网部署安全边界。

漏洞请按 SECURITY.md 提交。项目采用 AGPL-3.0 协议。

Description
No description provided
Readme MIT 862 MiB
Languages
TypeScript 50.7%
Go 33.1%
CSS 11.8%
JavaScript 2.5%
Python 1.7%
Other 0.1%