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

@@ -221,12 +221,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
                         {provider.name}
                       </h3>
                       {/* 分类徽章已移除 */}
-                      {isCurrent && (
+                      <div className={cn(
-                        <div className={badgeStyles.success}>
+                        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",

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;
 
 // 输入控件样式