控制台 UI

本文档详细介绍 MateClaw 前端控制台的全部页面、功能、数据流和开发相关内容。

技术栈

框架: Vue 3 + Composition API + TypeScript
状态管理: Pinia（领域驱动设计）
UI 组件库: Element Plus
样式: TailwindCSS 4 + CSS 变量
构建工具: Vite 6
路由: Vue Router（History 模式）
国际化: vue-i18n（zh-CN / en-US）
HTTP 客户端: Axios（REST）+ 原生 fetch（SSE 流式）
认证: JWT Token，请求拦截器自动注入，滑动窗口续期

整体布局

应用采用左侧导航栏 + 右侧主内容区的经典布局（MainLayout.vue）。

侧边栏

侧边栏分为四个导航分组：

分组	包含页面
聊天	聊天控制台
控制中心	渠道管理、会话管理、定时任务
Agent	工作台、技能市场、工具管理、MCP 服务器
设置	Agent 管理、安全中心、Token 用量、系统设置

侧边栏支持折叠/展开，折叠状态持久化到 localStorage。底部显示主题切换按钮（亮色/暗色/跟随系统）和当前用户信息。

认证守卫

所有页面（除 /login）通过路由守卫 beforeEach 检查 localStorage 中的 Token。未登录时自动跳转到登录页。开发环境可通过 VITE_SKIP_AUTH=true 跳过认证。

页面详解

路由: /login

用户认证入口。提供用户名/密码表单，支持密码显示/隐藏切换。

功能:

用户名 + 密码登录
登录成功后将 Token、用户名、角色存入 localStorage
自动跳转到聊天控制台

调用接口:

POST /api/v1/auth/login -- 提交登录凭证，返回 JWT Token

默认账号: admin / admin123

2. 聊天控制台（ChatConsole）

路由: /chat

MateClaw 的核心交互界面，用于与 Agent 进行对话。

布局:

左侧: 会话侧边栏（Agent 选择器 + 会话列表）
右侧: 主聊天区（消息列表 + 输入框）

功能:

Agent 选择器: 顶部下拉框切换当前对话的 Agent，每个 Agent 维护独立的会话列表
会话列表: 按日期分组显示（今天、昨天、最近 7 天、更早），每条会话显示标题、消息数和最后活跃时间。支持新建会话和删除会话
模型切换: 聊天区顶部可选择当前使用的模型（来自已配置的模型提供商）
消息气泡: 用户和助手消息分开展示，支持 Markdown 渲染和代码高亮
SSE 流式输出: 使用原生 fetch 建立 SSE 连接，实时逐字显示助手回复
流式状态栏: 在消息列表和输入框之间显示生成状态，包含工具调用次数和 Token 用量
工具调用可视化: 内联展示 Agent 调用工具的过程和结果
思考过程展示: 可展开/折叠的 ReAct 推理过程
ToolGuard 审批: 当工具触发安全审批时，在聊天界面内联显示批准/拒绝按钮
文件上传: 支持附件上传，附件预览和移除
停止生成: 流式响应过程中可中断生成
清空消息: 清空当前会话的所有消息
建议提示: 空会话时显示预设的对话建议

调用接口:

POST /api/v1/chat/stream -- SSE 流式对话（原生 fetch）
POST /api/v1/chat/upload -- 上传文件附件
POST /api/v1/chat/{conversationId}/stop -- 停止流式生成
POST /api/v1/chat/{conversationId}/approve -- 审批工具调用
GET /api/v1/chat/{conversationId}/pending-approvals -- 查询待审批项
GET /api/v1/conversations -- 获取会话列表
GET /api/v1/conversations/{id}/messages -- 获取会话消息历史
DELETE /api/v1/conversations/{id} -- 删除会话
DELETE /api/v1/conversations/{id}/messages -- 清空消息
GET /api/v1/agents -- 获取 Agent 列表
GET /api/v1/models/enabled -- 获取可用模型列表
GET /api/v1/models/active -- 获取当前活跃模型
PUT /api/v1/models/active -- 切换活跃模型

组件化拆分:

MessageList -- 消息列表组件，处理消息渲染、重新生成、思考过程切换
ChatInput -- 输入框组件，处理文本输入、文件选择、审批操作
StreamLoadingBar -- 流式加载状态栏

3. Agent 管理（Agents）

路由: /agents

Agent 的增删改查管理页面，以表格形式展示所有 Agent。

功能:

