+
+[](https://react.dev/)
+[](https://www.typescriptlang.org/)
+[](https://vitejs.dev/)
+[](https://tailwindcss.com/)
+
+
+
+## 📖 项目简介
+
+MaiBot Dashboard 是 MaiBot 聊天机器人的 Web 管理界面，提供了直观的配置管理、实时监控、插件管理、资源管理等功能。通过自动解析后端配置类，动态生成表单，实现了配置的可视化编辑。
+
+
+ 
+
+
+### ✨ 核心特性
+
+- 🎨 **现代化 UI** - 基于 shadcn/ui 组件库，支持亮色/暗色主题切换
+- ⚡ **高性能** - 使用 Vite 7.2 构建，React 19 最新特性
+- 🔐 **安全认证** - Token 认证机制，支持自定义和自动生成 Token
+- 📝 **智能配置** - 自动解析 Python dataclass，生成配置表单
+- 🎯 **类型安全** - 完整的 TypeScript 类型定义
+- 🔄 **实时更新** - WebSocket 实时日志流、配置自动保存
+- 📱 **响应式设计** - 完美适配桌面和移动设备
+- 💬 **本地对话** - 直接在 WebUI 与麦麦对话，无需外部平台
+
+## 🎯 功能模块
+
+### 📊 仪表盘（首页）
+- **实时统计** - 总请求数、Token 消耗、费用统计、在线时长
+- **模型统计** - 各模型的使用次数、费用、平均响应时间
+- **趋势图表** - 每小时请求量、Token 消耗、费用趋势折线图
+- **模型分布** - 饼图展示模型使用占比
+- **最近活动** - 实时刷新的请求活动列表
+
+### 💬 本地聊天室
+- **WebSocket 实时通信** - 与麦麦直接对话
+- **消息历史** - 自动加载 SQLite 存储的历史消息
+- **连接状态** - 实时显示 WebSocket 连接状态
+- **自定义昵称** - 可自定义用户身份
+- **移动端适配** - 完整的响应式聊天界面
+
+### ⚙️ 配置管理
+
+#### 麦麦主程序配置
+- **分组展示** - 配置项按功能分组（基础设置、功能开关等）
+- **智能表单** - 根据配置类型自动生成对应控件
+- **自动保存** - 2秒防抖自动保存，无需手动操作
+- **一键重启** - 保存并重启麦麦，使配置生效
+
+#### AI 模型厂商配置
+- **提供商管理** - 添加、编辑、删除 API 提供商
+- **模板选择** - 预设常用厂商模板（OpenAI、DeepSeek、硅基流动等）
+- **连接测试** - ⚡ 测试提供商连接状态和 API Key 有效性
+- **批量操作** - 批量删除、批量测试所有提供商
+- **搜索过滤** - 按名称、URL、类型快速筛选
+
+#### 模型管理与分配
+- **模型列表** - 管理可用的模型配置
+- **使用状态** - 显示模型是否被任务使用
+- **任务分配** - 为不同功能分配模型（回复、工具调用、VLM 等）
+- **参数调整** - 温度、最大 Token 等参数配置
+- **新手引导** - 交互式引导教程
+
+#### 适配器配置
+- **NapCat 配置** - 管理 QQ 机器人适配器
+- **Docker 支持** - 支持容器模式配置
+- **配置导入导出** - 跨环境迁移配置
+
+### 📋 实时日志
+- **WebSocket 流式传输** - 实时接收后端日志
+- **虚拟滚动** - 高性能处理大量日志
+- **多级过滤** - 按日志级别（DEBUG/INFO/WARNING/ERROR）过滤
+- **模块过滤** - 按日志来源模块筛选
+- **时间范围** - 日期选择器筛选日志
+- **搜索高亮** - 关键字搜索并高亮显示
+- **字号调整** - 自定义日志显示字号和行间距
+- **日志导出** - 导出过滤后的日志
+
+### 🔌 插件管理
+- **插件市场** - 浏览和搜索可用插件
+- **分类筛选** - 按类别、状态筛选插件
+- **一键安装** - 自动处理依赖并安装插件
+- **版本兼容** - 检查插件与 MaiBot 版本兼容性
+- **进度显示** - WebSocket 实时显示安装进度
+- **插件统计** - 下载量、更新时间等信息
+- **卸载更新** - 管理已安装插件
+
+### 👤 人物关系管理
+- **人物列表** - 查看所有已知用户信息
+- **详情编辑** - 编辑用户昵称、备注等信息
+- **关系统计** - 查看消息数、互动频率等统计
+- **批量操作** - 批量删除用户记录
+
+### 📦 资源管理
+
+#### 表情包管理
+- **预览管理** - 图片/GIF 预览
+- **分类过滤** - 按注册状态、描述筛选
+- **编辑标签** - 修改表情包描述和属性
+- **批量禁用** - 启用/禁用表情包
+
+#### 表达方式管理
+- **表达列表** - 查看麦麦学习的表达方式
+- **来源追踪** - 记录表达来源群组和用户
+- **编辑创建** - 手动添加或编辑表达
+
+#### 知识图谱
+- **可视化展示** - ReactFlow 交互式图谱
+- **节点搜索** - 搜索实体和关系
+- **布局算法** - 自动布局优化
+- **详情查看** - 点击节点查看详细信息
+
+### ⚙️ 系统设置
+- **主题切换** - 亮色/暗色/跟随系统
+- **动画控制** - 开启/关闭界面动画
+- **Token 管理** - 查看、复制、重新生成认证 Token
+- **版本信息** - 查看前端和后端版本
+
+## 🏗️ 技术架构
+
+### 前端技术栈
+
+```
+React 19.2.0 # UI 框架
+├── TypeScript 5.9 # 类型系统
+├── Vite 7.2 # 构建工具
+├── TanStack Router # 路由管理
+├── TanStack Virtual # 虚拟滚动
+├── Jotai # 状态管理
+├── Tailwind CSS 3.4 # 样式框架
+├── ReactFlow # 知识图谱可视化
+├── Recharts # 数据图表
+└── shadcn/ui # 组件库
+ ├── Radix UI # 无障碍组件
+ └── lucide-react # 图标库
+```
+
+### 后端集成
+
+```
+FastAPI # Python 后端框架
+├── WebSocket # 实时日志、聊天
+├── config_schema.py # 配置架构生成器
+├── config_routes.py # 配置管理 API
+├── model_routes.py # 模型管理 API
+├── chat_routes.py # 本地聊天 API
+├── plugin_routes.py # 插件管理 API
+├── person_routes.py # 人物管理 API
+├── emoji_routes.py # 表情包管理 API
+├── expression_routes.py # 表达管理 API
+├── knowledge_routes.py # 知识图谱 API
+├── logs_routes.py # 日志 API
+└── tomlkit # TOML 文件处理
+```
+
+## 📁 项目结构
+
+```
+MaiBot-Dashboard/
+├── src/
+│ ├── components/ # 组件目录
+│ │ ├── ui/ # shadcn/ui 组件
+│ │ ├── layout.tsx # 布局组件（侧边栏+导航）
+│ │ ├── tour/ # 新手引导组件
+│ │ ├── plugin-stats.tsx # 插件统计组件
+│ │ ├── RestartingOverlay.tsx # 重启遮罩
+│ │ └── use-theme.tsx # 主题管理
+│ ├── routes/ # 路由页面
+│ │ ├── index.tsx # 仪表盘首页
+│ │ ├── auth.tsx # 登录页
+│ │ ├── chat.tsx # 本地聊天室
+│ │ ├── logs.tsx # 日志查看
+│ │ ├── plugins.tsx # 插件管理
+│ │ ├── person.tsx # 人物管理
+│ │ ├── settings.tsx # 系统设置
+│ │ ├── config/ # 配置管理页面
+│ │ │ ├── bot.tsx # 麦麦主程序配置
+│ │ │ ├── modelProvider.tsx # 模型提供商
+│ │ │ ├── model.tsx # 模型管理
+│ │ │ └── adapter.tsx # 适配器配置
+│ │ └── resource/ # 资源管理页面
+│ │ ├── emoji.tsx # 表情包管理
+│ │ ├── expression.tsx # 表达方式管理
+│ │ └── knowledge-graph.tsx # 知识图谱
+│ ├── lib/ # 工具库
+│ │ ├── config-api.ts # 配置 API 客户端
+│ │ ├── plugin-api.ts # 插件 API 客户端
+│ │ ├── person-api.ts # 人物 API 客户端
+│ │ ├── expression-api.ts # 表达 API 客户端
+│ │ ├── log-websocket.ts # 日志 WebSocket
+│ │ ├── fetch-with-auth.ts # 认证请求封装
+│ │ └── utils.ts # 通用工具函数
+│ ├── types/ # 类型定义
+│ │ ├── config-schema.ts # 配置架构类型
+│ │ ├── plugin.ts # 插件类型
+│ │ ├── person.ts # 人物类型
+│ │ └── expression.ts # 表达类型
+│ ├── hooks/ # React Hooks
+│ │ ├── use-auth.ts # 认证逻辑
+│ │ ├── use-animation.ts # 动画控制
+│ │ └── use-toast.ts # 消息提示
+│ ├── store/ # 全局状态
+│ │ └── auth.ts # 认证状态
+│ ├── router.tsx # 路由配置
+│ ├── main.tsx # 应用入口
+│ └── index.css # 全局样式
+├── public/ # 静态资源
+├── vite.config.ts # Vite 配置
+├── tailwind.config.js # Tailwind 配置
+├── tsconfig.json # TypeScript 配置
+└── package.json # 依赖管理
+```
+
+## 🚀 快速开始
+
+### 环境要求
+
+- Node.js >= 18.0.0
+- Bun >= 1.0.0 (推荐) 或 npm/yarn/pnpm
+
+### 安装依赖
+
+```bash
+# 使用 Bun（推荐）
+bun install
+
+# 或使用 npm
+npm install
+```
+
+### 开发模式
+
+```bash
+# 启动开发服务器 (默认端口: 7999)
+bun run dev
+
+# 或
+npm run dev
+```
+
+访问 http://localhost:7999 查看应用。
+
+### 生产构建
+
+```bash
+# 构建生产版本
+bun run build
+
+# 预览生产构建
+bun run preview
+```
+
+构建产物会输出到 `dist/` 目录，由 MaiBot 后端静态服务。
+
+### 代码格式化
+
+```bash
+# 格式化代码
+bun run format
+```
+
+## 🔧 开发配置
+
+### Vite 代理配置
+
+开发模式下，Vite 会将 API 请求代理到后端：
+
+```typescript
+// vite.config.ts
+proxy: {
+ '/api': {
+ target: 'http://127.0.0.1:8001',
+ changeOrigin: true,
+ ws: true, // WebSocket 支持
+ },
+},
+```
+
+### 环境变量
+
+开发环境默认使用 `http://localhost:7999`，生产环境使用相对路径。
+
+## 📸 界面预览
+
+### 仪表盘
+实时统计、模型使用分布、趋势图表
+
+### 本地聊天
+直接与麦麦对话，消息实时同步
+
+### 配置管理
+分组配置项，自动生成表单，自动保存
+
+### 模型提供商
+一键测试连接状态，模板快速添加
+
+### 日志查看
+实时日志流，多级过滤，虚拟滚动
+
+## 📦 依赖说明
+
+### 核心依赖
+
+| 包名 | 版本 | 用途 |
+|------|------|------|
+| react | ^19.2.0 | UI 框架 |
+| react-dom | ^19.2.0 | React DOM 渲染 |
+| typescript | ~5.9.3 | 类型系统 |
+| vite | ^7.2.2 | 构建工具 |
+| @tanstack/react-router | ^1.136.1 | 路由管理 |
+| @tanstack/react-virtual | ^3.x | 虚拟滚动 |
+| jotai | ^2.15.1 | 状态管理 |
+| axios | ^1.13.2 | HTTP 客户端 |
+| recharts | ^2.x | 数据图表 |
+| reactflow | ^11.x | 知识图谱可视化 |
+| dagre | ^0.8.x | 图布局算法 |
+
+### UI 组件库
+
+| 包名 | 版本 | 用途 |
+|------|------|------|
+| @radix-ui/react-* | ^1.x | 无障碍组件基础 |
+| lucide-react | ^0.553.0 | 图标库 |
+| tailwindcss | ^3.4 | CSS 框架 |
+| class-variance-authority | ^0.7.1 | 类名管理 |
+| tailwind-merge | ^3.4.0 | Tailwind 类合并 |
+| date-fns | ^3.x | 日期处理 |
+
+
+## 🤝 贡献指南
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 开启 Pull Request
+
+### 代码规范
+
+- 使用 TypeScript 严格模式
+- 遵循 ESLint 规则
+- 使用 Prettier 格式化代码
+- 组件使用函数式编写
+- 优先使用 Hooks
+- 响应式设计优先（移动端适配）
+
+## 📄 开源协议
+
+本项目基于 GPLv3 协议开源，详见 [LICENSE](./LICENSE) 文件。
+
+## 👥 作者
+
+**MotricSeven** - [GitHub](https://github.com/DrSmoothl)
+
+## 🙏 致谢
+
+- [React](https://react.dev/) - UI 框架
+- [shadcn/ui](https://ui.shadcn.com/) - 组件库
+- [Radix UI](https://www.radix-ui.com/) - 无障碍组件
+- [TanStack Router](https://tanstack.com/router) - 路由解决方案
+- [TanStack Virtual](https://tanstack.com/virtual) - 虚拟滚动
+- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
+- [ReactFlow](https://reactflow.dev/) - 流程图/知识图谱
+- [Recharts](https://recharts.org/) - React 图表库
+
+---
+
+
+
+Made with ❤️ by MotricSeven and Mai-with-u
+
diff --git a/dashboard/components.json b/dashboard/components.json
new file mode 100644
index 00000000..106236b1
--- /dev/null
+++ b/dashboard/components.json
@@ -0,0 +1,20 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.js",
+ "css": "src/index.css",
+ "baseColor": "slate",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "src/components",
+ "utils": "src/lib/utils",
+ "ui": "src/components/ui",
+ "lib": "src/lib",
+ "hooks": "src/hooks"
+ }
+}
diff --git a/dashboard/docs/main.png b/dashboard/docs/main.png
new file mode 100644
index 00000000..5a0feed3
Binary files /dev/null and b/dashboard/docs/main.png differ
diff --git a/dashboard/eslint.config.js b/dashboard/eslint.config.js
new file mode 100644
index 00000000..61baa885
--- /dev/null
+++ b/dashboard/eslint.config.js
@@ -0,0 +1,35 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+ { ignores: ['dist'] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ // 将所有 React Hooks 推荐规则降级为警告
+ ...Object.keys(reactHooks.configs.recommended.rules).reduce((acc, key) => {
+ acc[key] = 'warn'
+ return acc
+ }, {}),
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ // 关闭或降级其他规则
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unused-vars': 'warn',
+ },
+ },
+)
diff --git a/dashboard/index.html b/dashboard/index.html
new file mode 100644
index 00000000..98489824
--- /dev/null
+++ b/dashboard/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default CodeEditor
diff --git a/dashboard/src/components/ListFieldEditor.tsx b/dashboard/src/components/ListFieldEditor.tsx
new file mode 100644
index 00000000..ac3373f9
--- /dev/null
+++ b/dashboard/src/components/ListFieldEditor.tsx
@@ -0,0 +1,525 @@
+/**
+ * ListFieldEditor - 动态数组字段编辑器
+ *
+ * 支持功能：
+ * - 字符串数组 (string[])
+ * - 数字数组 (number[])
+ * - 对象数组 (object[]) - 根据 item_fields 定义渲染
+ * - 拖拽排序
+ * - 动态增删项
+ */
+
+import { useState, useCallback, useMemo } from 'react'
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card } from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Slider } from '@/components/ui/slider'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+import { GripVertical, Plus, Trash2, AlertCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+// ============ 类型定义 ============
+
+export interface ItemFieldDefinition {
+ /** 字段类型: "string" | "number" | "boolean" | "select" */
+ type: string
+ label?: string
+ placeholder?: string
+ default?: unknown
+ /** select 类型的选项 */
+ choices?: unknown[]
+ /** slider 类型的最小值 */
+ min?: number
+ /** slider 类型的最大值 */
+ max?: number
+ /** slider 类型的步进 */
+ step?: number
+}
+
+export interface ListFieldEditorProps {
+ /** 当前值 */
+ value: unknown[] | unknown
+ /** 值变化回调 */
+ onChange: (value: unknown[]) => void
+ /** 数组元素类型: "string" | "number" | "object" */
+ itemType?: string
+ /** 当 itemType="object" 时的字段定义 */
+ itemFields?: Record
+ {/* 拖拽手柄 */}
+
+
+ {/* 内容区域 */}
+
+ )
+}
+
+// ============ 对象项编辑器 ============
+
+interface ObjectItemEditorProps {
+ value: Record
+ {itemType === 'object' && itemFields ? (
+ }
+ onChange={onChange}
+ fields={itemFields}
+ disabled={disabled}
+ />
+ ) : itemType === 'number' ? (
+ onChange(parseFloat(e.target.value) || 0)}
+ placeholder={placeholder ?? `第 ${index + 1} 项`}
+ disabled={disabled}
+ className="font-mono"
+ />
+ ) : (
+ onChange(e.target.value)}
+ placeholder={placeholder ?? `第 ${index + 1} 项`}
+ disabled={disabled}
+ />
+ )}
+
+
+ {/* 删除按钮 */}
+
+
+
+ handleFieldChange(fieldName, checked)}
+ disabled={disabled}
+ />
+
+ )
+ }
+
+ // slider (number with min/max)
+ if (fieldDef.type === 'slider' || (fieldDef.type === 'number' && fieldDef.min != null && fieldDef.max != null)) {
+ const numValue = (fieldValue as number) ?? (fieldDef.default as number) ?? fieldDef.min ?? 0
+ return (
+
+ handleFieldChange(fieldName, v[0])}
+ min={fieldDef.min ?? 0}
+ max={fieldDef.max ?? 100}
+ step={fieldDef.step ?? 1}
+ disabled={disabled}
+ className="py-1"
+ />
+
+ )
+ }
+
+ // select
+ if (fieldDef.type === 'select' && fieldDef.choices) {
+ return (
+
+
+ {numValue}
+
+
+
+
+
+ )
+ }
+
+ // number
+ if (fieldDef.type === 'number') {
+ return (
+
+
+
+ handleFieldChange(fieldName, parseFloat(e.target.value) || 0)
+ }
+ placeholder={fieldDef.placeholder}
+ disabled={disabled}
+ className="h-8 text-sm"
+ />
+
+ )
+ }
+
+ // string (default)
+ return (
+
+
+ handleFieldChange(fieldName, e.target.value)}
+ placeholder={fieldDef.placeholder}
+ disabled={disabled}
+ className="h-8 text-sm"
+ />
+
+ )
+ }
+
+ return (
+
+ {renderField(fieldName, fieldDef)}
+
+ ))}
+
+ {/* 列表项 */}
+ {items.length === 0 ? (
+
+
+
+
+ )}
+
+ {/* 添加按钮 */}
+
+
+ {/* 限制提示 */}
+ {(minItems != null || maxItems != null) && (minItems !== null || maxItems !== null) && (
+
+ )
+}
+
+export default ListFieldEditor
diff --git a/dashboard/src/components/RestartingOverlay.legacy.tsx b/dashboard/src/components/RestartingOverlay.legacy.tsx
new file mode 100644
index 00000000..aa368f1b
--- /dev/null
+++ b/dashboard/src/components/RestartingOverlay.legacy.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react'
+import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react'
+import { Progress } from '@/components/ui/progress'
+
+/**
+ * @deprecated 请使用新的 RestartOverlay 组件
+ * import { RestartOverlay } from '@/components/restart-overlay'
+ */
+interface RestartingOverlayProps {
+ onRestartComplete?: () => void
+ onRestartFailed?: () => void
+}
+
+/**
+ * @deprecated 请使用新的 RestartOverlay 组件
+ * import { RestartOverlay } from '@/components/restart-overlay'
+ */
+export function RestartingOverlay({ onRestartComplete, onRestartFailed }: RestartingOverlayProps) {
+ const [progress, setProgress] = useState(0)
+ const [status, setStatus] = useState<'restarting' | 'checking' | 'success' | 'failed'>('restarting')
+ const [elapsedTime, setElapsedTime] = useState(0)
+ const [checkAttempts, setCheckAttempts] = useState(0)
+
+ useEffect(() => {
+ // 进度条动画
+ const progressInterval = setInterval(() => {
+ setProgress((prev) => {
+ if (prev >= 90) return prev
+ return prev + 1
+ })
+ }, 200)
+
+ // 计时器
+ const timerInterval = setInterval(() => {
+ setElapsedTime((prev) => prev + 1)
+ }, 1000)
+
+ // 等待3秒后开始检查状态（给后端重启时间）
+ const initialDelay = setTimeout(() => {
+ setStatus('checking')
+ startHealthCheck()
+ }, 3000)
+
+ return () => {
+ clearInterval(progressInterval)
+ clearInterval(timerInterval)
+ clearTimeout(initialDelay)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ const startHealthCheck = () => {
+ const maxAttempts = 60 // 最多尝试60次（约2分钟）
+
+ const checkHealth = async () => {
+ try {
+ setCheckAttempts((prev) => prev + 1)
+
+ const response = await fetch('/api/webui/system/status', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ signal: AbortSignal.timeout(3000), // 3秒超时
+ })
+
+ if (response.ok) {
+ // 重启成功
+ setProgress(100)
+ setStatus('success')
+ setTimeout(() => {
+ onRestartComplete?.()
+ }, 1500)
+ } else {
+ throw new Error('Status check failed')
+ }
+ } catch {
+ // 继续尝试
+ if (checkAttempts < maxAttempts) {
+ setTimeout(checkHealth, 2000) // 2秒后重试
+ } else {
+ // 超过最大尝试次数
+ setStatus('failed')
+ onRestartFailed?.()
+ }
+ }
+ }
+
+ checkHealth()
+ }
+
+ const formatTime = (seconds: number) => {
+ const mins = Math.floor(seconds / 60)
+ const secs = seconds % 60
+ return `${mins}:${secs.toString().padStart(2, '0')}`
+ }
+
+ return (
+
+
+ ) : (
+
+ {items.map((item: unknown, index: number) => (
+ handleItemChange(index, newValue)}
+ onRemove={() => handleRemoveItem(index)}
+ disabled={disabled}
+ canRemove={canRemove}
+ placeholder={placeholder}
+ />
+ ))}
+
+ + {minItems != null && maxItems != null + ? `允许 ${minItems} - ${maxItems} 项` + : minItems != null + ? `至少 ${minItems} 项` + : `最多 ${maxItems} 项`} +
+ )} +
+
+ )
+}
diff --git a/dashboard/src/components/animation-provider.tsx b/dashboard/src/components/animation-provider.tsx
new file mode 100644
index 00000000..2a72ba1d
--- /dev/null
+++ b/dashboard/src/components/animation-provider.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import { AnimationContext } from '@/lib/animation-context'
+
+type AnimationProviderProps = {
+ children: ReactNode
+ defaultEnabled?: boolean
+ defaultWavesEnabled?: boolean
+ storageKey?: string
+ wavesStorageKey?: string
+}
+
+export function AnimationProvider({
+ children,
+ defaultEnabled = true,
+ defaultWavesEnabled = true,
+ storageKey = 'enable-animations',
+ wavesStorageKey = 'enable-waves-background',
+}: AnimationProviderProps) {
+ const [enableAnimations, setEnableAnimations] = useState
+ {/* 图标和状态 */}
+
+
+ {status === 'restarting' && (
+ <>
+
+
+ {/* 进度条 */}
+ {status !== 'failed' && (
+ 正在重启麦麦
++ 请稍候，麦麦正在重启中... +
+ + )} + + {status === 'checking' && ( + <> +检查服务状态
++ 等待服务恢复... (尝试 {checkAttempts}/60) +
+ + )} + + {status === 'success' && ( + <> +重启成功
++ 正在跳转到登录页面... +
+ + )} + + {status === 'failed' && ( + <> +重启超时
++ 服务未能在预期时间内恢复，请手动检查或刷新页面 +
+ + )} +
+
+
+ )}
+
+ {/* 提示信息 */}
+
+ {progress}%
+ 已用时: {formatTime(elapsedTime)}
+
+
+
+
+ {/* 失败时的操作按钮 */}
+ {status === 'failed' && (
+ + {status === 'restarting' && '🔄 配置已保存，正在重启主程序...'} + {status === 'checking' && '⏳ 正在等待服务恢复，请勿关闭页面...'} + {status === 'success' && '✅ 配置已生效，服务运行正常'} + {status === 'failed' && '⚠️ 如果长时间无响应，请尝试手动重启'} +
+
+
+
+
+ )}
+
+
+
+ )
+}
diff --git a/dashboard/src/components/emoji-thumbnail.tsx b/dashboard/src/components/emoji-thumbnail.tsx
new file mode 100644
index 00000000..c92cd91a
--- /dev/null
+++ b/dashboard/src/components/emoji-thumbnail.tsx
@@ -0,0 +1,123 @@
+/**
+ * 表情包缩略图组件
+ *
+ * 特性：
+ * - 自动处理 202 响应（缩略图生成中）
+ * - 显示 Skeleton 占位符
+ * - 自动重试加载
+ * - 加载失败显示占位图标
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ImageIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface EmojiThumbnailProps {
+ src: string
+ alt?: string
+ className?: string
+ /** 最大重试次数 */
+ maxRetries?: number
+ /** 重试间隔（毫秒） */
+ retryInterval?: number
+}
+
+type LoadingState = 'loading' | 'loaded' | 'generating' | 'error'
+
+export function EmojiThumbnail({
+ src,
+ alt = '表情包',
+ className,
+ maxRetries = 5,
+ retryInterval = 1500,
+}: EmojiThumbnailProps) {
+ const [state, setState] = useState
+
+ )
+ }
+
+ // 加载成功显示图片
+ return (
+
+ {/* 错误消息 */}
+
+
+ {error.name}: {error.message}
+
+
+
+ {/* 堆栈跟踪 */}
+ {stackFrames.length > 0 && (
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* 组件堆栈 */}
+ {errorInfo?.componentStack && (
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* 复制按钮 */}
+
+
+ )
+}
+
+// 错误回退 UI
+function ErrorFallback({
+ error,
+ errorInfo,
+}: {
+ error: Error
+ errorInfo: ErrorInfo | null
+}) {
+ const handleGoHome = () => {
+ window.location.href = '/'
+ }
+
+ const handleRefresh = () => {
+ window.location.reload()
+ }
+
+ return (
+
+ {stackFrames.map((frame, index) => (
+
+
+
+ ))}
+
+
+ {index + 1}.
+
+
+
+
+ {frame.functionName}
+
+ {frame.fileName && (
+
+
+ {frame.fileName}
+ {frame.lineNumber && (
+
+ :{frame.lineNumber}:{frame.columnNumber}
+
+ )}
+
+ )}
+
+ {errorInfo.componentStack}
+
+
+
+
+ 页面出现了问题
+
+ 应用程序遇到了意外错误。您可以尝试刷新页面或返回首页。
+
+
+
+
+
+
+
+ )
+}
+
+// 错误边界类组件
+export class ErrorBoundary extends Component
+
+
+
+
+
+
+ {/* 提示信息 */}
+ + 如果问题持续存在，请将错误信息复制并反馈给开发者 +
+
+
+ )
+}
diff --git a/dashboard/src/components/index.ts b/dashboard/src/components/index.ts
new file mode 100644
index 00000000..cc623fba
--- /dev/null
+++ b/dashboard/src/components/index.ts
@@ -0,0 +1,13 @@
+export { CodeEditor } from './CodeEditor'
+export type { Language } from './CodeEditor'
+
+// 重启遮罩层
+export { RestartOverlay } from './restart-overlay'
+// 兼容旧版本
+export { RestartingOverlay } from './RestartingOverlay.legacy'
+
+// 列表编辑器
+export { ListFieldEditor } from './ListFieldEditor'
+
+// Markdown 渲染器
+export { MarkdownRenderer } from './markdown-renderer'
diff --git a/dashboard/src/components/layout.tsx b/dashboard/src/components/layout.tsx
new file mode 100644
index 00000000..4a675b9f
--- /dev/null
+++ b/dashboard/src/components/layout.tsx
@@ -0,0 +1,409 @@
+import { Menu, Moon, Sun, ChevronLeft, Home, Settings, LogOut, FileText, Server, Boxes, Smile, MessageSquare, UserCircle, FileSearch, Package, BookOpen, Search, Sliders, Network, Hash, LayoutGrid, Database, Activity, PieChart } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Link, useMatchRoute } from '@tanstack/react-router'
+import { useTheme, toggleThemeWithTransition } from './use-theme'
+import { useAuthGuard } from '@/hooks/use-auth'
+import { logout } from '@/lib/fetch-with-auth'
+import { Button } from '@/components/ui/button'
+import { Kbd } from '@/components/ui/kbd'
+import { SearchDialog } from '@/components/search-dialog'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { HttpWarningBanner } from '@/components/http-warning-banner'
+import { BackToTop } from '@/components/back-to-top'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { formatVersion } from '@/lib/version'
+import type { ReactNode, ComponentType } from 'react'
+import type { LucideProps } from 'lucide-react'
+
+interface LayoutProps {
+ children: ReactNode
+}
+
+interface MenuItem {
+ icon: ComponentType
+
+
+
+
+
+
+
+
+ + 安全警告： + 您正在使用 HTTP 访问 MaiBot WebUI +
++ 如果这是公网服务器，您的数据（包括 Token、聊天记录等）可能在传输过程中被窃取。强烈建议使用 HTTPS 访问或仅在本地网络使用。 +
+
+
+ )
+ }
+
+ // 菜单项配置 - 分块结构
+ const menuSections: MenuSection[] = [
+ {
+ title: '概览',
+ items: [
+ { icon: Home, label: '首页', path: '/' },
+ ],
+ },
+ {
+ title: '麦麦配置编辑',
+ items: [
+ { icon: FileText, label: '麦麦主程序配置', path: '/config/bot' },
+ { icon: Server, label: 'AI模型厂商配置', path: '/config/modelProvider', tourId: 'sidebar-model-provider' },
+ { icon: Boxes, label: '模型管理与分配', path: '/config/model', tourId: 'sidebar-model-management' },
+ { icon: Sliders, label: '麦麦适配器配置', path: '/config/adapter' },
+ ],
+ },
+ {
+ title: '麦麦资源管理',
+ items: [
+ { icon: Smile, label: '表情包管理', path: '/resource/emoji' },
+ { icon: MessageSquare, label: '表达方式管理', path: '/resource/expression' },
+ { icon: Hash, label: '黑话管理', path: '/resource/jargon' },
+ { icon: UserCircle, label: '人物信息管理', path: '/resource/person' },
+ { icon: Network, label: '知识库图谱可视化', path: '/resource/knowledge-graph' },
+ { icon: Database, label: '麦麦知识库管理', path: '/resource/knowledge-base' },
+ ],
+ },
+ {
+ title: '扩展与监控',
+ items: [
+ { icon: Package, label: '插件市场', path: '/plugins' },
+ { icon: LayoutGrid, label: '配置模板市场', path: '/config/pack-market' },
+ { icon: Sliders, label: '插件配置', path: '/plugin-config' },
+ { icon: FileSearch, label: '日志查看器', path: '/logs' },
+ { icon: Activity, label: '计划器&回复器监控', path: '/planner-monitor' },
+ { icon: MessageSquare, label: '本地聊天室', path: '/chat' },
+ ],
+ },
+ {
+ title: '系统',
+ items: [
+ { icon: Settings, label: '系统设置', path: '/settings' },
+ ],
+ },
+ ]
+
+ // 获取实际应用的主题（处理 system 情况）
+ const getActualTheme = () => {
+ if (theme === 'system') {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+ return theme
+ }
+
+ const actualTheme = getActualTheme()
+
+ // 登出处理
+ const handleLogout = async () => {
+ await logout()
+ }
+
+ return (
+ 正在验证登录状态...
+
+ {/* Sidebar */}
+
+
+ {/* Mobile overlay */}
+ {mobileMenuOpen && (
+ (null)
+ const [loading, setLoading] = useState(true)
+ const [userRating, setUserRating] = useState(0)
+ const [userComment, setUserComment] = useState('')
+ const [isRatingDialogOpen, setIsRatingDialogOpen] = useState(false)
+ const { toast } = useToast()
+
+ // 加载统计数据
+ const loadStats = async () => {
+ setLoading(true)
+ const data = await getPluginStats(pluginId)
+ if (data) {
+ setStats(data)
+ }
+ setLoading(false)
+ }
+
+ useEffect(() => {
+ loadStats()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [pluginId])
+
+ // 处理点赞
+ const handleLike = async () => {
+ const result = await likePlugin(pluginId)
+
+ if (result.success) {
+ toast({ title: '已点赞', description: '感谢你的支持！' })
+ loadStats() // 重新加载统计数据
+ } else {
+ toast({
+ title: '点赞失败',
+ description: result.error || '未知错误',
+ variant: 'destructive',
+ })
+ }
+ }
+
+ // 处理点踩
+ const handleDislike = async () => {
+ const result = await dislikePlugin(pluginId)
+
+ if (result.success) {
+ toast({ title: '已反馈', description: '感谢你的反馈！' })
+ loadStats()
+ } else {
+ toast({
+ title: '操作失败',
+ description: result.error || '未知错误',
+ variant: 'destructive',
+ })
+ }
+ }
+
+ // 提交评分
+ const handleSubmitRating = async () => {
+ if (userRating === 0) {
+ toast({
+ title: '请选择评分',
+ description: '至少选择 1 颗星',
+ variant: 'destructive',
+ })
+ return
+ }
+
+ const result = await ratePlugin(pluginId, userRating, userComment || undefined)
+
+ if (result.success) {
+ toast({ title: '评分成功', description: '感谢你的评价！' })
+ setIsRatingDialogOpen(false)
+ setUserRating(0)
+ setUserComment('')
+ loadStats()
+ } else {
+ toast({
+ title: '评分失败',
+ description: result.error || '未知错误',
+ variant: 'destructive',
+ })
+ }
+ }
+
+ if (loading) {
+ return (
+
setMobileMenuOpen(false)}
+ />
+ )}
+
+ {/* Main content */}
+
+
+ )
+}
diff --git a/dashboard/src/components/markdown-renderer.tsx b/dashboard/src/components/markdown-renderer.tsx
new file mode 100644
index 00000000..429ea41f
--- /dev/null
+++ b/dashboard/src/components/markdown-renderer.tsx
@@ -0,0 +1,134 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import 'katex/dist/katex.min.css'
+import type { ComponentPropsWithoutRef } from 'react'
+
+interface MarkdownRendererProps {
+ content: string
+ className?: string
+}
+
+export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+ return (
+
+ {/* HTTP 安全警告横幅 */}
+
+
+
+ {/* Page content */}
+ {children}
+
+ {/* Back to Top Button */}
+
+
+ {/* 移动端菜单按钮 */}
+
+
+ {/* 桌面端侧边栏收起/展开按钮 */}
+
+
+
+
+ {/* 年度总结入口 */}
+
+
+
+
+ {/* 搜索框 */}
+
+
+ {/* 搜索对话框 */}
+
+
+ & { inline?: boolean }) {
+ return inline ? (
+
+ {children}
+
+ )
+ },
+ td({ children, ...props }) {
+ return (
+
+ {children}
+
+ )
+ },
+ // 自定义链接样式
+ a({ children, ...props }) {
+ return (
+
+ {children}
+
+ )
+ },
+ // 自定义引用块样式
+ blockquote({ children, ...props }) {
+ return (
+
+ }, + }} + > + {content} +
+
+ )
+}
diff --git a/dashboard/src/components/plugin-stats.tsx b/dashboard/src/components/plugin-stats.tsx
new file mode 100644
index 00000000..63bee1b8
--- /dev/null
+++ b/dashboard/src/components/plugin-stats.tsx
@@ -0,0 +1,302 @@
+/**
+ * 插件统计组件
+ * 显示点赞、点踩、评分和下载量
+ */
+
+import { useState, useEffect } from 'react'
+import { ThumbsUp, ThumbsDown, Star, Download } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog'
+import { Textarea } from '@/components/ui/textarea'
+import { useToast } from '@/hooks/use-toast'
+import {
+ getPluginStats,
+ likePlugin,
+ dislikePlugin,
+ ratePlugin,
+ type PluginStatsData,
+} from '@/lib/plugin-stats'
+
+interface PluginStatsProps {
+ pluginId: string
+ compact?: boolean // 紧凑模式（只显示数字）
+}
+
+export function PluginStats({ pluginId, compact = false }: PluginStatsProps) {
+ const [stats, setStats] = useState
+ {children}
+
+ ) : (
+
+ {children}
+
+ )
+ },
+ // 自定义表格样式
+ table({ children, ...props }) {
+ return (
+
+
+ {children}
+
+
+ )
+ },
+ th({ children, ...props }) {
+ return (
+ + {children} ++ ) + }, + // 自定义标题样式 + h1({ children, ...props }) { + return ( +
+ {children} +
+ ) + }, + h2({ children, ...props }) { + return ( ++ {children} +
+ ) + }, + h3({ children, ...props }) { + return ( ++ {children} +
+ ) + }, + h4({ children, ...props }) { + return ( ++ {children} +
+ ) + }, + // 自定义列表样式 + ul({ children, ...props }) { + return ( +-
+ {children}
+
-
+ {children}
+
+ {children} +
+ ) + }, + // 自定义分隔线样式 + hr({ ...props }) { + return+ }, + }} + > + {content} +
+
+ )
+ }
+
+ if (!stats) {
+ return null
+ }
+
+ // 紧凑模式
+ if (compact) {
+ return (
+
+
+
+
+
+
+ )
+ }
+
+ // 完整模式
+ return (
+
+
+
+
+
+
+
+ {/* 统计数字 */}
+
+
+
+ {/* 操作按钮 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+