Hermes Agent 控制台

基于 React + TypeScript + Vite 的 WebUI，用于管理 Hermes Agent 框架。提供模型选择、会话管理、插件配置和实时监控功能。

技术栈

框架	Vue 3 + Vuetify 3
语言	TypeScript
构建工具	Vite
状态管理	Pinia
路由	Vue Router
HTTP	Axios
API	WebSocket + REST

控制台架构

┌─────────────────────────────────────────────────────────────┐ │ Hermes Agent Dashboard │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────────────────────┐│ │ │ Vue 3 Application ││ │ ├─────────────────────────────────────────────────────────┤│ │ │ Layout System │ View Pages │ Store (Pinia) ││ │ │ ───────────────────────────────────────────────────── ││ │ │ FullLayout │ Settings │ sessionStore ││ │ │ FloatingLayout │ Provider │ configStore ││ │ │ BlankLayout │ Platform │ modelStore ││ │ │ │ Extension │ pluginStore ││ │ │ │ Persona │ ... ││ │ └─────────────────────────────────────────────────────────┘│ ├─────────────────────────────────────────────────────────────┤ │ dashboard/src/ Components │ ├─────────────────────────────────────────────────────────────┤ │ components/ │ layouts/ │ views/ │ │ ───────────── │ ─────────── │ ──────── │ │ ChatInput.vue │ full/ │ Settings.vue │ │ MessageList.vue │ VerticalSidebar │ ProviderPage.vue │ │ ModelPicker.vue │ VerticalHeader │ PlatformPage.vue │ │ ConfigForm.vue │ FloatingLayout │ SessionManage... │ │ ProxySelector.vue │ BlankLayout │ ExtensionPage.vue │ │ SidebarCustomizer │ │ ... │ └─────────────────────────────────────────────────────────────┘

控制台页面

完整导航至所有7个主要模块及其子页面：

设置供应商平台扩展人格会话知识库

模型选择器

选择并配置 LLM 提供商。可在 OpenAI、Anthropic、Gemini、MiniMax、GLM、Ollama 和自定义端点之间切换。

ProviderPage.vue ModelPicker.vue modelStore

会话管理

查看、搜索和管理对话会话。支持 SQLite FTS5 全文搜索、会话历史记录和轨迹压缩。

SessionManagementPage.vue sessionStore ConversationPage.vue

配置界面

综合性设置面板，包含主题定制、代理配置、API 密钥管理和系统控制。

Settings.vue ConfigForm.vue configStore

扩展系统

浏览和管理插件。查看已安装的扩展、浏览插件市场并配置扩展偏好设置。

ExtensionPage.vue InstalledPluginsTab.vue MarketPluginsTab.vue

平台集成

配置多平台消息网关：Telegram、Discord、飞书、QQ 和自定义 Webhook。

PlatformPage.vue gateway/adapters/

人格管理

创建和组织 AI 人格，支持文件夹组织结构和拖拽排序界面。

PersonaPage.vue PersonaManager.vue FolderTree.vue

dashboard/src/ 组件

控制台 UI 由位于 dashboard/src/ 的可复用 Vue 组件构建：

layouts/

页面布局包装器，为控制台提供一致的结构。

FullLayout.vue VerticalSidebar.vue VerticalHeader.vue FloatingLayout.vue BlankLayout.vue

views/

页面级组件，代表每个控制台路由和功能。

Settings.vue ProviderPage.vue PlatformPage.vue SessionManagementPage.vue ExtensionPage.vue PersonaPage.vue StatsPage.vue TracePage.vue

components/ (共享)

跨多个视图和页面共享的可复用 UI 组件。

ModelPicker.vue ProxySelector.vue SidebarCustomizer.vue StorageCleanupPanel.vue

stores/ (Pinia)

用于应用程序中响应式数据的状态管理存储。

sessionStore configStore modelStore pluginStore

控制台路由

// router/index.ts - Route Configuration const routes = [ { path: '/', name: 'home', component: WelcomePage }, { path: '/settings', name: 'settings', component: Settings }, { path: '/provider', name: 'provider', component: ProviderPage }, { path: '/platform', name: 'platform', component: PlatformPage }, { path: '/extension', name: 'extension', component: ExtensionPage }, { path: '/persona', name: 'persona', component: PersonaPage }, { path: '/session', name: 'session', component: SessionManagementPage }, { path: '/conversation', name: 'conversation', component: ConversationPage }, { path: '/chat', name: 'chat', component: ChatPage }, { path: '/stats', name: 'stats', component: StatsPage }, { path: '/trace', name: 'trace', component: TracePage }, { path: '/cronjob', name: 'cronjob', component: CronJobPage }, { path: '/alkaid/*', name: 'alkaid', component: AlkaidPage }, ]

运行控制台

# 安装依赖 cd dashboard pnpm install # 启动开发服务器 pnpm dev # 生产构建 pnpm build # 预览生产构建 pnpm preview

控制台默认运行在 http://localhost:3000，并连接到 Hermes Agent API 服务器 http://localhost:6185。