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>