fix: improve VS Code config toggle handling with async state management

- Add loading state to prevent race conditions during config operations
- Convert effect-based approach to direct async handler for better control
- Support both writing and removing VS Code config through toggle
- Disable checkbox during async operations to prevent multiple requests
This commit is contained in:
Jason
2025-09-18 14:46:23 +08:00
parent 2a9f093210
commit 32e66e054b

View File

@@ -33,6 +33,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
const [writeVscodeConfig, setWriteVscodeConfig] = useState(false);
const [vscodeError, setVscodeError] = useState("");
const [vscodeSuccess, setVscodeSuccess] = useState("");
const [isWritingVscode, setIsWritingVscode] = useState(false);
useEffect(() => {
if (commonConfigError && !isCommonConfigModalOpen) {
@@ -48,20 +49,20 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
return () => window.clearTimeout(timer);
}, [vscodeSuccess]);
// 监听 writeVscodeConfig 变化并执行写入
useEffect(() => {
if (!writeVscodeConfig) return;
const handleVscodeConfigToggle = async (checked: boolean) => {
if (isWritingVscode) return;
const performWrite = async () => {
setVscodeError("");
setVscodeSuccess("");
setWriteVscodeConfig(checked);
setVscodeError("");
setVscodeSuccess("");
if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
setVscodeError("当前环境暂不支持写入 VS Code 配置");
setWriteVscodeConfig(false);
return;
}
if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
setVscodeError("当前环境暂不支持写入 VS Code 配置");
setWriteVscodeConfig(!checked);
return;
}
if (checked) {
const trimmed = configValue.trim();
if (!trimmed) {
setVscodeError("请先填写 config.toml再写入 VS Code 配置");
@@ -76,6 +77,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
return;
}
setIsWritingVscode(true);
try {
const success = await window.api.writeVscodeSettings(baseUrl);
if (success) {
@@ -87,11 +89,29 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
} catch (error) {
setVscodeError(`写入 VS Code 配置失败: ${String(error)}`);
setWriteVscodeConfig(false);
} finally {
setIsWritingVscode(false);
}
};
performWrite();
}, [writeVscodeConfig, configValue]);
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);
}
};
// 支持按下 ESC 关闭弹窗
useEffect(() => {
@@ -168,7 +188,8 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
<input
type="checkbox"
checked={writeVscodeConfig}
onChange={(e) => setWriteVscodeConfig(e.target.checked)}
onChange={(e) => handleVscodeConfigToggle(e.target.checked)}
disabled={isWritingVscode}
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
/>
VS Code