Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
         run: pnpm build:play
 
       - name: Sync Playground files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
@@ -54,7 +54,7 @@ jobs:
         run: pnpm build:docs
 
       - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build:antd
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
@@ -116,7 +116,7 @@ jobs:
         run: pnpm run build:ele
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
@@ -147,7 +147,7 @@ jobs:
         run: pnpm run build:naive
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}

.npmrc

@@ -1,4 +1,4 @@
-registry = "https://registry.npmmirror.com"
+registry=https://registry.npmmirror.com
 public-hoist-pattern[]=lefthook
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier

apps/backend-mock/api/timezone/getTimezone.ts

@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});

apps/backend-mock/api/timezone/getTimezoneOptions.ts

@@ -0,0 +1,11 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
+});

apps/backend-mock/api/timezone/setTimezone.ts

@@ -0,0 +1,22 @@
+import { eventHandler, readBody } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
+  setTimezone(timezone);
+  return useResponseSuccess({});
+});

apps/backend-mock/utils/mock-data.ts

@@ -7,6 +7,11 @@ export interface UserInfo {
   homePath?: string;
 }
 
+export interface TimezoneOption {
+  offset: number;
+  timezone: string;
+}
+
 export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
@@ -276,7 +281,7 @@ export const MOCK_MENU_LIST = [
         children: [
           {
             id: 20_401,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptCreate',
             status: 1,
             type: 'button',
@@ -285,7 +290,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_402,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptEdit',
             status: 1,
             type: 'button',
@@ -294,7 +299,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_403,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptDelete',
             status: 1,
             type: 'button',
@@ -388,3 +393,29 @@ export function getMenuIds(menus: any[]) {
   });
   return ids;
 }
+
+/**
+ * 时区选项
+ */
+export const TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+  },
+];

apps/backend-mock/utils/timezone-utils.ts

@@ -0,0 +1,9 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  return mockTimeZone;
+};

apps/web-antd/src/layouts/auth.vue

@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >

apps/web-ele/src/layouts/auth.vue

@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >

apps/web-naive/src/layouts/auth.vue

@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >

docs/.vitepress/components/preview-group.vue