搜索过滤: 关键词搜索 + 类型筛选（全部/ReAct/Plan-Execute）
Agent 表格: 展示名称（含图标和描述）、类型、标签、启用状态、更新时间、操作按钮
创建 Agent: 弹窗表单，配置名称、描述、类型（ReAct / Plan-and-Execute）、图标、模型、系统提示词、标签等
编辑 Agent: 修改已有 Agent 的配置
启用/禁用: 行内开关切换 Agent 状态
删除: 支持删除不再需要的 Agent

调用接口:

GET /api/v1/agents -- 获取 Agent 列表
POST /api/v1/agents -- 创建 Agent
PUT /api/v1/agents/{id} -- 更新 Agent
DELETE /api/v1/agents/{id} -- 删除 Agent

4. Agent 工作台（AgentWorkspace）

路由: /workspace

每个 Agent 的文件工作空间，用于管理 Agent 的核心配置文件。

布局:

顶部: Agent 选择器
左侧: 文件列表面板
右侧: 文件编辑器面板

功能:

Agent 选择: 下拉框选择要管理的 Agent
文件浏览: 列出 Agent 工作空间中的所有文件，显示文件名、大小和启用状态
文件编辑: 选中文件后在右侧编辑器中显示内容，支持在线编辑和保存
文件启用/禁用: 通过开关控制文件是否被 Agent 加载（例如 PROFILE.md、MEMORY.md 等核心文件）
新建文件: 支持在工作空间中创建新文件
刷新: 重新加载文件列表

典型文件:

PROFILE.md -- Agent 的角色设定和行为指导
MEMORY.md -- Agent 的长期记忆
每日笔记和其他自定义文件

调用接口:

GET /api/v1/agents/{id}/workspace/files -- 列出工作空间文件
GET /api/v1/agents/{id}/workspace/files/{filename} -- 获取文件内容
PUT /api/v1/agents/{id}/workspace/files/{filename} -- 保存文件内容
DELETE /api/v1/agents/{id}/workspace/files/{filename} -- 删除文件
GET /api/v1/agents/{id}/workspace/prompt-files -- 获取提示词文件列表
PUT /api/v1/agents/{id}/workspace/prompt-files -- 设置提示词文件列表

5. 工具管理（Tools）

路由: /tools

管理 Agent 可用的工具，以表格形式展示。

功能:

工具表格: 展示工具名称、描述、Bean 名称、类型（builtin/mcp/custom）、启用状态
注册新工具: 创建自定义工具
编辑工具: 修改工具配置
启用/禁用: 行内开关切换工具可用性
删除: 移除自定义工具

工具类型:

builtin -- 内置工具（如 WebSearch、DateTime）
mcp -- 通过 MCP 协议接入的外部工具
custom -- 用户自定义工具

调用接口:

GET /api/v1/tools -- 获取工具列表
POST /api/v1/tools -- 注册新工具
PUT /api/v1/tools/{id} -- 更新工具配置
DELETE /api/v1/tools/{id} -- 删除工具
PUT /api/v1/tools/{id}/toggle?enabled={bool} -- 切换启用状态

6. MCP 服务器（McpServers）

路由: /mcp-servers

管理 MCP（Model Context Protocol）服务器连接。

功能:

服务器表格: 展示服务器名称、描述、传输方式、连接状态、工具数量、启用状态
传输方式: 支持不同的 MCP 传输协议
连接状态: 实时显示每个服务器的连接状态（已连接/已断开），连接失败时显示错误信息
添加服务器: 创建新的 MCP 服务器配置
测试连接: 单独测试某个服务器的连接是否正常
批量刷新: 一键刷新所有服务器的连接状态
启用/禁用: 切换服务器状态
编辑/删除: 修改或移除服务器配置

调用接口:

GET /api/v1/mcp/servers -- 获取服务器列表
POST /api/v1/mcp/servers -- 创建服务器
PUT /api/v1/mcp/servers/{id} -- 更新配置
DELETE /api/v1/mcp/servers/{id} -- 删除服务器
PUT /api/v1/mcp/servers/{id}/toggle?enabled={bool} -- 切换启用状态
POST /api/v1/mcp/servers/{id}/test -- 测试连接
POST /api/v1/mcp/servers/refresh -- 刷新全部

7. 技能市场（SkillMarket）

路由: /skills

管理 Agent 可加载的技能包，以卡片网格形式展示。

功能:

