一个类 Trae Work 的智能体控制台，基于 Electron + Vue 3 + TypeScript。采用 electron-vite 三层架构（main / preload / renderer）。综合智能体引擎 agent-core 独立于本项目，运行时通过 UDS/pipe + WebSocket 与前端通信。

快速开始

# 安装依赖（首次运行）
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 调用主进程：

// 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 与前端通信。

// 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 — 自研智能体引擎

README.md Unescape Escape

智能体控制台 (agent-console)