yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抽离公共模块
Some checks failed
Build Linux / Build Linux x86_64 (push) Has been cancelled
Details
Build Test / Build Test (Linux) (push) Has been cancelled
Details
Build Test / Build Test (Windows) (push) Has been cancelled
Details
Build Test / Build Test (macOS) (push) Has been cancelled
Details
Build Test / Build Test Summary (push) Has been cancelled
Details

Browse Source
This commit is contained in:
YoVinchen
2025-10-27 01:19:14 +08:00
parent 11aac96b53
commit bdf2e499bc
14 changed files with 1188 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/NodeManager/index.tsx
View File

@@ -48,7 +48,7 @@ export const NodeSelector: React.FC<NodeSelectorProps> = ({
value = '',
onChange,
allowManualInput = true,
showToast = (msg, _type) => alert(msg), // 默认使用 alert
showToast = (msg, _type) => console.log(msg), // 默认使用 console.log
}) => {
const [showDialog, setShowDialog] = useState(false);
const [nodes, setNodes] = useState<ApiNode[]>([]);
@@ -191,7 +191,7 @@ const NodeManagerDialog: React.FC<NodeManagerDialogProps> = ({
adapter: filterAdapter,
onSelectNode,
currentUrl,
showToast = (msg) => alert(msg),
showToast = (msg) => console.log(msg),
}) => {
const [nodes, setNodes] = useState<ApiNode[]>([]);
const [loading, setLoading] = useState(false);
@@ -267,12 +267,17 @@ const NodeManagerDialog: React.FC<NodeManagerDialogProps> = ({
};
const handleDelete = async (node: ApiNode) => {
if (!confirm(`确定要删除节点 "${node.name}" 吗？`)) return;
try {
await api.deleteApiNode(node.id);
// 直接从列表中移除，不重新加载
setNodes(prev => prev.filter(n => n.id !== node.id));
// 同时移除测试结果
setTestResults(prev => {
const newResults = { ...prev };
delete newResults[node.id];
return newResults;
});
showToast('删除成功', 'success');
loadNodes();
} catch (error) {
showToast('删除失败', 'error');
console.error(error);
@@ -492,7 +497,7 @@ const NodeFormDialog: React.FC<NodeFormDialogProps> = ({
node,
defaultAdapter,
onSuccess,
showToast = (msg) => alert(msg),
showToast = (msg) => console.log(msg),
}) => {
const [submitting, setSubmitting] = useState(false);
const [formData, setFormData] = useState<CreateApiNodeRequest>({

30
src/components/RelayStationManager.tsx
View File

@@ -29,7 +29,6 @@ import {
UpdateRelayStationRequest,
RelayStationAdapter,
AuthMethod,
PackycodeUserQuota,
ImportResult,
api
} from '@/lib/api';
@@ -110,10 +109,6 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
const [importProgress, setImportProgress] = useState(0);
const [importResult, setImportResult] = useState<ImportResult | null>(null);
// PackyCode 额度相关状态
const [quotaData, setQuotaData] = useState<Record<string, PackycodeUserQuota>>({});
const [loadingQuota, setLoadingQuota] = useState<Record<string, boolean>>({});
// 拖拽状态
const [activeStation, setActiveStation] = useState<RelayStation | null>(null);
@@ -339,20 +334,6 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
};
// 查询 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 handleExportStations = async () => {
try {
@@ -544,15 +525,6 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
loadCurrentConfig();
}, []);
// 当中转站加载完成后，自动获取所有 PackyCode 站点的额度
useEffect(() => {
stations.forEach(station => {
if (station.adapter === 'packycode') {
fetchPackycodeQuota(station.id);
}
});
}, [stations]);
return (
<div className="h-full flex flex-col overflow-hidden">
<div className="flex-1 overflow-y-auto min-h-0">
@@ -923,8 +895,6 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
setSelectedStation={handleSelectStation}
setShowEditDialog={setShowEditDialog}
openDeleteDialog={openDeleteDialog}
quotaData={quotaData}
loadingQuota={loadingQuota}
/>)
)}
</div>

134
src/components/SortableStationItem.tsx
View File

@@ -3,7 +3,6 @@ import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
Edit,
Trash2,
@@ -15,7 +14,6 @@ import {
import {
RelayStation,
RelayStationAdapter,
PackycodeUserQuota,
} from '@/lib/api';
interface SortableStationItemProps {
@@ -25,8 +23,6 @@ interface SortableStationItemProps {
setSelectedStation: (station: RelayStation) => void;
setShowEditDialog: (show: boolean) => void;
openDeleteDialog: (station: RelayStation) => void;
quotaData: Record<string, PackycodeUserQuota>;
loadingQuota: Record<string, boolean>;
}
/**
@@ -40,8 +36,6 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
setSelectedStation,
setShowEditDialog,
openDeleteDialog,
quotaData,
loadingQuota,
}) => {
const {
attributes,
@@ -71,7 +65,7 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
};
// 是否有详情内容需要显示
const hasDetails = station.description || station.adapter === 'packycode';
const hasDetails = station.description;
return (
<Card
@@ -162,132 +156,6 @@ export const SortableStationItem: React.FC<SortableStationItemProps> = ({
{station.description}
</p>
)}
{/* PackyCode 额度显示 */}
{station.adapter === 'packycode' && (
<div className="mt-2 p-2 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-1">
<div className="h-3 w-3 animate-spin rounded-full border-b-2 border-blue-600"></div>
<span className="ml-2 text-xs text-muted-foreground">加载中...</span>
</div>
) : quotaData[station.id] ? (
<div className="space-y-2">
{/* 用户信息和计划 */}
<div className="flex items-center justify-between text-xs">
<div className="flex items-center gap-1.5">
{quotaData[station.id].username && (
<span className="text-muted-foreground">{quotaData[station.id].username}</span>
)}
<Badge variant="secondary" className="text-xs h-5 px-1.5">
{quotaData[station.id].plan_type.toUpperCase()}
</Badge>
{quotaData[station.id].opus_enabled && (
<Badge variant="default" className="text-xs h-5 px-1.5 bg-purple-600">
Opus
</Badge>
)}
</div>
</div>
{/* 账户余额 */}
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">余额:</span>
<span className="font-medium text-blue-600">
${Number(quotaData[station.id].balance_usd).toFixed(2)}
</span>
</div>
{/* 日额度 */}
<div className="space-y-0.5">
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">日额度:</span>
<div className="flex items-center gap-1">
{(() => {
const daily_spent = Number(quotaData[station.id].daily_spent_usd);
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">/ ${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);
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);
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);
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);
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);
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>总消费:</span>
<span className="font-medium">${Number(quotaData[station.id].total_spent_usd).toFixed(2)}</span>
</div>
</div>
) : (
<div className="text-xs text-center text-muted-foreground py-2">
额度信息加载失败
</div>
)}
</div>
)}
</>
)}
</div>