mark
143 lines
7.0 KiB
Markdown
143 lines
7.0 KiB
Markdown
# 智能体控制台 (agent-console)
|
||
|
||
一个类 Trae Work 的智能体控制台前端，基于 **Vue 3 + Vite + TypeScript**。
|
||
采用三栏布局：左侧功能设置区 + 对话管理、中间对话面板、右侧文件预览。
|
||
主题配色取自参考 APP 的浅色/深色方案。
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 安装依赖（首次运行）
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览生产构建
|
||
npm run preview
|
||
```
|
||
|
||
开发服务器默认地址：**http://localhost:5174/**
|
||
|
||
---
|
||
|
||
## 目录结构与文件说明
|
||
|
||
```
|
||
agent-console/
|
||
├── node_modules/ # npm 依赖包（约 61MB，由 npm install 自动生成，无需手动维护）
|
||
├── 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）
|
||
```
|
||
|
||
---
|
||
|
||
## 各文件详细作用
|
||
|
||
### 根目录配置文件
|
||
|
||
| 文件 | 作用 |
|
||
|------|------|
|
||
| `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` |
|
||
|
||
---
|
||
|
||
## 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` 中排除）
|
||
|
||
---
|
||
|
||
## 主题配色
|
||
|
||
取自参考 APP（`D:\Danaodai_APP\APP_5.0`）的 `theme.json` 与 `uni.scss`：
|
||
|
||
| 变量 | 浅色 | 深色 | 用途 |
|
||
|------|------|------|------|
|
||
| `--primary` | `#007AFF` | `#007AFF` | 主色（按钮、选中态、链接） |
|
||
| `--success` | `#4CD964` | `#4CD964` | 成功状态 |
|
||
| `--warning` | `#F0AD4E` | `#F0AD4E` | 警告/执行中 |
|
||
| `--danger` | `#DD524D` | `#DD524D` | 错误/失败 |
|
||
| `--bg-app` | `#EFEFF4` | `#1F1F1F` | 应用背景 |
|
||
| `--bg-panel` | `#FFFFFF` | `#252526` | 面板背景 |
|
||
| `--bg-sidebar` | `#F8F8F8` | `#1A1A1A` | 侧栏背景 |
|
||
| `--text-primary` | `#1A1A1A` | `#EAEAEA` | 主文字 |
|
||
| `--text-muted` | `#999` | `#8A8A8A` | 辅助文字 |
|
||
| `--border` | `#E1E1E6` | `#333` | 边框 |
|
||
|
||
---
|
||
|
||
## 技术栈
|
||
|
||
- **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）
|