From 94abab3260e01ac144a543f1240e2029bc367b74 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Sun, 11 Jan 2026 19:33:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E9=87=8D=E6=9E=84=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=A1=86=E4=B8=BA=E5=8D=95=E5=88=97=E5=8B=BE=E9=80=89=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BatchAssignModelsDialog: 从左右双栏改为单列勾选，支持统一保存
- KeyAllowedModelsEditDialog: 添加分组折叠功能，优化布局
- Dialog: 调整移动端内边距适配
- ProviderDetailDrawer: 密钥列表改为两行显示
- KeyFormDialog: 缩小对话框尺寸
- ModelsTab: 调整表格列宽
---
 frontend/src/components/ui/dialog/Dialog.vue  |    4 +-
 .../components/BatchAssignModelsDialog.vue    | 1023 ++++++++---------
 .../components/KeyAllowedModelsEditDialog.vue |  133 ++-
 .../providers/components/KeyFormDialog.vue    |    4 +-
 .../components/ProviderDetailDrawer.vue       |   30 +-
 .../components/provider-tabs/ModelsTab.vue    |    8 +-
 6 files changed, 607 insertions(+), 595 deletions(-)

diff --git a/frontend/src/components/ui/dialog/Dialog.vue b/frontend/src/components/ui/dialog/Dialog.vue
index b35b771..d169c50 100644
--- a/frontend/src/components/ui/dialog/Dialog.vue
+++ b/frontend/src/components/ui/dialog/Dialog.vue
@@ -22,7 +22,7 @@
         />
       </Transition>
 
-      <div class="relative flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 pointer-events-none">
+      <div class="relative flex min-h-full items-end justify-center px-3 py-4 text-center sm:items-center sm:p-0 pointer-events-none">
         <!-- 对话框内容 -->
         <Transition
           enter-active-class="duration-300 ease-out"
@@ -34,7 +34,7 @@
         >
           <div
             v-if="isOpen"
-            class="relative transform rounded-lg bg-background text-left shadow-2xl transition-all sm:my-8 sm:w-full border border-border pointer-events-auto"
+            class="relative transform rounded-lg bg-background text-left shadow-2xl transition-all w-full sm:my-8 sm:w-full border border-border pointer-events-auto"
             :style="{ zIndex: contentZIndex }"
             :class="maxWidthClass"
             @click.stop
diff --git a/frontend/src/features/providers/components/BatchAssignModelsDialog.vue b/frontend/src/features/providers/components/BatchAssignModelsDialog.vue
index 1618cca..3fd230d 100644
--- a/frontend/src/features/providers/components/BatchAssignModelsDialog.vue
+++ b/frontend/src/features/providers/components/BatchAssignModelsDialog.vue
@@ -1,364 +1,226 @@
 <template>
   <Dialog
     :model-value="open"
-    title="批量添加关联模型"
-    description="为提供商批量添加模型实现，提供商将自动继承模型的价格和能力，可在添加后单独修改"
+    :title="providerName ? `批量管理模型 - ${providerName}` : '批量管理模型'"
+    description="选中的模型将被关联到提供商，取消选中将移除关联"
     :icon="Layers"
-    size="4xl"
-    @update:model-value="$emit('update:open', $event)"
+    size="2xl"
+    @update:model-value="handleDialogUpdate"
   >
     <template #default>
       <div class="space-y-4">
-        <!-- 提供商信息头部 -->
-        <div class="rounded-lg border bg-muted/30 p-4">
-          <div class="flex items-start justify-between">
-            <div>
-              <p class="font-semibold text-lg">
-                {{ providerName }}
-              </p>
-              <p class="text-sm text-muted-foreground font-mono">
-                {{ providerIdentifier }}
-              </p>
-            </div>
-            <Badge
-              variant="outline"
-              class="text-xs"
-            >
-              当前 {{ existingModels.length }} 个模型
-            </Badge>
+        <!-- 搜索栏 -->
+        <div class="flex items-center gap-2">
+          <div class="flex-1 relative">
+            <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              v-model="searchQuery"
+              placeholder="搜索模型..."
+              class="pl-8 h-9"
+            />
           </div>
+          <button
+            v-if="upstreamModelsLoaded"
+            type="button"
+            class="p-2 hover:bg-muted rounded-md transition-colors shrink-0"
+            title="刷新上游模型"
+            :disabled="fetchingUpstreamModels"
+            @click="fetchUpstreamModels(true)"
+          >
+            <RefreshCw
+              class="w-4 h-4"
+              :class="{ 'animate-spin': fetchingUpstreamModels }"
+            />
+          </button>
+          <button
+            v-else-if="!fetchingUpstreamModels"
+            type="button"
+            class="p-2 hover:bg-muted rounded-md transition-colors shrink-0"
+            title="从提供商获取模型"
+            @click="fetchUpstreamModels()"
+          >
+            <Zap class="w-4 h-4" />
+          </button>
+          <Loader2
+            v-else
+            class="w-4 h-4 animate-spin text-muted-foreground shrink-0"
+          />
         </div>
 
-        <!-- 左右对比布局 -->
-        <div class="flex gap-2 items-stretch">
-          <!-- 左侧：可添加的模型（分组折叠） -->
-          <div class="flex-1 space-y-2">
-            <div class="flex items-center justify-between gap-2">
-              <p class="text-sm font-medium shrink-0">
-                可添加
-              </p>
-              <div class="flex-1 relative">
-                <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
-                <Input
-                  v-model="searchQuery"
-                  placeholder="搜索模型..."
-                  class="pl-7 h-7 text-xs"
-                />
-              </div>
-              <button
-                v-if="upstreamModelsLoaded"
-                type="button"
-                class="p-1.5 hover:bg-muted rounded-md transition-colors shrink-0"
-                title="刷新上游模型"
-                :disabled="fetchingUpstreamModels"
-                @click="fetchUpstreamModels(true)"
-              >
-                <RefreshCw
-                  class="w-3.5 h-3.5"
-                  :class="{ 'animate-spin': fetchingUpstreamModels }"
-                />
-              </button>
-              <button
-                v-else-if="!fetchingUpstreamModels"
-                type="button"
-                class="p-1.5 hover:bg-muted rounded-md transition-colors shrink-0"
-                title="从提供商获取模型"
-                @click="fetchUpstreamModels"
-              >
-                <Zap class="w-3.5 h-3.5" />
-              </button>
-              <Loader2
-                v-else
-                class="w-3.5 h-3.5 animate-spin text-muted-foreground shrink-0"
-              />
+        <!-- 单列模型列表 -->
+        <div class="border rounded-lg overflow-hidden">
+          <div class="max-h-96 overflow-y-auto">
+            <div
+              v-if="loadingGlobalModels"
+              class="flex items-center justify-center py-12"
+            >
+              <Loader2 class="w-6 h-6 animate-spin text-primary" />
             </div>
-            <div class="border rounded-lg h-80 overflow-y-auto">
-              <div
-                v-if="loadingGlobalModels"
-                class="flex items-center justify-center h-full"
-              >
-                <Loader2 class="w-6 h-6 animate-spin text-primary" />
-              </div>
-              <div
-                v-else-if="totalAvailableCount === 0 && !upstreamModelsLoaded"
-                class="flex flex-col items-center justify-center h-full text-muted-foreground"
-              >
-                <Layers class="w-10 h-10 mb-2 opacity-30" />
-                <p class="text-sm">
-                  所有模型均已关联
-                </p>
-              </div>
-              <div
-                v-else
-                class="p-2 space-y-2"
-              >
-                <!-- 全局模型折叠组 -->
+
+            <template v-else>
+              <!-- 全局模型组 -->
+              <div v-if="filteredGlobalModels.length > 0 || !upstreamModelsLoaded">
                 <div
