radix-vue 迁移到 reka-ui

Author: hooray

components.json

@@ -8,9 +8,9 @@
     "baseColor": "neutral",
     "cssVariables": true
   },
-  "framework": "vite",
   "aliases": {
     "components": "@/ui/shadcn",
-    "utils": "@/utils"
+    "utils": "@/utils",
+    "lib": "@/utils"
   }
 }

package.json

@@ -1,5 +1,6 @@
 {
   "type": "module",
+  "packageManager": "[email protected]",
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
@@ -54,7 +55,7 @@
     "print-js": "^1.6.0",
     "qrcode": "^1.5.4",
     "qs": "^6.14.0",
-    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.0.2",
     "scule": "^1.3.0",
     "splitpanes": "^3.1.8",
     "swiper": "^11.2.4",

pnpm-lock.yaml

@@ -37,7 +37,7 @@ function toggleColorScheme(event: MouseEvent) {
 </script>
 
 <template>
-  <FaButton variant="ghost" size="icon" @click="toggleColorScheme">
+  <FaButton variant="ghost" size="icon" class="size-9" @click="toggleColorScheme">
     <FaIcon
       :name="{
         light: 'i-ri:sun-line',

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -12,7 +12,7 @@ const { isFullscreen, toggle } = useFullscreen()
 </script>
 
 <template>
-  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" @click="toggle">
+  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" class="size-9" @click="toggle">
     <FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
   </FaButton>
 </template>

src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue

@@ -12,7 +12,7 @@ const isShow = ref(false)
 </script>
 
 <template>
-  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3': settingsStore.mode === 'pc' }" @click="isShow = true">
+  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3 h-9': settingsStore.mode === 'pc', 'size-9': settingsStore.mode !== 'pc' }" @click="isShow = true">
     <FaIcon name="i-ri:search-line" class="size-4" />
     <template v-if="settingsStore.mode === 'pc'">
       <span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>

src/layouts/components/Topbar/Toolbar/NavSearch/index.vue

@@ -41,7 +41,7 @@ function handleCtrlClick() {
         <p>可切换为浏览器原生刷新</p>
       </div>
     </template>
-    <FaButton variant="ghost" size="icon" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon" class="size-9" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
       <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
     </FaButton>
   </FaTooltip>

src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import type { AvatarVariants } from '.'
 import { cn } from '@/utils'
-import { AvatarRoot } from 'radix-vue'
+import { AvatarRoot } from 'reka-ui'
 import { avatarVariant } from '.'
 
 const props = withDefaults(defineProps<{

src/ui/components/FaAvatar/avatar/Avatar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'radix-vue'
-import { AvatarFallback } from 'radix-vue'
+import type { AvatarFallbackProps } from 'reka-ui'
+import { AvatarFallback } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>

src/ui/components/FaAvatar/avatar/AvatarFallback.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'radix-vue'
-import { AvatarImage } from 'radix-vue'
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>

src/ui/components/FaAvatar/avatar/AvatarImage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
 import { cn } from '@/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {

src/ui/components/FaButton/button/Button.vue

@@ -8,22 +8,21 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {

src/ui/components/FaButton/button/index.ts

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaCheckbox/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()

src/ui/components/FaContextMenu/context-menu/ContextMenu.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
-
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuContent,
-
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from 'radix-vue'
-import { ContextMenuGroup } from 'radix-vue'
+import type { ContextMenuGroupProps } from 'reka-ui'
+import { ContextMenuGroup } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()