From a0a7a5011eba11cde99a16873d3eb136de34f468 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 12 Apr 2026 23:31:58 +0800
Subject: [PATCH] refactor(front): standardize import statements and improve
 prop handling in Select components

---
 front/components/ui/select/Select.vue         |  9 +--
 front/components/ui/select/SelectContent.vue  | 74 +++++++++----------
 front/components/ui/select/SelectGroup.vue    | 12 ++-
 front/components/ui/select/SelectItem.vue     | 60 +++++++--------
 front/components/ui/select/SelectItemText.vue | 12 ++-
 front/components/ui/select/SelectLabel.vue    | 12 ++-
 .../ui/select/SelectScrollDownButton.vue      | 32 ++++----
 .../ui/select/SelectScrollUpButton.vue        | 32 ++++----
 .../components/ui/select/SelectSeparator.vue  | 18 ++---
 front/components/ui/select/SelectTrigger.vue  | 40 +++++-----
 front/components/ui/select/SelectValue.vue    | 12 ++-
 11 files changed, 141 insertions(+), 172 deletions(-)

diff --git a/front/components/ui/select/Select.vue b/front/components/ui/select/Select.vue
index dc1f83d..64f973a 100644
--- a/front/components/ui/select/Select.vue
+++ b/front/components/ui/select/Select.vue
@@ -9,10 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <SelectRoot
-    data-slot="select"
-    v-bind="forwarded"
-  >
-    <slot />
-  </SelectRoot>
+    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </SelectRoot>
 </template>
diff --git a/front/components/ui/select/SelectContent.vue b/front/components/ui/select/SelectContent.vue
index bde01cf..40f4103 100644
--- a/front/components/ui/select/SelectContent.vue
+++ b/front/components/ui/select/SelectContent.vue
@@ -1,55 +1,51 @@
 <script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import {
-  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
 defineOptions({
-  inheritAttrs: false,
+    inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
     position: 'popper',
-  },
-)
+})
 const emits = defineEmits<SelectContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <SelectPortal>
-    <SelectContent
-      data-slot="select-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn(
-        'bg-popover text-popover-foreground 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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
+    <SelectPortal>
+        <SelectContent
+            data-slot="select-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground 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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class
+                )
+            "
+        >
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1'
+                    )
+                "
+            >
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
 </template>
diff --git a/front/components/ui/select/SelectGroup.vue b/front/components/ui/select/SelectGroup.vue
index 4f36d92..d96a808 100644
--- a/front/components/ui/select/SelectGroup.vue
+++ b/front/components/ui/select/SelectGroup.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+import type { SelectGroupProps } from 'reka-ui'
+import { SelectGroup } from 'reka-ui'
 
 const props = defineProps<SelectGroupProps>()
 </script>
 
 <template>
-  <SelectGroup
-    data-slot="select-group"
-    v-bind="props"
-  >
-    <slot />
-  </SelectGroup>
+    <SelectGroup data-slot="select-group" v-bind="props">
+        <slot />
+    </SelectGroup>
 </template>
