1087 lines
38 KiB
TypeScript
1087 lines
38 KiB
TypeScript
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||
import { parse as parseToml } from 'smol-toml'
|
||
|
||
import { AlertDescription, Alert } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import { CodeEditor } from '@/components/CodeEditor'
|
||
import { DynamicConfigForm } from '@/components/dynamic-form'
|
||
import { RestartOverlay } from '@/components/restart-overlay'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { getBotConfig, getBotConfigRaw, getBotConfigSchema, updateBotConfig, updateBotConfigRaw } from '@/lib/config-api'
|
||
import { fieldHooks } from '@/lib/field-hooks'
|
||
import { RestartProvider, useRestart } from '@/lib/restart-context'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
import { ChevronDown, ChevronUp, Code2, Info, Layout, Power, RefreshCw, Save } from 'lucide-react'
|
||
|
||
import type { ConfigSchema } from '@/types/config-schema'
|
||
import {
|
||
BotPlatformsHook,
|
||
ChatPromptsHook,
|
||
ChatTalkValueRulesHook,
|
||
ExpressionGroupsHook,
|
||
ExpressionLearningListHook,
|
||
KeywordRulesHook,
|
||
MCPRootItemsHook,
|
||
MCPServersHook,
|
||
RegexRulesHook,
|
||
useAutoSave,
|
||
useConfigAutoSave,
|
||
} from './bot/hooks'
|
||
|
||
type ConfigSectionData = Record<string, unknown>
|
||
// ==================== 常量定义 ====================
|
||
/** Toast 显示前的延迟时间 (毫秒) */
|
||
const TOAST_DISPLAY_DELAY = 500
|
||
|
||
/** Tab 标签页的首选排列顺序 (host field name) */
|
||
const TAB_ORDER = [
|
||
'bot',
|
||
'chat',
|
||
'expression',
|
||
'a_memorix',
|
||
'visual',
|
||
'message_receive',
|
||
'emoji',
|
||
'voice',
|
||
'response_post_process',
|
||
'webui',
|
||
'plugin_runtime',
|
||
'log',
|
||
]
|
||
|
||
/** 默认展示的主配置栏目 */
|
||
const DEFAULT_VISIBLE_TAB_IDS = new Set([
|
||
'bot',
|
||
'chat',
|
||
'expression',
|
||
'a_memorix',
|
||
])
|
||
|
||
// ==================== Tab 分组类型与构建 ====================
|
||
interface TabGroup {
|
||
id: string
|
||
label: string
|
||
icon: string
|
||
sections: string[]
|
||
}
|
||
|
||
/**
|
||
* 从 schema 的 nested 字段解析出 tab 分组信息。
|
||
* - 有 uiLabel 且无 uiParent → 独立 tab
|
||
* - 有 uiParent → 递归找到最终 host，并归入对应 tab
|
||
*/
|
||
function buildTabGroupsFromSchema(schema: ConfigSchema): TabGroup[] {
|
||
const nested = schema.nested || {}
|
||
const nestedEntries = Object.entries(nested)
|
||
const hosts = new Map<string, TabGroup>()
|
||
|
||
const resolveHostId = (fieldName: string, visited: Set<string> = new Set()): string | null => {
|
||
if (visited.has(fieldName)) {
|
||
return null
|
||
}
|
||
|
||
const fieldSchema = nested[fieldName]
|
||
if (!fieldSchema) {
|
||
return null
|
||
}
|
||
|
||
if (!fieldSchema.uiParent) {
|
||
return fieldSchema.uiLabel && fieldSchema.uiIcon ? fieldName : null
|
||
}
|
||
|
||
visited.add(fieldName)
|
||
return resolveHostId(fieldSchema.uiParent, visited)
|
||
}
|
||
|
||
for (const [fieldName, fieldSchema] of nestedEntries) {
|
||
if (fieldSchema.uiLabel && fieldSchema.uiIcon && !fieldSchema.uiParent) {
|
||
hosts.set(fieldName, {
|
||
id: fieldName,
|
||
label: fieldSchema.uiLabel,
|
||
icon: fieldSchema.uiIcon || '',
|
||
sections: [fieldName],
|
||
})
|
||
}
|
||
}
|
||
|
||
for (const [fieldName] of nestedEntries) {
|
||
const hostId = resolveHostId(fieldName)
|
||
if (!hostId || hostId === fieldName) {
|
||
continue
|
||
}
|
||
|
||
const parent = hosts.get(hostId)
|
||
if (parent && !parent.sections.includes(fieldName)) {
|
||
parent.sections.push(fieldName)
|
||
}
|
||
}
|
||
|
||
// 按 TAB_ORDER 排序；未列入的 tab 追加到末尾
|
||
return Array.from(hosts.values()).sort((a, b) => {
|
||
const ai = TAB_ORDER.indexOf(a.id)
|
||
const bi = TAB_ORDER.indexOf(b.id)
|
||
return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi)
|
||
})
|
||
}
|
||
|
||
// 主导出组件：包装 RestartProvider
|
||
export function BotConfigPage() {
|
||
return (
|
||
<RestartProvider>
|
||
<BotConfigPageContent />
|
||
</RestartProvider>
|
||
)
|
||
}
|
||
|
||
// 内部实现组件
|
||
function BotConfigPageContent() {
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [autoSaving, setAutoSaving] = useState(false)
|
||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
|
||
const [editMode, setEditMode] = useState<'visual' | 'source'>('visual')
|
||
const [sourceCode, setSourceCode] = useState<string>('')
|
||
const [hasTomlError, setHasTomlError] = useState(false)
|
||
const [tomlErrorMessage, setTomlErrorMessage] = useState<string>('')
|
||
const [restartNoticeVisible, setRestartNoticeVisible] = useState(
|
||
() => localStorage.getItem('bot-config-restart-notice-dismissed') !== 'true'
|
||
)
|
||
const { toast } = useToast()
|
||
const { triggerRestart, isRestarting } = useRestart()
|
||
|
||
// 配置状态
|
||
const [botConfig, setBotConfig] = useState<ConfigSectionData | null>(null)
|
||
const [personalityConfig, setPersonalityConfig] = useState<ConfigSectionData | null>(null)
|
||
const [chatConfig, setChatConfig] = useState<ConfigSectionData | null>(null)
|
||
const [expressionConfig, setExpressionConfig] = useState<ConfigSectionData | null>(null)
|
||
const [emojiConfig, setEmojiConfig] = useState<ConfigSectionData | null>(null)
|
||
const [memoryConfig, setMemoryConfig] = useState<ConfigSectionData | null>(null)
|
||
const [visualConfig, setVisualConfig] = useState<ConfigSectionData | null>(null)
|
||
const [voiceConfig, setVoiceConfig] = useState<ConfigSectionData | null>(null)
|
||
const [messageReceiveConfig, setMessageReceiveConfig] = useState<ConfigSectionData | null>(null)
|
||
const [keywordReactionConfig, setKeywordReactionConfig] = useState<ConfigSectionData | null>(null)
|
||
const [responsePostProcessConfig, setResponsePostProcessConfig] = useState<ConfigSectionData | null>(null)
|
||
const [chineseTypoConfig, setChineseTypoConfig] = useState<ConfigSectionData | null>(null)
|
||
const [responseSplitterConfig, setResponseSplitterConfig] = useState<ConfigSectionData | null>(null)
|
||
const [logConfig, setLogConfig] = useState<ConfigSectionData | null>(null)
|
||
const [debugConfig, setDebugConfig] = useState<ConfigSectionData | null>(null)
|
||
const [maimMessageConfig, setMaimMessageConfig] = useState<ConfigSectionData | null>(null)
|
||
const [telemetryConfig, setTelemetryConfig] = useState<ConfigSectionData | null>(null)
|
||
const [webuiConfig, setWebuiConfig] = useState<ConfigSectionData | null>(null)
|
||
const [databaseConfig, setDatabaseConfig] = useState<ConfigSectionData | null>(null)
|
||
const [mcpConfig, setMcpConfig] = useState<ConfigSectionData | null>(null)
|
||
const [pluginRuntimeConfig, setPluginRuntimeConfig] = useState<ConfigSectionData | null>(null)
|
||
const [aMemorixConfig, setAMemorixConfig] = useState<ConfigSectionData | null>(null)
|
||
|
||
// Schema 状态（用于动态 tab 分组）
|
||
const [configSchema, setConfigSchema] = useState<ConfigSchema | null>(null)
|
||
|
||
// 用于标记初始加载和配置缓存
|
||
const initialLoadRef = useRef(true)
|
||
const configRef = useRef<Record<string, unknown>>({})
|
||
|
||
// ==================== 辅助函数 ====================
|
||
|
||
/**
|
||
* 翻译 TOML 错误信息为中文
|
||
*/
|
||
const translateTomlError = (errorMessage: string): string => {
|
||
// 分行处理，保留多行格式
|
||
const lines = errorMessage.split('\n')
|
||
|
||
// 翻译第一行（主要错误信息）
|
||
let firstLine = lines[0]
|
||
|
||
// 移除 "Error: " 前缀（如果有）
|
||
firstLine = firstLine.replace(/^Error:\s*/, '')
|
||
|
||
// 常见 TOML 错误模式匹配和翻译
|
||
const translations: Array<[RegExp, string | ((match: RegExpMatchArray) => string)]> = [
|
||
// Invalid TOML document 系列
|
||
[/Invalid TOML document: unrecognized escape sequence/, 'TOML 文档错误：无法识别的转义序列（提示：在双引号字符串中使用 \\\\ 转义反斜杠，或使用单引号字符串）'],
|
||
[/Invalid TOML document: only letter, numbers, dashes and underscores are allowed in keys/, 'TOML 文档错误：键名只能包含字母、数字、短横线和下划线'],
|
||
[/Invalid TOML document: (.+)/, 'TOML 文档错误：$1'],
|
||
|
||
// 位置错误系列
|
||
[/Unexpected character.*at line (\d+), column (\d+)/, '第 $1 行第 $2 列：意外的字符'],
|
||
[/Expected.*at line (\d+), column (\d+)/, '第 $1 行第 $2 列：缺少必要的字符'],
|
||
[/Invalid.*at line (\d+), column (\d+)/, '第 $1 行第 $2 列：无效的语法'],
|
||
[/Unterminated string at line (\d+)/, '第 $1 行：字符串未正常结束（缺少引号）'],
|
||
[/Duplicate key.*at line (\d+)/, '第 $1 行：重复的键名'],
|
||
[/Invalid escape sequence at line (\d+)/, '第 $1 行：无效的转义序列（提示：在双引号字符串中使用 \\\\ 转义反斜杠）'],
|
||
[/Expected.*but got.*at line (\d+)/, '第 $1 行：类型不匹配'],
|
||
[/line (\d+), column (\d+)/, '第 $1 行第 $2 列'],
|
||
|
||
// 通用错误系列
|
||
[/Unexpected end of input/, '意外的文件结束（可能缺少闭合符号）'],
|
||
[/Unexpected token/, '意外的标记'],
|
||
[/Invalid number/, '无效的数字'],
|
||
[/Invalid date/, '无效的日期格式'],
|
||
[/Invalid boolean/, '无效的布尔值（应为 true 或 false）'],
|
||
[/Unexpected character/, '意外的字符'],
|
||
[/unrecognized escape sequence/, '无法识别的转义序列'],
|
||
]
|
||
|
||
// 尝试翻译第一行
|
||
for (const [pattern, replacement] of translations) {
|
||
if (pattern.test(firstLine)) {
|
||
firstLine = firstLine.replace(pattern, replacement as string)
|
||
break
|
||
}
|
||
}
|
||
|
||
// 重组多行错误信息
|
||
if (lines.length > 1) {
|
||
lines[0] = firstLine
|
||
return lines.join('\n')
|
||
}
|
||
|
||
return firstLine
|
||
}
|
||
|
||
/**
|
||
* 解析并设置所有配置状态
|
||
* 抽取自 loadConfig 和 handleModeChange 中的重复逻辑
|
||
*/
|
||
const parseAndSetConfig = useCallback((config: Record<string, unknown>) => {
|
||
configRef.current = config
|
||
|
||
setBotConfig((config.bot ?? {}) as ConfigSectionData)
|
||
setPersonalityConfig((config.personality ?? {}) as ConfigSectionData)
|
||
setChatConfig((config.chat ?? {}) as ConfigSectionData)
|
||
setExpressionConfig((config.expression ?? {}) as ConfigSectionData)
|
||
setEmojiConfig((config.emoji ?? {}) as ConfigSectionData)
|
||
setMemoryConfig((config.memory ?? {}) as ConfigSectionData)
|
||
setVisualConfig((config.visual ?? {}) as ConfigSectionData)
|
||
setVoiceConfig((config.voice ?? {}) as ConfigSectionData)
|
||
setMessageReceiveConfig((config.message_receive ?? {}) as ConfigSectionData)
|
||
setKeywordReactionConfig((config.keyword_reaction ?? {}) as ConfigSectionData)
|
||
setResponsePostProcessConfig((config.response_post_process ?? {}) as ConfigSectionData)
|
||
setChineseTypoConfig((config.chinese_typo ?? {}) as ConfigSectionData)
|
||
setResponseSplitterConfig((config.response_splitter ?? {}) as ConfigSectionData)
|
||
setLogConfig((config.log ?? {}) as ConfigSectionData)
|
||
setDebugConfig((config.debug ?? {}) as ConfigSectionData)
|
||
setMaimMessageConfig((config.maim_message ?? {}) as ConfigSectionData)
|
||
setTelemetryConfig((config.telemetry ?? {}) as ConfigSectionData)
|
||
setWebuiConfig((config.webui ?? {}) as ConfigSectionData)
|
||
setDatabaseConfig((config.database ?? {}) as ConfigSectionData)
|
||
setMcpConfig((config.mcp ?? {}) as ConfigSectionData)
|
||
setPluginRuntimeConfig((config.plugin_runtime ?? {}) as ConfigSectionData)
|
||
setAMemorixConfig((config.a_memorix ?? {}) as ConfigSectionData)
|
||
}, [])
|
||
|
||
/**
|
||
* 构建完整的配置对象用于保存
|
||
* 抽取自 saveConfig 和 handleSaveAndRestart 中的重复逻辑
|
||
*/
|
||
const buildFullConfig = useCallback(() => {
|
||
return {
|
||
...configRef.current,
|
||
bot: botConfig,
|
||
personality: personalityConfig,
|
||
chat: chatConfig,
|
||
expression: expressionConfig,
|
||
emoji: emojiConfig,
|
||
memory: memoryConfig,
|
||
visual: visualConfig,
|
||
voice: voiceConfig,
|
||
message_receive: messageReceiveConfig,
|
||
keyword_reaction: keywordReactionConfig,
|
||
response_post_process: responsePostProcessConfig,
|
||
chinese_typo: chineseTypoConfig,
|
||
response_splitter: responseSplitterConfig,
|
||
log: logConfig,
|
||
debug: debugConfig,
|
||
maim_message: maimMessageConfig,
|
||
telemetry: telemetryConfig,
|
||
webui: webuiConfig,
|
||
database: databaseConfig,
|
||
mcp: mcpConfig,
|
||
plugin_runtime: pluginRuntimeConfig,
|
||
a_memorix: aMemorixConfig,
|
||
}
|
||
}, [
|
||
botConfig,
|
||
personalityConfig,
|
||
chatConfig,
|
||
expressionConfig,
|
||
emojiConfig,
|
||
memoryConfig,
|
||
visualConfig,
|
||
voiceConfig,
|
||
messageReceiveConfig,
|
||
keywordReactionConfig,
|
||
responsePostProcessConfig,
|
||
chineseTypoConfig,
|
||
responseSplitterConfig,
|
||
logConfig,
|
||
debugConfig,
|
||
maimMessageConfig,
|
||
telemetryConfig,
|
||
webuiConfig,
|
||
databaseConfig,
|
||
mcpConfig,
|
||
pluginRuntimeConfig,
|
||
aMemorixConfig,
|
||
])
|
||
|
||
// 加载源代码
|
||
const loadSourceCode = useCallback(async () => {
|
||
try {
|
||
const result = await getBotConfigRaw()
|
||
if (!result.success) {
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '加载失败',
|
||
description: result.error,
|
||
})
|
||
return
|
||
}
|
||
const raw = (result.data as unknown as Record<string, unknown>).content as string
|
||
// 将 TOML 基本字符串中的转义序列转换为实际字符以便在编辑器中正确显示
|
||
// 使用正则表达式只处理双引号字符串内的转义序列，不影响单引号字符串
|
||
const unescaped = raw.replace(/"([^"]*)"/g, (_match, content) => {
|
||
const decoded = content
|
||
.replace(/\\n/g, '\n') // 换行符
|
||
.replace(/\\t/g, '\t') // 制表符
|
||
.replace(/\\r/g, '\r') // 回车符
|
||
.replace(/\\"/g, '"') // 双引号
|
||
.replace(/\\\\/g, '\\') // 反斜杠（必须放在最后）
|
||
return `"${decoded}"`
|
||
})
|
||
setSourceCode(unescaped)
|
||
setHasTomlError(false)
|
||
} catch (error) {
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '加载失败',
|
||
description: error instanceof Error ? error.message : '加载源代码失败',
|
||
})
|
||
}
|
||
}, [toast])
|
||
|
||
// 加载配置
|
||
const loadConfig = useCallback(async () => {
|
||
try {
|
||
setLoading(true)
|
||
const [result, schemaResult] = await Promise.all([getBotConfig(), getBotConfigSchema()])
|
||
if (!result.success) {
|
||
toast({
|
||
title: '加载失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
setLoading(false)
|
||
return
|
||
}
|
||
parseAndSetConfig((result.data as Record<string, unknown>).config as Record<string, unknown>)
|
||
if (schemaResult.success && schemaResult.data) {
|
||
setConfigSchema((schemaResult.data as unknown as Record<string, unknown>).schema as ConfigSchema)
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
initialLoadRef.current = false
|
||
|
||
// 同时加载源代码
|
||
await loadSourceCode()
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error)
|
||
toast({
|
||
title: '加载失败',
|
||
description: '无法加载配置文件',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [toast, loadSourceCode, parseAndSetConfig])
|
||
|
||
useEffect(() => {
|
||
loadConfig()
|
||
}, [loadConfig])
|
||
|
||
useEffect(() => {
|
||
const hookEntries = [
|
||
['bot.platforms', BotPlatformsHook],
|
||
['chat.chat_prompts', ChatPromptsHook],
|
||
['chat.talk_value_rules', ChatTalkValueRulesHook],
|
||
['expression.expression_groups', ExpressionGroupsHook],
|
||
['expression.learning_list', ExpressionLearningListHook],
|
||
['keyword_reaction.keyword_rules', KeywordRulesHook],
|
||
['keyword_reaction.regex_rules', RegexRulesHook],
|
||
['mcp.client.roots.items', MCPRootItemsHook],
|
||
['mcp.servers', MCPServersHook],
|
||
] as const
|
||
|
||
for (const [fieldPath, hookComponent] of hookEntries) {
|
||
fieldHooks.register(fieldPath, hookComponent, 'replace')
|
||
}
|
||
|
||
return () => {
|
||
for (const [fieldPath] of hookEntries) {
|
||
fieldHooks.unregister(fieldPath)
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
// 使用模块化的 useAutoSave hook
|
||
const { triggerAutoSave, cancelPendingAutoSave } = useAutoSave(
|
||
initialLoadRef.current,
|
||
setAutoSaving,
|
||
setHasUnsavedChanges
|
||
)
|
||
|
||
// 使用 useConfigAutoSave hook 简化配置变化监听
|
||
// 注意: useConfigAutoSave 是一个 hook，不能在条件语句或循环中调用
|
||
// 因此我们仍然需要逐个调用，但代码更简洁
|
||
useConfigAutoSave(botConfig, 'bot', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(personalityConfig, 'personality', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(chatConfig, 'chat', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(expressionConfig, 'expression', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(emojiConfig, 'emoji', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(memoryConfig, 'memory', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(visualConfig, 'visual', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(voiceConfig, 'voice', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(messageReceiveConfig, 'message_receive', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(keywordReactionConfig, 'keyword_reaction', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(responsePostProcessConfig, 'response_post_process', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(chineseTypoConfig, 'chinese_typo', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(responseSplitterConfig, 'response_splitter', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(logConfig, 'log', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(debugConfig, 'debug', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(maimMessageConfig, 'maim_message', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(telemetryConfig, 'telemetry', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(webuiConfig, 'webui', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(databaseConfig, 'database', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(mcpConfig, 'mcp', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(pluginRuntimeConfig, 'plugin_runtime', initialLoadRef.current, triggerAutoSave)
|
||
useConfigAutoSave(aMemorixConfig, 'a_memorix', initialLoadRef.current, triggerAutoSave)
|
||
|
||
// 保存源代码
|
||
const saveSourceCode = async () => {
|
||
try {
|
||
setSaving(true)
|
||
// 编辑器展示时会把 basic string 内的 \n 展开成真实换行；保存前先转回 TOML 转义序列。
|
||
const escapedSourceCode = sourceCode.replace(/"([^"]*)"/g, (_match, content) => {
|
||
const encoded = content
|
||
.replace(/\\/g, '\\\\') // 反斜杠必须先转义，避免 \s 等序列被 TOML 当作非法转义
|
||
.replace(/"/g, '\\"')
|
||
.replace(/\n/g, '\\n')
|
||
.replace(/\t/g, '\\t')
|
||
.replace(/\r/g, '\\r')
|
||
return `"${encoded}"`
|
||
})
|
||
|
||
// 前端验证 TOML 格式
|
||
try {
|
||
parseToml(escapedSourceCode)
|
||
} catch (error) {
|
||
const errorMsg = error instanceof Error ? error.message : 'TOML 格式错误'
|
||
const translatedMsg = translateTomlError(errorMsg)
|
||
setHasTomlError(true)
|
||
setTomlErrorMessage(translatedMsg)
|
||
toast({
|
||
variant: 'destructive',
|
||
title: 'TOML 格式错误',
|
||
description: translatedMsg,
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
|
||
const result = await updateBotConfigRaw(escapedSourceCode)
|
||
if (!result.success) {
|
||
setHasTomlError(true)
|
||
const errorMsg = result.error
|
||
setTomlErrorMessage(errorMsg)
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '保存失败',
|
||
description: errorMsg,
|
||
})
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
setHasTomlError(false)
|
||
setTomlErrorMessage('')
|
||
toast({
|
||
title: '保存成功',
|
||
description: '配置已保存',
|
||
})
|
||
// 重新加载可视化配置
|
||
await loadConfig()
|
||
} catch (error) {
|
||
setHasTomlError(true)
|
||
const errorMsg = error instanceof Error ? error.message : '保存配置失败'
|
||
setTomlErrorMessage(errorMsg)
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '保存失败',
|
||
description: errorMsg,
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
// 处理模式切换
|
||
const handleModeChange = async (mode: 'visual' | 'source') => {
|
||
if (hasUnsavedChanges) {
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '切换失败',
|
||
description: '请先保存当前更改',
|
||
})
|
||
return
|
||
}
|
||
|
||
setEditMode(mode)
|
||
if (mode === 'source') {
|
||
await loadSourceCode()
|
||
} else {
|
||
// 切换回可视化时,直接重新加载配置但不显示全局 loading
|
||
try {
|
||
const result = await getBotConfig()
|
||
if (!result.success) {
|
||
toast({
|
||
title: '加载失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
parseAndSetConfig((result.data as Record<string, unknown>).config as Record<string, unknown>)
|
||
setHasUnsavedChanges(false)
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error)
|
||
toast({
|
||
title: '加载失败',
|
||
description: '无法加载配置文件',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 手动保存
|
||
const saveConfig = async () => {
|
||
try {
|
||
setSaving(true)
|
||
// 取消待处理的自动保存
|
||
cancelPendingAutoSave()
|
||
|
||
const result = await updateBotConfig(buildFullConfig())
|
||
if (!result.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '麦麦主程序配置已保存',
|
||
})
|
||
} catch (error) {
|
||
console.error('保存配置失败:', error)
|
||
toast({
|
||
title: '保存失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
// 重启麦麦
|
||
const handleRestart = async () => {
|
||
await triggerRestart()
|
||
}
|
||
|
||
const dismissRestartNotice = () => {
|
||
localStorage.setItem('bot-config-restart-notice-dismissed', 'true')
|
||
setRestartNoticeVisible(false)
|
||
}
|
||
|
||
const handleReloadFromFile = async () => {
|
||
cancelPendingAutoSave()
|
||
await loadConfig()
|
||
setHasUnsavedChanges(false)
|
||
toast({
|
||
title: '已刷新',
|
||
description: '已从 bot_config.toml 重新读取配置',
|
||
})
|
||
}
|
||
|
||
// 保存并重启
|
||
const handleSaveAndRestart = async () => {
|
||
try {
|
||
setSaving(true)
|
||
// 取消待处理的自动保存
|
||
cancelPendingAutoSave()
|
||
|
||
const result = await updateBotConfig(buildFullConfig())
|
||
if (!result.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '配置已保存，即将重启麦麦...',
|
||
})
|
||
// 等待一下让用户看到保存成功的提示
|
||
await new Promise(resolve => setTimeout(resolve, TOAST_DISPLAY_DELAY))
|
||
await handleRestart()
|
||
} catch (error) {
|
||
console.error('保存失败:', error)
|
||
toast({
|
||
title: '保存失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
// 根据 schema 构建 tab 分组
|
||
const tabGroups = useMemo(() => {
|
||
if (!configSchema) return []
|
||
return buildTabGroupsFromSchema(configSchema)
|
||
}, [configSchema])
|
||
|
||
const sectionValues = useMemo<Record<string, ConfigSectionData | null>>(
|
||
() => ({
|
||
bot: botConfig,
|
||
personality: personalityConfig,
|
||
chat: chatConfig,
|
||
expression: expressionConfig,
|
||
emoji: emojiConfig,
|
||
memory: memoryConfig,
|
||
visual: visualConfig,
|
||
voice: voiceConfig,
|
||
message_receive: messageReceiveConfig,
|
||
keyword_reaction: keywordReactionConfig,
|
||
response_post_process: responsePostProcessConfig,
|
||
chinese_typo: chineseTypoConfig,
|
||
response_splitter: responseSplitterConfig,
|
||
log: logConfig,
|
||
debug: debugConfig,
|
||
maim_message: maimMessageConfig,
|
||
telemetry: telemetryConfig,
|
||
webui: webuiConfig,
|
||
database: databaseConfig,
|
||
mcp: mcpConfig,
|
||
plugin_runtime: pluginRuntimeConfig,
|
||
a_memorix: aMemorixConfig,
|
||
}),
|
||
[
|
||
botConfig,
|
||
personalityConfig,
|
||
chatConfig,
|
||
expressionConfig,
|
||
emojiConfig,
|
||
memoryConfig,
|
||
visualConfig,
|
||
voiceConfig,
|
||
messageReceiveConfig,
|
||
keywordReactionConfig,
|
||
responsePostProcessConfig,
|
||
chineseTypoConfig,
|
||
responseSplitterConfig,
|
||
logConfig,
|
||
debugConfig,
|
||
maimMessageConfig,
|
||
telemetryConfig,
|
||
webuiConfig,
|
||
databaseConfig,
|
||
mcpConfig,
|
||
pluginRuntimeConfig,
|
||
aMemorixConfig,
|
||
]
|
||
)
|
||
|
||
const setSectionValue = useCallback((sectionName: string, value: ConfigSectionData) => {
|
||
const sectionSetterMap: Record<string, (nextValue: ConfigSectionData) => void> = {
|
||
bot: setBotConfig,
|
||
personality: setPersonalityConfig,
|
||
chat: setChatConfig,
|
||
expression: setExpressionConfig,
|
||
emoji: setEmojiConfig,
|
||
memory: setMemoryConfig,
|
||
visual: setVisualConfig,
|
||
voice: setVoiceConfig,
|
||
message_receive: setMessageReceiveConfig,
|
||
keyword_reaction: setKeywordReactionConfig,
|
||
response_post_process: setResponsePostProcessConfig,
|
||
chinese_typo: setChineseTypoConfig,
|
||
response_splitter: setResponseSplitterConfig,
|
||
log: setLogConfig,
|
||
debug: setDebugConfig,
|
||
maim_message: setMaimMessageConfig,
|
||
telemetry: setTelemetryConfig,
|
||
webui: setWebuiConfig,
|
||
database: setDatabaseConfig,
|
||
mcp: setMcpConfig,
|
||
plugin_runtime: setPluginRuntimeConfig,
|
||
a_memorix: setAMemorixConfig,
|
||
}
|
||
|
||
sectionSetterMap[sectionName]?.(value)
|
||
}, [])
|
||
|
||
if (loading) {
|
||
return (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||
<div className="flex items-center justify-center h-64">
|
||
<p className="text-muted-foreground">加载中...</p>
|
||
</div>
|
||
</div>
|
||
</ScrollArea>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex flex-col gap-3 sm:gap-4">
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<h1 className="text-xl sm:text-2xl md:text-3xl font-bold">麦麦主程序配置</h1>
|
||
<p className="text-muted-foreground mt-1 text-xs sm:text-sm">管理麦麦的核心功能和行为设置</p>
|
||
</div>
|
||
{/* 按钮组 - 桌面端靠右 */}
|
||
<div className="flex flex-wrap gap-2 flex-shrink-0 sm:justify-end">
|
||
<Tabs
|
||
value={editMode}
|
||
onValueChange={(v) => handleModeChange(v as 'visual' | 'source')}
|
||
className="w-full min-w-[13rem] sm:w-[14rem]"
|
||
>
|
||
<TabsList className="grid h-8 w-full grid-cols-2 sm:h-9">
|
||
<TabsTrigger value="visual" className="px-2 text-xs">
|
||
<Layout className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
|
||
可视化
|
||
</TabsTrigger>
|
||
<TabsTrigger value="source" className="px-2 text-xs">
|
||
<Code2 className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
|
||
源代码
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
<Button
|
||
onClick={handleReloadFromFile}
|
||
disabled={saving || autoSaving || isRestarting}
|
||
size="sm"
|
||
variant="outline"
|
||
className="w-20 sm:w-24"
|
||
>
|
||
<RefreshCw className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
|
||
刷新
|
||
</Button>
|
||
<Button
|
||
onClick={editMode === 'visual' ? saveConfig : saveSourceCode}
|
||
disabled={saving || autoSaving || !hasUnsavedChanges || isRestarting}
|
||
size="sm"
|
||
variant="outline"
|
||
className="w-20 sm:w-24"
|
||
>
|
||
<Save className="h-4 w-4 flex-shrink-0" strokeWidth={2} fill="none" />
|
||
<span className="ml-1 truncate text-xs sm:text-sm">
|
||
{saving ? '保存中' : autoSaving ? '自动' : hasUnsavedChanges ? '保存' : '已保存'}
|
||
</span>
|
||
</Button>
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button
|
||
disabled={saving || autoSaving || isRestarting}
|
||
size="sm"
|
||
className="w-20 sm:w-28"
|
||
>
|
||
<Power className="h-4 w-4 flex-shrink-0" />
|
||
<span className="ml-1 truncate text-xs sm:text-sm">
|
||
{isRestarting ? '重启中' : hasUnsavedChanges ? '保存重启' : '重启'}
|
||
</span>
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认重启麦麦？</AlertDialogTitle>
|
||
<AlertDialogDescription asChild>
|
||
<div>
|
||
<p>
|
||
{hasUnsavedChanges
|
||
? '当前有未保存的配置更改。点击确认将先保存配置,然后重启麦麦使新配置生效。重启过程中麦麦将暂时离线。'
|
||
: '即将重启麦麦主程序。重启过程中麦麦将暂时离线,配置将在重启后生效。'
|
||
}
|
||
</p>
|
||
</div>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={hasUnsavedChanges ? handleSaveAndRestart : handleRestart}>
|
||
{hasUnsavedChanges ? '保存并重启' : '确认重启'}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 重启提示 */}
|
||
{restartNoticeVisible && (
|
||
<Alert>
|
||
<Info className="h-4 w-4" />
|
||
<AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<span>
|
||
配置更新后需要<strong>重启麦麦</strong>才能生效。你可以点击右上角的"保存并重启"按钮一键完成保存和重启。
|
||
</span>
|
||
<Button type="button" variant="outline" size="sm" onClick={dismissRestartNotice}>
|
||
我知道了
|
||
</Button>
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 源代码模式 */}
|
||
{editMode === 'source' && (
|
||
<div className="space-y-4">
|
||
<Alert>
|
||
<Info className="h-4 w-4" />
|
||
<AlertDescription>
|
||
<strong>源代码模式（高级功能）：</strong>直接编辑 TOML 配置文件。此功能仅适用于熟悉 TOML 语法的高级用户。保存时会在前端验证格式，只有格式完全正确才能保存。
|
||
{hasTomlError && tomlErrorMessage && (
|
||
<div className="text-destructive font-semibold mt-3 p-3 bg-destructive/10 rounded-md">
|
||
<div className="font-bold mb-2">⚠️ TOML 格式错误：</div>
|
||
<pre className="text-sm font-mono whitespace-pre-wrap break-words">
|
||
{tomlErrorMessage}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
<CodeEditor
|
||
value={sourceCode}
|
||
onChange={(value) => {
|
||
setSourceCode(value)
|
||
setHasUnsavedChanges(true)
|
||
// 清除之前的错误状态
|
||
if (hasTomlError) {
|
||
setHasTomlError(false)
|
||
setTomlErrorMessage('')
|
||
}
|
||
}}
|
||
language="toml"
|
||
height="calc(100vh - 280px)"
|
||
minHeight="500px"
|
||
placeholder="TOML 配置内容"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 可视化模式 */}
|
||
{editMode === 'visual' && (
|
||
<DynamicConfigTabs
|
||
configSchema={configSchema}
|
||
tabGroups={tabGroups}
|
||
sectionValues={sectionValues}
|
||
setSectionValue={setSectionValue}
|
||
setHasUnsavedChanges={setHasUnsavedChanges}
|
||
/>
|
||
)}
|
||
|
||
{/* 重启遮罩层 */}
|
||
<RestartOverlay />
|
||
</div>
|
||
</ScrollArea>
|
||
)
|
||
}
|
||
|
||
// ==================== 动态 Tab 渲染组件 ====================
|
||
|
||
function updateNestedValue(
|
||
target: ConfigSectionData | null | undefined,
|
||
pathSegments: string[],
|
||
value: unknown
|
||
): ConfigSectionData {
|
||
const currentTarget = target && typeof target === 'object' && !Array.isArray(target) ? target : {}
|
||
const [currentPath, ...restPath] = pathSegments
|
||
|
||
if (!currentPath) {
|
||
return currentTarget
|
||
}
|
||
|
||
if (restPath.length === 0) {
|
||
return {
|
||
...currentTarget,
|
||
[currentPath]: value,
|
||
}
|
||
}
|
||
|
||
return {
|
||
...currentTarget,
|
||
[currentPath]: updateNestedValue(currentTarget[currentPath] as ConfigSectionData | undefined, restPath, value),
|
||
}
|
||
}
|
||
|
||
interface DynamicConfigTabsProps {
|
||
configSchema: ConfigSchema | null
|
||
tabGroups: TabGroup[]
|
||
sectionValues: Record<string, ConfigSectionData | null>
|
||
setSectionValue: (sectionName: string, value: ConfigSectionData) => void
|
||
setHasUnsavedChanges: (v: boolean) => void
|
||
}
|
||
|
||
function DynamicConfigTabs(props: DynamicConfigTabsProps) {
|
||
const { configSchema, sectionValues, setHasUnsavedChanges, setSectionValue, tabGroups } = props
|
||
const [expanded, setExpanded] = useState(false)
|
||
const [activeTab, setActiveTab] = useState(tabGroups[0]?.id ?? '')
|
||
|
||
useEffect(() => {
|
||
if (!tabGroups.some((tab) => tab.id === activeTab)) {
|
||
setActiveTab(tabGroups[0]?.id ?? '')
|
||
}
|
||
}, [activeTab, tabGroups])
|
||
|
||
if (tabGroups.length === 0 || !configSchema?.nested) {
|
||
return null
|
||
}
|
||
|
||
const visibleTabGroups = expanded
|
||
? tabGroups
|
||
: tabGroups.filter((tab) => DEFAULT_VISIBLE_TAB_IDS.has(tab.id))
|
||
const hasCollapsibleTabs = tabGroups.some((tab) => !DEFAULT_VISIBLE_TAB_IDS.has(tab.id))
|
||
const firstExpandedTabId = visibleTabGroups.find(
|
||
(tab) => !DEFAULT_VISIBLE_TAB_IDS.has(tab.id)
|
||
)?.id
|
||
|
||
const toggleExpanded = () => {
|
||
setExpanded((current) => {
|
||
if (current && !DEFAULT_VISIBLE_TAB_IDS.has(activeTab)) {
|
||
const firstDefaultTab = tabGroups.find((tab) => DEFAULT_VISIBLE_TAB_IDS.has(tab.id))
|
||
setActiveTab(firstDefaultTab?.id ?? tabGroups[0]?.id ?? '')
|
||
}
|
||
return !current
|
||
})
|
||
}
|
||
|
||
const renderTabContent = (tab: TabGroup) => {
|
||
const tabNestedEntries = tab.sections
|
||
.map((sectionName) => [sectionName, configSchema.nested?.[sectionName]] as const)
|
||
.filter((entry): entry is readonly [string, ConfigSchema] => Boolean(entry[1]))
|
||
|
||
if (tabNestedEntries.length === 0) {
|
||
return null
|
||
}
|
||
|
||
const values = Object.fromEntries(
|
||
tabNestedEntries.map(([sectionName]) => [sectionName, sectionValues[sectionName] ?? {}])
|
||
)
|
||
|
||
const tabSchema: ConfigSchema = {
|
||
className: tab.id,
|
||
classDoc: tab.label,
|
||
fields: [],
|
||
nested: Object.fromEntries(tabNestedEntries),
|
||
}
|
||
|
||
return (
|
||
<DynamicConfigForm
|
||
schema={tabSchema}
|
||
values={values}
|
||
onChange={(fieldPath, value) => {
|
||
const [sectionName, ...restPath] = fieldPath.split('.')
|
||
if (!sectionName) {
|
||
return
|
||
}
|
||
|
||
const currentSectionValue = sectionValues[sectionName] ?? {}
|
||
const nextSectionValue =
|
||
restPath.length === 0
|
||
? (value as ConfigSectionData)
|
||
: updateNestedValue(currentSectionValue, restPath, value)
|
||
|
||
setSectionValue(sectionName, nextSectionValue)
|
||
setHasUnsavedChanges(true)
|
||
}}
|
||
hooks={fieldHooks}
|
||
/>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<TabsList className="flex flex-wrap h-auto gap-1 p-1">
|
||
{visibleTabGroups.map((tab) => {
|
||
const isExpandedOnlyTab = !DEFAULT_VISIBLE_TAB_IDS.has(tab.id)
|
||
return (
|
||
<Fragment key={tab.id}>
|
||
{tab.id === firstExpandedTabId && (
|
||
<span className="mx-1 hidden h-6 w-px bg-border/80 sm:block" />
|
||
)}
|
||
<TabsTrigger
|
||
value={tab.id}
|
||
className={cn(
|
||
"text-xs px-2 py-1.5 sm:px-3 sm:py-2 data-[state=active]:shadow-sm",
|
||
isExpandedOnlyTab &&
|
||
"border border-dashed border-border/70 bg-background/45 text-muted-foreground/80 hover:bg-background/70 data-[state=active]:border-primary/45 data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
|
||
)}
|
||
>
|
||
{tab.label}
|
||
</TabsTrigger>
|
||
</Fragment>
|
||
)
|
||
})}
|
||
{hasCollapsibleTabs && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 px-2 text-xs sm:h-9 sm:px-3"
|
||
onClick={toggleExpanded}
|
||
>
|
||
{expanded ? (
|
||
<ChevronUp className="mr-1 h-3.5 w-3.5" />
|
||
) : (
|
||
<ChevronDown className="mr-1 h-3.5 w-3.5" />
|
||
)}
|
||
{expanded ? '收起' : '更多'}
|
||
</Button>
|
||
)}
|
||
</TabsList>
|
||
{tabGroups.map((tab) => (
|
||
<TabsContent key={tab.id} value={tab.id} className="space-y-4">
|
||
{renderTabContent(tab)}
|
||
</TabsContent>
|
||
))}
|
||
</Tabs>
|
||
)
|
||
}
|