admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve VS Code config synchronization and code formatting

Browse Source 
- Add automatic VS Code config sync when base_url changes in TOML
- Improve error handling for VS Code configuration writes
- Enhance state management with ref tracking to prevent duplicate API calls
- Fix code formatting issues and improve readability across components
- Optimize common configuration handling for both Claude and Codex providers
This commit is contained in:
Jason
2025-09-18 15:25:10 +08:00
parent 32e66e054b
commit 463e430a3d
7 changed files with 195 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AppSwitcher.tsx
View File

@@ -26,8 +26,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
<ClaudeIcon
size={16}
className={
activeApp === "claude"
? "text-[#D97757] dark:text-[#D97757] transition-colors duration-200"
activeApp === "claude"
? "text-[#D97757] dark:text-[#D97757] transition-colors duration-200"
: "text-gray-500 dark:text-gray-400 group-hover:text-[#D97757] dark:group-hover:text-[#D97757] transition-colors duration-200"
}
/>

2
src/components/JsonEditor.tsx
View File

@@ -62,7 +62,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
return diagnostics;
}),
[showValidation]
[showValidation],
);
useEffect(() => {

83
src/components/ProviderForm.tsx
View File

@@ -128,25 +128,26 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const [settingsConfigError, setSettingsConfigError] = useState("");
// 用于跟踪是否正在通过通用配置更新
const isUpdatingFromCommonConfig = useRef(false);
// Codex 通用配置状态
const [useCodexCommonConfig, setUseCodexCommonConfig] = useState(false);
const [codexCommonConfigSnippet, setCodexCommonConfigSnippetState] = useState<string>(() => {
if (typeof window === "undefined") {
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
}
try {
const stored = window.localStorage.getItem(
CODEX_COMMON_CONFIG_STORAGE_KEY,
);
if (stored && stored.trim()) {
return stored;
const [codexCommonConfigSnippet, setCodexCommonConfigSnippetState] =
useState<string>(() => {
if (typeof window === "undefined") {
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
}
} catch {
// ignore localStorage 读取失败
}
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
});
try {
const stored = window.localStorage.getItem(
CODEX_COMMON_CONFIG_STORAGE_KEY,
);
if (stored && stored.trim()) {
return stored;
}
} catch {
// ignore localStorage 读取失败
}
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
});
const [codexCommonConfigError, setCodexCommonConfigError] = useState("");
const isUpdatingFromCodexCommonConfig = useRef(false);
// -1 表示自定义，null 表示未选择，>= 0 表示预设索引
@@ -217,7 +218,11 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
useEffect(() => {
if (initialData) {
if (!isCodex) {
const configString = JSON.stringify(initialData.settingsConfig, null, 2);
const configString = JSON.stringify(
initialData.settingsConfig,
null,
2,
);
const hasCommon = hasCommonConfigSnippet(
configString,
commonConfigSnippet,
@@ -235,7 +240,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
};
if (config.env) {
setClaudeModel(config.env.ANTHROPIC_MODEL || "");
setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
setClaudeSmallFastModel(
config.env.ANTHROPIC_SMALL_FAST_MODEL || "",
);
setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL
// 初始化 Kimi 模型选择
@@ -254,7 +261,13 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
setUseCodexCommonConfig(hasCommon);
}
}
}, [initialData, commonConfigSnippet, codexCommonConfigSnippet, isCodex, codexConfig]);
}, [
initialData,
commonConfigSnippet,
codexCommonConfigSnippet,
isCodex,
codexConfig,
]);
// 当选择预设变化时，同步类别
useEffect(() => {
@@ -497,7 +510,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
isUpdatingFromCommonConfig.current = false;
}, 0);
}
// 保存通用配置到 localStorage
if (!validationError && typeof window !== "undefined") {
try {
@@ -529,10 +542,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
setBaseUrl(""); // 清空基础 URL
// 同步通用配置状态
const hasCommon = hasCommonConfigSnippet(
configString,
commonConfigSnippet,
);
const hasCommon = hasCommonConfigSnippet(configString, commonConfigSnippet);
setUseCommonConfig(hasCommon);
setCommonConfigError("");
@@ -643,10 +653,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
updateSettingsConfigValue(configString);
// 同步通用配置开关
const hasCommon = hasCommonConfigSnippet(
configString,
commonConfigSnippet,
);
const hasCommon = hasCommonConfigSnippet(configString, commonConfigSnippet);
setUseCommonConfig(hasCommon);
};
@@ -681,11 +688,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Codex: 处理通用配置开关
const handleCodexCommonConfigToggle = (checked: boolean) => {
const { updatedConfig, error: snippetError } = updateTomlCommonConfigSnippet(
codexConfig,
codexCommonConfigSnippet,
checked,
);
const { updatedConfig, error: snippetError } =
updateTomlCommonConfigSnippet(
codexConfig,
codexCommonConfigSnippet,
checked,
);
if (snippetError) {
setCodexCommonConfigError(snippetError);
@@ -753,10 +761,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// 保存 Codex 通用配置到 localStorage
if (typeof window !== "undefined") {
try {
window.localStorage.setItem(
CODEX_COMMON_CONFIG_STORAGE_KEY,
value,
);
window.localStorage.setItem(CODEX_COMMON_CONFIG_STORAGE_KEY, value);
} catch {
// ignore localStorage 写入失败
}
@@ -1177,7 +1182,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
useCommonConfig={useCodexCommonConfig}
onCommonConfigToggle={handleCodexCommonConfigToggle}
commonConfigSnippet={codexCommonConfigSnippet}
onCommonConfigSnippetChange={handleCodexCommonConfigSnippetChange}
onCommonConfigSnippetChange={
handleCodexCommonConfigSnippetChange
}
commonConfigError={codexCommonConfigError}
authError={codexAuthError}
/>

14
src/components/ProviderForm/ClaudeConfigEditor.tsx
View File

@@ -60,7 +60,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
// 支持按下 ESC 关闭弹窗
useEffect(() => {
if (!isCommonConfigModalOpen) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
@@ -120,15 +120,13 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
rows={12}
/>
{configError && (
<p className="text-xs text-red-500 dark:text-red-400">
{configError}
</p>
<p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
)}
<p className="text-xs text-gray-500 dark:text-gray-400">
完整的 Claude Code settings.json 配置内容
</p>
{isCommonConfigModalOpen && (
<div
<div
className="fixed inset-0 z-50 flex items-center justify-center"
onMouseDown={(e) => {
if (e.target === e.currentTarget) closeModal();
@@ -136,7 +134,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
>
{/* Backdrop - 统一背景样式 */}
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" />
{/* Modal - 统一窗口样式 */}
<div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
{/* Header - 统一标题栏样式 */}
@@ -153,7 +151,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
<X size={18} />
</button>
</div>
{/* Content - 统一内容区域样式 */}
<div className="flex-1 overflow-auto p-6 space-y-4">
<p className="text-sm text-gray-500 dark:text-gray-400">
@@ -171,7 +169,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
</p>
)}
</div>
{/* Footer - 统一底部按钮样式 */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
<button

162
src/components/ProviderForm/CodexConfigEditor.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { X, Save } from "lucide-react";
import { extractBaseUrlFromToml } from "../../utils/providerConfigUtils";
@@ -34,6 +34,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
const [vscodeError, setVscodeError] = useState("");
const [vscodeSuccess, setVscodeSuccess] = useState("");
const [isWritingVscode, setIsWritingVscode] = useState(false);
const lastAppliedBaseUrlRef = useRef<string | null>(null);
useEffect(() => {
if (commonConfigError && !isCommonConfigModalOpen) {
@@ -49,6 +50,61 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
return () => window.clearTimeout(timer);
}, [vscodeSuccess]);
const ensureVscodeApiAvailable = () => {
if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
setVscodeError("当前环境暂不支持写入 VS Code 配置");
return false;
}
return true;
};
const applyVscodeConfig = async (
baseUrl: string,
successMessage = "已写入 VS Code 配置",
) => {
if (!ensureVscodeApiAvailable()) {
return false;
}
setIsWritingVscode(true);
try {
const success = await window.api.writeVscodeSettings(baseUrl);
if (success) {
setVscodeSuccess(successMessage);
lastAppliedBaseUrlRef.current = baseUrl;
return true;
}
setVscodeError("写入 VS Code 配置失败，请稍后重试");
} catch (error) {
setVscodeError(`写入 VS Code 配置失败: ${String(error)}`);
} finally {
setIsWritingVscode(false);
}
return false;
};
const removeVscodeConfig = async () => {
if (!ensureVscodeApiAvailable()) {
return false;
}
setIsWritingVscode(true);
try {
const success = await window.api.writeVscodeSettings();
if (success) {
setVscodeSuccess("已移除 VS Code 配置");
lastAppliedBaseUrlRef.current = null;
return true;
}
setVscodeError("移除 VS Code 配置失败，请稍后重试");
} catch (error) {
setVscodeError(`移除 VS Code 配置失败: ${String(error)}`);
} finally {
setIsWritingVscode(false);
}
return false;
};
const handleVscodeConfigToggle = async (checked: boolean) => {
if (isWritingVscode) return;
@@ -56,12 +112,6 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
setVscodeError("");
setVscodeSuccess("");
if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
setVscodeError("当前环境暂不支持写入 VS Code 配置");
setWriteVscodeConfig(!checked);
return;
}
if (checked) {
const trimmed = configValue.trim();
if (!trimmed) {
@@ -77,46 +127,70 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
return;
}
const success = await applyVscodeConfig(baseUrl);
if (!success) {
setWriteVscodeConfig(false);
}
return;
}
const success = await removeVscodeConfig();
if (!success) {
setWriteVscodeConfig(true);
}
};
useEffect(() => {
if (!writeVscodeConfig || isWritingVscode) {
return;
}
const trimmed = configValue.trim();
if (!trimmed) {
return;
}
const baseUrl = extractBaseUrlFromToml(trimmed);
if (!baseUrl) {
setVscodeError("未在 config.toml 中找到 base_url 字段");
setWriteVscodeConfig(false);
return;
}
if (lastAppliedBaseUrlRef.current === baseUrl) {
return;
}
const sync = async () => {
// 直接调用 API 而不依赖 applyVscodeConfig 函数，避免闭包问题
if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
setVscodeError("当前环境暂不支持写入 VS Code 配置");
return;
}
setIsWritingVscode(true);
try {
const success = await window.api.writeVscodeSettings(baseUrl);
if (success) {
setVscodeSuccess("已写入 VS Code 配置");
setVscodeSuccess("已更新 VS Code 配置");
lastAppliedBaseUrlRef.current = baseUrl;
} else {
setVscodeError("写入 VS Code 配置失败，请稍后重试");
setWriteVscodeConfig(false);
}
} catch (error) {
setVscodeError(`写入 VS Code 配置失败: ${String(error)}`);
setWriteVscodeConfig(false);
} finally {
setIsWritingVscode(false);
}
};
return;
}
setIsWritingVscode(true);
try {
const success = await window.api.writeVscodeSettings();
if (success) {
setVscodeSuccess("已移除 VS Code 配置");
} else {
setVscodeError("移除 VS Code 配置失败，请稍后重试");
setWriteVscodeConfig(true);
}
} catch (error) {
setVscodeError(`移除 VS Code 配置失败: ${String(error)}`);
setWriteVscodeConfig(true);
} finally {
setIsWritingVscode(false);
}
};
sync();
}, [configValue, writeVscodeConfig, isWritingVscode]);
// 支持按下 ESC 关闭弹窗
useEffect(() => {
if (!isCommonConfigModalOpen) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
@@ -162,9 +236,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
data-enable-grammarly="false"
/>
{authError && (
<p className="text-xs text-red-500 dark:text-red-400">
{authError}
</p>
<p className="text-xs text-red-500 dark:text-red-400">{authError}</p>
)}
<p className="text-xs text-gray-500 dark:text-gray-400">
Codex auth.json 配置内容
@@ -179,7 +251,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
>
config.toml (TOML)
</label>
{/* 右侧对齐的双列布局 - 使用flex而非grid以更好控制宽度 */}
<div className="flex gap-3">
{/* 左列：VS Code 配置 */}
@@ -201,13 +273,16 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
</p>
)}
{vscodeError && (
<p className="text-xs text-red-500 dark:text-red-400 text-right truncate" title={vscodeError}>
<p
className="text-xs text-red-500 dark:text-red-400 text-right truncate"
title={vscodeError}
>
{vscodeError}
</p>
)}
</div>
</div>
{/* 右列：通用配置 - 不设置宽度，让内容自然收缩 */}
<div className="flex flex-col items-end space-y-1">
<label className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
@@ -227,14 +302,17 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
编辑通用配置
</button>
{commonConfigError && !isCommonConfigModalOpen && (
<p className="text-xs text-red-500 dark:text-red-400 mt-1 max-w-[120px] truncate" title={commonConfigError}>
<p
className="text-xs text-red-500 dark:text-red-400 mt-1 max-w-[120px] truncate"
title={commonConfigError}
>
{commonConfigError}
</p>
)}
</div>
</div>
</div>
<textarea
id="codexConfig"
value={configValue}
@@ -258,7 +336,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
</div>
{isCommonConfigModalOpen && (
<div
<div
className="fixed inset-0 z-50 flex items-center justify-center"
onMouseDown={(e) => {
if (e.target === e.currentTarget) closeModal();
@@ -266,7 +344,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
>
{/* Backdrop - 统一背景样式 */}
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" />
{/* Modal - 统一窗口样式 */}
<div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
{/* Header - 统一标题栏样式 */}
@@ -283,7 +361,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<X size={18} />
</button>
</div>
{/* Content - 统一内容区域样式 */}
<div className="flex-1 overflow-auto p-6 space-y-4">
<p className="text-sm text-gray-500 dark:text-gray-400">
@@ -312,7 +390,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
</p>
)}
</div>
{/* Footer - 统一底部按钮样式 */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
<button

2
src/utils/errorUtils.ts
View File

@@ -35,4 +35,4 @@ export const extractErrorMessage = (error: unknown): string => {
}
return "";
};
};

34
src/utils/providerConfigUtils.ts
View File

@@ -22,7 +22,10 @@ const deepMerge = (
return target;
};
const deepRemove = (target: Record<string, any>, source: Record<string, any>) => {
const deepRemove = (
target: Record<string, any>,
source: Record<string, any>,
) => {
Object.entries(source).forEach(([key, value]) => {
if (!(key in target)) return;
@@ -59,7 +62,7 @@ const isSubset = (target: any, source: any): boolean => {
const deepClone = <T>(obj: T): T => {
if (obj === null || typeof obj !== "object") return obj;
if (obj instanceof Date) return new Date(obj.getTime()) as T;
if (obj instanceof Array) return obj.map(item => deepClone(item)) as T;
if (obj instanceof Array) return obj.map((item) => deepClone(item)) as T;
if (obj instanceof Object) {
const clonedObj = {} as T;
for (const key in obj) {
@@ -78,7 +81,10 @@ export interface UpdateCommonConfigResult {
}
// 验证JSON配置格式
export const validateJsonConfig = (value: string, fieldName: string = "配置"): string => {
export const validateJsonConfig = (
value: string,
fieldName: string = "配置",
): string => {
if (!value.trim()) {
return "";
}
@@ -123,7 +129,7 @@ export const updateCommonConfigSnippet = (
error: snippetError,
};
}
const snippet = JSON.parse(snippetString) as Record<string, any>;
if (enabled) {
@@ -247,23 +253,23 @@ export const updateTomlCommonConfigSnippet = (
const removeTomlCommonConfig = (tomlString: string): string => {
const startIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_START);
const endIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_END);
if (startIdx === -1 || endIdx === -1) {
return tomlString;
}
// 找到标记前的换行符（如果有）
let realStartIdx = startIdx;
if (startIdx > 0 && tomlString[startIdx - 1] === '\n') {
if (startIdx > 0 && tomlString[startIdx - 1] === "\n") {
realStartIdx = startIdx - 1;
}
// 找到标记后的换行符（如果有）
let realEndIdx = endIdx + COMMON_CONFIG_MARKER_END.length;
if (realEndIdx < tomlString.length && tomlString[realEndIdx] === '\n') {
if (realEndIdx < tomlString.length && tomlString[realEndIdx] === "\n") {
realEndIdx = realEndIdx + 1;
}
return tomlString.slice(0, realStartIdx) + tomlString.slice(realEndIdx);
};
@@ -273,19 +279,19 @@ export const hasTomlCommonConfigSnippet = (
snippetString: string,
): boolean => {
if (!snippetString.trim()) return false;
const startIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_START);
const endIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_END);
if (startIdx === -1 || endIdx === -1 || startIdx >= endIdx) {
return false;
}
// 提取标记之间的内容
const existingSnippet = tomlString
.slice(startIdx + COMMON_CONFIG_MARKER_START.length, endIdx)
.trim();
return existingSnippet === snippetString.trim();
};