-                  v-if="availableGlobalModels.length > 0 || !upstreamModelsLoaded"
-                  class="border rounded-lg overflow-hidden"
+                  class="flex items-center justify-between px-3 py-2 bg-muted sticky top-0 z-10 cursor-pointer hover:bg-muted/80 transition-colors"
+                  @click="toggleGroupCollapse('global')"
                 >
-                  <div class="flex items-center gap-2 px-3 py-2 bg-muted/30">
-                    <button
-                      type="button"
-                      class="flex items-center gap-2 flex-1 hover:bg-muted/50 -mx-1 px-1 rounded transition-colors"
-                      @click="toggleGroupCollapse('global')"
-                    >
-                      <ChevronDown
-                        class="w-4 h-4 transition-transform shrink-0"
-                        :class="collapsedGroups.has('global') ? '-rotate-90' : ''"
-                      />
-                      <span class="text-xs font-medium">
-                        全局模型
-                      </span>
-                      <span class="text-xs text-muted-foreground">
-                        ({{ availableGlobalModels.length }})
-                      </span>
-                    </button>
-                    <button
-                      v-if="availableGlobalModels.length > 0"
-                      type="button"
-                      class="text-xs text-primary hover:underline shrink-0"
-                      @click.stop="selectAllGlobalModels"
-                    >
-                      {{ isAllGlobalModelsSelected ? '取消' : '全选' }}
-                    </button>
+                  <div class="flex items-center gap-2">
+                    <ChevronDown
+                      class="w-4 h-4 transition-transform shrink-0"
+                      :class="collapsedGroups.has('global') ? '-rotate-90' : ''"
+                    />
+                    <span class="text-xs font-medium">全局模型</span>
+                    <span class="text-xs text-muted-foreground">({{ filteredGlobalModels.length }})</span>
+                  </div>
+                  <button
+                    v-if="filteredGlobalModels.length > 0"
+                    type="button"
+                    class="text-xs text-primary hover:underline shrink-0"
+                    @click.stop="toggleAllGlobalModels"
+                  >
+                    {{ isAllGlobalModelsSelected ? '取消全选' : '全选' }}
+                  </button>
+                </div>
+                <div
+                  v-show="!collapsedGroups.has('global')"
+                  class="space-y-1 p-2"
+                >
+                  <div
+                    v-if="filteredGlobalModels.length === 0"
+                    class="py-4 text-center text-xs text-muted-foreground"
+                  >
+                    暂无可用全局模型
                   </div>
                   <div
-                    v-show="!collapsedGroups.has('global')"
-                    class="p-2 space-y-1 border-t"
+                    v-for="model in filteredGlobalModels"
+                    :key="model.id"
+                    class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted cursor-pointer"
+                    @click="toggleGlobalModelSelection(model.id)"
                   >
                     <div
-                      v-if="availableGlobalModels.length === 0"
-                      class="py-4 text-center text-xs text-muted-foreground"
+                      class="w-4 h-4 border rounded flex items-center justify-center shrink-0"
+                      :class="isGlobalModelSelected(model.id) ? 'bg-primary border-primary' : ''"
                     >
-                      所有全局模型均已关联
+                      <Check
+                        v-if="isGlobalModelSelected(model.id)"
+                        class="w-3 h-3 text-primary-foreground"
+                      />
                     </div>
-                    <div
-                      v-for="model in availableGlobalModels"
-                      v-else
-                      :key="model.id"
-                      class="flex items-center gap-2 p-2 rounded-lg border transition-colors cursor-pointer"
-                      :class="selectedGlobalModelIds.includes(model.id)
-                        ? 'border-primary bg-primary/10'
-                        : 'hover:bg-muted/50'"
-                      @click="toggleGlobalModelSelection(model.id)"
-                    >
-                      <Checkbox
-                        :checked="selectedGlobalModelIds.includes(model.id)"
-                        @update:checked="toggleGlobalModelSelection(model.id)"
-                        @click.stop
-                      />
-                      <div class="flex-1 min-w-0">
-                        <p class="font-medium text-sm truncate">
-                          {{ model.display_name }}
-                        </p>
-                        <p class="text-xs text-muted-foreground truncate font-mono">
-                          {{ model.name }}
-                        </p>
-                      </div>
-                      <Badge
-                        :variant="model.is_active ? 'outline' : 'secondary'"
-                        :class="model.is_active ? 'text-green-600 border-green-500/60' : ''"
-                        class="text-xs shrink-0"
-                      >
-                        {{ model.is_active ? '活跃' : '停用' }}
-                      </Badge>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 从提供商获取的模型折叠组 -->
-                <div
-                  v-for="group in upstreamModelGroups"
-                  :key="group.api_format"
-                  class="border rounded-lg overflow-hidden"
-                >
-                  <div class="flex items-center gap-2 px-3 py-2 bg-muted/30">
-                    <button
-                      type="button"
-                      class="flex items-center gap-2 flex-1 hover:bg-muted/50 -mx-1 px-1 rounded transition-colors"
-                      @click="toggleGroupCollapse(group.api_format)"
-                    >
-                      <ChevronDown
-                        class="w-4 h-4 transition-transform shrink-0"
-                        :class="collapsedGroups.has(group.api_format) ? '-rotate-90' : ''"
-                      />
-                      <span class="text-xs font-medium">
-                        {{ API_FORMAT_LABELS[group.api_format] || group.api_format }}
-                      </span>
-                      <span class="text-xs text-muted-foreground">
-                        ({{ group.models.length }})
-                      </span>
-                    </button>
-                    <button
-                      type="button"
-                      class="text-xs text-primary hover:underline shrink-0"
-                      @click.stop="selectAllUpstreamModels(group.api_format)"
-                    >
-                      {{ isUpstreamGroupAllSelected(group.api_format) ? '取消' : '全选' }}
-                    </button>
-                  </div>
-                  <div
-                    v-show="!collapsedGroups.has(group.api_format)"
-                    class="p-2 space-y-1 border-t"
-                  >
-                    <div
-                      v-for="model in group.models"
-                      :key="model.id"
-                      class="flex items-center gap-2 p-2 rounded-lg border transition-colors cursor-pointer"
-                      :class="selectedUpstreamModelIds.includes(model.id)
-                        ? 'border-primary bg-primary/10'
-                        : 'hover:bg-muted/50'"
-                      @click="toggleUpstreamModelSelection(model.id)"
-                    >
-                      <Checkbox
-                        :checked="selectedUpstreamModelIds.includes(model.id)"
-                        @update:checked="toggleUpstreamModelSelection(model.id)"
-                        @click.stop
-                      />
-                      <div class="flex-1 min-w-0">
-                        <p class="font-medium text-sm truncate">
-                          {{ model.id }}
-                        </p>
-                        <p class="text-xs text-muted-foreground truncate font-mono">
-                          {{ model.owned_by || model.id }}
-                        </p>
-                      </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium truncate">{{ model.display_name }}</p>
+                      <p class="text-xs text-muted-foreground truncate font-mono">{{ model.name }}</p>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
 
