From 67db492330ef73af67a71c06be263e4a31cde43a Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 19 Sep 2025 11:26:51 +0800
Subject: [PATCH] fix: prevent layout shift when switching providers

- Keep 'Current' badge always rendered with invisible class when not active
- Keep 'Apply to VS Code' button always rendered with invisible class when not active
- Use consistent border width (1px) for both selected and unselected cards
- Remove ring utility that was causing extra space outside elements

This ensures all provider cards maintain the same height regardless of selection state
---
 src/components/ProviderList.tsx | 16 +++++++++-------
 src/lib/styles.ts               |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index a4a886a..d08cd6b 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -221,12 +221,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
                         {provider.name}
                       </h3>
                       {/* 分类徽章已移除 */}
-                      {isCurrent && (
-                        <div className={badgeStyles.success}>
-                          <CheckCircle2 size={12} />
-                          当前使用
-                        </div>
-                      )}
+                      <div className={cn(
+                        badgeStyles.success,
+                        !isCurrent && "invisible"
+                      )}>
+                        <CheckCircle2 size={12} />
+                        当前使用
+                      </div>
                     </div>
 
                     <div className="flex items-center gap-2 text-sm">
@@ -253,7 +254,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
                   </div>
 
                   <div className="flex items-center gap-2 ml-4">
-                    {appType === "codex" && isCurrent && provider.category !== "official" && (
+                    {appType === "codex" && provider.category !== "official" && (
                       <button
                         onClick={() =>
                           vscodeAppliedFor === provider.id
@@ -262,6 +263,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
                         }
                         className={cn(
                           "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                          !isCurrent && "invisible",
                           vscodeAppliedFor === provider.id
                             ? "bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
                             : "bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 075fe78..76b53b5 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -38,7 +38,7 @@ export const cardStyles = {
 
   // 选中/激活态卡片
   selected:
-    "bg-white rounded-lg border border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5 p-4 dark:bg-gray-900 dark:border-blue-400 dark:ring-blue-400/20 dark:bg-blue-400/10",
+    "bg-white rounded-lg border border-blue-500 shadow-sm bg-blue-50 p-4 dark:bg-gray-900 dark:border-blue-400 dark:bg-blue-400/10",
 } as const;
 
 // 输入控件样式