{"repo": "15673312611/yunji-canvas-main", "files": {"README.md": {"5b4178e91748d107deaf8bbee6dd1e3b07a7cf2b": {"t": 1785674438.1019073, "n": 3186, "h": "1d1fa03c3354c876", "c": "# 云迹无限画布 (Yunji Canvas)\n\n> **作者微信：soe303** | 欢迎交流与合作\n\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n![Vue](https://img.shields.io/badge/Vue.js-3.5-4FC08D?logo=vue.js)\n![Vue Flow](https://img.shields.io/badge/Vue%20Flow-1.48-ff0072?logo=vue.js)\n![Vite](https://img.shields.io/badge/Vite-5.2-646CFF?logo=vite)\n![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38B2AC?logo=tailwind-css)\n\n**云迹无限画布** 是一款企业级可视化 AI 工作流编排平台，基于 Vue 3 生态深度打造。通过直观的节点式画布交互，让复杂的 AI 创作流程（文生图、图生视频、多模态处理）变得简单高效。平台内置智能 AI 助手，支持自然语言描述自动生成工作流架构，并提供专业级提示词优化引擎，显著提升创作效率与输出质量。\n\n---\n\n## ✨ 核心特性\n\n### 🎨 可视化工作流编排\n- 基于 Vue Flow 引擎的无限画布空间\n- 支持节点拖拽、自由缩放、智能连接与自动布局\n- 实时预览与调试，所见即所得\n\n### 🤖 AI 智能助手\n- **自然语言搭建**: 描述需求即可自动生成完整工作流架构\n- **提示词优化引擎**: 内置 LLM 驱动的专业提示词润色工具\n- **智能推荐**: 根据上下文推荐最佳节点组合\n\n### 🎬 多模态内容生成\n- **图像创作**: 文生图、图生图、图像编辑全流程支持\n- **视频制作**: 图片转视频、视频风格化处理\n- **扩展节点**: 文本处理、参数配置、多媒体预览等丰富组件\n\n### 📦 企业级项目管理\n- 多项目并行管理，工作区隔离\n- 工作流模板导入/导出（JSON 格式）\n- 本地数据持久化，隐私安全可控\n\n### 💎 极致用户体验\n- 响应式设计，适配多种屏幕尺寸\n- 亮色/暗色主题自动切换\n- 流畅动画与交互反馈\n\n## 🛠 技术栈\n\n| 模块 | 技术选型 | 说明 |\n| :--- | :--- | :--- |\n| **核心框架** | [Vue 3](https://vuejs.org/) | Composition API |\n| **流程引擎** | [Vue Flow](https://vueflow.dev/) | 节点编排与交互核心 |\n| **UI 组件库** | [Naive UI](https://www.naiveui.com/) | 现代化 Vue 3 组件库 |\n| **样式工具** | [Tailwind CSS](https://tailwindcss.com/) | 原子化 CSS 框架 |\n| **构建工具** | [Vite](https://vitejs.dev/) | 极速开发与构建 |\n| **HTTP 客户端** | [Axios](https://axios-http.com/) | 网络请求处理 |\n\n## 📸 项目截图\n\n### 首页概览\n![首页](./doc/home.png)\n\n### 画布编辑\n![画布](./doc/canvas.png)\n\n### API 配置\n![API 配置](./doc/api-config.png)\n\n## 📂 目录结构\n\n```\nsrc/\n├── api/             # API 接口定义 (Image, Video, Chat 等)\n├── components/      # Vue 组件\n│   ├── edges/       # 自定义连线组件 (Vue Flow)\n│   └── nodes/       # 自定义节点组件 (Vue Flow)\n├── config/          # 全局配置文件\n├── hooks/           # 组合式函数 (useApiConfig, useWorkflow 等)\n├── router/          # 路由配置\n├── stores/          # 状态管理 (Reactive / Composition)\n├── utils/           # 工具函数库\n└── views/           # 页面视图 (Home, Canvas)\n```\n\n## 🚀 快速开始\n\n### 📋 环境要求\n\n- **Node.js**: >= 18.0.0\n- **包管理器**: npm / pnpm / yarn\n\n### 💻 本地部署教程\n\n#### 方式一：一键启动（推荐）\n\n**Windows 用户**：\n1. 双击运行 `启动项目.bat`\n2. 脚本将自动检测依赖、安装并启动服务\n3. 浏览器自动打开 `http://localhost:5173`\n\n#### 方式二：命令行启动\n\n1. **克隆项目**\n   ```bash\n   git clone https://github.com/your-username/yunji-canvas.git\n   cd yunji-canvas\n   ```\n\n2. **安装依赖**\n   ```bash\n   npm install\n   # 或使用 pnpm\n   pnpm install\n   ```\n\n3. **启动开发服务器**\n   ```bash\n   npm run dev\n   # 或使用 pnpm\n   pnpm dev\n   ```\n\n4. **访问应用**\n\n   打开浏览器访问 `http://localhost:5173`\n\n### 构建部署\n\n```bash\n# 构建生产环境代码\npnpm build\n\n# 预览构建产物\npnpm preview\n```\n\n## ⚙️ 配置指南\n\n### 首次使用配置\n\n1. 启动应用后，点击右上角「设置」图标\n2. 填写以下配置信息：\n\n| 配置项 | 说明 | 示例 |\n|:---|:---|:---|\n| **API Base URL** | AI 服务接口地址（支持 OpenAI 兼容格式） | `https://api.openai.com/v1` |\n| **API Key** | 你的 API 密钥 | `sk-xxxxxxxxxxxxx` |\n| **Chat Model** | 对话模型（用于智能搭建和提示词优化） | `gpt-4` / `gpt-3.5-turbo` |\n\n3. 保存配置后即可开始使用\n\n> 💡 **隐私保护**: 所有配置均存储于本地浏览器 (`localStorage`)，不会上传至任何服务器。\n\n## 🐳 Docker 部署\n\n本项目支持 Docker 快速部署。\n\n详情请参考: [README.docker.md](./README.docker.md)\n\n```bash\n# 快速启动\ndocker-compose up -d --build\n```\n\n## 📄 License\n\n本项目采用 [MIT License](LICENSE) 开源。\n\n---\n<p align=\"center\">Made with ❤️ by Yunji Team</p>\n"}}}}