ArtAP

基于 Vue Flow 的工作流平台：可视化搭建「资产读取 → 文本提示词 → AI 生成 → 资产入库」的生产流水线，配合轻量 Express 后端完成素材管理与工作流执行。

功能特性

• 可视化节点画布（Vue Flow）：拖拽、连线、平移缩放、框选
• 4 种专用节点：资产读取 / 文本提示词 / AI 生成 / 资产入库
• 端口类型校验（image / text）：不匹配的连线会被实时拦截并给出视觉提示（image 蓝、text 橙）
• 撤销 / 重做：80 步历史栈（Ctrl+Z / Ctrl+Shift+Z）
• 工作流 JSON 导入 / 导出 / 保存
• 右侧参数面板：按节点类型动态渲染表单
• 底部执行日志控制台：可折叠，点击日志定位对应节点
• 素材库页面：上传 / 预览 / 删除 / 复制 / 拖拽到画布
• 工作流执行引擎：拓扑排序 + 端口二次校验 + 环路检测 + 失败下游跳过
• KeepAlive 跨页面保持画布状态

技术栈

层	技术
前端	Vue 3.5 + Vite + Vue Flow 1.48
后端	Express + multer 2.x（本地文件夹存储，无数据库）

目录结构

ArtAP/
├── web/                  # 前端（Vue + Vite）
│   ├── src/
│   │   ├── views/        # CanvasView 画布页 / AssetsView 素材库页
│   │   ├── components/   # 节点组件、检查器、节点库、执行控制台等
│   │   ├── graph/        # 节点规格、端口校验、历史栈
│   │   └── api/          # 后端接口封装
│   └── vite.config.js    # 将 /api 代理到后端 8787
├── server/               # 后端（Express）
│   ├── src/              # index / runner / storage / ai-provider
│   └── storage/          # 运行时数据（已在 .gitignore 中忽略）
└── .gitignore

快速开始

1. 启动后端

cd server
npm install
node src/index.js          # http://localhost:8787

2. 启动前端

cd web
npm install
npm run dev               # http://localhost:5273

前端开发服务器已将 /api 代理到后端 8787，直接访问 5273 即可联调。

3. 配置 AI 绘图（可选）

后端 ai-provider.js 读取以下环境变量；未配置时走内置 SVG 占位渲染，因此开箱即可跑通整条流程。

变量	说明	默认
AI_API_URL	AI 绘图接口地址	空（占位渲染）
AI_API_KEY	接口鉴权 Key	空
AI_MODEL	模型名	mock-diffusion-v1
AI_TIMEOUT_MS	请求超时（ms）	120000

使用说明

1. 添加节点：左侧节点库拖拽到画布，或双击卡片 / 点「+」按钮添加。
2. 连线：拖动端口连线，类型不匹配会被拦截（image→text 等）。
3. 编辑参数：选中节点 → 右侧检查器编辑；「资产读取」节点需在检查器里从素材库选一张图。
4. 执行：点「执行工作流」，后端按拓扑顺序运行节点，状态 / 预览图 / 日志实时回写到画布。
5. 持久化：导出 / 导入工作流 JSON，或保存到后端。