463 lines
15 KiB
TypeScript
463 lines
15 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { motion } from "framer-motion";
|
||
import { ArrowLeft, Play, Square, RotateCcw, ExternalLink, Download, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Toast, ToastContainer } from "@/components/ui/toast";
|
||
import { ccrApi, type CcrServiceStatus } from "@/lib/api";
|
||
import { open } from '@tauri-apps/plugin-shell';
|
||
|
||
interface CcrRouterManagerProps {
|
||
onBack: () => void;
|
||
}
|
||
|
||
export function CcrRouterManager({ onBack }: CcrRouterManagerProps) {
|
||
const [serviceStatus, setServiceStatus] = useState<CcrServiceStatus | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [actionLoading, setActionLoading] = useState(false);
|
||
const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
|
||
const [configPath, setConfigPath] = useState<string>("");
|
||
|
||
useEffect(() => {
|
||
loadServiceStatus();
|
||
loadConfigPath();
|
||
}, []);
|
||
|
||
const loadServiceStatus = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const status = await ccrApi.getServiceStatus();
|
||
setServiceStatus(status);
|
||
} catch (error) {
|
||
console.error("Failed to load CCR service status:", error);
|
||
setToast({
|
||
message: `加载CCR服务状态失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadConfigPath = async () => {
|
||
try {
|
||
const path = await ccrApi.getConfigPath();
|
||
setConfigPath(path);
|
||
} catch (error) {
|
||
console.error("Failed to get config path:", error);
|
||
}
|
||
};
|
||
|
||
const handleStartService = async () => {
|
||
try {
|
||
setActionLoading(true);
|
||
const result = await ccrApi.startService();
|
||
setServiceStatus(result.status);
|
||
setToast({
|
||
message: result.message,
|
||
type: "success"
|
||
});
|
||
} catch (error) {
|
||
console.error("Failed to start CCR service:", error);
|
||
setToast({
|
||
message: `启动CCR服务失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleStopService = async () => {
|
||
try {
|
||
setActionLoading(true);
|
||
const result = await ccrApi.stopService();
|
||
setServiceStatus(result.status);
|
||
setToast({
|
||
message: result.message,
|
||
type: "success"
|
||
});
|
||
} catch (error) {
|
||
console.error("Failed to stop CCR service:", error);
|
||
setToast({
|
||
message: `停止CCR服务失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleRestartService = async () => {
|
||
try {
|
||
setActionLoading(true);
|
||
const result = await ccrApi.restartService();
|
||
setServiceStatus(result.status);
|
||
setToast({
|
||
message: result.message,
|
||
type: "success"
|
||
});
|
||
} catch (error) {
|
||
console.error("Failed to restart CCR service:", error);
|
||
setToast({
|
||
message: `重启CCR服务失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleOpenUI = async () => {
|
||
try {
|
||
setActionLoading(true);
|
||
|
||
// 如果服务未运行，先尝试启动
|
||
if (!serviceStatus?.is_running) {
|
||
setToast({
|
||
message: "检测到服务未运行，正在启动...",
|
||
type: "info"
|
||
});
|
||
const startResult = await ccrApi.startService();
|
||
setServiceStatus(startResult.status);
|
||
|
||
if (!startResult.status.is_running) {
|
||
throw new Error("服务启动失败");
|
||
}
|
||
|
||
// 等待服务完全启动
|
||
await new Promise(resolve => setTimeout(resolve, 3000));
|
||
}
|
||
|
||
await ccrApi.openUI();
|
||
setToast({
|
||
message: "正在打开CCR UI...",
|
||
type: "info"
|
||
});
|
||
|
||
// 刷新服务状态
|
||
setTimeout(() => {
|
||
loadServiceStatus();
|
||
}, 2000);
|
||
} catch (error) {
|
||
console.error("Failed to open CCR UI:", error);
|
||
setToast({
|
||
message: `打开CCR UI失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleOpenInBrowser = async () => {
|
||
try {
|
||
// 如果服务未运行，先尝试启动
|
||
if (!serviceStatus?.is_running) {
|
||
setActionLoading(true);
|
||
setToast({
|
||
message: "检测到服务未运行，正在启动...",
|
||
type: "info"
|
||
});
|
||
|
||
const startResult = await ccrApi.startService();
|
||
setServiceStatus(startResult.status);
|
||
|
||
if (!startResult.status.is_running) {
|
||
throw new Error("服务启动失败");
|
||
}
|
||
|
||
// 等待服务完全启动
|
||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
setActionLoading(false);
|
||
}
|
||
|
||
if (serviceStatus?.endpoint) {
|
||
open(`${serviceStatus.endpoint}/ui/`);
|
||
setToast({
|
||
message: "正在打开CCR管理界面...",
|
||
type: "info"
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to open CCR UI in browser:", error);
|
||
setToast({
|
||
message: `打开管理界面失败: ${error}`,
|
||
type: "error"
|
||
});
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const renderServiceStatus = () => {
|
||
if (!serviceStatus) return null;
|
||
|
||
const statusColor = serviceStatus.is_running ? "bg-green-500" : "bg-red-500";
|
||
const statusText = serviceStatus.is_running ? "运行中" : "已停止";
|
||
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-3 h-3 rounded-full ${statusColor}`}></div>
|
||
<span className="font-medium">{statusText}</span>
|
||
{serviceStatus.is_running && serviceStatus.port && (
|
||
<Badge variant="secondary">端口 {serviceStatus.port}</Badge>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderInstallationStatus = () => {
|
||
if (!serviceStatus) return null;
|
||
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
{serviceStatus.has_ccr_binary ? (
|
||
<>
|
||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||
<span className="text-green-600">已安装</span>
|
||
{serviceStatus.ccr_version && (
|
||
<Badge variant="outline">{serviceStatus.ccr_version}</Badge>
|
||
)}
|
||
</>
|
||
) : (
|
||
<>
|
||
<AlertCircle className="w-4 h-4 text-red-500" />
|
||
<span className="text-red-600">未安装</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex-1 flex items-center justify-center">
|
||
<Loader2 className="h-6 w-6 animate-spin" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 overflow-y-auto">
|
||
<div className="container mx-auto p-6 max-w-4xl">
|
||
{/* Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="mb-6"
|
||
>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</Button>
|
||
<div>
|
||
<h1 className="text-3xl font-bold tracking-tight">CCR 路由管理</h1>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
管理 Claude Code Router 服务和配置
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Service Status Card */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.1 }}
|
||
className="mb-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center justify-between">
|
||
<span>服务状态</span>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={loadServiceStatus}
|
||
disabled={loading}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</CardTitle>
|
||
<CardDescription>
|
||
CCR 路由服务当前状态和控制选项
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">安装状态:</span>
|
||
{renderInstallationStatus()}
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">服务状态:</span>
|
||
{renderServiceStatus()}
|
||
</div>
|
||
|
||
{serviceStatus?.endpoint && (
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">服务地址:</span>
|
||
<Button
|
||
variant="link"
|
||
size="sm"
|
||
onClick={handleOpenInBrowser}
|
||
className="p-0 h-auto"
|
||
>
|
||
{serviceStatus.endpoint}/ui/
|
||
<ExternalLink className="w-3 h-3 ml-1" />
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{serviceStatus?.process_id && (
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">进程 ID:</span>
|
||
<Badge variant="outline">{serviceStatus.process_id}</Badge>
|
||
</div>
|
||
)}
|
||
|
||
{configPath && (
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">配置文件:</span>
|
||
<span className="text-xs text-muted-foreground font-mono">
|
||
{configPath}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* Control Panel */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.2 }}
|
||
className="mb-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>服务控制</CardTitle>
|
||
<CardDescription>
|
||
启动、停止或重启 CCR 路由服务
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{serviceStatus?.has_ccr_binary ? (
|
||
<div className="flex gap-3 flex-wrap">
|
||
{!serviceStatus.is_running ? (
|
||
<Button
|
||
onClick={handleStartService}
|
||
disabled={actionLoading}
|
||
className="gap-2"
|
||
>
|
||
{actionLoading ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<Play className="w-4 h-4" />
|
||
)}
|
||
启动服务
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
onClick={handleStopService}
|
||
disabled={actionLoading}
|
||
variant="destructive"
|
||
className="gap-2"
|
||
>
|
||
{actionLoading ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<Square className="w-4 h-4" />
|
||
)}
|
||
停止服务
|
||
</Button>
|
||
)}
|
||
|
||
<Button
|
||
onClick={handleRestartService}
|
||
disabled={actionLoading}
|
||
variant="outline"
|
||
className="gap-2"
|
||
>
|
||
{actionLoading ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<RotateCcw className="w-4 h-4" />
|
||
)}
|
||
重启服务
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={handleOpenUI}
|
||
disabled={actionLoading}
|
||
className="gap-2"
|
||
>
|
||
{actionLoading ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : (
|
||
<ExternalLink className="w-4 h-4" />
|
||
)}
|
||
{serviceStatus.is_running ? "打开管理界面" : "启动并打开管理界面"}
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-8">
|
||
<AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
||
<h3 className="text-lg font-medium mb-2">CCR 未安装</h3>
|
||
<p className="text-muted-foreground mb-4">
|
||
需要先安装 Claude Code Router 才能使用此功能
|
||
</p>
|
||
<Button
|
||
onClick={() => open("https://www.npmjs.com/package/@musistudio/claude-code-router")}
|
||
className="gap-2"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
安装 CCR
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* Information Card */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.3 }}
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>关于 CCR 路由</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3 text-sm text-muted-foreground">
|
||
<p>
|
||
Claude Code Router (CCR) 是一个强大的路由工具，允许您将 Claude Code 请求转发到不同的 LLM 提供商。
|
||
</p>
|
||
<ul className="list-disc list-inside space-y-1">
|
||
<li>支持多个 LLM 提供商（OpenRouter、DeepSeek、Gemini 等）</li>
|
||
<li>智能路由规则，根据令牌数量和请求类型自动选择</li>
|
||
<li>Web UI 管理界面，方便配置和监控</li>
|
||
<li>无需 Anthropic 账户即可使用 Claude Code</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Toast Container */}
|
||
<ToastContainer>
|
||
{toast && (
|
||
<Toast
|
||
message={toast.message}
|
||
type={toast.type}
|
||
onDismiss={() => setToast(null)}
|
||
/>
|
||
)}
|
||
</ToastContainer>
|
||
</div>
|
||
);
|
||
} |