@@ -12,7 +12,7 @@ import {
   TabsList,
   TabsRoot,
   TabsTrigger,
-} from 'radix-vue';
+} from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
@@ -56,7 +56,7 @@ const toggleOpen = () => {
         <TabsList class="relative flex">
           <template v-if="open">
             <TabsIndicator
-              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+              class="absolute bottom-0 left-0 h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
             >
               <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
             </TabsIndicator>

docs/package.json

@@ -22,7 +22,7 @@
     "ant-design-vue": "catalog:",
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {

docs/src/demos/vben-vxe-table/custom-cell/index.vue

@@ -92,7 +92,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
-        <Switch v-model:checked="row.open" />
+        <Switch v-model="row.open" />
       </template>
       <template #status="{ row }">
         <Tag :color="row.color">{{ row.status }}</Tag>

docs/src/en/guide/essentials/settings.md

@@ -261,6 +261,7 @@ const defaultPreferences: Preferences = {
     enable: true,
     fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    // sourceDark: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-dark.webp', // Optional: Dark theme logo
   },
   navigation: {
     accordion: true,
@@ -457,6 +458,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** Logo URL */
   source: string;
+  /** Dark theme logo URL (optional, if not set, use source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {

docs/src/guide/essentials/settings.md

@@ -260,6 +260,7 @@ const defaultPreferences: Preferences = {
     enable: true,
     fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    // sourceDark: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-dark.webp', // 可选：暗色主题logo
   },
   navigation: {
     accordion: true,
@@ -457,6 +458,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
+  /** 暗色主题logo地址 (可选，若不设置则使用 source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {

packages/@core/base/design/src/css/ui.css

@@ -1,5 +1,5 @@
 .side-content {
-  animation-duration: 0.2s;
+  animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -37,7 +37,7 @@
 @keyframes slide-down {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(50px);
   }
 
   to {
@@ -49,7 +49,7 @@
 @keyframes slide-left {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(-50px);
   }
 
   to {
@@ -61,7 +61,7 @@
 @keyframes slide-right {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(50px);
   }
 
   to {
@@ -73,7 +73,7 @@
 @keyframes slide-up {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(-50px);
   }
 
   to {

packages/@core/base/shared/src/utils/__tests__/date.test.ts

@@ -0,0 +1,143 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  formatDate,
+  formatDateTime,
+  getCurrentTimezone,
+  getSystemTimezone,
+  isDate,
+  isDayjsObject,
+  setCurrentTimezone,
+} from '../date';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+describe('dateUtils', () => {
+  const sampleISO = '2024-10-30T12:34:56Z';
+  const sampleTimestamp = Date.parse(sampleISO);
+
+  beforeEach(() => {
+    // 重置时区
+    dayjs.tz.setDefault();
+    setCurrentTimezone(); // 重置为系统默认
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ===============================
+  // formatDate
+  // ===============================
+  describe('formatDate', () => {
+    it('should format a valid ISO date string', () => {
+      const formatted = formatDate(sampleISO, 'YYYY/MM/DD');
+      expect(formatted).toMatch(/2024\/10\/30/);
+    });
+
+    it('should format a timestamp correctly', () => {
+      const formatted = formatDate(sampleTimestamp);
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a Date object', () => {
+      const formatted = formatDate(new Date(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a dayjs object', () => {
+      const formatted = formatDate(dayjs(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should return original input if date is invalid', () => {
+      const invalid = 'not-a-date';
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const formatted = formatDate(invalid);
+      expect(formatted).toBe(invalid);
+      expect(spy).toHaveBeenCalledOnce();
+    });
+
+    it('should apply given format', () => {
+      const formatted = formatDate(sampleISO, 'YYYY-MM-DD HH:mm');
+      expect(formatted).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // formatDateTime
+  // ===============================
+  describe('formatDateTime', () => {
+    it('should format date into full datetime', () => {
+      const result = formatDateTime(sampleISO);
+      expect(result).toMatch(/2024-10-30 \d{2}:\d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // isDate
+  // ===============================
+  describe('isDate', () => {
+    it('should return true for Date instances', () => {
+      expect(isDate(new Date())).toBe(true);
+    });
+
+    it('should return false for non-Date values', () => {
+      expect(isDate('2024-10-30')).toBe(false);
+      expect(isDate(null)).toBe(false);
+      expect(isDate(undefined)).toBe(false);
+    });
+  });
+
+  // ===============================
+  // isDayjsObject
+  // ===============================
+  describe('isDayjsObject', () => {
+    it('should return true for dayjs objects', () => {
+      expect(isDayjsObject(dayjs())).toBe(true);
+    });
+
+    it('should return false for other values', () => {
+      expect(isDayjsObject(new Date())).toBe(false);
+      expect(isDayjsObject('string')).toBe(false);
+    });
+  });
+
+  // ===============================
+  // getSystemTimezone
+  // ===============================
+  describe('getSystemTimezone', () => {
+    it('should return a valid IANA timezone string', () => {
+      const tz = getSystemTimezone();
+      expect(typeof tz).toBe('string');
+      expect(tz).toMatch(/^[A-Z]+\/[A-Z_]+/i);
+    });
+  });
+
+  // ===============================
+  // setCurrentTimezone / getCurrentTimezone
+  // ===============================
+  describe('setCurrentTimezone & getCurrentTimezone', () => {
+    it('should set and retrieve the current timezone', () => {
+      setCurrentTimezone('Asia/Shanghai');
+      expect(getCurrentTimezone()).toBe('Asia/Shanghai');
+    });
+
+    it('should reset to system timezone when called with no args', () => {
+      const guessed = getSystemTimezone();
+      setCurrentTimezone();
+      expect(getCurrentTimezone()).toBe(guessed);
+    });
+
+    it('should update dayjs default timezone', () => {
+      setCurrentTimezone('America/New_York');
+      const d = dayjs('2024-01-01T00:00:00Z');
+      // 校验时区转换生效（小时变化）
+      expect(d.tz().format('HH')).not.toBe('00');
+    });
+  });
+});

packages/@core/base/shared/src/utils/date.ts

@@ -1,30 +1,26 @@
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
-export function formatDate(
-  time: Date | Dayjs | number | string | undefined,
-  format = 'YYYY-MM-DD',
-) {
-  if (!time) {
-    return time;
-  }
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type FormatDate = Date | dayjs.Dayjs | number | string;
+
+export function formatDate(time: FormatDate, format = 'YYYY-MM-DD') {
   try {
-    const date = dayjs(time);
+    const date = dayjs.isDayjs(time) ? time : dayjs(time);
     if (!date.isValid()) {
       throw new Error('Invalid date');
     }
-    return date.format(format);
+    return date.tz().format(format);
   } catch (error) {
     console.error(`Error formatting date: ${error}`);
-    return time;
+    return String(time);
   }
 }
 
-export function formatDateTime(
-  time: Date | Dayjs | number | string | undefined,
-) {
-  if (!time) {
-    return time;
-  }
+export function formatDateTime(time: FormatDate) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 
@@ -55,3 +51,33 @@ export function isDayjsObject(value: any): value is dayjs.Dayjs {
 export function dateFormatter(_row: any, _column: any, cellValue: any): string {
   return cellValue ? formatDate(cellValue)?.toString() || '' : '';
 }
+
+/**
+ * 获取当前时区
+ * @returns 当前时区
+ */
+export const getSystemTimezone = () => {
+  return dayjs.tz.guess();
+};
+
+/**
+ * 自定义设置的时区
+ */
+let currentTimezone = getSystemTimezone();
+
+/**
+ * 设置默认时区
+ * @param timezone
+ */
+export const setCurrentTimezone = (timezone?: string) => {
+  currentTimezone = timezone || getSystemTimezone();
+  dayjs.tz.setDefault(currentTimezone);
+};
+
+/**
+ * 获取设置的时区
+ * @returns 设置的时区
+ */
+export const getCurrentTimezone = () => {
+  return currentTimezone;
+};

packages/@core/base/typings/src/app.d.ts

@@ -93,6 +93,15 @@ type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
  */
 type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
 
+/**
+ * 时区选项
+ */
+interface TimezoneOption {
+  label: string;
+  offset: number;
+  timezone: string;
+}
+
 export type {
   AccessModeType,
   AuthPageLayoutType,
@@ -108,4 +117,5 @@ export type {
   PreferencesButtonPositionType,
   TabsStyleType,
   ThemeModeType,
+  TimezoneOption,
 };

packages/@core/composables/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vueuse/core": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "sortablejs": "catalog:",
     "vue": "catalog:"
   },

packages/@core/composables/src/index.ts

@@ -10,4 +10,4 @@ export {
   useForwardExpose,
   useForwardProps,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -22,6 +22,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "enableCheckUpdates": true,
     "enablePreferences": true,
     "enableRefreshToken": false,
+    "enableStickyPreferencesNavigationBar": true,
     "isMobile": false,
     "layout": "sidebar-nav",
     "locale": "zh-CN",
@@ -29,6 +30,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "name": "Vben Admin",
     "preferencesButtonPosition": "auto",
     "watermark": false,
+    "watermarkContent": "",
     "zIndex": 200,
   },
   "breadcrumb": {
@@ -131,6 +133,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "refresh": true,
     "sidebarToggle": true,
     "themeToggle": true,
+    "timezone": true,
   },
 }
 `;

packages/@core/preferences/src/config.ts

@@ -134,6 +134,7 @@ const defaultPreferences: Preferences = {
     refresh: true,
     sidebarToggle: true,
     themeToggle: true,
+    timezone: true,
   },
 };
 

packages/@core/preferences/src/constants.ts

@@ -1,4 +1,4 @@
-import type { BuiltinThemeType } from '@vben-core/typings';
+import type { BuiltinThemeType, TimezoneOption } from '@vben-core/typings';
 
 interface BuiltinThemePreset {
   color: string;
@@ -81,8 +81,39 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
   },
 ];
 
+/**
+ * 时区选项
+ */
+const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+    label: 'America/New_York(GMT-5)',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+    label: 'Europe/London(GMT0)',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+    label: 'Asia/Shanghai(GMT+8)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+    label: 'Asia/Tokyo(GMT+9)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+    label: 'Asia/Seoul(GMT+9)',
+  },
+];
+
 export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7);
 
-export { BUILT_IN_THEME_PRESETS };
+export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS };
 
 export type { BuiltinThemePreset };

packages/@core/preferences/src/types.ts

@@ -146,6 +146,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
+  /** 暗色主题logo地址 (可选，若不设置则使用 source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {
@@ -275,6 +277,8 @@ interface WidgetPreferences {
   sidebarToggle: boolean;
   /** 是否显示主题切换部件 */
   themeToggle: boolean;
+  /** 是否显示时区部件 */
+  timezone: boolean;
 }
 
 interface Preferences {

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -10,7 +10,7 @@ import {
   useLayoutFooterStyle,
   useLayoutHeaderStyle,
 } from '@vben-core/composables';
-import { Menu } from '@vben-core/icons';
+import { IconifyIcon } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
 
@@ -559,7 +559,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
               class="my-0 mr-1 rounded-md"
               @click="handleHeaderToggle"
             >
-              <Menu class="size-4" />
+              <IconifyIcon v-if="showSidebar" icon="ep:fold" />
+              <IconifyIcon v-else icon="ep:expand" />
             </VbenIconButton>
           </template>
           <slot name="header"></slot>

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -209,7 +209,7 @@ onBeforeUnmount(() => {
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
           'overflow-auto',
-          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -180,7 +180,7 @@ function escapeKeyDown(e: KeyboardEvent) {
   }
 }
 
-function handerOpenAutoFocus(e: Event) {
+function handleOpenAutoFocus(e: Event) {
   if (!openAutoFocus.value) {
     e?.preventDefault();
   }
@@ -209,6 +209,12 @@ const getForceMount = computed(() => {
   return !unref(destroyOnClose) && unref(firstOpened);
 });
 
+const handleOpened = () => {
+  requestAnimationFrame(() => {
+    props.modalApi?.onOpened();
+  });
+};
+
 function handleClosed() {
   isClosed.value = true;
   props.modalApi?.onClosed();
@@ -253,8 +259,8 @@ function handleClosed() {
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
-      @open-auto-focus="handerOpenAutoFocus"
-      @opened="() => modalApi?.onOpened()"
+      @open-auto-focus="handleOpenAutoFocus"
+      @opened="handleOpened"
       @pointer-down-outside="pointerDownOutside"
     >
       <DialogHeader

packages/@core/ui-kit/shadcn-ui/package.json

@@ -47,7 +47,7 @@
     "@vueuse/core": "catalog:",
     "class-variance-authority": "catalog:",
     "lucide-vue-next": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vee-validate": "catalog:",
     "vue": "catalog:"
   }

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -3,7 +3,7 @@ import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { CSSProperties } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BreadcrumbProps } from './types';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import BreadcrumbBackground from './breadcrumb-background.vue';
 import Breadcrumb from './breadcrumb.vue';

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import type { AsTag } from 'radix-vue';
+import type { AsTag } from 'reka-ui';
 
 import type { Component } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue

@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { LoaderCircle } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from '../../ui';
 

packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { useId } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { Checkbox } from '../../ui/checkbox';
 
@@ -11,7 +11,7 @@ const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
 
 const emits = defineEmits<CheckboxRootEmits>();
 
-const checked = defineModel<boolean>('checked');
+const checked = defineModel<boolean>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 
@@ -20,7 +20,7 @@ const id = useId();
 
 <template>
   <div class="flex items-center">
-    <Checkbox v-bind="forwarded" :id="id" v-model:checked="checked" />
+    <Checkbox v-bind="forwarded" :id="id" v-model="checked" />
     <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
   </div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue

@@ -3,7 +3,7 @@ import type {
   ContextMenuContentProps,
   ContextMenuRootEmits,
   ContextMenuRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -11,7 +11,7 @@ import type { IContextMenuItem } from './interface';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   ContextMenu,

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue

@@ -3,13 +3,13 @@ import type {
   HoverCardContentProps,
   HoverCardRootEmits,
   HoverCardRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
 

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts

@@ -1,2 +1,2 @@
 export { default as VbenHoverCard } from './hover-card.vue';
-export type { HoverCardContentProps } from 'radix-vue';
+export type { HoverCardContentProps } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import { VbenAvatar } from '../avatar';
 
 interface Props {
@@ -22,6 +24,10 @@ interface Props {
    * @zh_CN Logo 图标
    */
   src?: string;
+  /**
+   * @zh_CN 暗色主题 Logo 图标 (可选，若不设置则使用 src)
+   */
+  srcDark?: string;
   /**
    * @zh_CN Logo 文本
    */
@@ -36,14 +42,27 @@ defineOptions({
   name: 'VbenLogo',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   collapsed: false,
   href: 'javascript:void 0',
   logoSize: 32,
   src: '',
+  srcDark: '',
   theme: 'light',
   fit: 'cover',
 });
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 srcDark，则使用暗色主题的 logo
+  if (props.theme === 'dark' && props.srcDark) {
+    return props.srcDark;
+  }
+  // 否则使用默认的 src
+  return props.src;
+});
 </script>
 
 <template>
@@ -54,9 +73,9 @@ withDefaults(defineProps<Props>(), {
       class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
     >
       <VbenAvatar
-        v-if="src"
+        v-if="logoSrc"
         :alt="text"
-        :src="src"
+        :src="logoSrc"
         :size="logoSize"
         :fit="fit"
         class="relative rounded-none bg-transparent"

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -84,6 +84,8 @@ onBeforeUnmount(() => {
 });
 
 const id = useId();
+
+const pinType = 'text' as const;
 </script>
 
 <template>
@@ -94,7 +96,7 @@ const id = useId();
     class="flex w-full justify-between"
     otp
     placeholder="○"
-    type="number"
+    :type="pinType"
     @complete="handleComplete"
   >
     <div class="relative flex w-full">

packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue

@@ -3,13 +3,13 @@ import type {
   PopoverContentProps,
   PopoverRootEmits,
   PopoverRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   PopoverContent,

packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -3,7 +3,7 @@ import type { SegmentedItem } from './types';
 
 import { computed } from 'vue';
 
-import { TabsTrigger } from 'radix-vue';
+import { TabsTrigger } from 'reka-ui';
 
 import { Tabs, TabsContent, TabsList } from '../../ui';
 import TabsIndicator from './tabs-indicator.vue';

packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsIndicatorProps } from 'radix-vue';
+import type { TabsIndicatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsIndicator, useForwardProps } from 'radix-vue';
+import { TabsIndicator, useForwardProps } from 'reka-ui';
 
 const props = defineProps<TabsIndicatorProps & { class?: any }>();
 
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
         props.class,
       )
     "

packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TooltipContentProps } from 'radix-vue';
+import type { TooltipContentProps } from 'reka-ui';
 
 import type { StyleValue } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/index.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './ui';
-export { createContext, Slot, VisuallyHidden } from 'radix-vue';
+export { createContext, Slot, VisuallyHidden } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue';
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
 
-import { AccordionRoot, useForwardPropsEmits } from 'radix-vue';
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AccordionRootProps>();
 const emits = defineEmits<AccordionRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from 'radix-vue';
+import type { AccordionContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionContent } from 'radix-vue';
+import { AccordionContent } from 'reka-ui';
 
 const props = defineProps<AccordionContentProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from 'radix-vue';
+import type { AccordionItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionItem, useForwardProps } from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AccordionItemProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AccordionTriggerProps } from 'radix-vue';
+import type { AccordionTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import { AccordionHeader, AccordionTrigger } from 'radix-vue';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
 
 const props = defineProps<AccordionTriggerProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue';
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
 
-import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AlertDialogProps>();
 const emits = defineEmits<AlertDialogEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  AlertDialogContentEmits,
-  AlertDialogContentProps,
-} from 'radix-vue';
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -14,7 +11,7 @@ import {
   AlertDialogContent,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import AlertDialogOverlay from './AlertDialogOverlay.vue';
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { AlertDialogDescriptionProps } from 'radix-vue';
+import type { AlertDialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogDescription, useForwardProps } from 'radix-vue';
+import { AlertDialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from 'radix-vue';
+import type { AlertDialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogTitle, useForwardProps } from 'radix-vue';
+import { AlertDialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogTitleProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue

@@ -3,7 +3,7 @@ import type { AvatarVariants } from './avatar';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AvatarRoot } from 'radix-vue';
+import { AvatarRoot } from 'reka-ui';
 
 import { avatarVariant } from './avatar';
 

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   as: 'a',

packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import type { ButtonVariants, ButtonVariantSize } from './types';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from './button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Check, Minus } from 'lucide-vue-next';
-import {
-  CheckboxIndicator,
-  CheckboxRoot,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   CheckboxRootProps & { class?: any; indeterminate?: boolean }
@@ -31,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border hover:border-primary peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
 
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
   modal: false,

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
 import type {
   ContextMenuCheckboxItemEmits,
   ContextMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ContextMenuContentEmits,
-  ContextMenuContentProps,
-} from 'radix-vue';
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +9,7 @@ import {
   ContextMenuContent,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuContentProps & { class?: any }>();
 const emits = defineEmits<ContextMenuContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuItemProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from 'radix-vue';
+import type { ContextMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuLabel } from 'radix-vue';
+import { ContextMenuLabel } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuLabelProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue

@@ -2,9 +2,9 @@
 import type {
   ContextMenuRadioGroupEmits,
   ContextMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { ContextMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioGroupProps>();
 const emits = defineEmits<ContextMenuRadioGroupEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue

@@ -2,7 +2,7 @@
 import type {
   ContextMenuRadioItemEmits,
   ContextMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from 'radix-vue';
+import type { ContextMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSeparator } from 'radix-vue';
+import { ContextMenuSeparator } from 'reka-ui';
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue';
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
 
-import { ContextMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuSubProps>();
 const emits = defineEmits<ContextMenuSubEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue

@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from 'radix-vue';
+import type { ContextMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { ContextMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuSubTriggerProps & {

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from 'radix-vue';
+import type { ContextMenuTriggerProps } from 'reka-ui';
 
-import { ContextMenuTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<ContextMenuTriggerProps>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -8,7 +8,7 @@ import { computed, ref } from 'vue';
 import { cn } from '@vben-core/shared/utils';
 
 import { X } from 'lucide-vue-next';
-import { DialogClose, DialogContent, useForwardPropsEmits } from 'radix-vue';
+import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
 
 import DialogOverlay from './DialogOverlay.vue';
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue';
+import type { DialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogDescription, useForwardProps } from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogDescriptionProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue';
+import type { DialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogTitleProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue';
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui';
 
-import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: false,

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuCheckboxItemEmits,
   DropdownMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuContentEmits,
   DropdownMenuContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DropdownMenuContent,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: any }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'radix-vue';
+import type { DropdownMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuItem, useForwardProps } from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuItemProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'radix-vue';
+import type { DropdownMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuLabelProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -2,9 +2,9 @@
 import type {
   DropdownMenuRadioGroupEmits,
   DropdownMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuRadioItemEmits,
   DropdownMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'radix-vue';
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSeparator } from 'radix-vue';
+import { DropdownMenuSeparator } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue';
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui';
 
-import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'radix-vue';
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'radix-vue';
+import type { DropdownMenuTriggerProps } from 'reka-ui';
 
-import { DropdownMenuTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuTriggerProps>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts

@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
-export { DropdownMenuPortal } from 'radix-vue';
+export { DropdownMenuPortal } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue';
+import { Slot } from 'reka-ui';
 
 import { useFormField } from './useFormField';
 

packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue';
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
 
-import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue';
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HoverCardContentProps } from 'radix-vue';
+import type { HoverCardContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { HoverCardContent, HoverCardPortal, useForwardProps } from 'radix-vue';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: any }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue

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