deerflow-code/parallel-agents-vue

parallel-agents-vue

并行多智能体面板 —— Vue3 可嵌入组件。输入「任务名称 + 简介」，并行调用多个智能体 （智能体清单由宿主传入，运行期间后端固定禁止写文件），消息列表照搬 DeerFlow 圆桌 研讨第二步并行多席位的深色样式与完整结构（步骤条 / 并行双列 / 席位状态条），支持 保存聊天记录 + 回显与重新分析。

开发调试

pnpm install
pnpm dev        # http://localhost:5183 ，填后端 baseUrl / token / 智能体 id 即可联调

后端需要一个跑着的 DeerFlow 网关（默认 http://localhost:8001），它提供：

• POST /api/parallel-agents/run/stream —— 并行扇出，合并 SSE（事件带 agent_id）；
• /api/parallel-agent-tasks —— 任务保存 / 回显 CRUD。

构建为组件库

pnpm build:lib  # 产出 dist/parallel-agents-vue.{js,umd.cjs} + dist/parallel-agents-vue.css

嵌入其它 Vue 项目

两种方式（详见 docs/07-使用说明.md）：

A. 按包引入（已 build:lib）：

import { ParallelAgentsPanel } from "parallel-agents-vue";
import "parallel-agents-vue/style.css";

B. 直接拷源码（适合要改源码的人）：把整个 src/parallel-agents/ 文件夹拷进你的项目 src/ 下， 样式由其 index.ts 自动引入，无需 Tailwind / 任何 CSS 框架：

import { ParallelAgentsPanel } from "@/parallel-agents"; // 或 "./parallel-agents"

仅需 vue 与 markdown-it 两个运行依赖。

<!-- 放进你自己的抽屉 / 弹窗里，面板会自适应容器（h-full w-full）。
     接口地址走配置文件默认（src/config.ts），登录只需把用户名传进来（免密自动登录）。 -->
<YourDrawer v-model="open">
  <div style="height: 80vh">
    <ParallelAgentsPanel
      :username="currentUsername"
      :agents="[
        { agent_id: 'roundtable-intelligence', name: '情报收集' },
        { agent_id: 'roundtable-risk-review', name: '风险审查' },
      ]"
      @saved="onSaved"
    />
  </div>
</YourDrawer>

接口地址 & 登录

• 接口地址写在配置文件 src/config.ts 的 DEFAULT_BASE_URL（dev 可用 VITE_PA_BASE_URL 覆盖）； 也可用 :base-url prop 覆盖。
• 登录：把宿主侧的用户名通过 :username 传进来即可，组件会自动走 DeerFlow 的 **免密「用户名登录」**端点（POST /api/v1/auth/login/username，公共 + CSRF 豁免）换取 token 并缓存、自动续期（401 重登）。不需要宿主自己管 token。
  • 若你已有 token，也可直接传 :token / :get-token（优先级高于 username）。
  • 若后端开了口令门（auth_login.username_login.require_password=true），再传 :login-password。

Props

prop	类型	说明
agents	{agent_id,name,avatarType?}[]（必填）	要并行调用的智能体
username	string	免密自动登录用户名（推荐方式，宿主自己传）
baseUrl	string	后端地址；不传用 config.ts 默认
token	string	已有 Bearer token（与 username 二选一，优先）
getToken	() => string | Promise<string>	动态取 token
loginPassword	string	仅当后端开启口令门时需要
taskId	string	传入则挂载时自动加载并回显该已保存任务
model	string	可选模型名（不传用 config.ts 默认 / 后端回退）
dark	boolean（默认 true）	深色面板（自带成色，不依赖宿主主题）

事件

• @saved="(task) => ..." —— 保存成功（含新建/更新）后回传 SavedTask。
• @update:taskId="(id) => ..." —— 当前任务 id 变化（保存 / 加载历史时）。

样式作用域全部包在根类 .parallel-agents 下，不依赖 Tailwind（布局类是面板自带的作用域工具类子集）， 不会污染宿主全局样式。