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
This commit is contained in:
@@ -1,112 +1,146 @@
|
|||||||
import { useState, useEffect, useCallback } from '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 { 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 { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
|
||||||
import { useConfig } from '../hooks/useConfig'
|
import { useConfig } from '../hooks/useConfig'
|
||||||
import type { S2AProfile } from '../types'
|
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 [loading, setLoading] = useState(true)
|
||||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
|
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 [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 () => {
|
const fetchProfiles = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/s2a/profiles')
|
const res = await fetch('/api/s2a/profiles')
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.code === 0 && data.data) {
|
if (data.code === 0) {
|
||||||
setProfiles(data.data)
|
setProfiles(data.data || [])
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch { /* ignore */ }
|
||||||
console.error('Failed to fetch profiles:', error)
|
|
||||||
}
|
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 从服务器加载配置
|
const fetchActiveConfig = useCallback(async () => {
|
||||||
const fetchConfig = async () => {
|
|
||||||
setLoading(true)
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/config')
|
const res = await fetch('/api/config')
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.code === 0 && data.data) {
|
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) {
|
} catch { /* ignore */ }
|
||||||
console.error('Failed to fetch config:', error)
|
}, [])
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
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)
|
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 {
|
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' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
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()
|
const data = await res.json()
|
||||||
if (data.code === 0) {
|
if (data.code === 0) {
|
||||||
setMessage({ type: 'success', text: '配置已保存' })
|
setMessage({ type: 'success', text: `配置「${formName}」已保存` })
|
||||||
refreshConfig()
|
await fetchProfiles()
|
||||||
|
setViewMode('list')
|
||||||
} else {
|
} else {
|
||||||
setMessage({ type: 'error', text: data.message || '保存失败' })
|
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 {
|
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' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
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()
|
const data = await res.json()
|
||||||
if (data.code === 0) {
|
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 {
|
} else {
|
||||||
setMessage({ type: 'error', text: data.message || '保存预设失败' })
|
setMessage({ type: 'error', text: data.message || '启用失败' })
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
setMessage({ type: 'error', text: '网络错误' })
|
setMessage({ type: 'error', text: '网络错误' })
|
||||||
} finally {
|
} 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 {
|
try {
|
||||||
const res = await fetch(`/api/s2a/profiles?id=${id}`, { method: 'DELETE' })
|
const res = await fetch(`/api/s2a/profiles?id=${id}`, { method: 'DELETE' })
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.code === 0) {
|
if (data.code === 0) {
|
||||||
setMessage({ type: 'success', text: `预设「${name}」已删除` })
|
setMessage({ type: 'success', text: `配置「${name}」已删除` })
|
||||||
fetchProfiles()
|
fetchProfiles()
|
||||||
}
|
}
|
||||||
} catch {
|
} 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) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-64">
|
<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 (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -210,332 +392,154 @@ export default function S2AConfig() {
|
|||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
<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" />
|
<Server className="h-7 w-7 text-blue-500" />
|
||||||
S2A 配置
|
S2A 配置管理
|
||||||
</h1>
|
</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
|
|
||||||
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>
|
||||||
|
<Button onClick={handleAddNew} icon={<Plus className="h-4 w-4" />}>
|
||||||
|
添加配置
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Message */}
|
{/* Message */}
|
||||||
{message && (
|
{message && (
|
||||||
<div className={`p-3 rounded-lg text-sm ${message.type === 'success'
|
<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-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}
|
{message.text}
|
||||||
</div>
|
</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="预设名称"
|
</div>
|
||||||
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">
|
{profiles.length === 0 ? (
|
||||||
{/* Left: Main Config (col-span-2) */}
|
<Card>
|
||||||
<div className="lg:col-span-2 space-y-6">
|
<CardContent>
|
||||||
{/* S2A Connection */}
|
<div className="text-center py-16">
|
||||||
<Card>
|
<Server className="h-12 w-12 mx-auto mb-3 text-slate-300 dark:text-slate-600" />
|
||||||
<CardHeader>
|
<p className="text-slate-500 dark:text-slate-400 mb-1">暂无配置</p>
|
||||||
<CardTitle className="flex items-center gap-2">
|
<p className="text-sm text-slate-400 dark:text-slate-500 mb-4">点击「添加配置」创建第一个 S2A 连接配置</p>
|
||||||
<Server className="h-5 w-5 text-blue-500" />
|
<Button onClick={handleAddNew} icon={<Plus className="h-4 w-4" />}>添加配置</Button>
|
||||||
S2A 连接配置
|
</div>
|
||||||
</CardTitle>
|
</CardContent>
|
||||||
<div className="flex items-center gap-2">
|
</Card>
|
||||||
{isConnected ? (
|
) : (
|
||||||
<span className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
<CheckCircle className="h-4 w-4" />
|
{profiles.map(profile => (
|
||||||
已连接
|
<ProfileCard
|
||||||
</span>
|
key={profile.id}
|
||||||
) : (
|
profile={profile}
|
||||||
<span className="flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
|
isActive={activeApiBase === profile.api_base}
|
||||||
<XCircle className="h-4 w-4" />
|
isActivating={activating === profile.id}
|
||||||
未连接
|
onActivate={() => handleActivate(profile)}
|
||||||
</span>
|
onEdit={() => handleEdit(profile)}
|
||||||
)}
|
onDelete={() => handleDelete(profile.id, profile.name)}
|
||||||
</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>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 预设列表项组件
|
// ==================== 配置卡片组件 ====================
|
||||||
function ProfileItem({ profile, onLoad, onDelete }: {
|
function ProfileCard({ profile, isActive, isActivating, onActivate, onEdit, onDelete }: {
|
||||||
profile: S2AProfile
|
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)
|
const [confirming, setConfirming] = useState(false)
|
||||||
|
|
||||||
let parsedGroups: number[] = []
|
let parsedGroups: number[] = []
|
||||||
try {
|
try { parsedGroups = JSON.parse(profile.group_ids || '[]') } catch { /* ignore */ }
|
||||||
parsedGroups = JSON.parse(profile.group_ids || '[]')
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
|
|
||||||
return (
|
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>
|
||||||
</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 items-center gap-2">
|
||||||
<div className="flex gap-2 flex-wrap">
|
{!isActive ? (
|
||||||
<span>并发: {profile.concurrency}</span>
|
<Button
|
||||||
<span>优先级: {profile.priority}</span>
|
onClick={onActivate}
|
||||||
{parsedGroups.length > 0 && <span>分组: {parsedGroups.join(',')}</span>}
|
disabled={isActivating}
|
||||||
{profile.proxy_enabled && <span className="text-orange-500">代理</span>}
|
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>
|
||||||
|
)}
|
||||||
|
<Button variant="outline" onClick={onEdit} icon={<Edit2 className="h-3.5 w-3.5" />} className="h-8 text-sm px-3">
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
{confirming ? (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => { onDelete(); setConfirming(false) }}
|
||||||
|
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>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user