分类筛选: 按技能类型分类展示，每个分类标签显示数量
技能卡片: 显示名称、图标、类型徽章、版本号、描述、运行时状态
运行时状态: 显示技能是否已加载，以及安全扫描结果和依赖状态
安全扫描: 展示安全检查发现的问题摘要
依赖检查: 显示缺失的依赖项列表
创建技能: 注册新的技能包
启用/禁用: 切换技能的可用性
刷新运行时: 重新加载所有技能的运行时状态

调用接口:

GET /api/v1/skills -- 获取技能列表
POST /api/v1/skills -- 创建技能
PUT /api/v1/skills/{id} -- 更新技能
DELETE /api/v1/skills/{id} -- 删除技能
PUT /api/v1/skills/{id}/toggle?enabled={bool} -- 切换启用状态
GET /api/v1/skills/runtime/active -- 获取活跃技能
GET /api/v1/skills/runtime/status -- 获取运行时状态
POST /api/v1/skills/runtime/refresh -- 刷新运行时

8. 渠道管理（Channels）

路由: /channels

管理多渠道接入配置，以卡片网格形式展示。

功能:

渠道卡片: 每个渠道显示类型图标、名称、类型标识、描述、启用状态和连接状态
支持渠道: Web、钉钉（DingTalk）、飞书（Feishu）、企业微信（WeChat Work）、Telegram、Discord
连接指示器: 显示渠道的实时连接状态
添加渠道: 创建新的渠道配置（选择类型、填写 Webhook URL、Token 等）
编辑渠道: 修改渠道配置参数
启用/禁用: 切换渠道状态
删除渠道: 移除不再使用的渠道

调用接口:

GET /api/v1/channels -- 获取渠道列表
POST /api/v1/channels -- 创建渠道
PUT /api/v1/channels/{id} -- 更新渠道
DELETE /api/v1/channels/{id} -- 删除渠道
PUT /api/v1/channels/{id}/toggle?enabled={bool} -- 切换启用状态
GET /api/v1/channels/status -- 查询渠道连接状态
GET /api/v1/channels/webhook/weixin/qrcode -- 获取微信 iLink Bot 二维码
GET /api/v1/channels/webhook/weixin/qrcode/status -- 查询二维码扫码状态

9. 会话管理（Sessions）

路由: /sessions

浏览和管理所有对话会话，以表格形式展示。

功能:

搜索: 按关键词搜索会话
会话表格: 显示会话标题、ID、所属 Agent、消息数、状态（active/closed）、最后活跃时间
查看会话: 点击后跳转到聊天控制台查看该会话的详细消息
删除会话: 移除历史会话

调用接口:

GET /api/v1/conversations -- 获取会话列表
GET /api/v1/conversations/{id}/messages -- 获取会话消息
GET /api/v1/conversations/{id}/status -- 查询会话状态
DELETE /api/v1/conversations/{id} -- 删除会话

10. 定时任务（CronJobs）

路由: /cron-jobs

管理定时执行的自动化任务。

功能:

任务表格: 显示任务名称、关联 Agent、任务类型、Cron 表达式（含人类可读描述）、下次执行时间、上次执行时间、启用状态
创建任务: 配置定时任务的名称、关联 Agent、Cron 表达式、时区等参数
编辑任务: 修改已有任务的配置
立即执行: 手动触发任务执行（不等待 Cron 周期）
启用/禁用: 切换任务的调度状态
删除任务: 移除定时任务

调用接口:

GET /api/v1/cron-jobs -- 获取任务列表
POST /api/v1/cron-jobs -- 创建任务
PUT /api/v1/cron-jobs/{id} -- 更新任务
DELETE /api/v1/cron-jobs/{id} -- 删除任务
PUT /api/v1/cron-jobs/{id}/toggle?enabled={bool} -- 切换启用状态
POST /api/v1/cron-jobs/{id}/run -- 立即执行

11. Token 用量（TokenUsage）

路由: /token-usage

查看 Token 消耗统计数据。

功能:

日期范围筛选: 通过日期选择器限定统计时间段
汇总卡片: 显示总 Prompt Token 数、总 Completion Token 数、总助手消息数
按模型统计表格: 按模型提供商和模型名称分组，展示每个模型的 Prompt Token、Completion Token 和消息数

调用接口:

GET /api/v1/token-usage -- 获取用量统计（支持 startDate、endDate、modelName、providerId 参数过滤）

12. 系统设置（Settings）

设置模块采用子路由布局（Settings/Layout.vue），包含三个子页面。

12.1 模型设置（Settings/Models）

路由: /settings/models（设置的默认页面）

