增加滚动条

This commit is contained in:
2025-10-11 01:24:31 +08:00
parent fed1e63c34
commit 1de00d9c4f
5 changed files with 213 additions and 51 deletions

View File

@@ -11,7 +11,11 @@
"preview": "vite preview", "preview": "vite preview",
"tauri": "tauri", "tauri": "tauri",
"check": "tsc --noEmit && cd src-tauri && cargo check", "check": "tsc --noEmit && cd src-tauri && cargo check",
"postinstall": "node ./scripts/copy-monaco.mjs" "postinstall": "node ./scripts/copy-monaco.mjs",
"create-todo": "bash ./scripts/create-todo.sh",
"archive-todo": "bash ./scripts/archive-todo.sh",
"todo-report": "bash ./scripts/todo-report.sh",
"pre-commit": "bash ./scripts/pre-commit-check.sh"
}, },
"dependencies": { "dependencies": {
"@hookform/resolvers": "^3.9.1", "@hookform/resolvers": "^3.9.1",

View File

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

View File

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

View File

@@ -21,7 +21,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { import {
api, api,
type ClaudeSettings, type ClaudeSettings,
type ClaudeInstallation type ClaudeInstallation,
type ModelMapping
} from "@/lib/api"; } from "@/lib/api";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Toast, ToastContainer } from "@/components/ui/toast"; import { Toast, ToastContainer } from "@/components/ui/toast";
@@ -99,11 +100,17 @@ export const Settings: React.FC<SettingsProps> = ({
const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false); const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false);
const trackEvent = useTrackEvent(); 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 // Load settings on mount
useEffect(() => { useEffect(() => {
loadSettings(); loadSettings();
loadClaudeBinaryPath(); loadClaudeBinaryPath();
loadAnalyticsSettings(); 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 * Loads the current Claude binary path
*/ */
@@ -233,6 +285,11 @@ export const Settings: React.FC<SettingsProps> = ({
setProxySettingsChanged(false); setProxySettingsChanged(false);
} }
// Save model mappings if changed
if (modelMappingsChanged) {
await saveModelMappings();
}
setToast({ message: t('settings.saveButton.settingsSavedSuccess'), type: "success" }); setToast({ message: t('settings.saveButton.settingsSavedSuccess'), type: "success" });
} catch (err) { } catch (err) {
console.error("Failed to save settings:", 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" /> <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div> </div>
) : ( ) : (
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto min-h-0">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <div className="p-4">
<TabsList className="grid grid-cols-9 w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsTrigger value="general">{t('settings.general')}</TabsTrigger> <TabsList className="grid grid-cols-9 w-full sticky top-0 z-10 bg-background">
<TabsTrigger value="permissions">{t('settings.permissionsTab')}</TabsTrigger> <TabsTrigger value="general">{t('settings.general')}</TabsTrigger>
<TabsTrigger value="environment">{t('settings.environmentTab')}</TabsTrigger> <TabsTrigger value="permissions">{t('settings.permissionsTab')}</TabsTrigger>
<TabsTrigger value="advanced">{t('settings.advancedTab')}</TabsTrigger> <TabsTrigger value="environment">{t('settings.environmentTab')}</TabsTrigger>
<TabsTrigger value="hooks">{t('settings.hooksTab')}</TabsTrigger> <TabsTrigger value="advanced">{t('settings.advancedTab')}</TabsTrigger>
<TabsTrigger value="commands">{t('settings.commands')}</TabsTrigger> <TabsTrigger value="hooks">{t('settings.hooksTab')}</TabsTrigger>
<TabsTrigger value="storage">{t('settings.storage')}</TabsTrigger> <TabsTrigger value="commands">{t('settings.commands')}</TabsTrigger>
<TabsTrigger value="proxy">{t('settings.proxy')}</TabsTrigger> <TabsTrigger value="storage">{t('settings.storage')}</TabsTrigger>
<TabsTrigger value="analytics">{t('settings.analyticsTab')}</TabsTrigger> <TabsTrigger value="proxy">{t('settings.proxy')}</TabsTrigger>
</TabsList> <TabsTrigger value="analytics">{t('settings.analyticsTab')}</TabsTrigger>
</TabsList>
{/* General Settings */} {/* 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"> <Card className="p-6 space-y-6">
<div> <div>
<h3 className="text-base font-semibold mb-4">{t('settings.generalSettings')}</h3> <h3 className="text-base font-semibold mb-4">{t('settings.generalSettings')}</h3>
@@ -633,13 +691,58 @@ export const Settings: React.FC<SettingsProps> = ({
</p> </p>
)} )}
</div> </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">
sonnetopushaiku
</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>
</div> </div>
</Card> </Card>
</TabsContent> </TabsContent>
{/* Permissions Settings */} {/* Permissions Settings */}
<TabsContent value="permissions" className="space-y-6"> <TabsContent value="permissions" className="space-y-6 mt-6">
<Card className="p-6"> <Card className="p-6">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -760,7 +863,7 @@ export const Settings: React.FC<SettingsProps> = ({
</TabsContent> </TabsContent>
{/* Environment Variables */} {/* Environment Variables */}
<TabsContent value="environment" className="space-y-6"> <TabsContent value="environment" className="space-y-6 mt-6">
<Card className="p-6"> <Card className="p-6">
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -834,7 +937,7 @@ export const Settings: React.FC<SettingsProps> = ({
</Card> </Card>
</TabsContent> </TabsContent>
{/* Advanced Settings */} {/* Advanced Settings */}
<TabsContent value="advanced" className="space-y-6"> <TabsContent value="advanced" className="space-y-6 mt-6">
<Card className="p-6"> <Card className="p-6">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -873,7 +976,7 @@ export const Settings: React.FC<SettingsProps> = ({
</TabsContent> </TabsContent>
{/* Hooks Settings */} {/* Hooks Settings */}
<TabsContent value="hooks" className="space-y-6"> <TabsContent value="hooks" className="space-y-6 mt-6">
<Card className="p-6"> <Card className="p-6">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
@@ -898,19 +1001,19 @@ export const Settings: React.FC<SettingsProps> = ({
</TabsContent> </TabsContent>
{/* Commands Tab */} {/* Commands Tab */}
<TabsContent value="commands"> <TabsContent value="commands" className="mt-6">
<Card className="p-6"> <Card className="p-6">
<SlashCommandsManager className="p-0" /> <SlashCommandsManager className="p-0" />
</Card> </Card>
</TabsContent> </TabsContent>
{/* Storage Tab */} {/* Storage Tab */}
<TabsContent value="storage"> <TabsContent value="storage" className="mt-6">
<StorageTab /> <StorageTab />
</TabsContent> </TabsContent>
{/* Proxy Settings */} {/* Proxy Settings */}
<TabsContent value="proxy"> <TabsContent value="proxy" className="mt-6">
<Card className="p-6"> <Card className="p-6">
<ProxySettings <ProxySettings
setToast={setToast} setToast={setToast}
@@ -923,7 +1026,7 @@ export const Settings: React.FC<SettingsProps> = ({
</TabsContent> </TabsContent>
{/* Analytics Settings */} {/* 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"> <Card className="p-6 space-y-6">
<div> <div>
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
@@ -1013,6 +1116,7 @@ export const Settings: React.FC<SettingsProps> = ({
</Card> </Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div>
</div> </div>
)} )}
</div> </div>

View File

@@ -2698,6 +2698,32 @@ export const api = {
console.error("Failed to cleanup terminal sessions:", error); console.error("Failed to cleanup terminal sessions:", error);
throw 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;
}