增加滚动条

src/App.tsx

@@ -283,24 +283,30 @@ function AppContent() {
 
       case "relay-stations":
         return (
-          <RelayStationManager onBack={() => handleViewChange("welcome")} />
+          <div className="h-full overflow-hidden">
+            <RelayStationManager onBack={() => handleViewChange("welcome")} />
+          </div>
         );
 
       case "ccr-router":
         return (
-          <CcrRouterManager onBack={() => handleViewChange("welcome")} />
+          <div className="h-full overflow-hidden">
+            <CcrRouterManager onBack={() => handleViewChange("welcome")} />
+          </div>
         );
 
       case "cc-agents":
         return (
-          <CCAgents 
-            onBack={() => handleViewChange("welcome")} 
-          />
+          <div className="h-full overflow-hidden">
+            <CCAgents 
+              onBack={() => handleViewChange("welcome")} 
+            />
+          </div>
         );
 
       case "editor":
         return (
-          <div className="flex-1 overflow-hidden">
+          <div className="h-full overflow-hidden">
             <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
               <MarkdownEditor onBack={() => handleViewChange("welcome")} />
             </Suspense>
@@ -309,7 +315,7 @@ function AppContent() {
       
       case "settings":
         return (
-          <div className="flex-1 flex flex-col" style={{ minHeight: 0 }}>
+          <div className="h-full overflow-hidden">
             <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
               <Settings onBack={() => handleViewChange("welcome")} />
             </Suspense>
@@ -447,10 +453,12 @@ function AppContent() {
       
       case "claude-file-editor":
         return editingClaudeFile ? (
-          <ClaudeFileEditor
-            file={editingClaudeFile}
-            onBack={handleBackFromClaudeFileEditor}
-          />
+          <div className="h-full overflow-hidden">
+            <ClaudeFileEditor
+              file={editingClaudeFile}
+              onBack={handleBackFromClaudeFileEditor}
+            />
+          </div>
         ) : null;
       
       case "tabs":
@@ -465,28 +473,34 @@ function AppContent() {
       
       case "usage-dashboard":
         return (
-          <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
-            <UsageDashboard onBack={() => handleViewChange("welcome")} />
-          </Suspense>
+          <div className="h-full overflow-hidden">
+            <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+              <UsageDashboard onBack={() => handleViewChange("welcome")} />
+            </Suspense>
+          </div>
         );
       
       case "mcp":
         return (
-          <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
-            <MCPManager onBack={() => handleViewChange("welcome")} />
-          </Suspense>
+          <div className="h-full overflow-hidden">
+            <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+              <MCPManager onBack={() => handleViewChange("welcome")} />
+            </Suspense>
+          </div>
         );
       
       case "project-settings":
         if (projectForSettings) {
           return (
-            <ProjectSettings
-              project={projectForSettings}
-              onBack={() => {
-                setProjectForSettings(null);
-                handleViewChange(previousView || "projects");
-              }}
-            />
+            <div className="h-full overflow-hidden">
+              <ProjectSettings
+                project={projectForSettings}
+                onBack={() => {
+                  setProjectForSettings(null);
+                  handleViewChange(previousView || "projects");
+                }}
+              />
+            </div>
           );
         }
         break;

src/components/RelayStationManager.tsx

@@ -409,9 +409,11 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
   }, [stations]);
 
   return (
-    <div className="container mx-auto p-6 space-y-6">
-      {/* 页面标题 */}
-      <div className="flex items-center justify-between">
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className="flex-1 overflow-y-auto min-h-0">
+        <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"
@@ -950,6 +952,8 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
           />
         </ToastContainer>
       )}
+        </div>
+      </div>
     </div>
   );
 };

src/components/Settings.tsx

@@ -21,7 +21,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { 
   api, 
   type ClaudeSettings,
-  type ClaudeInstallation
+  type ClaudeInstallation,
+  type ModelMapping
 } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { Toast, ToastContainer } from "@/components/ui/toast";
@@ -99,11 +100,17 @@ export const Settings: React.FC<SettingsProps> = ({
   const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false);
   const trackEvent = useTrackEvent();
   
+  // Model mappings state
+  const [modelMappings, setModelMappings] = useState<ModelMapping[]>([]);
+  const [loadingMappings, setLoadingMappings] = useState(false);
+  const [modelMappingsChanged, setModelMappingsChanged] = useState(false);
+  
   // Load settings on mount
   useEffect(() => {
     loadSettings();
     loadClaudeBinaryPath();
     loadAnalyticsSettings();
+    loadModelMappings();
   }, []);
 
   /**
@@ -117,6 +124,51 @@ export const Settings: React.FC<SettingsProps> = ({
     }
   };
 
+  /**
+   * Loads model mappings
+   * @author yovinchen
+   */
+  const loadModelMappings = async () => {
+    try {
+      setLoadingMappings(true);
+      const mappings = await api.getModelMappings();
+      setModelMappings(mappings);
+    } catch (err) {
+      console.error("Failed to load model mappings:", err);
+      setToast({ message: "加载模型映射失败", type: "error" });
+    } finally {
+      setLoadingMappings(false);
+    }
+  };
+
+  /**
+   * Updates a model mapping
+   * @author yovinchen
+   */
+  const updateModelMapping = (alias: string, modelName: string) => {
+    setModelMappings(prev =>
+      prev.map(m => (m.alias === alias ? { ...m, model_name: modelName } : m))
+    );
+    setModelMappingsChanged(true);
+  };
+
+  /**
+   * Saves model mappings
+   * @author yovinchen
+   */
+  const saveModelMappings = async () => {
+    try {
+      for (const mapping of modelMappings) {
+        await api.updateModelMapping(mapping.alias, mapping.model_name);
+      }
+      setModelMappingsChanged(false);
+      setToast({ message: "模型映射已保存", type: "success" });
+    } catch (err) {
+      console.error("Failed to save model mappings:", err);
+      setToast({ message: "保存模型映射失败", type: "error" });
+    }
+  };
+
   /**
    * Loads the current Claude binary path
    */
@@ -233,6 +285,11 @@ export const Settings: React.FC<SettingsProps> = ({
         setProxySettingsChanged(false);
       }
 
+      // Save model mappings if changed
+      if (modelMappingsChanged) {
+        await saveModelMappings();
+      }
+
       setToast({ message: t('settings.saveButton.settingsSavedSuccess'), type: "success" });
     } catch (err) {
       console.error("Failed to save settings:", err);
@@ -396,22 +453,23 @@ export const Settings: React.FC<SettingsProps> = ({
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       ) : (
-        <div className="flex-1 overflow-y-auto p-4">
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-            <TabsList className="grid grid-cols-9 w-full">
-              <TabsTrigger value="general">{t('settings.general')}</TabsTrigger>
-              <TabsTrigger value="permissions">{t('settings.permissionsTab')}</TabsTrigger>
-              <TabsTrigger value="environment">{t('settings.environmentTab')}</TabsTrigger>
-              <TabsTrigger value="advanced">{t('settings.advancedTab')}</TabsTrigger>
-              <TabsTrigger value="hooks">{t('settings.hooksTab')}</TabsTrigger>
-              <TabsTrigger value="commands">{t('settings.commands')}</TabsTrigger>
-              <TabsTrigger value="storage">{t('settings.storage')}</TabsTrigger>
-              <TabsTrigger value="proxy">{t('settings.proxy')}</TabsTrigger>
-              <TabsTrigger value="analytics">{t('settings.analyticsTab')}</TabsTrigger>
-            </TabsList>
+        <div className="flex-1 overflow-y-auto min-h-0">
+          <div className="p-4">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid grid-cols-9 w-full sticky top-0 z-10 bg-background">
+                <TabsTrigger value="general">{t('settings.general')}</TabsTrigger>
+                <TabsTrigger value="permissions">{t('settings.permissionsTab')}</TabsTrigger>
+                <TabsTrigger value="environment">{t('settings.environmentTab')}</TabsTrigger>
+                <TabsTrigger value="advanced">{t('settings.advancedTab')}</TabsTrigger>
+                <TabsTrigger value="hooks">{t('settings.hooksTab')}</TabsTrigger>
+                <TabsTrigger value="commands">{t('settings.commands')}</TabsTrigger>
+                <TabsTrigger value="storage">{t('settings.storage')}</TabsTrigger>
+                <TabsTrigger value="proxy">{t('settings.proxy')}</TabsTrigger>
+                <TabsTrigger value="analytics">{t('settings.analyticsTab')}</TabsTrigger>
+              </TabsList>
             
             {/* General Settings */}
-            <TabsContent value="general" className="space-y-6">
+            <TabsContent value="general" className="space-y-6 mt-6">
               <Card className="p-6 space-y-6">
                 <div>
                   <h3 className="text-base font-semibold mb-4">{t('settings.generalSettings')}</h3>
@@ -633,13 +691,58 @@ export const Settings: React.FC<SettingsProps> = ({
                         </p>
                       )}
                     </div>
+                    
+                    {/* Model Mappings Configuration */}
+                    <div className="space-y-4">
+                      <div>
+                        <Label className="text-sm font-medium mb-2 block">模型别名映射</Label>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          配置模型别名（sonnet、opus、haiku）对应的实际模型版本
+                        </p>
+                      </div>
+                      
+                      {loadingMappings ? (
+                        <div className="flex items-center justify-center py-4">
+                          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : (
+                        <div className="space-y-3">
+                          {modelMappings.map((mapping) => (
+                            <div key={mapping.alias} className="space-y-2">
+                              <Label htmlFor={`model-${mapping.alias}`} className="text-sm">
+                                {mapping.alias}
+                              </Label>
+                              <Input
+                                id={`model-${mapping.alias}`}
+                                value={mapping.model_name}
+                                onChange={(e) => updateModelMapping(mapping.alias, e.target.value)}
+                                placeholder={`claude-${mapping.alias}-4-...`}
+                                className="font-mono text-sm"
+                              />
+                            </div>
+                          ))}
+                          
+                          {modelMappingsChanged && (
+                            <p className="text-xs text-amber-600 dark:text-amber-400">
+                              模型映射已修改，点击保存以应用更改
+                            </p>
+                          )}
+                          
+                          <div className="pt-2">
+                            <p className="text-xs text-muted-foreground">
+                              <strong>说明：</strong>Agent执行时会根据这里的配置解析模型别名。例如，如果设置 sonnet → claude-sonnet-4-20250514，那么所有使用 "sonnet" 的Agent都会调用该模型版本。
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
               </Card>
             </TabsContent>
             
             {/* Permissions Settings */}
-            <TabsContent value="permissions" className="space-y-6">
+            <TabsContent value="permissions" className="space-y-6 mt-6">
               <Card className="p-6">
                 <div className="space-y-6">
                   <div>
@@ -760,7 +863,7 @@ export const Settings: React.FC<SettingsProps> = ({
             </TabsContent>
             
             {/* Environment Variables */}
-            <TabsContent value="environment" className="space-y-6">
+            <TabsContent value="environment" className="space-y-6 mt-6">
               <Card className="p-6">
                 <div className="space-y-6">
                   <div className="flex items-center justify-between">
@@ -834,7 +937,7 @@ export const Settings: React.FC<SettingsProps> = ({
               </Card>
             </TabsContent>
             {/* Advanced Settings */}
-            <TabsContent value="advanced" className="space-y-6">
+            <TabsContent value="advanced" className="space-y-6 mt-6">
               <Card className="p-6">
                 <div className="space-y-6">
                   <div>
@@ -873,7 +976,7 @@ export const Settings: React.FC<SettingsProps> = ({
             </TabsContent>
             
             {/* Hooks Settings */}
-            <TabsContent value="hooks" className="space-y-6">
+            <TabsContent value="hooks" className="space-y-6 mt-6">
               <Card className="p-6">
                 <div className="space-y-4">
                   <div>
@@ -898,19 +1001,19 @@ export const Settings: React.FC<SettingsProps> = ({
             </TabsContent>
             
             {/* Commands Tab */}
-            <TabsContent value="commands">
+            <TabsContent value="commands" className="mt-6">
               <Card className="p-6">
                 <SlashCommandsManager className="p-0" />
               </Card>
             </TabsContent>
             
             {/* Storage Tab */}
-            <TabsContent value="storage">
+            <TabsContent value="storage" className="mt-6">
               <StorageTab />
             </TabsContent>
             
             {/* Proxy Settings */}
-            <TabsContent value="proxy">
+            <TabsContent value="proxy" className="mt-6">
               <Card className="p-6">
                 <ProxySettings 
                   setToast={setToast}
@@ -923,7 +1026,7 @@ export const Settings: React.FC<SettingsProps> = ({
             </TabsContent>
             
             {/* Analytics Settings */}
-            <TabsContent value="analytics" className="space-y-6">
+            <TabsContent value="analytics" className="space-y-6 mt-6">
               <Card className="p-6 space-y-6">
                 <div>
                   <div className="flex items-center gap-3 mb-4">
@@ -1013,6 +1116,7 @@ export const Settings: React.FC<SettingsProps> = ({
               </Card>
             </TabsContent>
           </Tabs>
+          </div>
         </div>
       )}
       </div>

src/lib/api.ts

@@ -2698,6 +2698,32 @@ export const api = {
       console.error("Failed to cleanup terminal sessions:", error);
       throw error;
     }
+  },
+
+  /**
+   * Get all model mappings
+   * @author yovinchen
+   */
+  async getModelMappings(): Promise<ModelMapping[]> {
+    try {
+      return await invoke<ModelMapping[]>("get_model_mappings");
+    } catch (error) {
+      console.error("Failed to get model mappings:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Update a model mapping
+   * @author yovinchen
+   */
+  async updateModelMapping(alias: string, modelName: string): Promise<void> {
+    try {
+      await invoke("update_model_mapping", { alias, modelName });
+    } catch (error) {
+      console.error("Failed to update model mapping:", error);
+      throw error;
+    }
   }
 };
 
@@ -2815,3 +2841,13 @@ export const ccrApi = {
     }
   }
 };
+
+/**
+ * Model mapping structure
+ * @author yovinchen
+ */
+export interface ModelMapping {
+  alias: string;
+  model_name: string;
+  updated_at: string;
+}