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:
@@ -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 配置
|
||||
|
||||
Reference in New Issue
Block a user