From 5e2e80b00de4e5065be390d0e67c78b65dc0744e Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Wed, 27 Aug 2025 10:39:39 +0800
Subject: [PATCH] fix: prevent modal header jumping when toggling API key field

Reserve fixed height for API key input container and use visibility/opacity
for show/hide instead of conditional rendering to maintain consistent modal
height when selecting presets
---
 src/components/AddProviderModal.css | 12 ++++++++++++
 src/components/ProviderForm.tsx     | 24 +++++++++++-------------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/AddProviderModal.css b/src/components/AddProviderModal.css
index 7804f31..521cfbc 100644
--- a/src/components/AddProviderModal.css
+++ b/src/components/AddProviderModal.css
@@ -140,6 +140,18 @@
   font-weight: 500;
 }
 
+/* API Key 输入框容器 - 预留空间避免抖动 */
+.form-group.api-key-group {
+  min-height: 88px; /* 固定高度：label + input + 间距 */
+  transition: opacity 0.2s ease;
+}
+
+.form-group.api-key-group.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .form-group input,
 .form-group textarea {
   width: 100%;
diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index d3f9af4..8176f65 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -255,19 +255,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
               />
             </div>
 
-            {showApiKey && (
-              <div className="form-group">
-                <label htmlFor="apiKey">API Key *</label>
-                <input
-                  type="text"
-                  id="apiKey"
-                  value={apiKey}
-                  onChange={(e) => handleApiKeyChange(e.target.value)}
-                  placeholder="只需要填这里，下方配置会自动填充"
-                  autoComplete="off"
-                />
-              </div>
-            )}
+            <div className={`form-group api-key-group ${!showApiKey ? 'hidden' : ''}`}>
+              <label htmlFor="apiKey">API Key *</label>
+              <input
+                type="text"
+                id="apiKey"
+                value={apiKey}
+                onChange={(e) => handleApiKeyChange(e.target.value)}
+                placeholder="只需要填这里，下方配置会自动填充"
+                autoComplete="off"
+              />
+            </div>
 
             <div className="form-group">
               <label htmlFor="websiteUrl">官网地址</label>