智能体控制台 (agent-console)

一个类 Trae Work 的智能体控制台前端，基于 Vue 3 + Vite + TypeScript。采用三栏布局：左侧功能设置区 + 对话管理、中间对话面板、右侧文件预览。主题配色取自参考 APP 的浅色/深色方案。

快速开始

# 安装依赖（首次运行）
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 框架依赖）

后续可扩展方向

对接真实后端 API（替换 mock.ts）
左/右栏宽度可拖拽调整
智能体回复流式输出（打字机效果）
右侧预览支持多文件 Tab
工具调用状态实时更新（pending → running → done）

7.0 KiB Raw Blame History Unescape Escape