zhaoweijie 1aa9e280b0 Add 'frontend-vue/' from commit '041986f5cd6e67f5367fd047c71b8107865fa5af'

git-subtree-dir: frontend-vue
git-subtree-mainline: 4fa5504697d28b537980ae9cbc3597e415cb94cb
git-subtree-split: 041986f5cd6e67f5367fd047c71b8107865fa5af

2025-11-20 09:51:44 +08:00

2.8 KiB

Raw Blame History

多智能体协同平台 (Agent Coordination Platform)

一个强大的可视化平台，用于创建和管理具有专门角色的AI智能体，通过直观的工作流程协调它们来完成复杂任务。

✨ 功能特性

多智能体系统：创建具有专门角色和专业知识的AI智能体
可视化工作流编辑器：使用JSPlumb设计智能体协调流程的拖放界面
任务管理：定义、执行和跟踪复杂的多步骤任务
实时通信：无缝的智能体交互和协调
丰富的模板系统：支持样式的灵活内容格式化
TypeScript支持：整个应用程序的完整类型安全

🚀 快速开始

开发命令

# 安装依赖
pnpm install

# 开发服务器（热重载）
pnpm dev

# 生产构建
pnpm build

# 类型检查
pnpm type-check

# 代码检查和修复
pnpm lint

# 代码格式化
pnpm format

# 运行单元测试
pnpm test:unit

系统要求

Node.js ^20.19.0 或 >=22.12.0
pnpm（必需的包管理器）

🏗️ 架构设计

技术栈

Vue 3：Composition API 和 TypeScript
Vite：构建工具和开发环境
Element Plus：UI组件库
Pinia：状态管理
Tailwind CSS：样式框架
JSPlumb：可视化工作流连接
Axios：API请求与自定义拦截器

核心组件

状态管理

中央存储管理智能体定义、任务工作流和协调状态

请求层

自定义Axios包装器，具有代理配置和集成通知

可视化工作流

JSPlumb集成，用于拖放智能体协调流程

图标系统

基于SVG的图标，用于不同的智能体专业化和角色

📁 项目结构

src/
├── assets/           # 静态资源，包括智能体图标
├── components/       # 可复用的Vue组件
├── layout/          # 应用布局和主要组件
├── stores/          # Pinia状态管理
├── utils/           # 工具函数和请求层
├── views/           # 页面组件
└── App.vue          # 根组件

🎯 开发指南

IDE设置

VS Code + Vue (Official)（禁用Vetur）。

浏览器开发工具

基于Chromium的浏览器：
- Vue.js devtools
- 在DevTools中启用自定义对象格式化程序
Firefox：
- Vue.js devtools
- 在DevTools中启用自定义对象格式化程序

🚀 部署

应用程序支持Docker部署，使用多阶段构建过程：Node.js用于构建，Caddy作为Web服务器。

📄 许可证

MIT许可证 - 详见LICENSE文件

2.8 KiB Raw Blame History Unescape Escape