管理模型提供商和模型配置，以卡片网格形式展示。

功能:

提供商卡片: 显示名称、图标、ID、内置/自定义标识、活跃状态、Base URL、API Key、模型数量
配置状态: 展示提供商是否已配置（已配置/未配置）
添加自定义提供商: 创建 OpenAI 兼容的自定义模型提供商
管理模型: 查看提供商下的模型列表，添加或移除模型
提供商设置: 修改 Base URL 和 API Key
测试连接: 验证提供商的连接是否正常，显示延迟
模型发现: 自动发现提供商支持的模型列表
删除自定义提供商: 移除自定义添加的提供商

调用接口:

GET /api/v1/models -- 获取提供商列表
GET /api/v1/models/enabled -- 获取启用的模型
GET /api/v1/models/default -- 获取默认模型
POST /api/v1/models -- 创建模型配置
PUT /api/v1/models/{id} -- 更新模型配置
DELETE /api/v1/models/{id} -- 删除模型配置
POST /api/v1/models/{id}/default -- 设为默认模型
PUT /api/v1/models/{providerId}/config -- 更新提供商配置
POST /api/v1/models/custom-providers -- 创建自定义提供商
DELETE /api/v1/models/custom-providers/{providerId} -- 删除自定义提供商
POST /api/v1/models/{providerId}/models -- 添加模型到提供商
DELETE /api/v1/models/{providerId}/models/{modelId} -- 移除提供商的模型
GET /api/v1/models/active -- 获取当前活跃模型
PUT /api/v1/models/active -- 设置活跃模型
POST /api/v1/models/{providerId}/discover -- 模型发现
POST /api/v1/models/{providerId}/discover/apply -- 应用发现的模型
POST /api/v1/models/{providerId}/test-connection -- 测试连接
POST /api/v1/models/{providerId}/models/{modelId}/test -- 测试单个模型

12.2 系统设置（Settings/System）

路由: /settings/system

全局系统参数配置。

功能:

基础设置:

语言: 切换界面语言（简体中文/英文）
流式响应: 开启或关闭 SSE 流式输出
调试模式: 开启后显示额外的调试信息

搜索服务配置:

搜索开关: 启用或禁用 WebSearch 工具
搜索提供商: 选择搜索引擎（Serper Google / Tavily）
API Key: 配置搜索服务的 API 密钥

调用接口:

GET /api/v1/settings -- 获取系统设置
PUT /api/v1/settings -- 更新系统设置
GET /api/v1/settings/language -- 获取语言设置
PUT /api/v1/settings/language -- 更新语言设置

12.3 关于（Settings/About）

路由: /settings/about

展示 MateClaw 的版本信息和技术栈。

功能:

显示 MateClaw Logo、版本号和项目描述
技术栈列表: Spring Boot 3.3.x、Spring AI 1.1.x、Spring AI Alibaba 1.1.x、Vue 3.5.x、Vite 6.x、MyBatis Plus 3.5.x

13. 安全中心（Security）

安全模块采用子路由布局（Security/Layout.vue），包含三个子页面。

13.1 工具守卫（Security/ToolGuard）

路由: /security/tool-guard（安全中心的默认页面）

配置工具执行的安全审批规则。

功能:

全局配置:
- 启用/禁用工具守卫
- 守卫范围: 全部工具或仅选中的工具
- 指定受守卫的工具列表（标签输入）
- 指定禁止执行的工具列表（标签输入）
审批规则表格: 显示规则名称、严重级别、分类、决策（允许/需审批/阻止）、是否内置、启用状态
创建规则: 添加自定义的审批规则
编辑/删除规则: 修改或移除自定义规则
启用/禁用规则: 切换单条规则的生效状态

调用接口:

GET /api/v1/security/guard/config -- 获取守卫配置
PUT /api/v1/security/guard/config -- 更新守卫配置
GET /api/v1/security/guard/rules -- 获取自定义规则
GET /api/v1/security/guard/rules/builtin -- 获取内置规则
POST /api/v1/security/guard/rules -- 创建规则
PUT /api/v1/security/guard/rules/{id} -- 更新规则
PUT /api/v1/security/guard/rules/{id}/toggle?enabled={bool} -- 切换规则启用状态
DELETE /api/v1/security/guard/rules/{id} -- 删除规则

13.2 文件守卫（Security/FileGuard）

路由: /security/file-guard

配置文件访问控制策略。

功能:

启用/禁用: 全局开关控制文件守卫是否生效
敏感路径管理: 通过标签输入添加或移除受保护的文件路径

