# parallel-agents-vue

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

## 开发调试

```bash
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。

## 构建为组件库

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

## 嵌入其它 Vue 项目

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

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

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

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

```ts
import { ParallelAgentsPanel } from "@/parallel-agents"; // 或 "./parallel-agents"
```
> 仅需 `vue` 与 `markdown-it` 两个运行依赖。

```vue
<!-- 放进你自己的抽屉 / 弹窗里，面板会自适应容器（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**（布局类是面板自带的作用域工具类子集），
> 不会污染宿主全局样式。