feat(s2a): Refactor S2A configuration UI with profile management and edit mode

- Restructure component to support list and edit view modes for better UX
- Replace single global config state with profile-based management system
- Add ability to create, edit, and delete S2A configuration profiles
- Implement profile activation to set active configuration
- Refactor form state management with dedicated form variables (formName, formApiBase, etc.)
- Add profile name field to distinguish between multiple configurations
- Improve icon usage by removing unused Bookmark and Download icons
- Consolidate message handling with auto-dismiss after 4 seconds
- Add resetForm utility function to clear form state between operations
- Separate fetchActiveConfig from fetchProfiles for cleaner data flow
- Enhance error handling with graceful fallbacks for API failures
- Improve code organization by grouping related state and functions

frontend/src/pages/S2AConfig.tsx

@@ -1,112 +1,146 @@
 import { useState, useEffect, useCallback } from 'react'
-import { TestTube, CheckCircle, XCircle, Loader2, Save, Server, Plus, X, Globe, ToggleLeft, ToggleRight, Bookmark, Trash2, Download } from 'lucide-react'
+import { TestTube, CheckCircle, XCircle, Loader2, Save, Server, Plus, X, Globe, ToggleLeft, ToggleRight, Trash2, ChevronLeft, Zap, Edit2 } from 'lucide-react'
 import { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
 import { useConfig } from '../hooks/useConfig'
 import type { S2AProfile } from '../types'
 
-export default function S2AConfig() {
+type ViewMode = 'list' | 'edit'
-    const {
-        testConnection,
-        isConnected,
-        refreshConfig,
-    } = useConfig()
 
-    const [testing, setTesting] = useState(false)
+export default function S2AConfig() {
-    const [testResult, setTestResult] = useState<boolean | null>(null)
+    const { testConnection, isConnected, refreshConfig } = useConfig()
-    const [saving, setSaving] = useState(false)
+
+    const [viewMode, setViewMode] = useState<ViewMode>('list')
+    const [profiles, setProfiles] = useState<S2AProfile[]>([])
     const [loading, setLoading] = useState(true)
     const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
+    const [editingId, setEditingId] = useState<number | null>(null) // null = 新建
 
-    // S2A 连接配置
+    // 表单状态
-    const [s2aApiBase, setS2aApiBase] = useState('')
+    const [formName, setFormName] = useState('')
-    const [s2aAdminKey, setS2aAdminKey] = useState('')
+    const [formApiBase, setFormApiBase] = useState('')
-
+    const [formAdminKey, setFormAdminKey] = useState('')
-    // 入库设置
+    const [formConcurrency, setFormConcurrency] = useState(2)
-    const [concurrency, setConcurrency] = useState(2)
+    const [formPriority, setFormPriority] = useState(0)
-    const [priority, setPriority] = useState(0)
+    const [formGroupIds, setFormGroupIds] = useState<number[]>([])
-    const [groupIds, setGroupIds] = useState<number[]>([])
     const [newGroupId, setNewGroupId] = useState('')
+    const [formProxyEnabled, setFormProxyEnabled] = useState(false)
+    const [formProxyAddress, setFormProxyAddress] = useState('')
 
-    // 代理设置
+    const [saving, setSaving] = useState(false)
-    const [proxyEnabled, setProxyEnabled] = useState(false)
+    const [testing, setTesting] = useState(false)
-    const [proxyAddress, setProxyAddress] = useState('')
+    const [testResult, setTestResult] = useState<boolean | null>(null)
+    const [activating, setActivating] = useState<number | null>(null)
 
-    // 预设管理
+    // 当前活动配置（从 /api/config 读取）
-    const [profiles, setProfiles] = useState<S2AProfile[]>([])
+    const [activeApiBase, setActiveApiBase] = useState('')
-    const [profileName, setProfileName] = useState('')
-    const [showSavePreset, setShowSavePreset] = useState(false)
-    const [savingPreset, setSavingPreset] = useState(false)
 
-    // 加载预设列表
     const fetchProfiles = useCallback(async () => {
         try {
             const res = await fetch('/api/s2a/profiles')
             const data = await res.json()
-            if (data.code === 0 && data.data) {
+            if (data.code === 0) {
-                setProfiles(data.data)
+                setProfiles(data.data || [])
-            }
-        } catch (error) {
-            console.error('Failed to fetch profiles:', error)
             }
+        } catch { /* ignore */ }
     }, [])
 
-    // 从服务器加载配置
+    const fetchActiveConfig = useCallback(async () => {
-    const fetchConfig = async () => {
-        setLoading(true)
         try {
             const res = await fetch('/api/config')
             const data = await res.json()
             if (data.code === 0 && data.data) {
-                setS2aApiBase(data.data.s2a_api_base || '')
+                setActiveApiBase(data.data.s2a_api_base || '')
-                setS2aAdminKey(data.data.s2a_admin_key || '')
-                setConcurrency(data.data.concurrency || 2)
-                setPriority(data.data.priority || 0)
-                setGroupIds(data.data.group_ids || [])
-                setProxyEnabled(data.data.proxy_enabled || false)
-                setProxyAddress(data.data.default_proxy || '')
-            }
-        } catch (error) {
-            console.error('Failed to fetch config:', error)
-        } finally {
-            setLoading(false)
-        }
             }
+        } catch { /* ignore */ }
+    }, [])
 
     useEffect(() => {
-        fetchConfig()
+        Promise.all([fetchProfiles(), fetchActiveConfig()]).finally(() => setLoading(false))
-        fetchProfiles()
+    }, [fetchProfiles, fetchActiveConfig])
-    }, [fetchProfiles])
 
