Revert "refactor: improve UI layout for VS Code and common config options"

This reverts commit 2a9f093210.

src/components/ProviderForm/CodexConfigEditor.tsx

@@ -30,7 +30,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
   authError,
 }) => {
   const [isCommonConfigModalOpen, setIsCommonConfigModalOpen] = useState(false);
-  const [writeVscodeConfig, setWriteVscodeConfig] = useState(false);
+  const [isWritingVscode, setIsWritingVscode] = useState(false);
   const [vscodeError, setVscodeError] = useState("");
   const [vscodeSuccess, setVscodeSuccess] = useState("");
 
@@ -48,51 +48,6 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
     return () => window.clearTimeout(timer);
   }, [vscodeSuccess]);
 
-  // 监听 writeVscodeConfig 变化并执行写入
-  useEffect(() => {
-    if (!writeVscodeConfig) return;
-
-    const performWrite = async () => {
-      setVscodeError("");
-      setVscodeSuccess("");
-
-      if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
-        setVscodeError("当前环境暂不支持写入 VS Code 配置");
-        setWriteVscodeConfig(false);
-        return;
-      }
-
-      const trimmed = configValue.trim();
-      if (!trimmed) {
-        setVscodeError("请先填写 config.toml，再写入 VS Code 配置");
-        setWriteVscodeConfig(false);
-        return;
-      }
-
-      const baseUrl = extractBaseUrlFromToml(trimmed);
-      if (!baseUrl) {
-        setVscodeError("未在 config.toml 中找到 base_url 字段");
-        setWriteVscodeConfig(false);
-        return;
-      }
-
-      try {
-        const success = await window.api.writeVscodeSettings(baseUrl);
-        if (success) {
-          setVscodeSuccess("已写入 VS Code 配置");
-        } else {
-          setVscodeError("写入 VS Code 配置失败，请稍后重试");
-          setWriteVscodeConfig(false);
-        }
-      } catch (error) {
-        setVscodeError(`写入 VS Code 配置失败: ${String(error)}`);
-        setWriteVscodeConfig(false);
-      }
-    };
-
-    performWrite();
-  }, [writeVscodeConfig, configValue]);
-
   // 支持按下 ESC 关闭弹窗
   useEffect(() => {
     if (!isCommonConfigModalOpen) return;
@@ -111,6 +66,54 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
     setIsCommonConfigModalOpen(false);
   };
 
+  const handleAuthChange = (value: string) => {
+    onAuthChange(value);
+  };
+
+  const handleConfigChange = (value: string) => {
+    onConfigChange(value);
+  };
+
+  const handleCommonConfigSnippetChange = (value: string) => {
+    onCommonConfigSnippetChange(value);
+  };
+
+  const handleWriteVscodeConfig = async () => {
+    setVscodeError("");
+    setVscodeSuccess("");
+
+    if (typeof window === "undefined" || !window.api?.writeVscodeSettings) {
+      setVscodeError("当前环境暂不支持写入 VS Code 配置");
+      return;
+    }
+
+    const trimmed = configValue.trim();
+    if (!trimmed) {
+      setVscodeError("请先填写 config.toml，再写入 VS Code 配置");
+      return;
+    }
+
+    const baseUrl = extractBaseUrlFromToml(trimmed);
+    if (!baseUrl) {
+      setVscodeError("未在 config.toml 中找到 base_url 字段");
+      return;
+    }
+
+    setIsWritingVscode(true);
+    try {
+      const success = await window.api.writeVscodeSettings(baseUrl);
+      if (success) {
+        setVscodeSuccess("已写入 VS Code 配置");
+      } else {
+        setVscodeError("写入 VS Code 配置失败，请稍后重试");
+      }
+    } catch (error) {
+      setVscodeError(`写入 VS Code 配置失败: ${String(error)}`);
+    } finally {
+      setIsWritingVscode(false);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div className="space-y-2">
@@ -123,7 +126,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
         <textarea
           id="codexAuth"
           value={authValue}
-          onChange={(e) => onAuthChange(e.target.value)}
+          onChange={(e) => handleAuthChange(e.target.value)}
           onBlur={onAuthBlur}
           placeholder={`{
   "OPENAI_API_KEY": "sk-your-api-key-here"
@@ -152,43 +155,13 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       </div>
 
       <div className="space-y-2">
-        <div className="flex items-start justify-between">
+        <div className="flex items-center justify-between">
           <label
             htmlFor="codexConfig"
             className="block text-sm font-medium text-gray-900 dark:text-gray-100"
           >
             config.toml (TOML)
           </label>
-          
-          {/* 右侧对齐的双列布局 - 使用flex而非grid以更好控制宽度 */}
-          <div className="flex gap-3">
-            {/* 左列：VS Code 配置 */}
-            <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">
-                <input
-                  type="checkbox"
-                  checked={writeVscodeConfig}
-                  onChange={(e) => setWriteVscodeConfig(e.target.checked)}
-                  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 配置
-              </label>
-              <div className="h-4 w-48 flex justify-end">
-                {vscodeSuccess && !vscodeError && (
-                  <p className="text-xs text-emerald-600 dark:text-emerald-400 text-right truncate">
-                    {vscodeSuccess}
-                  </p>
-                )}
-                {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">
             <input
               type="checkbox"
@@ -198,26 +171,43 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
             />
             写入通用配置
           </label>
+        </div>
+        <div className="flex items-center justify-end gap-3">
+          <button
+            type="button"
+            onClick={handleWriteVscodeConfig}
+            disabled={isWritingVscode}
+            className="text-xs text-blue-500 dark:text-blue-400 hover:underline disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {isWritingVscode ? "写入中..." : "写入 VS Code 配置"}
+          </button>
           <button
             type="button"
             onClick={() => setIsCommonConfigModalOpen(true)}
-                className="text-xs text-blue-500 dark:text-blue-400 hover:underline whitespace-nowrap"
+            className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
           >
             编辑通用配置
           </button>
+        </div>
         {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 text-right">
             {commonConfigError}
           </p>
         )}
-            </div>
+        {vscodeError && (
-          </div>
+          <p className="text-xs text-red-500 dark:text-red-400 text-right">
-        </div>
+            {vscodeError}
-        
+          </p>
+        )}
+        {vscodeSuccess && !vscodeError && (
+          <p className="text-xs text-emerald-600 dark:text-emerald-400 text-right">
+            {vscodeSuccess}
+          </p>
+        )}
         <textarea
           id="codexConfig"
           value={configValue}
-          onChange={(e) => onConfigChange(e.target.value)}
+          onChange={(e) => handleConfigChange(e.target.value)}
           placeholder=""
           rows={8}
           className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors resize-y min-h-[10rem]"
@@ -270,7 +260,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
               </p>
               <textarea
                 value={commonConfigSnippet}
-                onChange={(e) => onCommonConfigSnippetChange(e.target.value)}
+                onChange={(e) => handleCommonConfigSnippetChange(e.target.value)}
                 placeholder={`# Common Codex config
 # Add your common TOML configuration here`}
                 rows={12}