代码提交

2026-06-08 22:52:18 +08:00
1 parent b101ee7fc9
commit 1938c80061
@@ -0,0 +1,79 @@
+# 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 项目
+
+```ts
+import { ParallelAgentsPanel } from "parallel-agents-vue";
+import "parallel-agents-vue/style.css";
+```
+
+```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 preflight**，不会污染宿主全局样式。