600 lines
25 KiB
TypeScript
600 lines
25 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { QRCodeSVG } from 'qrcode.react';
|
||
import { PageHeader } from '@/components/layout/page-header';
|
||
import { useConfigs, useUpdateConfig, useTransferEnabled, useSetTransferEnabled, useMiningStatus, useActivateMining, useDeactivateMining, useP2pTransferFee, useSetP2pTransferFee, usePoolAccounts, usePoolAccountBalance, usePoolAccountBlockchainWithdraw, usePoolAccountCentralizedDeposit } from '@/features/configs/hooks/use-configs';
|
||
import type { PoolAccountInfo, PoolAccountBalance } from '@/features/configs/api/configs.api';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogTrigger,
|
||
} from '@/components/ui/dialog';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Pencil, Save, X, Play, Pause, AlertCircle, CheckCircle2, Loader2, Wallet, PlusCircle, MinusCircle, Copy, Check, Flame, HardHat } from 'lucide-react';
|
||
import type { SystemConfig } from '@/types/config';
|
||
|
||
// 根据 blockchainPoolType 映射视觉属性
|
||
const poolVisualMap: Record<string, { icon: typeof Flame; color: string }> = {
|
||
BURN_POOL: { icon: Flame, color: 'orange' },
|
||
MINING_POOL: { icon: HardHat, color: 'blue' },
|
||
};
|
||
|
||
const categoryLabels: Record<string, string> = {
|
||
mining: '挖矿配置',
|
||
trading: '交易配置',
|
||
distribution: '分配配置',
|
||
system: '系统配置',
|
||
};
|
||
|
||
// 池账户卡片子组件
|
||
function PoolAccountCard({ pool }: { pool: PoolAccountInfo }) {
|
||
const { data: balance, isLoading } = usePoolAccountBalance(pool.walletName);
|
||
const blockchainWithdrawMutation = usePoolAccountBlockchainWithdraw();
|
||
const centralizedDepositMutation = usePoolAccountCentralizedDeposit();
|
||
|
||
const [withdrawAddress, setWithdrawAddress] = useState('');
|
||
const [withdrawAmount, setWithdrawAmount] = useState('');
|
||
const [depositAmount, setDepositAmount] = useState('');
|
||
const [copiedAddress, setCopiedAddress] = useState<string | null>(null);
|
||
|
||
const visual = poolVisualMap[pool.blockchainPoolType] || { icon: Wallet, color: 'gray' };
|
||
const Icon = visual.icon;
|
||
const colorClass = visual.color === 'orange' ? 'text-orange-500' : visual.color === 'blue' ? 'text-blue-500' : 'text-gray-500';
|
||
|
||
const handleCopyAddress = async (address: string) => {
|
||
await navigator.clipboard.writeText(address);
|
||
setCopiedAddress(address);
|
||
setTimeout(() => setCopiedAddress(null), 2000);
|
||
};
|
||
|
||
const formatBalance = (value: string | undefined, decimals: number = 2) => {
|
||
if (!value) return '0';
|
||
const num = parseFloat(value);
|
||
if (isNaN(num)) return '0';
|
||
return num.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
||
};
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Icon className={`h-5 w-5 ${colorClass}`} />
|
||
{pool.name}
|
||
</CardTitle>
|
||
<Badge variant="outline" className="text-xs">
|
||
2-of-3 门限
|
||
</Badge>
|
||
</div>
|
||
<CardDescription>
|
||
钱包: {pool.walletName}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{isLoading ? (
|
||
<Skeleton className="h-20 w-full" />
|
||
) : (
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">总余额</p>
|
||
<p className="text-2xl font-bold">{formatBalance(balance?.balance)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">可用余额</p>
|
||
<p className={`text-2xl font-bold ${colorClass}`}>{formatBalance(balance?.availableBalance)}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">冻结中</p>
|
||
<p className="text-lg text-muted-foreground">{formatBalance(balance?.frozenBalance)}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 pt-4 border-t">
|
||
{/* 充值（中心化 + 区块链） */}
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<PlusCircle className="h-4 w-4 mr-1" />
|
||
充值
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>充值 — {pool.name}</DialogTitle>
|
||
<DialogDescription>选择充值方式向{pool.name}充值</DialogDescription>
|
||
</DialogHeader>
|
||
<Tabs defaultValue="blockchain" className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="centralized" disabled>中心化充值</TabsTrigger>
|
||
<TabsTrigger value="blockchain">区块链充值</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="centralized" className="space-y-4 pt-4">
|
||
<div>
|
||
<Label>充值金额</Label>
|
||
<Input
|
||
type="number"
|
||
value={depositAmount}
|
||
onChange={(e) => setDepositAmount(e.target.value)}
|
||
placeholder="请输入金额"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
centralizedDepositMutation.mutate({
|
||
walletName: pool.walletName,
|
||
amount: depositAmount,
|
||
});
|
||
setDepositAmount('');
|
||
}}
|
||
disabled={centralizedDepositMutation.isPending || !depositAmount}
|
||
>
|
||
{centralizedDepositMutation.isPending ? '处理中...' : '确认充值'}
|
||
</Button>
|
||
</TabsContent>
|
||
<TabsContent value="blockchain" className="space-y-4 pt-4">
|
||
<div className="text-sm text-muted-foreground text-center">
|
||
向以下地址转入 <strong>fUSDT</strong>（积分值代币）
|
||
</div>
|
||
{balance?.walletAddress ? (
|
||
<div className="flex flex-col items-center space-y-4">
|
||
<div className="p-4 bg-white rounded-lg">
|
||
<QRCodeSVG value={balance.walletAddress} size={180} />
|
||
</div>
|
||
<div className="w-full">
|
||
<Label className="text-xs text-muted-foreground">钱包地址 (Kava EVM)</Label>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<code className="flex-1 text-xs bg-muted p-2 rounded break-all">
|
||
{balance.walletAddress}
|
||
</code>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleCopyAddress(balance.walletAddress)}
|
||
>
|
||
{copiedAddress === balance.walletAddress ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded w-full">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
转账后系统将自动检测并入账（约需12个区块确认）
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-center text-muted-foreground py-4">
|
||
<AlertCircle className="h-6 w-6 mx-auto mb-2 text-yellow-500" />
|
||
<p className="text-sm">钱包地址未配置</p>
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 区块链提现 */}
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="outline">
|
||
<MinusCircle className="h-4 w-4 mr-1" />
|
||
提现
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>区块链提现 — {pool.name}</DialogTitle>
|
||
<DialogDescription>转账 fUSDT（积分值代币）到指定地址</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label>目标地址 (Kava EVM)</Label>
|
||
<Input
|
||
value={withdrawAddress}
|
||
onChange={(e) => setWithdrawAddress(e.target.value)}
|
||
placeholder="0x..."
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>提现金额</Label>
|
||
<Input
|
||
type="number"
|
||
value={withdrawAmount}
|
||
onChange={(e) => setWithdrawAmount(e.target.value)}
|
||
placeholder="请输入金额"
|
||
/>
|
||
</div>
|
||
<Button
|
||
className="w-full"
|
||
onClick={() => {
|
||
blockchainWithdrawMutation.mutate({
|
||
walletName: pool.walletName,
|
||
toAddress: withdrawAddress,
|
||
amount: withdrawAmount,
|
||
});
|
||
setWithdrawAddress('');
|
||
setWithdrawAmount('');
|
||
}}
|
||
disabled={
|
||
blockchainWithdrawMutation.isPending ||
|
||
!withdrawAddress ||
|
||
!withdrawAmount ||
|
||
!withdrawAddress.startsWith('0x')
|
||
}
|
||
>
|
||
{blockchainWithdrawMutation.isPending ? '链上转账中...' : '确认区块链提现'}
|
||
</Button>
|
||
<div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded">
|
||
<AlertCircle className="h-3 w-3 inline mr-1" />
|
||
区块链提现将通过 2-of-3 门限签名从{pool.name}钱包转账到目标地址
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
export default function ConfigsPage() {
|
||
const { data: configs, isLoading } = useConfigs();
|
||
const { data: transferEnabled, isLoading: transferLoading } = useTransferEnabled();
|
||
const { data: miningStatus, isLoading: miningLoading } = useMiningStatus();
|
||
const updateConfig = useUpdateConfig();
|
||
const setTransferEnabled = useSetTransferEnabled();
|
||
const activateMining = useActivateMining();
|
||
const deactivateMining = useDeactivateMining();
|
||
|
||
const { data: feeConfig, isLoading: feeLoading } = useP2pTransferFee();
|
||
const setP2pTransferFee = useSetP2pTransferFee();
|
||
|
||
const { data: poolAccounts, isLoading: poolAccountsLoading } = usePoolAccounts();
|
||
|
||
const [editingConfig, setEditingConfig] = useState<SystemConfig | null>(null);
|
||
const [editValue, setEditValue] = useState('');
|
||
const [feeValue, setFeeValue] = useState('');
|
||
const [minAmountValue, setMinAmountValue] = useState('');
|
||
|
||
useEffect(() => {
|
||
if (feeConfig) {
|
||
setFeeValue(feeConfig.fee);
|
||
setMinAmountValue(feeConfig.minTransferAmount);
|
||
}
|
||
}, [feeConfig]);
|
||
|
||
const handleEdit = (config: SystemConfig) => {
|
||
setEditingConfig(config);
|
||
setEditValue(config.configValue);
|
||
};
|
||
|
||
const handleSave = () => {
|
||
if (editingConfig) {
|
||
updateConfig.mutate({ key: editingConfig.configKey, value: editValue });
|
||
setEditingConfig(null);
|
||
}
|
||
};
|
||
|
||
const handleTransferToggle = (checked: boolean) => {
|
||
setTransferEnabled.mutate(checked);
|
||
};
|
||
|
||
const groupedConfigs = configs?.reduce(
|
||
(acc, config) => {
|
||
const category = config.category || 'system';
|
||
if (!acc[category]) {
|
||
acc[category] = [];
|
||
}
|
||
acc[category].push(config);
|
||
return acc;
|
||
},
|
||
{} as Record<string, SystemConfig[]>
|
||
);
|
||
|
||
const formatNumber = (value: string) => {
|
||
return parseFloat(value).toLocaleString();
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<PageHeader title="配置管理" description="管理系统配置参数" />
|
||
|
||
{/* 挖矿状态卡片 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle className="text-lg">挖矿系统状态</CardTitle>
|
||
<CardDescription>控制挖矿分配系统的运行状态</CardDescription>
|
||
</div>
|
||
{miningLoading ? (
|
||
<Skeleton className="h-6 w-16" />
|
||
) : miningStatus?.error ? (
|
||
<Badge variant="destructive" className="flex items-center gap-1">
|
||
<AlertCircle className="h-3 w-3" />
|
||
连接失败
|
||
</Badge>
|
||
) : miningStatus?.isActive ? (
|
||
<Badge variant="default" className="flex items-center gap-1 bg-green-500">
|
||
<CheckCircle2 className="h-3 w-3" />
|
||
运行中
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="secondary" className="flex items-center gap-1">
|
||
<Pause className="h-3 w-3" />
|
||
已停用
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{miningLoading ? (
|
||
<Skeleton className="h-32 w-full" />
|
||
) : miningStatus?.error ? (
|
||
<div className="text-center py-4 text-muted-foreground">
|
||
<AlertCircle className="h-8 w-8 mx-auto mb-2 text-destructive" />
|
||
<p>无法连接到挖矿服务</p>
|
||
<p className="text-sm">{miningStatus.error}</p>
|
||
</div>
|
||
) : !miningStatus?.initialized ? (
|
||
<div className="text-center py-4 text-muted-foreground">
|
||
<AlertCircle className="h-8 w-8 mx-auto mb-2 text-yellow-500" />
|
||
<p>挖矿系统未初始化</p>
|
||
<p className="text-sm">请运行 seed 脚本初始化挖矿配置</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="space-y-1">
|
||
<p className="text-sm text-muted-foreground">当前时代</p>
|
||
<p className="text-lg font-semibold">第 {miningStatus.currentEra} 时代</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm text-muted-foreground">剩余分配量</p>
|
||
<p className="text-lg font-semibold">{formatNumber(miningStatus.remainingDistribution)}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm text-muted-foreground">每秒分配</p>
|
||
<p className="text-lg font-semibold">{formatNumber(miningStatus.secondDistribution)}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm text-muted-foreground">挖矿账户数</p>
|
||
<p className="text-lg font-semibold">{miningStatus.accountCount}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 算力同步状态提示 */}
|
||
{miningStatus.contributionSyncStatus && !miningStatus.contributionSyncStatus.isSynced && (
|
||
<div className="flex items-center gap-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||
<Loader2 className="h-4 w-4 animate-spin text-yellow-600" />
|
||
<div className="flex-1">
|
||
<p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">全网算力同步中...</p>
|
||
<p className="text-xs text-yellow-600 dark:text-yellow-400">
|
||
mining-service 全网理论算力: {formatNumber(miningStatus.contributionSyncStatus.miningNetworkTotal)} /
|
||
contribution-service 全网理论算力: {formatNumber(miningStatus.contributionSyncStatus.networkTotalContribution)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-end pt-4 border-t">
|
||
{miningStatus.isActive ? (
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => deactivateMining.mutate()}
|
||
disabled={deactivateMining.isPending}
|
||
>
|
||
<Pause className="h-4 w-4 mr-2" />
|
||
{deactivateMining.isPending ? '停用中...' : '停用挖矿'}
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
onClick={() => activateMining.mutate()}
|
||
disabled={activateMining.isPending || (miningStatus.contributionSyncStatus && !miningStatus.contributionSyncStatus.isSynced)}
|
||
>
|
||
{miningStatus.contributionSyncStatus && !miningStatus.contributionSyncStatus.isSynced ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||
全网算力同步中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Play className="h-4 w-4 mr-2" />
|
||
{activateMining.isPending ? '激活中...' : '激活挖矿'}
|
||
</>
|
||
)}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 池账户管理 — 动态渲染 */}
|
||
{poolAccountsLoading ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<Card><CardContent className="p-6"><Skeleton className="h-48 w-full" /></CardContent></Card>
|
||
<Card><CardContent className="p-6"><Skeleton className="h-48 w-full" /></CardContent></Card>
|
||
</div>
|
||
) : poolAccounts && poolAccounts.length > 0 ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{poolAccounts.map((pool) => (
|
||
<PoolAccountCard key={pool.walletName} pool={pool} />
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">划转开关</CardTitle>
|
||
<CardDescription>控制用户是否可以进行挖矿账户到交易账户的划转</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">允许用户划转</p>
|
||
<p className="text-sm text-muted-foreground">开启后用户可以将挖矿获得的积分股划转到交易账户</p>
|
||
</div>
|
||
{transferLoading ? (
|
||
<Skeleton className="h-6 w-11" />
|
||
) : (
|
||
<Switch
|
||
checked={transferEnabled}
|
||
onCheckedChange={handleTransferToggle}
|
||
disabled={setTransferEnabled.isPending}
|
||
/>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* P2P划转手续费设置 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">P2P划转手续费设置</CardTitle>
|
||
<CardDescription>配置用户间划转（P2P转账）的手续费和最小划转金额</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{feeLoading ? (
|
||
<Skeleton className="h-32 w-full" />
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label>划转手续费 (积分值)</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="0.01"
|
||
value={feeValue}
|
||
onChange={(e) => setFeeValue(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>最小划转金额 (积分值)</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="0.01"
|
||
value={minAmountValue}
|
||
onChange={(e) => setMinAmountValue(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{parseFloat(minAmountValue) <= parseFloat(feeValue) && feeValue !== '' && minAmountValue !== '' && (
|
||
<p className="text-sm text-red-500">最小划转金额必须大于手续费</p>
|
||
)}
|
||
<div className="flex justify-end">
|
||
<Button
|
||
onClick={() => setP2pTransferFee.mutate({ fee: feeValue, minTransferAmount: minAmountValue })}
|
||
disabled={
|
||
setP2pTransferFee.isPending ||
|
||
parseFloat(minAmountValue) <= parseFloat(feeValue) ||
|
||
isNaN(parseFloat(feeValue)) ||
|
||
isNaN(parseFloat(minAmountValue))
|
||
}
|
||
>
|
||
<Save className="h-4 w-4 mr-2" />
|
||
{setP2pTransferFee.isPending ? '保存中...' : '保存'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{isLoading ? (
|
||
<Card>
|
||
<CardContent className="p-6">
|
||
<Skeleton className="h-64 w-full" />
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
Object.entries(groupedConfigs || {}).map(([category, configs]) => (
|
||
<Card key={category}>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{categoryLabels[category] || category}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="p-0">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>配置项</TableHead>
|
||
<TableHead>描述</TableHead>
|
||
<TableHead>当前值</TableHead>
|
||
<TableHead className="w-[100px]">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{configs.map((config) => (
|
||
<TableRow key={config.configKey}>
|
||
<TableCell className="font-mono">{config.configKey}</TableCell>
|
||
<TableCell className="text-muted-foreground">{config.description}</TableCell>
|
||
<TableCell className="font-mono">{config.configValue}</TableCell>
|
||
<TableCell>
|
||
{config.isEditable && (
|
||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEdit(config)}>
|
||
<Pencil className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
</Card>
|
||
))
|
||
)}
|
||
|
||
<Dialog open={!!editingConfig} onOpenChange={() => setEditingConfig(null)}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>编辑配置</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label>配置项</Label>
|
||
<Input value={editingConfig?.configKey || ''} disabled />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>描述</Label>
|
||
<p className="text-sm text-muted-foreground">{editingConfig?.description}</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>配置值</Label>
|
||
<Input value={editValue} onChange={(e) => setEditValue(e.target.value)} />
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setEditingConfig(null)}>
|
||
<X className="h-4 w-4 mr-2" />
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSave} disabled={updateConfig.isPending}>
|
||
<Save className="h-4 w-4 mr-2" />
|
||
保存
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|