-          <!-- 中间：操作按钮 -->
-          <div class="flex flex-col items-center justify-center w-12 shrink-0 gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              class="w-9 h-8"
-              :class="totalSelectedCount > 0 && !submittingAdd ? 'border-primary' : ''"
-              :disabled="totalSelectedCount === 0 || submittingAdd"
-              title="添加选中"
-              @click="batchAddSelected"
-            >
-              <Loader2
-                v-if="submittingAdd"
-                class="w-4 h-4 animate-spin"
-              />
-              <ChevronRight
-                v-else
-                class="w-6 h-6 stroke-[3]"
-                :class="totalSelectedCount > 0 && !submittingAdd ? 'text-primary' : ''"
-              />
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              class="w-9 h-8"
-              :class="selectedRightIds.length > 0 && !submittingRemove ? 'border-primary' : ''"
-              :disabled="selectedRightIds.length === 0 || submittingRemove"
-              title="移除选中"
-              @click="batchRemoveSelected"
-            >
-              <Loader2
-                v-if="submittingRemove"
-                class="w-4 h-4 animate-spin"
-              />
-              <ChevronLeft
-                v-else
-                class="w-6 h-6 stroke-[3]"
-                :class="selectedRightIds.length > 0 && !submittingRemove ? 'text-primary' : ''"
-              />
-            </Button>
-          </div>
-
-          <!-- 右侧：已添加的模型 -->
-          <div class="flex-1 space-y-2">
-            <div class="flex items-center justify-between">
-              <p class="text-sm font-medium">
-                已添加
-              </p>
-              <Button
-                v-if="existingModels.length > 0"
-                variant="ghost"
-                size="sm"
-                class="h-6 px-2 text-xs"
-                @click="toggleSelectAllRight"
-              >
-                {{ isAllRightSelected ? '取消' : '全选' }}
-              </Button>
-            </div>
-            <div class="border rounded-lg h-80 overflow-y-auto">
+              <!-- 上游模型组 -->
               <div
