# 智能体控制台 (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** — 自研智能体引擎