-
- )
- }
-
- // 菜单项配置 - 分块结构
- 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 pageBg = useBackground('page')
- const sidebarBg = useBackground('sidebar')
- const headerBg = useBackground('header')
-
- // 登出处理
- const handleLogout = async () => {
- await logout()
- }
-
- return (
- 正在验证登录状态...
-
- {/* Sidebar */}
-
-
- {/* Mobile overlay */}
- {mobileMenuOpen && (
-
+
+ )
+}
diff --git a/dashboard/src/components/layout/Layout.tsx b/dashboard/src/components/layout/Layout.tsx
new file mode 100644
index 00000000..0fcb28be
--- /dev/null
+++ b/dashboard/src/components/layout/Layout.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react'
+
+import { BackgroundLayer } from '@/components/background-layer'
+import { BackToTop } from '@/components/back-to-top'
+import { HttpWarningBanner } from '@/components/http-warning-banner'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { useTheme } from '@/components/use-theme'
+import { useAuthGuard } from '@/hooks/use-auth'
+import { useBackground } from '@/hooks/use-background'
+
+import { Header } from './Header'
+import { Sidebar } from './Sidebar'
+import type { LayoutProps } from './types'
+
+export function Layout({ children }: LayoutProps) {
+ const { checking } = useAuthGuard() // 检查认证状态
+
+ const [sidebarOpen, setSidebarOpen] = useState(true)
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [searchOpen, setSearchOpen] = useState(false)
+ const [tooltipsEnabled, setTooltipsEnabled] = useState(false) // 控制 tooltip 启用状态
+ const { theme, setTheme } = useTheme()
+
+ // 侧边栏状态变化时，延迟启用/禁用 tooltip
+ useEffect(() => {
+ if (sidebarOpen) {
+ // 侧边栏展开时，立即禁用 tooltip
+ setTooltipsEnabled(false)
+ } else {
+ // 侧边栏收起时，等待动画完成后再启用 tooltip
+ const timer = setTimeout(() => {
+ setTooltipsEnabled(true)
+ }, 350) // 稍大于 CSS transition duration (300ms)
+ return () => clearTimeout(timer)
+ }
+ }, [sidebarOpen])
+
+ // 搜索快捷键监听（Cmd/Ctrl + K）
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+ e.preventDefault()
+ setSearchOpen(true)
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+ return () => window.removeEventListener('keydown', handleKeyDown)
+ }, [])
+
+ // 认证检查中，显示加载状态
+ if (checking) {
+ return (
+
+
-
- setMobileMenuOpen(false)}
- />
- )}
-
- {/* Main content */}
-
-
- )
-}
diff --git a/dashboard/src/components/layout/Header.tsx b/dashboard/src/components/layout/Header.tsx
new file mode 100644
index 00000000..efacb33d
--- /dev/null
+++ b/dashboard/src/components/layout/Header.tsx
@@ -0,0 +1,134 @@
+import { BookOpen, ChevronLeft, LogOut, Menu, Moon, PieChart, Search, Sun } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+
+import { BackgroundLayer } from '@/components/background-layer'
+import { Button } from '@/components/ui/button'
+import { Kbd } from '@/components/ui/kbd'
+import { SearchDialog } from '@/components/search-dialog'
+import { cn } from '@/lib/utils'
+import { useBackground } from '@/hooks/use-background'
+import { logout } from '@/lib/fetch-with-auth'
+import { toggleThemeWithTransition } from '@/components/use-theme'
+
+interface HeaderProps {
+ sidebarOpen: boolean
+ mobileMenuOpen: boolean
+ searchOpen: boolean
+ actualTheme: 'light' | 'dark'
+ onSidebarToggle: () => void
+ onMobileMenuToggle: () => void
+ onSearchOpenChange: (open: boolean) => void
+ onThemeChange: (theme: 'light' | 'dark' | 'system') => void
+}
+
+export function Header({
+ sidebarOpen,
+
+ searchOpen,
+ actualTheme,
+ onSidebarToggle,
+ onMobileMenuToggle,
+ onSearchOpenChange,
+ onThemeChange,
+}: HeaderProps) {
+ const headerBg = useBackground('header')
+
+ const handleLogout = async () => {
+ await logout()
+ }
+
+ return (
+
- {/* HTTP 安全警告横幅 */}
-
-
-
- {/* Page content */}
-
-
-
- {/* Back to Top Button */}
-
-
- {/* 移动端菜单按钮 */}
-
-
- {/* 桌面端侧边栏收起/展开按钮 */}
-
-
-
-
- {/* 年度总结入口 */}
-
-
-
-
- {/* 搜索框 */}
-
-
- {/* 搜索对话框 */}
-
-
+ {/* 移动端菜单按钮 */}
+
+
+ {/* 桌面端侧边栏收起/展开按钮 */}
+
+
+
+
+ {/* 年度总结入口 */}
+
+
+
+
+ {/* 搜索框 */}
+
+
+ {/* 搜索对话框 */}
+
+
+
+ )
+ }
+
+ // 获取实际应用的主题（处理 system 情况）
+ const getActualTheme = () => {
+ if (theme === 'system') {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+ return theme
+ }
+
+ const actualTheme = getActualTheme()
+ const pageBg = useBackground('page')
+
+ return (
+ 正在验证登录状态...
+
+ {/* Sidebar */}
+ setMobileMenuOpen(false)}
+ />
+
+ {/* Mobile overlay */}
+ {mobileMenuOpen && (
+
+
+
+
+ {menuItemContent}
+
+
+ {tooltipsEnabled && (
+
+
+ )}
+
+
+ )
+}
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
new file mode 100644
index 00000000..3e5538ce
--- /dev/null
+++ b/dashboard/src/components/layout/Sidebar.tsx
@@ -0,0 +1,91 @@
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import { useBackground } from '@/hooks/use-background'
+import { BackgroundLayer } from '@/components/background-layer'
+
+import { LogoArea } from './LogoArea'
+import { NavItem } from './NavItem'
+import { menuSections } from './constants'
+
+interface SidebarProps {
+ sidebarOpen: boolean
+ mobileMenuOpen: boolean
+ tooltipsEnabled: boolean
+ onMobileMenuClose: () => void
+}
+
+export function Sidebar({
+ sidebarOpen,
+ mobileMenuOpen,
+ tooltipsEnabled,
+ onMobileMenuClose
+}: SidebarProps) {
+ const sidebarBg = useBackground('sidebar')
+
+ return (
+
+ )
+}
diff --git a/dashboard/src/components/layout/constants.ts b/dashboard/src/components/layout/constants.ts
new file mode 100644
index 00000000..09bf7cc6
--- /dev/null
+++ b/dashboard/src/components/layout/constants.ts
@@ -0,0 +1,49 @@
+import { Activity, Boxes, Database, FileSearch, FileText, Hash, Home, LayoutGrid, MessageSquare, Network, Package, Server, Settings, Sliders, Smile, UserCircle } from 'lucide-react'
+
+import type { MenuSection } from './types'
+
+export 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' },
+ ],
+ },
+]
diff --git a/dashboard/src/components/layout/index.ts b/dashboard/src/components/layout/index.ts
new file mode 100644
index 00000000..46b1bd8e
--- /dev/null
+++ b/dashboard/src/components/layout/index.ts
@@ -0,0 +1,2 @@
+export { Layout } from './Layout'
+export type { LayoutProps, MenuItem, MenuSection } from './types'
diff --git a/dashboard/src/components/layout/types.ts b/dashboard/src/components/layout/types.ts
new file mode 100644
index 00000000..0be17225
--- /dev/null
+++ b/dashboard/src/components/layout/types.ts
@@ -0,0 +1,18 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { LucideProps } from 'lucide-react'
+
+export interface LayoutProps {
+ children: ReactNode
+}
+
+export interface MenuItem {
+ icon: ComponentType
+ label: string
+ path: string
+ tourId?: string
+}
+
+export interface MenuSection {
+ title: string
+ items: MenuItem[]
+}
diff --git a/dashboard/src/components/theme-provider.tsx b/dashboard/src/components/theme-provider.tsx
index 79d65f02..2455a34e 100644
--- a/dashboard/src/components/theme-provider.tsx
+++ b/dashboard/src/components/theme-provider.tsx
@@ -90,8 +90,8 @@ export function ThemeProvider({
)
return (
-
+
{children}
-
+
)
}
diff --git a/dashboard/src/components/tour/tour-provider.tsx b/dashboard/src/components/tour/tour-provider.tsx
index 673b5148..0d6d7e0b 100644
--- a/dashboard/src/components/tour/tour-provider.tsx
+++ b/dashboard/src/components/tour/tour-provider.tsx
@@ -153,7 +153,7 @@ export function TourProvider({ children }: { children: ReactNode }) {
}, [])
return (
-
{children}
-
+
)
}
diff --git a/dashboard/src/components/ui/chart.tsx b/dashboard/src/components/ui/chart.tsx
index c8f5252f..a50431ac 100644
--- a/dashboard/src/components/ui/chart.tsx
+++ b/dashboard/src/components/ui/chart.tsx
@@ -45,7 +45,7 @@ const ChartContainer = React.forwardRef<
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
return (
-
+
-
+
)
})
ChartContainer.displayName = "Chart"
diff --git a/dashboard/src/components/ui/multi-select.tsx b/dashboard/src/components/ui/multi-select.tsx
index a6ab0b96..c6e379fc 100644
--- a/dashboard/src/components/ui/multi-select.tsx
+++ b/dashboard/src/components/ui/multi-select.tsx
@@ -79,7 +79,7 @@ function SortableBadge({
}
// 处理删除按钮点击，阻止事件冒泡和默认行为
- const handleRemoveClick = (e: React.MouseEvent) => {
+ const handleRemoveClick = (e: React.MouseEvent | React.KeyboardEvent) => {
e.preventDefault()
e.stopPropagation()
onRemove(value)
@@ -121,7 +121,7 @@ function SortableBadge({
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
- handleRemoveClick(e as any)
+ handleRemoveClick(e)
}
}}
>
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index e0968b47..1119cf0c 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -191,9 +191,8 @@
--chart-4: var(--color-chart-4);
--chart-5: var(--color-chart-5);
}
-}
-@layer base {
+
* {
@apply border-border;
}
diff --git a/dashboard/src/lib/api-helpers.ts b/dashboard/src/lib/api-helpers.ts
new file mode 100644
index 00000000..9ae17ab5
--- /dev/null
+++ b/dashboard/src/lib/api-helpers.ts
@@ -0,0 +1,55 @@
+/**
+ * API response parsing and error handling helpers
+ * Provides unified error handling across API modules
+ */
+
+import type { ApiResponse } from '@/types/api'
+
+/**
+ * Parse an HTTP response into a typed ApiResponse
+ * Handles JSON parsing, error extraction, and HTTP status codes
+ */
+export async function parseResponse(response: Response): Promise> {
+ if (response.ok) {
+ try {
+ const data = await response.json()
+ return { success: true, data }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response body',
+ }
+ }
+ }
+
+ try {
+ const errorData = await response.json()
+ const errorMessage =
+ errorData.error?.detail ??
+ errorData.error?.message ??
+ errorData.detail ??
+ errorData.message ??
+ response.statusText
+
+ return {
+ success: false,
+ error: String(errorMessage),
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || 'Unknown error',
+ }
+ }
+}
+
+/**
+ * Extract data from successful ApiResponse or throw error
+ * Simplifies error handling in async functions
+ */
+export function throwIfError(result: ApiResponse): T {
+ if (result.success) {
+ return result.data
+ }
+ throw new Error(result.error)
+}
\ No newline at end of file
diff --git a/dashboard/src/lib/config-api.ts b/dashboard/src/lib/config-api.ts
index 9f818f03..cfb51108 100644
--- a/dashboard/src/lib/config-api.ts
+++ b/dashboard/src/lib/config-api.ts
@@ -2,146 +2,96 @@
* 配置API客户端
*/
+import { parseResponse } from '@/lib/api-helpers'
import { fetchWithAuth } from '@/lib/fetch-with-auth'
-import type {
- ConfigSchema,
- ConfigSchemaResponse,
- ConfigDataResponse,
- ConfigUpdateResponse,
-} from '@/types/config-schema'
+import type { ApiResponse } from '@/types/api'
+import type { ConfigSchema } from '@/types/config-schema'
const API_BASE = '/api/webui/config'
/**
* 获取麦麦主程序配置架构
*/
-export async function getBotConfigSchema(): Promise {
+export async function getBotConfigSchema(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/schema/bot`)
- const data: ConfigSchemaResponse = await response.json()
-
- if (!data.success) {
- throw new Error('获取配置架构失败')
- }
-
- return data.schema
+ return parseResponse(response)
}
/**
* 获取模型配置架构
*/
-export async function getModelConfigSchema(): Promise {
+export async function getModelConfigSchema(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/schema/model`)
- const data: ConfigSchemaResponse = await response.json()
-
- if (!data.success) {
- throw new Error('获取模型配置架构失败')
- }
-
- return data.schema
+ return parseResponse(response)
}
/**
* 获取指定配置节的架构
*/
-export async function getConfigSectionSchema(sectionName: string): Promise {
+export async function getConfigSectionSchema(sectionName: string): Promise> {
const response = await fetchWithAuth(`${API_BASE}/schema/section/${sectionName}`)
- const data: ConfigSchemaResponse = await response.json()
-
- if (!data.success) {
- throw new Error(`获取配置节 ${sectionName} 架构失败`)
- }
-
- return data.schema
+ return parseResponse(response)
}
/**
* 获取麦麦主程序配置数据
*/
-export async function getBotConfig(): Promise> {
+export async function getBotConfig(): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/bot`)
- const data: ConfigDataResponse = await response.json()
-
- if (!data.success) {
- throw new Error('获取配置数据失败')
- }
-
- return data.config
+ return parseResponse>(response)
}
/**
* 获取模型配置数据
*/
-export async function getModelConfig(): Promise> {
+export async function getModelConfig(): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/model`)
- const data: ConfigDataResponse = await response.json()
-
- if (!data.success) {
- throw new Error('获取模型配置数据失败')
- }
-
- return data.config
+ return parseResponse>(response)
}
/**
* 更新麦麦主程序配置
*/
-export async function updateBotConfig(config: Record): Promise {
+export async function updateBotConfig(
+ config: Record
+): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/bot`, {
method: 'POST',
body: JSON.stringify(config),
})
-
- const data: ConfigUpdateResponse = await response.json()
-
- if (!data.success) {
- throw new Error(data.message || '保存配置失败')
- }
+ return parseResponse>(response)
}
/**
* 获取麦麦主程序配置的原始 TOML 内容
*/
-export async function getBotConfigRaw(): Promise {
+export async function getBotConfigRaw(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/bot/raw`)
- const data: { success: boolean; content: string } = await response.json()
-
- if (!data.success) {
- throw new Error('获取配置源代码失败')
- }
-
- return data.content
+ return parseResponse(response)
}
/**
* 更新麦麦主程序配置（原始 TOML 内容）
*/
-export async function updateBotConfigRaw(rawContent: string): Promise {
+export async function updateBotConfigRaw(rawContent: string): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/bot/raw`, {
method: 'POST',
body: JSON.stringify({ raw_content: rawContent }),
})
-
- const data: ConfigUpdateResponse = await response.json()
-
- if (!data.success) {
- throw new Error(data.message || '保存配置失败')
- }
+ return parseResponse>(response)
}
/**
* 更新模型配置
*/
-export async function updateModelConfig(config: Record): Promise {
+export async function updateModelConfig(
+ config: Record
+): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/model`, {
method: 'POST',
body: JSON.stringify(config),
})
-
- const data: ConfigUpdateResponse = await response.json()
-
- if (!data.success) {
- throw new Error(data.message || '保存配置失败')
- }
+ return parseResponse>(response)
}
/**
@@ -150,17 +100,12 @@ export async function updateModelConfig(config: Record): Promis
export async function updateBotConfigSection(
sectionName: string,
sectionData: unknown
-): Promise {
+): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/bot/section/${sectionName}`, {
method: 'POST',
body: JSON.stringify(sectionData),
})
-
- const data: ConfigUpdateResponse = await response.json()
-
- if (!data.success) {
- throw new Error(data.message || `保存配置节 ${sectionName} 失败`)
- }
+ return parseResponse>(response)
}
/**
@@ -169,17 +114,12 @@ export async function updateBotConfigSection(
export async function updateModelConfigSection(
sectionName: string,
sectionData: unknown
-): Promise {
+): Promise>> {
const response = await fetchWithAuth(`${API_BASE}/model/section/${sectionName}`, {
method: 'POST',
body: JSON.stringify(sectionData),
})
-
- const data: ConfigUpdateResponse = await response.json()
-
- if (!data.success) {
- throw new Error(data.message || `保存配置节 ${sectionName} 失败`)
- }
+ return parseResponse>(response)
}
/**
@@ -211,28 +151,14 @@ export async function fetchProviderModels(
providerName: string,
parser: 'openai' | 'gemini' = 'openai',
endpoint: string = '/models'
-): Promise {
+): Promise> {
const params = new URLSearchParams({
provider_name: providerName,
parser,
endpoint,
})
-
const response = await fetchWithAuth(`/api/webui/models/list?${params}`)
-
- // 处理非 2xx 响应
- if (!response.ok) {
- const errorData = await response.json().catch(() => ({}))
- throw new Error(errorData.detail || `获取模型列表失败 (${response.status})`)
- }
-
- const data: FetchModelsResponse = await response.json()
-
- if (!data.success) {
- throw new Error('获取模型列表失败')
- }
-
- return data.models
+ return parseResponse(response)
}
/**
@@ -250,20 +176,14 @@ export interface TestConnectionResult {
* 测试提供商连接状态（通过提供商名称）
* @param providerName 提供商名称
*/
-export async function testProviderConnection(providerName: string): Promise {
+export async function testProviderConnection(
+ providerName: string
+): Promise> {
const params = new URLSearchParams({
provider_name: providerName,
})
-
const response = await fetchWithAuth(`/api/webui/models/test-connection-by-name?${params}`, {
method: 'POST',
})
-
- // 处理非 2xx 响应
- if (!response.ok) {
- const errorData = await response.json().catch(() => ({}))
- throw new Error(errorData.detail || `测试连接失败 (${response.status})`)
- }
-
- return await response.json()
+ return parseResponse(response)
}
diff --git a/dashboard/src/lib/expression-api.ts b/dashboard/src/lib/expression-api.ts
index 01c25d9b..8937f598 100644
--- a/dashboard/src/lib/expression-api.ts
+++ b/dashboard/src/lib/expression-api.ts
@@ -12,28 +12,58 @@ import type {
ExpressionDeleteResponse,
ExpressionStatsResponse,
ChatListResponse,
+ ChatInfo,
ReviewStats,
ReviewListResponse,
BatchReviewItem,
BatchReviewResponse,
} from '@/types/expression'
+import type { ApiResponse } from '@/types/api'
const API_BASE = '/api/webui/expression'
/**
* 获取聊天列表
*/
-export async function getChatList(): Promise {
+export async function getChatList(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/chats`, {
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取聊天列表失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取聊天列表失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取聊天列表失败',
+ }
+ }
+ }
+
+ try {
+ const data: ChatListResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取聊天列表失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析聊天列表响应',
+ }
}
-
- return response.json()
}
/**
@@ -44,40 +74,96 @@ export async function getExpressionList(params: {
page_size?: number
search?: string
chat_id?: string
-}): Promise {
+}): Promise> {
const queryParams = new URLSearchParams()
-
+
if (params.page) queryParams.append('page', params.page.toString())
if (params.page_size) queryParams.append('page_size', params.page_size.toString())
if (params.search) queryParams.append('search', params.search)
if (params.chat_id) queryParams.append('chat_id', params.chat_id)
-
+
const response = await fetchWithAuth(`${API_BASE}/list?${queryParams}`, {
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取表达方式列表失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取表达方式列表失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取表达方式列表失败',
+ }
+ }
+ }
+
+ try {
+ const data: ExpressionListResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取表达方式列表失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析表达方式列表响应',
+ }
}
-
- return response.json()
}
/**
* 获取表达方式详细信息
*/
-export async function getExpressionDetail(expressionId: number): Promise {
+export async function getExpressionDetail(expressionId: number): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${expressionId}`, {
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取表达方式详情失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取表达方式详情失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取表达方式详情失败',
+ }
+ }
+ }
+
+ try {
+ const data: ExpressionDetailResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取表达方式详情失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析表达方式详情响应',
+ }
}
-
- return response.json()
}
/**
@@ -85,19 +171,47 @@ export async function getExpressionDetail(expressionId: number): Promise {
+): Promise> {
const response = await fetchWithAuth(`${API_BASE}/`, {
method: 'POST',
body: JSON.stringify(data),
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '创建表达方式失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '创建表达方式失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '创建表达方式失败',
+ }
+ }
+ }
+
+ try {
+ const responseData: ExpressionCreateResponse = await response.json()
+ if (responseData.success) {
+ return {
+ success: true,
+ data: responseData.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: responseData.message || '创建表达方式失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析创建表达方式响应',
+ }
}
-
- return response.json()
}
/**
@@ -106,70 +220,182 @@ export async function createExpression(
export async function updateExpression(
expressionId: number,
data: ExpressionUpdateRequest
-): Promise {
+): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${expressionId}`, {
method: 'PATCH',
body: JSON.stringify(data),
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '更新表达方式失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '更新表达方式失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '更新表达方式失败',
+ }
+ }
+ }
+
+ try {
+ const responseData: ExpressionUpdateResponse = await response.json()
+ if (responseData.success) {
+ return {
+ success: true,
+ data: responseData.data || {},
+ }
+ } else {
+ return {
+ success: false,
+ error: responseData.message || '更新表达方式失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析更新表达方式响应',
+ }
}
-
- return response.json()
}
/**
* 删除表达方式
*/
-export async function deleteExpression(expressionId: number): Promise {
+export async function deleteExpression(expressionId: number): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${expressionId}`, {
method: 'DELETE',
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '删除表达方式失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '删除表达方式失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '删除表达方式失败',
+ }
+ }
+ }
+
+ try {
+ const data: ExpressionDeleteResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: {},
+ }
+ } else {
+ return {
+ success: false,
+ error: data.message || '删除表达方式失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析删除表达方式响应',
+ }
}
-
- return response.json()
}
/**
* 批量删除表达方式
*/
-export async function batchDeleteExpressions(expressionIds: number[]): Promise {
+export async function batchDeleteExpressions(expressionIds: number[]): Promise> {
const response = await fetchWithAuth(`${API_BASE}/batch/delete`, {
method: 'POST',
body: JSON.stringify({ ids: expressionIds }),
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '批量删除表达方式失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '批量删除表达方式失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '批量删除表达方式失败',
+ }
+ }
+ }
+
+ try {
+ const data: ExpressionDeleteResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: {},
+ }
+ } else {
+ return {
+ success: false,
+ error: data.message || '批量删除表达方式失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析批量删除表达方式响应',
+ }
}
-
- return response.json()
}
/**
* 获取表达方式统计数据
*/
-export async function getExpressionStats(): Promise {
+export async function getExpressionStats(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/stats/summary`, {
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取统计数据失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取统计数据失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取统计数据失败',
+ }
+ }
+ }
+
+ try {
+ const data: ExpressionStatsResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取统计数据失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析统计数据响应',
+ }
}
-
- return response.json()
}
// ============ 审核相关 API ============
@@ -177,15 +403,36 @@ export async function getExpressionStats(): Promise {
/**
* 获取审核统计数据
*/
-export async function getReviewStats(): Promise {
+export async function getReviewStats(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/review/stats`)
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取审核统计失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取审核统计失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取审核统计失败',
+ }
+ }
+ }
+
+ try {
+ const data = await response.json() as ReviewStats
+ return {
+ success: true,
+ data: data,
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析审核统计响应',
+ }
}
-
- return response.json()
}
/**
@@ -197,23 +444,51 @@ export async function getReviewList(params: {
filter_type?: 'unchecked' | 'passed' | 'rejected' | 'all'
search?: string
chat_id?: string
-}): Promise {
+}): Promise> {
const queryParams = new URLSearchParams()
-
+
if (params.page) queryParams.append('page', params.page.toString())
if (params.page_size) queryParams.append('page_size', params.page_size.toString())
if (params.filter_type) queryParams.append('filter_type', params.filter_type)
if (params.search) queryParams.append('search', params.search)
if (params.chat_id) queryParams.append('chat_id', params.chat_id)
-
+
const response = await fetchWithAuth(`${API_BASE}/review/list?${queryParams}`)
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取审核列表失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取审核列表失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取审核列表失败',
+ }
+ }
+ }
+
+ try {
+ const data: ReviewListResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取审核列表失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析审核列表响应',
+ }
}
-
- return response.json()
}
/**
@@ -221,16 +496,44 @@ export async function getReviewList(params: {
*/
export async function batchReviewExpressions(
items: BatchReviewItem[]
-): Promise {
+): Promise> {
const response = await fetchWithAuth(`${API_BASE}/review/batch`, {
method: 'POST',
body: JSON.stringify({ items }),
})
-
+
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '批量审核失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '批量审核失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '批量审核失败',
+ }
+ }
+ }
+
+ try {
+ const data: BatchReviewResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '批量审核失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: '无法解析批量审核响应',
+ }
}
-
- return response.json()
}
diff --git a/dashboard/src/lib/log-websocket.ts b/dashboard/src/lib/log-websocket.ts
index 19d928cf..4ad69127 100644
--- a/dashboard/src/lib/log-websocket.ts
+++ b/dashboard/src/lib/log-websocket.ts
@@ -3,8 +3,9 @@
* 确保整个应用只有一个 WebSocket 连接
*/
-import { fetchWithAuth, checkAuthStatus } from './fetch-with-auth'
+import { checkAuthStatus } from './fetch-with-auth'
import { getSetting } from './settings-manager'
+import { createReconnectingWebSocket } from './ws-utils'
export interface LogEntry {
id: string
@@ -18,10 +19,7 @@ type LogCallback = (log: LogEntry) => void
type ConnectionCallback = (connected: boolean) => void
class LogWebSocketManager {
- private ws: WebSocket | null = null
- private reconnectTimeout: number | null = null
- private reconnectAttempts = 0
- private heartbeatInterval: number | null = null
+ private wsControl: ReturnType | null = null
// 订阅者
private logCallbacks: Set = new Set()
@@ -54,9 +52,9 @@ class LogWebSocketManager {
}
/**
- * 获取 WebSocket URL
+ * 获取 WebSocket URL（不含 token 参数）
*/
- private getWebSocketUrl(token?: string): string {
+ private getWebSocketUrl(): string {
let baseUrl: string
if (import.meta.env.DEV) {
// 开发模式：连接到 WebUI 后端服务器
@@ -67,49 +65,13 @@ class LogWebSocketManager {
const host = window.location.host
baseUrl = `${protocol}//${host}/ws/logs`
}
-
- // 如果有 token，添加到 URL 参数
- if (token) {
- return `${baseUrl}?token=${encodeURIComponent(token)}`
- }
return baseUrl
}
- /**
- * 获取 WebSocket 临时认证 token
- */
- private async getWsToken(): Promise {
- try {
- // 使用相对路径，让前端代理处理请求，避免 CORS 问题
- const response = await fetchWithAuth('/api/webui/ws-token', {
- method: 'GET',
- credentials: 'include', // 携带 Cookie
- })
-
- if (!response.ok) {
- console.error('获取 WebSocket token 失败:', response.status)
- return null
- }
-
- const data = await response.json()
- if (data.success && data.token) {
- return data.token
- }
- return null
- } catch (error) {
- console.error('获取 WebSocket token 失败:', error)
- return null
- }
- }
-
/**
* 连接 WebSocket（会先检查登录状态）
*/
async connect() {
- if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) {
- return
- }
-
// 检查是否在登录页面
if (window.location.pathname === '/auth') {
console.log('📡 在登录页面，跳过 WebSocket 连接')
@@ -123,114 +85,51 @@ class LogWebSocketManager {
return
}
- // 先获取临时认证 token
- const wsToken = await this.getWsToken()
- if (!wsToken) {
- console.log('📡 无法获取 WebSocket token，跳过连接')
- return
- }
-
- const wsUrl = this.getWebSocketUrl(wsToken)
+ const wsUrl = this.getWebSocketUrl()
- try {
- this.ws = new WebSocket(wsUrl)
-
- this.ws.onopen = () => {
- this.isConnected = true
- this.reconnectAttempts = 0
- this.notifyConnection(true)
- this.startHeartbeat()
- }
-
- this.ws.onmessage = (event) => {
+ // 使用 ws-utils 创建 WebSocket
+ this.wsControl = createReconnectingWebSocket(wsUrl, {
+ onMessage: (data: string) => {
try {
- // 忽略心跳响应
- if (event.data === 'pong') {
- return
- }
-
- const log: LogEntry = JSON.parse(event.data)
+ const log: LogEntry = JSON.parse(data)
this.notifyLog(log)
} catch (error) {
console.error('解析日志消息失败:', error)
}
- }
-
- this.ws.onerror = (error) => {
+ },
+ onOpen: () => {
+ this.isConnected = true
+ this.notifyConnection(true)
+ },
+ onClose: () => {
+ this.isConnected = false
+ this.notifyConnection(false)
+ },
+ onError: (error) => {
console.error('❌ WebSocket 错误:', error)
this.isConnected = false
this.notifyConnection(false)
- }
+ },
+ heartbeatInterval: 30000,
+ maxRetries: this.getMaxReconnectAttempts(),
+ backoffBase: this.getReconnectInterval(),
+ maxBackoff: 30000,
+ })
- this.ws.onclose = () => {
- this.isConnected = false
- this.notifyConnection(false)
- this.stopHeartbeat()
- this.attemptReconnect()
- }
- } catch (error) {
- console.error('创建 WebSocket 连接失败:', error)
- this.attemptReconnect()
- }
- }
-
- /**
- * 尝试重连
- */
- private attemptReconnect() {
- const maxAttempts = this.getMaxReconnectAttempts()
- if (this.reconnectAttempts >= maxAttempts) {
- return
- }
-
- this.reconnectAttempts += 1
- const baseInterval = this.getReconnectInterval()
- const delay = Math.min(baseInterval * this.reconnectAttempts, 30000)
-
- this.reconnectTimeout = window.setTimeout(() => {
- this.connect() // connect 是 async 但这里不需要 await，它内部会处理错误
- }, delay)
- }
-
- /**
- * 启动心跳
- */
- private startHeartbeat() {
- this.heartbeatInterval = window.setInterval(() => {
- if (this.ws?.readyState === WebSocket.OPEN) {
- this.ws.send('ping')
- }
- }, 30000) // 每30秒发送一次心跳
- }
-
- /**
- * 停止心跳
- */
- private stopHeartbeat() {
- if (this.heartbeatInterval !== null) {
- clearInterval(this.heartbeatInterval)
- this.heartbeatInterval = null
- }
+ // 启动连接
+ await this.wsControl.connect()
}
/**
* 断开连接
*/
disconnect() {
- if (this.reconnectTimeout !== null) {
- clearTimeout(this.reconnectTimeout)
- this.reconnectTimeout = null
- }
-
- this.stopHeartbeat()
-
- if (this.ws) {
- this.ws.close()
- this.ws = null
+ if (this.wsControl) {
+ this.wsControl.disconnect()
+ this.wsControl = null
}
this.isConnected = false
- this.reconnectAttempts = 0
}
/**
diff --git a/dashboard/src/lib/person-api.ts b/dashboard/src/lib/person-api.ts
index 1415aa97..2a272ff8 100644
--- a/dashboard/src/lib/person-api.ts
+++ b/dashboard/src/lib/person-api.ts
@@ -2,6 +2,7 @@
* 人物信息管理 API
*/
import { fetchWithAuth, getAuthHeaders } from '@/lib/fetch-with-auth'
+import type { ApiResponse } from '@/types/api'
import type {
PersonListResponse,
PersonDetailResponse,
@@ -9,10 +10,22 @@ import type {
PersonUpdateResponse,
PersonDeleteResponse,
PersonStatsResponse,
+ PersonInfo,
+ PersonStats,
} from '@/types/person'
const API_BASE = '/api/webui/person'
+/**
+ * Person list response with pagination info
+ */
+export interface PersonListData {
+ data: PersonInfo[]
+ total: number
+ page: number
+ page_size: number
+}
+
/**
* 获取人物信息列表
*/
@@ -22,7 +35,7 @@ export async function getPersonList(params: {
search?: string
is_known?: boolean
platform?: string
-}): Promise {
+}): Promise> {
const queryParams = new URLSearchParams()
if (params.page) queryParams.append('page', params.page.toString())
@@ -36,27 +49,88 @@ export async function getPersonList(params: {
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取人物列表失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取人物列表失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取人物列表失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data: PersonListResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: {
+ data: data.data,
+ total: data.total,
+ page: data.page,
+ page_size: data.page_size,
+ },
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取人物列表失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
/**
* 获取人物详细信息
*/
-export async function getPersonDetail(personId: string): Promise {
+export async function getPersonDetail(personId: string): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${personId}`, {
headers: getAuthHeaders(),
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取人物详情失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取人物详情失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取人物详情失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data: PersonDetailResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取人物详情失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
/**
@@ -65,7 +139,7 @@ export async function getPersonDetail(personId: string): Promise {
+): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${personId}`, {
method: 'PATCH',
headers: getAuthHeaders(),
@@ -73,56 +147,141 @@ export async function updatePerson(
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '更新人物信息失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '更新人物信息失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '更新人物信息失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data: PersonUpdateResponse = await response.json()
+ if (data.success && data.data) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: data.message || '更新人物信息失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
/**
* 删除人物信息
*/
-export async function deletePerson(personId: string): Promise {
+export async function deletePerson(personId: string): Promise> {
const response = await fetchWithAuth(`${API_BASE}/${personId}`, {
method: 'DELETE',
headers: getAuthHeaders(),
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '删除人物信息失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '删除人物信息失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '删除人物信息失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data: PersonDeleteResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: undefined as unknown as void,
+ }
+ } else {
+ return {
+ success: false,
+ error: data.message || '删除人物信息失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
/**
* 获取人物统计数据
*/
-export async function getPersonStats(): Promise {
+export async function getPersonStats(): Promise> {
const response = await fetchWithAuth(`${API_BASE}/stats/summary`, {
headers: getAuthHeaders(),
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '获取统计数据失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '获取统计数据失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '获取统计数据失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data: PersonStatsResponse = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: data.data,
+ }
+ } else {
+ return {
+ success: false,
+ error: '获取统计数据失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
/**
* 批量删除人物信息
*/
-export async function batchDeletePersons(personIds: string[]): Promise<{
- success: boolean
+export async function batchDeletePersons(
+ personIds: string[]
+): Promise {
+}>> {
const response = await fetchWithAuth(`${API_BASE}/batch/delete`, {
method: 'POST',
headers: getAuthHeaders(),
@@ -130,9 +289,42 @@ export async function batchDeletePersons(personIds: string[]): Promise<{
})
if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '批量删除失败')
+ try {
+ const errorData = await response.json()
+ return {
+ success: false,
+ error: errorData.detail || errorData.message || '批量删除失败',
+ }
+ } catch {
+ return {
+ success: false,
+ error: response.statusText || '批量删除失败',
+ }
+ }
}
- return response.json()
+ try {
+ const data = await response.json()
+ if (data.success) {
+ return {
+ success: true,
+ data: {
+ message: data.message,
+ deleted_count: data.deleted_count,
+ failed_count: data.failed_count,
+ failed_ids: data.failed_ids,
+ },
+ }
+ } else {
+ return {
+ success: false,
+ error: data.message || '批量删除失败',
+ }
+ }
+ } catch {
+ return {
+ success: false,
+ error: 'Failed to parse response',
+ }
+ }
}
diff --git a/dashboard/src/lib/plugin-api.ts b/dashboard/src/lib/plugin-api.ts
deleted file mode 100644
index 97133693..00000000
--- a/dashboard/src/lib/plugin-api.ts
+++ /dev/null
@@ -1,722 +0,0 @@
-import { fetchWithAuth, getAuthHeaders } from '@/lib/fetch-with-auth'
-import type { PluginInfo } from '@/types/plugin'
-
-/**
- * Git 安装状态
- */
-export interface GitStatus {
- installed: boolean
- version?: string
- path?: string
- error?: string
-}
-
-/**
- * 麦麦版本信息
- */
-export interface MaimaiVersion {
- version: string
- version_major: number
- version_minor: number
- version_patch: number
-}
-
-/**
- * 已安装插件信息
- */
-export interface InstalledPlugin {
- id: string
- manifest: {
- manifest_version: number
- name: string
- version: string
- description: string
- author: {
- name: string
- url?: string
- }
- license: string
- host_application: {
- min_version: string
- max_version?: string
- }
- homepage_url?: string
- repository_url?: string
- keywords?: string[]
- categories?: string[]
- [key: string]: unknown // 允许其他字段
- }
- path: string
-}
-
-/**
- * 插件加载进度
- */
-export interface PluginLoadProgress {
- operation: 'idle' | 'fetch' | 'install' | 'uninstall' | 'update'
- stage: 'idle' | 'loading' | 'success' | 'error'
- progress: number // 0-100
- message: string
- error?: string
- plugin_id?: string
- total_plugins: number
- loaded_plugins: number
-}
-
-/**
- * 插件仓库配置
- */
-const PLUGIN_REPO_OWNER = 'Mai-with-u'
-const PLUGIN_REPO_NAME = 'plugin-repo'
-const PLUGIN_REPO_BRANCH = 'main'
-const PLUGIN_DETAILS_FILE = 'plugin_details.json'
-
-/**
- * 插件列表 API 响应类型（只包含我们需要的字段）
- */
-interface PluginApiResponse {
- id: string
- manifest: {
- manifest_version: number
- name: string
- version: string
- description: string
- author: {
- name: string
- url?: string
- }
- license: string
- host_application: {
- min_version: string
- max_version?: string
- }
- homepage_url?: string
- repository_url?: string
- keywords: string[]
- categories?: string[]
- default_locale: string
- locales_path?: string
- }
- // 可能还有其他字段，但我们不关心
- [key: string]: unknown
-}
-
-/**
- * 从远程获取插件列表（通过后端代理避免 CORS）
- */
-export async function fetchPluginList(): Promise {
- try {
- // 通过后端 API 获取 Raw 文件
- const response = await fetchWithAuth('/api/webui/plugins/fetch-raw', {
- method: 'POST',
-
- body: JSON.stringify({
- owner: PLUGIN_REPO_OWNER,
- repo: PLUGIN_REPO_NAME,
- branch: PLUGIN_REPO_BRANCH,
- file_path: PLUGIN_DETAILS_FILE
- })
- })
-
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`)
- }
-
- const result = await response.json()
-
- // 检查后端返回的结果
- if (!result.success || !result.data) {
- throw new Error(result.error || '获取插件列表失败')
- }
-
- const data: PluginApiResponse[] = JSON.parse(result.data)
-
- // 转换为 PluginInfo 格式，并过滤掉无效数据
- const pluginList = data
- .filter(item => {
- // 验证必需字段
- if (!item?.id || !item?.manifest) {
- console.warn('跳过无效插件数据:', item)
- return false
- }
- if (!item.manifest.name || !item.manifest.version) {
- console.warn('跳过缺少必需字段的插件:', item.id)
- return false
- }
- return true
- })
- .map((item) => ({
- id: item.id,
- manifest: {
- manifest_version: item.manifest.manifest_version || 1,
- name: item.manifest.name,
- version: item.manifest.version,
- description: item.manifest.description || '',
- author: item.manifest.author || { name: 'Unknown' },
- license: item.manifest.license || 'Unknown',
- host_application: item.manifest.host_application || { min_version: '0.0.0' },
- homepage_url: item.manifest.homepage_url,
- repository_url: item.manifest.repository_url,
- keywords: item.manifest.keywords || [],
- categories: item.manifest.categories || [],
- default_locale: item.manifest.default_locale || 'zh-CN',
- locales_path: item.manifest.locales_path,
- },
- // 默认值，这些信息可能需要从其他 API 获取
- downloads: 0,
- rating: 0,
- review_count: 0,
- installed: false,
- published_at: new Date().toISOString(),
- updated_at: new Date().toISOString(),
- }))
-
- return pluginList
- } catch (error) {
- console.error('Failed to fetch plugin list:', error)
- throw error
- }
-}
-
-/**
- * 检查本机 Git 安装状态
- */
-export async function checkGitStatus(): Promise {
- try {
- const response = await fetchWithAuth('/api/webui/plugins/git-status')
-
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`)
- }
-
- return await response.json()
- } catch (error) {
- console.error('Failed to check Git status:', error)
- // 返回未安装状态
- return {
- installed: false,
- error: '无法检测 Git 安装状态'
- }
- }
-}
-
-/**
- * 获取麦麦版本信息
- */
-export async function getMaimaiVersion(): Promise {
- try {
- const response = await fetchWithAuth('/api/webui/plugins/version')
-
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`)
- }
-
- return await response.json()
- } catch (error) {
- console.error('Failed to get Maimai version:', error)
- // 返回默认版本
- return {
- version: '0.0.0',
- version_major: 0,
- version_minor: 0,
- version_patch: 0
- }
- }
-}
-
-/**
- * 比较版本号
- *
- * @param pluginMinVersion 插件要求的最小版本
- * @param pluginMaxVersion 插件要求的最大版本（可选）
- * @param maimaiVersion 麦麦当前版本
- * @returns true 表示兼容，false 表示不兼容
- */
-export function isPluginCompatible(
- pluginMinVersion: string,
- pluginMaxVersion: string | undefined,
- maimaiVersion: MaimaiVersion
-): boolean {
- // 解析插件最小版本
- const minParts = pluginMinVersion.split('.').map(p => parseInt(p) || 0)
- const minMajor = minParts[0] || 0
- const minMinor = minParts[1] || 0
- const minPatch = minParts[2] || 0
-
- // 检查最小版本
- if (maimaiVersion.version_major < minMajor) return false
- if (maimaiVersion.version_major === minMajor && maimaiVersion.version_minor < minMinor) return false
- if (maimaiVersion.version_major === minMajor &&
- maimaiVersion.version_minor === minMinor &&
- maimaiVersion.version_patch < minPatch) return false
-
- // 检查最大版本（如果有）
- if (pluginMaxVersion) {
- const maxParts = pluginMaxVersion.split('.').map(p => parseInt(p) || 0)
- const maxMajor = maxParts[0] || 0
- const maxMinor = maxParts[1] || 0
- const maxPatch = maxParts[2] || 0
-
- if (maimaiVersion.version_major > maxMajor) return false
- if (maimaiVersion.version_major === maxMajor && maimaiVersion.version_minor > maxMinor) return false
- if (maimaiVersion.version_major === maxMajor &&
- maimaiVersion.version_minor === maxMinor &&
- maimaiVersion.version_patch > maxPatch) return false
- }
-
- return true
-}
-
-/**
- * 获取 WebSocket 临时认证 token
- */
-async function getWsToken(): Promise {
- try {
- const response = await fetchWithAuth('/api/webui/ws-token')
- if (!response.ok) {
- console.error('获取 WebSocket token 失败:', response.status)
- return null
- }
- const data = await response.json()
- if (data.success && data.token) {
- return data.token
- }
- return null
- } catch (error) {
- console.error('获取 WebSocket token 失败:', error)
- return null
- }
-}
-
-/**
- * 连接插件加载进度 WebSocket
- *
- * 使用临时 token 进行认证，异步获取 token 后连接
- */
-export async function connectPluginProgressWebSocket(
- onProgress: (progress: PluginLoadProgress) => void,
- onError?: (error: Event) => void
-): Promise {
- // 先获取临时 token
- const wsToken = await getWsToken()
- if (!wsToken) {
- console.warn('无法获取 WebSocket token，可能未登录')
- return null
- }
-
- const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
- const host = window.location.host
- const wsUrl = `${protocol}//${host}/api/webui/ws/plugin-progress?token=${encodeURIComponent(wsToken)}`
-
- try {
- const ws = new WebSocket(wsUrl)
-
- ws.onopen = () => {
- console.log('Plugin progress WebSocket connected')
- // 发送心跳
- const heartbeat = setInterval(() => {
- if (ws.readyState === WebSocket.OPEN) {
- ws.send('ping')
- } else {
- clearInterval(heartbeat)
- }
- }, 30000)
- }
-
- ws.onmessage = (event) => {
- try {
- // 忽略心跳响应
- if (event.data === 'pong') {
- return
- }
-
- const data = JSON.parse(event.data) as PluginLoadProgress
- onProgress(data)
- } catch (error) {
- console.error('Failed to parse progress data:', error)
- }
- }
-
- ws.onerror = (error) => {
- console.error('Plugin progress WebSocket error:', error)
- onError?.(error)
- }
-
- ws.onclose = () => {
- console.log('Plugin progress WebSocket disconnected')
- }
-
- return ws
- } catch (error) {
- console.error('创建 WebSocket 连接失败:', error)
- return null
- }
-}
-
-/**
- * 获取已安装插件列表
- */
-export async function getInstalledPlugins(): Promise {
- try {
- const response = await fetchWithAuth('/api/webui/plugins/installed', {
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`)
- }
-
- const result = await response.json()
-
- if (!result.success) {
- throw new Error(result.message || '获取已安装插件列表失败')
- }
-
- return result.plugins || []
- } catch (error) {
- console.error('Failed to get installed plugins:', error)
- return []
- }
-}
-
-/**
- * 检查插件是否已安装
- */
-export function checkPluginInstalled(pluginId: string, installedPlugins: InstalledPlugin[]): boolean {
- return installedPlugins.some(p => p.id === pluginId)
-}
-
-/**
- * 获取已安装插件的版本
- */
-export function getInstalledPluginVersion(pluginId: string, installedPlugins: InstalledPlugin[]): string | undefined {
- const plugin = installedPlugins.find(p => p.id === pluginId)
- if (!plugin) return undefined
-
- // 兼容两种格式：新格式有 manifest，旧格式直接有 version
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- return plugin.manifest?.version || (plugin as any).version
-}
-
-/**
- * 安装插件
- */
-export async function installPlugin(pluginId: string, repositoryUrl: string, branch: string = 'main'): Promise<{ success: boolean; message: string }> {
- const response = await fetchWithAuth('/api/webui/plugins/install', {
- method: 'POST',
-
- body: JSON.stringify({
- plugin_id: pluginId,
- repository_url: repositoryUrl,
- branch: branch
- })
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '安装失败')
- }
-
- return await response.json()
-}
-
-/**
- * 卸载插件
- */
-export async function uninstallPlugin(pluginId: string): Promise<{ success: boolean; message: string }> {
- const response = await fetchWithAuth('/api/webui/plugins/uninstall', {
- method: 'POST',
-
- body: JSON.stringify({
- plugin_id: pluginId
- })
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '卸载失败')
- }
-
- return await response.json()
-}
-
-/**
- * 更新插件
- */
-export async function updatePlugin(pluginId: string, repositoryUrl: string, branch: string = 'main'): Promise<{ success: boolean; message: string; old_version: string; new_version: string }> {
- const response = await fetchWithAuth('/api/webui/plugins/update', {
- method: 'POST',
-
- body: JSON.stringify({
- plugin_id: pluginId,
- repository_url: repositoryUrl,
- branch: branch
- })
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '更新失败')
- }
-
- return await response.json()
-}
-
-
-// ============ 插件配置管理 ============
-
-/**
- * 列表项字段定义（用于 object 类型的数组项）
- */
-export interface ItemFieldDefinition {
- type: string
- label?: string
- placeholder?: string
- default?: unknown
-}
-
-/**
- * 配置字段定义
- */
-export interface ConfigFieldSchema {
- name: string
- type: string
- default: unknown
- description: string
- example?: string
- required: boolean
- choices?: unknown[]
- min?: number
- max?: number
- step?: number
- pattern?: string
- max_length?: number
- label: string
- placeholder?: string
- hint?: string
- icon?: string
- hidden: boolean
- disabled: boolean
- order: number
- input_type?: string
- ui_type: string
- rows?: number
- group?: string
- depends_on?: string
- depends_value?: unknown
- // 列表类型专用
- item_type?: string // "string" | "number" | "object"
- item_fields?: Record
- min_items?: number
- max_items?: number
-}
-
-/**
- * 配置节定义
- */
-export interface ConfigSectionSchema {
- name: string
- title: string
- description?: string
- icon?: string
- collapsed: boolean
- order: number
- fields: Record
-}
-
-/**
- * 配置标签页定义
- */
-export interface ConfigTabSchema {
- id: string
- title: string
- sections: string[]
- icon?: string
- order: number
- badge?: string
-}
-
-/**
- * 配置布局定义
- */
-export interface ConfigLayoutSchema {
- type: 'auto' | 'tabs' | 'pages'
- tabs: ConfigTabSchema[]
-}
-
-/**
- * 插件配置 Schema
- */
-export interface PluginConfigSchema {
- plugin_id: string
- plugin_info: {
- name: string
- version: string
- description: string
- author: string
- }
- sections: Record
- layout: ConfigLayoutSchema
- _note?: string
-}
-
-/**
- * 获取插件配置 Schema
- */
-export async function getPluginConfigSchema(pluginId: string): Promise {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/schema`, {
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- const text = await response.text()
- try {
- const error = JSON.parse(text)
- throw new Error(error.detail || '获取配置 Schema 失败')
- } catch {
- throw new Error(`获取配置 Schema 失败 (${response.status})`)
- }
- }
-
- const result = await response.json()
-
- if (!result.success) {
- throw new Error(result.message || '获取配置 Schema 失败')
- }
-
- return result.schema
-}
-
-/**
- * 获取插件当前配置值
- */
-export async function getPluginConfig(pluginId: string): Promise> {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}`, {
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- const text = await response.text()
- try {
- const error = JSON.parse(text)
- throw new Error(error.detail || '获取配置失败')
- } catch {
- throw new Error(`获取配置失败 (${response.status})`)
- }
- }
-
- const result = await response.json()
-
- if (!result.success) {
- throw new Error(result.message || '获取配置失败')
- }
-
- return result.config
-}
-
-/**
- * 获取插件原始 TOML 配置
- */
-export async function getPluginConfigRaw(pluginId: string): Promise {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/raw`, {
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- const text = await response.text()
- try {
- const error = JSON.parse(text)
- throw new Error(error.detail || '获取配置失败')
- } catch {
- throw new Error(`获取配置失败 (${response.status})`)
- }
- }
-
- const result = await response.json()
-
- if (!result.success) {
- throw new Error(result.message || '获取配置失败')
- }
-
- return result.config
-}
-
-/**
- * 更新插件配置
- */
-export async function updatePluginConfig(
- pluginId: string,
- config: Record
-): Promise<{ success: boolean; message: string; note?: string }> {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}`, {
- method: 'PUT',
- headers: getAuthHeaders(),
- body: JSON.stringify({ config })
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '保存配置失败')
- }
-
- return await response.json()
-}
-
-/**
- * 更新插件原始 TOML 配置
- */
-export async function updatePluginConfigRaw(
- pluginId: string,
- configToml: string
-): Promise<{ success: boolean; message: string; note?: string }> {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/raw`, {
- method: 'PUT',
- headers: getAuthHeaders(),
- body: JSON.stringify({ config: configToml })
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '保存配置失败')
- }
-
- return await response.json()
-}
-
-/**
- * 重置插件配置为默认值
- */
-export async function resetPluginConfig(
- pluginId: string
-): Promise<{ success: boolean; message: string; backup?: string }> {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/reset`, {
- method: 'POST',
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '重置配置失败')
- }
-
- return await response.json()
-}
-
-/**
- * 切换插件启用状态
- */
-export async function togglePlugin(
- pluginId: string
-): Promise<{ success: boolean; enabled: boolean; message: string; note?: string }> {
- const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/toggle`, {
- method: 'POST',
- headers: getAuthHeaders()
- })
-
- if (!response.ok) {
- const error = await response.json()
- throw new Error(error.detail || '切换状态失败')
- }
-
- return await response.json()
-}
diff --git a/dashboard/src/lib/plugin-api/config.ts b/dashboard/src/lib/plugin-api/config.ts
new file mode 100644
index 00000000..0b37de72
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/config.ts
@@ -0,0 +1,150 @@
+import type { ApiResponse } from '@/types/api'
+
+import { fetchWithAuth, getAuthHeaders } from '@/lib/fetch-with-auth'
+import { parseResponse } from '@/lib/api-helpers'
+
+import type { PluginConfigSchema } from './types'
+
+/**
+ * 获取插件配置 Schema
+ */
+export async function getPluginConfigSchema(pluginId: string): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/schema`, {
+ headers: getAuthHeaders()
+ })
+
+ const apiResult = await parseResponse<{ success: boolean; schema?: PluginConfigSchema; message?: string }>(response)
+
+ if (!apiResult.success) {
+ return apiResult
+ }
+
+ const result = apiResult.data
+ if (!result.success || !result.schema) {
+ return {
+ success: false,
+ error: result.message || '获取配置 Schema 失败'
+ }
+ }
+
+ return {
+ success: true,
+ data: result.schema
+ }
+}
+
+/**
+ * 获取插件当前配置值
+ */
+export async function getPluginConfig(pluginId: string): Promise>> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}`, {
+ headers: getAuthHeaders()
+ })
+
+ const apiResult = await parseResponse<{ success: boolean; config?: Record; message?: string }>(response)
+
+ if (!apiResult.success) {
+ return apiResult
+ }
+
+ const result = apiResult.data
+ if (!result.success || !result.config) {
+ return {
+ success: false,
+ error: result.message || '获取配置失败'
+ }
+ }
+
+ return {
+ success: true,
+ data: result.config
+ }
+}
+
+/**
+ * 获取插件原始 TOML 配置
+ */
+export async function getPluginConfigRaw(pluginId: string): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/raw`, {
+ headers: getAuthHeaders()
+ })
+
+ const apiResult = await parseResponse<{ success: boolean; config?: string; message?: string }>(response)
+
+ if (!apiResult.success) {
+ return apiResult
+ }
+
+ const result = apiResult.data
+ if (!result.success || !result.config) {
+ return {
+ success: false,
+ error: result.message || '获取配置失败'
+ }
+ }
+
+ return {
+ success: true,
+ data: result.config
+ }
+}
+
+/**
+ * 更新插件配置
+ */
+export async function updatePluginConfig(
+ pluginId: string,
+ config: Record
+): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}`, {
+ method: 'PUT',
+ headers: getAuthHeaders(),
+ body: JSON.stringify({ config })
+ })
+
+ return await parseResponse<{ success: boolean; message: string; note?: string }>(response)
+}
+
+/**
+ * 更新插件原始 TOML 配置
+ */
+export async function updatePluginConfigRaw(
+ pluginId: string,
+ configToml: string
+): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/raw`, {
+ method: 'PUT',
+ headers: getAuthHeaders(),
+ body: JSON.stringify({ config: configToml })
+ })
+
+ return await parseResponse<{ success: boolean; message: string; note?: string }>(response)
+}
+
+/**
+ * 重置插件配置为默认值
+ */
+export async function resetPluginConfig(
+ pluginId: string
+): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/reset`, {
+ method: 'POST',
+ headers: getAuthHeaders()
+ })
+
+ return await parseResponse<{ success: boolean; message: string; backup?: string }>(response)
+}
+
+/**
+ * 切换插件启用状态
+ */
+export async function togglePlugin(
+ pluginId: string
+): Promise> {
+ const response = await fetchWithAuth(`/api/webui/plugins/config/${pluginId}/toggle`, {
+ method: 'POST',
+ headers: getAuthHeaders()
+ })
+
+ return await parseResponse<{ success: boolean; enabled: boolean; message: string; note?: string }>(response)
+}
diff --git a/dashboard/src/lib/plugin-api/index.ts b/dashboard/src/lib/plugin-api/index.ts
new file mode 100644
index 00000000..963acaf1
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/index.ts
@@ -0,0 +1,5 @@
+export * from './types'
+export * from './marketplace'
+export * from './installed'
+export * from './install-flow'
+export * from './config'
diff --git a/dashboard/src/lib/plugin-api/install-flow.ts b/dashboard/src/lib/plugin-api/install-flow.ts
new file mode 100644
index 00000000..d01c0959
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/install-flow.ts
@@ -0,0 +1,50 @@
+import type { ApiResponse } from '@/types/api'
+
+import { fetchWithAuth } from '@/lib/fetch-with-auth'
+import { parseResponse } from '@/lib/api-helpers'
+
+/**
+ * 安装插件
+ */
+export async function installPlugin(pluginId: string, repositoryUrl: string, branch: string = 'main'): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/install', {
+ method: 'POST',
+ body: JSON.stringify({
+ plugin_id: pluginId,
+ repository_url: repositoryUrl,
+ branch: branch
+ })
+ })
+
+ return await parseResponse<{ success: boolean; message: string }>(response)
+}
+
+/**
+ * 卸载插件
+ */
+export async function uninstallPlugin(pluginId: string): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/uninstall', {
+ method: 'POST',
+ body: JSON.stringify({
+ plugin_id: pluginId
+ })
+ })
+
+ return await parseResponse<{ success: boolean; message: string }>(response)
+}
+
+/**
+ * 更新插件
+ */
+export async function updatePlugin(pluginId: string, repositoryUrl: string, branch: string = 'main'): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/update', {
+ method: 'POST',
+ body: JSON.stringify({
+ plugin_id: pluginId,
+ repository_url: repositoryUrl,
+ branch: branch
+ })
+ })
+
+ return await parseResponse<{ success: boolean; message: string; old_version: string; new_version: string }>(response)
+}
diff --git a/dashboard/src/lib/plugin-api/installed.ts b/dashboard/src/lib/plugin-api/installed.ts
new file mode 100644
index 00000000..cd7d0d7d
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/installed.ts
@@ -0,0 +1,62 @@
+import type { ApiResponse } from '@/types/api'
+
+import { fetchWithAuth, getAuthHeaders } from '@/lib/fetch-with-auth'
+import { parseResponse } from '@/lib/api-helpers'
+
+import type { InstalledPlugin, LegacyInstalledPlugin } from './types'
+
+/**
+ * 获取已安装插件列表
+ */
+export async function getInstalledPlugins(): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/installed', {
+ headers: getAuthHeaders()
+ })
+
+ const apiResult = await parseResponse<{ success: boolean; plugins?: InstalledPlugin[]; message?: string }>(response)
+
+ if (!apiResult.success) {
+ return {
+ success: true,
+ data: []
+ }
+ }
+
+ const result = apiResult.data
+ if (!result.success) {
+ return {
+ success: true,
+ data: []
+ }
+ }
+
+ return {
+ success: true,
+ data: result.plugins || []
+ }
+}
+
+/**
+ * 检查插件是否已安装
+ */
+export function checkPluginInstalled(pluginId: string, installedPlugins: InstalledPlugin[]): boolean {
+ return installedPlugins.some(p => p.id === pluginId)
+}
+
+/**
+ * 获取已安装插件的版本
+ */
+export function getInstalledPluginVersion(pluginId: string, installedPlugins: (InstalledPlugin | LegacyInstalledPlugin)[]): string | undefined {
+ const plugin = installedPlugins.find(p => p.id === pluginId)
+ if (!plugin) return undefined
+
+ // 兼容两种格式：新格式有 manifest，旧格式直接有 version
+ if ('manifest' in plugin && plugin.manifest) {
+ return plugin.manifest.version
+ }
+ // 旧版本格式
+ if ('version' in plugin) {
+ return plugin.version
+ }
+ return undefined
+}
diff --git a/dashboard/src/lib/plugin-api/marketplace.ts b/dashboard/src/lib/plugin-api/marketplace.ts
new file mode 100644
index 00000000..026e4457
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/marketplace.ts
@@ -0,0 +1,252 @@
+import type { ApiResponse } from '@/types/api'
+import type { PluginInfo } from '@/types/plugin'
+
+import { fetchWithAuth } from '@/lib/fetch-with-auth'
+import { parseResponse } from '@/lib/api-helpers'
+
+import type { GitStatus, MaimaiVersion } from './types'
+
+/**
+ * 插件仓库配置
+ */
+const PLUGIN_REPO_OWNER = 'Mai-with-u'
+const PLUGIN_REPO_NAME = 'plugin-repo'
+const PLUGIN_REPO_BRANCH = 'main'
+const PLUGIN_DETAILS_FILE = 'plugin_details.json'
+
+/**
+ * 插件列表 API 响应类型（只包含我们需要的字段）
+ */
+interface PluginApiResponse {
+ id: string
+ manifest: {
+ manifest_version: number
+ name: string
+ version: string
+ description: string
+ author: {
+ name: string
+ url?: string
+ }
+ license: string
+ host_application: {
+ min_version: string
+ max_version?: string
+ }
+ homepage_url?: string
+ repository_url?: string
+ keywords: string[]
+ categories?: string[]
+ default_locale: string
+ locales_path?: string
+ }
+ // 可能还有其他字段,但我们不关心
+ [key: string]: unknown
+}
+
+/**
+ * 从远程获取插件列表(通过后端代理避免 CORS)
+ */
+export async function fetchPluginList(): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/fetch-raw', {
+ method: 'POST',
+ body: JSON.stringify({
+ owner: PLUGIN_REPO_OWNER,
+ repo: PLUGIN_REPO_NAME,
+ branch: PLUGIN_REPO_BRANCH,
+ file_path: PLUGIN_DETAILS_FILE
+ })
+ })
+
+ const apiResult = await parseResponse<{ success: boolean; data: string; error?: string }>(response)
+
+ if (!apiResult.success) {
+ return apiResult
+ }
+
+ const result = apiResult.data
+ if (!result.success || !result.data) {
+ return {
+ success: false,
+ error: result.error || '获取插件列表失败'
+ }
+ }
+
+ const data: PluginApiResponse[] = JSON.parse(result.data)
+
+ const pluginList = data
+ .filter(item => {
+ if (!item?.id || !item?.manifest) {
+ console.warn('跳过无效插件数据:', item)
+ return false
+ }
+ if (!item.manifest.name || !item.manifest.version) {
+ console.warn('跳过缺少必需字段的插件:', item.id)
+ return false
+ }
+ return true
+ })
+ .map((item) => ({
+ id: item.id,
+ manifest: {
+ manifest_version: item.manifest.manifest_version || 1,
+ name: item.manifest.name,
+ version: item.manifest.version,
+ description: item.manifest.description || '',
+ author: item.manifest.author || { name: 'Unknown' },
+ license: item.manifest.license || 'Unknown',
+ host_application: item.manifest.host_application || { min_version: '0.0.0' },
+ homepage_url: item.manifest.homepage_url,
+ repository_url: item.manifest.repository_url,
+ keywords: item.manifest.keywords || [],
+ categories: item.manifest.categories || [],
+ default_locale: item.manifest.default_locale || 'zh-CN',
+ locales_path: item.manifest.locales_path,
+ },
+ downloads: 0,
+ rating: 0,
+ review_count: 0,
+ installed: false,
+ published_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ }))
+
+ return {
+ success: true,
+ data: pluginList
+ }
+}
+
+/**
+ * 检查本机 Git 安装状态
+ */
+export async function checkGitStatus(): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/git-status')
+
+ const apiResult = await parseResponse(response)
+
+ if (!apiResult.success) {
+ return {
+ success: true,
+ data: {
+ installed: false,
+ error: '无法检测 Git 安装状态'
+ }
+ }
+ }
+
+ return apiResult
+}
+
+/**
+ * 获取麦麦版本信息
+ */
+export async function getMaimaiVersion(): Promise> {
+ const response = await fetchWithAuth('/api/webui/plugins/version')
+
+ const apiResult = await parseResponse(response)
+
+ if (!apiResult.success) {
+ return {
+ success: true,
+ data: {
+ version: '0.0.0',
+ version_major: 0,
+ version_minor: 0,
+ version_patch: 0
+ }
+ }
+ }
+
+ return apiResult
+}
+
+/**
+ * 比较版本号
+ *
+ * @param pluginMinVersion 插件要求的最小版本
+ * @param pluginMaxVersion 插件要求的最大版本(可选)
+ * @param maimaiVersion 麦麦当前版本
+ * @returns true 表示兼容,false 表示不兼容
+ */
+export function isPluginCompatible(
+ pluginMinVersion: string,
+ pluginMaxVersion: string | undefined,
+ maimaiVersion: MaimaiVersion
+): boolean {
+ // 解析插件最小版本
+ const minParts = pluginMinVersion.split('.').map(p => parseInt(p) || 0)
+ const minMajor = minParts[0] || 0
+ const minMinor = minParts[1] || 0
+ const minPatch = minParts[2] || 0
+
+ // 检查最小版本
+ if (maimaiVersion.version_major < minMajor) return false
+ if (maimaiVersion.version_major === minMajor && maimaiVersion.version_minor < minMinor) return false
+ if (maimaiVersion.version_major === minMajor &&
+ maimaiVersion.version_minor === minMinor &&
+ maimaiVersion.version_patch < minPatch) return false
+
+ // 检查最大版本(如果有)
+ if (pluginMaxVersion) {
+ const maxParts = pluginMaxVersion.split('.').map(p => parseInt(p) || 0)
+ const maxMajor = maxParts[0] || 0
+ const maxMinor = maxParts[1] || 0
+ const maxPatch = maxParts[2] || 0
+
+ if (maimaiVersion.version_major > maxMajor) return false
+ if (maimaiVersion.version_major === maxMajor && maimaiVersion.version_minor > maxMinor) return false
+ if (maimaiVersion.version_major === maxMajor &&
+ maimaiVersion.version_minor === maxMinor &&
+ maimaiVersion.version_patch > maxPatch) return false
+ }
+
+ return true
+}
+
+/**
+ * 连接插件加载进度 WebSocket
+ *
+ * 使用临时 token 进行认证,异步获取 token 后连接
+ */
+export async function connectPluginProgressWebSocket(
+ onProgress: (progress: import('./types').PluginLoadProgress) => void,
+ onError?: (error: Event) => void
+): Promise {
+ const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+ const host = window.location.host
+ const wsUrl = `${protocol}//${host}/api/webui/ws/plugin-progress`
+
+ // 使用 ws-utils 创建 WebSocket
+ const { createReconnectingWebSocket } = await import('@/lib/ws-utils')
+ const wsControl = createReconnectingWebSocket(wsUrl, {
+ onMessage: (data: string) => {
+ try {
+ const progressData = JSON.parse(data) as import('./types').PluginLoadProgress
+ onProgress(progressData)
+ } catch (error) {
+ console.error('Failed to parse progress data:', error)
+ }
+ },
+ onOpen: () => {
+ console.log('Plugin progress WebSocket connected')
+ },
+ onClose: () => {
+ console.log('Plugin progress WebSocket disconnected')
+ },
+ onError: (error) => {
+ console.error('Plugin progress WebSocket error:', error)
+ onError?.(error)
+ },
+ heartbeatInterval: 30000,
+ maxRetries: 10,
+ backoffBase: 1000,
+ maxBackoff: 30000,
+ })
+
+ // 启动连接
+ await wsControl.connect()
+
+ // 返回 WebSocket 实例(用于外部检查连接状态)
+ return wsControl.getWebSocket()
+}
diff --git a/dashboard/src/lib/plugin-api/types.ts b/dashboard/src/lib/plugin-api/types.ts
new file mode 100644
index 00000000..395bce0d
--- /dev/null
+++ b/dashboard/src/lib/plugin-api/types.ts
@@ -0,0 +1,164 @@
+/**
+ * Git 安装状态
+ */
+export interface GitStatus {
+ installed: boolean
+ version?: string
+ path?: string
+ error?: string
+}
+
+/**
+ * 麦麦版本信息
+ */
+export interface MaimaiVersion {
+ version: string
+ version_major: number
+ version_minor: number
+ version_patch: number
+}
+
+/**
+ * 已安装插件信息
+ */
+export interface InstalledPlugin {
+ id: string
+ manifest: {
+ manifest_version: number
+ name: string
+ version: string
+ description: string
+ author: {
+ name: string
+ url?: string
+ }
+ license: string
+ host_application: {
+ min_version: string
+ max_version?: string
+ }
+ homepage_url?: string
+ repository_url?: string
+ keywords?: string[]
+ categories?: string[]
+ [key: string]: unknown // 允许其他字段
+ }
+ path: string
+}
+/**
+ * 旧版本插件格式(直接包含 version 字段)
+ */
+export interface LegacyInstalledPlugin {
+ id: string
+ version: string
+ path: string
+}
+
+/**
+ * 插件加载进度
+ */
+export interface PluginLoadProgress {
+ operation: 'idle' | 'fetch' | 'install' | 'uninstall' | 'update'
+ stage: 'idle' | 'loading' | 'success' | 'error'
+ progress: number // 0-100
+ message: string
+ error?: string
+ plugin_id?: string
+ total_plugins: number
+ loaded_plugins: number
+}
+
+/**
+ * 列表项字段定义（用于 object 类型的数组项）
+ */
+export interface ItemFieldDefinition {
+ type: string
+ label?: string
+ placeholder?: string
+ default?: unknown
+}
+
+/**
+ * 配置字段定义
+ */
+export interface ConfigFieldSchema {
+ name: string
+ type: string
+ default: unknown
+ description: string
+ example?: string
+ required: boolean
+ choices?: unknown[]
+ min?: number
+ max?: number
+ step?: number
+ pattern?: string
+ max_length?: number
+ label: string
+ placeholder?: string
+ hint?: string
+ icon?: string
+ hidden: boolean
+ disabled: boolean
+ order: number
+ input_type?: string
+ ui_type: string
+ rows?: number
+ group?: string
+ depends_on?: string
+ depends_value?: unknown
+ // 列表类型专用
+ item_type?: string // "string" | "number" | "object"
+ item_fields?: Record
+ min_items?: number
+ max_items?: number
+}
+
+/**
+ * 配置节定义
+ */
+export interface ConfigSectionSchema {
+ name: string
+ title: string
+ description?: string
+ icon?: string
+ collapsed: boolean
+ order: number
+ fields: Record
+}
+
+/**
+ * 配置标签页定义
+ */
+export interface ConfigTabSchema {
+ id: string
+ title: string
+ sections: string[]
+ icon?: string
+ order: number
+ badge?: string
+}
+
+/**
+ * 配置布局定义
+ */
+export interface ConfigLayoutSchema {
+ type: 'auto' | 'tabs' | 'pages'
+ tabs: ConfigTabSchema[]
+}
+
+/**
+ * 插件配置 Schema
+ */
+export interface PluginConfigSchema {
+ plugin_id: string
+ plugin_info: {
+ name: string
+ version: string
+ description: string
+ author: string
+ }
+ sections: Record
+ layout: ConfigLayoutSchema
+ _note?: string
+}
diff --git a/dashboard/src/lib/restart-context.tsx b/dashboard/src/lib/restart-context.tsx
index 53ef0d31..49c56757 100644
--- a/dashboard/src/lib/restart-context.tsx
+++ b/dashboard/src/lib/restart-context.tsx
@@ -310,9 +310,9 @@ export function RestartProvider({
}
return (
-
+
{children}
-
+
)
}
diff --git a/dashboard/src/lib/ws-utils.ts b/dashboard/src/lib/ws-utils.ts
new file mode 100644
index 00000000..3d3b3240
--- /dev/null
+++ b/dashboard/src/lib/ws-utils.ts
@@ -0,0 +1,211 @@
+import { fetchWithAuth } from './fetch-with-auth'
+
+/**
+ * WebSocket 配置选项
+ */
+export interface WebSocketOptions {
+ onMessage?: (data: string) => void
+ onOpen?: () => void
+ onClose?: () => void
+ onError?: (error: Event) => void
+ heartbeatInterval?: number // 心跳间隔（毫秒）
+ maxRetries?: number // 最大重连次数
+ backoffBase?: number // 重连基础间隔（毫秒）
+ maxBackoff?: number // 最大重连间隔（毫秒）
+}
+
+/**
+ * 获取 WebSocket 临时认证 token
+ */
+export async function getWsToken(): Promise {
+ try {
+ // 使用相对路径，让前端代理处理请求，避免 CORS 问题
+ const response = await fetchWithAuth('/api/webui/ws-token', {
+ method: 'GET',
+ credentials: 'include', // 携带 Cookie
+ })
+
+ if (!response.ok) {
+ console.error('获取 WebSocket token 失败:', response.status)
+ return null
+ }
+
+ const data = await response.json()
+ if (data.success && data.token) {
+ return data.token
+ }
+ return null
+ } catch (error) {
+ console.error('获取 WebSocket token 失败:', error)
+ return null
+ }
+}
+
+/**
+ * 创建带重连、心跳的 WebSocket 封装
+ *
+ * @param url WebSocket URL（不含 token 参数）
+ * @param options 配置选项
+ * @returns WebSocket 控制对象，包含 connect、disconnect、send 方法
+ */
+export function createReconnectingWebSocket(
+ url: string,
+ options: WebSocketOptions = {}
+) {
+ const {
+ onMessage,
+ onOpen,
+ onClose,
+ onError,
+ heartbeatInterval = 30000,
+ maxRetries = 10,
+ backoffBase = 1000,
+ maxBackoff = 30000,
+ } = options
+
+ let ws: WebSocket | null = null
+ let reconnectTimeout: number | null = null
+ let reconnectAttempts = 0
+ let heartbeatIntervalId: number | null = null
+ let isManualDisconnect = false
+
+ /**
+ * 启动心跳
+ */
+ function startHeartbeat() {
+ stopHeartbeat()
+ heartbeatIntervalId = window.setInterval(() => {
+ if (ws?.readyState === WebSocket.OPEN) {
+ ws.send('ping')
+ }
+ }, heartbeatInterval)
+ }
+
+ /**
+ * 停止心跳
+ */
+ function stopHeartbeat() {
+ if (heartbeatIntervalId !== null) {
+ clearInterval(heartbeatIntervalId)
+ heartbeatIntervalId = null
+ }
+ }
+
+ /**
+ * 尝试重连
+ */
+ function attemptReconnect() {
+ if (isManualDisconnect) {
+ return
+ }
+
+ if (reconnectAttempts >= maxRetries) {
+ console.warn(`WebSocket 达到最大重连次数 (${maxRetries})，停止重连`)
+ return
+ }
+
+ reconnectAttempts += 1
+ const delay = Math.min(backoffBase * reconnectAttempts, maxBackoff)
+
+ console.log(`WebSocket 将在 ${delay}ms 后重连（第 ${reconnectAttempts} 次）`)
+ reconnectTimeout = window.setTimeout(() => {
+ connect()
+ }, delay)
+ }
+
+ /**
+ * 连接 WebSocket
+ */
+ async function connect() {
+ if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) {
+ return
+ }
+
+ // 先获取临时认证 token
+ const wsToken = await getWsToken()
+ if (!wsToken) {
+ console.warn('无法获取 WebSocket token，跳过连接')
+ return
+ }
+
+ const wsUrl = `${url}?token=${encodeURIComponent(wsToken)}`
+
+ try {
+ ws = new WebSocket(wsUrl)
+
+ ws.onopen = () => {
+ reconnectAttempts = 0
+ startHeartbeat()
+ onOpen?.()
+ }
+
+ ws.onmessage = (event) => {
+ // 忽略心跳响应
+ if (event.data === 'pong') {
+ return
+ }
+ onMessage?.(event.data)
+ }
+
+ ws.onerror = (error) => {
+ console.error('WebSocket 错误:', error)
+ onError?.(error)
+ }
+
+ ws.onclose = () => {
+ stopHeartbeat()
+ onClose?.()
+ attemptReconnect()
+ }
+ } catch (error) {
+ console.error('创建 WebSocket 连接失败:', error)
+ attemptReconnect()
+ }
+ }
+
+ /**
+ * 断开连接
+ */
+ function disconnect() {
+ isManualDisconnect = true
+
+ if (reconnectTimeout !== null) {
+ clearTimeout(reconnectTimeout)
+ reconnectTimeout = null
+ }
+
+ stopHeartbeat()
+
+ if (ws) {
+ ws.close()
+ ws = null
+ }
+
+ reconnectAttempts = 0
+ }
+
+ /**
+ * 发送消息
+ */
+ function send(data: string) {
+ if (ws?.readyState === WebSocket.OPEN) {
+ ws.send(data)
+ } else {
+ console.warn('WebSocket 未连接，无法发送消息')
+ }
+ }
+
+ /**
+ * 获取当前 WebSocket 实例
+ */
+ function getWebSocket(): WebSocket | null {
+ return ws
+ }
+
+ return {
+ connect,
+ disconnect,
+ send,
+ getWebSocket,
+ }
+}
diff --git a/dashboard/src/router.tsx b/dashboard/src/router.tsx
index bf9e2835..4ef072b2 100644
--- a/dashboard/src/router.tsx
+++ b/dashboard/src/router.tsx
@@ -22,7 +22,7 @@ import { ModelPresetsPage } from './routes/model-presets'
import { PluginConfigPage } from './routes/plugin-config'
import { PluginMirrorsPage } from './routes/plugin-mirrors'
import { PluginDetailPage } from './routes/plugin-detail'
-import { ChatPage } from './routes/chat'
+import { ChatPage } from './routes/chat/index'
import { WebUIFeedbackSurveyPage, MaiBotFeedbackSurveyPage } from './routes/survey'
import { AnnualReportPage } from './routes/annual-report'
import PackMarketPage from './routes/config/pack-market'
diff --git a/dashboard/src/routes/auth.tsx b/dashboard/src/routes/auth.tsx
index 49d216ff..8f9ff520 100644
--- a/dashboard/src/routes/auth.tsx
+++ b/dashboard/src/routes/auth.tsx
@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
import { useNavigate } from '@tanstack/react-router'
-import { Key, Lock, AlertCircle, Moon, Sun, HelpCircle, FileText, Terminal, Zap } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from '@/components/ui/dialog'
+ AlertCircle,
+ FileText,
+ HelpCircle,
+ Key,
+ Lock,
+ Moon,
+ Sun,
+ Terminal,
+ Zap,
+} from 'lucide-react'
+
import {
AlertDialog,
AlertDialogAction,
@@ -24,13 +24,35 @@ import {
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
import { WavesBackground } from '@/components/waves-background'
-import { useAnimation } from '@/hooks/use-animation'
import { useTheme } from '@/components/use-theme'
+
+import { useAnimation } from '@/hooks/use-animation'
+
+import { parseResponse } from '@/lib/api-helpers'
import { checkAuthStatus } from '@/lib/fetch-with-auth'
import { cn } from '@/lib/utils'
import { APP_FULL_NAME } from '@/lib/version'
+
export function AuthPage() {
const [token, setToken] = useState('')
const [isValidating, setIsValidating] = useState(false)
@@ -83,7 +105,7 @@ export function AuthPage() {
}
setIsValidating(true)
-
+
console.log('开始验证 token...')
try {
@@ -98,22 +120,34 @@ export function AuthPage() {
})
console.log('Token 验证响应状态:', response.status)
-
- const data = await response.json()
+
+ const result = await parseResponse<{
+ valid: boolean
+ is_first_setup?: boolean
+ message?: string
+ }>(response)
+
+ if (!result.success) {
+ console.error('Token 验证失败:', result.error)
+ setError(result.error)
+ return
+ }
+
+ const data = result.data
console.log('Token 验证响应数据:', data)
- if (response.ok && data.valid) {
+ if (data.valid) {
console.log('Token 验证成功，准备跳转...')
console.log('is_first_setup:', data.is_first_setup)
-
+
// Token 验证成功，Cookie 已由后端设置
// 等待一小段时间确保 Cookie 已设置
- await new Promise(resolve => setTimeout(resolve, 100))
-
+ await new Promise((resolve) => setTimeout(resolve, 100))
+
// 再次检查认证状态
const authCheck = await checkAuthStatus()
console.log('跳转前认证状态检查:', authCheck)
-
+
// 直接使用验证响应中的 is_first_setup 字段，避免额外请求
if (data.is_first_setup) {
console.log('跳转到首次配置页面')
@@ -130,7 +164,9 @@ export function AuthPage() {
}
} catch (err) {
console.error('Token 验证错误:', err)
- setError('连接服务器失败，请检查网络连接')
+ setError(
+ err instanceof Error ? err.message : '连接服务器失败，请检查网络连接'
+ )
} finally {
setIsValidating(false)
}
diff --git a/dashboard/src/routes/chat/ChatTabBar.tsx b/dashboard/src/routes/chat/ChatTabBar.tsx
new file mode 100644
index 00000000..484b5a2d
--- /dev/null
+++ b/dashboard/src/routes/chat/ChatTabBar.tsx
@@ -0,0 +1,79 @@
+import { cn } from '@/lib/utils'
+import { MessageSquare, Plus, UserCircle2, X } from 'lucide-react'
+
+import type { ChatTab } from './types'
+
+interface ChatTabBarProps {
+ tabs: ChatTab[]
+ activeTabId: string
+ onSwitch: (tabId: string) => void
+ onClose: (tabId: string, e?: React.MouseEvent | React.KeyboardEvent) => void
+ onAddVirtual: () => void
+}
+
+export function ChatTabBar({
+ tabs,
+ activeTabId,
+ onSwitch,
+ onClose,
+ onAddVirtual,
+}: ChatTabBarProps) {
+ return (
+ })
{
+ // 图片加载失败时显示占位符
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ target.parentElement?.insertAdjacentHTML(
+ 'beforeend',
+ `[${segment.type === 'emoji' ? '表情包' : '图片'}加载失败]`
+ )
+ }}
+ />
+ )
+
+ case 'voice':
+ return (
+ >
+ onSelectPerson: (person: PersonInfo) => void
+ onCreateVirtualTab: () => void
+}
+
+export function VirtualIdentityDialog({
+ open,
+ onOpenChange,
+ platforms,
+ persons,
+ isLoadingPlatforms,
+ isLoadingPersons,
+ personSearchQuery,
+ setPersonSearchQuery,
+ tempVirtualConfig,
+ setTempVirtualConfig,
+ onSelectPerson,
+ onCreateVirtualTab,
+}: VirtualIdentityDialogProps) {
+ return (
+
+ )
+}
diff --git a/dashboard/src/routes/chat.tsx b/dashboard/src/routes/chat/index.tsx
similarity index 71%
rename from dashboard/src/routes/chat.tsx
rename to dashboard/src/routes/chat/index.tsx
index 3ab26faa..20f45ae4 100644
--- a/dashboard/src/routes/chat.tsx
+++ b/dashboard/src/routes/chat/index.tsx
@@ -1,277 +1,19 @@
import { useState, useRef, useEffect, useCallback } from 'react'
-import { fetchWithAuth } from '@/lib/fetch-with-auth'
-import { ScrollArea } from '@/components/ui/scroll-area'
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
-// Card 组件已移除，改用更简洁的全屏布局
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
-import { Send, Bot, User, Loader2, WifiOff, Wifi, RefreshCw, Edit2, Users, Search, X, UserCircle2, Globe, Plus, MessageSquare } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { ScrollArea } from '@/components/ui/scroll-area'
import { useToast } from '@/hooks/use-toast'
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select"
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogFooter,
-} from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
+import { fetchWithAuth } from '@/lib/fetch-with-auth'
+import { cn } from '@/lib/utils'
+import { Bot, Edit2, Loader2, RefreshCw, User, Send, Wifi, WifiOff, UserCircle2 } from 'lucide-react'
-// 生成唯一用户 ID
-function generateUserId(): string {
- return 'webui_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now().toString(36)
-}
-
-// 从 localStorage 获取或生成用户 ID
-function getOrCreateUserId(): string {
- const storageKey = 'maibot_webui_user_id'
- let userId = localStorage.getItem(storageKey)
- if (!userId) {
- userId = generateUserId()
- localStorage.setItem(storageKey, userId)
- }
- return userId
-}
-
-// 从 localStorage 获取用户昵称
-function getStoredUserName(): string {
- return localStorage.getItem('maibot_webui_user_name') || 'WebUI用户'
-}
-
-// 保存用户昵称到 localStorage
-function saveUserName(name: string): void {
- localStorage.setItem('maibot_webui_user_name', name)
-}
-
-// 虚拟标签页持久化存储 key
-const VIRTUAL_TABS_STORAGE_KEY = 'maibot_webui_virtual_tabs'
-
-// 保存的虚拟标签页配置
-interface SavedVirtualTab {
- id: string
- label: string
- virtualConfig: VirtualIdentityConfig
- createdAt: number
-}
-
-// 从 localStorage 获取保存的虚拟标签页
-function getSavedVirtualTabs(): SavedVirtualTab[] {
- try {
- const saved = localStorage.getItem(VIRTUAL_TABS_STORAGE_KEY)
- if (saved) {
- return JSON.parse(saved)
- }
- } catch (e) {
- console.error('[Chat] 加载虚拟标签页失败:', e)
- }
- return []
-}
-
-// 保存虚拟标签页到 localStorage
-function saveVirtualTabs(tabs: SavedVirtualTab[]): void {
- try {
- localStorage.setItem(VIRTUAL_TABS_STORAGE_KEY, JSON.stringify(tabs))
- } catch (e) {
- console.error('[Chat] 保存虚拟标签页失败:', e)
- }
-}
-
-// 平台信息类型
-interface PlatformInfo {
- platform: string
- count: number
-}
-
-// 用户信息类型（从后端获取的人物信息）
-interface PersonInfo {
- person_id: string
- user_id: string
- person_name: string
- nickname: string | null
- platform: string
- is_known: boolean
-}
-
-// 虚拟身份配置
-interface VirtualIdentityConfig {
- platform: string
- personId: string
- userId: string
- userName: string
- groupName: string
- groupId: string // 虚拟群 ID，用于持久化历史记录
-}
-
-// 聊天标签页
-interface ChatTab {
- id: string
- type: 'webui' | 'virtual'
- label: string
- virtualConfig?: VirtualIdentityConfig
- messages: ChatMessage[]
- isConnected: boolean
- isTyping: boolean
- sessionInfo: {
- session_id?: string
- user_id?: string
- user_name?: string
- bot_name?: string
- }
-}
-
-// 消息段类型
-interface MessageSegment {
- type: 'text' | 'image' | 'emoji' | 'face' | 'voice' | 'video' | 'music' | 'file' | 'reply' | 'forward' | 'unknown'
- data: string | number | object
- original_type?: string
-}
-
-// 消息类型
-interface ChatMessage {
- id: string
- type: 'user' | 'bot' | 'system' | 'error' | 'thinking'
- content: string
- timestamp: number
- message_type?: 'text' | 'rich' // 消息格式类型
- segments?: MessageSegment[] // 富文本消息段
- sender?: {
- name: string
- user_id?: string
- is_bot?: boolean
- }
-}
-
-// WebSocket 消息类型
-interface WsMessage {
- type: string
- content?: string
- message_id?: string
- timestamp?: number
- is_typing?: boolean
- session_id?: string
- user_id?: string
- user_name?: string
- bot_name?: string
- sender?: {
- name: string
- user_id?: string
- is_bot?: boolean
- }
- // 历史消息列表（用于 type: 'history'）
- messages?: Array<{
- id?: string
- content: string
- timestamp: number
- sender_name?: string
- sender_id?: string
- is_bot?: boolean
- }>
- group_id?: string
- // 富文本消息
- message_type?: string
- segments?: MessageSegment[]
-}
-
-// 渲染单个消息段
-function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
- switch (segment.type) {
- case 'text':
- return {String(segment.data)}
-
- case 'image':
- case 'emoji':
- return (
- {
- // 图片加载失败时显示占位符
- const target = e.target as HTMLImageElement
- target.style.display = 'none'
- target.parentElement?.insertAdjacentHTML(
- 'beforeend',
- `[${segment.type === 'emoji' ? '表情包' : '图片'}加载失败]`
- )
- }}
- />
- )
-
- case 'voice':
- return (
-
+
+
+
+
+
+
+ )
+}
diff --git a/dashboard/src/routes/config/bot/sections/TimeRangePicker.tsx b/dashboard/src/routes/config/bot/sections/TimeRangePicker.tsx
new file mode 100644
index 00000000..c6c7df12
--- /dev/null
+++ b/dashboard/src/routes/config/bot/sections/TimeRangePicker.tsx
@@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+import { Clock } from 'lucide-react'
+
+interface TimeRangePickerProps {
+ value: string
+ onChange: (value: string) => void
+}
+
+// 时间选择组件
+export function TimeRangePicker({ value, onChange }: TimeRangePickerProps) {
+ // 解析初始值
+ const parsedValue = useMemo(() => {
+ const parts = value.split('-')
+ if (parts.length === 2) {
+ const [start, end] = parts
+ const [sh, sm] = start.split(':')
+ const [eh, em] = end.split(':')
+ return {
+ startHour: sh ? sh.padStart(2, '0') : '00',
+ startMinute: sm ? sm.padStart(2, '0') : '00',
+ endHour: eh ? eh.padStart(2, '0') : '23',
+ endMinute: em ? em.padStart(2, '0') : '59',
+ }
+ }
+ return {
+ startHour: '00',
+ startMinute: '00',
+ endHour: '23',
+ endMinute: '59',
+ }
+ }, [value])
+
+ const [startHour, setStartHour] = useState(parsedValue.startHour)
+ const [startMinute, setStartMinute] = useState(parsedValue.startMinute)
+ const [endHour, setEndHour] = useState(parsedValue.endHour)
+ const [endMinute, setEndMinute] = useState(parsedValue.endMinute)
+
+ // 当value变化时同步状态
+ useEffect(() => {
+ setStartHour(parsedValue.startHour)
+ setStartMinute(parsedValue.startMinute)
+ setEndHour(parsedValue.endHour)
+ setEndMinute(parsedValue.endMinute)
+ }, [parsedValue])
+
+ const updateTime = (
+ newStartHour: string,
+ newStartMinute: string,
+ newEndHour: string,
+ newEndMinute: string
+ ) => {
+ const newValue = `${newStartHour}:${newStartMinute}-${newEndHour}:${newEndMinute}`
+ onChange(newValue)
+ }
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/dashboard/src/routes/config/model.tsx b/dashboard/src/routes/config/model.tsx
index ddba7681..8d39dc1c 100644
--- a/dashboard/src/routes/config/model.tsx
+++ b/dashboard/src/routes/config/model.tsx
@@ -179,7 +179,17 @@ function ModelConfigPageContent() {
const loadConfig = useCallback(async () => {
try {
setLoading(true)
- const config = await getModelConfig()
+ const result = await getModelConfig()
+ if (!result.success) {
+ toast({
+ title: '加载失败',
+ description: result.error,
+ variant: 'destructive',
+ })
+ setLoading(false)
+ return
+ }
+ const config = result.data
const modelList = (config.models as ModelInfo[]) || []
setModels(modelList)
@@ -288,11 +298,30 @@ function ModelConfigPageContent() {
try {
setSaving(true)
clearAutoSaveTimers()
- const config = await getModelConfig()
+ const resultGet = await getModelConfig()
+ if (!resultGet.success) {
+ toast({
+ title: '保存失败',
+ description: resultGet.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
+ const config = resultGet.data
// 清理每个模型中的 null 值
config.models = models.map(cleanModelForSave)
config.model_task_config = taskConfig
- await updateModelConfig(config)
+ const resultUpdate = await updateModelConfig(config)
+ if (!resultUpdate.success) {
+ toast({
+ title: '保存失败',
+ description: resultUpdate.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
setHasUnsavedChanges(false)
toast({
title: '保存成功',
@@ -318,11 +347,30 @@ function ModelConfigPageContent() {
// 先取消自动保存定时器
clearAutoSaveTimers()
- const config = await getModelConfig()
+ const resultGet = await getModelConfig()
+ if (!resultGet.success) {
+ toast({
+ title: '保存失败',
+ description: resultGet.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
+ const config = resultGet.data
// 清理每个模型中的 null 值
config.models = models.map(cleanModelForSave)
config.model_task_config = taskConfig
- await updateModelConfig(config)
+ const resultUpdate = await updateModelConfig(config)
+ if (!resultUpdate.success) {
+ toast({
+ title: '保存失败',
+ description: resultUpdate.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
setHasUnsavedChanges(false)
toast({
title: '保存成功',
diff --git a/dashboard/src/routes/config/model/hooks/useModelAutoSave.ts b/dashboard/src/routes/config/model/hooks/useModelAutoSave.ts
index fdb2d57a..3bec158a 100644
--- a/dashboard/src/routes/config/model/hooks/useModelAutoSave.ts
+++ b/dashboard/src/routes/config/model/hooks/useModelAutoSave.ts
@@ -3,6 +3,7 @@
* 监听 models 和 taskConfig 变化，自动保存到服务器
*/
import { useRef, useEffect, useCallback } from 'react'
+import type { RefObject } from 'react'
import { updateModelConfigSection } from '@/lib/config-api'
import type { ModelInfo, ModelTaskConfig } from '../types'
@@ -23,7 +24,7 @@ interface UseModelAutoSaveReturn {
/** 清除所有待执行的保存定时器 */
clearTimers: () => void
/** 初始加载状态标记引用 (用于设置初始加载完成) */
- initialLoadRef: React.MutableRefObject
+ initialLoadRef: RefObject
}
/**
@@ -84,7 +85,10 @@ export function useModelAutoSave(
onSavingChange?.(true)
// 清理每个模型中的 null 值
const cleanedModels = newModels.map(cleanModelForSave)
- await updateModelConfigSection('models', cleanedModels)
+ const result = await updateModelConfigSection('models', cleanedModels)
+ if (!result.success) {
+ throw new Error(result.error)
+ }
onUnsavedChange?.(false)
} catch (error) {
console.error('自动保存模型列表失败:', error)
@@ -98,7 +102,10 @@ export function useModelAutoSave(
const autoSaveTaskConfig = useCallback(async (newTaskConfig: ModelTaskConfig) => {
try {
onSavingChange?.(true)
- await updateModelConfigSection('model_task_config', newTaskConfig)
+ const result = await updateModelConfigSection('model_task_config', newTaskConfig)
+ if (!result.success) {
+ throw new Error(result.error)
+ }
onUnsavedChange?.(false)
} catch (error) {
console.error('自动保存任务配置失败:', error)
diff --git a/dashboard/src/routes/config/model/hooks/useModelFetcher.ts b/dashboard/src/routes/config/model/hooks/useModelFetcher.ts
index 2073b95d..073c6bfa 100644
--- a/dashboard/src/routes/config/model/hooks/useModelFetcher.ts
+++ b/dashboard/src/routes/config/model/hooks/useModelFetcher.ts
@@ -88,11 +88,15 @@ export function useModelFetcher(options: UseModelFetcherOptions): UseModelFetche
setModelFetchError(null)
try {
- const models = await fetchProviderModels(
+ const result = await fetchProviderModels(
providerName,
template.modelFetcher.parser,
template.modelFetcher.endpoint
)
+ if (!result.success) {
+ throw new Error(result.error)
+ }
+ const models = result.data
setAvailableModels(models)
// 更新缓存
modelListCache.set(cacheKey, { models, timestamp: Date.now() })
diff --git a/dashboard/src/routes/config/modelProvider.tsx b/dashboard/src/routes/config/modelProvider.tsx
deleted file mode 100644
index 9dd675e4..00000000
--- a/dashboard/src/routes/config/modelProvider.tsx
+++ /dev/null
@@ -1,1713 +0,0 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
-
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/table'
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from '@/components/ui/dialog'
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/select'
-import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from '@/components/ui/command'
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from '@/components/ui/popover'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Badge } from '@/components/ui/badge'
-import { Plus, Pencil, Trash2, Save, Eye, EyeOff, Copy, Search, Info, Power, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Check, ChevronsUpDown, Zap, Loader2, CheckCircle2, XCircle, AlertCircle } from 'lucide-react'
-import { getModelConfig, updateModelConfig, updateModelConfigSection, testProviderConnection, type TestConnectionResult } from '@/lib/config-api'
-import { useToast } from '@/hooks/use-toast'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { HelpTooltip } from '@/components/ui/help-tooltip'
-import { useTour } from '@/components/tour'
-import { MODEL_ASSIGNMENT_TOUR_ID, modelAssignmentTourSteps, STEP_ROUTE_MAP } from '@/components/tour/tours/model-assignment-tour'
-import { useNavigate } from '@tanstack/react-router'
-import { RestartOverlay } from '@/components/restart-overlay'
-import { RestartProvider, useRestart } from '@/lib/restart-context'
-import { PROVIDER_TEMPLATES } from './providerTemplates'
-import type { APIProvider, DeleteConfirmState, FormErrors } from './modelProvider/types'
-import { cleanProviderData, validateProvider } from './modelProvider/utils'
-
-// 主导出组件：包装 RestartProvider
-export function ModelProviderConfigPage() {
- return (
-
-
- )
-}
-
-// 内部实现组件
-function ModelProviderConfigPageContent() {
- const [providers, setProviders] = useState([])
- const [loading, setLoading] = useState(true)
- const [saving, setSaving] = useState(false)
- const [autoSaving, setAutoSaving] = useState(false)
- const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
- const [editDialogOpen, setEditDialogOpen] = useState(false)
- const [editingProvider, setEditingProvider] = useState(null)
- const [editingIndex, setEditingIndex] = useState(null)
- const [selectedTemplate, setSelectedTemplate] = useState('custom')
- const [templateComboboxOpen, setTemplateComboboxOpen] = useState(false)
- const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
- const [deletingIndex, setDeletingIndex] = useState(null)
- const [showApiKey, setShowApiKey] = useState(false)
- const [searchQuery, setSearchQuery] = useState('')
- const [selectedProviders, setSelectedProviders] = useState>(new Set())
- const [batchDeleteDialogOpen, setBatchDeleteDialogOpen] = useState(false)
- const [page, setPage] = useState(1)
- const [pageSize, setPageSize] = useState(20)
- const [jumpToPage, setJumpToPage] = useState('')
-
- // 删除提供商确认对话框状态（合并为单个对象以减少状态变量）
- const [deleteConfirmState, setDeleteConfirmState] = useState({
- isOpen: false,
- providersToDelete: [],
- affectedModels: [],
- pendingProviders: [],
- context: 'auto',
- oldProviders: [],
- })
-
- // 表单验证错误状态
- const [formErrors, setFormErrors] = useState({})
-
- // 测试连接状态
- const [testingProviders, setTestingProviders] = useState>(new Set())
- const [testResults, setTestResults] = useState>(new Map())
-
- const { toast } = useToast()
- const navigate = useNavigate()
- const { state: tourState, goToStep, registerTour } = useTour()
- const { triggerRestart, isRestarting } = useRestart()
-
- // 用于防抖的定时器
- const autoSaveTimerRef = useRef | null>(null)
- const initialLoadRef = useRef(true)
-
- // 注册 Tour（确保跨页导航时 Tour 仍然可用）
- useEffect(() => {
- registerTour(MODEL_ASSIGNMENT_TOUR_ID, modelAssignmentTourSteps)
- }, [registerTour])
-
- // 监听 Tour 步骤变化，处理页面导航
- useEffect(() => {
- if (tourState.activeTourId === MODEL_ASSIGNMENT_TOUR_ID && tourState.isRunning) {
- const targetRoute = STEP_ROUTE_MAP[tourState.stepIndex]
- if (targetRoute && !window.location.pathname.endsWith(targetRoute.replace('/config/', ''))) {
- navigate({ to: targetRoute })
- }
- }
- }, [tourState.stepIndex, tourState.activeTourId, tourState.isRunning, navigate])
-
- // 监听 Tour 步骤变化，处理弹窗的打开和关闭
- // 提供商弹窗步骤: 3-9 (index 3-9)，弹窗外步骤: 0-2 (index 0-2) 和 10+ (index 10+)
- const prevTourStepRef = useRef(tourState.stepIndex)
- useEffect(() => {
- if (tourState.activeTourId === MODEL_ASSIGNMENT_TOUR_ID && tourState.isRunning) {
- const prevStep = prevTourStepRef.current
- const currentStep = tourState.stepIndex
-
- // 如果从弹窗内步骤 (3-9) 回退到弹窗外步骤 (0-2)，关闭弹窗
- if (prevStep >= 3 && prevStep <= 9 && currentStep < 3) {
- setEditDialogOpen(false)
- }
-
- // 如果从弹窗外步骤 (10+) 回退到弹窗内步骤 (3-9)，重新打开弹窗
- // 这处理了从模型管理页面第 11 步点击"上一步"回到提供商弹窗的情况
- if (prevStep >= 10 && currentStep >= 3 && currentStep <= 9) {
- // 需要打开空白弹窗以便 Tour 可以定位到弹窗内的元素
- setFormErrors({})
- setSelectedTemplate('custom')
- setEditingProvider({
- name: '',
- base_url: '',
- api_key: '',
- client_type: 'openai',
- max_retry: 2,
- timeout: 30,
- retry_interval: 10,
- })
- setEditingIndex(null)
- setShowApiKey(false)
- setEditDialogOpen(true)
- }
-
- prevTourStepRef.current = currentStep
- }
- }, [tourState.stepIndex, tourState.activeTourId, tourState.isRunning])
-
- // 处理 Tour 中需要用户点击才能继续的步骤
- useEffect(() => {
- if (tourState.activeTourId !== MODEL_ASSIGNMENT_TOUR_ID || !tourState.isRunning) return
-
- const handleTourClick = (e: MouseEvent) => {
- const target = e.target as HTMLElement
- const currentStep = tourState.stepIndex
-
- // Step 3 (index 2): 点击添加提供商按钮
- if (currentStep === 2 && target.closest('[data-tour="add-provider-button"]')) {
- setTimeout(() => goToStep(3), 300)
- }
- // Step 10 (index 9): 点击取消按钮（关闭提供商弹窗）
- else if (currentStep === 9 && target.closest('[data-tour="provider-cancel-button"]')) {
- setTimeout(() => goToStep(10), 300)
- }
- }
-
- document.addEventListener('click', handleTourClick, true)
- return () => document.removeEventListener('click', handleTourClick, true)
- }, [tourState, goToStep])
-
- // 加载配置
- useEffect(() => {
- loadConfig()
- }, [])
-
- const loadConfig = async () => {
- try {
- setLoading(true)
- const config = await getModelConfig()
- setProviders((config.api_providers as APIProvider[]) || [])
- setHasUnsavedChanges(false)
- initialLoadRef.current = false
- } catch (error) {
- console.error('加载配置失败:', error)
- } finally {
- setLoading(false)
- }
- }
-
- // 重启麦麦
- const handleRestart = async () => {
- await triggerRestart()
- }
-
- // 保存并重启
- const handleSaveAndRestart = async () => {
- try {
- setSaving(true)
- if (autoSaveTimerRef.current) {
- clearTimeout(autoSaveTimerRef.current)
- }
-
- // 清理 providers 数据：将 null 值转换为默认值
- const cleanedProviders = providers.map(provider => ({
- ...provider,
- max_retry: provider.max_retry ?? 2,
- timeout: provider.timeout ?? 30,
- retry_interval: provider.retry_interval ?? 10,
- }))
-
- // 检查删除提供商的影响
- const { shouldProceed } = await checkDeleteProviderImpact(cleanedProviders, 'restart')
- if (!shouldProceed) {
- // 需要用户确认，等待确认对话框
- setSaving(false)
- return
- }
-
- const config = await getModelConfig()
-
- // 获取所有有效的 provider 名称
- const validProviderNames = new Set(cleanedProviders.map(p => p.name))
-
- // 过滤掉引用已删除 provider 的模型
- const originalModels = (config.models as any[]) || []
- const filteredModels = originalModels.filter((model: any) => {
- return validProviderNames.has(model.api_provider)
- })
-
- config.api_providers = cleanedProviders
- config.models = filteredModels
-
- await updateModelConfig(config)
- setHasUnsavedChanges(false)
- toast({
- title: '保存成功',
- description: '正在重启麦麦...',
- })
- await handleRestart()
- } catch (error) {
- console.error('保存配置失败:', error)
- toast({
- title: '保存失败',
- description: (error as Error).message,
- variant: 'destructive',
- })
- setSaving(false)
- }
- }
-
- // 检查删除提供商的影响
- const checkDeleteProviderImpact = useCallback(async (
- newProviders: APIProvider[],
- context: 'auto' | 'manual' | 'restart' = 'auto'
- ) => {
- try {
- const config = await getModelConfig()
- const oldProviderNames = new Set(providers.map(p => p.name))
- const newProviderNames = new Set(newProviders.map(p => p.name))
-
- // 找出被删除的提供商
- const deletedProviders = Array.from(oldProviderNames).filter(
- name => !newProviderNames.has(name)
- )
-
- if (deletedProviders.length === 0) {
- // 没有删除提供商，直接保存
- return { shouldProceed: true, providers: newProviders }
- }
-
- // 检查受影响的模型
- const models = (config.models as any[]) || []
- const affected = models.filter((m: any) =>
- deletedProviders.includes(m.api_provider)
- )
-
- if (affected.length === 0) {
- // 没有受影响的模型，直接删除
- return { shouldProceed: true, providers: newProviders }
- }
-
- // 有受影响的模型，需要用户确认
- setDeleteConfirmState({
- isOpen: true,
- providersToDelete: deletedProviders,
- affectedModels: affected,
- pendingProviders: newProviders,
- context,
- oldProviders: [...providers],
- })
-
- return { shouldProceed: false, providers: newProviders }
- } catch (error) {
- console.error('检查删除影响失败:', error)
- return { shouldProceed: true, providers: newProviders }
- }
- }, [providers])
-
- // 确认删除提供商及其关联的模型
- const handleConfirmDeleteProvider = async () => {
- try {
- const savingFlag = deleteConfirmState.context === 'auto' ? setAutoSaving : setSaving
- savingFlag(true)
-
- setDeleteConfirmState(prev => ({ ...prev, isOpen: false }))
-
- const config = await getModelConfig()
-
- // 清理 providers 数据
- const cleanedProviders = deleteConfirmState.pendingProviders.map(cleanProviderData)
-
- // 获取有效的 provider 名称
- const validProviderNames = new Set(cleanedProviders.map(p => p.name))
-
- // 过滤掉引用已删除 provider 的模型
- const originalModels = (config.models as any[]) || []
- const filteredModels = originalModels.filter((model: any) => {
- return validProviderNames.has(model.api_provider)
- })
-
- // 获取被删除的模型名称
- const deletedModelNames = new Set(
- deleteConfirmState.affectedModels.map((m: any) => m.name)
- )
-
- // 从任务配置中移除这些模型
- const modelTaskConfig = config.model_task_config as any
- if (modelTaskConfig) {
- Object.keys(modelTaskConfig).forEach(taskName => {
- const task = modelTaskConfig[taskName]
- if (task && Array.isArray(task.model_list)) {
- task.model_list = task.model_list.filter(
- (modelName: string) => !deletedModelNames.has(modelName)
- )
- }
- })
- }
-
- // 更新配置
- config.api_providers = cleanedProviders
- config.models = filteredModels
- config.model_task_config = modelTaskConfig
-
- await updateModelConfig(config)
-
- // 更新本地状态
- setProviders(deleteConfirmState.pendingProviders)
- setHasUnsavedChanges(false)
-
- toast({
- title: '删除成功',
- description: `已删除 ${deleteConfirmState.providersToDelete.length} 个提供商和 ${deleteConfirmState.affectedModels.length} 个关联模型`,
- })
-
- // 清理状态
- setDeleteConfirmState({
- isOpen: false,
- providersToDelete: [],
- affectedModels: [],
- pendingProviders: [],
- context: 'auto',
- oldProviders: [],
- })
- setSelectedProviders(new Set()) // 清除选中状态（批量删除时）
-
- // 根据上下文执行后续操作
- if (deleteConfirmState.context === 'restart') {
- // 如果是保存并重启，继续执行重启流程
- await handleRestart()
- }
- } catch (error) {
- console.error('删除失败:', error)
- toast({
- title: '删除失败',
- description: (error as Error).message,
- variant: 'destructive',
- })
- } finally {
- if (deleteConfirmState.context === 'auto') {
- setAutoSaving(false)
- } else {
- setSaving(false)
- }
- }
- }
-
- // 取消删除提供商
- const handleCancelDeleteProvider = () => {
- // 恢复到删除前的 providers 状态
- if (deleteConfirmState.oldProviders.length > 0) {
- setProviders(deleteConfirmState.oldProviders)
- }
- // 清理状态
- setDeleteConfirmState({
- isOpen: false,
- providersToDelete: [],
- affectedModels: [],
- pendingProviders: [],
- context: 'auto',
- oldProviders: [],
- })
- setHasUnsavedChanges(false)
- }
-
- // 自动保存函数（使用增量 API）
- const autoSaveProviders = useCallback(async (newProviders: APIProvider[]) => {
- if (initialLoadRef.current) return // 初始加载时不自动保存
-
- // 检查删除影响
- const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'auto')
-
- if (!shouldProceed) {
- // 需要用户确认，对话框已打开
- setHasUnsavedChanges(true)
- return
- }
-
- try {
- setAutoSaving(true)
- // 清理 providers 数据：将 null 值转换为默认值
- const cleanedProviders = newProviders.map(cleanProviderData)
- await updateModelConfigSection('api_providers', cleanedProviders)
- setHasUnsavedChanges(false)
- } catch (error) {
- console.error('自动保存失败:', error)
- toast({
- title: '自动保存失败',
- description: (error as Error).message,
- variant: 'destructive',
- })
- setHasUnsavedChanges(true)
- } finally {
- setAutoSaving(false)
- }
- }, [providers, checkDeleteProviderImpact])
-
- // 监听 providers 变化，触发自动保存（带防抖）
- useEffect(() => {
- if (initialLoadRef.current) return
-
- setHasUnsavedChanges(true)
-
- // 清除之前的定时器
- if (autoSaveTimerRef.current) {
- clearTimeout(autoSaveTimerRef.current)
- }
-
- // 设置新的定时器（2秒后自动保存）
- autoSaveTimerRef.current = setTimeout(() => {
- autoSaveProviders(providers)
- }, 2000)
-
- // 清理函数
- return () => {
- if (autoSaveTimerRef.current) {
- clearTimeout(autoSaveTimerRef.current)
- }
- }
- }, [providers, autoSaveProviders])
-
- // 保存配置（手动保存，保存完整配置）
- const saveConfig = async () => {
- try {
- setSaving(true)
-
- // 先取消自动保存定时器
- if (autoSaveTimerRef.current) {
- clearTimeout(autoSaveTimerRef.current)
- }
-
- // 清理 providers 数据：将 null 值转换为默认值
- const cleanedProviders = providers.map(cleanProviderData)
-
- // 检查删除提供商的影响
- const { shouldProceed } = await checkDeleteProviderImpact(cleanedProviders, 'manual')
- if (!shouldProceed) {
- // 需要用户确认，等待确认对话框
- setSaving(false)
- return
- }
-
- const config = await getModelConfig()
-
- // 获取所有有效的 provider 名称
- const validProviderNames = new Set(cleanedProviders.map(p => p.name))
-
- // 过滤掉引用已删除 provider 的模型
- const originalModels = (config.models as any[]) || []
- const filteredModels = originalModels.filter((model: any) => {
- const isValid = validProviderNames.has(model.api_provider)
- if (!isValid) {
- console.warn(`模型 "${model.name}" 引用了已删除的提供商 "${model.api_provider}"，将被移除`)
- }
- return isValid
- })
-
- // 如果有模型被移除，显示警告
- if (originalModels.length !== filteredModels.length) {
- const removedCount = originalModels.length - filteredModels.length
- toast({
- title: '注意',
- description: `已自动移除 ${removedCount} 个引用已删除提供商的模型`,
- variant: 'default',
- })
- }
-
- console.log('发送的 providers 数据:', cleanedProviders)
- config.api_providers = cleanedProviders
- config.models = filteredModels
- console.log('完整配置数据:', config)
-
- await updateModelConfig(config)
- setHasUnsavedChanges(false)
- toast({
- title: '保存成功',
- description: '模型提供商配置已保存',
- })
- } catch (error) {
- console.error('保存配置失败:', error)
- toast({
- title: '保存失败',
- description: (error as Error).message,
- variant: 'destructive',
- })
- } finally {
- setSaving(false)
- }
- }
-
- // 打开编辑对话框
- const openEditDialog = (provider: APIProvider | null, index: number | null) => {
- // 清除表单验证错误
- setFormErrors({})
-
- if (provider) {
- // 编辑现有提供商 - 检测匹配的模板
- const matchedTemplate = PROVIDER_TEMPLATES.find(
- t => t.base_url === provider.base_url && t.client_type === provider.client_type
- )
- setSelectedTemplate(matchedTemplate?.id || 'custom')
- setEditingProvider(provider)
- } else {
- // 新建提供商 - 默认使用自定义模板
- setSelectedTemplate('custom')
- setEditingProvider({
- name: '',
- base_url: '',
- api_key: '',
- client_type: 'openai',
- max_retry: 2,
- timeout: 30,
- retry_interval: 10,
- })
- }
- setEditingIndex(index)
- setShowApiKey(false)
- setEditDialogOpen(true)
- }
-
- // 处理模板选择变化
- const handleTemplateChange = useCallback((templateId: string) => {
- setSelectedTemplate(templateId)
- setTemplateComboboxOpen(false)
- const template = PROVIDER_TEMPLATES.find(t => t.id === templateId)
- if (template && template.id !== 'custom') {
- // 应用模板配置
- setEditingProvider(prev => ({
- ...prev!,
- name: template.name,
- base_url: template.base_url,
- client_type: template.client_type,
- }))
- } else if (template?.id === 'custom') {
- // 切换到自定义模板 - 清空URL和客户端类型(保留其他字段)
- setEditingProvider(prev => ({
- ...prev!,
- name: '',
- base_url: '',
- client_type: 'openai',
- }))
- }
- }, [])
-
- // 判断当前是否使用模板(非自定义)
- const isUsingTemplate = useMemo(() => {
- return selectedTemplate !== 'custom'
- }, [selectedTemplate])
-
- // 复制 API Key
- const copyApiKey = useCallback(async () => {
- if (!editingProvider?.api_key) return
- try {
- await navigator.clipboard.writeText(editingProvider.api_key)
- toast({
- title: '复制成功',
- description: 'API Key 已复制到剪贴板',
- })
- } catch {
- toast({
- title: '复制失败',
- description: '无法访问剪贴板',
- variant: 'destructive',
- })
- }
- }, [editingProvider?.api_key, toast])
-
- // 保存编辑
- const handleSaveEdit = () => {
- if (!editingProvider) return
-
- // 验证必填项（传入现有提供商列表和当前编辑索引用于重复检查）
- const { isValid, errors } = validateProvider(editingProvider, providers, editingIndex)
-
- if (!isValid) {
- setFormErrors(errors)
- return
- }
-
- // 清除错误状态
- setFormErrors({})
-
- // 填充空值的默认值
- const providerToSave = cleanProviderData(editingProvider)
-
- if (editingIndex !== null) {
- // 更新现有提供商
- const newProviders = [...providers]
- newProviders[editingIndex] = providerToSave
- setProviders(newProviders)
- } else {
- // 添加新提供商
- setProviders([...providers, providerToSave])
- }
-
- setEditDialogOpen(false)
- setEditingProvider(null)
- setEditingIndex(null)
- }
-
- // 处理编辑对话框关闭
- const handleEditDialogClose = (open: boolean) => {
- if (!open && editingProvider) {
- // 关闭时填充默认值
- const updatedProvider = {
- ...editingProvider,
- max_retry: editingProvider.max_retry ?? 2,
- timeout: editingProvider.timeout ?? 30,
- retry_interval: editingProvider.retry_interval ?? 10,
- }
- setEditingProvider(updatedProvider)
- }
- setEditDialogOpen(open)
- }
-
- // 打开删除确认对话框
- const openDeleteDialog = (index: number) => {
- setDeletingIndex(index)
- setDeleteDialogOpen(true)
- }
-
- // 确认删除提供商
- const handleConfirmDelete = async () => {
- if (deletingIndex !== null) {
- const newProviders = providers.filter((_, i) => i !== deletingIndex)
-
- // 检查删除影响
- const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'manual')
-
- if (shouldProceed) {
- // 没有影响，直接删除
- setProviders(newProviders)
- toast({
- title: '删除成功',
- description: '提供商已从列表中移除',
- })
- }
- // 如果 shouldProceed = false，对话框会自动打开，等待用户确认
- }
- setDeleteDialogOpen(false)
- setDeletingIndex(null)
- }
-
- // 切换单个提供商选择
- const toggleProviderSelection = (index: number) => {
- const newSelected = new Set(selectedProviders)
- if (newSelected.has(index)) {
- newSelected.delete(index)
- } else {
- newSelected.add(index)
- }
- setSelectedProviders(newSelected)
- }
-
- // 全选/取消全选
- const toggleSelectAll = () => {
- if (selectedProviders.size === filteredProviders.length) {
- setSelectedProviders(new Set())
- } else {
- const allIndices = filteredProviders.map((_, idx) =>
- providers.findIndex(p => p === filteredProviders[idx])
- )
- setSelectedProviders(new Set(allIndices))
- }
- }
-
- // 打开批量删除确认对话框
- const openBatchDeleteDialog = () => {
- if (selectedProviders.size === 0) {
- toast({
- title: '提示',
- description: '请先选择要删除的提供商',
- variant: 'default',
- })
- return
- }
- setBatchDeleteDialogOpen(true)
- }
-
- // 确认批量删除
- const handleConfirmBatchDelete = async () => {
- const newProviders = providers.filter((_, index) => !selectedProviders.has(index))
-
- // 检查删除影响
- const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'manual')
-
- if (shouldProceed) {
- // 没有影响，直接删除
- setProviders(newProviders)
- setSelectedProviders(new Set())
- toast({
- title: '批量删除成功',
- description: `已删除 ${selectedProviders.size} 个提供商`,
- })
- }
- // 如果 shouldProceed = false，对话框会自动打开，等待用户确认
-
- setBatchDeleteDialogOpen(false)
- }
-
- // 过滤提供商列表（使用 useMemo 优化性能）
- const filteredProviders = useMemo(() => {
- if (!searchQuery) return providers
- const query = searchQuery.toLowerCase()
- return providers.filter((provider) => (
- provider.name.toLowerCase().includes(query) ||
- provider.base_url.toLowerCase().includes(query) ||
- provider.client_type.toLowerCase().includes(query)
- ))
- }, [providers, searchQuery])
-
- // 分页逻辑（使用 useMemo 优化性能）
- const { totalPages, paginatedProviders } = useMemo(() => {
- const total = Math.ceil(filteredProviders.length / pageSize)
- const paginated = filteredProviders.slice(
- (page - 1) * pageSize,
- page * pageSize
- )
- return { totalPages: total, paginatedProviders: paginated }
- }, [filteredProviders, page, pageSize])
-
- // 页码跳转
- const handleJumpToPage = useCallback(() => {
- const targetPage = parseInt(jumpToPage)
- if (targetPage >= 1 && targetPage <= totalPages) {
- setPage(targetPage)
- setJumpToPage('')
- }
- }, [jumpToPage, totalPages])
-
- // 测试单个提供商连接
- const handleTestConnection = async (providerName: string) => {
- // 标记正在测试
- setTestingProviders(prev => new Set(prev).add(providerName))
-
- try {
- const result = await testProviderConnection(providerName)
- setTestResults(prev => new Map(prev).set(providerName, result))
-
- // 显示结果 toast
- if (result.network_ok) {
- if (result.api_key_valid === true) {
- toast({
- title: '连接正常',
- description: `${providerName} 网络连接正常，API Key 有效 (${result.latency_ms}ms)`,
- })
- } else if (result.api_key_valid === false) {
- toast({
- title: '连接正常但 Key 无效',
- description: `${providerName} 网络连接正常，但 API Key 无效或已过期`,
- variant: 'destructive',
- })
- } else {
- toast({
- title: '网络连接正常',
- description: `${providerName} 可以访问 (${result.latency_ms}ms)`,
- })
- }
- } else {
- toast({
- title: '连接失败',
- description: result.error || '无法连接到提供商',
- variant: 'destructive',
- })
- }
- } catch (error) {
- toast({
- title: '测试失败',
- description: (error as Error).message,
- variant: 'destructive',
- })
- } finally {
- setTestingProviders(prev => {
- const newSet = new Set(prev)
- newSet.delete(providerName)
- return newSet
- })
- }
- }
-
- // 批量测试所有提供商
- const handleTestAllConnections = async () => {
- for (const provider of providers) {
- await handleTestConnection(provider.name)
- }
- }
-
- // 渲染测试状态指示器
- const renderTestStatus = (providerName: string) => {
- const isTesting = testingProviders.has(providerName)
- const result = testResults.get(providerName)
-
- if (isTesting) {
- return (
-
-
- )
- }
-
- if (!result) return null
-
- if (result.network_ok) {
- if (result.api_key_valid === true) {
- return (
-
-
- )
- } else if (result.api_key_valid === false) {
- return (
-
-
- )
- } else {
- return (
-
-
- )
- }
- } else {
- return (
-
-
- )
- }
- }
-
- if (loading) {
- return (
-
-
- setMobileMenuOpen(false)}
+ />
+ )}
+
+ {/* Main content */}
+
+
+ )
+}
diff --git a/dashboard/src/components/layout/LogoArea.tsx b/dashboard/src/components/layout/LogoArea.tsx
new file mode 100644
index 00000000..27e0441a
--- /dev/null
+++ b/dashboard/src/components/layout/LogoArea.tsx
@@ -0,0 +1,36 @@
+import { cn } from '@/lib/utils'
+import { formatVersion } from '@/lib/version'
+
+interface LogoAreaProps {
+ sidebarOpen: boolean
+}
+
+export function LogoArea({ sidebarOpen }: LogoAreaProps) {
+ return (
+
+ {/* HTTP 安全警告横幅 */}
+ setSidebarOpen(!sidebarOpen)}
+ onMobileMenuToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
+ onSearchOpenChange={setSearchOpen}
+ onThemeChange={setTheme}
+ />
+
+ {/* Page content */}
+
+
+
+ {/* Back to Top Button */}
+
+
+
+ )
+}
diff --git a/dashboard/src/components/layout/NavItem.tsx b/dashboard/src/components/layout/NavItem.tsx
new file mode 100644
index 00000000..d5158137
--- /dev/null
+++ b/dashboard/src/components/layout/NavItem.tsx
@@ -0,0 +1,79 @@
+import { Link, useMatchRoute } from '@tanstack/react-router'
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+
+import type { MenuItem } from './types'
+
+interface NavItemProps {
+ item: MenuItem
+ sidebarOpen: boolean
+ tooltipsEnabled: boolean
+ onMobileMenuClose: () => void
+}
+
+export function NavItem({ item, sidebarOpen, tooltipsEnabled, onMobileMenuClose }: NavItemProps) {
+ const matchRoute = useMatchRoute()
+ const isActive = matchRoute({ to: item.path })
+ const Icon = item.icon
+
+ const menuItemContent = (
+ <>
+ {/* 左侧高亮条 */}
+ {isActive && (
+
+ )}
+
+ {/* 移动端始终显示完整 Logo，桌面端根据 sidebarOpen 切换 */}
+
+
+ MaiBot WebUI
+
+ {formatVersion()}
+
+
+ {/* 折叠时的 Logo - 仅桌面端显示 */}
+ {!sidebarOpen && (
+ M
+ )}
+
+
+
+ )
+
+ return (
+ {item.label}
+
+
+ )
+}
diff --git a/dashboard/src/routes/chat/MessageRenderer.tsx b/dashboard/src/routes/chat/MessageRenderer.tsx
new file mode 100644
index 00000000..32026db5
--- /dev/null
+++ b/dashboard/src/routes/chat/MessageRenderer.tsx
@@ -0,0 +1,96 @@
+import { cn } from '@/lib/utils'
+
+import type { ChatMessage, MessageSegment } from './types'
+
+// 渲染单个消息段
+export function RenderMessageSegment({ segment }: { segment: MessageSegment }) {
+ switch (segment.type) {
+ case 'text':
+ return {String(segment.data)}
+
+ case 'image':
+ case 'emoji':
+ return (
+
+
+
+ {tabs.map((tab) => (
+
+ onSwitch(tab.id)}
+ >
+ {tab.type === 'webui' ? (
+
+ ))}
+ {/* 新建虚拟身份标签页按钮 */}
+
+
+
+
+ )
+
+ case 'video':
+ return (
+
+ )
+
+ case 'face':
+ // QQ 原生表情，显示为文本
+ return [表情:{String(segment.data)}]
+
+ case 'music':
+ return [音乐分享]
+
+ case 'file':
+ return [文件: {String(segment.data)}]
+
+ case 'reply':
+ return [回复消息]
+
+ case 'forward':
+ return [转发消息]
+
+ case 'unknown':
+ default:
+ return [{segment.original_type || '未知消息'}]
+ }
+}
+
+// 渲染消息内容（支持富文本）
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function RenderMessageContent({ message, isBot: _isBot }: { message: ChatMessage; isBot: boolean }) {
+ // 如果是富文本消息，渲染消息段
+ if (message.message_type === 'rich' && message.segments && message.segments.length > 0) {
+ return (
+
+ {message.segments.map((segment, index) => (
+
+ )
+ }
+
+ // 普通文本消息
+ return {message.content}
+}
diff --git a/dashboard/src/routes/chat/VirtualIdentityDialog.tsx b/dashboard/src/routes/chat/VirtualIdentityDialog.tsx
new file mode 100644
index 00000000..a150a746
--- /dev/null
+++ b/dashboard/src/routes/chat/VirtualIdentityDialog.tsx
@@ -0,0 +1,206 @@
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from '@/components/ui/input'
+import { Label } from "@/components/ui/label"
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { cn } from '@/lib/utils'
+import { Globe, Loader2, Search, UserCircle2, Users } from 'lucide-react'
+
+import type { PersonInfo, PlatformInfo, VirtualIdentityConfig } from './types'
+
+interface VirtualIdentityDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ platforms: PlatformInfo[]
+ persons: PersonInfo[]
+ isLoadingPlatforms: boolean
+ isLoadingPersons: boolean
+ personSearchQuery: string
+ setPersonSearchQuery: (query: string) => void
+ tempVirtualConfig: VirtualIdentityConfig
+ setTempVirtualConfig: React.Dispatch
-
-
- )
-
- case 'video':
- return (
-
- )
-
- case 'face':
- // QQ 原生表情，显示为文本
- return [表情:{String(segment.data)}]
-
- case 'music':
- return [音乐分享]
-
- case 'file':
- return [文件: {String(segment.data)}]
-
- case 'reply':
- return [回复消息]
-
- case 'forward':
- return [转发消息]
-
- case 'unknown':
- default:
- return [{segment.original_type || '未知消息'}]
- }
-}
-
-// 渲染消息内容（支持富文本）
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function RenderMessageContent({ message, isBot: _isBot }: { message: ChatMessage; isBot: boolean }) {
- // 如果是富文本消息，渲染消息段
- if (message.message_type === 'rich' && message.segments && message.segments.length > 0) {
- return (
-
- {message.segments.map((segment, index) => (
-
- )
- }
-
- // 普通文本消息
- return {message.content}
-}
+import { ChatTabBar } from './ChatTabBar'
+import { RenderMessageContent } from './MessageRenderer'
+import type { ChatTab, ChatMessage, PersonInfo, PlatformInfo, SavedVirtualTab, VirtualIdentityConfig, WsMessage } from './types'
+import { getOrCreateUserId, getStoredUserName, getSavedVirtualTabs, saveUserName, saveVirtualTabs } from './utils'
+import { VirtualIdentityDialog } from './VirtualIdentityDialog'
export function ChatPage() {
// 默认 WebUI 标签页
@@ -685,7 +427,7 @@ export function ChatPage() {
type: 'bot',
content: data.content || '',
message_type: (data.message_type === 'rich' ? 'rich' : 'text') as 'text' | 'rich',
- segments: data.segments as MessageSegment[] | undefined,
+ segments: data.segments,
timestamp: data.timestamp || Date.now() / 1000,
sender: data.sender,
}
@@ -1064,7 +806,7 @@ export function ChatPage() {
}
// 关闭标签页
- const closeTab = (tabId: string, e?: React.MouseEvent) => {
+ const closeTab = (tabId: string, e?: React.MouseEvent | React.KeyboardEvent) => {
e?.stopPropagation()
// 不能关闭默认 WebUI 标签页
@@ -1129,214 +871,29 @@ export function ChatPage() {
return (
{/* 虚拟身份配置对话框 */}
-
+ onChange?.(newConfig)}
/>
)
diff --git a/dashboard/src/routes/config/bot/hooks/DebugSectionHook.tsx b/dashboard/src/routes/config/bot/hooks/DebugSectionHook.tsx
index f5b63e11..9e4eae9a 100644
--- a/dashboard/src/routes/config/bot/hooks/DebugSectionHook.tsx
+++ b/dashboard/src/routes/config/bot/hooks/DebugSectionHook.tsx
@@ -1,4 +1,6 @@
import type { FieldHookComponent } from '@/lib/field-hooks'
+
+import type { DebugConfig } from '../types'
import { DebugSection } from '../sections/DebugSection'
/**
@@ -8,7 +10,7 @@ import { DebugSection } from '../sections/DebugSection'
export const DebugSectionHook: FieldHookComponent = ({ value, onChange }) => {
return (
onChange?.(newConfig)}
/>
)
diff --git a/dashboard/src/routes/config/bot/hooks/ExpressionSectionHook.tsx b/dashboard/src/routes/config/bot/hooks/ExpressionSectionHook.tsx
index d2f9ee01..6ff6c49d 100644
--- a/dashboard/src/routes/config/bot/hooks/ExpressionSectionHook.tsx
+++ b/dashboard/src/routes/config/bot/hooks/ExpressionSectionHook.tsx
@@ -1,4 +1,6 @@
import type { FieldHookComponent } from '@/lib/field-hooks'
+
+import type { ExpressionConfig } from '../types'
import { ExpressionSection } from '../sections/ExpressionSection'
/**
@@ -8,7 +10,7 @@ import { ExpressionSection } from '../sections/ExpressionSection'
export const ExpressionSectionHook: FieldHookComponent = ({ value, onChange }) => {
return (
onChange?.(newConfig)}
/>
)
diff --git a/dashboard/src/routes/config/bot/hooks/PersonalitySectionHook.tsx b/dashboard/src/routes/config/bot/hooks/PersonalitySectionHook.tsx
index d97b86ea..32ab8cee 100644
--- a/dashboard/src/routes/config/bot/hooks/PersonalitySectionHook.tsx
+++ b/dashboard/src/routes/config/bot/hooks/PersonalitySectionHook.tsx
@@ -1,4 +1,6 @@
import type { FieldHookComponent } from '@/lib/field-hooks'
+
+import type { PersonalityConfig } from '../types'
import { PersonalitySection } from '../sections/PersonalitySection'
/**
@@ -8,7 +10,7 @@ import { PersonalitySection } from '../sections/PersonalitySection'
export const PersonalitySectionHook: FieldHookComponent = ({ value, onChange }) => {
return (
onChange?.(newConfig)}
/>
)
diff --git a/dashboard/src/routes/config/bot/hooks/index.ts b/dashboard/src/routes/config/bot/hooks/index.ts
index 492caa7c..1dc90961 100644
--- a/dashboard/src/routes/config/bot/hooks/index.ts
+++ b/dashboard/src/routes/config/bot/hooks/index.ts
@@ -2,8 +2,14 @@
* Bot 配置页面相关 hooks
*/
-export { useAutoSave, useConfigAutoSave } from './useAutoSave'
-export type { UseAutoSaveOptions, UseAutoSaveReturn, AutoSaveState } from './useAutoSave'
+export { useAutoSave, useAutoSaveGeneric, useConfigAutoSave } from './useAutoSave'
+export type {
+ UseAutoSaveOptions,
+ UseAutoSaveReturn,
+ AutoSaveState,
+ UseAutoSaveConfig,
+ UseAutoSaveReturnGeneric,
+} from './useAutoSave'
export { ChatSectionHook } from './ChatSectionHook'
export { PersonalitySectionHook } from './PersonalitySectionHook'
export { DebugSectionHook } from './DebugSectionHook'
diff --git a/dashboard/src/routes/config/bot/hooks/useAutoSave.ts b/dashboard/src/routes/config/bot/hooks/useAutoSave.ts
index 1744383f..3d8bf7e1 100644
--- a/dashboard/src/routes/config/bot/hooks/useAutoSave.ts
+++ b/dashboard/src/routes/config/bot/hooks/useAutoSave.ts
@@ -1,50 +1,178 @@
-import { useEffect, useRef, useCallback } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
import { updateBotConfigSection } from '@/lib/config-api'
import type { ConfigSectionName } from '../types'
-export interface UseAutoSaveOptions {
- /** 防抖延迟时间（毫秒），默认 2000ms */
+/**
+ * Self-contained auto-save hook configuration
+ * @template T The type of data being saved
+ */
+export interface UseAutoSaveConfig {
+ /** Function to save data, should return a promise */
+ saveFn: (data: T) => Promise
+ /** Debounce delay in milliseconds, default 2000ms */
debounceMs?: number
- /** 保存成功回调 */
+ /** Callback when save succeeds */
onSaveSuccess?: () => void
- /** 保存失败回调 */
+ /** Callback when save fails */
+ onSaveError?: (error: Error) => void
+}
+
+/**
+ * Self-contained auto-save hook return type (generic)
+ */
+export interface UseAutoSaveReturnGeneric {
+ /** Trigger auto-save (debounced) */
+ save: (data: T) => void
+ /** Save immediately without debounce */
+ saveNow: (data: T) => Promise
+ /** Cancel pending auto-save */
+ cancel: () => void
+ /** Whether currently saving */
+ isSaving: boolean
+ /** Error from last save attempt, or null */
+ error: Error | null
+}
+
+/**
+ * Self-contained generic auto-save hook
+ *
+ * Manages debouncing, pending state, and error handling internally.
+ * No external state dependencies required.
+ *
+ * @example
+ * ```tsx
+ * const { save, isSaving } = useAutoSaveGeneric({
+ * saveFn: async (config) => {
+ * await updateMyConfig(config)
+ * },
+ * debounceMs: 2000,
+ * })
+ *
+ * useEffect(() => {
+ * if (config) {
+ * save(config)
+ * }
+ * }, [config, save])
+ * ```
+ */
+export function useAutoSaveGeneric(
+ config: UseAutoSaveConfig
+): UseAutoSaveReturnGeneric {
+ const { saveFn, debounceMs = 2000, onSaveSuccess, onSaveError } = config
+
+ // Internal state management
+ const [isSaving, setIsSaving] = useState(false)
+ const [error, setError] = useState(null)
+ const timerRef = useRef | null>(null)
+
+ // Perform the actual save
+ const performSave = useCallback(
+ async (data: T) => {
+ try {
+ setIsSaving(true)
+ setError(null)
+ await saveFn(data)
+ onSaveSuccess?.()
+ } catch (err) {
+ const error = err instanceof Error ? err : new Error(String(err))
+ setError(error)
+ console.error('Auto-save failed:', error)
+ onSaveError?.(error)
+ } finally {
+ setIsSaving(false)
+ }
+ },
+ [saveFn, onSaveSuccess, onSaveError]
+ )
+
+ // Debounced save
+ const save = useCallback(
+ (data: T) => {
+ // Clear existing timer
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ }
+ // Set new timer
+ timerRef.current = setTimeout(() => {
+ performSave(data)
+ }, debounceMs)
+ },
+ [performSave, debounceMs]
+ )
+
+ // Save immediately
+ const saveNow = useCallback(
+ async (data: T) => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ timerRef.current = null
+ }
+ await performSave(data)
+ },
+ [performSave]
+ )
+
+ // Cancel pending save
+ const cancel = useCallback(() => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ timerRef.current = null
+ }
+ }, [])
+
+ // Cleanup timer on unmount
+ useEffect(() => {
+ return () => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current)
+ }
+ }
+ }, [])
+
+ return {
+ save,
+ saveNow,
+ cancel,
+ isSaving,
+ error,
+ }
+}
+
+/**
+ * Legacy wrapper for backward compatibility with old API
+ * Maintains external state for existing code
+ */
+export interface UseAutoSaveOptions {
+ /** Debounce delay in milliseconds, default 2000ms */
+ debounceMs?: number
+ /** Save success callback */
+ onSaveSuccess?: () => void
+ /** Save error callback */
onSaveError?: (error: Error) => void
}
export interface UseAutoSaveReturn {
- /** 触发自动保存 */
+ /** Trigger auto-save */
triggerAutoSave: (sectionName: ConfigSectionName, sectionData: unknown) => void
- /** 立即保存（不防抖） */
+ /** Save immediately */
saveNow: (sectionName: ConfigSectionName, sectionData: unknown) => Promise
- /** 取消待处理的自动保存 */
+ /** Cancel pending auto-save */
cancelPendingAutoSave: () => void
}
export interface AutoSaveState {
- /** 是否正在保存中 */
+ /** Whether currently saving */
isAutoSaving: boolean
- /** 是否有未保存的更改 */
+ /** Whether has unsaved changes */
hasUnsavedChanges: boolean
}
/**
- * 自动保存 hook
- *
- * 用于监听配置变化并自动防抖保存到后端
- *
- * @example
- * ```tsx
- * const { triggerAutoSave } = useAutoSave({
- * isInitialLoad,
- * setAutoSaving,
- * setHasUnsavedChanges,
- * })
- *
- * // 配置变化时触发
- * useEffect(() => {
- * if (config) triggerAutoSave('bot', config)
- * }, [config])
- * ```
+ * Legacy auto-save hook for bot config
+ * Maintains backward compatibility with external state management
+ *
+ * @deprecated Use the generic useAutoSaveGeneric instead
*/
export function useAutoSave(
isInitialLoad: boolean,
@@ -55,12 +183,15 @@ export function useAutoSave(
const { debounceMs = 2000, onSaveSuccess, onSaveError } = options
const autoSaveTimerRef = useRef | null>(null)
- // 执行保存操作
+ // Execute save operation
const saveSection = useCallback(
async (sectionName: ConfigSectionName, sectionData: unknown) => {
try {
setAutoSaving(true)
- await updateBotConfigSection(sectionName, sectionData)
+ const result = await updateBotConfigSection(sectionName, sectionData)
+ if (!result.success) {
+ throw new Error(result.error)
+ }
setHasUnsavedChanges(false)
onSaveSuccess?.()
} catch (error) {
@@ -74,7 +205,7 @@ export function useAutoSave(
[setAutoSaving, setHasUnsavedChanges, onSaveSuccess, onSaveError]
)
- // 触发自动保存（带防抖）
+ // Trigger auto-save (with debounce)
const triggerAutoSave = useCallback(
(sectionName: ConfigSectionName, sectionData: unknown) => {
if (isInitialLoad) return
@@ -92,7 +223,7 @@ export function useAutoSave(
[isInitialLoad, setHasUnsavedChanges, saveSection, debounceMs]
)
- // 立即保存（不防抖）
+ // Save immediately (no debounce)
const saveNow = useCallback(
async (sectionName: ConfigSectionName, sectionData: unknown) => {
if (autoSaveTimerRef.current) {
@@ -104,7 +235,7 @@ export function useAutoSave(
[saveSection]
)
- // 取消待处理的自动保存
+ // Cancel pending auto-save
const cancelPendingAutoSave = useCallback(() => {
if (autoSaveTimerRef.current) {
clearTimeout(autoSaveTimerRef.current)
@@ -112,7 +243,7 @@ export function useAutoSave(
}
}, [])
- // 组件卸载时清理定时器
+ // Cleanup timer on unmount
useEffect(() => {
return () => {
if (autoSaveTimerRef.current) {
@@ -130,22 +261,22 @@ export function useAutoSave(
/**
* 创建配置自动保存 effect
- *
+ *
* 这是一个工厂函数，用于创建监听特定配置变化并触发自动保存的 effect
* 简化重复的 useEffect 代码
- *
+ *
* @example
* ```tsx
* // 使用方式 1: 直接在组件中调用
* useConfigAutoSave(botConfig, 'bot', isInitialLoad, triggerAutoSave)
* useConfigAutoSave(chatConfig, 'chat', isInitialLoad, triggerAutoSave)
- *
+ *
* // 使用方式 2: 批量配置
* const configs = [
* { config: botConfig, section: 'bot' },
* { config: chatConfig, section: 'chat' },
* ] as const
- *
+ *
* configs.forEach(({ config, section }) => {
* useConfigAutoSave(config, section, isInitialLoad, triggerAutoSave)
* })
diff --git a/dashboard/src/routes/config/bot/sections/ChatSection.tsx b/dashboard/src/routes/config/bot/sections/ChatSection.tsx
index b29024df..5648a3c0 100644
--- a/dashboard/src/routes/config/bot/sections/ChatSection.tsx
+++ b/dashboard/src/routes/config/bot/sections/ChatSection.tsx
@@ -1,231 +1,16 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
-import { Slider } from '@/components/ui/slider'
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/select'
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from '@/components/ui/popover'
-import { Plus, Trash2, Eye, Clock } from 'lucide-react'
-import type { ChatConfig } from '../types'
+import type { ChatConfig } from '../types'
+import { RuleList } from './RuleList'
interface ChatSectionProps {
config: ChatConfig
onChange: (config: ChatConfig) => void
}
-// 时间选择组件
-const TimeRangePicker = React.memo(function TimeRangePicker({
- value,
- onChange,
-}: {
- value: string
- onChange: (value: string) => void
-}) {
- // 解析初始值
- const parsedValue = useMemo(() => {
- const parts = value.split('-')
- if (parts.length === 2) {
- const [start, end] = parts
- const [sh, sm] = start.split(':')
- const [eh, em] = end.split(':')
- return {
- startHour: sh ? sh.padStart(2, '0') : '00',
- startMinute: sm ? sm.padStart(2, '0') : '00',
- endHour: eh ? eh.padStart(2, '0') : '23',
- endMinute: em ? em.padStart(2, '0') : '59',
- }
- }
- return {
- startHour: '00',
- startMinute: '00',
- endHour: '23',
- endMinute: '59',
- }
- }, [value])
-
- const [startHour, setStartHour] = useState(parsedValue.startHour)
- const [startMinute, setStartMinute] = useState(parsedValue.startMinute)
- const [endHour, setEndHour] = useState(parsedValue.endHour)
- const [endMinute, setEndMinute] = useState(parsedValue.endMinute)
-
- // 当value变化时同步状态
- useEffect(() => {
- setStartHour(parsedValue.startHour)
- setStartMinute(parsedValue.startMinute)
- setEndHour(parsedValue.endHour)
- setEndMinute(parsedValue.endMinute)
- }, [parsedValue])
-
- const updateTime = (
- newStartHour: string,
- newStartMinute: string,
- newEndHour: string,
- newEndMinute: string
- ) => {
- const newValue = `${newStartHour}:${newStartMinute}-${newEndHour}:${newEndMinute}`
- onChange(newValue)
- }
-
- return (
-
-
-
-
-
-
-
- )
-})
-
-// 预览窗口组件
-const RulePreview = React.memo(function RulePreview({ rule }: { rule: { target: string; time: string; value: number } }) {
- const previewText = `{ target = "${rule.target}", time = "${rule.time}", value = ${rule.value.toFixed(1)} }`
-
- return (
-
-
-
-
-
-
-
- )
-})
-
-export const ChatSection = React.memo(function ChatSection({ config, onChange }: ChatSectionProps) {
+export function ChatSection({ config, onChange }: ChatSectionProps) {
// 添加发言频率规则
const addTalkValueRule = () => {
onChange({
@@ -394,217 +179,13 @@ export const ChatSection = React.memo(function ChatSection({ config, onChange }:
{/* 动态发言频率规则配置 */}
{config.enable_talk_value_rules && (
-
)
-})
+}
diff --git a/dashboard/src/routes/config/bot/sections/RuleEditor.tsx b/dashboard/src/routes/config/bot/sections/RuleEditor.tsx
new file mode 100644
index 00000000..81a4246a
--- /dev/null
+++ b/dashboard/src/routes/config/bot/sections/RuleEditor.tsx
@@ -0,0 +1,213 @@
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Slider } from '@/components/ui/slider'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+
+import { Trash2 } from 'lucide-react'
+
+import { RulePreview } from './RulePreview'
+import { TimeRangePicker } from './TimeRangePicker'
+
+interface TalkValueRule {
+ target: string
+ time: string
+ value: number
+}
+
+interface RuleEditorProps {
+ rule: TalkValueRule
+ index: number
+ onUpdate: (index: number, field: 'target' | 'time' | 'value', value: string | number) => void
+ onRemove: (index: number) => void
+}
+
+// 规则编辑器组件
+export function RuleEditor({ rule, index, onUpdate, onRemove }: RuleEditorProps) {
+ return (
+
-
+
-
-
- {tabs.map((tab) => (
-
- switchTab(tab.id)}
- >
- {tab.type === 'webui' ? (
-
- ))}
- {/* 新建虚拟身份标签页按钮 */}
-
-
diff --git a/dashboard/src/routes/chat/types.ts b/dashboard/src/routes/chat/types.ts
new file mode 100644
index 00000000..a8778ba6
--- /dev/null
+++ b/dashboard/src/routes/chat/types.ts
@@ -0,0 +1,106 @@
+// 虚拟标签页持久化存储 key
+export const VIRTUAL_TABS_STORAGE_KEY = 'maibot_webui_virtual_tabs'
+
+// 保存的虚拟标签页配置
+export interface SavedVirtualTab {
+ id: string
+ label: string
+ virtualConfig: VirtualIdentityConfig
+ createdAt: number
+}
+
+// 平台信息类型
+export interface PlatformInfo {
+ platform: string
+ count: number
+}
+
+// 用户信息类型（从后端获取的人物信息）
+export interface PersonInfo {
+ person_id: string
+ user_id: string
+ person_name: string
+ nickname: string | null
+ platform: string
+ is_known: boolean
+}
+
+// 虚拟身份配置
+export interface VirtualIdentityConfig {
+ platform: string
+ personId: string
+ userId: string
+ userName: string
+ groupName: string
+ groupId: string // 虚拟群 ID，用于持久化历史记录
+}
+
+// 聊天标签页
+export interface ChatTab {
+ id: string
+ type: 'webui' | 'virtual'
+ label: string
+ virtualConfig?: VirtualIdentityConfig
+ messages: ChatMessage[]
+ isConnected: boolean
+ isTyping: boolean
+ sessionInfo: {
+ session_id?: string
+ user_id?: string
+ user_name?: string
+ bot_name?: string
+ }
+}
+
+// 消息段类型
+export interface MessageSegment {
+ type: 'text' | 'image' | 'emoji' | 'face' | 'voice' | 'video' | 'music' | 'file' | 'reply' | 'forward' | 'unknown'
+ data: string | number | object
+ original_type?: string
+}
+
+// 消息类型
+export interface ChatMessage {
+ id: string
+ type: 'user' | 'bot' | 'system' | 'error' | 'thinking'
+ content: string
+ timestamp: number
+ message_type?: 'text' | 'rich' // 消息格式类型
+ segments?: MessageSegment[] // 富文本消息段
+ sender?: {
+ name: string
+ user_id?: string
+ is_bot?: boolean
+ }
+}
+
+// WebSocket 消息类型
+export interface WsMessage {
+ type: string
+ content?: string
+ message_id?: string
+ timestamp?: number
+ is_typing?: boolean
+ session_id?: string
+ user_id?: string
+ user_name?: string
+ bot_name?: string
+ sender?: {
+ name: string
+ user_id?: string
+ is_bot?: boolean
+ }
+ // 历史消息列表（用于 type: 'history'）
+ messages?: Array<{
+ id?: string
+ content: string
+ timestamp: number
+ sender_name?: string
+ sender_id?: string
+ is_bot?: boolean
+ }>
+ group_id?: string
+ // 富文本消息
+ message_type?: string
+ segments?: MessageSegment[]
+}
diff --git a/dashboard/src/routes/chat/utils.ts b/dashboard/src/routes/chat/utils.ts
new file mode 100644
index 00000000..46bfb05d
--- /dev/null
+++ b/dashboard/src/routes/chat/utils.ts
@@ -0,0 +1,50 @@
+import { VIRTUAL_TABS_STORAGE_KEY } from './types'
+import type { SavedVirtualTab } from './types'
+
+// 生成唯一用户 ID
+export function generateUserId(): string {
+ return 'webui_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now().toString(36)
+}
+
+// 从 localStorage 获取或生成用户 ID
+export function getOrCreateUserId(): string {
+ const storageKey = 'maibot_webui_user_id'
+ let userId = localStorage.getItem(storageKey)
+ if (!userId) {
+ userId = generateUserId()
+ localStorage.setItem(storageKey, userId)
+ }
+ return userId
+}
+
+// 从 localStorage 获取用户昵称
+export function getStoredUserName(): string {
+ return localStorage.getItem('maibot_webui_user_name') || 'WebUI用户'
+}
+
+// 保存用户昵称到 localStorage
+export function saveUserName(name: string): void {
+ localStorage.setItem('maibot_webui_user_name', name)
+}
+
+// 从 localStorage 获取保存的虚拟标签页
+export function getSavedVirtualTabs(): SavedVirtualTab[] {
+ try {
+ const saved = localStorage.getItem(VIRTUAL_TABS_STORAGE_KEY)
+ if (saved) {
+ return JSON.parse(saved)
+ }
+ } catch (e) {
+ console.error('[Chat] 加载虚拟标签页失败:', e)
+ }
+ return []
+}
+
+// 保存虚拟标签页到 localStorage
+export function saveVirtualTabs(tabs: SavedVirtualTab[]): void {
+ try {
+ localStorage.setItem(VIRTUAL_TABS_STORAGE_KEY, JSON.stringify(tabs))
+ } catch (e) {
+ console.error('[Chat] 保存虚拟标签页失败:', e)
+ }
+}
diff --git a/dashboard/src/routes/config/bot.tsx b/dashboard/src/routes/config/bot.tsx
index 72cb5783..0f81d58a 100644
--- a/dashboard/src/routes/config/bot.tsx
+++ b/dashboard/src/routes/config/bot.tsx
@@ -1,20 +1,7 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import {
- BotInfoSection,
- PersonalitySection,
- DreamSection,
- LPMMSection,
- LogSection,
- DebugSection,
- ExperimentalSection,
- MaimMessageSection,
- TelemetrySection,
- FeaturesSection,
- ExpressionSection,
- ProcessingSection,
- MessageReceiveSection,
- WebUISection,
-} from './bot/sections'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { parse as parseToml } from 'smol-toml'
+
+import { AlertDescription, Alert } from '@/components/ui/alert'
import {
AlertDialog,
AlertDialogAction,
@@ -26,53 +13,60 @@ import {
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
-import { Save, Power, Code2, Layout } from 'lucide-react'
-import { getBotConfig, updateBotConfig, getBotConfigRaw, updateBotConfigRaw } from '@/lib/config-api'
-import { useToast } from '@/hooks/use-toast'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Info } from 'lucide-react'
-import { RestartOverlay } from '@/components/restart-overlay'
-import { RestartProvider, useRestart } from '@/lib/restart-context'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { CodeEditor } from '@/components'
-import { parse as parseToml } from 'smol-toml'
+import { DynamicConfigForm } from '@/components/dynamic-form'
+import { RestartOverlay } from '@/components/restart-overlay'
+import { useToast } from '@/hooks/use-toast'
+import { getBotConfig, getBotConfigRaw, updateBotConfig, updateBotConfigRaw } from '@/lib/config-api'
+import { fieldHooks } from '@/lib/field-hooks'
+import { RestartProvider, useRestart } from '@/lib/restart-context'
+
+import { Code2, Info, Layout, Power, Save } from 'lucide-react'
-// 导入模块化的类型定义
import type {
BotConfig,
- PersonalityConfig,
ChatConfig,
- ExpressionConfig,
+ ChineseTypoConfig,
+ DebugConfig,
+ DreamConfig,
EmojiConfig,
+ ExperimentalConfig,
+ ExpressionConfig,
+ KeywordReactionConfig,
+ LogConfig,
+ LPMMKnowledgeConfig,
+ MaimMessageConfig,
MemoryConfig,
+ MessageReceiveConfig,
+ PersonalityConfig,
+ ResponsePostProcessConfig,
+ ResponseSplitterConfig,
+ TelemetryConfig,
ToolConfig,
VoiceConfig,
- MessageReceiveConfig,
- DreamConfig,
- LPMMKnowledgeConfig,
- KeywordReactionConfig,
- ResponsePostProcessConfig,
- ChineseTypoConfig,
- ResponseSplitterConfig,
- LogConfig,
- DebugConfig,
- ExperimentalConfig,
- MaimMessageConfig,
- TelemetryConfig,
WebUIConfig,
} from './bot/types'
-
-// 导入 useAutoSave hook
import { useAutoSave, useConfigAutoSave } from './bot/hooks'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Button } from '@/components/ui/button'
-
-// 导入动态表单和 Hook 系统
-import { DynamicConfigForm } from '@/components/dynamic-form'
-import { fieldHooks } from '@/lib/field-hooks'
-import { ChatSectionHook } from '@/routes/config/bot/hooks'
-
+import { ChatSectionHook } from './bot/hooks'
+import {
+ BotInfoSection,
+ DebugSection,
+ DreamSection,
+ ExperimentalSection,
+ ExpressionSection,
+ FeaturesSection,
+ LogSection,
+ LPMMSection,
+ MaimMessageSection,
+ MessageReceiveSection,
+ PersonalitySection,
+ ProcessingSection,
+ TelemetrySection,
+ WebUISection,
+} from './bot/sections'
// ==================== 常量定义 ====================
/** Toast 显示前的延迟时间 (毫秒) */
const TOAST_DISPLAY_DELAY = 500
@@ -262,7 +256,16 @@ function BotConfigPageContent() {
// 加载源代码
const loadSourceCode = useCallback(async () => {
try {
- const raw = await getBotConfigRaw()
+ const result = await getBotConfigRaw()
+ if (!result.success) {
+ toast({
+ variant: 'destructive',
+ title: '加载失败',
+ description: result.error,
+ })
+ return
+ }
+ const raw = result.data
// 将 TOML 基本字符串中的转义序列转换为实际字符以便在编辑器中正确显示
// 使用正则表达式只处理双引号字符串内的转义序列，不影响单引号字符串
const unescaped = raw.replace(/"([^"]*)"/g, (_match, content) => {
@@ -289,8 +292,17 @@ function BotConfigPageContent() {
const loadConfig = useCallback(async () => {
try {
setLoading(true)
- const config = await getBotConfig()
- parseAndSetConfig(config)
+ const result = await getBotConfig()
+ if (!result.success) {
+ toast({
+ title: '加载失败',
+ description: result.error,
+ variant: 'destructive',
+ })
+ setLoading(false)
+ return
+ }
+ parseAndSetConfig(result.data)
setHasUnsavedChanges(false)
initialLoadRef.current = false
@@ -382,7 +394,18 @@ function BotConfigPageContent() {
.replace(/\r/g, '\\r') // 回车符
return `"${encoded}"`
})
- await updateBotConfigRaw(escaped)
+ const result = await updateBotConfigRaw(escaped)
+ if (!result.success) {
+ setHasTomlError(true)
+ const errorMsg = result.error
+ setTomlErrorMessage(errorMsg)
+ toast({
+ variant: 'destructive',
+ title: '保存失败',
+ description: errorMsg,
+ })
+ return
+ }
setHasUnsavedChanges(false)
setHasTomlError(false)
setTomlErrorMessage('')
@@ -423,8 +446,16 @@ function BotConfigPageContent() {
} else {
// 切换回可视化时,直接重新加载配置但不显示全局 loading
try {
- const config = await getBotConfig()
- parseAndSetConfig(config)
+ const result = await getBotConfig()
+ if (!result.success) {
+ toast({
+ title: '加载失败',
+ description: result.error,
+ variant: 'destructive',
+ })
+ return
+ }
+ parseAndSetConfig(result.data)
setHasUnsavedChanges(false)
} catch (error) {
console.error('加载配置失败:', error)
@@ -444,7 +475,16 @@ function BotConfigPageContent() {
// 取消待处理的自动保存
cancelPendingAutoSave()
- await updateBotConfig(buildFullConfig())
+ const result = await updateBotConfig(buildFullConfig())
+ if (!result.success) {
+ toast({
+ title: '保存失败',
+ description: result.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
setHasUnsavedChanges(false)
toast({
title: '保存成功',
@@ -474,7 +514,16 @@ function BotConfigPageContent() {
// 取消待处理的自动保存
cancelPendingAutoSave()
- await updateBotConfig(buildFullConfig())
+ const result = await updateBotConfig(buildFullConfig())
+ if (!result.success) {
+ toast({
+ title: '保存失败',
+ description: result.error,
+ variant: 'destructive',
+ })
+ setSaving(false)
+ return
+ }
setHasUnsavedChanges(false)
toast({
title: '保存成功',
@@ -759,4 +808,4 @@ function BotConfigPageContent() {
)
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/routes/config/bot/hooks/BotInfoSectionHook.tsx b/dashboard/src/routes/config/bot/hooks/BotInfoSectionHook.tsx
index 70ba89f9..d5a4e35d 100644
--- a/dashboard/src/routes/config/bot/hooks/BotInfoSectionHook.tsx
+++ b/dashboard/src/routes/config/bot/hooks/BotInfoSectionHook.tsx
@@ -1,4 +1,6 @@
import type { FieldHookComponent } from '@/lib/field-hooks'
+
+import type { BotConfig } from '../types'
import { BotInfoSection } from '../sections/BotInfoSection'
/**
@@ -8,7 +10,7 @@ import { BotInfoSection } from '../sections/BotInfoSection'
export const BotInfoSectionHook: FieldHookComponent = ({ value, onChange }) => {
return (
-
-
-
- 开始时间
-
-
-
-
-
-
-
-
-
-
-
-
- 结束时间
-
-
-
-
-
-
-
-
-
-
-
-
- 配置预览
-
- {previewText}
-
- - 这是保存到 bot_config.toml 文件中的格式 -
-
-
+
-
-
- {config.talk_value_rules && config.talk_value_rules.length > 0 ? (
-
-
-
- 动态发言频率规则
-- 按时段或聊天流ID调整发言频率，优先匹配具体聊天，再匹配全局规则 -
-
- {config.talk_value_rules.map((rule, index) => (
-
- ) : (
-
-
- ))}
-
-
- 规则 #{index + 1}
-
-
-
-
-
-
-
-
-
-
- 确认删除
-
- 确定要删除规则 #{index + 1} 吗？此操作无法撤销。
-
-
-
- 取消
- removeTalkValueRule(index)}>
- 删除
-
-
-
-
-
-
- {/* 配置类型选择 */}
-
-
-
-
-
-
- {/* 详细配置选项 - 只在非全局时显示 */}
- {rule.target !== '' && (() => {
- const parts = rule.target.split(':')
- const platform = parts[0] || 'qq'
- const chatId = parts[1] || ''
- const chatType = parts[2] || 'group'
-
- return (
-
-
- )
- })()}
-
- {/* 时间段选择器 */}
-
-
-
-
-
-
-
-
-
- {
- updateTalkValueRule(index, 'target', `${platform}:${e.target.value}:${chatType}`)
- }}
- placeholder="输入群 ID"
- className="font-mono text-sm"
- />
-
-
-
-
-
-
- - 当前聊天流 ID：{rule.target || '（未设置）'} -
-
-
- updateTalkValueRule(index, 'time', v)}
- />
-
-
- {/* 发言频率滑块 */}
- - 支持跨夜区间，例如 23:00-02:00 -
-
-
- updateTalkValueRule(index, 'value', values[0])
- }
- min={0.01}
- max={1}
- step={0.01}
- className="w-full"
- />
-
-
-
- {
- const val = parseFloat(e.target.value)
- if (!isNaN(val)) {
- updateTalkValueRule(index, 'value', Math.max(0.01, Math.min(1, val)))
- }
- }}
- className="w-20 h-8 text-xs"
- />
-
-
- 0.01 (极少发言)
- 0.5
- 1.0 (正常)
-
-
-
- )}
-
- 暂无规则，点击"添加规则"按钮创建
-
-
- - 📝 规则说明 -
--
-
- • Target 为空：全局规则，对所有聊天生效 -
- • Target 指定：仅对特定聊天流生效（格式：platform:id:type） -
- • 优先级：先匹配具体聊天流规则，再匹配全局规则 -
- • 时间支持跨夜：例如 23:00-02:00 表示晚上11点到次日凌晨2点 -
- • 数值范围：建议 0-1，0 表示完全沉默，1 表示正常发言 -
+
+ )
+}
diff --git a/dashboard/src/routes/config/bot/sections/RuleList.tsx b/dashboard/src/routes/config/bot/sections/RuleList.tsx
new file mode 100644
index 00000000..b7373f6e
--- /dev/null
+++ b/dashboard/src/routes/config/bot/sections/RuleList.tsx
@@ -0,0 +1,70 @@
+
+import { Button } from '@/components/ui/button'
+
+import { Plus } from 'lucide-react'
+
+import { RuleEditor } from './RuleEditor'
+
+interface TalkValueRule {
+ target: string
+ time: string
+ value: number
+}
+
+interface RuleListProps {
+ rules: TalkValueRule[]
+ onAdd: () => void
+ onUpdate: (index: number, field: 'target' | 'time' | 'value', value: string | number) => void
+ onRemove: (index: number) => void
+}
+
+// 规则列表组件
+export function RuleList({ rules, onAdd, onUpdate, onRemove }: RuleListProps) {
+ return (
+
+
+ 规则 #{index + 1}
+
+
+
+
+
+
+
+
+
+
+ 确认删除
+
+ 确定要删除规则 #{index + 1} 吗？此操作无法撤销。
+
+
+
+ 取消
+ onRemove(index)}>
+ 删除
+
+
+
+
+
+
+ {/* 配置类型选择 */}
+
+
+
+
+
+
+ {/* 详细配置选项 - 只在非全局时显示 */}
+ {rule.target !== '' && (() => {
+ const parts = rule.target.split(':')
+ const platform = parts[0] || 'qq'
+ const chatId = parts[1] || ''
+ const chatType = parts[2] || 'group'
+
+ return (
+
+
+ )
+ })()}
+
+ {/* 时间段选择器 */}
+
+
+
+
+
+
+
+
+
+ {
+ onUpdate(index, 'target', `${platform}:${e.target.value}:${chatType}`)
+ }}
+ placeholder="输入群 ID"
+ className="font-mono text-sm"
+ />
+
+
+
+
+
+
+ + 当前聊天流 ID：{rule.target || '（未设置）'} +
+
+
+ onUpdate(index, 'time', v)}
+ />
+
+
+ {/* 发言频率滑块 */}
+ + 支持跨夜区间，例如 23:00-02:00 +
+
+
+ onUpdate(index, 'value', values[0])
+ }
+ min={0.01}
+ max={1}
+ step={0.01}
+ className="w-full"
+ />
+
+
+
+ {
+ const val = parseFloat(e.target.value)
+ if (!isNaN(val)) {
+ onUpdate(index, 'value', Math.max(0.01, Math.min(1, val)))
+ }
+ }}
+ className="w-20 h-8 text-xs"
+ />
+
+
+ 0.01 (极少发言)
+ 0.5
+ 1.0 (正常)
+
+
+
+ )
+}
diff --git a/dashboard/src/routes/config/bot/sections/RulePreview.tsx b/dashboard/src/routes/config/bot/sections/RulePreview.tsx
new file mode 100644
index 00000000..2b26c1f6
--- /dev/null
+++ b/dashboard/src/routes/config/bot/sections/RulePreview.tsx
@@ -0,0 +1,40 @@
+
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+import { Eye } from 'lucide-react'
+
+interface RulePreviewProps {
+ rule: {
+ target: string
+ time: string
+ value: number
+ }
+}
+
+// 预览窗口组件
+export function RulePreview({ rule }: RulePreviewProps) {
+ const previewText = `{ target = "${rule.target}", time = "${rule.time}", value = ${rule.value.toFixed(1)} }`
+
+ return (
+
+
+
+ {rules && rules.length > 0 ? (
+
+
+
+ 动态发言频率规则
++ 按时段或聊天流ID调整发言频率,优先匹配具体聊天,再匹配全局规则 +
+
+ {rules.map((rule, index) => (
+
+ ) : (
+
+
+ )}
+
+ 暂无规则，点击"添加规则"按钮创建
+
+
+ + 📝 规则说明 +
+-
+
- • Target 为空：全局规则，对所有聊天生效 +
- • Target 指定：仅对特定聊天流生效（格式：platform:id:type） +
- • 优先级：先匹配具体聊天流规则，再匹配全局规则 +
- • 时间支持跨夜：例如 23:00-02:00 表示晚上11点到次日凌晨2点 +
- • 数值范围：建议 0-1，0 表示完全沉默，1 表示正常发言 +
+
+ 配置预览
+
+ {previewText}
+
+ + 这是保存到 bot_config.toml 文件中的格式 +
+
+
+
+
+ 开始时间
+
+
+
+
+
+
+
+
+
+
+
+
+ 结束时间
+
+
+
+
+
+
+
+
+
+
+
-
- )
- }
-
- return (
-
-
- 加载中...
-
- {/* 页面标题 */}
-
-
- 配置更新后需要重启麦麦才能生效。你可以点击右上角的"保存并重启"按钮一键完成保存和重启。
-
-
-
-
- {/* 搜索框 */}
-
-
- {/* 编辑对话框 */}
-
-
-
-
-
- {/* 重启提示 */}
-
-
- AI模型厂商配置
-管理 AI 模型厂商的 API 配置
-
- {selectedProviders.size > 0 && (
-
- )}
-
-
-
-
-
-
-
-
-
- 确认重启麦麦？
-
-
-
-
- 取消
-
- {hasUnsavedChanges ? '保存并重启' : '确认重启'}
-
-
-
-
-
-
-
- - {hasUnsavedChanges - ? '当前有未保存的配置更改。点击确认将先保存配置,然后重启麦麦使新配置生效。重启过程中麦麦将暂时离线。' - : '即将重启麦麦主程序。重启过程中麦麦将暂时离线,配置将在重启后生效。' - } -
-
-
-
- {/* 提供商列表 - 移动端卡片视图 */}
-
-
- {searchQuery && (
- - 找到 {filteredProviders.length} 个结果 -
- )} -
- {filteredProviders.length === 0 ? (
-
-
- {/* 提供商列表 - 桌面端表格视图 */}
-
- {searchQuery ? '未找到匹配的提供商' : '暂无提供商配置，点击"添加提供商"开始配置'}
-
- ) : (
- paginatedProviders.map((provider, displayIndex) => {
- const actualIndex = providers.findIndex(p => p === provider)
- return (
-
-
- )
- })
- )}
-
-
-
-
-
-
- {provider.name}
- {renderTestStatus(provider.name)} -{provider.base_url}
-
-
-
-
-
-
-
-
- 客户端类型
-
- {provider.client_type}
-
- 最大重试
-
- {provider.max_retry}
-
- 超时(秒)
-
- {provider.timeout}
-
- 重试间隔(秒)
-
- {provider.retry_interval}
-
-
-
- {/* 分页 - 增强版 */}
- {filteredProviders.length > 0 && (
-
-
-
-
-
-
- )}
-
-
-
-
- 显示 {(page - 1) * pageSize + 1} 到{' '}
- {Math.min(page * pageSize, filteredProviders.length)} 条，共 {filteredProviders.length} 条
-
-
-
-
-
-
-
- setJumpToPage(e.target.value)}
- onKeyDown={(e) => e.key === 'Enter' && handleJumpToPage()}
- placeholder={page.toString()}
- className="w-16 h-8 text-center"
- min={1}
- max={totalPages}
- />
-
-
-
-
-
-
-
-
-
-
- }
- side="right"
- maxWidth="350px"
- />
- API 密钥
-从提供商平台获取的身份验证密钥。
--
-
- 通常以
sk-开头
- - 请妥善保管，不要泄露给他人 -
- 可以点击眼睛图标切换显示/隐藏 -
- 点击复制图标可快速复制密钥 -
- {
- setEditingProvider((prev) =>
- prev ? { ...prev, api_key: e.target.value } : null
- )
- if (formErrors.api_key) {
- setFormErrors((prev) => ({ ...prev, api_key: undefined }))
- }
- }}
- placeholder="sk-..."
- className={`flex-1 ${formErrors.api_key ? 'border-destructive focus-visible:ring-destructive' : ''}`}
- />
-
-
-
- {formErrors.api_key && (
- {formErrors.api_key}
- )} -
-
-
- {isUsingTemplate && (
-
-
-
-
- }
- side="right"
- maxWidth="350px"
- />
- API 客户端类型
-指定与提供商通信时使用的 API 协议格式。
--
-
- OpenAI：兼容 OpenAI API 格式的提供商 -
- Gemini：Google Gemini 专用格式 -
- 大部分第三方提供商都兼容 OpenAI 格式 -
- 使用模板时客户端类型不可编辑,切换到"自定义"以手动配置 -
- )} -
-
-
-
-
-
-
-
-
-
- {
- const val = e.target.value === '' ? null : parseInt(e.target.value)
- setEditingProvider((prev) =>
- prev ? { ...prev, max_retry: val } : null
- )
- }}
- placeholder="默认: 2"
- />
-
-
-
-
-
-
- {
- const val = e.target.value === '' ? null : parseInt(e.target.value)
- setEditingProvider((prev) =>
- prev ? { ...prev, timeout: val } : null
- )
- }}
- placeholder="默认: 30"
- />
-
-
-
-
-
- {
- const val = e.target.value === '' ? null : parseInt(e.target.value)
- setEditingProvider((prev) =>
- prev
- ? { ...prev, retry_interval: val }
- : null
- )
- }}
- placeholder="默认: 10"
- />
-
-
-
-
- - 您即将删除以下提供商： - - {deleteConfirmState.providersToDelete.join(', ')} - -
-- ⚠️ 此操作将同时删除 {deleteConfirmState.affectedModels.length} 个关联的模型： -
-
- {deleteConfirmState.affectedModels.map((model: any, idx: number) => (
-
-
- •
- {model.name}
-
- ({model.model_identifier})
-
-
- ))}
- - 这些模型将从模型列表和所有任务分配中移除。此操作无法撤销。 -
-
+
+ )
+}
diff --git a/dashboard/src/routes/config/modelProvider/ProviderForm.tsx b/dashboard/src/routes/config/modelProvider/ProviderForm.tsx
new file mode 100644
index 00000000..81a9adad
--- /dev/null
+++ b/dashboard/src/routes/config/modelProvider/ProviderForm.tsx
@@ -0,0 +1,458 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Check, ChevronsUpDown, Copy, Eye, EyeOff } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { HelpTooltip } from '@/components/ui/help-tooltip'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useToast } from '@/hooks/use-toast'
+
+import { PROVIDER_TEMPLATES } from '../providerTemplates'
+import type { APIProvider, FormErrors } from './types'
+import { validateProvider } from './utils'
+
+interface ProviderFormProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ editingProvider: APIProvider | null
+ editingIndex: number | null
+ providers: APIProvider[]
+ onSave: (provider: APIProvider, index: number | null) => void
+ tourState: { isRunning: boolean }
+}
+
+export function ProviderForm({
+ open,
+ onOpenChange,
+ editingProvider,
+ editingIndex,
+ providers,
+ onSave,
+ tourState,
+}: ProviderFormProps) {
+ const [formErrors, setFormErrors] = useState
+
+
+
+
+
+ {provider.name}
+ {renderTestStatus()} +{provider.base_url}
+
+
+
+
+
+
+
+
+ 客户端类型
+
+ {provider.client_type}
+
+ 最大重试
+
+ {provider.max_retry}
+
+ 超时(秒)
+
+ {provider.timeout}
+
+ 重试间隔(秒)
+
+ {provider.retry_interval}
+
+
+
+ {/* 移动端卡片视图 */}
+
+
+ {searchQuery && (
+ + 找到 {filteredProviders.length} 个结果 +
+ )} +
+ {filteredProviders.length === 0 ? (
+
+
+ {/* 桌面端表格视图 */}
+
+ {searchQuery ? '未找到匹配的提供商' : '暂无提供商配置，点击"添加提供商"开始配置'}
+
+ ) : (
+ paginatedProviders.map((provider, displayIndex) => {
+ const actualIndex = providers.findIndex(p => p === provider)
+ return (
+
+
+
+ {/* 分页 */}
+ {filteredProviders.length > 0 && (
+
+
+
+
+
+
+ )}
+
+ )
+}
diff --git a/dashboard/src/routes/config/modelProvider/index.ts b/dashboard/src/routes/config/modelProvider/index.ts
index 43f86993..7d37993e 100644
--- a/dashboard/src/routes/config/modelProvider/index.ts
+++ b/dashboard/src/routes/config/modelProvider/index.ts
@@ -1,11 +1,2 @@
-/**
- * 模型提供商配置模块
- *
- * 模块结构：
- * - types.ts: 类型定义
- * - utils.ts: 工具函数
- * - 主组件在上级目录的 modelProvider.tsx
- */
-
-export * from './types'
-export * from './utils'
+export { ModelProviderConfigPage } from './index.tsx'
+export type * from './types'
diff --git a/dashboard/src/routes/config/modelProvider/index.tsx b/dashboard/src/routes/config/modelProvider/index.tsx
new file mode 100644
index 00000000..87042466
--- /dev/null
+++ b/dashboard/src/routes/config/modelProvider/index.tsx
@@ -0,0 +1,909 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { getModelConfig, testProviderConnection, updateModelConfig, updateModelConfigSection } from '@/lib/config-api'
+import type { TestConnectionResult } from '@/lib/config-api'
+import { Info, Plus, Power, Save, Trash2, Zap } from 'lucide-react'
+
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { MODEL_ASSIGNMENT_TOUR_ID, modelAssignmentTourSteps, STEP_ROUTE_MAP } from '@/components/tour/tours/model-assignment-tour'
+import { useTour } from '@/components/tour'
+import { useToast } from '@/hooks/use-toast'
+import { RestartOverlay } from '@/components/restart-overlay'
+import { RestartProvider, useRestart } from '@/lib/restart-context'
+
+import { ProviderForm } from './ProviderForm'
+import { ProviderList } from './ProviderList'
+import type { APIProvider, DeleteConfirmState } from './types'
+import { cleanProviderData } from './utils'
+
+/**
+ * ModelConfig 接口定义
+ */
+interface ModelConfig extends Record
+
+
+
+ 显示 {(page - 1) * pageSize + 1} 到{' '}
+ {Math.min(page * pageSize, filteredProviders.length)} 条，共 {filteredProviders.length} 条
+
+
+
+
+
+
+
+ setJumpToPage(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleJumpToPage()}
+ placeholder={page.toString()}
+ className="w-16 h-8 text-center"
+ min={1}
+ max={totalPages}
+ />
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+ 加载中...
+
+ {/* 页面标题 */}
+
+
+ 配置更新后需要重启麦麦才能生效。你可以点击右上角的"保存并重启"按钮一键完成保存和重启。
+
+
+
+
+
+
+
+
+
+ 确认删除
+
+ 确定要删除提供商 "{deletingIndex !== null ? providers[deletingIndex]?.name : ''}" 吗？
+ 此操作无法撤销。
+
+
+
+ 取消
+ 删除
+
+
+
+
+ {/* 批量删除确认对话框 */}
+
+
+
+ 确认批量删除
+
+ 确定要删除选中的 {selectedProviders.size} 个提供商吗？
+ 此操作无法撤销。
+
+
+
+ 取消
+
+ 批量删除
+
+
+
+
+
+ {/* 删除提供商影响确认对话框 */}
+ setDeleteConfirmState(prev => ({ ...prev, isOpen: open }))}>
+
+
+ 确认删除提供商
+
+
+
+
+ 取消
+
+ 确认删除
+
+
+
+
+
+ {/* 重启遮罩层 */}
+
+ )
+}
diff --git a/dashboard/src/routes/index.tsx b/dashboard/src/routes/index.tsx
index 39eaa27b..59733566 100644
--- a/dashboard/src/routes/index.tsx
+++ b/dashboard/src/routes/index.tsx
@@ -161,9 +161,9 @@ function IndexPageContent() {
// 获取审核统计
const fetchReviewStats = useCallback(async () => {
try {
- const data = await getReviewStats()
- if (isMountedRef.current) {
- setUncheckedCount(data.unchecked)
+ const result = await getReviewStats()
+ if (result.success && isMountedRef.current) {
+ setUncheckedCount(result.data.unchecked)
}
} catch (error) {
console.error('获取审核统计失败:', error)
diff --git a/dashboard/src/routes/monitor/use-monitor.ts b/dashboard/src/routes/monitor/use-monitor.ts
index ed588b06..b3679122 100644
--- a/dashboard/src/routes/monitor/use-monitor.ts
+++ b/dashboard/src/routes/monitor/use-monitor.ts
@@ -16,16 +16,16 @@ export function useChatNameMap() {
const loadChatNameMap = useCallback(async () => {
try {
setLoading(true)
- const response = await getChatList()
- if (response?.data) {
+ const result = await getChatList()
+ if (result.success) {
const nameMap = new Map
+
+
+ {/* 重启提示 */}
+
+
+ AI模型厂商配置
+管理 AI 模型厂商的 API 配置
+
+ {selectedProviders.size > 0 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ 确认重启麦麦？
+
+
+
+
+ 取消
+
+ {hasUnsavedChanges ? '保存并重启' : '确认重启'}
+
+
+
+
+
+
+
+ + {hasUnsavedChanges + ? '当前有未保存的配置更改。点击确认将先保存配置,然后重启麦麦使新配置生效。重启过程中麦麦将暂时离线。' + : '即将重启麦麦主程序。重启过程中麦麦将暂时离线,配置将在重启后生效。' + } +
+
+
+
+
+ + 您即将删除以下提供商： + + {deleteConfirmState.providersToDelete.join(', ')} + +
++ ⚠️ 此操作将同时删除 {deleteConfirmState.affectedModels.length} 个关联的模型： +
+
+ {deleteConfirmState.affectedModels.map((model: any, idx: number) => (
+
+
+ •
+ {model.name}
+
+ ({model.model_identifier})
+
+
+ ))}
+ + 这些模型将从模型列表和所有任务分配中移除。此操作无法撤销。 +
+
+ {filteredPlugins.map((plugin) => (
+
+ )
+}
diff --git a/dashboard/src/routes/plugins/MarketplaceTab.tsx b/dashboard/src/routes/plugins/MarketplaceTab.tsx
new file mode 100644
index 00000000..bcd4b8c2
--- /dev/null
+++ b/dashboard/src/routes/plugins/MarketplaceTab.tsx
@@ -0,0 +1,83 @@
+import type { GitStatus, MaimaiVersion, PluginInfo, PluginLoadProgress, PluginStatsData } from './types'
+import { PluginCard } from './PluginCard'
+
+interface MarketplaceTabProps {
+ plugins: PluginInfo[]
+ searchQuery: string
+ categoryFilter: string
+ showCompatibleOnly: boolean
+ gitStatus: GitStatus | null
+ maimaiVersion: MaimaiVersion | null
+ pluginStats: Record
+ {filteredPlugins.map((plugin) => (
+
+ )
+}
diff --git a/dashboard/src/routes/plugins/PluginCard.tsx b/dashboard/src/routes/plugins/PluginCard.tsx
new file mode 100644
index 00000000..ad6d3f1e
--- /dev/null
+++ b/dashboard/src/routes/plugins/PluginCard.tsx
@@ -0,0 +1,235 @@
+import { useNavigate } from '@tanstack/react-router'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { AlertCircle, CheckCircle2, Download, Loader2, RefreshCw, Star, Trash2 } from 'lucide-react'
+
+import type { GitStatus, MaimaiVersion, PluginInfo, PluginLoadProgress, PluginStatsData } from './types'
+import { CATEGORY_NAMES } from './types'
+
+interface PluginCardProps {
+ plugin: PluginInfo
+ gitStatus: GitStatus | null
+ maimaiVersion: MaimaiVersion | null
+ pluginStats: Record
+ {plugin.manifest?.name || plugin.id}
+
+
+ {plugin.manifest?.categories && plugin.manifest.categories[0] && (
+
+ {CATEGORY_NAMES[plugin.manifest.categories[0]] || plugin.manifest.categories[0]}
+
+ )}
+ {getStatusBadge(plugin)}
+
+
+ {/* 统计信息 */}
+
+
+
+ {/* 标签 */}
+
+
+
+
+
+ {plugin.manifest?.keywords && plugin.manifest.keywords.slice(0, 3).map((keyword) => (
+
+ {keyword}
+
+ ))}
+ {plugin.manifest?.keywords && plugin.manifest.keywords.length > 3 && (
+
+ +{plugin.manifest.keywords.length - 3}
+
+ )}
+
+ {/* 版本和作者 */}
+
+
+ v{plugin.manifest?.version || 'unknown'} · {plugin.manifest?.author?.name || 'Unknown'}
+ {/* 支持版本 */}
+ {plugin.manifest?.host_application && (
+
+ 支持:
+
+ {plugin.manifest.host_application.min_version}
+ {plugin.manifest.host_application.max_version
+ ? ` - ${plugin.manifest.host_application.max_version}`
+ : ' - 最新版本'
+ }
+
+
+ )}
+
+
+ {plugin.installed ? (
+ needsUpdate(plugin) ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+
+ )}
+
+
+
+
+ {loadProgress.stage !== 'error' && (
+
+ {loadProgress.stage === 'loading' ? (
+
+ {loadProgress.stage !== 'error' && (
+ {loadProgress.progress}%
+ )}
+
@@ -718,55 +768,13 @@ function PluginsPageContent() {
- 全部插件 ({
- plugins.filter(p => {
- if (!p.manifest) return false
- const matchesSearch = searchQuery === '' ||
- p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- (p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
- const matchesCategory = categoryFilter === 'all' ||
- (p.manifest.categories && p.manifest.categories.includes(categoryFilter))
- const matchesCompatibility = !showCompatibleOnly ||
- !maimaiVersion ||
- checkPluginCompatibility(p)
- return matchesSearch && matchesCategory && matchesCompatibility
- }).length
- })
+ 全部插件 ({getFilteredPluginCount('all')})
- 已安装 ({
- plugins.filter(p => {
- if (!p.manifest) return false
- const matchesSearch = searchQuery === '' ||
- p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- (p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
- const matchesCategory = categoryFilter === 'all' ||
- (p.manifest.categories && p.manifest.categories.includes(categoryFilter))
- const matchesCompatibility = !showCompatibleOnly ||
- !maimaiVersion ||
- checkPluginCompatibility(p)
- return p.installed && matchesSearch && matchesCategory && matchesCompatibility
- }).length
- })
+ 已安装 ({getFilteredPluginCount('installed')})
- 可更新 ({
- plugins.filter(p => {
- if (!p.manifest) return false
- const matchesSearch = searchQuery === '' ||
- p.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- p.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- (p.manifest.keywords && p.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
- const matchesCategory = categoryFilter === 'all' ||
- (p.manifest.categories && p.manifest.categories.includes(categoryFilter))
- const matchesCompatibility = !showCompatibleOnly ||
- !maimaiVersion ||
- checkPluginCompatibility(p)
- return p.installed && needsUpdate(p) && matchesSearch && matchesCategory && matchesCompatibility
- }).length
- })
+ 可更新 ({getFilteredPluginCount('updates')})
@@ -831,328 +839,57 @@ function PluginsPageContent() {
- ) : filteredPlugins.length === 0 ? (
-
-
- 未找到插件
-- {searchQuery || categoryFilter !== 'all' - ? '尝试调整搜索条件或筛选器' - : '暂无可用插件'} -
-
- {filteredPlugins.map((plugin) => (
-
-
- {plugin.manifest?.description || '无描述'}
-
-
-
-
-
- {/* 安装/卸载/更新进度显示 - 在卡片下方 */}
- {loadProgress &&
- (loadProgress.stage === 'loading' || loadProgress.stage === 'success' || loadProgress.stage === 'error') &&
- loadProgress.operation !== 'fetch' &&
- loadProgress.plugin_id === plugin.id && (
-
- ))}
+ {filteredUpdatablePlugins.map((plugin) => (
+
)}
{/* 安装对话框 */}
-
+
- {plugin.manifest?.name || plugin.id}
-
-
- {plugin.manifest?.categories && plugin.manifest.categories[0] && (
-
- {CATEGORY_NAMES[plugin.manifest.categories[0]] || plugin.manifest.categories[0]}
-
- )}
- {getStatusBadge(plugin)}
-
-
- {/* 统计信息 */}
-
-
-
- {/* 标签 */}
-
-
-
-
-
- {plugin.manifest?.keywords && plugin.manifest.keywords.slice(0, 3).map((keyword) => (
-
- {keyword}
-
- ))}
- {plugin.manifest?.keywords && plugin.manifest.keywords.length > 3 && (
-
- +{plugin.manifest.keywords.length - 3}
-
- )}
-
- {/* 版本和作者 */}
-
-
- v{plugin.manifest?.version || 'unknown'} · {plugin.manifest?.author?.name || 'Unknown'}
- {/* 支持版本 */}
- {plugin.manifest?.host_application && (
-
- 支持:
-
- {plugin.manifest.host_application.min_version}
- {plugin.manifest.host_application.max_version
- ? ` - ${plugin.manifest.host_application.max_version}`
- : ' - 最新版本'
- }
-
-
- )}
-
-
- {plugin.installed ? (
- needsUpdate(plugin) ? (
-
- ) : (
-
- )
- ) : (
-
- )}
-
-
-
- )}
-
-
-
-
- {loadProgress.stage !== 'error' && (
-
- {loadProgress.stage === 'loading' ? (
-
- {loadProgress.stage !== 'error' && (
- {loadProgress.progress}%
- )}
-
+ {/* PluginCard would go here */}
+
+ ))}
- {/* 页面标题 */}
-
-
-
- {/* 批量删除确认对话框 */}
-
-
-
- 确认批量删除
-
- 你确定要删除选中的 {selectedIds.size} 个表情包吗？此操作不可撤销。
-
-
-
- 取消
-
- 确认删除
-
-
-
-
-
- {/* 删除确认对话框 */}
-
-
- )
-}
-
-// 详情对话框组件
-function EmojiDetailDialog({
- emoji,
- open,
- onOpenChange,
-}: {
- emoji: Emoji | null
- open: boolean
- onOpenChange: (open: boolean) => void
-}) {
- if (!emoji) return null
-
- const formatTime = (timestamp: number | null) => {
- if (!timestamp) return '-'
- return new Date(timestamp * 1000).toLocaleString('zh-CN')
- }
-
- return (
-
- )
-}
-
-// 编辑对话框组件
-function EmojiEditDialog({
- emoji,
- open,
- onOpenChange,
- onSuccess,
-}: {
- emoji: Emoji | null
- open: boolean
- onOpenChange: (open: boolean) => void
- onSuccess: () => void
-}) {
- const [emotionInput, setEmotionInput] = useState('')
- const [isRegistered, setIsRegistered] = useState(false)
- const [isBanned, setIsBanned] = useState(false)
- const [saving, setSaving] = useState(false)
-
- const { toast } = useToast()
-
- useEffect(() => {
- if (emoji) {
- setEmotionInput(emoji.emotion || '')
- setIsRegistered(emoji.is_registered)
- setIsBanned(emoji.is_banned)
- }
- }, [emoji])
-
- const handleSave = async () => {
- if (!emoji) return
-
- try {
- setSaving(true)
- // 将输入的标签字符串标准化为逗号分隔格式
- const emotionString = emotionInput
- .split(/[,,]/)
- .map((s) => s.trim())
- .filter(Boolean)
- .join(',')
-
- await updateEmoji(emoji.id, {
- emotion: emotionString || undefined,
- is_registered: isRegistered,
- is_banned: isBanned,
- })
-
- toast({
- title: '成功',
- description: '表情包信息已更新',
- })
- onOpenChange(false)
- onSuccess()
- } catch (error) {
- const message = error instanceof Error ? error.message : '保存失败'
- toast({
- title: '错误',
- description: message,
- variant: 'destructive',
- })
- } finally {
- setSaving(false)
- }
- }
-
- if (!emoji) return null
-
- return (
-
-
-
-
-
-
- 表情包管理
-- 管理麦麦的表情包资源 -
-
-
- {/* 统计卡片 */}
- {stats && (
-
-
-
-
-
-
-
-
-
- {/* 表情包卡片列表 */}
-
-
- 表情包列表
-
- 共 {total} 个表情包，当前第 {page} 页
-
-
-
- {/* 卡片网格视图 */}
- {emojiList.length === 0 ? (
-
-
-
- {/* 详情对话框 */}
- {
- loadEmojiList()
- loadStats()
- }}
- />
-
- {/* 上传对话框 */}
- {
- loadEmojiList()
- loadStats()
- }}
- />
-
-
-
-
-
- 总数
- {stats.total}
-
-
-
-
- 已注册
-
- {stats.registered}
-
-
-
-
-
- 已封禁
-
- {stats.banned}
-
-
-
-
-
- 未注册
-
- {stats.unregistered}
-
-
-
-
- )}
-
- {/* 筛选和排序 */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {selectedIds.size > 0 && (
- 已选择 {selectedIds.size} 个表情包
- )}
- {/* 卡片尺寸切换 */}
-
-
-
-
-
-
-
-
- {selectedIds.size > 0 && (
- <>
-
-
-
- )}
-
-
-
-
-
- 暂无数据
-
- ) : (
-
- {emojiList.map((emoji) => (
-
- )}
-
- {/* 分页 */}
- {/* 分页 - 增强版 */}
- {total > 0 && (
- toggleSelect(emoji.id)}
- >
- {/* 选中指示器 */}
-
- ))}
-
-
-
- {/* 状态标签 */}
-
- {selectedIds.has(emoji.id) &&
-
- {emoji.is_registered && (
-
- 已注册
-
- )}
- {emoji.is_banned && (
-
- 已封禁
-
- )}
-
-
- {/* 图片 */}
-
-
-
- {/* 底部信息和操作 */}
-
- {/* 使用次数和格式 */}
-
-
-
- {emoji.format.toUpperCase()}
-
- {emoji.usage_count}次
-
-
- {/* 操作按钮 - 悬停时显示 */}
-
-
-
- {!emoji.is_registered && (
-
- )}
- {!emoji.is_banned && (
-
- )}
-
-
-
-
- )}
-
- 显示 {(page - 1) * pageSize + 1} 到{' '}
- {Math.min(page * pageSize, total)} 条，共 {total} 条
-
-
- {/* 首页 */}
-
-
- {/* 上一页 */}
-
-
- {/* 页码跳转 */}
-
-
- setJumpToPage(e.target.value)}
- onKeyDown={(e) => e.key === 'Enter' && handleJumpToPage()}
- placeholder={page.toString()}
- className="w-16 h-8 text-center"
- min={1}
- max={Math.ceil(total / pageSize)}
- />
-
-
-
- {/* 下一页 */}
-
-
- {/* 末页 */}
-
-