调用接口:

GET /api/v1/security/guard/config/file-guard -- 获取文件守卫配置
PUT /api/v1/security/guard/config/file-guard -- 更新文件守卫配置

13.3 审计日志（Security/AuditLogs）

路由: /security/audit-logs

查看工具执行的安全审计记录。

功能:

统计卡片: 显示总请求数、被阻止数、需审批数、已允许数
过滤器: 按工具名称和决策类型（ALLOW/NEEDS_APPROVAL/BLOCK）筛选
审计表格: 显示时间、工具名称、决策、严重级别、会话 ID
详情展开: 点击某条记录可查看匹配的规则详情和工具调用参数

调用接口:

GET /api/v1/security/audit/logs -- 获取审计日志（支持 toolName、decision 等参数过滤）
GET /api/v1/security/audit/stats -- 获取审计统计

Pinia 状态管理

MateClaw 采用领域驱动的 Pinia Store 设计。每个 Store 独占管理自己领域的状态，禁止从外部直接修改 Store 内部状态。

Store 列表

Store	文件	职责
`useAgentStore`	`stores/useAgentStore.ts`	Agent 列表、Agent CRUD
`useCronJobStore`	`stores/useCronJobStore.ts`	定时任务列表、任务 CRUD
`useThemeStore`	`stores/useThemeStore.ts`	主题模式切换（亮色/暗色/跟随系统）、持久化

注: 聊天状态通过 useChat composable 管理（位于 composables/chat/useChat.ts），而非全局 Store。这种设计使聊天状态与组件生命周期绑定，避免全局状态污染。

状态所有权原则

typescript

// 正确: 通过 Store 的 action 修改状态
agentStore.fetchAgents()
themeStore.setMode('dark')

// 错误: 直接修改 Store 状态
agentStore.agents = []  // 不要这样做

暗色模式

三种模式

MateClaw 的主题系统支持三种模式:

亮色模式（light）: 固定使用亮色主题
暗色模式（dark）: 固定使用暗色主题
跟随系统（system）: 根据操作系统的深色模式设置自动切换

主题切换按钮位于侧边栏底部。

实现原理

useThemeStore 管理主题状态，模式值持久化到 localStorage
切换时在 <html> 标签上添加/移除 dark class
TailwindCSS 4 通过 dark: 前缀实现暗色样式
Element Plus 通过 CSS 变量 --mc-* 切换主题色
跟随系统模式使用 matchMedia('(prefers-color-scheme: dark)') 监听系统变化

样式编写

vue

<template>
  <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <el-card class="border dark:border-gray-700">
      <p>自适应暗色模式的内容</p>
    </el-card>
  </div>
</template>

国际化（i18n）

支持语言

zh-CN: 简体中文（默认）
en-US: 英文

语言文件

src/i18n/
  index.ts        # i18n 实例配置
  zh-CN.ts        # 中文翻译
  en-US.ts        # 英文翻译

切换方式

在"设置 > 系统设置"页面切换语言，选择后立即生效并持久化到后端。前端同步更新 vue-i18n 的 locale。

在组件中使用

vue

<template>
  <h1>{{ $t('chat.title') }}</h1>
  <el-button>{{ $t('common.save') }}</el-button>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const title = computed(() => t('chat.title'))
</script>

API 通信层

Axios 实例

前端通过统一的 Axios 实例（src/api/index.ts）与后端通信:

typescript

const http = axios.create({
  baseURL: '/api/v1',
  timeout: 30000,
})

请求拦截器

自动从 localStorage 读取 JWT Token 并注入到 Authorization 头

响应拦截器

适配后端统一响应格式 R<T>: { code, msg, data }
滑动窗口 Token 续期: 后端在 Token 接近过期时通过响应头下发新 Token
401/403 自动处理: 清除本地 Token 并跳转登录页

SSE 流式通信

聊天的流式响应不使用 Axios，而是使用原生 fetch API 建立 SSE 连接:

typescript

fetch('/api/v1/chat/stream', {
  method: 'POST',
  headers: { Accept: 'text/event-stream', Authorization: `Bearer ${token}` },
  body: JSON.stringify(data),
})

这样做是因为 Axios 不支持 SSE 流式读取，需要使用 ReadableStream 逐块解析响应。

路由结构

