1392 lines
54 KiB
TypeScript
1392 lines
54 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
DialogDescription,
|
||
DialogFooter
|
||
} from '@/components/ui/dialog';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import { useTranslation } from '@/hooks/useTranslation';
|
||
import { Toast, ToastContainer } from "@/components/ui/toast";
|
||
import {
|
||
RelayStation,
|
||
CreateRelayStationRequest,
|
||
UpdateRelayStationRequest,
|
||
RelayStationAdapter,
|
||
AuthMethod,
|
||
PackycodeUserQuota,
|
||
api
|
||
} from '@/lib/api';
|
||
import {
|
||
Plus,
|
||
Edit,
|
||
Trash2,
|
||
Globe,
|
||
Server,
|
||
ArrowLeft,
|
||
Settings,
|
||
RefreshCw
|
||
} from 'lucide-react';
|
||
|
||
interface RelayStationManagerProps {
|
||
onBack: () => void;
|
||
}
|
||
|
||
const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) => {
|
||
const [stations, setStations] = useState<RelayStation[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [selectedStation, setSelectedStation] = useState<RelayStation | null>(null);
|
||
const [showCreateDialog, setShowCreateDialog] = useState(false);
|
||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||
const [stationToDelete, setStationToDelete] = useState<RelayStation | null>(null);
|
||
const [togglingEnable, setTogglingEnable] = useState<Record<string, boolean>>({});
|
||
const [currentConfig, setCurrentConfig] = useState<Record<string, string | null>>({});
|
||
const [loadingConfig, setLoadingConfig] = useState(false);
|
||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||
|
||
// PackyCode 额度相关状态
|
||
const [quotaData, setQuotaData] = useState<Record<string, PackycodeUserQuota>>({});
|
||
const [loadingQuota, setLoadingQuota] = useState<Record<string, boolean>>({});
|
||
|
||
const { t } = useTranslation();
|
||
|
||
// 显示Toast
|
||
const showToast = (message: string, type: "success" | "error" = "success") => {
|
||
setToast({ message, type });
|
||
};
|
||
|
||
// 加载中转站列表
|
||
const loadStations = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const stationList = await api.relayStationsList();
|
||
setStations(stationList);
|
||
} catch (error) {
|
||
console.error('Failed to load stations:', error);
|
||
showToast(t('relayStation.loadFailed'), "error");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 加载当前配置状态
|
||
const loadCurrentConfig = async () => {
|
||
try {
|
||
setLoadingConfig(true);
|
||
const config = await api.relayStationGetCurrentConfig();
|
||
setCurrentConfig(config);
|
||
} catch (error) {
|
||
console.error('Failed to load current config:', error);
|
||
} finally {
|
||
setLoadingConfig(false);
|
||
}
|
||
};
|
||
|
||
// 手动同步配置
|
||
const syncConfig = async () => {
|
||
try {
|
||
const result = await api.relayStationSyncConfig();
|
||
showToast(result, "success");
|
||
loadCurrentConfig();
|
||
} catch (error) {
|
||
console.error('Failed to sync config:', error);
|
||
showToast(t('relayStation.syncFailed'), "error");
|
||
}
|
||
};
|
||
|
||
|
||
// 查询 PackyCode 额度
|
||
const fetchPackycodeQuota = async (stationId: string) => {
|
||
try {
|
||
setLoadingQuota(prev => ({ ...prev, [stationId]: true }));
|
||
const quota = await api.getPackycodeUserQuota(stationId);
|
||
setQuotaData(prev => ({ ...prev, [stationId]: quota }));
|
||
} catch (error) {
|
||
console.error('Failed to fetch PackyCode quota:', error);
|
||
// 不显示错误 Toast，因为可能是出租车服务或 Token 无效
|
||
} finally {
|
||
setLoadingQuota(prev => ({ ...prev, [stationId]: false }));
|
||
}
|
||
};
|
||
|
||
// 删除中转站
|
||
const deleteStation = async () => {
|
||
if (!stationToDelete) return;
|
||
|
||
try {
|
||
await api.relayStationDelete(stationToDelete.id);
|
||
loadStations();
|
||
setShowDeleteDialog(false);
|
||
setStationToDelete(null);
|
||
showToast(t('relayStation.deleteSuccess'), "success");
|
||
} catch (error) {
|
||
console.error('Failed to delete station:', error);
|
||
showToast(t('relayStation.deleteFailed'), "error");
|
||
}
|
||
};
|
||
|
||
// 打开删除确认对话框
|
||
const openDeleteDialog = (station: RelayStation) => {
|
||
setStationToDelete(station);
|
||
setShowDeleteDialog(true);
|
||
};
|
||
|
||
// 获取适配器类型显示名称
|
||
const getAdapterDisplayName = (adapter: RelayStationAdapter): string => {
|
||
switch (adapter) {
|
||
case 'packycode': return 'PackyCode';
|
||
case 'newapi': return 'NewAPI';
|
||
case 'oneapi': return 'OneAPI';
|
||
case 'yourapi': return 'YourAPI';
|
||
case 'custom': return t('relayStation.custom');
|
||
default: return adapter;
|
||
}
|
||
};
|
||
|
||
// 切换启用状态
|
||
const toggleEnableStatus = async (stationId: string, currentEnabled: boolean) => {
|
||
try {
|
||
setTogglingEnable(prev => ({ ...prev, [stationId]: true }));
|
||
const newEnabled = !currentEnabled;
|
||
await api.relayStationToggleEnable(stationId, newEnabled);
|
||
showToast(newEnabled ? t('relayStation.enabledSuccess') : t('relayStation.disabledSuccess'), "success");
|
||
loadStations();
|
||
loadCurrentConfig(); // 重新加载配置状态
|
||
} catch (error) {
|
||
console.error('Failed to toggle enable status:', error);
|
||
showToast(t('relayStation.toggleEnableFailed'), "error");
|
||
} finally {
|
||
setTogglingEnable(prev => ({ ...prev, [stationId]: false }));
|
||
}
|
||
};
|
||
|
||
// 获取状态样式
|
||
const getStatusBadge = (station: RelayStation) => {
|
||
const enabled = station.enabled;
|
||
const isToggling = togglingEnable[station.id];
|
||
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<Switch
|
||
checked={enabled}
|
||
disabled={isToggling}
|
||
onCheckedChange={() => toggleEnableStatus(station.id, enabled)}
|
||
className="data-[state=checked]:bg-green-500"
|
||
/>
|
||
{isToggling ? (
|
||
<Badge variant="secondary" className="animate-pulse">{t('common.updating')}</Badge>
|
||
) : enabled ? (
|
||
<Badge variant="default" className="bg-green-500">{t('status.enabled')}</Badge>
|
||
) : (
|
||
<Badge variant="secondary">{t('status.disabled')}</Badge>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadStations();
|
||
loadCurrentConfig();
|
||
}, []);
|
||
|
||
// 当中转站加载完成后，自动获取所有 PackyCode 站点的额度
|
||
useEffect(() => {
|
||
stations.forEach(station => {
|
||
if (station.adapter === 'packycode') {
|
||
fetchPackycodeQuota(station.id);
|
||
}
|
||
});
|
||
}, [stations]);
|
||
|
||
return (
|
||
<div className="container mx-auto p-6 space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={onBack}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
{t('app.back')}
|
||
</Button>
|
||
<div>
|
||
<h1 className="text-3xl font-bold">{t('navigation.relayStations')}</h1>
|
||
<p className="text-muted-foreground">{t('relayStation.description')}</p>
|
||
</div>
|
||
</div>
|
||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||
<DialogTrigger asChild>
|
||
<Button>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{t('relayStation.create')}
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-[600px]">
|
||
<CreateStationDialog
|
||
onSuccess={() => {
|
||
setShowCreateDialog(false);
|
||
loadStations();
|
||
showToast(t('relayStation.createSuccess'), "success");
|
||
}}
|
||
/>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
|
||
{/* 当前配置状态 */}
|
||
<Card className="border-blue-200 dark:border-blue-900 bg-blue-50/50 dark:bg-blue-950/20">
|
||
<CardHeader className="pb-3">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-2">
|
||
<Settings className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||
<CardTitle className="text-lg">{t('relayStation.currentConfig')}</CardTitle>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
loadCurrentConfig();
|
||
syncConfig();
|
||
}}
|
||
disabled={loadingConfig}
|
||
>
|
||
{loadingConfig ? (
|
||
<div className="h-4 w-4 animate-spin rounded-full border-b-2 border-current" />
|
||
) : (
|
||
<RefreshCw className="h-4 w-4" />
|
||
)}
|
||
<span className="ml-2">{t('relayStation.syncConfig')}</span>
|
||
</Button>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-start gap-2">
|
||
<span className="font-medium text-muted-foreground min-w-[100px]">API URL:</span>
|
||
<span className="font-mono text-xs break-all">
|
||
{currentConfig.api_url || t('relayStation.notConfigured')}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<span className="font-medium text-muted-foreground min-w-[100px]">API Token:</span>
|
||
<span className="font-mono text-xs">
|
||
{currentConfig.api_token || t('relayStation.notConfigured')}
|
||
</span>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground mt-3">
|
||
{t('relayStation.configLocation')}: ~/.claude/settings.json
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 中转站列表 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{loading ? (
|
||
<div className="col-span-full text-center py-12">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
|
||
<p className="mt-2 text-muted-foreground">{t('common.loading')}</p>
|
||
</div>
|
||
) : stations.length === 0 ? (
|
||
<div className="col-span-full text-center py-12">
|
||
<Server className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
|
||
<h3 className="text-lg font-semibold mb-2">{t('relayStation.noStations')}</h3>
|
||
<p className="text-muted-foreground mb-4">{t('relayStation.noStationsDesc')}</p>
|
||
<Button onClick={() => setShowCreateDialog(true)}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{t('relayStation.createFirst')}
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
stations.map((station) => (
|
||
<Card key={station.id} className="relative">
|
||
<CardHeader className="pb-3">
|
||
<div className="flex justify-between items-start">
|
||
<div>
|
||
<CardTitle className="text-lg">{station.name}</CardTitle>
|
||
<CardDescription className="mt-1">
|
||
{getAdapterDisplayName(station.adapter)}
|
||
</CardDescription>
|
||
</div>
|
||
{getStatusBadge(station)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center text-sm text-muted-foreground">
|
||
<Globe className="mr-2 h-4 w-4" />
|
||
{station.api_url}
|
||
</div>
|
||
|
||
{station.description && (
|
||
<p className="text-sm text-muted-foreground">
|
||
{station.description}
|
||
</p>
|
||
)}
|
||
|
||
{/* PackyCode 额度显示 */}
|
||
{station.adapter === 'packycode' && (
|
||
<div className="mt-3 p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 dark:border-blue-900">
|
||
{loadingQuota[station.id] ? (
|
||
<div className="flex items-center justify-center py-2">
|
||
<div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
|
||
<span className="ml-2 text-sm text-muted-foreground">加载额度中...</span>
|
||
</div>
|
||
) : quotaData[station.id] ? (
|
||
<div className="space-y-3">
|
||
{/* 用户信息和计划 */}
|
||
<div className="flex items-center justify-between text-xs">
|
||
<div className="flex items-center gap-2">
|
||
{quotaData[station.id].username && (
|
||
<span className="text-muted-foreground">{quotaData[station.id].username}</span>
|
||
)}
|
||
<Badge variant="secondary" className="text-xs">
|
||
{quotaData[station.id].plan_type.toUpperCase()}
|
||
</Badge>
|
||
{quotaData[station.id].opus_enabled && (
|
||
<Badge variant="default" className="text-xs bg-purple-600">
|
||
Opus
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
{quotaData[station.id].plan_expires_at && (
|
||
<span className="text-muted-foreground">
|
||
到期: {new Date(quotaData[station.id].plan_expires_at).toLocaleDateString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* 账户余额 */}
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">账户余额:</span>
|
||
<span className="font-semibold text-blue-600">
|
||
${Number(quotaData[station.id].balance_usd).toFixed(2)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 日额度 */}
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">日额度:</span>
|
||
<div className="flex items-center gap-2">
|
||
{(() => {
|
||
const daily_spent = Number(quotaData[station.id].daily_spent_usd || 0);
|
||
const daily_budget = Number(quotaData[station.id].daily_budget_usd);
|
||
return (
|
||
<>
|
||
<span className={daily_spent > daily_budget * 0.8 ? 'text-orange-600' : 'text-green-600'}>
|
||
${daily_spent.toFixed(2)}
|
||
</span>
|
||
<span className="text-muted-foreground">/</span>
|
||
<span className="text-muted-foreground">${daily_budget.toFixed(2)}</span>
|
||
</>
|
||
);
|
||
})()}
|
||
</div>
|
||
</div>
|
||
<div className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||
<div
|
||
className={`h-full transition-all ${
|
||
(() => {
|
||
const daily_spent = Number(quotaData[station.id].daily_spent_usd || 0);
|
||
const daily_budget = Number(quotaData[station.id].daily_budget_usd);
|
||
return daily_spent / daily_budget > 0.8;
|
||
})() ? 'bg-orange-500' : 'bg-green-500'
|
||
}`}
|
||
style={{ width: `${Math.min(
|
||
(() => {
|
||
const daily_spent = Number(quotaData[station.id].daily_spent_usd || 0);
|
||
const daily_budget = Number(quotaData[station.id].daily_budget_usd);
|
||
return (daily_spent / daily_budget) * 100;
|
||
})(), 100)}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 月额度 */}
|
||
<div className="space-y-1">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">月额度:</span>
|
||
<div className="flex items-center gap-2">
|
||
{(() => {
|
||
const monthly_spent = Number(quotaData[station.id].monthly_spent_usd || 0);
|
||
const monthly_budget = Number(quotaData[station.id].monthly_budget_usd);
|
||
return (
|
||
<>
|
||
<span className={monthly_spent > monthly_budget * 0.8 ? 'text-orange-600' : 'text-green-600'}>
|
||
${monthly_spent.toFixed(2)}
|
||
</span>
|
||
<span className="text-muted-foreground">/</span>
|
||
<span className="text-muted-foreground">${monthly_budget.toFixed(2)}</span>
|
||
</>
|
||
);
|
||
})()}
|
||
</div>
|
||
</div>
|
||
<div className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||
<div
|
||
className={`h-full transition-all ${
|
||
(() => {
|
||
const monthly_spent = Number(quotaData[station.id].monthly_spent_usd || 0);
|
||
const monthly_budget = Number(quotaData[station.id].monthly_budget_usd);
|
||
return monthly_spent / monthly_budget > 0.8;
|
||
})() ? 'bg-orange-500' : 'bg-green-500'
|
||
}`}
|
||
style={{ width: `${Math.min(
|
||
(() => {
|
||
const monthly_spent = Number(quotaData[station.id].monthly_spent_usd || 0);
|
||
const monthly_budget = Number(quotaData[station.id].monthly_budget_usd);
|
||
return (monthly_spent / monthly_budget) * 100;
|
||
})(), 100)}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 总消费 */}
|
||
<div className="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t">
|
||
<span>总消费: ${Number(quotaData[station.id].total_spent_usd).toFixed(2)}</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-5 px-2 text-xs"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
fetchPackycodeQuota(station.id);
|
||
}}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
fetchPackycodeQuota(station.id);
|
||
}}
|
||
>
|
||
查询额度
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-end">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedStation(station);
|
||
setShowEditDialog(true);
|
||
}}
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
openDeleteDialog(station);
|
||
}}
|
||
className="text-red-500 hover:text-red-700"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* 编辑对话框 */}
|
||
{selectedStation && (
|
||
<Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
|
||
<DialogContent className="sm:max-w-[600px]">
|
||
<EditStationDialog
|
||
station={selectedStation}
|
||
onSuccess={() => {
|
||
setShowEditDialog(false);
|
||
setSelectedStation(null);
|
||
loadStations();
|
||
showToast(t('relayStation.updateSuccess'), "success");
|
||
}}
|
||
onCancel={() => {
|
||
setShowEditDialog(false);
|
||
setSelectedStation(null);
|
||
}}
|
||
/>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)}
|
||
|
||
{/* 删除确认对话框 */}
|
||
<Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle>{t('relayStation.confirmDeleteTitle')}</DialogTitle>
|
||
<DialogDescription>
|
||
{t('relayStation.deleteConfirm')}
|
||
{stationToDelete && (
|
||
<div className="mt-2 p-2 bg-muted rounded">
|
||
<strong>{stationToDelete.name}</strong>
|
||
</div>
|
||
)}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowDeleteDialog(false);
|
||
setStationToDelete(null);
|
||
}}
|
||
>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={deleteStation}
|
||
>
|
||
{t('common.delete')}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Toast 容器 */}
|
||
{toast && (
|
||
<ToastContainer>
|
||
<Toast
|
||
message={toast.message}
|
||
type={toast.type}
|
||
duration={3000}
|
||
onDismiss={() => setToast(null)}
|
||
/>
|
||
</ToastContainer>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 创建中转站对话框组件
|
||
const CreateStationDialog: React.FC<{
|
||
onSuccess: () => void;
|
||
}> = ({ onSuccess }) => {
|
||
const [formData, setFormData] = useState<CreateRelayStationRequest>({
|
||
name: '',
|
||
description: '',
|
||
api_url: '',
|
||
adapter: 'packycode', // 默认使用 PackyCode
|
||
auth_method: 'api_key', // PackyCode 默认使用 API Key
|
||
system_token: '',
|
||
user_id: '',
|
||
enabled: false, // 默认不启用，需要通过主界面切换
|
||
});
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [formToast, setFormToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||
const [packycodeService, setPackycodeService] = useState<string>('bus'); // 默认公交车
|
||
const [packycodeNode, setPackycodeNode] = useState<string>('https://api.packycode.com'); // 默认节点（公交车用）
|
||
|
||
const { t } = useTranslation();
|
||
|
||
// 当适配器改变时更新认证方式和 URL
|
||
useEffect(() => {
|
||
if (formData.adapter === 'packycode') {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'api_key', // PackyCode 固定使用 API Key
|
||
api_url: packycodeService === 'taxi'
|
||
? 'https://share-api.packycode.com'
|
||
: packycodeNode
|
||
}));
|
||
} else if (formData.adapter === 'custom') {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'custom'
|
||
}));
|
||
} else {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'bearer_token'
|
||
}));
|
||
}
|
||
}, [formData.adapter, packycodeService, packycodeNode]);
|
||
|
||
// 自动填充中转站名称
|
||
const fillStationName = (serviceType: string) => {
|
||
const serviceName = serviceType === 'taxi' ? t('relayStation.taxiService') : t('relayStation.busService');
|
||
const newName = `PackyCode ${serviceName}`;
|
||
|
||
// 如果名称为空，或者当前名称是之前自动生成的PackyCode名称，则更新
|
||
if (!formData.name.trim() ||
|
||
formData.name.startsWith('PackyCode ') ||
|
||
formData.name === `PackyCode ${t('relayStation.taxiService')}` ||
|
||
formData.name === `PackyCode ${t('relayStation.busService')}`) {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
name: newName
|
||
}));
|
||
}
|
||
};
|
||
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!formData.name.trim()) {
|
||
setFormToast({ message: t('relayStation.nameRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
if (!formData.api_url.trim()) {
|
||
setFormToast({ message: t('relayStation.apiUrlRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
if (!formData.system_token.trim()) {
|
||
setFormToast({ message: t('relayStation.tokenRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
await api.relayStationCreate(formData);
|
||
onSuccess();
|
||
} catch (error) {
|
||
console.error('Failed to create station:', error);
|
||
setFormToast({ message: t('relayStation.createFailed'), type: "error" });
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle>{t('relayStation.createTitle')}</DialogTitle>
|
||
</DialogHeader>
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">{t('relayStation.name')} *</Label>
|
||
<Input
|
||
id="name"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
|
||
placeholder={t('relayStation.namePlaceholder')}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="adapter">{t('relayStation.adapterType')}</Label>
|
||
<Select
|
||
value={formData.adapter}
|
||
onValueChange={(value: RelayStationAdapter) =>
|
||
setFormData(prev => ({ ...prev, adapter: value }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="packycode">PackyCode</SelectItem>
|
||
<SelectItem value="newapi">NewAPI</SelectItem>
|
||
<SelectItem value="oneapi">OneAPI</SelectItem>
|
||
<SelectItem value="yourapi">YourAPI</SelectItem>
|
||
<SelectItem value="custom">{t('relayStation.custom')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{formData.adapter === 'packycode' && (
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label className="text-base font-medium">{t('relayStation.serviceType')}</Label>
|
||
<div className="mt-2 grid grid-cols-2 gap-3">
|
||
<Button
|
||
type="button"
|
||
variant={packycodeService === 'taxi' ? 'default' : 'outline'}
|
||
className={`p-4 h-auto flex flex-col items-center space-y-2 transition-all ${
|
||
packycodeService === 'taxi'
|
||
? 'bg-blue-600 hover:bg-blue-700 text-white'
|
||
: 'hover:bg-blue-50 dark:hover:bg-blue-950'
|
||
}`}
|
||
onClick={() => {
|
||
setPackycodeService('taxi');
|
||
fillStationName('taxi');
|
||
}}
|
||
>
|
||
<div className="text-2xl">🚗</div>
|
||
<div className="text-center">
|
||
<div className="font-semibold">{t('relayStation.taxiService')}</div>
|
||
<div className="text-xs opacity-80 mt-1">{t('relayStation.taxiServiceDesc')}</div>
|
||
</div>
|
||
</Button>
|
||
|
||
<Button
|
||
type="button"
|
||
variant={packycodeService === 'bus' ? 'default' : 'outline'}
|
||
className={`p-4 h-auto flex flex-col items-center space-y-2 transition-all ${
|
||
packycodeService === 'bus'
|
||
? 'bg-green-600 hover:bg-green-700 text-white'
|
||
: 'hover:bg-green-50 dark:hover:bg-green-950'
|
||
}`}
|
||
onClick={() => {
|
||
setPackycodeService('bus');
|
||
fillStationName('bus');
|
||
}}
|
||
>
|
||
<div className="text-2xl">🚌</div>
|
||
<div className="text-center">
|
||
<div className="font-semibold">{t('relayStation.busService')}</div>
|
||
<div className="text-xs opacity-80 mt-1">{t('relayStation.busServiceDesc')}</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground mt-3">
|
||
{packycodeService === 'taxi'
|
||
? `${t('relayStation.fixedUrl')}: https://share-api.packycode.com`
|
||
: t('relayStation.busServiceNote')
|
||
}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{formData.adapter === 'packycode' && packycodeService === 'bus' && (
|
||
<div className="space-y-2">
|
||
<Label>{t('relayStation.nodeSelection')}</Label>
|
||
<div className="space-y-2">
|
||
<div className="flex gap-2">
|
||
<div className="flex-1">
|
||
<Select
|
||
value={packycodeNode}
|
||
onValueChange={(value: string) => setPackycodeNode(value)}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t('relayStation.selectNode')} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="https://api.packycode.com">
|
||
🚌 直连1（默认公交车）
|
||
</SelectItem>
|
||
<SelectItem value="https://api-hk-cn2.packycode.com">
|
||
🇭🇰 直连2 (HK-CN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-cmin2.packycode.com">
|
||
🇺🇸 直连3 (US-CMIN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-4837.packycode.com">
|
||
🇺🇸 直连4 (US-4837)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-cn2.packycode.com">
|
||
🔄 备用1 (US-CN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-cf-pro.packycode.com">
|
||
☁️ 备用2 (CF-Pro)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-test.packyme.com" disabled>
|
||
⚠️ 测试1（非紧急勿用）
|
||
</SelectItem>
|
||
<SelectItem value="https://api-test-custom.packycode.com" disabled>
|
||
⚠️ 测试2（非紧急勿用）
|
||
</SelectItem>
|
||
<SelectItem value="https://api-tmp-test.dzz.ai" disabled>
|
||
⚠️ 测试3（非紧急勿用）
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={async () => {
|
||
setFormToast({ message: "正在测速，请稍候...", type: "success" });
|
||
try {
|
||
const best = await api.autoSelectBestNode();
|
||
setPackycodeNode(best.url);
|
||
setFormData(prev => ({ ...prev, api_url: best.url }));
|
||
setFormToast({
|
||
message: `已选择最快节点: ${best.name} (延迟: ${best.response_time}ms)`,
|
||
type: "success"
|
||
});
|
||
} catch (error) {
|
||
setFormToast({ message: "节点测速失败", type: "error" });
|
||
}
|
||
}}
|
||
>
|
||
自动选择
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.selectedNode') + ': ' + packycodeNode}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="description">{t('relayStation.description')}</Label>
|
||
<Textarea
|
||
id="description"
|
||
value={formData.description}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||
placeholder={t('relayStation.descriptionPlaceholder')}
|
||
rows={2}
|
||
className="w-full resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{formData.adapter !== 'packycode' && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="api_url">{t('relayStation.apiUrl')} *</Label>
|
||
<Input
|
||
id="api_url"
|
||
type="url"
|
||
value={formData.api_url}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, api_url: e.target.value }))}
|
||
placeholder="https://api.example.com"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 gap-6">
|
||
{formData.adapter === 'packycode' ? (
|
||
// PackyCode 固定使用 API Key，不显示选择器
|
||
<div className="space-y-2">
|
||
<Label htmlFor="system_token">{t('relayStation.systemToken')} *</Label>
|
||
<Input
|
||
id="system_token"
|
||
type="password"
|
||
value={formData.system_token}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, system_token: e.target.value }))}
|
||
placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||
className="w-full font-mono text-sm"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.packycodeTokenNote')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
// 其他适配器显示认证方式选择
|
||
<>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="auth_method">{t('relayStation.authMethod')}</Label>
|
||
<Select
|
||
value={formData.auth_method}
|
||
onValueChange={(value: AuthMethod) =>
|
||
setFormData(prev => ({ ...prev, auth_method: value }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="bearer_token">Bearer Token</SelectItem>
|
||
<SelectItem value="api_key">API Key</SelectItem>
|
||
<SelectItem value="custom">{t('relayStation.custom')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="system_token">{t('relayStation.systemToken')} *</Label>
|
||
<Input
|
||
id="system_token"
|
||
type="password"
|
||
value={formData.system_token}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, system_token: e.target.value }))}
|
||
placeholder={t('relayStation.tokenPlaceholder')}
|
||
className="w-full font-mono text-sm"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{(formData.adapter === 'newapi' || formData.adapter === 'oneapi') && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="user_id">{t('relayStation.userId')}</Label>
|
||
<Input
|
||
id="user_id"
|
||
value={formData.user_id}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, user_id: e.target.value }))}
|
||
placeholder={t('relayStation.userIdPlaceholder')}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<Switch
|
||
id="enabled"
|
||
checked={formData.enabled}
|
||
onCheckedChange={(checked) =>
|
||
setFormData(prev => ({ ...prev, enabled: checked }))
|
||
}
|
||
/>
|
||
<div>
|
||
<Label htmlFor="enabled" className="text-base font-medium cursor-pointer">
|
||
{t('relayStation.enabled')}
|
||
</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.enabledNote')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<Button type="button" variant="outline" onClick={() => {}}>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
disabled={submitting}
|
||
className="min-w-[120px]"
|
||
>
|
||
{submitting && <div className="mr-2 h-4 w-4 animate-spin rounded-full border-b-2 border-white"></div>}
|
||
{t('common.create')}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
|
||
{/* Form Toast */}
|
||
{formToast && (
|
||
<Toast
|
||
message={formToast.message}
|
||
type={formToast.type}
|
||
duration={3000}
|
||
onDismiss={() => setFormToast(null)}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
// 编辑中转站对话框组件
|
||
const EditStationDialog: React.FC<{
|
||
station: RelayStation;
|
||
onSuccess: () => void;
|
||
onCancel: () => void;
|
||
}> = ({ station, onSuccess, onCancel }) => {
|
||
const [formData, setFormData] = useState<UpdateRelayStationRequest>({
|
||
id: station.id,
|
||
name: station.name,
|
||
description: station.description || '',
|
||
api_url: station.api_url,
|
||
adapter: station.adapter,
|
||
auth_method: station.auth_method,
|
||
system_token: station.system_token,
|
||
user_id: station.user_id || '',
|
||
enabled: station.enabled,
|
||
});
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [formToast, setFormToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||
|
||
// PackyCode 特定状态
|
||
const [packycodeService, setPackycodeService] = useState<string>(() => {
|
||
// 从API URL判断服务类型
|
||
if (station.adapter === 'packycode' && station.api_url.includes('share-api')) {
|
||
return 'taxi';
|
||
}
|
||
return 'bus';
|
||
});
|
||
const [packycodeNode, setPackycodeNode] = useState<string>(() => {
|
||
// 如果是PackyCode，使用当前的API URL
|
||
if (station.adapter === 'packycode') {
|
||
return station.api_url;
|
||
}
|
||
return 'https://api.packycode.com';
|
||
});
|
||
|
||
const { t } = useTranslation();
|
||
|
||
// 当适配器改变时更新认证方式和 URL
|
||
useEffect(() => {
|
||
if (formData.adapter === 'packycode') {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'api_key', // PackyCode 固定使用 API Key
|
||
api_url: packycodeService === 'taxi'
|
||
? 'https://share-api.packycode.com'
|
||
: packycodeNode
|
||
}));
|
||
} else if (formData.adapter === 'custom') {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'custom'
|
||
}));
|
||
} else {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
auth_method: 'bearer_token'
|
||
}));
|
||
}
|
||
}, [formData.adapter, packycodeService, packycodeNode]);
|
||
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!formData.name.trim()) {
|
||
setFormToast({ message: t('relayStation.nameRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
if (!formData.api_url.trim()) {
|
||
setFormToast({ message: t('relayStation.apiUrlRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
if (!formData.system_token.trim()) {
|
||
setFormToast({ message: t('relayStation.tokenRequired'), type: "error" });
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
await api.relayStationUpdate(formData);
|
||
onSuccess();
|
||
} catch (error) {
|
||
console.error('Failed to update station:', error);
|
||
setFormToast({ message: t('relayStation.updateFailed'), type: "error" });
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle>{t('relayStation.editTitle')}</DialogTitle>
|
||
</DialogHeader>
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-name">{t('relayStation.name')} *</Label>
|
||
<Input
|
||
id="edit-name"
|
||
value={formData.name}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
|
||
placeholder={t('relayStation.namePlaceholder')}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-adapter">{t('relayStation.adapterType')}</Label>
|
||
<Select
|
||
value={formData.adapter}
|
||
onValueChange={(value: RelayStationAdapter) =>
|
||
setFormData(prev => ({ ...prev, adapter: value }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="packycode">PackyCode</SelectItem>
|
||
<SelectItem value="newapi">NewAPI</SelectItem>
|
||
<SelectItem value="oneapi">OneAPI</SelectItem>
|
||
<SelectItem value="yourapi">YourAPI</SelectItem>
|
||
<SelectItem value="custom">{t('relayStation.custom')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{formData.adapter === 'packycode' && (
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label className="text-base font-medium">{t('relayStation.serviceType')}</Label>
|
||
<div className="mt-2 grid grid-cols-2 gap-3">
|
||
<Button
|
||
type="button"
|
||
variant={packycodeService === 'taxi' ? 'default' : 'outline'}
|
||
className={`p-4 h-auto flex flex-col items-center space-y-2 transition-all ${
|
||
packycodeService === 'taxi'
|
||
? 'bg-blue-600 hover:bg-blue-700 text-white'
|
||
: 'hover:bg-blue-50 dark:hover:bg-blue-950'
|
||
}`}
|
||
onClick={() => {
|
||
setPackycodeService('taxi');
|
||
setFormData(prev => ({
|
||
...prev,
|
||
api_url: 'https://share-api.packycode.com'
|
||
}));
|
||
}}
|
||
>
|
||
<div className="text-2xl">🚗</div>
|
||
<div className="text-center">
|
||
<div className="font-semibold">{t('relayStation.taxiService')}</div>
|
||
<div className="text-xs opacity-80 mt-1">{t('relayStation.taxiServiceDesc')}</div>
|
||
</div>
|
||
</Button>
|
||
|
||
<Button
|
||
type="button"
|
||
variant={packycodeService === 'bus' ? 'default' : 'outline'}
|
||
className={`p-4 h-auto flex flex-col items-center space-y-2 transition-all ${
|
||
packycodeService === 'bus'
|
||
? 'bg-green-600 hover:bg-green-700 text-white'
|
||
: 'hover:bg-green-50 dark:hover:bg-green-950'
|
||
}`}
|
||
onClick={() => {
|
||
setPackycodeService('bus');
|
||
}}
|
||
>
|
||
<div className="text-2xl">🚌</div>
|
||
<div className="text-center">
|
||
<div className="font-semibold">{t('relayStation.busService')}</div>
|
||
<div className="text-xs opacity-80 mt-1">{t('relayStation.busServiceDesc')}</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground mt-3">
|
||
{packycodeService === 'taxi'
|
||
? `${t('relayStation.fixedUrl')}: https://share-api.packycode.com`
|
||
: t('relayStation.busServiceNote')
|
||
}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{formData.adapter === 'packycode' && packycodeService === 'bus' && (
|
||
<div className="space-y-2">
|
||
<Label>{t('relayStation.nodeSelection')}</Label>
|
||
<div className="space-y-2">
|
||
<div className="flex gap-2">
|
||
<div className="flex-1">
|
||
<Select
|
||
value={packycodeNode}
|
||
onValueChange={(value: string) => {
|
||
setPackycodeNode(value);
|
||
setFormData(prev => ({ ...prev, api_url: value }));
|
||
}}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t('relayStation.selectNode')} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="https://api.packycode.com">
|
||
🚌 直连1（默认公交车）
|
||
</SelectItem>
|
||
<SelectItem value="https://api-hk-cn2.packycode.com">
|
||
🇭🇰 直连2 (HK-CN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-cmin2.packycode.com">
|
||
🇺🇸 直连3 (US-CMIN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-4837.packycode.com">
|
||
🇺🇸 直连4 (US-4837)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-us-cn2.packycode.com">
|
||
🔄 备用1 (US-CN2)
|
||
</SelectItem>
|
||
<SelectItem value="https://api-cf-pro.packycode.com">
|
||
☁️ 备用2 (CF-Pro)
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={async () => {
|
||
setFormToast({ message: "正在测速，请稍候...", type: "success" });
|
||
try {
|
||
const best = await api.autoSelectBestNode();
|
||
setPackycodeNode(best.url);
|
||
setFormData(prev => ({ ...prev, api_url: best.url }));
|
||
setFormToast({
|
||
message: `已选择最快节点: ${best.name} (延迟: ${best.response_time}ms)`,
|
||
type: "success"
|
||
});
|
||
} catch (error) {
|
||
setFormToast({ message: "节点测速失败", type: "error" });
|
||
}
|
||
}}
|
||
>
|
||
自动选择
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.selectedNode') + ': ' + packycodeNode}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-description">{t('relayStation.description')}</Label>
|
||
<Textarea
|
||
id="edit-description"
|
||
value={formData.description}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||
placeholder={t('relayStation.descriptionPlaceholder')}
|
||
rows={2}
|
||
className="w-full resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{formData.adapter !== 'packycode' && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-api_url">{t('relayStation.apiUrl')} *</Label>
|
||
<Input
|
||
id="edit-api_url"
|
||
type="url"
|
||
value={formData.api_url}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, api_url: e.target.value }))}
|
||
placeholder="https://api.example.com"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 gap-6">
|
||
{formData.adapter === 'packycode' ? (
|
||
// PackyCode 固定使用 API Key，不显示选择器
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-system_token">{t('relayStation.systemToken')} *</Label>
|
||
<Input
|
||
id="edit-system_token"
|
||
type="password"
|
||
value={formData.system_token}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, system_token: e.target.value }))}
|
||
placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||
className="w-full font-mono text-sm"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.packycodeTokenNote')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
// 其他适配器显示认证方式选择
|
||
<>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-auth_method">{t('relayStation.authMethod')}</Label>
|
||
<Select
|
||
value={formData.auth_method}
|
||
onValueChange={(value: AuthMethod) =>
|
||
setFormData(prev => ({ ...prev, auth_method: value }))
|
||
}
|
||
>
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="bearer_token">Bearer Token</SelectItem>
|
||
<SelectItem value="api_key">API Key</SelectItem>
|
||
<SelectItem value="custom">{t('relayStation.custom')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-system_token">{t('relayStation.systemToken')} *</Label>
|
||
<Input
|
||
id="edit-system_token"
|
||
type="password"
|
||
value={formData.system_token}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, system_token: e.target.value }))}
|
||
placeholder={t('relayStation.tokenPlaceholder')}
|
||
className="w-full font-mono text-sm"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{(formData.adapter === 'newapi' || formData.adapter === 'oneapi') && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-user_id">{t('relayStation.userId')}</Label>
|
||
<Input
|
||
id="edit-user_id"
|
||
value={formData.user_id}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, user_id: e.target.value }))}
|
||
placeholder={t('relayStation.userIdPlaceholder')}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<Switch
|
||
id="edit-enabled"
|
||
checked={formData.enabled}
|
||
onCheckedChange={(checked) =>
|
||
setFormData(prev => ({ ...prev, enabled: checked }))
|
||
}
|
||
/>
|
||
<div>
|
||
<Label htmlFor="edit-enabled" className="text-base font-medium cursor-pointer">
|
||
{t('relayStation.enabled')}
|
||
</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('relayStation.enabledNote')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
<Button type="button" variant="outline" onClick={onCancel}>
|
||
{t('common.cancel')}
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
disabled={submitting}
|
||
className="min-w-[120px]"
|
||
>
|
||
{submitting && <div className="mr-2 h-4 w-4 animate-spin rounded-full border-b-2 border-white"></div>}
|
||
{t('common.save')}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
|
||
{/* Form Toast */}
|
||
{formToast && (
|
||
<Toast
|
||
message={formToast.message}
|
||
type={formToast.type}
|
||
duration={3000}
|
||
onDismiss={() => setFormToast(null)}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default RelayStationManager;
|