-    const handleTestConnection = async () => {
+    // 清除消息定时器
-        setTesting(true)
+    useEffect(() => {
+        if (!message) return
+        const t = setTimeout(() => setMessage(null), 4000)
+        return () => clearTimeout(t)
+    }, [message])
+
+    // 重置表单
+    const resetForm = () => {
+        setFormName('')
+        setFormApiBase('')
+        setFormAdminKey('')
+        setFormConcurrency(2)
+        setFormPriority(0)
+        setFormGroupIds([])
+        setNewGroupId('')
+        setFormProxyEnabled(false)
+        setFormProxyAddress('')
         setTestResult(null)
-        await handleSave()
-        const result = await testConnection()
-        setTestResult(result)
-        setTesting(false)
     }
 
-    const handleSave = async () => {
+    // 进入新建模式
-        setSaving(true)
+    const handleAddNew = () => {
-        setMessage(null)
+        resetForm()
+        setEditingId(null)
+        setViewMode('edit')
+    }
+
+    // 进入编辑模式
+    const handleEdit = (profile: S2AProfile) => {
+        setEditingId(profile.id)
+        setFormName(profile.name)
+        setFormApiBase(profile.api_base)
+        setFormAdminKey(profile.admin_key)
+        setFormConcurrency(profile.concurrency)
+        setFormPriority(profile.priority)
         try {
-            const res = await fetch('/api/config', {
+            const ids = JSON.parse(profile.group_ids || '[]')
-                method: 'PUT',
+            setFormGroupIds(Array.isArray(ids) ? ids : [])
+        } catch { setFormGroupIds([]) }
+        setFormProxyEnabled(profile.proxy_enabled)
+        setFormProxyAddress(profile.proxy_address || '')
+        setTestResult(null)
+        setViewMode('edit')
+    }
+
+    // 返回列表
+    const handleBack = () => {
+        setViewMode('list')
+        setMessage(null)
+    }
+
+    // 保存配置（新建或更新）
+    const handleSaveProfile = async () => {
+        if (!formName.trim()) {
+            setMessage({ type: 'error', text: '请输入配置名称' })
+            return
+        }
+        setSaving(true)
+        try {
+            // 如果是编辑，先删除旧的再新建（简单实现）
+            if (editingId !== null) {
+                await fetch(`/api/s2a/profiles?id=${editingId}`, { method: 'DELETE' })
+            }
+            const res = await fetch('/api/s2a/profiles', {
+                method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    s2a_api_base: s2aApiBase,
+                    name: formName.trim(),
-                    s2a_admin_key: s2aAdminKey,
+                    api_base: formApiBase,
-                    concurrency,
+                    admin_key: formAdminKey,
-                    priority,
+                    concurrency: formConcurrency,
-                    group_ids: groupIds,
+                    priority: formPriority,
-                    proxy_enabled: proxyEnabled,
+                    group_ids: JSON.stringify(formGroupIds),
-                    default_proxy: proxyAddress,
+                    proxy_enabled: formProxyEnabled,
+                    proxy_address: formProxyAddress,
                 }),
             })
             const data = await res.json()
             if (data.code === 0) {
-                setMessage({ type: 'success', text: '配置已保存' })
+                setMessage({ type: 'success', text: `配置「${formName}」已保存` })
-                refreshConfig()
+                await fetchProfiles()
+                setViewMode('list')
             } else {
                 setMessage({ type: 'error', text: data.message || '保存失败' })
             }
@@ -117,77 +151,47 @@ export default function S2AConfig() {
         }
     }
 
-    const handleAddGroupId = () => {
+    // 启用某个配置（写入活动配置）
-        const id = parseInt(newGroupId, 10)
+    const handleActivate = async (profile: S2AProfile) => {
-        if (!isNaN(id) && !groupIds.includes(id)) {
+        setActivating(profile.id)
-            setGroupIds([...groupIds, id])
-            setNewGroupId('')
-        }
-    }
-
-    const handleRemoveGroupId = (id: number) => {
-        setGroupIds(groupIds.filter(g => g !== id))
-    }
-
-    // 保存为预设
-    const handleSavePreset = async () => {
-        if (!profileName.trim()) return
-        setSavingPreset(true)
         try {
-            const res = await fetch('/api/s2a/profiles', {
+            let groupIds: number[] = []
-                method: 'POST',
+            try { groupIds = JSON.parse(profile.group_ids || '[]') } catch { /* ignore */ }
+            const res = await fetch('/api/config', {
+                method: 'PUT',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    name: profileName.trim(),
+                    s2a_api_base: profile.api_base,
-                    api_base: s2aApiBase,
+                    s2a_admin_key: profile.admin_key,
-                    admin_key: s2aAdminKey,
+                    concurrency: profile.concurrency,
-                    concurrency,
+                    priority: profile.priority,
-                    priority,
+                    group_ids: groupIds,
-                    group_ids: JSON.stringify(groupIds),
+                    proxy_enabled: profile.proxy_enabled,
-                    proxy_enabled: proxyEnabled,
+                    default_proxy: profile.proxy_address,
-                    proxy_address: proxyAddress,
                 }),
             })
             const data = await res.json()
             if (data.code === 0) {
-                setMessage({ type: 'success', text: `预设「${profileName}」已保存` })
+                setActiveApiBase(profile.api_base)
-                setProfileName('')
+                setMessage({ type: 'success', text: `已启用配置「${profile.name}」` })
-                setShowSavePreset(false)
+                refreshConfig()
-                fetchProfiles()
             } else {
-                setMessage({ type: 'error', text: data.message || '保存预设失败' })
+                setMessage({ type: 'error', text: data.message || '启用失败' })
             }
         } catch {
             setMessage({ type: 'error', text: '网络错误' })
         } finally {
-            setSavingPreset(false)
+            setActivating(null)
         }
     }
 
-    // 加载预设到表单
+    // 删除配置
-    const handleLoadProfile = (profile: S2AProfile) => {
+    const handleDelete = async (id: number, name: string) => {
-        setS2aApiBase(profile.api_base)
-        setS2aAdminKey(profile.admin_key)
-        setConcurrency(profile.concurrency)
-        setPriority(profile.priority)
-        try {
-            const ids = JSON.parse(profile.group_ids || '[]')
-            setGroupIds(Array.isArray(ids) ? ids : [])
-        } catch {
-            setGroupIds([])
-        }
-        setProxyEnabled(profile.proxy_enabled)
-        setProxyAddress(profile.proxy_address || '')
-        setMessage({ type: 'success', text: `已加载预设「${profile.name}」，请点击保存配置以应用` })
-    }
-
-    // 删除预设
-    const handleDeleteProfile = async (id: number, name: string) => {
         try {
             const res = await fetch(`/api/s2a/profiles?id=${id}`, { method: 'DELETE' })
             const data = await res.json()
             if (data.code === 0) {
-                setMessage({ type: 'success', text: `预设「${name}」已删除` })
+                setMessage({ type: 'success', text: `配置「${name}」已删除` })
                 fetchProfiles()
             }
         } catch {
@@ -195,6 +199,41 @@ export default function S2AConfig() {
         }
     }
 
+    // 测试连接（编辑表单中）
+    const handleTestInForm = async () => {
+        setTesting(true)
+        setTestResult(null)
+        // 临时保存到活动配置来测试
+        try {
+            await fetch('/api/config', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    s2a_api_base: formApiBase,
+                    s2a_admin_key: formAdminKey,
+                }),
+            })
+            const result = await testConnection()
+            setTestResult(result)
+        } catch {
+            setTestResult(false)
+        } finally {
+            setTesting(false)
+        }
+    }
+
+    const handleAddGroupId = () => {
+        const id = parseInt(newGroupId, 10)
+        if (!isNaN(id) && !formGroupIds.includes(id)) {
+            setFormGroupIds([...formGroupIds, id])
+            setNewGroupId('')
+        }
+    }
+
+    const handleRemoveGroupId = (id: number) => {
+        setFormGroupIds(formGroupIds.filter(g => g !== id))
+    }
+
     if (loading) {
         return (
             <div className="flex items-center justify-center h-64">
@@ -203,6 +242,149 @@ export default function S2AConfig() {
         )
     }
 
+    // ==================== 编辑/新建视图 ====================
+    if (viewMode === 'edit') {
+        return (
+            <div className="space-y-6">
+                {/* Header */}
+                <div className="flex items-center gap-4">
+                    <Button variant="outline" onClick={handleBack} icon={<ChevronLeft className="h-4 w-4" />}>
+                        返回
+                    </Button>
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                            {editingId ? '编辑配置' : '添加配置'}
+                        </h1>
+                    </div>
+                    <Button
+                        onClick={handleSaveProfile}
+                        disabled={saving}
+                        icon={saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+                    >
+                        {saving ? '保存中...' : '保存配置'}
+                    </Button>
+                </div>
+
+                {message && (
+                    <div className={`p-3 rounded-lg text-sm ${message.type === 'success'
+                        ? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                        : 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'}`}>
+                        {message.text}
+                    </div>
+                )}
+
+                {/* 配置名称 */}
+                <Card>
+                    <CardContent>
+                        <Input
+                            label="配置名称"
+                            placeholder="例如：生产环境、测试环境"
+                            value={formName}
+                            onChange={(e) => setFormName(e.target.value)}
+                        />
+                    </CardContent>
+                </Card>
+
+                {/* S2A 连接 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Server className="h-5 w-5 text-blue-500" />
+                            S2A 连接
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="grid gap-4 md:grid-cols-2">
+                            <Input
+                                label="S2A API 地址"
+                                placeholder="https://your-s2a-server.com"
+                                value={formApiBase}
+                                onChange={(e) => setFormApiBase(e.target.value)}
+                                hint="S2A 服务的 API 地址"
+                            />
+                            <Input
+                                label="Admin API Key"
+                                type="password"
+                                placeholder="admin-xxxxxxxxxxxxxxxx"
+                                value={formAdminKey}
+                                onChange={(e) => setFormAdminKey(e.target.value)}
+                                hint="S2A 管理密钥"
+                            />
+                        </div>
+                        <div className="flex items-center gap-4">
+                            <Button
+                                variant="outline"
+                                onClick={handleTestInForm}
+                                disabled={testing || !formApiBase || !formAdminKey}
+                                icon={testing ? <Loader2 className="h-4 w-4 animate-spin" /> : <TestTube className="h-4 w-4" />}
+                            >
+                                {testing ? '测试中...' : '测试连接'}
+                            </Button>
+                            {testResult !== null && (
+                                <span className={`text-sm flex items-center gap-1 ${testResult ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                                    {testResult ? <><CheckCircle className="h-4 w-4" /> 连接成功</> : <><XCircle className="h-4 w-4" /> 连接失败</>}
+                                </span>
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* 入库设置 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle>入库默认设置</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <Input label="默认并发数" type="number" min={1} max={100} value={formConcurrency} onChange={(e) => setFormConcurrency(Number(e.target.value))} hint="账号的默认并发请求数" />
+                            <Input label="默认优先级" type="number" min={0} max={100} value={formPriority} onChange={(e) => setFormPriority(Number(e.target.value))} hint="数值越大优先级越高" />
+                        </div>
+                        <div className="space-y-2">
+                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">分组 ID</label>
+                            <div className="flex flex-wrap gap-2">
+                                {formGroupIds.map(id => (
+                                    <span key={id} className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+                                        {id}
+                                        <button onClick={() => handleRemoveGroupId(id)} className="hover:text-red-500 transition-colors"><X className="h-3 w-3" /></button>
+                                    </span>
+                                ))}
+                                {formGroupIds.length === 0 && <span className="text-sm text-slate-400">未设置分组</span>}
+                            </div>
+                            <div className="flex gap-3 mt-2 items-stretch">
+                                <div className="flex-1 max-w-xs">
+                                    <Input placeholder="输入分组 ID" type="number" min={1} value={newGroupId} onChange={(e) => setNewGroupId(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleAddGroupId()} className="h-10" />
+                                </div>
+                                <Button variant="outline" onClick={handleAddGroupId} disabled={!newGroupId} icon={<Plus className="h-4 w-4" />} className="h-10 min-w-[80px] px-4">添加</Button>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* 代理设置 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Globe className="h-5 w-5 text-orange-500" />
+                            代理设置
+                        </CardTitle>
+                        <button onClick={() => setFormProxyEnabled(!formProxyEnabled)} className="flex items-center gap-2 text-sm">
+                            {formProxyEnabled ? (
+                                <><ToggleRight className="h-6 w-6 text-green-500" /><span className="text-green-600 dark:text-green-400">已启用</span></>
+                            ) : (
+                                <><ToggleLeft className="h-6 w-6 text-slate-400" /><span className="text-slate-500">已禁用</span></>
+                            )}
+                        </button>
+                    </CardHeader>
+                    <CardContent>
+                        <Input value={formProxyAddress} onChange={(e) => setFormProxyAddress(e.target.value)} placeholder="http://127.0.0.1:7890" disabled={!formProxyEnabled} className={!formProxyEnabled ? 'opacity-50' : ''} />
+                        <p className="text-xs text-slate-500 mt-2">服务器部署时通常不需要代理，在本地开发或特殊网络环境下可启用</p>
+                    </CardContent>
+                </Card>
+            </div>
+        )
+    }
+
+    // ==================== 列表视图 ====================
     return (
         <div className="space-y-6">
             {/* Header */}
@@ -210,332 +392,154 @@ export default function S2AConfig() {
                 <div>
                     <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
                         <Server className="h-7 w-7 text-blue-500" />
-                        S2A 配置
+                        S2A 配置管理
                     </h1>
-                    <p className="text-sm text-slate-500 dark:text-slate-400">配置 S2A 号池连接、入库参数和代理设置</p>
+                    <p className="text-sm text-slate-500 dark:text-slate-400">管理多个 S2A 号池配置，点击启用切换环境</p>
                 </div>
-                <div className="flex gap-2">
+                <Button onClick={handleAddNew} icon={<Plus className="h-4 w-4" />}>
-                    <Button
+                    添加配置
-                        variant="outline"
-                        onClick={() => setShowSavePreset(!showSavePreset)}
-                        icon={<Bookmark className="h-4 w-4" />}
-                    >
-                        保存为预设
                 </Button>
-                    <Button
-                        onClick={handleSave}
-                        disabled={saving}
-                        icon={saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-                    >
-                        {saving ? '保存中...' : '保存配置'}
-                    </Button>
-                </div>
             </div>
 
             {/* Message */}
             {message && (
                 <div className={`p-3 rounded-lg text-sm ${message.type === 'success'
                     ? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                    : 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                    : 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'}`}>
-                    }`}>
                     {message.text}
                 </div>
             )}
 
-            {/* Save Preset Inline */}
+            {/* 当前活动状态 */}
-            {showSavePreset && (
+            {activeApiBase && (
-                <Card>
+                <div className="flex items-center gap-2 text-sm">
-                    <CardContent>
+                    <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400 border border-green-200 dark:border-green-800">
-                        <div className="flex gap-3 items-end">
+                        {isConnected ? <CheckCircle className="h-3.5 w-3.5" /> : <XCircle className="h-3.5 w-3.5" />}
-                            <div className="flex-1">
+                        当前活动: {activeApiBase}
-                                <Input
+                    </span>
-                                    label="预设名称"
-                                    placeholder="例如：生产环境、测试环境"
-                                    value={profileName}
-                                    onChange={(e) => setProfileName(e.target.value)}
-                                    onKeyDown={(e) => e.key === 'Enter' && handleSavePreset()}
-                                />
                 </div>
-                            <Button
-                                onClick={handleSavePreset}
-                                disabled={savingPreset || !profileName.trim()}
-                                icon={savingPreset ? <Loader2 className="h-4 w-4 animate-spin" /> : <Bookmark className="h-4 w-4" />}
-                                className="h-10"
-                            >
-                                {savingPreset ? '保存中...' : '保存'}
-                            </Button>
-                            <Button
-                                variant="outline"
-                                onClick={() => { setShowSavePreset(false); setProfileName('') }}
-                                className="h-10"
-                            >
-                                取消
-                            </Button>
-                        </div>
-                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
-                            将当前所有配置（连接、入库参数、代理）保存为预设，方便快速切换
-                        </p>
-                    </CardContent>
-                </Card>
             )}
 
-            {/* Main Grid Layout */}
+            {/* 配置列表 */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                {/* Left: Main Config (col-span-2) */}
-                <div className="lg:col-span-2 space-y-6">
-                    {/* S2A Connection */}
-                    <Card>
-                        <CardHeader>
-                            <CardTitle className="flex items-center gap-2">
-                                <Server className="h-5 w-5 text-blue-500" />
-                                S2A 连接配置
-                            </CardTitle>
-                            <div className="flex items-center gap-2">
-                                {isConnected ? (
-                                    <span className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
-                                        <CheckCircle className="h-4 w-4" />
-                                        已连接
-                                    </span>
-                                ) : (
-                                    <span className="flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
-                                        <XCircle className="h-4 w-4" />
-                                        未连接
-                                    </span>
-                                )}
-                            </div>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <div className="grid gap-4 md:grid-cols-2">
-                                <Input
-                                    label="S2A API 地址"
-                                    placeholder="https://your-s2a-server.com"
-                                    value={s2aApiBase}
-                                    onChange={(e) => setS2aApiBase(e.target.value)}
-                                    hint="S2A 服务的 API 地址"
-                                />
-                                <Input
-                                    label="Admin API Key"
-                                    type="password"
-                                    placeholder="admin-xxxxxxxxxxxxxxxx"
-                                    value={s2aAdminKey}
-                                    onChange={(e) => setS2aAdminKey(e.target.value)}
-                                    hint="S2A 管理密钥"
-                                />
-                            </div>
-                            <div className="flex items-center gap-4">
-                                <Button
-                                    variant="outline"
-                                    onClick={handleTestConnection}
-                                    disabled={testing || !s2aApiBase || !s2aAdminKey}
-                                    icon={testing ? <Loader2 className="h-4 w-4 animate-spin" /> : <TestTube className="h-4 w-4" />}
-                                >
-                                    {testing ? '测试中...' : '测试连接'}
-                                </Button>
-                                {testResult !== null && (
-                                    <span className={`text-sm ${testResult ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
-                                        {testResult ? '连接成功' : '连接失败'}
-                                    </span>
-                                )}
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    {/* Pooling Settings */}
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>入库默认设置</CardTitle>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                <Input
-                                    label="默认并发数"
-                                    type="number"
-                                    min={1}
-                                    max={100}
-                                    value={concurrency}
-                                    onChange={(e) => setConcurrency(Number(e.target.value))}
-                                    hint="账号的默认并发请求数"
-                                />
-                                <Input
-                                    label="默认优先级"
-                                    type="number"
-                                    min={0}
-                                    max={100}
-                                    value={priority}
-                                    onChange={(e) => setPriority(Number(e.target.value))}
-                                    hint="数值越大优先级越高"
-                                />
-                            </div>
-                            {/* Group IDs */}
-                            <div className="space-y-2">
-                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
-                                    分组 ID
-                                </label>
-                                <div className="flex flex-wrap gap-2">
-                                    {groupIds.map(id => (
-                                        <span key={id} className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
-                                            {id}
-                                            <button onClick={() => handleRemoveGroupId(id)} className="hover:text-red-500 transition-colors">
-                                                <X className="h-3 w-3" />
-                                            </button>
-                                        </span>
-                                    ))}
-                                    {groupIds.length === 0 && (
-                                        <span className="text-sm text-slate-400">未设置分组</span>
-                                    )}
-                                </div>
-                                <div className="flex gap-3 mt-2 items-stretch">
-                                    <div className="flex-1 max-w-xs">
-                                        <Input
-                                            placeholder="输入分组 ID"
-                                            type="number"
-                                            min={1}
-                                            value={newGroupId}
-                                            onChange={(e) => setNewGroupId(e.target.value)}
-                                            onKeyDown={(e) => e.key === 'Enter' && handleAddGroupId()}
-                                            className="h-10"
-                                        />
-                                    </div>
-                                    <Button
-                                        variant="outline"
-                                        onClick={handleAddGroupId}
-                                        disabled={!newGroupId}
-                                        icon={<Plus className="h-4 w-4" />}
-                                        className="h-10 min-w-[100px] px-4"
-                                    >
-                                        添加
-                                    </Button>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    {/* Proxy Settings */}
-                    <Card>
-                        <CardHeader>
-                            <CardTitle className="flex items-center gap-2">
-                                <Globe className="h-5 w-5 text-orange-500" />
-                                代理设置
-                            </CardTitle>
-                            <button onClick={() => setProxyEnabled(!proxyEnabled)} className="flex items-center gap-2 text-sm">
-                                {proxyEnabled ? (
-                                    <>
-                                        <ToggleRight className="h-6 w-6 text-green-500" />
-                                        <span className="text-green-600 dark:text-green-400">已启用</span>
-                                    </>
-                                ) : (
-                                    <>
-                                        <ToggleLeft className="h-6 w-6 text-slate-400" />
-                                        <span className="text-slate-500">已禁用</span>
-                                    </>
-                                )}
-                            </button>
-                        </CardHeader>
-                        <CardContent>
-                            <Input
-                                value={proxyAddress}
-                                onChange={(e) => setProxyAddress(e.target.value)}
-                                placeholder="http://127.0.0.1:7890"
-                                disabled={!proxyEnabled}
-                                className={!proxyEnabled ? 'opacity-50' : ''}
-                            />
-                            <p className="text-xs text-slate-500 mt-2">
-                                服务器部署时通常不需要代理，在本地开发或特殊网络环境下可启用
-                            </p>
-                        </CardContent>
-                    </Card>
-                </div>
-
-                {/* Right: Saved Profiles Sidebar (col-span-1) */}
-                <div className="lg:col-span-1">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle className="flex items-center gap-2">
-                                <Bookmark className="h-5 w-5 text-amber-500" />
-                                已保存配置
-                            </CardTitle>
-                            <span className="text-xs text-slate-400">{profiles.length} 个预设</span>
-                        </CardHeader>
-                        <CardContent>
             {profiles.length === 0 ? (
-                                <div className="text-center py-8 text-slate-400">
+                <Card>
-                                    <Bookmark className="h-10 w-10 mx-auto mb-2 opacity-30" />
+                    <CardContent>
-                                    <p className="text-sm">暂无保存的配置</p>
+                        <div className="text-center py-16">
-                                    <p className="text-xs mt-1">点击上方「保存为预设」按钮保存当前配置</p>
+                            <Server className="h-12 w-12 mx-auto mb-3 text-slate-300 dark:text-slate-600" />
+                            <p className="text-slate-500 dark:text-slate-400 mb-1">暂无配置</p>
+                            <p className="text-sm text-slate-400 dark:text-slate-500 mb-4">点击「添加配置」创建第一个 S2A 连接配置</p>
+                            <Button onClick={handleAddNew} icon={<Plus className="h-4 w-4" />}>添加配置</Button>
                         </div>
+                    </CardContent>
+                </Card>
             ) : (
-                                <div className="space-y-2">
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                     {profiles.map(profile => (
-                                        <ProfileItem
+                        <ProfileCard
                             key={profile.id}
                             profile={profile}
-                                            onLoad={handleLoadProfile}
+                            isActive={activeApiBase === profile.api_base}
-                                            onDelete={handleDeleteProfile}
+                            isActivating={activating === profile.id}
+                            onActivate={() => handleActivate(profile)}
+                            onEdit={() => handleEdit(profile)}
+                            onDelete={() => handleDelete(profile.id, profile.name)}
                         />
                     ))}
                 </div>
             )}
-                        </CardContent>
-                    </Card>
-                </div>
-            </div>
         </div>
     )
 }
 
-// 预设列表项组件
+// ==================== 配置卡片组件 ====================
-function ProfileItem({ profile, onLoad, onDelete }: {
+function ProfileCard({ profile, isActive, isActivating, onActivate, onEdit, onDelete }: {
     profile: S2AProfile
-    onLoad: (p: S2AProfile) => void
+    isActive: boolean
-    onDelete: (id: number, name: string) => void
+    isActivating: boolean
+    onActivate: () => void
+    onEdit: () => void
+    onDelete: () => void
 }) {
     const [confirming, setConfirming] = useState(false)
 
     let parsedGroups: number[] = []
-    try {
+    try { parsedGroups = JSON.parse(profile.group_ids || '[]') } catch { /* ignore */ }
-        parsedGroups = JSON.parse(profile.group_ids || '[]')
-    } catch { /* ignore */ }
 
     return (
-        <div className="group border border-slate-200 dark:border-slate-700 rounded-lg p-3 hover:border-blue-300 dark:hover:border-blue-600 transition-colors">
+        <Card className={`relative transition-all ${isActive ? 'ring-2 ring-green-500 dark:ring-green-400' : ''}`}>
-            <div className="flex items-center justify-between mb-1">
+            {/* 活动标记 */}
-                <span className="font-medium text-sm text-slate-800 dark:text-slate-200 truncate">{profile.name}</span>
+            {isActive && (
-                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full font-medium shadow-sm">
-                    <button
+                    使用中
-                        onClick={() => onLoad(profile)}
+                </div>
-                        className="p-1 rounded hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-500"
+            )}
-                        title="加载此预设"
+            <CardContent>
-                    >
+                {/* 名称 + 操作 */}
-                        <Download className="h-3.5 w-3.5" />
+                <div className="flex items-start justify-between mb-3">
-                    </button>
+                    <div className="flex-1 min-w-0">
-                    {confirming ? (
+                        <h3 className="font-semibold text-base text-slate-900 dark:text-slate-100 truncate">{profile.name}</h3>
-                        <button
+                        <p className="text-sm text-slate-500 dark:text-slate-400 truncate mt-0.5">{profile.api_base || '未设置 API 地址'}</p>
-                            onClick={() => { onDelete(profile.id, profile.name); setConfirming(false) }}
+                    </div>
-                            className="p-1 rounded bg-red-100 dark:bg-red-900/30 text-red-500 text-xs px-1.5"
+                </div>
-                        >
+
-                            确认
+                {/* 参数摘要 */}
-                        </button>
+                <div className="flex flex-wrap gap-1.5 mb-4">
-                    ) : (
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300">
-                        <button
+                        并发 {profile.concurrency}
-                            onClick={() => setConfirming(true)}
+                    </span>
-                            onBlur={() => setTimeout(() => setConfirming(false), 200)}
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300">
-                            className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-400"
+                        优先级 {profile.priority}
-                            title="删除"
+                    </span>
-                        >
+                    {parsedGroups.length > 0 && (
-                            <Trash2 className="h-3.5 w-3.5" />
+                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-                        </button>
+                            分组 {parsedGroups.join(', ')}
+                        </span>
+                    )}
+                    {profile.proxy_enabled && (
+                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-orange-50 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
+                            <Globe className="h-3 w-3 mr-0.5" /> 代理
+                        </span>
                     )}
                 </div>
+
+                {/* 操作按钮 */}
+                <div className="flex items-center gap-2">
+                    {!isActive ? (
+                        <Button
+                            onClick={onActivate}
+                            disabled={isActivating}
+                            icon={isActivating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Zap className="h-3.5 w-3.5" />}
+                            className="flex-1 text-sm h-8"
+                        >
+                            {isActivating ? '启用中...' : '启用'}
+                        </Button>
+                    ) : (
+                        <div className="flex-1 flex items-center justify-center h-8 text-sm text-green-600 dark:text-green-400 font-medium">
+                            <CheckCircle className="h-3.5 w-3.5 mr-1" /> 当前使用中
                         </div>
-            <div className="text-xs text-slate-500 dark:text-slate-400 space-y-0.5">
+                    )}
-                <p className="truncate">{profile.api_base || '未设置 API'}</p>
+                    <Button variant="outline" onClick={onEdit} icon={<Edit2 className="h-3.5 w-3.5" />} className="h-8 text-sm px-3">
-                <div className="flex gap-2 flex-wrap">
+                        编辑
-                    <span>并发: {profile.concurrency}</span>
+                    </Button>
-                    <span>优先级: {profile.priority}</span>
+                    {confirming ? (
-                    {parsedGroups.length > 0 && <span>分组: {parsedGroups.join(',')}</span>}
+                        <Button
-                    {profile.proxy_enabled && <span className="text-orange-500">代理</span>}
+                            variant="outline"
-                </div>
+                            onClick={() => { onDelete(); setConfirming(false) }}
-            </div>
+                            className="h-8 text-sm px-3 border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
+                        >
+                            确认删除
+                        </Button>
+                    ) : (
+                        <Button
+                            variant="outline"
+                            onClick={() => setConfirming(true)}
+                            onBlur={() => setTimeout(() => setConfirming(false), 200)}
+                            icon={<Trash2 className="h-3.5 w-3.5" />}
+                            className="h-8 text-sm px-2 text-slate-400 hover:text-red-500"
+                        />
+                    )}
                 </div>
+            </CardContent>
+        </Card>
     )
 }