mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 01:10:23 +08:00
refactor: 使用 DropdownMenu 组件重构模型测试按钮
- 新增 DropdownMenu 组件系列(DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem) - 重构 ModelsTab 中的格式选择菜单,替换原有的手动实现 - 移除 handleClickOutside 等手动管理菜单状态的代码
This commit is contained in:
28
frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
Normal file
28
frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
4
frontend/src/components/ui/dropdown-menu/index.ts
Normal file
4
frontend/src/components/ui/dropdown-menu/index.ts
Normal 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'
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user