93 lines
4.6 KiB
Markdown
93 lines
4.6 KiB
Markdown
# 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**（布局类是面板自带的作用域工具类子集），
|
||
> 不会污染宿主全局样式。
|