修改前端架构到Electron ,增加llm_api页面，增加chat SSE渲染，修改若安按钮，卡片名称修改等小功能，增加agent-core,增加SQlite,增加llm UDS Pipe websocke
This commit is contained in:
mark
+114
-96
@@ -1,8 +1,8 @@
|
||||
# 智能体控制台 (agent-console)
|
||||
|
||||
一个类 Trae Work 的智能体控制台前端，基于 **Vue 3 + Vite + TypeScript**。
|
||||
采用三栏布局：左侧功能设置区 + 对话管理、中间对话面板、右侧文件预览。
|
||||
主题配色取自参考 APP 的浅色/深色方案。
|
||||
一个类 Trae Work 的智能体控制台，基于 **Electron + Vue 3 + TypeScript**。
|
||||
采用 electron-vite 三层架构（main / preload / renderer）。
|
||||
综合智能体引擎 **agent-core** 独立于本项目，运行时通过 UDS/pipe + WebSocket 与前端通信。
|
||||
|
||||
---
|
||||
|
||||
@@ -12,131 +12,149 @@
|
||||
# 安装依赖（首次运行）
|
||||
npm install
|
||||
|
||||
# 启动开发服务器
|
||||
# 启动开发模式（Electron 窗口 + 热更新）
|
||||
npm run dev
|
||||
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 预览生产构建
|
||||
# 预览构建结果
|
||||
npm run preview
|
||||
```
|
||||
|
||||
开发服务器默认地址：**http://localhost:5174/**
|
||||
|
||||
---
|
||||
|
||||
## 目录结构与文件说明
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
agent-console/
|
||||
├── node_modules/ # npm 依赖包（约 61MB，由 npm install 自动生成，无需手动维护）
|
||||
├── 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/
|
||||
│ ├── components/ # Vue 组件目录
|
||||
│ │ ├── Sidebar.vue # 左侧栏：功能设置区 + 对话管理列表 + 主题切换
|
||||
│ │ ├── ChatPanel.vue # 中间栏：消息列表 + 工具调用卡片 + 输入框
|
||||
│ │ └── FilePreview.vue # 右侧栏：文件内容预览（点击工具调用"预览文件"打开）
|
||||
│ ├── composables/ # 组合式函数
|
||||
│ │ └── useTheme.ts # 主题状态管理（light/dark，持久化到 localStorage）
|
||||
│ ├── styles/ # 全局样式
|
||||
│ │ └── theme.css # 浅色/深色主题 CSS 变量 + 基础重置样式
|
||||
│ ├── App.vue # 根组件：三栏布局 + 对话/预览联动
|
||||
│ ├── main.ts # 应用入口：挂载 Vue 实例
|
||||
│ ├── env.d.ts # TypeScript 环境声明（vue 文件类型、vite 客户端类型）
|
||||
│ ├── mock.ts # 模拟数据：功能开关、会话列表、工具调用示例
|
||||
│ └── types.ts # 全局类型定义：ToolCall / ChatMessage / Conversation / AgentSetting
|
||||
├── index.html # Vite 入口 HTML（挂载 #app）
|
||||
├── package.json # 项目元信息 + 依赖 + npm scripts
|
||||
├── package-lock.json # 依赖版本锁定文件（保证可复现安装）
|
||||
├── tsconfig.json # TypeScript 编译配置
|
||||
└── vite.config.ts # Vite 构建配置（Vue 插件 + 端口 5174）
|
||||
│ ├── 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 # 右：文件预览（可拖拽宽度）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 各文件详细作用
|
||||
|
||||
### 根目录配置文件
|
||||
|
||||
| 文件 | 作用 |
|
||||
|------|------|
|
||||
| `package.json` | 定义项目名称、版本、脚本命令（dev/build/preview）、运行时依赖（vue）和开发依赖（vite、@vitejs/plugin-vue、typescript、vue-tsc） |
|
||||
| `package-lock.json` | 锁定所有依赖的精确版本号，确保团队安装结果一致。由 `npm install` 自动生成 |
|
||||
| `vite.config.ts` | Vite 配置：启用 Vue 插件，开发服务器端口设为 `5174`，开启 host 以便局域网访问 |
|
||||
| `tsconfig.json` | TypeScript 配置：目标 ES2020、bundler 模块解析、严格模式、包含 `src/**/*.ts` 和 `src/**/*.vue` |
|
||||
| `index.html` | 单页应用入口 HTML，包含 `<div id="app">` 挂载点，通过 `<script type="module" src="/src/main.ts">` 加载 |
|
||||
|
||||
### `src/` 源码目录
|
||||
|
||||
| 文件 | 作用 |
|
||||
|------|------|
|
||||
| `main.ts` | 应用入口：创建 Vue 应用实例、引入全局主题样式、挂载到 `#app` |
|
||||
| `App.vue` | 根组件：三栏 flex 布局；管理当前选中会话、右侧预览显隐；接收子组件事件联动 |
|
||||
| `types.ts` | 集中定义 TypeScript 接口：`ToolCall`（工具调用）、`ChatMessage`（消息）、`Conversation`（会话）、`AgentSetting`（功能设置项） |
|
||||
| `mock.ts` | 提供模拟数据：5 条功能开关设置、5 个示例会话（每个含用户消息 + 智能体回复 + 工具调用）。后续对接后端时替换此文件即可 |
|
||||
| `env.d.ts` | 声明 `.vue` 模块类型，使 TypeScript 能正确识别 Vue 单文件组件；引入 `vite/client` 类型 |
|
||||
|
||||
### `src/components/` 组件目录
|
||||
|
||||
| 文件 | 作用 |
|
||||
|------|------|
|
||||
| `Sidebar.vue` | 左侧栏（固定 260px 宽）。包含：品牌区（含 🌙/☀️ 主题切换按钮）、功能设置区（5 个开关）、对话管理列表（含新建按钮、会话标题/模型/时间展示、当前选中高亮） |
|
||||
| `ChatPanel.vue` | 中间对话面板（flex 自适应）。包含：顶部会话信息 + 运行按钮、消息列表（用户消息右对齐蓝色气泡、智能体消息左对齐含角色标签）、工具调用卡片（名称、状态徽章 done/running/error、参数、预览文件按钮）、底部输入框（Enter 发送） |
|
||||
| `FilePreview.vue` | 右侧文件预览框（固定 320px 宽）。包含：文件头（文件名 + 关闭按钮）、代码块内容区（可滚动）。由 `App.vue` 通过 `v-if` 控制显隐 |
|
||||
|
||||
### `src/composables/` 组合式函数目录
|
||||
|
||||
| 文件 | 作用 |
|
||||
|------|------|
|
||||
| `useTheme.ts` | 主题状态管理：从 `localStorage` 读取主题、提供 `toggle()` 切换方法、通过 `watchEffect` 自动写入 `data-theme` 属性和 `localStorage`。返回 `theme` 响应式对象 |
|
||||
|
||||
### `src/styles/` 样式目录
|
||||
|
||||
| 文件 | 作用 |
|
||||
|------|------|
|
||||
| `theme.css` | 全局主题系统。定义 `:root` 主色/语义色变量；`[data-theme='light']` 浅色主题变量、`[data-theme='dark']` 深色主题变量；全局样式重置（box-sizing、字体、滚动条、按钮/输入框基础样式）。配色取自参考 APP 的 `theme.json` 与 `uni.scss` |
|
||||
> **agent-core** 综合智能体引擎为独立项目，位于 `../agent-core/`，
|
||||
> 拥有单独运行时（操作 CLI），通过 UDS/pipe + WebSocket 与本前端通信。
|
||||
|
||||
---
|
||||
|
||||
## node_modules 说明
|
||||
## 三层架构说明
|
||||
|
||||
- **位置**：`d:\dndClaw\agent-console\node_modules\`
|
||||
- **作用**：存放 `npm install` 下载的所有依赖包（包括 `vue`、`vite`、`@vitejs/plugin-vue`、`typescript` 等及其传递依赖）
|
||||
- **响应来源**：由 `package.json` 中声明的依赖项决定，执行 `npm install` 时从 npm 仓库下载并写入此目录
|
||||
- **维护方式**：**不要手动编辑**。新增/删除依赖通过 `npm install <包名>` 或 `npm uninstall <包名>` 操作；此目录通常不纳入版本控制（应在 `.gitignore` 中排除）
|
||||
| 层 | 目录 | 职责 |
|
||||
|----|------|------|
|
||||
| **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 与工具调用 |
|
||||
|
||||
---
|
||||
|
||||
## 主题配色
|
||||
|
||||
取自参考 APP（`D:\Danaodai_APP\APP_5.0`）的 `theme.json` 与 `uni.scss`：
|
||||
|
||||
| 变量 | 浅色 | 深色 | 用途 |
|
||||
|------|------|------|------|
|
||||
| `--primary` | `#007AFF` | `#007AFF` | 主色（按钮、选中态、链接） |
|
||||
| `--success` | `#4CD964` | `#4CD964` | 成功状态 |
|
||||
| `--warning` | `#F0AD4E` | `#F0AD4E` | 警告/执行中 |
|
||||
| `--danger` | `#DD524D` | `#DD524D` | 错误/失败 |
|
||||
| `--primary` | `#007AFF` | `#007AFF` | 主色 |
|
||||
| `--bg-app` | `#EFEFF4` | `#1F1F1F` | 应用背景 |
|
||||
| `--bg-panel` | `#FFFFFF` | `#252526` | 面板背景 |
|
||||
| `--bg-sidebar` | `#F8F8F8` | `#1A1A1A` | 侧栏背景 |
|
||||
| `--text-primary` | `#1A1A1A` | `#EAEAEA` | 主文字 |
|
||||
| `--text-muted` | `#999` | `#8A8A8A` | 辅助文字 |
|
||||
| `--border` | `#E1E1E6` | `#333` | 边框 |
|
||||
| `--border` | `#E1E1E6` | `#333333` | 边框 |
|
||||
|
||||
---
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **Vue 3.5** — 组合式 API + `<script setup>`
|
||||
- **Vite 6** — 开发服务器 + 构建
|
||||
- **TypeScript 5.6** — 类型安全
|
||||
- **纯 CSS 变量** — 主题切换（无额外 UI 框架依赖）
|
||||
|
||||
## 后续可扩展方向
|
||||
|
||||
1. 对接真实后端 API（替换 `mock.ts`）
|
||||
2. 左/右栏宽度可拖拽调整
|
||||
3. 智能体回复流式输出（打字机效果）
|
||||
4. 右侧预览支持多文件 Tab
|
||||
5. 工具调用状态实时更新（pending → running → done）
|
||||
- **Electron** 33 — 桌面应用框架
|
||||
- **electron-vite** 2 — 构建工具
|
||||
- **Vue 3** + **TypeScript** — 前端框架
|
||||
- **marked** — Markdown 渲染
|
||||
- **agent-core** — 自研智能体引擎
|
||||
|
||||
Reference in New Issue
Block a user