feat(s2a): Add S2A configuration profiles management system
- Add new `/api/s2a/profiles` endpoint supporting GET, POST, DELETE operations - Create `s2a_profiles` database table with fields for API configuration, concurrency, priority, group IDs, and proxy settings - Implement database methods: `GetS2AProfiles()`, `AddS2AProfile()`, `DeleteS2AProfile()` - Add S2AProfile struct to database models with JSON serialization support - Implement profile management UI in S2AConfig page with save, load, and delete functionality - Add profile list display with ability to apply saved configurations - Add S2AProfile type definition to frontend types - Enable users to save and reuse S2A configurations as presets for faster setup
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { TestTube, CheckCircle, XCircle, Loader2, Save, Server, Plus, X, Globe, ToggleLeft, ToggleRight } from 'lucide-react'
|
||||
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 { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
|
||||
import { useConfig } from '../hooks/useConfig'
|
||||
import type { S2AProfile } from '../types'
|
||||
|
||||
export default function S2AConfig() {
|
||||
const {
|
||||
@@ -30,6 +31,25 @@ export default function S2AConfig() {
|
||||
const [proxyEnabled, setProxyEnabled] = useState(false)
|
||||
const [proxyAddress, setProxyAddress] = useState('')
|
||||
|
||||
// 预设管理
|
||||
const [profiles, setProfiles] = useState<S2AProfile[]>([])
|
||||
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) {
|
||||
setProfiles(data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch profiles:', error)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 从服务器加载配置
|
||||
const fetchConfig = async () => {
|
||||
setLoading(true)
|
||||
@@ -54,15 +74,13 @@ export default function S2AConfig() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfig()
|
||||
}, [])
|
||||
fetchProfiles()
|
||||
}, [fetchProfiles])
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
setTesting(true)
|
||||
setTestResult(null)
|
||||
|
||||
// 先保存配置
|
||||
await handleSave()
|
||||
|
||||
const result = await testConnection()
|
||||
setTestResult(result)
|
||||
setTesting(false)
|
||||
@@ -78,8 +96,8 @@ export default function S2AConfig() {
|
||||
body: JSON.stringify({
|
||||
s2a_api_base: s2aApiBase,
|
||||
s2a_admin_key: s2aAdminKey,
|
||||
concurrency: concurrency,
|
||||
priority: priority,
|
||||
concurrency,
|
||||
priority,
|
||||
group_ids: groupIds,
|
||||
proxy_enabled: proxyEnabled,
|
||||
default_proxy: proxyAddress,
|
||||
@@ -111,6 +129,72 @@ export default function S2AConfig() {
|
||||
setGroupIds(groupIds.filter(g => g !== id))
|
||||
}
|
||||
|
||||
// 保存为预设
|
||||
const handleSavePreset = async () => {
|
||||
if (!profileName.trim()) return
|
||||
setSavingPreset(true)
|
||||
try {
|
||||
const res = await fetch('/api/s2a/profiles', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: profileName.trim(),
|
||||
api_base: s2aApiBase,
|
||||
admin_key: s2aAdminKey,
|
||||
concurrency,
|
||||
priority,
|
||||
group_ids: JSON.stringify(groupIds),
|
||||
proxy_enabled: proxyEnabled,
|
||||
proxy_address: proxyAddress,
|
||||
}),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.code === 0) {
|
||||
setMessage({ type: 'success', text: `预设「${profileName}」已保存` })
|
||||
setProfileName('')
|
||||
setShowSavePreset(false)
|
||||
fetchProfiles()
|
||||
} else {
|
||||
setMessage({ type: 'error', text: data.message || '保存预设失败' })
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: 'error', text: '网络错误' })
|
||||
} finally {
|
||||
setSavingPreset(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载预设到表单
|
||||
const handleLoadProfile = (profile: S2AProfile) => {
|
||||
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}」已删除` })
|
||||
fetchProfiles()
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: 'error', text: '删除失败' })
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
@@ -130,13 +214,22 @@ export default function S2AConfig() {
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">配置 S2A 号池连接、入库参数和代理设置</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
icon={saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
>
|
||||
{saving ? '保存中...' : '保存配置'}
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<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 */}
|
||||
@@ -149,207 +242,300 @@ export default function S2AConfig() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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 管理密钥，可在 S2A 后台 Settings 页面获取"
|
||||
/>
|
||||
</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">
|
||||
{/* Save Preset Inline */}
|
||||
{showSavePreset && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="flex gap-3 items-end">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder="输入分组 ID"
|
||||
type="number"
|
||||
min={1}
|
||||
value={newGroupId}
|
||||
onChange={(e) => setNewGroupId(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAddGroupId()}
|
||||
className="h-10"
|
||||
label="预设名称"
|
||||
placeholder="例如：生产环境、测试环境"
|
||||
value={profileName}
|
||||
onChange={(e) => setProfileName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSavePreset()}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleAddGroupId}
|
||||
disabled={!newGroupId}
|
||||
icon={<Plus className="h-4 w-4" />}
|
||||
className="h-10 min-w-[100px] px-4"
|
||||
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">
|
||||
入库时账号将被分配到这些分组
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
||||
将当前所有配置（连接、入库参数、代理）保存为预设，方便快速切换
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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>
|
||||
{/* 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>
|
||||
|
||||
{/* Info */}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400">
|
||||
<p className="font-medium mb-2">配置说明：</p>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>S2A API 地址是您部署的 S2A 服务的完整 URL</li>
|
||||
<li>Admin API Key 用于管理账号池，具有完全权限</li>
|
||||
<li>入库默认设置会应用到新入库的账号</li>
|
||||
<li>分组 ID 用于将账号归类到指定分组</li>
|
||||
<li>配置会自动保存到服务器数据库</li>
|
||||
</ul>
|
||||
</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">
|
||||
<Bookmark className="h-10 w-10 mx-auto mb-2 opacity-30" />
|
||||
<p className="text-sm">暂无保存的配置</p>
|
||||
<p className="text-xs mt-1">点击上方「保存为预设」按钮保存当前配置</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{profiles.map(profile => (
|
||||
<ProfileItem
|
||||
key={profile.id}
|
||||
profile={profile}
|
||||
onLoad={handleLoadProfile}
|
||||
onDelete={handleDeleteProfile}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 预设列表项组件
|
||||
function ProfileItem({ profile, onLoad, onDelete }: {
|
||||
profile: S2AProfile
|
||||
onLoad: (p: S2AProfile) => void
|
||||
onDelete: (id: number, name: string) => void
|
||||
}) {
|
||||
const [confirming, setConfirming] = useState(false)
|
||||
|
||||
let parsedGroups: number[] = []
|
||||
try {
|
||||
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">
|
||||
<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>
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => onLoad(profile)}
|
||||
className="p-1 rounded hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-500"
|
||||
title="加载此预设"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
{confirming ? (
|
||||
<button
|
||||
onClick={() => { onDelete(profile.id, profile.name); setConfirming(false) }}
|
||||
className="p-1 rounded bg-red-100 dark:bg-red-900/30 text-red-500 text-xs px-1.5"
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirming(true)}
|
||||
onBlur={() => setTimeout(() => setConfirming(false), 200)}
|
||||
className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-400"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400 space-y-0.5">
|
||||
<p className="truncate">{profile.api_base || '未设置 API'}</p>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<span>并发: {profile.concurrency}</span>
|
||||
<span>优先级: {profile.priority}</span>
|
||||
{parsedGroups.length > 0 && <span>分组: {parsedGroups.join(',')}</span>}
|
||||
{profile.proxy_enabled && <span className="text-orange-500">代理</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -72,6 +72,20 @@ export interface S2AAccount {
|
||||
active_sessions?: number
|
||||
}
|
||||
|
||||
// S2A 配置预设
|
||||
export interface S2AProfile {
|
||||
id: number
|
||||
name: string
|
||||
api_base: string
|
||||
admin_key: string
|
||||
concurrency: number
|
||||
priority: number
|
||||
group_ids: string // JSON string from backend
|
||||
proxy_enabled: boolean
|
||||
proxy_address: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
// 分页响应
|
||||
export interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
|
||||
Reference in New Issue
Block a user