/login                     -- 登录页
/                          -- 重定向到 /chat
/chat                      -- 聊天控制台
/channels                  -- 渠道管理
/sessions                  -- 会话管理
/cron-jobs                 -- 定时任务
/workspace                 -- Agent 工作台
/skills                    -- 技能市场
/tools                     -- 工具管理
/mcp-servers               -- MCP 服务器
/agents                    -- Agent 管理
/security                  -- 安全中心（重定向到 /security/tool-guard）
/security/tool-guard       -- 工具守卫
/security/file-guard       -- 文件守卫
/security/audit-logs       -- 审计日志
/token-usage               -- Token 用量
/settings                  -- 系统设置（重定向到 /settings/models）
/settings/models           -- 模型设置
/settings/system           -- 系统参数设置
/settings/about            -- 关于

未匹配的路径统一重定向到 /chat。

构建与开发

开发服务器

bash

cd mateclaw-ui
pnpm install
pnpm dev          # 启动开发服务器，端口 5173

开发环境下，Vite 将 /api 请求代理到 http://localhost:18088（后端开发服务器）。

生产构建

bash

pnpm build

构建流程:

vue-tsc 执行 TypeScript 类型检查
Vite 打包输出到 ../mateclaw-server/src/main/resources/static

构建产物直接嵌入 Spring Boot JAR，无需单独部署前端。

代码检查

bash

pnpm lint         # ESLint 自动修复

开发技巧

热更新: pnpm dev 支持 HMR，代码修改后界面即时更新
路径别名: @ 映射到 src/ 目录，在 vite.config.ts 和 tsconfig.json 中配置
组件库: 使用 Element Plus 组件，按需自动导入
样式优先级: 优先使用 TailwindCSS 工具类，复杂组件样式使用 <style scoped>
类型定义: 公共类型定义位于 src/types/ 目录
跳过认证: 开发时设置环境变量 VITE_SKIP_AUTH=true 可跳过登录

控制台 UI ​

技术栈 ​

整体布局 ​

侧边栏 ​

认证守卫 ​

页面详解 ​

1. 登录页（Login） ​

2. 聊天控制台（ChatConsole） ​

3. Agent 管理（Agents） ​

4. Agent 工作台（AgentWorkspace） ​

5. 工具管理（Tools） ​

6. MCP 服务器（McpServers） ​

7. 技能市场（SkillMarket） ​

8. 渠道管理（Channels） ​

9. 会话管理（Sessions） ​

10. 定时任务（CronJobs） ​

11. Token 用量（TokenUsage） ​

12. 系统设置（Settings） ​

12.1 模型设置（Settings/Models） ​

12.2 系统设置（Settings/System） ​

12.3 关于（Settings/About） ​

13. 安全中心（Security） ​

13.1 工具守卫（Security/ToolGuard） ​

13.2 文件守卫（Security/FileGuard） ​

13.3 审计日志（Security/AuditLogs） ​

Pinia 状态管理 ​

Store 列表 ​

状态所有权原则 ​

暗色模式 ​

三种模式 ​

实现原理 ​

样式编写 ​

国际化（i18n） ​

支持语言 ​

语言文件 ​

切换方式 ​

在组件中使用 ​

API 通信层 ​

Axios 实例 ​

请求拦截器 ​

响应拦截器 ​

SSE 流式通信 ​

路由结构 ​

构建与开发 ​

开发服务器 ​

生产构建 ​

代码检查 ​

开发技巧 ​

控制台 UI

技术栈

整体布局

侧边栏

认证守卫

页面详解

1. 登录页（Login）

2. 聊天控制台（ChatConsole）

3. Agent 管理（Agents）

4. Agent 工作台（AgentWorkspace）

5. 工具管理（Tools）

6. MCP 服务器（McpServers）

7. 技能市场（SkillMarket）

8. 渠道管理（Channels）

9. 会话管理（Sessions）

10. 定时任务（CronJobs）

11. Token 用量（TokenUsage）

12. 系统设置（Settings）

12.1 模型设置（Settings/Models）

12.2 系统设置（Settings/System）

12.3 关于（Settings/About）

13. 安全中心（Security）

13.1 工具守卫（Security/ToolGuard）

13.2 文件守卫（Security/FileGuard）

13.3 审计日志（Security/AuditLogs）

Pinia 状态管理

Store 列表

状态所有权原则

暗色模式

三种模式

实现原理

样式编写

国际化（i18n）

支持语言

语言文件

切换方式

在组件中使用

API 通信层

Axios 实例

请求拦截器

响应拦截器

SSE 流式通信

路由结构

构建与开发

开发服务器

生产构建

代码检查

开发技巧