refactor: 使用 DropdownMenu 组件重构模型测试按钮

- 新增 DropdownMenu 组件系列（DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem）
- 重构 ModelsTab 中的格式选择菜单，替换原有的手动实现
- 移除 handleClickOutside 等手动管理菜单状态的代码

frontend/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { DropdownMenuRoot } from 'radix-vue'
+
+interface Props {
+  defaultOpen?: boolean
+  open?: boolean
+  modal?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modal: true
+})
+
+defineEmits<{
+  'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+  <DropdownMenuRoot
+    :default-open="defaultOpen"
+    :open="open"
+    :modal="modal"
+    @update:open="$emit('update:open', $event)"
+  >
+    <slot />
+  </DropdownMenuRoot>
+</template>

frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import {
+  DropdownMenuContent as DropdownMenuContentPrimitive,
+  DropdownMenuPortal
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+
+interface Props {
+  class?: string
+  sideOffset?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  avoidCollisions?: boolean
+  forceMount?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: undefined,
+  sideOffset: 4,
+  side: 'bottom',
+  align: 'start',
+  alignOffset: 0,
+  avoidCollisions: true
+})
+
+const contentClass = computed(() =>
+  cn(
+    'z-[200] min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+    props.class
+  )
+)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContentPrimitive
+      :class="contentClass"
+      :side-offset="sideOffset"
+      :side="side"
+      :align="align"
+      :align-offset="alignOffset"
+      :avoid-collisions="avoidCollisions"
+      :force-mount="forceMount"
+    >
+      <slot />
+    </DropdownMenuContentPrimitive>
+  </DropdownMenuPortal>
+</template>

frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { DropdownMenuItem as DropdownMenuItemPrimitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+
+interface Props {
+  class?: string
+  disabled?: boolean
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  select: [event: Event]
+}>()
+
+const itemClass = computed(() =>
+  cn(
+    'relative flex cursor-pointer select-none items-center rounded-lg px-3 py-1.5 text-sm outline-none',
+    'hover:bg-accent focus:bg-accent focus:text-accent-foreground',
+    'transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    props.class
+  )
+)
+</script>
+
+<template>
+  <DropdownMenuItemPrimitive
+    :class="itemClass"
+    :disabled="disabled"
+    @select="$emit('select', $event)"
+  >
+    <slot />
+  </DropdownMenuItemPrimitive>
+</template>

frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger as DropdownMenuTriggerPrimitive } from 'radix-vue'
+
+interface Props {
+  asChild?: boolean
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  asChild: false,
+  disabled: false
+})
+</script>
+
+<template>
+  <DropdownMenuTriggerPrimitive
+    :as-child="asChild"
+    :disabled="disabled"
+  >
+    <slot />
+  </DropdownMenuTriggerPrimitive>
+</template>

frontend/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,4 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'

frontend/src/components/ui/index.ts

@@ -70,3 +70,6 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tool
 export { default as Collapsible } from './collapsible.vue'
 export { default as CollapsibleTrigger } from './collapsible-trigger.vue'
 export { default as CollapsibleContent } from './collapsible-content.vue'
+
+// DropdownMenu 下拉菜单系列
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './dropdown-menu'

frontend/src/features/providers/components/provider-tabs/ModelsTab.vue

@@ -120,39 +120,56 @@
             <td class="align-top px-4 py-3">
               <div class="flex justify-center gap-1">
                 <!-- 测试按钮（支持多格式选择） -->
