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

- 新增 DropdownMenu 组件系列(DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem)
- 重构 ModelsTab 中的格式选择菜单,替换原有的手动实现
- 移除 handleClickOutside 等手动管理菜单状态的代码
This commit is contained in:
fawney19
2026-01-22 20:01:55 +08:00
parent ee5ba42b79
commit 69335ad974
7 changed files with 199 additions and 59 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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'

View File

@@ -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'