diff --git a/front/components/ui/select/SelectItem.vue b/front/components/ui/select/SelectItem.vue
index cddae64..0bcb97f 100644
--- a/front/components/ui/select/SelectItem.vue
+++ b/front/components/ui/select/SelectItem.vue
@@ -1,45 +1,39 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import type { SelectItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
-import {
-  SelectItem,
-  SelectItemIndicator,
-  type SelectItemProps,
-  SelectItemText,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectItem
-    data-slot="select-item"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        `focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
-        props.class,
-      )
-    "
-  >
-    <span class="absolute right-2 flex size-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <Check class="size-4" />
-      </SelectItemIndicator>
-    </span>
+    <SelectItem
+        data-slot="select-item"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+                props.class
+            )
+        "
+    >
+        <span class="absolute right-2 flex size-3.5 items-center justify-center">
+            <SelectItemIndicator>
+                <slot name="indicator-icon">
+                    <Check class="size-4" />
+                </slot>
+            </SelectItemIndicator>
+        </span>
 
-    <SelectItemText>
-      <slot />
-    </SelectItemText>
-  </SelectItem>
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
 </template>
diff --git a/front/components/ui/select/SelectItemText.vue b/front/components/ui/select/SelectItemText.vue
index cff32ac..28cda48 100644
--- a/front/components/ui/select/SelectItemText.vue
+++ b/front/components/ui/select/SelectItemText.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
+import type { SelectItemTextProps } from 'reka-ui'
+import { SelectItemText } from 'reka-ui'
 
 const props = defineProps<SelectItemTextProps>()
 </script>
 
 <template>
-  <SelectItemText
-    data-slot="select-item-text"
-    v-bind="props"
-  >
-    <slot />
-  </SelectItemText>
+    <SelectItemText data-slot="select-item-text" v-bind="props">
+        <slot />
+    </SelectItemText>
 </template>
diff --git a/front/components/ui/select/SelectLabel.vue b/front/components/ui/select/SelectLabel.vue
index 7da0ce2..138246b 100644
--- a/front/components/ui/select/SelectLabel.vue
+++ b/front/components/ui/select/SelectLabel.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
+import { SelectLabel } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { SelectLabel, type SelectLabelProps } from 'reka-ui'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectLabel
-    data-slot="select-label"
-    :class="cn('px-2 py-1.5 text-sm font-medium', props.class)"
-  >
-    <slot />
-  </SelectLabel>
+    <SelectLabel data-slot="select-label" :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)">
+        <slot />
+    </SelectLabel>
 </template>
diff --git a/front/components/ui/select/SelectScrollDownButton.vue b/front/components/ui/select/SelectScrollDownButton.vue
index 37162fd..9f47884 100644
--- a/front/components/ui/select/SelectScrollDownButton.vue
+++ b/front/components/ui/select/SelectScrollDownButton.vue
@@ -1,28 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import type { SelectScrollDownButtonProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollDownButton
-    data-slot="select-scroll-down-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronDown class="size-4" />
-    </slot>
-  </SelectScrollDownButton>
+    <SelectScrollDownButton
+        data-slot="select-scroll-down-button"
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronDown class="size-4" />
+        </slot>
+    </SelectScrollDownButton>
 </template>
diff --git a/front/components/ui/select/SelectScrollUpButton.vue b/front/components/ui/select/SelectScrollUpButton.vue
index d80dacc..3bd44aa 100644
--- a/front/components/ui/select/SelectScrollUpButton.vue
+++ b/front/components/ui/select/SelectScrollUpButton.vue
@@ -1,28 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import type { SelectScrollUpButtonProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectScrollUpButton
-    data-slot="select-scroll-up-button"
-    v-bind="forwardedProps"
-    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
-  >
-    <slot>
-      <ChevronUp class="size-4" />
-    </slot>
-  </SelectScrollUpButton>
+    <SelectScrollUpButton
+        data-slot="select-scroll-up-button"
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronUp class="size-4" />
+        </slot>
+    </SelectScrollUpButton>
 </template>
diff --git a/front/components/ui/select/SelectSeparator.vue b/front/components/ui/select/SelectSeparator.vue
index ab51b07..8db9505 100644
--- a/front/components/ui/select/SelectSeparator.vue
+++ b/front/components/ui/select/SelectSeparator.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectSeparator } from 'reka-ui'
 import { cn } from '@/lib/utils'
-import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <SelectSeparator
-    data-slot="select-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
-  />
+    <SelectSeparator data-slot="select-separator" v-bind="delegatedProps" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)" />
 </template>
diff --git a/front/components/ui/select/SelectTrigger.vue b/front/components/ui/select/SelectTrigger.vue
index 97c69a2..3cea3fc 100644
--- a/front/components/ui/select/SelectTrigger.vue
+++ b/front/components/ui/select/SelectTrigger.vue
@@ -1,32 +1,32 @@
 <script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { reactiveOmit } from '@vueuse/core'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
-  { size: 'default' },
-)
+const props = withDefaults(defineProps<SelectTriggerProps & { class?: HTMLAttributes['class']; size?: 'sm' | 'default' }>(), { size: 'default' })
 
 const delegatedProps = reactiveOmit(props, 'class', 'size')
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <SelectTrigger
-    data-slot="select-trigger"
-    :data-size="size"
-    v-bind="forwardedProps"
-    :class="cn(
-      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50" />
-    </SelectIcon>
-  </SelectTrigger>
+    <SelectTrigger
+        data-slot="select-trigger"
+        :data-size="size"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child>
+            <ChevronDown class="size-4 opacity-50" />
+        </SelectIcon>
+    </SelectTrigger>
 </template>
diff --git a/front/components/ui/select/SelectValue.vue b/front/components/ui/select/SelectValue.vue
index f198b96..00f9509 100644
--- a/front/components/ui/select/SelectValue.vue
+++ b/front/components/ui/select/SelectValue.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'reka-ui'
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>
 
 <template>
-  <SelectValue
-    data-slot="select-value"
-    v-bind="props"
-  >
-    <slot />
-  </SelectValue>
+    <SelectValue data-slot="select-value" v-bind="props">
+        <slot />
+    </SelectValue>
 </template>