-                <div class="relative">
+                <DropdownMenu
-                  <Button
+                  v-if="availableApiFormats.length > 1"
-                    variant="ghost"
+                  v-model:open="formatMenuOpen[model.id]"
-                    size="icon"
+                >
-                    class="h-8 w-8"
+                  <DropdownMenuTrigger as-child>
-                    title="测试模型"
+                    <Button
-                    :disabled="testingModelId === model.id"
+                      variant="ghost"
-                    @click="handleTestClick(model)"
+                      size="icon"
-                  >
+                      class="h-8 w-8"
-                    <Loader2
+                      title="测试模型"
-                      v-if="testingModelId === model.id"
+                      :disabled="testingModelId === model.id"
-                      class="w-3.5 h-3.5 animate-spin"
+                    >
-                    />
+                      <Loader2
-                    <Play
+                        v-if="testingModelId === model.id"
-                      v-else
+                        class="w-3.5 h-3.5 animate-spin"
-                      class="w-3.5 h-3.5"
+                      />
-                    />
+                      <Play
-                  </Button>
+                        v-else
-                  <!-- 格式选择下拉菜单 -->
+                        class="w-3.5 h-3.5"
-                  <div
+                      />
-                    v-if="formatMenuModelId === model.id && availableApiFormats.length > 1"
+                    </Button>
-                    class="absolute top-full left-0 mt-1 z-10 bg-popover border rounded-md shadow-md py-1 min-w-[120px]"
+                  </DropdownMenuTrigger>
-                  >
+                  <DropdownMenuContent align="start">
-                    <button
+                    <DropdownMenuItem
                       v-for="fmt in availableApiFormats"
                       :key="fmt"
-                      class="w-full px-3 py-1.5 text-left text-sm hover:bg-muted transition-colors"
+                      @select="testModelConnection(model, fmt)"
-                      @click="testModelConnection(model, fmt)"
                     >
                       {{ fmt }}
-                    </button>
+                    </DropdownMenuItem>
-                  </div>
+                  </DropdownMenuContent>
-                </div>
+                </DropdownMenu>
+                <Button
+                  v-else
+                  variant="ghost"
+                  size="icon"
+                  class="h-8 w-8"
+                  title="测试模型"
+                  :disabled="testingModelId === model.id"
+                  @click="testModelConnection(model, availableApiFormats[0])"
+                >
+                  <Loader2
+                    v-if="testingModelId === model.id"
+                    class="w-3.5 h-3.5 animate-spin"
+                  />
+                  <Play
+                    v-else
+                    class="w-3.5 h-3.5"
+                  />
+                </Button>
                 <Button
                   variant="ghost"
                   size="icon"
@@ -205,10 +222,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Box, Edit, Trash2, Layers, Power, Copy, Loader2, Play } from 'lucide-vue-next'
 import Card from '@/components/ui/card.vue'
 import Button from '@/components/ui/button.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from '@/components/ui'
 import { useToast } from '@/composables/useToast'
 import { useClipboard } from '@/composables/useClipboard'
 import {
@@ -248,7 +271,7 @@ const models = ref<Model[]>([])
 const mappingPreview = ref<ProviderMappingPreviewResponse | null>(null)
 const togglingModelId = ref<string | null>(null)
 const testingModelId = ref<string | null>(null)
-const formatMenuModelId = ref<string | null>(null)
+const formatMenuOpen = ref<Record<string, boolean>>({})
 
 // 获取可用的 API 格式（有活跃端点且有活跃 Key）
 const availableApiFormats = computed(() => {
@@ -427,7 +450,7 @@ async function testModelConnection(model: Model, apiFormat?: string) {
   if (testingModelId.value) return
 
   testingModelId.value = model.id
-  formatMenuModelId.value = null
+  formatMenuOpen.value[model.id] = false
   try {
     // 检查是否有正则映射，如果有则使用映射名称和指定 key
     const regexMapping = findRegexMapping(model)
@@ -463,35 +486,8 @@ async function testModelConnection(model: Model, apiFormat?: string) {
   }
 }
 
-// 处理测试按钮点击
-function handleTestClick(model: Model) {
-  const formats = availableApiFormats.value
-  if (formats.length === 0) {
-    // 没有可用格式信息，使用默认行为
-    testModelConnection(model)
-  } else if (formats.length === 1) {
-    // 只有一种格式，直接测试
-    testModelConnection(model, formats[0])
-  } else {
-    // 多种格式，显示选择菜单
-    formatMenuModelId.value = formatMenuModelId.value === model.id ? null : model.id
-  }
-}
-
-// 点击外部关闭格式选择菜单
-function handleClickOutside(event: MouseEvent) {
-  if (formatMenuModelId.value && !(event.target as Element).closest('.relative')) {
-    formatMenuModelId.value = null
-  }
-}
-
 onMounted(() => {
   loadModels()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
 })
 
 // 暴露给父组件