-                v-if="existingModels.length === 0"
-                class="flex flex-col items-center justify-center h-full text-muted-foreground"
+                v-for="group in filteredUpstreamGroups"
+                :key="group.api_format"
+              >
+                <div
+                  class="flex items-center justify-between px-3 py-2 bg-muted sticky top-0 z-10 cursor-pointer hover:bg-muted/80 transition-colors"
+                  @click="toggleGroupCollapse(group.api_format)"
+                >
+                  <div class="flex items-center gap-2">
+                    <ChevronDown
+                      class="w-4 h-4 transition-transform shrink-0"
+                      :class="collapsedGroups.has(group.api_format) ? '-rotate-90' : ''"
+                    />
+                    <span class="text-xs font-medium">{{ API_FORMAT_LABELS[group.api_format] || group.api_format }}</span>
+                    <span class="text-xs text-muted-foreground">({{ group.models.length }})</span>
+                  </div>
+                  <button
+                    type="button"
+                    class="text-xs text-primary hover:underline shrink-0"
+                    @click.stop="toggleAllUpstreamGroup(group.api_format)"
+                  >
+                    {{ isUpstreamGroupAllSelected(group.api_format) ? '取消全选' : '全选' }}
+                  </button>
+                </div>
+                <div
+                  v-show="!collapsedGroups.has(group.api_format)"
+                  class="space-y-1 p-2"
+                >
+                  <div
+                    v-for="model in group.models"
+                    :key="model.id"
+                    class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted cursor-pointer"
+                    @click="toggleUpstreamModelSelection(model.id)"
+                  >
+                    <div
+                      class="w-4 h-4 border rounded flex items-center justify-center shrink-0"
+                      :class="isUpstreamModelSelected(model.id) ? 'bg-primary border-primary' : ''"
+                    >
+                      <Check
+                        v-if="isUpstreamModelSelected(model.id)"
+                        class="w-3 h-3 text-primary-foreground"
+                      />
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium truncate">{{ model.id }}</p>
+                      <p class="text-xs text-muted-foreground truncate font-mono">{{ model.owned_by || model.id }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 空状态 -->
+              <div
+                v-if="filteredGlobalModels.length === 0 && filteredUpstreamGroups.length === 0"
+                class="flex flex-col items-center justify-center py-12 text-muted-foreground"
               >
                 <Layers class="w-10 h-10 mb-2 opacity-30" />
-                <p class="text-sm">
-                  暂无关联模型
+                <p class="text-sm">{{ searchQuery ? '无匹配结果' : '暂无可用模型' }}</p>
+                <p
+                  v-if="!upstreamModelsLoaded"
+                  class="text-xs mt-1"
+                >
+                  点击上方按钮从上游获取模型
                 </p>
               </div>
-              <div
-                v-else
-                class="p-2 space-y-1"
-              >
-                <div
-                  v-for="model in existingModels"
-                  :key="'existing-' + model.id"
-                  class="flex items-center gap-2 p-2 rounded-lg border transition-colors cursor-pointer"
-                  :class="selectedRightIds.includes(model.id)
-                    ? 'border-primary bg-primary/10'
-                    : 'hover:bg-muted/50'"
-                  @click="toggleRightSelection(model.id)"
-                >
-                  <Checkbox
-                    :checked="selectedRightIds.includes(model.id)"
-                    @update:checked="toggleRightSelection(model.id)"
-                    @click.stop
-                  />
-                  <div class="flex-1 min-w-0">
-                    <p class="font-medium text-sm truncate">
-                      {{ model.global_model_display_name || model.provider_model_name }}
-                    </p>
-                    <p class="text-xs text-muted-foreground truncate font-mono">
-                      {{ model.provider_model_name }}
-                    </p>
-                  </div>
-                  <Badge
-                    :variant="model.is_active ? 'outline' : 'secondary'"
-                    :class="model.is_active ? 'text-green-600 border-green-500/60' : ''"
-                    class="text-xs shrink-0"
-                  >
-                    {{ model.is_active ? '活跃' : '停用' }}
-                  </Badge>
-                </div>
-              </div>
-            </div>
+            </template>
           </div>
         </div>
       </div>
     </template>
     <template #footer>
-      <Button
-        variant="outline"
-        @click="$emit('update:open', false)"
-      >
-        关闭
-      </Button>
+      <div class="flex items-center justify-between w-full">
+        <p class="text-xs text-muted-foreground">
+          {{ hasChanges ? `${pendingChangesCount} 项更改待保存` : '' }}
+        </p>
+        <div class="flex items-center gap-2">
+          <Button
+            :disabled="!hasChanges || saving"
+            @click="handleSave"
+          >
+            <Loader2
+              v-if="saving"
+              class="w-4 h-4 mr-1 animate-spin"
+            />
+            {{ saving ? '保存中...' : '保存' }}
+          </Button>
+          <Button
+            variant="outline"
+            @click="handleClose"
+          >
+            关闭
+          </Button>
+        </div>
+      </div>
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { Layers, Loader2, ChevronRight, ChevronLeft, ChevronDown, Zap, RefreshCw, Search } from 'lucide-vue-next'
+import { Layers, Loader2, ChevronDown, Zap, RefreshCw, Search, Check } from 'lucide-vue-next'
 import Dialog from '@/components/ui/dialog/Dialog.vue'
 import Button from '@/components/ui/button.vue'
-import Badge from '@/components/ui/badge.vue'
-import Checkbox from '@/components/ui/checkbox.vue'
 import Input from '@/components/ui/input.vue'
 import { useToast } from '@/composables/useToast'
+import { useConfirm } from '@/composables/useConfirm'
 import { parseApiError } from '@/utils/errorParser'
 import {
   getGlobalModels,
@@ -377,8 +239,7 @@ import { useUpstreamModelsCache, type UpstreamModel } from '../composables/useUp
 const props = defineProps<{
   open: boolean
   providerId: string
-  providerName: string
-  providerIdentifier: string
+  providerName?: string
 }>()
 
 const emit = defineEmits<{
@@ -389,23 +250,26 @@ const emit = defineEmits<{
 const { fetchModels: fetchCachedModels, clearCache, getCachedModels } = useUpstreamModelsCache()
 
 const { error: showError, success } = useToast()
+const { confirmWarning } = useConfirm()
 
 // 状态
 const loadingGlobalModels = ref(false)
-const submittingAdd = ref(false)
-const submittingRemove = ref(false)
 const fetchingUpstreamModels = ref(false)
 const upstreamModelsLoaded = ref(false)
+const saving = ref(false)
 
 // 数据
 const allGlobalModels = ref<GlobalModelResponse[]>([])
 const existingModels = ref<Model[]>([])
 const upstreamModels = ref<UpstreamModel[]>([])
 
-// 选择状态
-const selectedGlobalModelIds = ref<string[]>([])
-const selectedUpstreamModelIds = ref<string[]>([])
-const selectedRightIds = ref<string[]>([])
+// 选择状态（本地状态，保存时才提交）
+const selectedGlobalModelIds = ref<Set<string>>(new Set())
+const selectedUpstreamModelIds = ref<Set<string>>(new Set())
+
+// 初始状态（用于计算变更）
+const initialGlobalModelIds = ref<Set<string>>(new Set())
+const initialUpstreamModelNames = ref<Set<string>>(new Set())
 
 // 折叠状态
 const collapsedGroups = ref<Set<string>>(new Set())
@@ -413,66 +277,57 @@ const collapsedGroups = ref<Set<string>>(new Set())
 // 搜索状态
 const searchQuery = ref('')
 
-// 计算可添加的全局模型（排除已关联的）
-const availableGlobalModelsBase = computed(() => {
-  const existingGlobalModelIds = new Set(
+// 已关联的全局模型 ID 集合（从已有数据计算）
+const existingGlobalModelIds = computed(() => {
+  return new Set(
     existingModels.value
       .filter(m => m.global_model_id)
       .map(m => m.global_model_id)
   )
-  return allGlobalModels.value.filter(m => !existingGlobalModelIds.has(m.id))
 })
 
-// 搜索过滤后的全局模型
-const availableGlobalModels = computed(() => {
-  if (!searchQuery.value.trim()) return availableGlobalModelsBase.value
-  const query = searchQuery.value.toLowerCase()
-  return availableGlobalModelsBase.value.filter(m =>
-    m.name.toLowerCase().includes(query) ||
-    m.display_name.toLowerCase().includes(query)
-  )
-})
-
-// 计算可添加的上游模型（排除已关联的，包括主模型名和映射名称）
-const availableUpstreamModelsBase = computed(() => {
-  const existingModelNames = new Set<string>()
+// 已关联的上游模型名称集合
+const existingUpstreamModelNames = computed(() => {
+  const names = new Set<string>()
   for (const m of existingModels.value) {
-    // 主模型名
-    existingModelNames.add(m.provider_model_name)
-    // 映射名称
+    names.add(m.provider_model_name)
     for (const mapping of m.provider_model_mappings ?? []) {
-      if (mapping.name) existingModelNames.add(mapping.name)
+      if (mapping.name) names.add(mapping.name)
     }
   }
-  return upstreamModels.value.filter(m => !existingModelNames.has(m.id))
+  return names
 })
 
-// 搜索过滤后的上游模型
-const availableUpstreamModels = computed(() => {
-  if (!searchQuery.value.trim()) return availableUpstreamModelsBase.value
-  const query = searchQuery.value.toLowerCase()
-  return availableUpstreamModelsBase.value.filter(m =>
-    m.id.toLowerCase().includes(query) ||
-    (m.owned_by && m.owned_by.toLowerCase().includes(query))
-  )
+// 过滤后的全局模型
+const filteredGlobalModels = computed(() => {
+  const query = searchQuery.value.toLowerCase().trim()
+  return allGlobalModels.value.filter(m => {
+    if (query && !m.name.toLowerCase().includes(query) && !m.display_name.toLowerCase().includes(query)) {
+      return false
+    }
+    return true
+  })
 })
 
-// 按 API 格式分组的上游模型
-const upstreamModelGroups = computed(() => {
+// 过滤后的上游模型（按 API 格式分组）
+const filteredUpstreamGroups = computed(() => {
+  if (!upstreamModelsLoaded.value) return []
+
+  const query = searchQuery.value.toLowerCase().trim()
   const groups: Record<string, UpstreamModel[]> = {}
 
-  for (const model of availableUpstreamModels.value) {
+  for (const model of upstreamModels.value) {
+    if (query && !model.id.toLowerCase().includes(query)) continue
+
     const format = model.api_format || 'unknown'
-    if (!groups[format]) {
-      groups[format] = []
-    }
+    if (!groups[format]) groups[format] = []
     groups[format].push(model)
   }
 
-  // 按 API_FORMAT_LABELS 的顺序排序
   const order = Object.keys(API_FORMAT_LABELS)
   return Object.entries(groups)
     .map(([api_format, models]) => ({ api_format, models }))
+    .filter(g => g.models.length > 0)
     .sort((a, b) => {
       const aIndex = order.indexOf(a.api_format)
       const bIndex = order.indexOf(b.api_format)
@@ -483,33 +338,265 @@ const upstreamModelGroups = computed(() => {
     })
 })
 
-// 总可添加数量
-const totalAvailableCount = computed(() => {
-  return availableGlobalModels.value.length + availableUpstreamModels.value.length
-})
+// 检查全局模型是否已选中
+function isGlobalModelSelected(globalModelId: string): boolean {
+  return selectedGlobalModelIds.value.has(globalModelId)
+}
 
-// 总选中数量
-const totalSelectedCount = computed(() => {
-  return selectedGlobalModelIds.value.length + selectedUpstreamModelIds.value.length
-})
-
-// 全选状态
-const isAllRightSelected = computed(() =>
-  existingModels.value.length > 0 &&
-  selectedRightIds.value.length === existingModels.value.length
-)
+// 检查上游模型是否已选中
+function isUpstreamModelSelected(modelId: string): boolean {
+  return selectedUpstreamModelIds.value.has(modelId)
+}
 
 // 全局模型是否全选
 const isAllGlobalModelsSelected = computed(() => {
-  if (availableGlobalModels.value.length === 0) return false
-  return availableGlobalModels.value.every(m => selectedGlobalModelIds.value.includes(m.id))
+  if (filteredGlobalModels.value.length === 0) return false
+  return filteredGlobalModels.value.every(m => isGlobalModelSelected(m.id))
 })
 
 // 检查某个上游组是否全选
 function isUpstreamGroupAllSelected(apiFormat: string): boolean {
-  const group = upstreamModelGroups.value.find(g => g.api_format === apiFormat)
+  const group = filteredUpstreamGroups.value.find(g => g.api_format === apiFormat)
   if (!group || group.models.length === 0) return false
-  return group.models.every(m => selectedUpstreamModelIds.value.includes(m.id))
+  return group.models.every(m => isUpstreamModelSelected(m.id))
+}
+
+// 计算待添加的全局模型
+const globalModelsToAdd = computed(() => {
+  const toAdd: string[] = []
+  for (const id of selectedGlobalModelIds.value) {
+    if (!initialGlobalModelIds.value.has(id)) {
+      toAdd.push(id)
+    }
+  }
+  return toAdd
+})
+
+// 计算待移除的全局模型
+const globalModelsToRemove = computed(() => {
+  const toRemove: string[] = []
+  for (const id of initialGlobalModelIds.value) {
+    if (!selectedGlobalModelIds.value.has(id)) {
+      toRemove.push(id)
+    }
+  }
+  return toRemove
+})
+
+// 计算待添加的上游模型
+const upstreamModelsToAdd = computed(() => {
+  const toAdd: string[] = []
+  for (const id of selectedUpstreamModelIds.value) {
+    if (!initialUpstreamModelNames.value.has(id)) {
+      toAdd.push(id)
+    }
+  }
+  return toAdd
+})
+
+// 计算待移除的上游模型
+const upstreamModelsToRemove = computed(() => {
+  const toRemove: string[] = []
+  for (const id of initialUpstreamModelNames.value) {
+    if (!selectedUpstreamModelIds.value.has(id)) {
+      toRemove.push(id)
+    }
+  }
+  return toRemove
+})
+
+// 是否有变更
+const hasChanges = computed(() => {
+  return globalModelsToAdd.value.length > 0 ||
+    globalModelsToRemove.value.length > 0 ||
+    upstreamModelsToAdd.value.length > 0 ||
+    upstreamModelsToRemove.value.length > 0
+})
+
+// 待变更数量
+const pendingChangesCount = computed(() => {
+  return globalModelsToAdd.value.length +
+    globalModelsToRemove.value.length +
+    upstreamModelsToAdd.value.length +
+    upstreamModelsToRemove.value.length
+})
+
+// 切换全局模型选择
+function toggleGlobalModelSelection(id: string) {
+  if (selectedGlobalModelIds.value.has(id)) {
+    selectedGlobalModelIds.value.delete(id)
+  } else {
+    selectedGlobalModelIds.value.add(id)
+  }
+  selectedGlobalModelIds.value = new Set(selectedGlobalModelIds.value)
+}
+
+// 切换上游模型选择
+function toggleUpstreamModelSelection(id: string) {
+  if (selectedUpstreamModelIds.value.has(id)) {
+    selectedUpstreamModelIds.value.delete(id)
+  } else {
+    selectedUpstreamModelIds.value.add(id)
+  }
+  selectedUpstreamModelIds.value = new Set(selectedUpstreamModelIds.value)
+}
+
+// 全选/取消全选全局模型
+function toggleAllGlobalModels() {
+  const allIds = filteredGlobalModels.value.map(m => m.id)
+  if (isAllGlobalModelsSelected.value) {
+    // 取消全选
+    for (const id of allIds) {
+      selectedGlobalModelIds.value.delete(id)
+    }
+  } else {
+    // 全选
+    for (const id of allIds) {
+      selectedGlobalModelIds.value.add(id)
+    }
+  }
+  selectedGlobalModelIds.value = new Set(selectedGlobalModelIds.value)
+}
+
+// 全选/取消全选某个上游组
+function toggleAllUpstreamGroup(apiFormat: string) {
+  const group = filteredUpstreamGroups.value.find(g => g.api_format === apiFormat)
+  if (!group) return
+
+  const allIds = group.models.map(m => m.id)
+  if (isUpstreamGroupAllSelected(apiFormat)) {
+    // 取消全选
+    for (const id of allIds) {
+      selectedUpstreamModelIds.value.delete(id)
+    }
+  } else {
+    // 全选
+    for (const id of allIds) {
+      selectedUpstreamModelIds.value.add(id)
+    }
+  }
+  selectedUpstreamModelIds.value = new Set(selectedUpstreamModelIds.value)
+}
+
+// 切换折叠状态
+function toggleGroupCollapse(group: string) {
+  if (collapsedGroups.value.has(group)) {
+    collapsedGroups.value.delete(group)
+  } else {
+    collapsedGroups.value.add(group)
+  }
+  collapsedGroups.value = new Set(collapsedGroups.value)
+}
+
+// 处理关闭
+async function handleClose() {
+  if (hasChanges.value) {
+    const confirmed = await confirmWarning('有未保存的更改，确定要关闭吗？', '放弃更改')
+    if (!confirmed) return
+  }
+  emit('update:open', false)
+}
+
+// 处理对话框状态变更
+async function handleDialogUpdate(value: boolean) {
+  if (!value && hasChanges.value) {
+    const confirmed = await confirmWarning('有未保存的更改，确定要关闭吗？', '放弃更改')
+    if (!confirmed) return
+  }
+  emit('update:open', value)
+}
+
+// 保存变更
+async function handleSave() {
+  if (!hasChanges.value || saving.value) return
+
+  saving.value = true
+  try {
+    let totalSuccess = 0
+    const allErrors: string[] = []
+
+    // 移除全局模型
+    for (const globalModelId of globalModelsToRemove.value) {
+      const existingModel = existingModels.value.find(m => m.global_model_id === globalModelId)
+      if (existingModel) {
+        try {
+          await deleteModel(props.providerId, existingModel.id)
+          totalSuccess++
+        } catch (err: any) {
+          allErrors.push(parseApiError(err, '移除失败'))
+        }
+      }
+    }
+
+    // 移除上游模型
+    for (const modelId of upstreamModelsToRemove.value) {
+      const existingModel = existingModels.value.find(m =>
+        m.provider_model_name === modelId ||
+        m.provider_model_mappings?.some(mapping => mapping.name === modelId)
+      )
+      if (existingModel) {
+        try {
+          await deleteModel(props.providerId, existingModel.id)
+          totalSuccess++
+        } catch (err: any) {
+          allErrors.push(parseApiError(err, '移除失败'))
+        }
+      }
+    }
+
+    // 添加全局模型
+    if (globalModelsToAdd.value.length > 0) {
+      const result = await batchAssignModelsToProvider(props.providerId, globalModelsToAdd.value)
+      totalSuccess += result.success.length
+      if (result.errors.length > 0) {
+        allErrors.push(...result.errors.map(e => e.error))
+      }
+    }
+
+    // 添加上游模型
+    if (upstreamModelsToAdd.value.length > 0) {
+      const result = await importModelsFromUpstream(props.providerId, upstreamModelsToAdd.value)
+      totalSuccess += result.success.length
+      if (result.errors.length > 0) {
+        allErrors.push(...result.errors.map(e => e.error))
+      }
+    }
+
+    if (totalSuccess > 0) {
+      success(`成功处理 ${totalSuccess} 个模型`)
+    }
+
+    if (allErrors.length > 0) {
+      showError(`部分操作失败: ${allErrors.slice(0, 3).join(', ')}${allErrors.length > 3 ? '...' : ''}`, '警告')
+    }
+
+    emit('changed')
+    emit('update:open', false)
+  } catch (err: any) {
+    showError(parseApiError(err, '保存失败'), '错误')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 从已有数据同步选择状态（全局模型）
+function syncGlobalModelSelection() {
+  const globalIds = [...existingGlobalModelIds.value].filter((id): id is string => id !== undefined)
+  selectedGlobalModelIds.value = new Set(globalIds)
+  initialGlobalModelIds.value = new Set(globalIds)
+}
+
+// 从已有数据同步选择状态（上游模型）
+function syncUpstreamModelSelection() {
+  // 只同步当前已加载的上游模型中，与已关联模型匹配的部分
+  const selected = new Set<string>()
+  for (const model of upstreamModels.value) {
+    if (existingUpstreamModelNames.value.has(model.id)) {
+      selected.add(model.id)
+    }
+  }
+  selectedUpstreamModelIds.value = selected
+  initialUpstreamModelNames.value = new Set(selected)
 }
 
 // 监听打开状态
@@ -518,13 +605,14 @@ watch(() => props.open, async (isOpen) => {
     await loadData()
   } else {
     // 重置状态
-    selectedGlobalModelIds.value = []
-    selectedUpstreamModelIds.value = []
-    selectedRightIds.value = []
     upstreamModels.value = []
     upstreamModelsLoaded.value = false
     collapsedGroups.value = new Set()
     searchQuery.value = ''
+    selectedGlobalModelIds.value = new Set()
+    selectedUpstreamModelIds.value = new Set()
+    initialGlobalModelIds.value = new Set()
+    initialUpstreamModelNames.value = new Set()
   }
 })
 
@@ -532,11 +620,16 @@ watch(() => props.open, async (isOpen) => {
 async function loadData() {
   await Promise.all([loadGlobalModels(), loadExistingModels()])
 
-  // 检查缓存，如果有缓存数据则直接使用
+  // 同步全局模型选择状态
+  syncGlobalModelSelection()
+
+  // 检查缓存
   const cachedModels = getCachedModels(props.providerId)
   if (cachedModels && cachedModels.length > 0) {
     upstreamModels.value = cachedModels
     upstreamModelsLoaded.value = true
+    // 同步上游模型选择状态
+    syncUpstreamModelSelection()
     // 有多个分组时全部折叠
     const allGroups = new Set(['global'])
     for (const model of cachedModels) {
@@ -546,7 +639,6 @@ async function loadData() {
     }
     collapsedGroups.value = allGroups
   } else {
-    // 只有全局模型时展开
     collapsedGroups.value = new Set()
   }
 }
@@ -588,6 +680,8 @@ async function fetchUpstreamModels(forceRefresh = false) {
       } else {
         upstreamModels.value = result.models
         upstreamModelsLoaded.value = true
+        // 同步上游模型选择状态
+        syncUpstreamModelSelection()
         // 有多个分组时全部折叠
         const allGroups = new Set(['global'])
         for (const model of result.models) {
@@ -602,163 +696,4 @@ async function fetchUpstreamModels(forceRefresh = false) {
     fetchingUpstreamModels.value = false
   }
 }
-
-// 切换折叠状态
-function toggleGroupCollapse(group: string) {
-  if (collapsedGroups.value.has(group)) {
-    collapsedGroups.value.delete(group)
-  } else {
-    collapsedGroups.value.add(group)
-  }
-  // 触发响应式更新
-  collapsedGroups.value = new Set(collapsedGroups.value)
-}
-
-// 切换全局模型选择
-function toggleGlobalModelSelection(id: string) {
-  const index = selectedGlobalModelIds.value.indexOf(id)
-  if (index === -1) {
-    selectedGlobalModelIds.value.push(id)
-  } else {
-    selectedGlobalModelIds.value.splice(index, 1)
-  }
-}
-
-// 切换上游模型选择
-function toggleUpstreamModelSelection(id: string) {
-  const index = selectedUpstreamModelIds.value.indexOf(id)
-  if (index === -1) {
-    selectedUpstreamModelIds.value.push(id)
-  } else {
-    selectedUpstreamModelIds.value.splice(index, 1)
-  }
-}
-
-// 全选全局模型
-function selectAllGlobalModels() {
-  const allIds = availableGlobalModels.value.map(m => m.id)
-  const allSelected = allIds.every(id => selectedGlobalModelIds.value.includes(id))
-  if (allSelected) {
-    selectedGlobalModelIds.value = selectedGlobalModelIds.value.filter(id => !allIds.includes(id))
-  } else {
-    const newIds = allIds.filter(id => !selectedGlobalModelIds.value.includes(id))
-    selectedGlobalModelIds.value.push(...newIds)
-  }
-}
-
-// 全选某个 API 格式的上游模型
-function selectAllUpstreamModels(apiFormat: string) {
-  const group = upstreamModelGroups.value.find(g => g.api_format === apiFormat)
-  if (!group) return
-
-  const allIds = group.models.map(m => m.id)
-  const allSelected = allIds.every(id => selectedUpstreamModelIds.value.includes(id))
-  if (allSelected) {
-    selectedUpstreamModelIds.value = selectedUpstreamModelIds.value.filter(id => !allIds.includes(id))
-  } else {
-    const newIds = allIds.filter(id => !selectedUpstreamModelIds.value.includes(id))
-    selectedUpstreamModelIds.value.push(...newIds)
-  }
-}
-
-// 切换右侧选择
-function toggleRightSelection(id: string) {
-  const index = selectedRightIds.value.indexOf(id)
-  if (index === -1) {
-    selectedRightIds.value.push(id)
-  } else {
-    selectedRightIds.value.splice(index, 1)
-  }
-}
-
-// 全选/取消全选右侧
-function toggleSelectAllRight() {
-  if (isAllRightSelected.value) {
-    selectedRightIds.value = []
-  } else {
-    selectedRightIds.value = existingModels.value.map(m => m.id)
-  }
-}
-
-// 批量添加选中的模型
-async function batchAddSelected() {
-  if (totalSelectedCount.value === 0) return
-
-  try {
-    submittingAdd.value = true
-    let totalSuccess = 0
-    const allErrors: string[] = []
-
-    // 处理全局模型
-    if (selectedGlobalModelIds.value.length > 0) {
-      const result = await batchAssignModelsToProvider(props.providerId, selectedGlobalModelIds.value)
-      totalSuccess += result.success.length
-      if (result.errors.length > 0) {
-        allErrors.push(...result.errors.map(e => e.error))
-      }
-    }
-
-    // 处理上游模型（调用 import-from-upstream API）
-    if (selectedUpstreamModelIds.value.length > 0) {
-      const result = await importModelsFromUpstream(props.providerId, selectedUpstreamModelIds.value)
-      totalSuccess += result.success.length
-      if (result.errors.length > 0) {
-        allErrors.push(...result.errors.map(e => e.error))
-      }
-    }
-
-    if (totalSuccess > 0) {
-      success(`成功添加 ${totalSuccess} 个模型`)
-    }
-
-    if (allErrors.length > 0) {
-      showError(`部分模型添加失败: ${allErrors.slice(0, 3).join(', ')}${allErrors.length > 3 ? '...' : ''}`, '警告')
-    }
-
-    selectedGlobalModelIds.value = []
-    selectedUpstreamModelIds.value = []
-    await loadExistingModels()
-    emit('changed')
-  } catch (err: any) {
-    showError(parseApiError(err, '批量添加失败'), '错误')
-  } finally {
-    submittingAdd.value = false
-  }
-}
-
-// 批量移除选中的模型
-async function batchRemoveSelected() {
-  if (selectedRightIds.value.length === 0) return
-
-  try {
-    submittingRemove.value = true
-    let successCount = 0
-    const errors: string[] = []
-
-    for (const modelId of selectedRightIds.value) {
-      try {
-        await deleteModel(props.providerId, modelId)
-        successCount++
-      } catch (err: any) {
-        errors.push(parseApiError(err, '删除失败'))
-      }
-    }
-
-    if (successCount > 0) {
-      success(`成功移除 ${successCount} 个模型`)
-    }
-
-    if (errors.length > 0) {
-      showError(`部分模型移除失败: ${errors.join(', ')}`, '警告')
-    }
-
-    selectedRightIds.value = []
-    await loadExistingModels()
-    emit('changed')
-  } catch (err: any) {
-    showError(parseApiError(err, '批量移除失败'), '错误')
-  } finally {
-    submittingRemove.value = false
-  }
-}
 </script>
diff --git a/frontend/src/features/providers/components/KeyAllowedModelsEditDialog.vue b/frontend/src/features/providers/components/KeyAllowedModelsEditDialog.vue
index 70bdbfd..7db2cea 100644
--- a/frontend/src/features/providers/components/KeyAllowedModelsEditDialog.vue
+++ b/frontend/src/features/providers/components/KeyAllowedModelsEditDialog.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog
     :model-value="isOpen"
-    title="模型权限"
-    :description="`管理密钥 ${props.apiKey?.name || ''} 可访问的模型`"
+    :title="props.apiKey?.name ? `模型权限 - ${props.apiKey.name}` : '模型权限'"
+    description="选中的模型将被允许访问，不选择则允许全部"
     :icon="Shield"
-    size="lg"
+    size="2xl"
     @update:model-value="handleDialogUpdate"
   >
     <template #default>
@@ -20,12 +20,6 @@
           </p>
         </div>
 
-        <!-- 已选数量提示 -->
-        <div class="text-sm text-muted-foreground">
-          <span v-if="selectedModels.length === 0">允许访问全部模型</span>
-          <span v-else>已选择 {{ selectedModels.length }} 个模型</span>
-        </div>
-
         <!-- 常驻选择面板 -->
         <div class="border rounded-lg overflow-hidden">
           <!-- 搜索 + 操作栏 -->
@@ -38,6 +32,19 @@
                 class="pl-8 h-8 text-sm"
               />
             </div>
+            <!-- 已选数量徽章 -->
+            <span
+              v-if="selectedModels.length === 0"
+              class="h-6 px-2 text-xs rounded flex items-center bg-muted text-muted-foreground shrink-0"
+            >
+              全部模型
+            </span>
+            <span
+              v-else
+              class="h-6 px-2 text-xs rounded flex items-center bg-primary/10 text-primary shrink-0"
+            >
+              已选 {{ selectedModels.length }} 个
+            </span>
             <button
               v-if="upstreamModelsLoaded"
               type="button"
@@ -56,7 +63,7 @@
               variant="outline"
               size="sm"
               class="h-8"
-              title="从提供商获取模型"
+              title="从提供���获取模型"
               @click="fetchUpstreamModels()"
             >
               <Zap class="w-4 h-4" />
@@ -97,10 +104,23 @@
 
               <!-- 自定义模型（手动添加的，始终显示全部，搜索命中的排前面） -->
               <div v-if="customModels.length > 0">
-                <div class="flex items-center justify-between px-3 py-1.5 bg-muted/50">
-                  <span class="text-xs font-medium text-muted-foreground">自定义模型</span>
+                <div
+                  class="flex items-center justify-between px-3 py-2 bg-muted sticky top-0 z-10 cursor-pointer hover:bg-muted/80 transition-colors"
+                  @click="toggleGroupCollapse('custom')"
+                >
+                  <div class="flex items-center gap-2">
+                    <ChevronDown
+                      class="w-4 h-4 transition-transform shrink-0"
+                      :class="collapsedGroups.has('custom') ? '-rotate-90' : ''"
+                    />
+                    <span class="text-xs font-medium">自定义模型</span>
+                    <span class="text-xs text-muted-foreground">({{ customModels.length }})</span>
+                  </div>
                 </div>
-                <div class="space-y-1 p-2">
+                <div
+                  v-show="!collapsedGroups.has('custom')"
+                  class="space-y-1 p-2"
+                >
                   <div
                     v-for="model in sortedCustomModels"
                     :key="model"
@@ -113,24 +133,37 @@
                     >
                       <Check v-if="selectedModels.includes(model)" class="w-3 h-3 text-primary-foreground" />
                     </div>
-                    <span class="text-xs font-mono truncate">{{ model }}</span>
+                    <span class="text-sm font-mono truncate">{{ model }}</span>
                   </div>
                 </div>
               </div>
 
               <!-- 全局模型 -->
               <div v-if="filteredGlobalModels.length > 0">
-                <div class="flex items-center justify-between px-3 py-1.5 bg-muted/50">
-                  <span class="text-xs font-medium text-muted-foreground">全局模型</span>
+                <div
+                  class="flex items-center justify-between px-3 py-2 bg-muted sticky top-0 z-10 cursor-pointer hover:bg-muted/80 transition-colors"
+                  @click="toggleGroupCollapse('global')"
+                >
+                  <div class="flex items-center gap-2">
+                    <ChevronDown
+                      class="w-4 h-4 transition-transform shrink-0"
+                      :class="collapsedGroups.has('global') ? '-rotate-90' : ''"
+                    />
+                    <span class="text-xs font-medium">全局模型</span>
+                    <span class="text-xs text-muted-foreground">({{ filteredGlobalModels.length }})</span>
+                  </div>
                   <button
                     type="button"
                     class="text-xs text-primary hover:underline"
-                    @click="toggleAllGlobalModels"
+                    @click.stop="toggleAllGlobalModels"
                   >
                     {{ isAllGlobalModelsSelected ? '取消全选' : '全选' }}
                   </button>
                 </div>
-                <div class="space-y-1 p-2">
+                <div
+                  v-show="!collapsedGroups.has('global')"
+                  class="space-y-1 p-2"
+                >
                   <div
                     v-for="model in filteredGlobalModels"
                     :key="model.name"
@@ -143,26 +176,42 @@
                     >
                       <Check v-if="selectedModels.includes(model.name)" class="w-3 h-3 text-primary-foreground" />
                     </div>
-                    <span class="text-xs font-mono truncate">{{ model.name }}</span>
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium truncate">{{ model.display_name }}</p>
+                      <p class="text-xs text-muted-foreground truncate font-mono">{{ model.name }}</p>
+                    </div>
                   </div>
                 </div>
               </div>
 
               <!-- 上游模型组 -->
               <div v-for="group in filteredUpstreamGroups" :key="group.api_format">
-                <div class="flex items-center justify-between px-3 py-1.5 bg-muted/50">
-                  <span class="text-xs font-medium text-muted-foreground">
-                    {{ API_FORMAT_LABELS[group.api_format] || group.api_format }}
-                  </span>
+                <div
+                  class="flex items-center justify-between px-3 py-2 bg-muted sticky top-0 z-10 cursor-pointer hover:bg-muted/80 transition-colors"
+                  @click="toggleGroupCollapse(group.api_format)"
+                >
+                  <div class="flex items-center gap-2">
+                    <ChevronDown
+                      class="w-4 h-4 transition-transform shrink-0"
+                      :class="collapsedGroups.has(group.api_format) ? '-rotate-90' : ''"
+                    />
+                    <span class="text-xs font-medium">
+                      {{ API_FORMAT_LABELS[group.api_format] || group.api_format }}
+                    </span>
+                    <span class="text-xs text-muted-foreground">({{ group.models.length }})</span>
+                  </div>
                   <button
                     type="button"
                     class="text-xs text-primary hover:underline"
-                    @click="toggleAllUpstreamGroup(group.api_format)"
+                    @click.stop="toggleAllUpstreamGroup(group.api_format)"
                   >
                     {{ isUpstreamGroupAllSelected(group.api_format) ? '取消全选' : '全选' }}
                   </button>
                 </div>
-                <div class="space-y-1 p-2">
+                <div
+                  v-show="!collapsedGroups.has(group.api_format)"
+                  class="space-y-1 p-2"
+                >
                   <div
                     v-for="model in group.models"
                     :key="model.id"
@@ -175,7 +224,7 @@
                     >
                       <Check v-if="selectedModels.includes(model.id)" class="w-3 h-3 text-primary-foreground" />
                     </div>
-                    <span class="text-xs font-mono truncate">{{ model.id }}</span>
+                    <span class="text-sm font-mono truncate">{{ model.id }}</span>
                   </div>
                 </div>
               </div>
@@ -201,10 +250,10 @@
           {{ hasChanges ? '有未保存的更改' : '' }}
         </p>
         <div class="flex items-center gap-2">
-          <Button variant="outline" @click="handleCancel">取消</Button>
           <Button :disabled="saving || !hasChanges" @click="handleSave">
             {{ saving ? '保存中...' : '保存' }}
           </Button>
+          <Button variant="outline" @click="handleCancel">取消</Button>
         </div>
       </div>
     </template>
@@ -220,10 +269,12 @@ import {
   Loader2,
   Zap,
   Plus,
-  Check
+  Check,
+  ChevronDown
 } from 'lucide-vue-next'
 import { Dialog, Button, Input } from '@/components/ui'
 import { useToast } from '@/composables/useToast'
+import { useConfirm } from '@/composables/useConfirm'
 import { parseApiError, parseUpstreamModelError } from '@/utils/errorParser'
 import {
   updateProviderKey,
@@ -252,6 +303,7 @@ const emit = defineEmits<{
 }>()
 
 const { success, error: showError } = useToast()
+const { confirmWarning } = useConfirm()
 
 const isOpen = computed(() => props.open)
 const saving = ref(false)
@@ -280,6 +332,9 @@ const allCustomModels = ref<string[]>([])
 // 是否为字典模式（按 API 格式区分）
 const isDictMode = ref(false)
 
+// 折叠状态
+const collapsedGroups = ref<Set<string>>(new Set())
+
 // 是否有更改
 const hasChanges = computed(() => {
   if (selectedModels.value.length !== initialSelectedModels.value.length) return true
@@ -444,6 +499,16 @@ function toggleAllUpstreamGroup(apiFormat: string) {
   }
 }
 
+// 切换折叠状态
+function toggleGroupCollapse(group: string) {
+  if (collapsedGroups.value.has(group)) {
+    collapsedGroups.value.delete(group)
+  } else {
+    collapsedGroups.value.add(group)
+  }
+  collapsedGroups.value = new Set(collapsedGroups.value)
+}
+
 // 加载全局模型
 async function loadGlobalModels() {
   loadingGlobalModels.value = true
@@ -537,11 +602,19 @@ onUnmounted(() => {
   loadingCancelled = true
 })
 
-function handleDialogUpdate(value: boolean) {
+async function handleDialogUpdate(value: boolean) {
+  if (!value && hasChanges.value) {
+    const confirmed = await confirmWarning('有未保存的更改，确定要关闭吗？', '放弃更改')
+    if (!confirmed) return
+  }
   if (!value) emit('close')
 }
 
-function handleCancel() {
+async function handleCancel() {
+  if (hasChanges.value) {
+    const confirmed = await confirmWarning('有未保存的更改，确定要关闭吗？', '放弃更改')
+    if (!confirmed) return
+  }
   emit('close')
 }
 
diff --git a/frontend/src/features/providers/components/KeyFormDialog.vue b/frontend/src/features/providers/components/KeyFormDialog.vue
index 0cf7f88..39321d3 100644
--- a/frontend/src/features/providers/components/KeyFormDialog.vue
+++ b/frontend/src/features/providers/components/KeyFormDialog.vue
@@ -4,7 +4,7 @@
     :title="isEditMode ? '编辑密钥' : '添加密钥'"
     :description="isEditMode ? '修改 API 密钥配置' : '为提供商添加新的 API 密钥'"
     :icon="isEditMode ? SquarePen : Key"
-    size="2xl"
+    size="xl"
     @update:model-value="handleDialogUpdate"
   >
     <form
@@ -80,7 +80,7 @@
       <!-- API 格式选择 -->
       <div v-if="sortedApiFormats.length > 0">
         <Label class="mb-1.5 block">支持的 API 格式 *</Label>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 gap-2">
           <div
             v-for="format in sortedApiFormats"
             :key="format"
diff --git a/frontend/src/features/providers/components/ProviderDetailDrawer.vue b/frontend/src/features/providers/components/ProviderDetailDrawer.vue
index 1ce07db..20f66ff 100644
--- a/frontend/src/features/providers/components/ProviderDetailDrawer.vue
+++ b/frontend/src/features/providers/components/ProviderDetailDrawer.vue
@@ -189,19 +189,23 @@
                         <div class="cursor-grab active:cursor-grabbing text-muted-foreground/30 group-hover/item:text-muted-foreground transition-colors shrink-0">
                           <GripVertical class="w-4 h-4" />
                         </div>
-                        <span class="text-sm font-medium truncate">{{ key.name || '未命名密钥' }}</span>
-                        <span class="text-xs font-mono text-muted-foreground">
-                          {{ key.api_key_masked }}
-                        </span>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          class="h-5 w-5 shrink-0"
-                          title="复制密钥"
-                          @click.stop="copyFullKey(key)"
-                        >
-                          <Copy class="w-3 h-3" />
-                        </Button>
+                        <div class="flex flex-col min-w-0">
+                          <span class="text-sm font-medium truncate">{{ key.name || '未命名密钥' }}</span>
+                          <div class="flex items-center gap-1">
+                            <span class="text-[11px] font-mono text-muted-foreground">
+                              {{ key.api_key_masked }}
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              class="h-4 w-4 shrink-0"
+                              title="复制密钥"
+                              @click.stop="copyFullKey(key)"
+                            >
+                              <Copy class="w-2.5 h-2.5" />
+                            </Button>
+                          </div>
+                        </div>
                         <Badge
                           v-if="!key.is_active"
                           variant="secondary"
diff --git a/frontend/src/features/providers/components/provider-tabs/ModelsTab.vue b/frontend/src/features/providers/components/provider-tabs/ModelsTab.vue
index 2645ce7..540ce9c 100644
--- a/frontend/src/features/providers/components/provider-tabs/ModelsTab.vue
+++ b/frontend/src/features/providers/components/provider-tabs/ModelsTab.vue
@@ -34,13 +34,13 @@
       <table class="w-full text-sm table-fixed">
         <thead class="bg-muted/50 text-xs uppercase tracking-wide text-muted-foreground">
           <tr>
-            <th class="text-left px-4 py-3 font-semibold w-[50%]">
+            <th class="text-left px-4 py-3 font-semibold w-[45%]">
               模型
             </th>
             <th class="text-left px-4 py-3 font-semibold w-[30%]">
               价格 ($/M)
             </th>
-            <th class="text-center px-4 py-3 font-semibold w-[20%]">
+            <th class="text-center px-4 py-3 font-semibold w-[25%]">
               操作
             </th>
           </tr>
@@ -109,7 +109,7 @@
                     ${{ formatPrice(model.effective_price_per_request ?? model.price_per_request) }}/次
                   </span>
                 </template>
-                <!-- 无计费配置 -->
+                <!-- 无计��配置 -->
                 <template v-if="!hasTokenPricing(model) && !hasRequestPricing(model)">
                   <span class="text-muted-foreground">—</span>
                 </template>
@@ -305,7 +305,7 @@ function getStatusTitle(model: Model): string {
   return '活跃但不可用'
 }
 
-// 编辑模型
+// ��辑模型
 function editModel(model: Model) {
   emit('editModel', model)
 }