mark
161 lines
5.2 KiB
Markdown
161 lines
5.2 KiB
Markdown
# 智能体控制台 (agent-console)
|
||
|
||
一个类 Trae Work 的智能体控制台，基于 **Electron + Vue 3 + TypeScript**。
|
||
采用 electron-vite 三层架构（main / preload / renderer）。
|
||
综合智能体引擎 **agent-core** 独立于本项目，运行时通过 UDS/pipe + WebSocket 与前端通信。
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 安装依赖（首次运行）
|
||
npm install
|
||
|
||
# 启动开发模式（Electron 窗口 + 热更新）
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览构建结果
|
||
npm run preview
|
||
```
|
||
|
||
---
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
agent-console/
|
||
├── electron.vite.config.ts # electron-vite 配置（main/preload/renderer 三层）
|
||
├── package.json # 根依赖与脚本
|
||
├── tsconfig.json # TS 配置入口（引用 node + web）
|
||
├── tsconfig.node.json # 主进程/预加载 TS 配置
|
||
├── tsconfig.web.json # 渲染进程 TS 配置
|
||
│
|
||
├── src/
|
||
│ ├── main/ # Electron 主进程
|
||
│ │ └── index.ts # 创建窗口、IPC 注册
|
||
│ │
|
||
│ ├── preload/ # 预加载脚本（安全桥接）
|
||
│ │ └── index.ts # contextBridge 暴露 electronAPI
|
||
│ │
|
||
│ └── renderer/ # 渲染进程（Vue 前端）
|
||
│ ├── index.html
|
||
│ ├── main.ts # Vue 入口
|
||
│ ├── App.vue # 三栏主布局
|
||
│ ├── types.ts # 类型定义
|
||
│ ├── mock.ts # 模拟数据
|
||
│ ├── env.d.ts
|
||
│ ├── styles/theme.css # 浅/深主题 CSS 变量
|
||
│ ├── composables/
|
||
│ │ └── useTheme.ts # 主题状态
|
||
│ └── components/
|
||
│ ├── Sidebar.vue # 左：功能设置 + 对话管理
|
||
│ ├── ChatPanel.vue # 中：对话面板（SSE 流式）
|
||
│ ├── SettingsPanel.vue# 设置页（API 配置/工作流）
|
||
│ └── FilePreview.vue # 右：文件预览（可拖拽宽度）
|
||
```
|
||
|
||
> **agent-core** 综合智能体引擎为独立项目，位于 `../agent-core/`，
|
||
> 拥有单独运行时（操作 CLI），通过 UDS/pipe + WebSocket 与本前端通信。
|
||
|
||
---
|
||
|
||
## 三层架构说明
|
||
|
||
| 层 | 目录 | 职责 |
|
||
|----|------|------|
|
||
| **Main** | `src/main/` | Electron 主进程，创建窗口、管理生命周期、IPC 主端 |
|
||
| **Preload** | `src/preload/` | 预加载脚本，通过 contextBridge 安全暴露 API 给渲染进程 |
|
||
| **Renderer** | `src/renderer/` | Vue 3 前端，用户界面 |
|
||
|
||
### IPC 通信
|
||
|
||
渲染进程通过 `window.electronAPI` 调用主进程：
|
||
|
||
```ts
|
||
// preload/index.ts
|
||
contextBridge.exposeInMainWorld('electronAPI', {
|
||
ping: () => ipcRenderer.invoke('ping'),
|
||
getPaths: () => ipcRenderer.invoke('get-paths'),
|
||
getDbPath: () => ipcRenderer.invoke('get-db-path'),
|
||
callAgent: (input) => ipcRenderer.invoke('call-agent', input),
|
||
onAgentStream: (callback) => { ... }
|
||
})
|
||
```
|
||
|
||
### 用户数据目录（userData）
|
||
|
||
应用启动时自动创建以下目录结构：
|
||
|
||
```
|
||
<userData>/ # 项目内 .electron-userdata/
|
||
├── data/
|
||
│ ├── agent-console.db # SQLite 主数据库（WAL 模式）
|
||
│ ├── agent-console.db-wal # WAL 日志（自动创建）
|
||
│ └── agent-console.db-shm # 共享内存（自动创建）
|
||
├── workspaces/ # worktree 根目录
|
||
│ └── ws-{uuid}/ # 每个任务的工作区
|
||
├── backups/ # 数据库备份
|
||
└── logs/ # 运行日志
|
||
```
|
||
|
||
通过 `window.electronAPI.getPaths()` 获取所有路径，`getDbPath()` 获取数据库文件路径。
|
||
|
||
---
|
||
|
||
## agent-core 智能体引擎（独立项目）
|
||
|
||
位于 `d:\dndClaw\agent-core\`，与 agent-console 平级。
|
||
拥有独立运行时（操作 CLI），通过 **UDS/pipe + WebSocket** 与前端通信。
|
||
|
||
```ts
|
||
// agent-core/src/index.ts
|
||
import { createAgent } from './index'
|
||
|
||
const agent = createAgent({
|
||
provider: 'qianfan_v2',
|
||
baseUrl: 'https://qianfan.baidubce.com/v2/chat/completions',
|
||
authorization: 'Bearer xxx',
|
||
model: 'deepseek-v3.2',
|
||
temperature: 0.934
|
||
})
|
||
|
||
await agent.chat('你好', {
|
||
onToken: (token) => console.log(token),
|
||
onDone: (content) => console.log('完成:', content)
|
||
})
|
||
```
|
||
|
||
### 核心模块
|
||
|
||
| 模块 | 说明 |
|
||
|------|------|
|
||
| `llm/provider` | LLM 流式调用，支持文心千帆 v2 / OpenAI 兼容 |
|
||
| `tools/registry` | 工具注册中心，支持动态注册/执行 |
|
||
| `workflow/engine` | 工作流引擎，协调 LLM 与工具调用 |
|
||
|
||
---
|
||
|
||
## 主题配色
|
||
|
||
| 变量 | 浅色 | 深色 | 用途 |
|
||
|------|------|------|------|
|
||
| `--primary` | `#007AFF` | `#007AFF` | 主色 |
|
||
| `--bg-app` | `#EFEFF4` | `#1F1F1F` | 应用背景 |
|
||
| `--bg-panel` | `#FFFFFF` | `#252526` | 面板背景 |
|
||
| `--text-primary` | `#1A1A1A` | `#EAEAEA` | 主文字 |
|
||
| `--border` | `#E1E1E6` | `#333333` | 边框 |
|
||
|
||
---
|
||
|
||
## 技术栈
|
||
|
||
- **Electron** 33 — 桌面应用框架
|
||
- **electron-vite** 2 — 构建工具
|
||
- **Vue 3** + **TypeScript** — 前端框架
|
||
- **marked** — Markdown 渲染
|
||
- **agent-core** — 自研智能体引擎
|