1365 lines
51 KiB
TypeScript
1365 lines
51 KiB
TypeScript
import { useState, useRef, useEffect, useCallback } from 'react'
|
||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||
import { Info, Upload, Download, FileText, Trash2, FolderOpen, Save, RefreshCw, Package, ChevronDown } from 'lucide-react'
|
||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Switch } from '@/components/ui/switch'
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger,
|
||
} from '@/components/ui/collapsible'
|
||
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 {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card'
|
||
import {
|
||
getSavedConfigPath,
|
||
saveConfigPath,
|
||
loadConfigFromPath,
|
||
saveConfigToPath,
|
||
} from '@/lib/adapter-config-api'
|
||
import type { AdapterConfig, PresetKey } from './adapter/types'
|
||
import { DEFAULT_CONFIG, PRESETS } from './adapter/types'
|
||
import { parseTOML, generateTOML, validatePath } from './adapter/utils'
|
||
|
||
export function AdapterConfigPage() {
|
||
// 工作模式：'upload' = 上传文件模式, 'path' = 指定路径模式, 'preset' = 预设模式
|
||
const [mode, setMode] = useState<'upload' | 'path' | 'preset'>('upload')
|
||
const [config, setConfig] = useState<AdapterConfig | null>(null)
|
||
const [fileName, setFileName] = useState<string>('')
|
||
const [configPath, setConfigPath] = useState<string>('')
|
||
const [selectedPreset, setSelectedPreset] = useState<PresetKey>('oneclick')
|
||
const [pathError, setPathError] = useState<string>('')
|
||
const [isSaving, setIsSaving] = useState(false)
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [showModeSwitchDialog, setShowModeSwitchDialog] = useState(false)
|
||
const [showClearPathDialog, setShowClearPathDialog] = useState(false)
|
||
const [pendingMode, setPendingMode] = useState<'upload' | 'path' | 'preset' | null>(null)
|
||
const [isModeConfigOpen, setIsModeConfigOpen] = useState(false)
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
const { toast } = useToast()
|
||
const saveTimeoutRef = useRef<number | null>(null)
|
||
|
||
// 处理路径输入变化
|
||
const handlePathChange = (value: string) => {
|
||
setConfigPath(value)
|
||
|
||
// 实时验证
|
||
if (value.trim()) {
|
||
const validation = validatePath(value)
|
||
setPathError(validation.error)
|
||
} else {
|
||
setPathError('')
|
||
}
|
||
}
|
||
|
||
// 从预设加载配置
|
||
const handleLoadFromPreset = useCallback(async (presetKey: PresetKey) => {
|
||
const preset = PRESETS[presetKey]
|
||
setIsLoading(true)
|
||
try {
|
||
const content = await loadConfigFromPath(preset.path)
|
||
const parsedConfig = parseTOML(content)
|
||
setConfig(parsedConfig)
|
||
setSelectedPreset(presetKey)
|
||
setConfigPath(preset.path)
|
||
|
||
// 保存路径偏好
|
||
await saveConfigPath(preset.path)
|
||
|
||
toast({
|
||
title: '加载成功',
|
||
description: `已从${preset.name}预设加载配置`,
|
||
})
|
||
} catch (error) {
|
||
console.error('加载预设配置失败:', error)
|
||
toast({
|
||
title: '加载失败',
|
||
description: error instanceof Error ? error.message : '无法读取预设配置文件',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}, [toast])
|
||
|
||
// 从指定路径加载配置
|
||
const handleLoadFromPath = useCallback(async (path: string) => {
|
||
// 验证路径
|
||
const validation = validatePath(path)
|
||
if (!validation.valid) {
|
||
setPathError(validation.error)
|
||
toast({
|
||
title: '路径无效',
|
||
description: validation.error,
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
setPathError('')
|
||
setIsLoading(true)
|
||
try {
|
||
const content = await loadConfigFromPath(path)
|
||
const parsedConfig = parseTOML(content)
|
||
setConfig(parsedConfig)
|
||
setConfigPath(path)
|
||
|
||
// 保存路径偏好
|
||
await saveConfigPath(path)
|
||
|
||
toast({
|
||
title: '加载成功',
|
||
description: `已从配置文件加载`,
|
||
})
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error)
|
||
toast({
|
||
title: '加载失败',
|
||
description: error instanceof Error ? error.message : '无法读取配置文件',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}, [toast])
|
||
|
||
// 组件挂载时加载保存的路径
|
||
useEffect(() => {
|
||
const loadSavedPath = async () => {
|
||
try {
|
||
const savedPath = await getSavedConfigPath()
|
||
if (savedPath && savedPath.path) {
|
||
setConfigPath(savedPath.path)
|
||
|
||
// 检查是否是预设路径
|
||
const presetEntry = Object.entries(PRESETS).find(([, preset]) => preset.path === savedPath.path)
|
||
if (presetEntry) {
|
||
setMode('preset')
|
||
setSelectedPreset(presetEntry[0] as PresetKey)
|
||
await handleLoadFromPreset(presetEntry[0] as PresetKey)
|
||
} else {
|
||
setMode('path')
|
||
await handleLoadFromPath(savedPath.path)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载保存的路径失败:', error)
|
||
}
|
||
}
|
||
loadSavedPath()
|
||
}, [handleLoadFromPath, handleLoadFromPreset])
|
||
|
||
// 自动保存配置到路径（防抖）
|
||
const autoSaveToPath = useCallback((updatedConfig: AdapterConfig) => {
|
||
if ((mode !== 'path' && mode !== 'preset') || !configPath) return
|
||
|
||
// 清除之前的定时器
|
||
if (saveTimeoutRef.current) {
|
||
clearTimeout(saveTimeoutRef.current)
|
||
}
|
||
|
||
// 设置新的定时器（1秒后保存）
|
||
saveTimeoutRef.current = setTimeout(async () => {
|
||
setIsSaving(true)
|
||
try {
|
||
const tomlContent = generateTOML(updatedConfig)
|
||
await saveConfigToPath(configPath, tomlContent)
|
||
toast({
|
||
title: '自动保存成功',
|
||
description: '配置已保存到文件',
|
||
})
|
||
} catch (error) {
|
||
console.error('自动保存失败:', error)
|
||
toast({
|
||
title: '自动保存失败',
|
||
description: error instanceof Error ? error.message : '保存配置失败',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSaving(false)
|
||
}
|
||
}, 1000)
|
||
}, [mode, configPath, toast])
|
||
|
||
// 手动保存配置
|
||
const handleManualSave = async () => {
|
||
if (!config || !configPath) return
|
||
|
||
// 再次验证路径
|
||
const validation = validatePath(configPath)
|
||
if (!validation.valid) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: validation.error,
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
|
||
setIsSaving(true)
|
||
try {
|
||
const tomlContent = generateTOML(config)
|
||
await saveConfigToPath(configPath, tomlContent)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '配置已保存到文件',
|
||
})
|
||
} catch (error) {
|
||
console.error('保存失败:', error)
|
||
toast({
|
||
title: '保存失败',
|
||
description: error instanceof Error ? error.message : '保存配置失败',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSaving(false)
|
||
}
|
||
}
|
||
|
||
// 刷新配置（重新从文件加载）
|
||
const handleRefresh = async () => {
|
||
if (!configPath) return
|
||
await handleLoadFromPath(configPath)
|
||
}
|
||
|
||
// 切换模式
|
||
const handleModeChange = (newMode: 'upload' | 'path' | 'preset') => {
|
||
if (newMode === mode) return
|
||
|
||
// 如果有未保存的配置，显示确认对话框
|
||
if (config) {
|
||
setPendingMode(newMode)
|
||
setShowModeSwitchDialog(true)
|
||
return
|
||
}
|
||
|
||
// 直接切换模式
|
||
performModeSwitch(newMode)
|
||
}
|
||
|
||
// 执行模式切换
|
||
const performModeSwitch = (newMode: 'upload' | 'path' | 'preset') => {
|
||
setConfig(null)
|
||
setFileName('')
|
||
setPathError('')
|
||
setMode(newMode)
|
||
|
||
// 如果切换到预设模式，自动加载默认预设
|
||
if (newMode === 'preset') {
|
||
handleLoadFromPreset('oneclick')
|
||
}
|
||
|
||
const modeNames = {
|
||
upload: '现在可以上传配置文件',
|
||
path: '现在可以指定配置文件路径',
|
||
preset: '现在可以使用预设配置',
|
||
}
|
||
|
||
toast({
|
||
title: '已切换模式',
|
||
description: modeNames[newMode],
|
||
})
|
||
}
|
||
|
||
// 确认模式切换
|
||
const confirmModeSwitch = () => {
|
||
if (pendingMode) {
|
||
performModeSwitch(pendingMode)
|
||
setPendingMode(null)
|
||
}
|
||
setShowModeSwitchDialog(false)
|
||
}
|
||
|
||
// 清空路径
|
||
const handleClearPath = () => {
|
||
if (config) {
|
||
setShowClearPathDialog(true)
|
||
return
|
||
}
|
||
|
||
// 直接清空
|
||
performClearPath()
|
||
}
|
||
|
||
// 执行清空路径
|
||
const performClearPath = () => {
|
||
setConfigPath('')
|
||
setConfig(null)
|
||
setPathError('')
|
||
toast({
|
||
title: '已清空',
|
||
description: '路径和配置已清空',
|
||
})
|
||
}
|
||
|
||
// 确认清空路径
|
||
const confirmClearPath = () => {
|
||
performClearPath()
|
||
setShowClearPathDialog(false)
|
||
}
|
||
|
||
// 上传文件处理
|
||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0]
|
||
if (!file) return
|
||
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
try {
|
||
const content = e.target?.result as string
|
||
const parsedConfig = parseTOML(content)
|
||
setConfig(parsedConfig)
|
||
setFileName(file.name)
|
||
toast({
|
||
title: '上传成功',
|
||
description: `已加载配置文件：${file.name}`,
|
||
})
|
||
} catch (error) {
|
||
console.error('解析配置文件失败:', error)
|
||
toast({
|
||
title: '解析失败',
|
||
description: '配置文件格式错误，请检查文件内容',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}
|
||
reader.readAsText(file)
|
||
}
|
||
|
||
// 下载配置文件
|
||
const handleDownload = () => {
|
||
if (!config) return
|
||
|
||
const tomlContent = generateTOML(config)
|
||
const blob = new Blob([tomlContent], { type: 'text/plain;charset=utf-8' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = fileName || 'config.toml'
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
|
||
toast({
|
||
title: '下载成功',
|
||
description: '配置文件已下载，请手动覆盖并重启适配器',
|
||
})
|
||
}
|
||
|
||
// 使用默认配置
|
||
const handleUseDefault = () => {
|
||
setConfig(JSON.parse(JSON.stringify(DEFAULT_CONFIG)))
|
||
setFileName('config.toml')
|
||
toast({
|
||
title: '已加载默认配置',
|
||
description: '可以开始编辑配置',
|
||
})
|
||
}
|
||
|
||
return (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold">麦麦适配器配置</h1>
|
||
<p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base">
|
||
管理麦麦的 QQ 适配器的配置文件
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 模式选择 */}
|
||
<Collapsible open={isModeConfigOpen} onOpenChange={setIsModeConfigOpen}>
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle>工作模式</CardTitle>
|
||
<CardDescription>选择配置文件的管理方式</CardDescription>
|
||
</div>
|
||
<CollapsibleTrigger asChild>
|
||
<Button variant="ghost" size="sm" className="w-9 p-0">
|
||
<ChevronDown className={`h-4 w-4 transition-transform duration-200 ${
|
||
isModeConfigOpen ? 'transform rotate-180' : ''
|
||
}`} />
|
||
<span className="sr-only">切换</span>
|
||
</Button>
|
||
</CollapsibleTrigger>
|
||
</div>
|
||
</CardHeader>
|
||
<CollapsibleContent>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4" role="radiogroup" aria-label="部署模式选择">
|
||
{/* 预设模式 */}
|
||
<div
|
||
className={`border-2 rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
|
||
mode === 'preset'
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-muted hover:border-primary/50 active:border-primary/70'
|
||
}`}
|
||
role="radio"
|
||
aria-checked={mode === 'preset'}
|
||
tabIndex={0}
|
||
onClick={() => handleModeChange('preset')}
|
||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('preset') } }}
|
||
>
|
||
<div className="flex items-start gap-2 md:gap-3">
|
||
<Package className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
|
||
<div className="min-w-0">
|
||
<h3 className="font-semibold text-sm md:text-base">预设模式</h3>
|
||
<p className="text-xs md:text-sm text-muted-foreground mt-1 line-clamp-2">
|
||
使用预设的部署配置
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 上传模式 */}
|
||
<div
|
||
className={`border-2 rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
|
||
mode === 'upload'
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-muted hover:border-primary/50 active:border-primary/70'
|
||
}`}
|
||
role="radio"
|
||
aria-checked={mode === 'upload'}
|
||
tabIndex={0}
|
||
onClick={() => handleModeChange('upload')}
|
||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('upload') } }}
|
||
>
|
||
<div className="flex items-start gap-2 md:gap-3">
|
||
<Upload className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
|
||
<div className="min-w-0">
|
||
<h3 className="font-semibold text-sm md:text-base">上传文件模式</h3>
|
||
<p className="text-xs md:text-sm text-muted-foreground mt-1 line-clamp-2">
|
||
上传配置文件，编辑后下载并手动覆盖
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 路径模式 */}
|
||
<div
|
||
className={`border-2 rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
|
||
mode === 'path'
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-muted hover:border-primary/50 active:border-primary/70'
|
||
}`}
|
||
role="radio"
|
||
aria-checked={mode === 'path'}
|
||
tabIndex={0}
|
||
onClick={() => handleModeChange('path')}
|
||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleModeChange('path') } }}
|
||
>
|
||
<div className="flex items-start gap-2 md:gap-3">
|
||
<FolderOpen className="h-4 w-4 md:h-5 md:w-5 mt-0.5 flex-shrink-0" />
|
||
<div className="min-w-0">
|
||
<h3 className="font-semibold text-sm md:text-base">指定路径模式</h3>
|
||
<p className="text-xs md:text-sm text-muted-foreground mt-1 line-clamp-2">
|
||
指定配置文件路径，自动加载和保存
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 预设模式配置 */}
|
||
{mode === 'preset' && (
|
||
<div className="space-y-3 pt-2 border-t">
|
||
<Label className="text-sm md:text-base">选择部署方式</Label>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
{Object.entries(PRESETS).map(([key, preset]) => {
|
||
const Icon = preset.icon
|
||
const isSelected = selectedPreset === key
|
||
return (
|
||
<div
|
||
key={key}
|
||
className={`border-2 rounded-lg p-3 cursor-pointer transition-all ${
|
||
isSelected
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-muted hover:border-primary/50'
|
||
}`}
|
||
role="radio"
|
||
aria-checked={isSelected}
|
||
tabIndex={0}
|
||
onClick={() => {
|
||
setSelectedPreset(key as PresetKey)
|
||
handleLoadFromPreset(key as PresetKey)
|
||
}}
|
||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedPreset(key as PresetKey); handleLoadFromPreset(key as PresetKey) } }}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<Icon className="h-5 w-5 mt-0.5 flex-shrink-0" />
|
||
<div className="min-w-0 flex-1">
|
||
<h4 className="font-semibold text-sm">{preset.name}</h4>
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
{preset.description}
|
||
</p>
|
||
<p className="text-xs text-muted-foreground mt-1 font-mono break-all">
|
||
{preset.path}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 路径模式配置 */}
|
||
{mode === 'path' && (
|
||
<div className="space-y-3 pt-2 border-t">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="config-path" className="text-sm md:text-base">配置文件路径</Label>
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
<div className="flex-1 space-y-1">
|
||
<Input
|
||
id="config-path"
|
||
value={configPath}
|
||
onChange={(e) => handlePathChange(e.target.value)}
|
||
placeholder="例: C:\Adapter\config.toml"
|
||
className={`text-sm ${pathError ? 'border-destructive' : ''}`}
|
||
/>
|
||
{pathError && (
|
||
<p className="text-xs text-destructive">{pathError}</p>
|
||
)}
|
||
</div>
|
||
<Button
|
||
onClick={() => handleLoadFromPath(configPath)}
|
||
disabled={isLoading || !configPath || !!pathError}
|
||
className="w-full sm:w-auto"
|
||
>
|
||
{isLoading ? (
|
||
<>
|
||
<RefreshCw className="h-4 w-4 animate-spin mr-2" />
|
||
<span className="sm:hidden">加载中...</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="sm:hidden">加载配置</span>
|
||
<span className="hidden sm:inline">加载</span>
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<details className="rounded-lg bg-muted/50 p-3 group">
|
||
<summary className="text-xs font-medium cursor-pointer select-none list-none flex items-center justify-between">
|
||
<span>路径格式说明</span>
|
||
<svg className="h-4 w-4 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</summary>
|
||
<div className="mt-2 space-y-2 text-xs text-muted-foreground">
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-mono bg-background px-1.5 py-0.5 rounded text-[10px] md:text-xs whitespace-nowrap">Windows</span>
|
||
</div>
|
||
<div className="pl-2 space-y-0.5 text-[10px] md:text-xs break-all">
|
||
<div>C:\Adapter\config.toml</div>
|
||
<div className="hidden sm:block">D:\MaiBot\adapter\config.toml</div>
|
||
<div className="hidden sm:block">\\server\share\config.toml</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-mono bg-background px-1.5 py-0.5 rounded text-[10px] md:text-xs whitespace-nowrap">Linux</span>
|
||
</div>
|
||
<div className="pl-2 space-y-0.5 text-[10px] md:text-xs break-all">
|
||
<div>/opt/adapter/config.toml</div>
|
||
<div className="hidden sm:block">/home/user/adapter/config.toml</div>
|
||
<div className="hidden sm:block">~/adapter/config.toml</div>
|
||
</div>
|
||
</div>
|
||
<p className="pt-1 border-t text-[10px] md:text-xs">
|
||
💡 配置会自动保存到指定文件，修改后 1 秒自动保存
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 操作提示 */}
|
||
<Alert>
|
||
<Info className="h-4 w-4" />
|
||
<AlertDescription>
|
||
{mode === 'preset' ? (
|
||
<>
|
||
<strong>预设模式：</strong>选择预设的部署方式，配置会自动加载，修改后 1 秒自动保存{isSaving && ' (正在保存...)'}
|
||
</>
|
||
) : mode === 'upload' ? (
|
||
<>
|
||
<strong>上传文件模式：</strong>上传配置文件 → 在线编辑 → 下载文件 → 手动覆盖并重启适配器
|
||
</>
|
||
) : (
|
||
<>
|
||
<strong>指定路径模式：</strong>指定配置文件路径后，配置会自动加载，修改后 1 秒自动保存{isSaving && ' (正在保存...)'}
|
||
</>
|
||
)}
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
{/* 上传模式的操作按钮 */}
|
||
{mode === 'upload' && !config && (
|
||
<div className="flex flex-col sm:flex-row gap-2 w-full">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept=".toml"
|
||
className="hidden"
|
||
onChange={handleFileUpload}
|
||
/>
|
||
<Button
|
||
onClick={() => fileInputRef.current?.click()}
|
||
size="sm"
|
||
variant="outline"
|
||
className="w-full sm:w-auto"
|
||
>
|
||
<Upload className="mr-2 h-4 w-4" />
|
||
上传配置
|
||
</Button>
|
||
<Button onClick={handleUseDefault} size="sm" className="w-full sm:w-auto">
|
||
<FileText className="mr-2 h-4 w-4" />
|
||
使用默认配置
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 上传模式的下载按钮 */}
|
||
{mode === 'upload' && config && (
|
||
<div className="flex gap-2">
|
||
<Button onClick={handleDownload} size="sm" className="w-full sm:w-auto">
|
||
<Download className="mr-2 h-4 w-4" />
|
||
下载配置
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 预设和路径模式的操作按钮 */}
|
||
{(mode === 'preset' || mode === 'path') && config && (
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
<Button onClick={handleManualSave} size="sm" disabled={isSaving || !!pathError} className="w-full sm:w-auto">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
{isSaving ? '保存中...' : '立即保存'}
|
||
</Button>
|
||
<Button onClick={handleRefresh} size="sm" variant="outline" disabled={isLoading} className="w-full sm:w-auto">
|
||
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||
刷新
|
||
</Button>
|
||
{mode === 'path' && (
|
||
<Button onClick={handleClearPath} size="sm" variant="destructive" className="w-full sm:w-auto">
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
清空路径
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 配置编辑区域 */}
|
||
{!config ? (
|
||
<div className="rounded-lg border bg-card p-6 md:p-12">
|
||
<div className="text-center space-y-3 md:space-y-4">
|
||
<FileText className="h-12 w-12 md:h-16 md:w-16 mx-auto text-muted-foreground" />
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold">尚未加载配置</h3>
|
||
<p className="text-xs md:text-sm text-muted-foreground mt-2 px-4">
|
||
{mode === 'preset'
|
||
? '请选择预设的部署方式'
|
||
: mode === 'upload'
|
||
? '请上传现有配置文件，或使用默认配置开始编辑'
|
||
: '请指定配置文件路径并点击加载按钮'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<Tabs defaultValue="napcat" className="w-full">
|
||
<div className="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
|
||
<TabsList className="inline-flex w-auto min-w-full sm:grid sm:w-full sm:grid-cols-5">
|
||
<TabsTrigger value="napcat" className="flex-shrink-0 text-xs sm:text-sm whitespace-nowrap">
|
||
<span className="hidden sm:inline">Napcat 连接</span>
|
||
<span className="sm:hidden">Napcat</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="maibot" className="flex-shrink-0 text-xs sm:text-sm whitespace-nowrap">
|
||
<span className="hidden sm:inline">麦麦连接</span>
|
||
<span className="sm:hidden">麦麦</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="chat" className="flex-shrink-0 text-xs sm:text-sm whitespace-nowrap">
|
||
<span className="hidden sm:inline">聊天控制</span>
|
||
<span className="sm:hidden">聊天</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="voice" className="flex-shrink-0 text-xs sm:text-sm whitespace-nowrap">
|
||
<span className="hidden sm:inline">语音与转发</span>
|
||
<span className="sm:hidden">语音</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="debug" className="flex-shrink-0 text-xs sm:text-sm whitespace-nowrap">调试</TabsTrigger>
|
||
</TabsList>
|
||
</div>
|
||
|
||
{/* Napcat 服务器配置 */}
|
||
<TabsContent value="napcat" className="space-y-4">
|
||
<NapcatServerSection
|
||
config={config}
|
||
onChange={(newConfig) => {
|
||
setConfig(newConfig)
|
||
autoSaveToPath(newConfig)
|
||
}}
|
||
/>
|
||
</TabsContent>
|
||
|
||
{/* 麦麦服务器配置 */}
|
||
<TabsContent value="maibot" className="space-y-4">
|
||
<MaiBotServerSection
|
||
config={config}
|
||
onChange={(newConfig) => {
|
||
setConfig(newConfig)
|
||
autoSaveToPath(newConfig)
|
||
}}
|
||
/>
|
||
</TabsContent>
|
||
|
||
{/* 聊天控制配置 */}
|
||
<TabsContent value="chat" className="space-y-4">
|
||
<ChatControlSection
|
||
config={config}
|
||
onChange={(newConfig) => {
|
||
setConfig(newConfig)
|
||
autoSaveToPath(newConfig)
|
||
}}
|
||
/>
|
||
</TabsContent>
|
||
|
||
{/* 语音配置 */}
|
||
<TabsContent value="voice" className="space-y-4">
|
||
<VoiceSection
|
||
config={config}
|
||
onChange={(newConfig) => {
|
||
setConfig(newConfig)
|
||
autoSaveToPath(newConfig)
|
||
}}
|
||
/>
|
||
</TabsContent>
|
||
|
||
{/* 调试配置 */}
|
||
<TabsContent value="debug" className="space-y-4">
|
||
<DebugSection
|
||
config={config}
|
||
onChange={(newConfig) => {
|
||
setConfig(newConfig)
|
||
autoSaveToPath(newConfig)
|
||
}}
|
||
/>
|
||
</TabsContent>
|
||
</Tabs>
|
||
)}
|
||
|
||
{/* 模式切换确认对话框 */}
|
||
<AlertDialog open={showModeSwitchDialog} onOpenChange={setShowModeSwitchDialog}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认切换模式</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
切换模式将清空当前配置，确定要继续吗？
|
||
<br />
|
||
<span className="text-destructive font-medium">请确保已保存重要配置</span>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={() => {
|
||
setShowModeSwitchDialog(false)
|
||
setPendingMode(null)
|
||
}}>
|
||
取消
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction onClick={confirmModeSwitch}>
|
||
确认切换
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 清空路径确认对话框 */}
|
||
<AlertDialog open={showClearPathDialog} onOpenChange={setShowClearPathDialog}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认清空路径</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
清空路径将清除当前配置，确定要继续吗？
|
||
<br />
|
||
<span className="text-muted-foreground text-sm">此操作不会删除配置文件，只是清除界面中的配置</span>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={() => setShowClearPathDialog(false)}>
|
||
取消
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction onClick={confirmClearPath} className="bg-destructive hover:bg-destructive/90">
|
||
确认清空
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
</ScrollArea>
|
||
)
|
||
}
|
||
|
||
// Napcat 服务器配置组件
|
||
function NapcatServerSection({
|
||
config,
|
||
onChange,
|
||
}: {
|
||
config: AdapterConfig
|
||
onChange: (config: AdapterConfig) => void
|
||
}) {
|
||
return (
|
||
<div className="rounded-lg border bg-card p-4 md:p-6 space-y-4 md:space-y-6">
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">Napcat WebSocket 服务设置</h3>
|
||
<div className="grid gap-3 md:gap-4">
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="napcat-host" className="text-sm md:text-base">主机地址</Label>
|
||
<Input
|
||
id="napcat-host"
|
||
value={config.napcat_server.host}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
napcat_server: { ...config.napcat_server, host: e.target.value },
|
||
})
|
||
}
|
||
placeholder="localhost"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">Napcat 设定的主机地址</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="napcat-port" className="text-sm md:text-base">端口</Label>
|
||
<Input
|
||
id="napcat-port"
|
||
type="number"
|
||
value={config.napcat_server.port || ''}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
napcat_server: { ...config.napcat_server, port: e.target.value ? parseInt(e.target.value) : 0 },
|
||
})
|
||
}
|
||
placeholder="8095"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">Napcat 设定的端口（留空使用默认值 8095）</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="napcat-token" className="text-sm md:text-base">访问令牌（Token）</Label>
|
||
<Input
|
||
id="napcat-token"
|
||
type="password"
|
||
value={config.napcat_server.token}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
napcat_server: { ...config.napcat_server, token: e.target.value },
|
||
})
|
||
}
|
||
placeholder="留空表示无需令牌"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">Napcat 设定的访问令牌，若无则留空</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="napcat-heartbeat" className="text-sm md:text-base">心跳间隔（秒）</Label>
|
||
<Input
|
||
id="napcat-heartbeat"
|
||
type="number"
|
||
value={config.napcat_server.heartbeat_interval || ''}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
napcat_server: {
|
||
...config.napcat_server,
|
||
heartbeat_interval: e.target.value ? parseInt(e.target.value) : 0,
|
||
},
|
||
})
|
||
}
|
||
placeholder="30"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">与 Napcat 设置的心跳间隔保持一致（留空使用默认值 30）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 麦麦服务器配置组件
|
||
function MaiBotServerSection({
|
||
config,
|
||
onChange,
|
||
}: {
|
||
config: AdapterConfig
|
||
onChange: (config: AdapterConfig) => void
|
||
}) {
|
||
return (
|
||
<div className="rounded-lg border bg-card p-4 md:p-6 space-y-4 md:space-y-6">
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">麦麦 WebSocket 服务设置</h3>
|
||
<div className="grid gap-3 md:gap-4">
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="maibot-host" className="text-sm md:text-base">主机地址</Label>
|
||
<Input
|
||
id="maibot-host"
|
||
value={config.maibot_server.host}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
maibot_server: { ...config.maibot_server, host: e.target.value },
|
||
})
|
||
}
|
||
placeholder="localhost"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">麦麦在 .env 文件中设置的 HOST 字段</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="maibot-port" className="text-sm md:text-base">端口</Label>
|
||
<Input
|
||
id="maibot-port"
|
||
type="number"
|
||
value={config.maibot_server.port || ''}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
maibot_server: { ...config.maibot_server, port: e.target.value ? parseInt(e.target.value) : 0 },
|
||
})
|
||
}
|
||
placeholder="8000"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">麦麦在 .env 文件中设置的 PORT 字段（留空使用默认值 8000）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 聊天控制配置组件
|
||
function ChatControlSection({
|
||
config,
|
||
onChange,
|
||
}: {
|
||
config: AdapterConfig
|
||
onChange: (config: AdapterConfig) => void
|
||
}) {
|
||
const addToList = (listType: 'group' | 'private' | 'ban') => {
|
||
const newConfig = { ...config }
|
||
if (listType === 'group') {
|
||
newConfig.chat.group_list = [...newConfig.chat.group_list, 0]
|
||
} else if (listType === 'private') {
|
||
newConfig.chat.private_list = [...newConfig.chat.private_list, 0]
|
||
} else {
|
||
newConfig.chat.ban_user_id = [...newConfig.chat.ban_user_id, 0]
|
||
}
|
||
onChange(newConfig)
|
||
}
|
||
|
||
const removeFromList = (listType: 'group' | 'private' | 'ban', index: number) => {
|
||
const newConfig = { ...config }
|
||
if (listType === 'group') {
|
||
newConfig.chat.group_list = newConfig.chat.group_list.filter((_, i) => i !== index)
|
||
} else if (listType === 'private') {
|
||
newConfig.chat.private_list = newConfig.chat.private_list.filter((_, i) => i !== index)
|
||
} else {
|
||
newConfig.chat.ban_user_id = newConfig.chat.ban_user_id.filter((_, i) => i !== index)
|
||
}
|
||
onChange(newConfig)
|
||
}
|
||
|
||
const updateListItem = (listType: 'group' | 'private' | 'ban', index: number, value: number) => {
|
||
const newConfig = { ...config }
|
||
if (listType === 'group') {
|
||
newConfig.chat.group_list[index] = value
|
||
} else if (listType === 'private') {
|
||
newConfig.chat.private_list[index] = value
|
||
} else {
|
||
newConfig.chat.ban_user_id[index] = value
|
||
}
|
||
onChange(newConfig)
|
||
}
|
||
|
||
return (
|
||
<div className="rounded-lg border bg-card p-4 md:p-6 space-y-4 md:space-y-6">
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">聊天黑白名单功能</h3>
|
||
<div className="grid gap-4 md:gap-6">
|
||
{/* 群组名单 */}
|
||
<div className="space-y-3 md:space-y-4">
|
||
<div className="grid gap-2">
|
||
<Label className="text-sm md:text-base">群组名单类型</Label>
|
||
<Select
|
||
value={config.chat.group_list_type}
|
||
onValueChange={(value: 'whitelist' | 'blacklist') =>
|
||
onChange({
|
||
...config,
|
||
chat: { ...config.chat, group_list_type: value },
|
||
})
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="whitelist">白名单（仅名单内可聊天）</SelectItem>
|
||
<SelectItem value="blacklist">黑名单（名单内禁止聊天）</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
|
||
<Label className="text-sm md:text-base">群组列表</Label>
|
||
<Button onClick={() => addToList('group')} size="sm" variant="outline" className="w-full sm:w-auto">
|
||
<FileText className="mr-1 h-4 w-4" />
|
||
添加群号
|
||
</Button>
|
||
</div>
|
||
{config.chat.group_list.map((groupId, index) => (
|
||
<div key={index} className="flex gap-2">
|
||
<Input
|
||
type="number"
|
||
value={groupId}
|
||
onChange={(e) => updateListItem('group', index, parseInt(e.target.value) || 0)}
|
||
placeholder="输入群号"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button size="icon" variant="outline">
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除群号 {groupId} 吗？此操作无法撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={() => removeFromList('group', index)}>
|
||
删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
))}
|
||
{config.chat.group_list.length === 0 && (
|
||
<p className="text-sm text-muted-foreground">暂无群组</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 私聊名单 */}
|
||
<div className="space-y-3 md:space-y-4">
|
||
<div className="grid gap-2">
|
||
<Label className="text-sm md:text-base">私聊名单类型</Label>
|
||
<Select
|
||
value={config.chat.private_list_type}
|
||
onValueChange={(value: 'whitelist' | 'blacklist') =>
|
||
onChange({
|
||
...config,
|
||
chat: { ...config.chat, private_list_type: value },
|
||
})
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="whitelist">白名单（仅名单内可聊天）</SelectItem>
|
||
<SelectItem value="blacklist">黑名单（名单内禁止聊天）</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
|
||
<Label className="text-sm md:text-base">私聊列表</Label>
|
||
<Button onClick={() => addToList('private')} size="sm" variant="outline" className="w-full sm:w-auto">
|
||
<FileText className="mr-1 h-4 w-4" />
|
||
添加用户
|
||
</Button>
|
||
</div>
|
||
{config.chat.private_list.map((userId, index) => (
|
||
<div key={index} className="flex gap-2">
|
||
<Input
|
||
type="number"
|
||
value={userId}
|
||
onChange={(e) => updateListItem('private', index, parseInt(e.target.value) || 0)}
|
||
placeholder="输入QQ号"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button size="icon" variant="outline">
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除用户 {userId} 吗？此操作无法撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={() => removeFromList('private', index)}>
|
||
删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
))}
|
||
{config.chat.private_list.length === 0 && (
|
||
<p className="text-sm text-muted-foreground">暂无用户</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 全局禁止名单 */}
|
||
<div className="space-y-2">
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
|
||
<div>
|
||
<Label className="text-sm md:text-base">全局禁止名单</Label>
|
||
<p className="text-xs text-muted-foreground mt-1">名单中的用户无法进行任何聊天</p>
|
||
</div>
|
||
<Button onClick={() => addToList('ban')} size="sm" variant="outline" className="w-full sm:w-auto">
|
||
<FileText className="mr-1 h-4 w-4" />
|
||
添加用户
|
||
</Button>
|
||
</div>
|
||
{config.chat.ban_user_id.map((userId, index) => (
|
||
<div key={index} className="flex gap-2">
|
||
<Input
|
||
type="number"
|
||
value={userId}
|
||
onChange={(e) => updateListItem('ban', index, parseInt(e.target.value) || 0)}
|
||
placeholder="输入QQ号"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button size="icon" variant="outline">
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要从全局禁止名单中删除用户 {userId} 吗？此操作无法撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={() => removeFromList('ban', index)}>
|
||
删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
))}
|
||
{config.chat.ban_user_id.length === 0 && (
|
||
<p className="text-sm text-muted-foreground">暂无禁止用户</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 其他设置 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label className="text-sm md:text-base">屏蔽QQ官方机器人</Label>
|
||
<p className="text-xs text-muted-foreground mt-1">是否屏蔽来自QQ官方机器人的消息</p>
|
||
</div>
|
||
<Switch
|
||
checked={config.chat.ban_qq_bot}
|
||
onCheckedChange={(checked) =>
|
||
onChange({
|
||
...config,
|
||
chat: { ...config.chat, ban_qq_bot: checked },
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label className="text-sm md:text-base">启用戳一戳功能</Label>
|
||
<p className="text-xs text-muted-foreground mt-1">是否响应戳一戳消息</p>
|
||
</div>
|
||
<Switch
|
||
checked={config.chat.enable_poke}
|
||
onCheckedChange={(checked) =>
|
||
onChange({
|
||
...config,
|
||
chat: { ...config.chat, enable_poke: checked },
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 语音和转发消息配置组件
|
||
function VoiceSection({
|
||
config,
|
||
onChange,
|
||
}: {
|
||
config: AdapterConfig
|
||
onChange: (config: AdapterConfig) => void
|
||
}) {
|
||
return (
|
||
<div className="rounded-lg border bg-card p-4 md:p-6 space-y-4 md:space-y-6">
|
||
{/* 语音设置 */}
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">发送语音设置</h3>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label className="text-sm md:text-base">使用 TTS 语音</Label>
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
请确保已配置 TTS 并有对应的适配器
|
||
</p>
|
||
</div>
|
||
<Switch
|
||
checked={config.voice.use_tts}
|
||
onCheckedChange={(checked) =>
|
||
onChange({
|
||
...config,
|
||
voice: { ...config.voice, use_tts: checked },
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 转发消息处理设置 */}
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">转发消息处理设置</h3>
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="image-threshold" className="text-sm md:text-base">图片数量阈值</Label>
|
||
<Input
|
||
id="image-threshold"
|
||
type="number"
|
||
value={config.forward.image_threshold || ''}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...config,
|
||
forward: {
|
||
...config.forward,
|
||
image_threshold: e.target.value ? parseInt(e.target.value) : 0
|
||
},
|
||
})
|
||
}
|
||
placeholder="30"
|
||
className="text-sm md:text-base"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
转发消息中图片数量超过此值时使用占位符（避免麦麦VLM处理卡死）
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 调试配置组件
|
||
function DebugSection({
|
||
config,
|
||
onChange,
|
||
}: {
|
||
config: AdapterConfig
|
||
onChange: (config: AdapterConfig) => void
|
||
}) {
|
||
return (
|
||
<div className="rounded-lg border bg-card p-4 md:p-6 space-y-4 md:space-y-6">
|
||
<div>
|
||
<h3 className="text-base md:text-lg font-semibold mb-3 md:mb-4">调试设置</h3>
|
||
<div className="grid gap-3 md:gap-4">
|
||
<div className="grid gap-2">
|
||
<Label className="text-sm md:text-base">日志等级</Label>
|
||
<Select
|
||
value={config.debug.level}
|
||
onValueChange={(value) =>
|
||
onChange({
|
||
...config,
|
||
debug: { level: value },
|
||
})
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="DEBUG">DEBUG（调试）</SelectItem>
|
||
<SelectItem value="INFO">INFO（信息）</SelectItem>
|
||
<SelectItem value="WARNING">WARNING（警告）</SelectItem>
|
||
<SelectItem value="ERROR">ERROR（错误）</SelectItem>
|
||
<SelectItem value="CRITICAL">CRITICAL（严重）</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<p className="text-xs text-muted-foreground">设置适配器的日志输出等级</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|