汉化

src/components/Topbar.tsx

@@ -3,6 +3,8 @@ import { motion } from "framer-motion";
 import { Circle, FileText, Settings, ExternalLink, BarChart3, Network, Info, Bot } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Popover } from "@/components/ui/popover";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { useTranslation } from "@/hooks/useTranslation";
 import { api, type ClaudeVersionStatus } from "@/lib/api";
 import { cn } from "@/lib/utils";
 
@@ -57,6 +59,7 @@ export const Topbar: React.FC<TopbarProps> = ({
   onAgentsClick,
   className,
 }) => {
+  const { t } = useTranslation();
   const [versionStatus, setVersionStatus] = useState<ClaudeVersionStatus | null>(null);
   const [checking, setChecking] = useState(true);
   
@@ -130,7 +133,7 @@ export const Topbar: React.FC<TopbarProps> = ({
           trigger={statusContent}
           content={
             <div className="space-y-3 max-w-xs">
-              <p className="text-sm font-medium">Claude Code not found</p>
+              <p className="text-sm font-medium">{t('messages.claudeCodeNotFound')}</p>
               <div className="rounded-md bg-muted p-3">
                 <pre className="text-xs font-mono whitespace-pre-wrap">
                   {versionStatus.output}
@@ -142,7 +145,7 @@ export const Topbar: React.FC<TopbarProps> = ({
                 className="w-full"
                 onClick={onSettingsClick}
               >
-                Select Claude Installation
+                {t('messages.selectClaudeInstallation')}
               </Button>
               <a
                 href="https://www.anthropic.com/claude-code"
@@ -150,7 +153,7 @@ export const Topbar: React.FC<TopbarProps> = ({
                 rel="noopener noreferrer"
                 className="flex items-center space-x-1 text-xs text-primary hover:underline"
               >
-                <span>Install Claude Code</span>
+                <span>{t('messages.installClaudeCode')}</span>
                 <ExternalLink className="h-3 w-3" />
               </a>
             </div>
@@ -186,7 +189,7 @@ export const Topbar: React.FC<TopbarProps> = ({
             className="text-xs"
           >
             <Bot className="mr-2 h-3 w-3" />
-            Agents
+            {t('navigation.agents')}
           </Button>
         )}
         
@@ -197,7 +200,7 @@ export const Topbar: React.FC<TopbarProps> = ({
           className="text-xs"
         >
           <BarChart3 className="mr-2 h-3 w-3" />
-          Usage Dashboard
+          {t('navigation.usage')}
         </Button>
         
         <Button
@@ -217,7 +220,7 @@ export const Topbar: React.FC<TopbarProps> = ({
           className="text-xs"
         >
           <Network className="mr-2 h-3 w-3" />
-          MCP
+          {t('navigation.mcp')}
         </Button>
         
         <Button
@@ -227,15 +230,18 @@ export const Topbar: React.FC<TopbarProps> = ({
           className="text-xs"
         >
           <Settings className="mr-2 h-3 w-3" />
-          Settings
+          {t('navigation.settings')}
         </Button>
         
+        {/* Language Switcher */}
+        <LanguageSwitcher />
+        
         <Button
           variant="ghost"
           size="icon"
           onClick={onInfoClick}
           className="h-8 w-8"
-          title="About"
+          title={t('navigation.about')}
         >
           <Info className="h-4 w-4" />
         </Button>