一个可自行部署的 AI 可视化创作平台 ✨
🧩 节点式画布编排 · 🤖 多模型代理 · 💰 金币计费 · 🛠️ 完整管理后台
🔗 仓库地址 · 📖 在线文档 · 🚀 快速开始 · 📜 License: MIT
万能涂鸦画布（Doodle Canvas）是一个开箱即用的 AI 创作平台，将 🧩 可视化节点画布 与 🤖 多模型统一代理 结合在一套服务中。用户在浏览器中拖拽文本、图片、视频和大语言模型节点，即可编排个性化的 AI 工作流；服务端统一处理 chat / image / video 请求，支持多渠道优先级调度、金币计费、持久化任务和文件管理，并附带完整的管理后台。
🔐 第三方模型密钥只保存在服务端，并使用 AES-256-GCM 加密后写入数据库，浏览器永远不会接触明文密钥。
| 🏠 首页 | 🎨 画布工作区 |
|---|---|
 |
 |
| ⚙️ 工作流编排 | 🔧 渠道配置 |
|---|---|
 |
 |
- 🟦 节点式工作流：文本节点、图片节点、视频节点、LLM 节点自由拖拽编排，每种类型配备独立配置节点。
- 🔗 连线语义：支持顺序连线、角色连线和提示词连线，表达节点间的数据流向与依赖关系。
- 📁 项目管理：画布内容可保存为项目，支持多项目切换与持久化。
- 🌐 统一入口：一套 API 同时处理 chat、image、video 三类请求，对前端透明。
- 🏆 多渠道优先级：同一模型可绑定多个渠道，按优先级自动选择可用线路。
- 🔌 协议适配器：内置 7 种 Provider 适配器，兼容主流大模型服务。
| 📦 支持的 Provider | 🏷️ 类型 | 📝 说明 |
|---|---|---|
openai |
chat / image / video | OpenAI 或兼容 API |
aliyun |
chat / image / video | 阿里云百炼 / DashScope |
doubao |
chat / image / video | 火山方舟兼容接口 |
hunyuan |
chat / image / video | 腾讯混元兼容接口 |
stepfun |
chat / image / video | 阶跃星辰兼容接口 |
agnes |
chat / image / video | Agnes API |
custom |
chat / image / video | 自定义 OpenAI 兼容服务 |
- 📝 注册 / 登录 / 邮箱验证 / 密码重置全流程。
- 🔑 双 Token 会话机制：Access Token 短时效 + Refresh Token 哈希存储与轮换。
- 🗄️ Redis 保存 Token 撤销状态，MySQL 持久化会话记录。
- 💳 金币余额体系，支持充值、消费、预扣和失败退款。
- 📊 灵活的计费规则与固定金币价格配置。
- 👥 用户组倍率机制，支持分层定价。
- 🗃️ 图片生成任务持久化写入 MySQL，进程重启后可自动恢复。
- ⚙️ 后台 Worker 按租约领取任务，收费请求先预扣，失败路径执行幂等退款。
- 🎬 视频渠道支持上游任务 ID 与状态查询。
- 🖼️ 图片和视频上传、生成文件归档、签名访问与软删除。
- 🔒
/storage/*请求需服务端签名并校验数据库状态。 - 🛡️ 远程媒体下载阻止私网和环回地址，降低 SSRF 风险。
覆盖完整的运营管理能力：
| 📊 模块 | ⚡ 能力 |
|---|---|
| 📈 仪表盘 | 站点概览与统计 |
| 👥 用户管理 | 用户列表、状态控制、余额调整 |
| 🏷️ 用户组 | 分组与倍率配置 |
| 🔌 渠道管理 | Provider、Base URL、API Key、测试、启停 |
| 🧠 模型管理 | 模型类型、上游标识、参数边界、价格 |
| 💵 计费规则 | 计费策略与默认价格 |
| 🪙 金币管理 | 充值记录与交易流水 |
| 📜 调用记录 | 请求日志与成本追溯 |
| 🗂️ 文件管理 | 文件列表与归档状态 |
| 🐛 错误日志 | 异常堆栈与排查线索 |
| 📢 公告管理 | 站点公告发布与展示 |
| 📦 技术 | 📝 说明 |
|---|---|
| ⚡ Vue 3 | 组合式 API，响应式视图框架 |
| 🔥 Vite 5 | 极速构建与热更新开发服务器 |
| 🕸️ Vue Flow | 节点式画布与交互编排 |
| 🎨 Naive UI | 现代化 Vue 3 组件库 |
| 🍍 Pinia | 类型友好的状态管理 |
| 🌬️ TailwindCSS | 原子化 CSS 工具集 |
| 🧭 Vue Router | 单页应用路由 |
| 📡 Axios | HTTP 请求客户端 |
| 📦 技术 | 📝 说明 |
|---|---|
| 🟢 Express 4 | 轻量 Node.js Web 框架 |
| 🐬 Sequelize 6 + mysql2 | MySQL ORM 与驱动 |
| 🔴 ioredis | Redis 客户端，限流与令牌撤销 |
| 🔐 jsonwebtoken + bcryptjs | JWT 签发与密码哈希 |
| 📤 multer + sharp | 文件上传与图片处理 |
| ✉️ nodemailer | 邮件验证与密码重置 |
| 📝 winston | 结构化日志 |
| 🛡️ helmet + cors + express-validator | 安全中间件与参数校验 |
| 🧩 组件 | ✅ 要求 |
|---|---|
| 🟢 Node.js | 18 或更高，推荐 20 LTS |
| 🐬 MySQL | 5.7.44 或 8.0，推荐 8.0 |
| 🔴 Redis | 6 或更高 |
| 🌐 Nginx / PM2 | 生产环境推荐 |
💡 以下命令适用于 Linux、macOS 和 Git Bash；Windows PowerShell 可将
cp替换为Copy-Item。
git clone https://github.com/kggzs/Doodle-Canvas-Service.git
cd Doodle-Canvas-Service
npm ci
npm --prefix server ci
cp server/.env.example server/.env编辑 server/.env，至少设置 MySQL、Redis、站点地址和 SMTP 参数。完整参数及密钥要求见 📖 配置说明。
CREATE DATABASE canvas CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'canvas'@'localhost' IDENTIFIED BY 'replace-with-a-strong-password';
GRANT ALL PRIVILEGES ON canvas.* TO 'canvas'@'localhost';
FLUSH PRIVILEGES;mysql -u canvas -p canvas < server/sql/init.sqlnpm run build
npm run start
# 在另一个终端执行
npm run create-admin -- \
--email admin@example.com \
--username admin \
--password 'replace-with-a-strong-password'| 🌐 地址 | 📌 用途 |
|---|---|
http://127.0.0.1:3000/ |
🖥️ Web 应用 |
http://127.0.0.1:3000/admin |
🛠️ 管理后台 |
http://127.0.0.1:3000/api/health |
💓 进程存活检查 |
http://127.0.0.1:3000/api/ready |
✅ MySQL、Redis、存储就绪检查 |
启动后进入 /admin，按以下顺序配置模型：
- 🔌 创建渠道 — 选择 Provider，填写 Base URL 和 API Key。
- 🧠 创建模型 — 选择 chat / image / video 类型，填写上游模型标识。
- 🔗 绑定渠道 — 将模型绑定到同类型渠道并设置优先级（数字较小者优先）。
- ✅ 启用 — 启用渠道、模型和绑定关系。
- 💰 定价 — 配置固定金币价格；未配置时使用环境变量中的默认价格。
- 🧪 测试 — 渠道测试通过后，从用户页面发起实际请求。
Provider、端点和参数约定见 📖 模型渠道。
后端默认监听 3000，Vite 开发服务器监听 3003 并代理 /api：
# 终端 1：启动 Express（支持热重载）
npm run server:dev
# 终端 2：启动 Vite（支持前端热更新）
npx vite运行项目检查：
npm run check| ⌨️ 命令 | 📌 用途 |
|---|---|
npm run build |
📦 构建前端到 dist/ |
npm run start |
|
npm run server:dev |
🔄 使用 nodemon 启动 Express（热重载） |
npm run test |
🧪 运行服务端 Node 测试 |
npm run check |
✅ 运行测试 + 生产构建 |
npm run create-admin -- ... |
👑 创建管理员账号 |
更多命令和目录说明见 📖 开发说明。
推荐拓扑：
Internet → Nginx (HTTPS) → Node/Express :3000 → MySQL
→ Redis
→ persistent storage
生产环境必须持久保存 server/.env、server/.runtime.env 和文件存储目录。多实例部署必须共享相同的 JWT_SECRET、AES_SECRET_KEY 和 STORAGE_SIGNING_SECRET。
PM2 配置已提供于 server/ecosystem.config.js：
pm2 start ecosystem.config.js --env production完整的 PM2、Nginx、防火墙、备份和上线检查步骤见 📖 部署指南。
Doodle-Canvas/
├── src/ # 🖥️ 前端源码
│ ├── views/ # 📄 页面视图（用户端 + 管理后台）
│ ├── components/ # 🧩 组件（画布节点、连线、布局壳等）
│ │ ├── nodes/ # 🟦 画布节点（文本/图片/视频/LLM 及配置节点）
│ │ └── edges/ # 🔗 连线（顺序/角色/提示词）
│ ├── stores/ # 🍍 Pinia 状态管理
│ ├── api/ # 📡 API 客户端（chat/image/video/backend）
│ ├── hooks/ # 🪝 组合式逻辑（工作流编排等）
│ └── router/ # 🧭 路由配置
├── server/ # ⚙️ 后端源码
│ ├── src/
│ │ ├── routes/ # 🛣️ 用户 API + admin/ 管理后台 API
│ │ ├── services/ # 🔧 业务逻辑（认证/计费/生成/存储等）
│ │ ├── adapters/ # 🔌 上游模型协议适配器（7 种 Provider）
│ │ ├── models/ # 🗃️ Sequelize 数据模型（21 个表）
│ │ ├── middleware/ # 🛡️ 中间件（鉴权/限流/审计/请求 ID）
│ │ ├── scheduler/ # ⏰ 后台任务调度
│ │ ├── config/ # ⚙️ MySQL/Redis/JWT/密钥配置
│ │ └── scripts/ # 📜 管理员与数据库维护脚本
│ ├── sql/init.sql # 🐬 新数据库完整 Schema
│ ├── test/ # 🧪 Node 内置测试
│ └── ecosystem.config.js # 🚀 PM2 进程配置
├── doc/ # 📚 文档与界面截图
├── index.html
├── vite.config.js
└── tailwind.config.js
| 📖 文档 | 📝 内容 |
|---|---|
| 🏗️ 架构说明 | 组件、数据流、目录和安全边界 |
| ⚙️ 配置说明 | 全部环境变量、默认值和排错 |
| 🚀 部署指南 | 从空服务器到 HTTPS 服务的完整流程 |
| 🔌 模型渠道 | Provider、Base URL、模型绑定和测试 |
| 💻 开发说明 | 本地开发、测试、构建和常用命令 |
- 🚫 不要提交
server/.env、server/.runtime.env、日志、上传文件或数据库备份。 - 🔐 生产环境使用独立低权限数据库账号和 Redis 密码，并限制网络访问。
⚠️ AES_SECRET_KEY丢失后，数据库中的模型 API Key 将无法解密。- 🔄 已泄露的密码或 Token 必须在对应服务端轮换，删除本地文件不能使旧凭据失效。
- 🔒 公网部署应启用 HTTPS，并正确设置
TRUST_PROXY_HOPS、CORS_ORIGINS、PUBLIC_ORIGIN_ALLOWLIST。
⭐ 如果这个项目对你有帮助，欢迎 Star 支持！
🎨 Made with ❤️ by kggzs