CCR

src/components/CcrRouterManager.tsx

@@ -0,0 +1,463 @@
+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>
+  );
+}

src/components/MCPServerList.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { 
-  Network, 
-  Globe, 
-  Terminal, 
-  Trash2, 
-  Play, 
+import {
+  Network,
+  Globe,
+  Terminal,
+  Trash2,
+  Play,
   CheckCircle,
   Loader2,
   RefreshCw,
@@ -57,7 +57,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
   const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
   const [copiedServer, setCopiedServer] = useState<string | null>(null);
   const [connectedServers] = useState<string[]>([]);
-  
+
   // Analytics tracking
   const trackEvent = useTrackEvent();
 
@@ -103,18 +103,18 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
   const handleRemoveServer = async (name: string) => {
     try {
       setRemovingServer(name);
-      
+
       // Check if server was connected
       const wasConnected = connectedServers.includes(name);
-      
+
       await api.mcpRemove(name);
-      
+
       // Track server removal
       trackEvent.mcpServerRemoved({
         server_name: name,
         was_connected: wasConnected
       });
-      
+
       onServerRemoved(name);
     } catch (error) {
       console.error("Failed to remove server:", error);
@@ -131,15 +131,15 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
       setTestingServer(name);
       const result = await api.mcpTestConnection(name);
       const server = servers.find(s => s.name === name);
-      
+
       // Track connection result - result is a string message
       trackEvent.mcpServerConnected(name, true, server?.transport || 'unknown');
-      
+
       // TODO: Show result in a toast or modal
       console.log("Test result:", result);
     } catch (error) {
-      console.error("Failed to test connection:", error);
-      
+      console.error("Failed to test.md connection:", error);
+
       trackEvent.mcpConnectionError({
         server_name: name,
         error_type: 'test_failed',
@@ -202,7 +202,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
   const renderServerItem = (server: MCPServer) => {
     const isExpanded = expandedServers.has(server.name);
     const isCopied = copiedServer === server.name;
-    
+
     return (
       <motion.div
         key={server.name}
@@ -226,7 +226,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </Badge>
                 )}
               </div>
-              
+
               {server.command && !isExpanded && (
                 <div className="flex items-center gap-2">
                   <p className="text-xs text-muted-foreground font-mono truncate pl-9 flex-1" title={server.command}>
@@ -243,7 +243,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </Button>
                 </div>
               )}
-              
+
               {server.transport === "sse" && server.url && !isExpanded && (
                 <div className="overflow-hidden">
                   <p className="text-xs text-muted-foreground font-mono truncate pl-9" title={server.url}>
@@ -251,14 +251,14 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </p>
                 </div>
               )}
-              
+
               {Object.keys(server.env).length > 0 && !isExpanded && (
                 <div className="flex items-center gap-1 text-xs text-muted-foreground pl-9">
                   <span>{t('mcp.environmentVariablesCount', { count: Object.keys(server.env).length })}</span>
                 </div>
               )}
             </div>
-            
+
             <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
               <Button
                 variant="ghost"
@@ -288,7 +288,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
               </Button>
             </div>
           </div>
-          
+
           {/* Expanded Details */}
           {isExpanded && (
             <motion.div
@@ -328,7 +328,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </p>
                 </div>
               )}
-              
+
               {server.args && server.args.length > 0 && (
                 <div className="space-y-1">
                   <p className="text-xs font-medium text-muted-foreground">{t('mcp.arguments')}</p>
@@ -342,7 +342,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </div>
                 </div>
               )}
-              
+
               {server.transport === "sse" && server.url && (
                 <div className="space-y-1">
                   <p className="text-xs font-medium text-muted-foreground">{t('mcp.url')}</p>
@@ -351,7 +351,7 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
                   </p>
                 </div>
               )}
-              
+
               {Object.keys(server.env).length > 0 && (
                 <div className="space-y-1">
                   <p className="text-xs font-medium text-muted-foreground">{t('mcp.environmentVariables')}</p>
@@ -433,4 +433,4 @@ export const MCPServerList: React.FC<MCPServerListProps> = ({
       )}
     </div>
   );
-}; 
+};

src/components/WelcomePage.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { Bot, FolderCode, BarChart, ServerCog, FileText, Settings, Network } from "lucide-react";
+import { Bot, FolderCode, BarChart, ServerCog, FileText, Settings, Network, Router } from "lucide-react";
 import { useTranslation } from "@/hooks/useTranslation";
 import { Button } from "@/components/ui/button";
 import { ClaudiaLogoMinimal } from "@/components/ClaudiaLogo";
@@ -61,6 +61,15 @@ export function WelcomePage({ onNavigate, onNewSession }: WelcomePageProps) {
       bgColor: "bg-orange-500/10",
       view: "mcp"
     },
+    {
+      id: "ccr-router",
+      icon: Router,
+      title: t("welcome.ccrRouter"),
+      subtitle: t("welcome.ccrRouterDesc"),
+      color: "text-orange-500",
+      bgColor: "bg-orange-500/10",
+      view: "ccr-router"
+    },
     {
       id: "claude-md",
       icon: FileText,
@@ -147,7 +156,7 @@ export function WelcomePage({ onNavigate, onNewSession }: WelcomePageProps) {
         </div>
 
         {/* Bottom Feature Cards */}
-        <div className="grid grid-cols-4 gap-6 mb-10">
+        <div className="grid grid-cols-5 gap-6 mb-10">
           {bottomFeatures.map((feature, index) => (
             <motion.div
               key={feature.id}