# 智能体控制台 (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）