From 24b6e7a83533f39240f55c8f4cba238d9957e27d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 12 Nov 2025 17:38:41 +0800
Subject: [PATCH 01/13] feat: add global font size adjustment

---
 package.json                                              | 2 +-
 packages/@core/base/design/src/css/global.css             | 3 ++-
 packages/@core/preferences/src/config.ts                  | 1 +
 packages/@core/preferences/src/types.ts                   | 2 ++
 packages/@core/preferences/src/update-css-variables.ts    | 8 ++++++++
 packages/@core/ui-kit/menu-ui/src/components/menu.vue     | 8 ++++----
 .../menu-ui/src/components/normal-menu/normal-menu.vue    | 6 +++---
 .../layouts/src/widgets/preferences/blocks/index.ts       | 1 +
 .../src/widgets/preferences/preferences-drawer.vue        | 5 +++++
 packages/locales/src/langs/en-US/preferences.json         | 2 ++
 packages/locales/src/langs/zh-CN/preferences.json         | 2 ++
 11 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 06e706947..183e7ca04 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.12.0"
   },
-  "packageManager": "pnpm@10.14.0",
+  "packageManager": "pnpm@10.21.0",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css
index d19990985..dc154fc72 100644
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -14,8 +14,9 @@
   }
 
   html {
-    @apply text-foreground bg-background font-sans text-[100%];
+    @apply text-foreground bg-background font-sans;
 
+    font-size: var(--font-size-base, 16px);
     font-variation-settings: normal;
     line-height: 1.15;
     text-size-adjust: 100%;
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
index 5b8d72363..d9977b1ef 100644
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -116,6 +116,7 @@ const defaultPreferences: Preferences = {
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',
     radius: '0.5',
+    fontSize: 16,
     semiDarkHeader: false,
     semiDarkSidebar: false,
   },
diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index 9a4d94bdf..685ffa2ef 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -243,6 +243,8 @@ interface ThemePreferences {
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
+  /** 字体大小（单位：px） */
+  fontSize: number;
   /** 是否开启半深色header（只在theme='light'时生效） */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
diff --git a/packages/@core/preferences/src/update-css-variables.ts b/packages/@core/preferences/src/update-css-variables.ts
index 0d3466a01..b00be7825 100644
--- a/packages/@core/preferences/src/update-css-variables.ts
+++ b/packages/@core/preferences/src/update-css-variables.ts
@@ -66,6 +66,14 @@ function updateCSSVariables(preferences: Preferences) {
   if (Reflect.has(theme, 'radius')) {
     document.documentElement.style.setProperty('--radius', `${radius}rem`);
   }
+
+  // 更新字体大小
+  if (Reflect.has(theme, 'fontSize')) {
+    document.documentElement.style.setProperty(
+      '--font-size-base',
+      `${theme.fontSize}px`,
+    );
+  }
 }
 
 /**
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index 887604567..624be2910 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -444,7 +444,7 @@ $namespace: vben;
 .#{$namespace}-menu__popup-container,
 .#{$namespace}-menu {
   --menu-title-width: 140px;
-  --menu-item-icon-size: 16px;
+  --menu-item-icon-size: var(--font-size-base, 16px);
   --menu-item-height: 38px;
   --menu-item-padding-y: 21px;
   --menu-item-padding-x: 12px;
@@ -458,7 +458,7 @@ $namespace: vben;
   --menu-item-collapse-margin-x: 0px;
   --menu-item-radius: 0px;
   --menu-item-indent: 16px;
-  --menu-font-size: 14px;
+  --menu-font-size: calc(var(--font-size-base, 16px) * 0.875);
 
   &.is-dark {
     --menu-background-color: hsl(var(--menu));
@@ -752,7 +752,7 @@ $namespace: vben;
     }
     .#{$namespace}-menu__icon {
       display: block;
-      font-size: 20px !important;
+      font-size: calc(var(--font-size-base, 16px) * 1.25) !important;
       transition: all 0.25s ease;
     }
 
@@ -760,7 +760,7 @@ $namespace: vben;
       display: inline-flex;
       margin-top: 8px;
       margin-bottom: 0;
-      font-size: 12px;
+      font-size: calc(var(--font-size-base, 16px) * 0.75);
       font-weight: 400;
       line-height: normal;
       transition: all 0.25s ease;
diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
index 7cb29e512..0c4142d22 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -102,7 +102,7 @@ $namespace: vben;
     }
 
     .#{$namespace}-normal-menu__icon {
-      font-size: 20px;
+      font-size: calc(var(--font-size-base, 16px) * 1.25);
     }
   }
 
@@ -146,14 +146,14 @@ $namespace: vben;
 
   &__icon {
     max-height: 20px;
-    font-size: 20px;
+    font-size: calc(var(--font-size-base, 16px) * 1.25);
     transition: all 0.25s ease;
   }
 
   &__name {
     margin-top: 8px;
     margin-bottom: 0;
-    font-size: 12px;
+    font-size: calc(var(--font-size-base, 16px) * 0.75);
     font-weight: 400;
     transition: all 0.25s ease;
   }
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/index.ts b/packages/effects/layouts/src/widgets/preferences/blocks/index.ts
index 59595dc48..cdd6bb1db 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/index.ts
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/index.ts
@@ -15,5 +15,6 @@ export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
 export { default as SwitchItem } from './switch-item.vue';
 export { default as BuiltinTheme } from './theme/builtin.vue';
 export { default as ColorMode } from './theme/color-mode.vue';
+export { default as FontSize } from './theme/font-size.vue';
 export { default as Radius } from './theme/radius.vue';
 export { default as Theme } from './theme/theme.vue';
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index 301004d6e..a90c27dc0 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -44,6 +44,7 @@ import {
   Content,
   Copyright,
   Footer,
+  FontSize,
   General,
   GlobalShortcutKeys,
   Header,
@@ -85,6 +86,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
 const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
 const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
+const themeFontSize = defineModel<number>('themeFontSize');
 const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
@@ -328,6 +330,9 @@ async function handleReset() {
             <Block :title="$t('preferences.theme.radius')">
               <Radius v-model="themeRadius" />
             </Block>
+            <Block :title="$t('preferences.theme.fontSize')">
+              <FontSize v-model="themeFontSize" />
+            </Block>
             <Block :title="$t('preferences.other')">
               <ColorMode
                 v-model:app-color-gray-mode="appColorGrayMode"
diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json
index b0bbe3741..977632acf 100644
--- a/packages/locales/src/langs/en-US/preferences.json
+++ b/packages/locales/src/langs/en-US/preferences.json
@@ -120,6 +120,8 @@
   "theme": {
     "title": "Theme",
     "radius": "Radius",
+    "fontSize": "Font Size",
+    "fontSizeTip": "Adjust global font size with real-time preview",
     "light": "Light",
     "dark": "Dark",
     "darkSidebar": "Semi Dark Sidebar",
diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json
index de8413df9..f8e390f2b 100644
--- a/packages/locales/src/langs/zh-CN/preferences.json
+++ b/packages/locales/src/langs/zh-CN/preferences.json
@@ -120,6 +120,8 @@
   "theme": {
     "title": "主题",
     "radius": "圆角",
+    "fontSize": "字体大小",
+    "fontSizeTip": "调整全局字体大小，实时预览效果",
     "light": "浅色",
     "dark": "深色",
     "darkSidebar": "深色侧边栏",

From 0bc71696987b13bcddab7336e3a84ba294f53faa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 12 Nov 2025 17:39:07 +0800
Subject: [PATCH 02/13] feat: add global font size adjustment

---
 packages/@core/preferences/src/types.ts       |  4 +-
 .../preferences/blocks/theme/font-size.vue    | 62 +++++++++++++++++++
 .../preferences/preferences-drawer.vue        |  2 +-
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue

diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index 685ffa2ef..17224b048 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -239,12 +239,12 @@ interface ThemePreferences {
   colorSuccess: string;
   /** 警告色 */
   colorWarning: string;
+  /** 字体大小（单位：px） */
+  fontSize: number;
   /** 当前主题 */
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
-  /** 字体大小（单位：px） */
-  fontSize: number;
   /** 是否开启半深色header（只在theme='light'时生效） */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
new file mode 100644
index 000000000..b1aaa2d81
--- /dev/null
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceFontSize',
+});
+
+const modelValue = defineModel<number>({
+  default: 16,
+});
+
+const min = 15;
+const max = 22;
+const step = 1;
+
+// 限制输入值在 min 和 max 之间
+watch(
+  modelValue,
+  (newValue) => {
+    if (newValue < min) {
+      modelValue.value = min;
+    } else if (newValue > max) {
+      modelValue.value = max;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <NumberField
+        v-model="modelValue"
+        :max="max"
+        :min="min"
+        :step="step"
+        class="w-full"
+      >
+        <NumberFieldContent>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldContent>
+      </NumberField>
+      <span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
+    </div>
+    <div class="text-muted-foreground text-xs">
+      {{ $t('preferences.theme.fontSizeTip') }}
+    </div>
+  </div>
+</template>
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index a90c27dc0..c88a9bc45 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -43,8 +43,8 @@ import {
   ColorMode,
   Content,
   Copyright,
-  Footer,
   FontSize,
+  Footer,
   General,
   GlobalShortcutKeys,
   Header,

From cd7c11c7d0b3952f4a139d3d6eeafe8724d545c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 19 Nov 2025 10:14:04 +0800
Subject: [PATCH 03/13] fix: run 'pnpm format' update various components and
 improve layout structure

- Updated demo-preview and preview-group components for better error handling and layout.
- Enhanced drawer and modal components for improved auto-height functionality.
- Refactored layout components including header, footer, sidebar, and tabbar for better responsiveness and usability.
- Adjusted tooltip and help tooltip components for better user guidance.
- Fixed issues in various UI components to ensure consistent styling and functionality across the application.
---
 docs/.vitepress/components/demo-preview.vue      |  6 +++---
 docs/.vitepress/components/preview-group.vue     | 10 +++++-----
 .../src/demos/vben-drawer/auto-height/drawer.vue |  2 +-
 docs/src/demos/vben-modal/auto-height/modal.vue  |  2 +-
 .../__tests__/__snapshots__/config.test.ts.snap  |  1 +
 .../form-ui/src/form-render/form-field.vue       |  4 ++--
 .../form-ui/src/form-render/form-label.vue       |  2 +-
 .../layout-ui/src/components/layout-content.vue  |  2 +-
 .../layout-ui/src/components/layout-footer.vue   |  2 +-
 .../layout-ui/src/components/layout-header.vue   |  2 +-
 .../layout-ui/src/components/layout-sidebar.vue  |  4 ++--
 .../layout-ui/src/components/layout-tabbar.vue   |  2 +-
 .../widgets/sidebar-collapse-button.vue          |  2 +-
 .../components/widgets/sidebar-fixed-button.vue  |  2 +-
 .../@core/ui-kit/layout-ui/src/vben-layout.vue   |  2 +-
 .../ui-kit/menu-ui/src/components/menu-badge.vue |  2 +-
 .../src/components/normal-menu/normal-menu.vue   |  6 +++---
 .../@core/ui-kit/popup-ui/src/alert/alert.vue    |  4 ++--
 .../@core/ui-kit/popup-ui/src/drawer/drawer.vue  |  4 ++--
 .../@core/ui-kit/popup-ui/src/modal/modal.vue    |  4 ++--
 .../shadcn-ui/src/components/avatar/avatar.vue   |  2 +-
 .../src/components/back-top/back-top.vue         |  2 +-
 .../breadcrumb/breadcrumb-background.vue         |  8 ++++----
 .../components/dropdown-menu/dropdown-menu.vue   |  2 +-
 .../dropdown-menu/dropdown-radio-menu.vue        |  2 +-
 .../src/components/full-screen/full-screen.vue   |  4 ++--
 .../components/input-password/input-password.vue |  4 ++--
 .../input-password/password-strength.vue         |  2 +-
 .../shadcn-ui/src/components/logo/logo.vue       |  2 +-
 .../src/components/scrollbar/scrollbar.vue       |  4 ++--
 .../src/components/segmented/segmented.vue       |  4 ++--
 .../src/components/segmented/tabs-indicator.vue  |  2 +-
 .../shadcn-ui/src/components/spinner/loading.vue |  6 +++---
 .../shadcn-ui/src/components/spinner/spinner.vue |  4 ++--
 .../src/components/tooltip/help-tooltip.vue      |  2 +-
 .../shadcn-ui/src/components/tooltip/tooltip.vue |  2 +-
 .../src/ui/accordion/AccordionContent.vue        |  2 +-
 .../src/ui/accordion/AccordionTrigger.vue        |  2 +-
 .../src/ui/alert-dialog/AlertDialogContent.vue   |  4 ++--
 .../ui/alert-dialog/AlertDialogDescription.vue   |  2 +-
 .../src/ui/alert-dialog/AlertDialogOverlay.vue   |  2 +-
 .../src/ui/breadcrumb/BreadcrumbItem.vue         |  2 +-
 .../src/ui/breadcrumb/BreadcrumbLink.vue         |  2 +-
 .../src/ui/breadcrumb/BreadcrumbList.vue         |  2 +-
 .../src/ui/breadcrumb/BreadcrumbPage.vue         |  2 +-
 .../@core/ui-kit/shadcn-ui/src/ui/card/Card.vue  |  2 +-
 .../shadcn-ui/src/ui/card/CardDescription.vue    |  2 +-
 .../shadcn-ui/src/ui/checkbox/Checkbox.vue       |  2 +-
 .../ui/context-menu/ContextMenuCheckboxItem.vue  |  2 +-
 .../src/ui/context-menu/ContextMenuContent.vue   |  2 +-
 .../src/ui/context-menu/ContextMenuItem.vue      |  2 +-
 .../src/ui/context-menu/ContextMenuLabel.vue     |  2 +-
 .../src/ui/context-menu/ContextMenuRadioItem.vue |  2 +-
 .../src/ui/context-menu/ContextMenuSeparator.vue |  2 +-
 .../src/ui/context-menu/ContextMenuShortcut.vue  |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue    |  2 +-
 .../shadcn-ui/src/ui/dialog/DialogContent.vue    |  4 ++--
 .../src/ui/dialog/DialogDescription.vue          |  2 +-
 .../shadcn-ui/src/ui/dialog/DialogOverlay.vue    |  2 +-
 .../src/ui/dialog/DialogScrollContent.vue        |  6 +++---
 .../dropdown-menu/DropdownMenuCheckboxItem.vue   |  2 +-
 .../src/ui/dropdown-menu/DropdownMenuContent.vue |  2 +-
 .../src/ui/dropdown-menu/DropdownMenuItem.vue    |  2 +-
 .../ui/dropdown-menu/DropdownMenuRadioItem.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuSeparator.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuSubTrigger.vue  |  2 +-
 .../shadcn-ui/src/ui/form/FormDescription.vue    |  2 +-
 .../ui-kit/shadcn-ui/src/ui/form/FormMessage.vue |  2 +-
 .../src/ui/hover-card/HoverCardContent.vue       |  2 +-
 .../ui-kit/shadcn-ui/src/ui/input/Input.vue      |  2 +-
 .../src/ui/number-field/NumberFieldInput.vue     |  2 +-
 .../shadcn-ui/src/ui/pin-input/PinInputInput.vue |  2 +-
 .../shadcn-ui/src/ui/popover/PopoverContent.vue  |  2 +-
 .../src/ui/radio-group/RadioGroupItem.vue        |  2 +-
 .../src/ui/resizable/ResizableHandle.vue         |  4 ++--
 .../shadcn-ui/src/ui/scroll-area/ScrollBar.vue   |  2 +-
 .../shadcn-ui/src/ui/select/SelectContent.vue    |  2 +-
 .../shadcn-ui/src/ui/select/SelectItem.vue       |  2 +-
 .../shadcn-ui/src/ui/select/SelectSeparator.vue  |  2 +-
 .../shadcn-ui/src/ui/select/SelectTrigger.vue    |  2 +-
 .../shadcn-ui/src/ui/separator/Separator.vue     |  4 ++--
 .../shadcn-ui/src/ui/sheet/SheetDescription.vue  |  2 +-
 .../shadcn-ui/src/ui/sheet/SheetOverlay.vue      |  2 +-
 .../ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue |  2 +-
 .../ui-kit/shadcn-ui/src/ui/switch/Switch.vue    |  4 ++--
 .../ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue |  2 +-
 .../ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue    |  2 +-
 .../ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue |  2 +-
 .../shadcn-ui/src/ui/textarea/Textarea.vue       |  2 +-
 .../shadcn-ui/src/ui/tooltip/TooltipContent.vue  |  2 +-
 .../@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue  |  6 +++---
 .../tabs-ui/src/components/tabs-chrome/tabs.vue  | 16 ++++++++--------
 .../ui-kit/tabs-ui/src/components/tabs/tabs.vue  | 10 +++++-----
 .../tabs-ui/src/components/widgets/tool-more.vue |  2 +-
 .../src/components/widgets/tool-screen.vue       |  2 +-
 packages/@core/ui-kit/tabs-ui/src/tabs-view.vue  |  6 +++---
 .../src/views/demos/access/button-control.vue    |  2 +-
 playground/src/views/demos/access/index.vue      |  2 +-
 .../src/views/demos/features/icons/index.vue     |  2 +-
 .../views/demos/features/login-expired/index.vue |  2 +-
 .../src/views/demos/features/tabs/index.vue      |  8 ++++----
 .../src/views/demos/features/watermark/index.vue |  2 +-
 .../views/examples/drawer/auto-height-demo.vue   |  2 +-
 .../src/views/examples/layout/col-page.vue       |  2 +-
 playground/src/views/examples/loading/index.vue  |  4 ++--
 .../views/examples/modal/auto-height-demo.vue    |  2 +-
 playground/src/views/examples/tippy/index.vue    |  2 +-
 109 files changed, 158 insertions(+), 157 deletions(-)

diff --git a/docs/.vitepress/components/demo-preview.vue b/docs/.vitepress/components/demo-preview.vue
index 4c8829f88..983a95062 100644
--- a/docs/.vitepress/components/demo-preview.vue
+++ b/docs/.vitepress/components/demo-preview.vue
@@ -19,15 +19,15 @@ const parsedFiles = computed(() => {
 </script>
 
 <template>
-  <div class="border-border shadow-float relative rounded-xl border">
+  <div class="relative rounded-xl border border-border shadow-float">
     <div
       class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
     >
       <div class="flex w-full max-w-[700px] px-2">
         <ClientOnly>
           <slot v-if="parsedFiles.length > 0"></slot>
-          <div v-else class="text-destructive text-sm">
-            <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
+          <div v-else class="text-sm text-destructive">
+            <span class="rounded-sm bg-destructive px-1 py-1 text-foreground">
               ERROR:
             </span>
             The preview directory does not exist. Please check the 'dir'
diff --git a/docs/.vitepress/components/preview-group.vue b/docs/.vitepress/components/preview-group.vue
index 2fb02d3fd..e08e921aa 100644
--- a/docs/.vitepress/components/preview-group.vue
+++ b/docs/.vitepress/components/preview-group.vue
@@ -48,10 +48,10 @@ const toggleOpen = () => {
 <template>
   <TabsRoot
     v-model="currentTab"
-    class="bg-background-deep border-border overflow-hidden rounded-b-xl border-t"
+    class="overflow-hidden rounded-b-xl border-t border-border bg-background-deep"
     @update:model-value="open = true"
   >
-    <div class="border-border bg-background flex border-b-2 pr-2">
+    <div class="flex border-b-2 border-border bg-background pr-2">
       <div class="flex w-full items-center justify-between text-[13px]">
         <TabsList class="relative flex">
           <template v-if="open">
@@ -64,7 +64,7 @@ const toggleOpen = () => {
               v-for="(tab, index) in tabs"
               :key="index"
               :value="tab.label"
-              class="border-box text-foreground px-4 py-3 data-[state=active]:text-[var(--vp-c-indigo-1)]"
+              class="border-box px-4 py-3 text-foreground data-[state=active]:text-[var(--vp-c-indigo-1)]"
               tabindex="-1"
             >
               {{ tab.label }}
@@ -81,7 +81,7 @@ const toggleOpen = () => {
           <VbenTooltip side="top">
             <template #trigger>
               <Code
-                class="hover:bg-accent size-7 cursor-pointer rounded-full p-1.5"
+                class="size-7 cursor-pointer rounded-full p-1.5 hover:bg-accent"
                 @click="toggleOpen"
               />
             </template>
@@ -101,7 +101,7 @@ const toggleOpen = () => {
         as-child
         class="rounded-xl"
       >
-        <div class="text-foreground relative rounded-xl">
+        <div class="relative rounded-xl text-foreground">
           <component :is="tab.component" class="border-0" />
         </div>
       </TabsContent>
diff --git a/docs/src/demos/vben-drawer/auto-height/drawer.vue b/docs/src/demos/vben-drawer/auto-height/drawer.vue
index 9ab433ccb..1b09723c2 100644
--- a/docs/src/demos/vben-drawer/auto-height/drawer.vue
+++ b/docs/src/demos/vben-drawer/auto-height/drawer.vue
@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>
diff --git a/docs/src/demos/vben-modal/auto-height/modal.vue b/docs/src/demos/vben-modal/auto-height/modal.vue
index 8757d5ef0..e270df1ae 100644
--- a/docs/src/demos/vben-modal/auto-height/modal.vue
+++ b/docs/src/demos/vben-modal/auto-height/modal.vue
@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>
diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index a6452b399..40f66c502 100644
--- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -115,6 +115,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "colorWarning": "hsl(42 84% 61%)",
     "mode": "dark",
     "radius": "0.5",
+    "fontSize": 16,
     "semiDarkHeader": false,
     "semiDarkSidebar": false,
   },
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 86ca81661..53c731e72 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -339,7 +339,7 @@ onUnmounted(() => {
                 :is="FieldComponent"
                 ref="fieldComponentRef"
                 :class="{
-                  'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
                     isInValid,
                 }"
                 v-bind="createComponentProps(slotProps)"
@@ -367,7 +367,7 @@ onUnmounted(() => {
                     <CircleAlert
                       :class="
                         cn(
-                          'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+                          'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
                         )
                       "
                     />
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
index 9af4c133d..44d002d9b 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -21,7 +21,7 @@ const props = defineProps<Props>();
 
 <template>
   <FormLabel :class="cn('flex items-center', props.class)">
-    <span v-if="required" class="text-destructive mr-[2px]">*</span>
+    <span v-if="required" class="mr-[2px] text-destructive">*</span>
     <slot></slot>
     <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
       <VbenRenderContent :content="help" />
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
index da39c1c58..1be778007 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -55,7 +55,7 @@ const style = computed((): CSSProperties => {
 </script>
 
 <template>
-  <main ref="contentElement" :style="style" class="bg-background-deep relative">
+  <main ref="contentElement" :style="style" class="relative bg-background-deep">
     <Slot :style="overlayStyle">
       <slot name="overlay"></slot>
     </Slot>
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
index 129209dae..3793f9225 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@@ -37,7 +37,7 @@ const style = computed((): CSSProperties => {
 <template>
   <footer
     :style="style"
-    class="bg-background-deep bottom-0 w-full transition-all duration-200"
+    class="bottom-0 w-full bg-background-deep transition-all duration-200"
   >
     <slot></slot>
   </footer>
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
index 534e4162c..fba07d4e6 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -64,7 +64,7 @@ const logoStyle = computed((): CSSProperties => {
   <header
     :class="theme"
     :style="style"
-    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b pl-2 transition-[margin-top] duration-200"
+    class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
   >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index 214658d36..9a8a608ae 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -264,7 +264,7 @@ function handleMouseleave() {
       theme,
       {
         'bg-sidebar-deep': isSidebarMixed,
-        'bg-sidebar border-border border-r': !isSidebarMixed,
+        'border-r border-border bg-sidebar': !isSidebarMixed,
       },
     ]"
     :style="style"
@@ -295,7 +295,7 @@ function handleMouseleave() {
         'border-l': extraVisible,
       }"
       :style="extraStyle"
-      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-r transition-all duration-200"
+      class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
     >
       <SidebarCollapseButton
         v-if="isSidebarMixed && expandOnHover"
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index e588e6154..148600e13 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -23,7 +23,7 @@ const style = computed((): CSSProperties => {
 <template>
   <section
     :style="style"
-    class="border-border bg-background flex w-full border-b transition-all"
+    class="flex w-full border-b border-border bg-background transition-all"
   >
     <slot></slot>
   </section>
diff --git a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
index 8092c0d10..fa4abe95a 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -10,7 +10,7 @@ function handleCollapsed() {
 
 <template>
   <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
+    class="flex-center absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
     @click.stop="handleCollapsed"
   >
     <ChevronsRight v-if="collapsed" class="size-4" />
diff --git a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
index ce839f5cc..5cfd89b63 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -10,7 +10,7 @@ function toggleFixed() {
 
 <template>
   <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
+    class="flex-center absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
     @click="toggleFixed"
   >
     <PinOff v-if="!expandOnHover" class="size-3.5" />
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 3ae529eeb..bf7d7753f 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -610,7 +610,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
     <div
       v-if="maskVisible"
       :style="maskStyle"
-      class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
+      class="fixed left-0 top-0 h-full w-full bg-overlay transition-[background-color] duration-200"
       @click="handleClickMask"
     ></div>
   </div>
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
index b1dd94c2b..9a329c50f 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
@@ -49,7 +49,7 @@ const badgeStyle = computed(() => {
       v-else
       :class="badgeClass"
       :style="badgeStyle"
-      class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
+      class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground"
     >
       {{ badge }}
     </div>
diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
index 0c4142d22..86e86c914 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -125,16 +125,16 @@ $namespace: vben;
       border-color 0.15s ease;
 
     &.is-active {
-      @apply text-primary bg-primary dark:bg-accent;
+      @apply bg-primary text-primary dark:bg-accent;
 
       .#{$namespace}-normal-menu__name,
       .#{$namespace}-normal-menu__icon {
-        @apply text-primary-foreground font-semibold;
+        @apply font-semibold text-primary-foreground;
       }
     }
 
     &:not(.is-active):hover {
-      @apply dark:bg-accent text-primary bg-heavy dark:text-foreground;
+      @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
     }
 
     &:hover {
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 6997235ac..6b52a1121 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -149,7 +149,7 @@ async function handleOpenChange(val: boolean) {
           containerClass,
           'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
           {
-            'border-border border': bordered,
+            'border border-border': bordered,
             'shadow-3xl': !bordered,
           },
         )
@@ -168,7 +168,7 @@ async function handleOpenChange(val: boolean) {
                 :disabled="loading"
                 @click="handleCancel"
               >
-                <X class="text-muted-foreground size-4" />
+                <X class="size-4 text-muted-foreground" />
               </VbenButton>
             </AlertDialogCancel>
           </div>
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index 8a3c0c53f..b06444407 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -223,7 +223,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'left'"
             as-child
             :disabled="submitting"
-            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
           >
             <slot name="close-icon">
               <VbenIconButton>
@@ -264,7 +264,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'right'"
             as-child
             :disabled="submitting"
-            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
           >
             <slot name="close-icon">
               <VbenIconButton>
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index a44a616ce..682d95e61 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -235,7 +235,7 @@ function handleClosed() {
           shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
           modalClass,
           {
-            'border-border border': bordered,
+            'border border-border': bordered,
             'shadow-3xl': !bordered,
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
               shouldFullscreen,
@@ -311,7 +311,7 @@ function handleClosed() {
       <VbenLoading v-if="showLoading || submitting" spinning />
       <VbenIconButton
         v-if="fullscreenButton"
-        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
+        class="flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
         @click="handleFullscreen"
       >
         <Shrink v-if="fullscreen" class="size-3.5" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 9ed840890..2b2ed2f2f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -69,7 +69,7 @@ const rootStyle = computed(() => {
     <span
       v-if="dot"
       :class="dotClass"
-      class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
+      class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background"
     >
     </span>
   </div>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
index 1f8b0bc77..8da6cde42 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
+      class="data z-popup fixed bottom-10 size-10 rounded-full bg-background shadow-float duration-500 hover:bg-heavy dark:bg-accent dark:hover:bg-heavy"
       size="icon"
       variant="icon"
       @click="handleClick"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
index cfed25b39..5659ec8f3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -37,7 +37,7 @@ function handleClick(index: number, path?: string) {
               />
               <span
                 :class="{
-                  'text-foreground font-normal':
+                  'font-normal text-foreground':
                     index === breadcrumbs.length - 1,
                 }"
                 >{{ item.title }}
@@ -55,7 +55,7 @@ li {
 }
 
 li a {
-  @apply text-muted-foreground bg-accent relative mr-9 flex h-7 items-center py-0 pl-[5px] pr-2 text-[13px];
+  @apply relative mr-9 flex h-7 items-center bg-accent py-0 pl-[5px] pr-2 text-[13px] text-muted-foreground;
 }
 
 li a > span {
@@ -84,7 +84,7 @@ li:last-child a::after {
 
 li a::before,
 li a::after {
-  @apply border-accent absolute top-0 h-0 w-0 border-[.875rem] border-solid content-[''];
+  @apply absolute top-0 h-0 w-0 border-[.875rem] border-solid border-accent content-[''];
 }
 
 li a::before {
@@ -92,7 +92,7 @@ li a::before {
 }
 
 li a::after {
-  @apply border-l-accent left-full border-transparent;
+  @apply left-full border-transparent border-l-accent;
 }
 
 li:not(:last-child) a:hover {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
index f1bbdee92..b59c8176f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@@ -35,7 +35,7 @@ function handleItemClick(menu: IDropdownMenuItem) {
         <template v-for="menu in menus" :key="menu.value">
           <DropdownMenuItem
             :disabled="menu.disabled"
-            class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
             @click="handleItemClick(menu)"
           >
             <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
index c0e23c875..ff8207ace 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -34,7 +34,7 @@ function handleItemClick(value: string) {
                 ? 'bg-accent text-accent-foreground'
                 : ''
             "
-            class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
             @click="handleItemClick(menu.value)"
           >
             <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue b/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
index 80e469d33..524b55753 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
@@ -25,7 +25,7 @@ isFullscreen.value = !!(
     class="hover:animate-[shrink_0.3s_ease-in-out]"
     @click="toggle"
   >
-    <Minimize v-if="isFullscreen" class="text-foreground size-4" />
-    <Maximize v-else class="text-foreground size-4" />
+    <Minimize v-if="isFullscreen" class="size-4 text-foreground" />
+    <Maximize v-else class="size-4 text-foreground" />
   </VbenIconButton>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
index be79862a8..e9ff3fbf0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -38,7 +38,7 @@ const show = ref(false);
     />
     <template v-if="passwordStrength">
       <PasswordStrength :password="modelValue" />
-      <p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
+      <p v-if="slots.strengthText" class="mt-1.5 text-xs text-muted-foreground">
         <slot name="strengthText"> </slot>
       </p>
     </template>
@@ -47,7 +47,7 @@ const show = ref(false);
         'top-3': !!passwordStrength,
         'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
       }"
-      class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
+      class="absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5 text-foreground/60 hover:text-foreground"
       @click="show = !show"
     >
       <Eye v-if="show" class="size-4" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
index dae90efa0..4b0be2019 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
@@ -51,7 +51,7 @@ function checkPasswordStrength(password: string) {
   <div class="relative mt-2 flex items-center justify-between">
     <template v-for="index in 5" :key="index">
       <div
-        class="dark:bg-input-background bg-heavy relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
+        class="relative mr-1 h-1.5 w-1/5 rounded-sm bg-heavy last:mr-0 dark:bg-input-background"
       >
         <span
           :style="{
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index 8ad1e81cd..0bca09193 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -82,7 +82,7 @@ const logoSrc = computed(() => {
       />
       <template v-if="!collapsed">
         <slot name="text">
-          <span class="text-foreground truncate text-nowrap font-semibold">
+          <span class="truncate text-nowrap font-semibold text-foreground">
             {{ text }}
           </span>
         </slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index e101ba59a..792ad21e5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -100,7 +100,7 @@ function handleScroll(event: Event) {
       v-if="showShadowTop"
       :class="{
         'opacity-100': !isAtTop,
-        'border-border border-t': shadowBorder && !isAtTop,
+        'border-t border-border': shadowBorder && !isAtTop,
       }"
       class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
     ></div>
@@ -109,7 +109,7 @@ function handleScroll(event: Event) {
       v-if="showShadowBottom"
       :class="{
         'opacity-100': !isAtTop && !isAtBottom,
-        'border-border border-b': shadowBorder && !isAtTop && !isAtBottom,
+        'border-b border-border': shadowBorder && !isAtTop && !isAtBottom,
       }"
       class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
     ></div>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index 79e3f0be8..a5154745b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -45,14 +45,14 @@ function activeClass(tab: string): string[] {
   <Tabs v-model="activeTab" :default-value="getDefaultValue">
     <TabsList
       :style="tabsStyle"
-      class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
+      class="relative grid w-full bg-accent !outline !outline-2 !outline-heavy"
     >
       <TabsIndicator :style="tabsIndicatorStyle" />
       <template v-for="tab in tabs" :key="tab.value">
         <TabsTrigger
           :value="tab.value"
           :class="activeClass(tab.value)"
-          class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
+          class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium hover:text-primary disabled:pointer-events-none disabled:opacity-50"
         >
           {{ tab.label }}
         </TabsTrigger>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 22d2aa7bd..80e4c9ddb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <div
-      class="bg-background text-foreground inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      class="inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-3 py-1 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
     >
       <slot></slot>
     </div>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
index 0e1aa810a..268da9322 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -69,7 +69,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'z-100 dark:bg-overlay bg-overlay-content absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
+        'absolute left-0 top-0 z-100 flex size-full flex-col items-center justify-center bg-overlay-content transition-all duration-500 dark:bg-overlay',
         {
           'invisible opacity-0': !showSpinner,
         },
@@ -83,12 +83,12 @@ function onTransitionEnd() {
         <i
           v-for="index in 4"
           :key="index"
-          class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
+          class="absolute block size-4 origin-[50%_50%] scale-75 rounded-full bg-primary opacity-30"
         ></i>
       </span>
     </slot>
 
-    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
+    <div v-if="text" class="mt-4 text-xs text-primary">{{ text }}</div>
     <slot></slot>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index cde390145..7e5ce3bcb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -63,7 +63,7 @@ function onTransitionEnd() {
   <div
     :class="
       cn(
-        'flex-center z-100 bg-overlay-content absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500',
+        'flex-center absolute left-0 top-0 z-100 size-full bg-overlay-content backdrop-blur-sm transition-all duration-500',
         {
           'invisible opacity-0': !showSpinner,
         },
@@ -75,7 +75,7 @@ function onTransitionEnd() {
     <div
       :class="{ paused: !renderSpinner }"
       v-if="renderSpinner"
-      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
+      class="loader relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:bg-primary/50 before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:bg-primary after:content-['']"
     ></div>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
index 47017472b..d410a6e0a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
@@ -19,7 +19,7 @@ defineProps<{ triggerClass?: string }>();
         <CircleHelp
           :class="
             cn(
-              'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+              'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
               triggerClass,
             )
           "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index 61dc16278..455af0661 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
         :class="contentClass"
         :side="side"
         :style="contentStyle"
-        class="side-content text-popover-foreground bg-accent rounded-md"
+        class="side-content rounded-md bg-accent text-popover-foreground"
       >
         <slot></slot>
       </TooltipContent>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
index cb635c88b..537b75f1b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
 <template>
   <AccordionContent
     v-bind="delegatedProps"
-    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
   >
     <div :class="cn('pb-4 pt-0', props.class)">
       <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
index c0c6bda56..4752bac79 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -31,7 +31,7 @@ const delegatedProps = computed(() => {
       <slot></slot>
       <slot name="icon">
         <ChevronDown
-          class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
+          class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
         />
       </slot>
     </AccordionTrigger>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index f3184be6e..42fb028b7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -81,9 +81,9 @@ defineExpose({
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           {
-            'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
               !centered,
-            'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
+            'data-[state=closed]:slide-out-to-top-[148%] data-[state=open]:slide-in-from-top-[98%]':
               centered,
             'top-[10vh]': !centered,
             'top-1/2 -translate-y-1/2': centered,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
index 0b64f0c95..1aed44387 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <AlertDialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot></slot>
   </AlertDialogDescription>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
index 5673319db..6abf86c12 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@@ -4,5 +4,5 @@ import { useScrollLock } from '@vben-core/composables';
 useScrollLock();
 </script>
 <template>
-  <div class="bg-overlay z-popup inset-0"></div>
+  <div class="z-popup inset-0 bg-overlay"></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
index 0ceb3eb35..dff320419 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
   <li
     :class="
-      cn('hover:text-foreground inline-flex items-center gap-1.5', props.class)
+      cn('inline-flex items-center gap-1.5 hover:text-foreground', props.class)
     "
   >
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
index 28942f888..30e68a8c7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors', props.class)"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
   >
     <slot></slot>
   </Primitive>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
index 94600a9b8..06a6eddd5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   <ol
     :class="
       cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
index 948aa471d..0d7641755 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 
 <template>
   <span
-    :class="cn('text-foreground font-normal', props.class)"
+    :class="cn('font-normal text-foreground', props.class)"
     aria-current="page"
     aria-disabled="true"
     role="link"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
index 8f396a6af..a5b6c6197 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'bg-card text-card-foreground border-border rounded-xl border',
+        'rounded-xl border border-border bg-card text-card-foreground',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
index 7797c367d..421935687 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-muted-foreground text-sm', props.class)">
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
     <slot></slot>
   </p>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
index 39577e2c5..212d3bd22 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -27,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 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',
+        'peer h-4 w-4 shrink-0 rounded-sm border border-border transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
index 0af6fa1bb..7a341430f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
index 76701d82a..890ed84f9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="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 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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,
         )
       "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
index 0fbf5715c..051e5d7a7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         props.class,
       )
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
index 3157da445..57100c7d8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'text-foreground px-2 py-1.5 text-sm font-semibold',
+        'px-2 py-1.5 text-sm font-semibold text-foreground',
         inset && 'pl-8',
         props.class,
       )
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
index f23462dff..d1526380b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
index 4c92e9267..14a94c3f8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
 <template>
   <ContextMenuSeparator
     v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
   />
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
index 21d0f9b2c..2c37a82bf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
   <span
     :class="
-      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
     "
   >
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
index 0b02b5e4e..04ccc26bb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="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 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-32 overflow-hidden rounded-md 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,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
index b7ced22b9..6a6cb4f94 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
         props.class,
       )
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index eede68e6c..69c8fa5e6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -102,7 +102,7 @@ defineExpose({
       v-bind="forwarded"
       :class="
         cn(
-          'z-popup bg-background 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 w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup w-full bg-background p-6 shadow-lg outline-none 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 sm:rounded-xl',
           {
             'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
               animationType === 'slide',
@@ -118,7 +118,7 @@ defineExpose({
         :disabled="closeDisabled"
         :class="
           cn(
-            'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
+            'flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
             props.closeClass,
           )
         "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
index 18fed13db..b7f381982 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <DialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot></slot>
   </DialogDescription>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
index f0b2cff02..6d6e80425 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay z-popup inset-0"></div>
+  <div :data-dismissable-modal="id" class="z-popup inset-0 bg-overlay"></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
index 141326e82..4c59fcb9f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@@ -33,12 +33,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <DialogPortal>
     <DialogOverlay
       :style="{ zIndex }"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border absolute inset-0 grid place-items-center overflow-y-auto border bg-black/80"
+      class="absolute inset-0 grid place-items-center overflow-y-auto border border-border bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="
           cn(
-            'border-border bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
             props.class,
           )
         "
@@ -60,7 +60,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <slot></slot>
 
         <DialogClose
-          class="hover:bg-secondary absolute right-4 top-4 rounded-md p-0.5 transition-colors"
+          class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
         >
           <X class="h-4 w-4" />
           <span class="sr-only">Close</span>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 49c074d35..5ee661c2c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
index 295b91a2b..625a8cdc4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="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 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md 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,
         )
       "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
index 6d2f94d80..101746740 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         props.class,
       )
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c949c0af9..938d43bdb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
index 8035b8f04..745e5c3a4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -23,6 +23,6 @@ const delegatedProps = computed(() => {
 <template>
   <DropdownMenuSeparator
     v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
   />
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
index 8dff02559..9f3621b74 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="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 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-32 overflow-hidden rounded-md 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,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 4cd7445d6..86e3acb66 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
index 871ba301f..0f8a57628 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
@@ -13,7 +13,7 @@ const { formDescriptionId } = useFormField();
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
   >
     <slot></slot>
   </p>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index fb8a8b915..e2ccb1ea3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -13,6 +13,6 @@ const { formMessageId, name } = useFormField();
     :id="formMessageId"
     :name="toValue(name)"
     as="p"
-    class="text-destructive text-[0.8rem]"
+    class="text-[0.8rem] text-destructive"
   />
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
index 6d37fe431..1b827bb13 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       v-bind="forwardedProps"
       :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 border-border z-popup w-64 rounded-md border p-4 shadow-md outline-none',
+          'z-popup w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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,
         )
       "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
index 1696ae581..c968a610a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
index 5f10e74e8..803b09740 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
@@ -8,7 +8,7 @@ import { NumberFieldInput } from 'reka-ui';
   <NumberFieldInput
     :class="
       cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent py-1 text-center text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-center text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
       )
     "
     data-slot="input"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
index b70ec193b..ddeee1299 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input bg-background relative flex h-10 w-8 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
+        'relative flex h-10 w-8 items-center justify-center border-y border-r border-input bg-background text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
index b4e3f71b6..98211a32a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       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 border-border w-72 rounded-md border p-4 shadow-md outline-none',
+          'w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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,
         )
       "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
index 4e57ebbba..86256cc27 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
index 141b0ab55..4b467f80c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@@ -34,14 +34,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
+        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
         props.class,
       )
     "
   >
     <template v-if="props.withHandle">
       <div
-        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border"
+        class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
       >
         <GripVertical class="h-2.5 w-2.5" />
       </div>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
index 1f83119bf..a93dce13e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@@ -35,6 +35,6 @@ const delegatedProps = computed(() => {
       )
     "
   >
-    <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
index 1c2b3abce..4655e91c9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       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 border-border z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md 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',
           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,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
index 2b3aba1d2..a8f66a156 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
index cfabfab7d..e6154ce18 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
 <template>
   <SelectSeparator
     v-bind="delegatedProps"
-    :class="cn('bg-muted -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
   />
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
index da2d645e7..b74b2d6ab 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        'flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
index 3bf5879fb..782caa55a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-border relative shrink-0',
+        'relative shrink-0 bg-border',
         props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
         props.class,
       )
@@ -31,7 +31,7 @@ const delegatedProps = computed(() => {
       v-if="props.label"
       :class="
         cn(
-          'text-muted-foreground bg-background absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
+          'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
           props.orientation === 'vertical'
             ? 'w-[1px] px-1 py-2'
             : 'h-[1px] px-2 py-1',
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
index d0ffe20bb..9472aec0d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <DialogDescription
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
     v-bind="delegatedProps"
   >
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
index d64d202b1..bffa2ac76 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
-  <div :data-dismissable-drawer="id" class="bg-overlay z-popup inset-0"></div>
+  <div :data-dismissable-drawer="id" class="z-popup inset-0 bg-overlay"></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
index 74e98db81..2f629c682 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <DialogTitle
-    :class="cn('text-foreground font-medium', props.class)"
+    :class="cn('font-medium text-foreground', props.class)"
     v-bind="delegatedProps"
   >
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
index 545dd8c98..6de86c486 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
         props.class,
       )
     "
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <SwitchThumb
       :class="
         cn(
-          'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
         )
       "
     />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
index 16d9f42b7..470fb5c35 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
   <TabsContent
     :class="
       cn(
-        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
index 782cf1447..cdabc2c59 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md p-1',
+        'inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
index 6b3ccd659..4f17672ee 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
index 242516791..410dd4eb1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
index 7d1d7de6a..0a6be32e0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-popup bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 border-border shadow-float overflow-hidden rounded-sm border px-4 py-2 text-xs',
+          'z-popup overflow-hidden rounded-sm border border-border bg-accent px-4 py-2 text-xs text-accent-foreground shadow-float animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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,
         )
       "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
index bf54888ac..ee228f044 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -302,7 +302,7 @@ defineExpose({
       >
         <ChevronRight
           :class="{ 'rotate-90': expanded?.length > 0 }"
-          class="text-foreground/80 hover:text-foreground size-4 cursor-pointer transition"
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
         />
         <Checkbox
           v-if="multiple"
@@ -329,7 +329,7 @@ defineExpose({
         :class="
           cn('cursor-pointer', getNodeClass?.(item), {
             'data-[selected]:bg-accent': !multiple,
-            'text-foreground/50 cursor-not-allowed': isNodeDisabled(item),
+            'cursor-not-allowed text-foreground/50': isNodeDisabled(item),
           })
         "
         v-bind="
@@ -367,7 +367,7 @@ defineExpose({
             Array.isArray(item.value[childrenField]) &&
             item.value[childrenField].length > 0
           "
-          class="text-foreground/80 hover:text-foreground size-4 cursor-pointer transition"
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
           :class="{ 'rotate-90': isExpanded }"
           @click.stop="
             () => {
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index 7033f263b..faa1b94f7 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -107,24 +107,24 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
             <!-- divider -->
             <div
               v-if="i !== 0 && tab.key !== active"
-              class="tabs-chrome__divider bg-border absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
+              class="tabs-chrome__divider absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] bg-border transition-all"
             ></div>
             <!-- background -->
             <div
               class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
             >
               <div
-                class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
+                class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
               ></div>
               <svg
-                class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
+                class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
                 height="7"
                 width="7"
               >
                 <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
               </svg>
               <svg
-                class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
+                class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
                 height="7"
                 width="7"
               >
@@ -139,19 +139,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               <!-- close-icon -->
               <X
                 v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
+                class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-accent-foreground"
                 @click.stop="() => emit('close', tab.key)"
               />
               <Pin
                 v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[1px] size-3.5 cursor-pointer rounded-full transition-all"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all hover:text-accent-foreground group-[.is-active]:text-accent-foreground"
                 @click.stop="() => emit('unpin', tab)"
               />
             </div>
 
             <!-- tab-item-main -->
             <div
-              class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
+              class="tabs-chrome__item-main z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
             >
               <VbenIcon
                 v-if="showIcon"
@@ -190,7 +190,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
         @apply pb-[2px];
 
         &-content {
-          @apply bg-accent mx-[2px] rounded-md;
+          @apply mx-[2px] rounded-md bg-accent;
         }
       }
     }
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index 4333fc4b1..effa93cf1 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -89,14 +89,14 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
         :key="tab.key"
         :class="[
           {
-            'is-active dark:bg-accent bg-primary/15': tab.key === active,
+            'is-active bg-primary/15 dark:bg-accent': tab.key === active,
             draggable: !tab.affixTab,
             'affix-tab': tab.affixTab,
           },
           typeWithClass.content,
         ]"
         :data-index="i"
-        class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
+        class="tab-item translate-all group relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
         data-tab-item="true"
         @click="active = tab.key"
         @mousedown="onMouseDown($event, tab)"
@@ -115,19 +115,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
               <!-- close-icon -->
               <X
                 v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
+                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
                 @click.stop="() => emit('close', tab.key)"
               />
               <Pin
                 v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[1px] size-3.5 cursor-pointer rounded-full transition-all"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
                 @click.stop="() => emit('unpin', tab)"
               />
             </div>
 
             <!-- tab-item-main -->
             <div
-              class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
+              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
             >
               <VbenIcon
                 v-if="showIcon"
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
index 0cbfc73ae..24f43a9ee 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
 <template>
   <VbenDropdownMenu :menus="menus" :modal="false">
     <div
-      class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
+      class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
     >
       <ChevronDown class="size-4" />
     </div>
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
index 018371901..acbf14e6d 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
@@ -10,7 +10,7 @@ function toggleScreen() {
 
 <template>
   <div
-    class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
+    class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
     @click="toggleScreen"
   >
     <Minimize2 v-if="screen" class="size-4" />
diff --git a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
index daf9f77d0..754941906 100644
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -53,7 +53,7 @@ useTabsDrag(props, emit);
     <span
       v-show="showScrollButton"
       :class="{
-        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtLeft,
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtLeft,
         'pointer-events-none opacity-30': scrollIsAtLeft,
       }"
       class="border-r px-2"
@@ -94,10 +94,10 @@ useTabsDrag(props, emit);
     <span
       v-show="showScrollButton"
       :class="{
-        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtRight,
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtRight,
         'pointer-events-none opacity-30': scrollIsAtRight,
       }"
-      class="hover:bg-muted text-muted-foreground cursor-pointer border-l px-2"
+      class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
       @click="scrollDirection('right')"
     >
       <ChevronRight class="size-4 h-full" />
diff --git a/playground/src/views/demos/access/button-control.vue b/playground/src/views/demos/access/button-control.vue
index 0966a7be6..878cf025c 100644
--- a/playground/src/views/demos/access/button-control.vue
+++ b/playground/src/views/demos/access/button-control.vue
@@ -58,7 +58,7 @@ async function changeAccount(role: string) {
     <Card class="mb-5">
       <template #title>
         <span class="font-semibold">当前角色:</span>
-        <span class="text-primary mx-4 text-lg">
+        <span class="mx-4 text-lg text-primary">
           {{ userStore.userRoles?.[0] }}
         </span>
       </template>
diff --git a/playground/src/views/demos/access/index.vue b/playground/src/views/demos/access/index.vue
index abd55254d..a28f1e2b5 100644
--- a/playground/src/views/demos/access/index.vue
+++ b/playground/src/views/demos/access/index.vue
@@ -71,7 +71,7 @@ async function handleToggleAccessMode() {
   >
     <Card class="mb-5" title="权限模式">
       <span class="font-semibold">当前权限模式:</span>
-      <span class="text-primary mx-4">{{
+      <span class="mx-4 text-primary">{{
         accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
       }}</span>
       <Button type="primary" @click="handleToggleAccessMode">
diff --git a/playground/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue
index 994c99552..d41df399d 100644
--- a/playground/src/views/demos/features/icons/index.vue
+++ b/playground/src/views/demos/features/icons/index.vue
@@ -31,7 +31,7 @@ const inputComponent = h(Input);
 <template>
   <Page title="图标">
     <template #description>
-      <div class="text-foreground/80 mt-2">
+      <div class="mt-2 text-foreground/80">
         图标可在
         <a
           class="text-primary"
diff --git a/playground/src/views/demos/features/login-expired/index.vue b/playground/src/views/demos/features/login-expired/index.vue
index 532839af8..5b03d854e 100644
--- a/playground/src/views/demos/features/login-expired/index.vue
+++ b/playground/src/views/demos/features/login-expired/index.vue
@@ -20,7 +20,7 @@ async function handleClick(type: LoginExpiredModeType) {
 <template>
   <Page title="登录过期演示">
     <template #description>
-      <div class="text-foreground/80 mt-2">
+      <div class="mt-2 text-foreground/80">
         接口请求遇到401状态码时，需要重新登录。有两种方式：
         <p>1.转到登录页，登录成功后跳转回原页面</p>
         <p>
diff --git a/playground/src/views/demos/features/tabs/index.vue b/playground/src/views/demos/features/tabs/index.vue
index 5e7bfa2eb..f1af13de9 100644
--- a/playground/src/views/demos/features/tabs/index.vue
+++ b/playground/src/views/demos/features/tabs/index.vue
@@ -41,7 +41,7 @@ function reset() {
 <template>
   <Page description="用于需要操作标签页的场景" title="标签页">
     <Card class="mb-5" title="打开/关闭标签页">
-      <div class="text-foreground/80 mb-3">
+      <div class="mb-3 text-foreground/80">
         如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
       </div>
       <div class="flex flex-wrap gap-3">
@@ -53,7 +53,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="标签页操作">
-      <div class="text-foreground/80 mb-3">用于动态控制标签页的各种操作</div>
+      <div class="mb-3 text-foreground/80">用于动态控制标签页的各种操作</div>
       <div class="flex flex-wrap gap-3">
         <Button type="primary" @click="closeCurrentTab()">
           关闭当前标签页
@@ -73,7 +73,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="动态标题">
-      <div class="text-foreground/80 mb-3">
+      <div class="mb-3 text-foreground/80">
         该操作不会影响页面标题，仅修改Tab标题
       </div>
       <div class="flex flex-wrap items-center gap-3">
@@ -90,7 +90,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="最大打开数量">
-      <div class="text-foreground/80 mb-3">
+      <div class="mb-3 text-foreground/80">
         限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
       </div>
       <div class="flex flex-wrap items-center gap-3">
diff --git a/playground/src/views/demos/features/watermark/index.vue b/playground/src/views/demos/features/watermark/index.vue
index 27875fcc2..3041e9063 100644
--- a/playground/src/views/demos/features/watermark/index.vue
+++ b/playground/src/views/demos/features/watermark/index.vue
@@ -48,7 +48,7 @@ async function createWaterMark() {
 <template>
   <Page title="水印">
     <template #description>
-      <div class="text-foreground/80 mt-2">
+      <div class="mt-2 text-foreground/80">
         水印使用了
         <a
           class="text-primary"
diff --git a/playground/src/views/examples/drawer/auto-height-demo.vue b/playground/src/views/examples/drawer/auto-height-demo.vue
index 0c327340c..030d7ab6a 100644
--- a/playground/src/views/examples/drawer/auto-height-demo.vue
+++ b/playground/src/views/examples/drawer/auto-height-demo.vue
@@ -35,7 +35,7 @@ function handleUpdate(len: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>
diff --git a/playground/src/views/examples/layout/col-page.vue b/playground/src/views/examples/layout/col-page.vue
index 45d8651a7..bd787fea5 100644
--- a/playground/src/views/examples/layout/col-page.vue
+++ b/playground/src/views/examples/layout/col-page.vue
@@ -56,7 +56,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
       <div
         v-else
         :style="{ minWidth: '200px' }"
-        class="border-border bg-card mr-2 rounded-[var(--radius)] border p-2"
+        class="mr-2 rounded-[var(--radius)] border border-border bg-card p-2"
       >
         <p>这里是左侧内容</p>
         <p>这里是左侧内容</p>
diff --git a/playground/src/views/examples/loading/index.vue b/playground/src/views/examples/loading/index.vue
index c31f78440..f9243807f 100644
--- a/playground/src/views/examples/loading/index.vue
+++ b/playground/src/views/examples/loading/index.vue
@@ -51,7 +51,7 @@ const loadingV = refAutoReset(false, 3000);
             <template #icon>
               <IconifyIcon
                 icon="svg-spinners:ring-resize"
-                class="text-primary size-10"
+                class="size-10 text-primary"
               />
             </template>
           </Loading>
@@ -65,7 +65,7 @@ const loadingV = refAutoReset(false, 3000);
             <template #icon>
               <IconifyIcon
                 icon="svg-spinners:bars-scale"
-                class="text-primary size-10"
+                class="size-10 text-primary"
               />
             </template>
           </Loading>
diff --git a/playground/src/views/examples/modal/auto-height-demo.vue b/playground/src/views/examples/modal/auto-height-demo.vue
index 5e8f7ad03..43bbacf9b 100644
--- a/playground/src/views/examples/modal/auto-height-demo.vue
+++ b/playground/src/views/examples/modal/auto-height-demo.vue
@@ -38,7 +38,7 @@ function handleUpdate(len?: number) {
     <div
       v-for="item in list"
       :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
     >
       {{ item }}
     </div>
diff --git a/playground/src/views/examples/tippy/index.vue b/playground/src/views/examples/tippy/index.vue
index 628fa3804..f4449c3b1 100644
--- a/playground/src/views/examples/tippy/index.vue
+++ b/playground/src/views/examples/tippy/index.vue
@@ -291,7 +291,7 @@ function goDoc() {
       <Form class="mt-4" />
       <template #actions>
         <p
-          class="text-secondary-foreground hover:text-secondary-foreground cursor-default"
+          class="cursor-default text-secondary-foreground hover:text-secondary-foreground"
         >
           更多配置请
           <Button type="link" size="small" @click="goDoc">查看文档</Button>

From c142af482bc35a5ebbbfb72dc0e0fe5d7e723406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 19 Nov 2025 10:19:16 +0800
Subject: [PATCH 04/13] fix: update snapshot for defaultPreferences
 immutability test to reflect fontSize change

- Adjusted the snapshot to ensure consistency with the updated defaultPreferences configuration, specifically retaining the fontSize property.
---
 .../preferences/__tests__/__snapshots__/config.test.ts.snap     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index 40f66c502..a3c0c3175 100644
--- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -113,9 +113,9 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "colorPrimary": "hsl(212 100% 45%)",
     "colorSuccess": "hsl(144 57% 58%)",
     "colorWarning": "hsl(42 84% 61%)",
+    "fontSize": 16,
     "mode": "dark",
     "radius": "0.5",
-    "fontSize": 16,
     "semiDarkHeader": false,
     "semiDarkSidebar": false,
   },

From aaf0274fe929c34752a46ef250310620343c3312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 19 Nov 2025 10:51:10 +0800
Subject: [PATCH 05/13] feat: add menu font size variable and update related
 components

- Introduced a new CSS variable `--menu-font-size` calculated from the base font size.
- Updated `PreferenceManager` to trigger CSS variable updates when `fontSize` is modified.
- Adjusted `updateCSSVariables` to set the new `--menu-font-size` based on the theme's font size.
- Ensured that the menu components utilize the updated font size with `!important` to maintain styling consistency.
---
 .../@core/base/design/src/design-tokens/default.css   |  1 +
 packages/@core/preferences/src/preferences.ts         |  5 ++++-
 .../@core/preferences/src/update-css-variables.ts     |  7 ++++++-
 packages/@core/ui-kit/menu-ui/src/components/menu.vue | 11 ++++++++---
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/@core/base/design/src/design-tokens/default.css b/packages/@core/base/design/src/design-tokens/default.css
index 64679f854..4ce7ff954 100644
--- a/packages/@core/base/design/src/design-tokens/default.css
+++ b/packages/@core/base/design/src/design-tokens/default.css
@@ -93,6 +93,7 @@
 
   /* 基本文字大小 */
   --font-size-base: 16px;
+  --menu-font-size: calc(var(--font-size-base) * 0.875);
 
   /* =============component & UI============= */
 
diff --git a/packages/@core/preferences/src/preferences.ts b/packages/@core/preferences/src/preferences.ts
index 23c5f8bef..f43bf39e9 100644
--- a/packages/@core/preferences/src/preferences.ts
+++ b/packages/@core/preferences/src/preferences.ts
@@ -141,7 +141,10 @@ class PreferenceManager {
   private handleUpdates(updates: DeepPartial<Preferences>) {
     const themeUpdates = updates.theme || {};
     const appUpdates = updates.app || {};
-    if (themeUpdates && Object.keys(themeUpdates).length > 0) {
+    if (
+      (themeUpdates && Object.keys(themeUpdates).length > 0) ||
+      Reflect.has(themeUpdates, 'fontSize')
+    ) {
       updateCSSVariables(this.state);
     }
 
diff --git a/packages/@core/preferences/src/update-css-variables.ts b/packages/@core/preferences/src/update-css-variables.ts
index b00be7825..6ee5f748c 100644
--- a/packages/@core/preferences/src/update-css-variables.ts
+++ b/packages/@core/preferences/src/update-css-variables.ts
@@ -69,9 +69,14 @@ function updateCSSVariables(preferences: Preferences) {
 
   // 更新字体大小
   if (Reflect.has(theme, 'fontSize')) {
+    const fontSize = theme.fontSize;
     document.documentElement.style.setProperty(
       '--font-size-base',
-      `${theme.fontSize}px`,
+      `${fontSize}px`,
+    );
+    document.documentElement.style.setProperty(
+      '--menu-font-size',
+      `calc(${fontSize}px * 0.875)`,
     );
   }
 }
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index 624be2910..237aff00a 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -388,7 +388,7 @@ $namespace: vben;
   padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
   margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
     var(--menu-item-margin-x);
-  font-size: var(--menu-font-size);
+  font-size: var(--menu-font-size) !important;
   color: var(--menu-item-color);
   white-space: nowrap;
   text-decoration: none;
@@ -433,6 +433,7 @@ $namespace: vben;
   max-width: var(--menu-title-width);
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: var(--menu-font-size) !important;
   white-space: nowrap;
   opacity: 1;
 }
@@ -458,7 +459,6 @@ $namespace: vben;
   --menu-item-collapse-margin-x: 0px;
   --menu-item-radius: 0px;
   --menu-item-indent: 16px;
-  --menu-font-size: calc(var(--font-size-base, 16px) * 0.875);
 
   &.is-dark {
     --menu-background-color: hsl(var(--menu));
@@ -785,7 +785,7 @@ $namespace: vben;
     width: 100%;
     height: 100%;
     padding: 0 var(--menu-item-padding-x);
-    font-size: var(--menu-font-size);
+    font-size: var(--menu-font-size) !important;
     line-height: var(--menu-item-height);
   }
 }
@@ -812,9 +812,14 @@ $namespace: vben;
 
 .#{$namespace}-sub-menu-content {
   height: var(--menu-item-height);
+  font-size: var(--menu-font-size) !important;
 
   @include menu-item;
 
+  * {
+    font-size: inherit !important;
+  }
+
   &__icon-arrow {
     position: absolute;
     top: 50%;

From f7d9d1b1affae2a7ee9bd2cf4ecb7129af654ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E5=B1=B1?= <17726957223@189.cn>
Date: Wed, 19 Nov 2025 11:13:06 +0800
Subject: [PATCH 06/13] chore: update package.json and app.vue imports, and
 ensure global styles are included

---
 apps/web-tdesign/src/app.vue      | 2 +-
 apps/web-tdesign/src/bootstrap.ts | 4 +++-
 package.json                      | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web-tdesign/src/app.vue b/apps/web-tdesign/src/app.vue
index 1626c9d39..f37688b67 100644
--- a/apps/web-tdesign/src/app.vue
+++ b/apps/web-tdesign/src/app.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { GlobalConfigProvider } from 'tdesign-vue-next';
-import { ConfigProvider } from 'tdesign-vue-next';
 
 import { onMounted } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
 import { merge } from 'es-toolkit/compat';
+import { ConfigProvider } from 'tdesign-vue-next';
 import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
 
 defineOptions({ name: 'App' });
diff --git a/apps/web-tdesign/src/bootstrap.ts b/apps/web-tdesign/src/bootstrap.ts
index 4ed74cc57..5d07717c6 100644
--- a/apps/web-tdesign/src/bootstrap.ts
+++ b/apps/web-tdesign/src/bootstrap.ts
@@ -7,7 +7,7 @@ import { initStores } from '@vben/stores';
 import '@vben/styles';
 // import '@vben/styles/antd';
 // 引入组件库的少量全局样式变量
-import 'tdesign-vue-next/es/style/index.css';
+
 import { useTitle } from '@vueuse/core';
 
 import { $t, setupI18n } from '#/locales';
@@ -17,6 +17,8 @@ import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
+import 'tdesign-vue-next/es/style/index.css';
+
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
diff --git a/package.json b/package.json
index 9c67f10cc..8fc731279 100644
--- a/package.json
+++ b/package.json
@@ -112,9 +112,9 @@
       "@ctrl/tinycolor": "catalog:",
       "clsx": "catalog:",
       "esbuild": "0.25.3",
+      "jiti": "^2.6.1",
       "pinia": "catalog:",
-      "vue": "catalog:",
-      "jiti": "^2.6.1"
+      "vue": "catalog:"
     },
     "neverBuiltDependencies": [
       "canvas",

From 1d77b018bb038a34c3bf92b5e3ffbf5be969dac0 Mon Sep 17 00:00:00 2001
From: "yuan.ji" <961999367@qq.com>
Date: Fri, 21 Nov 2025 17:33:59 +0800
Subject: [PATCH 07/13] =?UTF-8?q?feat(function):=20add=20antd=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?Image=E7=BB=84=E4=BB=B6=E6=9F=A5=E7=9C=8B=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/adapter/component/index.ts | 236 ++++++++++++++++++-
 playground/src/adapter/component/index.ts    | 236 ++++++++++++++++++-
 2 files changed, 466 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index 786a93dae..8455ef3aa 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -3,15 +3,31 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component } from 'vue';
+import type {
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+
+import type { Component, Ref } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  ref,
+  render,
+  unref,
+  watch,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { isEmpty } from '@vben/utils';
 
 import { notification } from 'ant-design-vue';
 
@@ -60,6 +76,10 @@ const TreeSelect = defineAsyncComponent(
   () => import('ant-design-vue/es/tree-select'),
 );
 const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
+const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
+const PreviewGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
+);
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
@@ -95,6 +115,216 @@ const withDefaultPlaceholder = <T extends Component>(
   });
 };
 
+const withPreviewUpload = () => {
+  return defineComponent({
+    name: Upload.name,
+    emits: ['change', 'update:modelValue'],
+    setup: (
+      props: any,
+      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
+    ) => {
+      const previewVisible = ref<boolean>(false);
+
+      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
+
+      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
+
+      const fileList = ref<UploadProps['fileList']>(
+        attrs?.fileList || attrs?.['file-list'] || [],
+      );
+
+      const handleChange = async (event: UploadChangeParam) => {
+        fileList.value = event.fileList;
+        emit('change', event);
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = (): any => {
+        const isDisabled = attrs.disabled;
+
+        // 如果禁用，不渲染上传按钮
+        if (isDisabled) {
+          return null;
+        }
+
+        // 否则渲染默认上传按钮
+        return isEmpty(slots)
+          ? createDefaultSlotsWithUpload(listType, placeholder)
+          : slots;
+      };
+
+      // 可以监听到表单API设置的值
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      return () =>
+        h(
+          Upload,
+          {
+            ...props,
+            ...attrs,
+            fileList: fileList.value,
+            onChange: handleChange,
+            onPreview: handlePreview,
+          },
+          renderUploadButton(),
+        );
+    },
+  });
+};
+
+const createDefaultSlotsWithUpload = (
+  listType: string,
+  placeholder: string,
+) => {
+  switch (listType) {
+    case 'picture-card': {
+      return {
+        default: () => placeholder,
+      };
+    }
+    default: {
+      return {
+        default: () =>
+          h(
+            Button,
+            {
+              icon: h(IconifyIcon, {
+                icon: 'ant-design:upload-outlined',
+                class: 'mb-1 size-4',
+              }),
+            },
+            () => placeholder,
+          ),
+      };
+    }
+  }
+};
+
+const previewImage = async (
+  file: UploadFile,
+  visible: Ref<boolean>,
+  fileList: Ref<UploadProps['fileList']>,
+) => {
+  // 检查是否为图片文件的辅助函数
+  const isImageFile = (file: UploadFile): boolean => {
+    const imageExtensions = new Set([
+      'bmp',
+      'gif',
+      'jpeg',
+      'jpg',
+      'png',
+      'webp',
+    ]);
+    if (file.url) {
+      const ext = file.url?.split('.').pop()?.toLowerCase();
+      return ext ? imageExtensions.has(ext) : false;
+    }
+    if (!file.type) {
+      const ext = file.name?.split('.').pop()?.toLowerCase();
+      return ext ? imageExtensions.has(ext) : false;
+    }
+    return file.type.startsWith('image/');
+  };
+
+  // 如果当前文件不是图片，直接打开
+  if (!isImageFile(file)) {
+    if (file.url) {
+      window.open(file.url, '_blank');
+    } else if (file.preview) {
+      window.open(file.preview, '_blank');
+    } else {
+      console.warn('无法打开文件，没有可用的URL或预览地址');
+    }
+    return;
+  }
+
+  // 对于图片文件，继续使用预览组
+  const [ImageComponent, PreviewGroupComponent] = await Promise.all([
+    Image,
+    PreviewGroup,
+  ]);
+
+  const getBase64 = (file: File) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.addEventListener('load', () => resolve(reader.result));
+      reader.addEventListener('error', (error) => reject(error));
+    });
+  };
+  // 从fileList中过滤出所有图片文件
+  const imageFiles = (unref(fileList) || []).filter((element) =>
+    isImageFile(element),
+  );
+
+  // 为所有没有预览地址的图片生成预览
+  for (const imgFile of imageFiles) {
+    if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
+      imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
+    }
+  }
+  const container: HTMLElement | null = document.createElement('div');
+  document.body.append(container);
+
+  // 用于追踪组件是否已卸载
+  let isUnmounted = false;
+
+  const PreviewWrapper = {
+    setup() {
+      return () => {
+        if (isUnmounted) return null;
+        return h(
+          PreviewGroupComponent,
+          {
+            class: 'hidden',
+            preview: {
+              visible: visible.value,
+              // 设置初始显示的图片索引
+              current: imageFiles.findIndex((f) => f.uid === file.uid),
+              onVisibleChange: (value: boolean) => {
+                visible.value = value;
+                if (!value) {
+                  // 延迟清理，确保动画完成
+                  setTimeout(() => {
+                    if (!isUnmounted && container) {
+                      isUnmounted = true;
+                      render(null, container);
+                      container.remove();
+                    }
+                  }, 300);
+                }
+              },
+            },
+          },
+          () =>
+            // 渲染所有图片文件
+            imageFiles.map((imgFile) =>
+              h(ImageComponent, {
+                key: imgFile.uid,
+                src: imgFile.url || imgFile.preview,
+              }),
+            ),
+        );
+      };
+    },
+  };
+
+  render(h(PreviewWrapper), container);
+};
+
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
   | 'ApiSelect'
@@ -189,7 +419,7 @@ async function initComponentAdapter() {
     Textarea: withDefaultPlaceholder(Textarea, 'input'),
     TimePicker,
     TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
-    Upload,
+    Upload: withPreviewUpload(),
   };
 
   // 将组件注册到全局共享状态中
diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts
index 094d4fc4b..2e50f6dae 100644
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -3,15 +3,31 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { Component } from 'vue';
+import type {
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+
+import type { Component, Ref } from 'vue';
 
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  ref,
+  render,
+  unref,
+  watch,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { isEmpty } from '@vben/utils';
 
 import { notification } from 'ant-design-vue';
 
@@ -60,6 +76,10 @@ const TreeSelect = defineAsyncComponent(
   () => import('ant-design-vue/es/tree-select'),
 );
 const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
+const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
+const PreviewGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
+);
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
@@ -104,6 +124,216 @@ const withDefaultPlaceholder = <T extends Component>(
   });
 };
 
+const withPreviewUpload = () => {
+  return defineComponent({
+    name: Upload.name,
+    emits: ['change', 'update:modelValue'],
+    setup: (
+      props: any,
+      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
+    ) => {
+      const previewVisible = ref<boolean>(false);
+
+      const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
+
+      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
+
+      const fileList = ref<UploadProps['fileList']>(
+        attrs?.fileList || attrs?.['file-list'] || [],
+      );
+
+      const handleChange = async (event: UploadChangeParam) => {
+        fileList.value = event.fileList;
+        emit('change', event);
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = (): any => {
+        const isDisabled = attrs.disabled;
+
+        // 如果禁用，不渲染上传按钮
+        if (isDisabled) {
+          return null;
+        }
+
+        // 否则渲染默认上传按钮
+        return isEmpty(slots)
+          ? createDefaultSlotsWithUpload(listType, placeholder)
+          : slots;
+      };
+
+      // 可以监听到表单API设置的值
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      return () =>
+        h(
+          Upload,
+          {
+            ...props,
+            ...attrs,
+            fileList: fileList.value,
+            onChange: handleChange,
+            onPreview: handlePreview,
+          },
+          renderUploadButton(),
+        );
+    },
+  });
+};
+
+const createDefaultSlotsWithUpload = (
+  listType: string,
+  placeholder: string,
+) => {
+  switch (listType) {
+    case 'picture-card': {
+      return {
+        default: () => placeholder,
+      };
+    }
+    default: {
+      return {
+        default: () =>
+          h(
+            Button,
+            {
+              icon: h(IconifyIcon, {
+                icon: 'ant-design:upload-outlined',
+                class: 'mb-1 size-4',
+              }),
+            },
+            () => placeholder,
+          ),
+      };
+    }
+  }
+};
+
+const previewImage = async (
+  file: UploadFile,
+  visible: Ref<boolean>,
+  fileList: Ref<UploadProps['fileList']>,
+) => {
+  // 检查是否为图片文件的辅助函数
+  const isImageFile = (file: UploadFile): boolean => {
+    const imageExtensions = new Set([
+      'bmp',
+      'gif',
+      'jpeg',
+      'jpg',
+      'png',
+      'webp',
+    ]);
+    if (file.url) {
+      const ext = file.url?.split('.').pop()?.toLowerCase();
+      return ext ? imageExtensions.has(ext) : false;
+    }
+    if (!file.type) {
+      const ext = file.name?.split('.').pop()?.toLowerCase();
+      return ext ? imageExtensions.has(ext) : false;
+    }
+    return file.type.startsWith('image/');
+  };
+
+  // 如果当前文件不是图片，直接打开
+  if (!isImageFile(file)) {
+    if (file.url) {
+      window.open(file.url, '_blank');
+    } else if (file.preview) {
+      window.open(file.preview, '_blank');
+    } else {
+      console.warn('无法打开文件，没有可用的URL或预览地址');
+    }
+    return;
+  }
+
+  // 对于图片文件，继续使用预览组
+  const [ImageComponent, PreviewGroupComponent] = await Promise.all([
+    Image,
+    PreviewGroup,
+  ]);
+
+  const getBase64 = (file: File) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.addEventListener('load', () => resolve(reader.result));
+      reader.addEventListener('error', (error) => reject(error));
+    });
+  };
+  // 从fileList中过滤出所有图片文件
+  const imageFiles = (unref(fileList) || []).filter((element) =>
+    isImageFile(element),
+  );
+
+  // 为所有没有预览地址的图片生成预览
+  for (const imgFile of imageFiles) {
+    if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
+      imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
+    }
+  }
+  const container: HTMLElement | null = document.createElement('div');
+  document.body.append(container);
+
+  // 用于追踪组件是否已卸载
+  let isUnmounted = false;
+
+  const PreviewWrapper = {
+    setup() {
+      return () => {
+        if (isUnmounted) return null;
+        return h(
+          PreviewGroupComponent,
+          {
+            class: 'hidden',
+            preview: {
+              visible: visible.value,
+              // 设置初始显示的图片索引
+              current: imageFiles.findIndex((f) => f.uid === file.uid),
+              onVisibleChange: (value: boolean) => {
+                visible.value = value;
+                if (!value) {
+                  // 延迟清理，确保动画完成
+                  setTimeout(() => {
+                    if (!isUnmounted && container) {
+                      isUnmounted = true;
+                      render(null, container);
+                      container.remove();
+                    }
+                  }, 300);
+                }
+              },
+            },
+          },
+          () =>
+            // 渲染所有图片文件
+            imageFiles.map((imgFile) =>
+              h(ImageComponent, {
+                key: imgFile.uid,
+                src: imgFile.url || imgFile.preview,
+              }),
+            ),
+        );
+      };
+    },
+  };
+
+  render(h(PreviewWrapper), container);
+};
+
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
   | 'ApiSelect'
@@ -185,7 +415,7 @@ async function initComponentAdapter() {
     Textarea: withDefaultPlaceholder(Textarea, 'input'),
     TimePicker,
     TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
-    Upload,
+    Upload: withPreviewUpload(),
   };
 
   // 将组件注册到全局共享状态中

From c76db7d8d1b94cd9de430f82a22cfa35c98d62ad Mon Sep 17 00:00:00 2001
From: luoqiz <luoqiangzheng@gmail.com>
Date: Mon, 1 Dec 2025 09:51:27 +0800
Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dicon=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E6=A0=B9=E5=B1=9E=E6=80=A7=E5=AF=BC=E8=87=B4=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=94=99=E8=AF=AF=20(#6986)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/icons/src/svg/load.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/icons/src/svg/load.ts b/packages/icons/src/svg/load.ts
index 1557467ff..59098bdbe 100644
--- a/packages/icons/src/svg/load.ts
+++ b/packages/icons/src/svg/load.ts
@@ -13,10 +13,28 @@ function parseSvg(svgData: string): IconifyIconStructure {
   const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
   const svgElement = xmlDoc.documentElement;
 
+  // 提取 SVG 根元素的关键样式属性
+  const getAttrs = (el: Element, attrs: string[]) =>
+    attrs
+      .map((attr) =>
+        el.hasAttribute(attr) ? `${attr}="${el.getAttribute(attr)}"` : '',
+      )
+      .filter(Boolean)
+      .join(' ');
+
+  const rootAttrs = getAttrs(svgElement, [
+    'fill',
+    'stroke',
+    'fill-rule',
+    'stroke-width',
+  ]);
+
   const svgContent = [...svgElement.childNodes]
     .filter((node) => node.nodeType === Node.ELEMENT_NODE)
     .map((node) => new XMLSerializer().serializeToString(node))
     .join('');
+  // 若根有属性，用一个 g 标签包裹内容并继承属性
+  const body = rootAttrs ? `<g ${rootAttrs}>${svgContent}</g>` : svgContent;
 
   const viewBoxValue = svgElement.getAttribute('viewBox') || '';
   const [left, top, width, height] = viewBoxValue.split(' ').map((val) => {
@@ -25,7 +43,7 @@ function parseSvg(svgData: string): IconifyIconStructure {
   });
 
   return {
-    body: svgContent,
+    body,
     height,
     left,
     top,

From 9105d4d14a14ff5d50b1b1bb360e53fac5e07192 Mon Sep 17 00:00:00 2001
From: JyQAQ <45193678+jyqwq@users.noreply.github.com>
Date: Wed, 3 Dec 2025 10:03:23 +0800
Subject: [PATCH 09/13] =?UTF-8?q?feat(api-component):=20api-component?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84options=E6=94=AF=E6=8C=81=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9Adisabled=E5=80=BC=20(#6991)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/api-component/api-component.vue    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue
index 70e86e0ea..38419a7d7 100644
--- a/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -36,6 +36,8 @@ interface Props {
   childrenField?: string;
   /** value字段名 */
   valueField?: string;
+  /** disabled字段名 */
+  disabledField?: string;
   /** 组件接收options数据的属性名 */
   optionsPropName?: string;
   /** 是否立即调用api */
@@ -75,6 +77,7 @@ defineOptions({ name: 'ApiComponent', inheritAttrs: false });
 const props = withDefaults(defineProps<Props>(), {
   labelField: 'label',
   valueField: 'value',
+  disabledField: 'disabled',
   childrenField: '',
   optionsPropName: 'options',
   resultField: '',
@@ -108,17 +111,25 @@ const isFirstLoaded = ref(false);
 const hasPendingRequest = ref(false);
 
 const getOptions = computed(() => {
-  const { labelField, valueField, childrenField, numberToString } = props;
+  const {
+    labelField,
+    valueField,
+    disabledField,
+    childrenField,
+    numberToString,
+  } = props;
 
   const refOptionsData = unref(refOptions);
 
   function transformData(data: OptionsItem[]): OptionsItem[] {
     return data.map((item) => {
       const value = get(item, valueField);
+      const disabled = get(item, disabledField);
       return {
-        ...objectOmit(item, [labelField, valueField, childrenField]),
+        ...objectOmit(item, [labelField, valueField, disabled, childrenField]),
         label: get(item, labelField),
         value: numberToString ? `${value}` : value,
+        disabled: get(item, disabledField),
         ...(childrenField && item[childrenField]
           ? { children: transformData(item[childrenField]) }
           : {}),

From 1479f159aaea6bc5df81f39091cd335c3026bcdb Mon Sep 17 00:00:00 2001
From: JyQAQ <45193678+jyqwq@users.noreply.github.com>
Date: Sat, 6 Dec 2025 10:12:58 +0800
Subject: [PATCH 10/13] =?UTF-8?q?feat(CellImage):=20CellImage=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E5=86=99=E5=85=A5=20(#6992)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/adapter/vxe-table.ts    | 5 +++--
 apps/web-ele/src/adapter/vxe-table.ts     | 5 +++--
 apps/web-naive/src/adapter/vxe-table.ts   | 5 +++--
 apps/web-tdesign/src/adapter/vxe-table.ts | 5 +++--
 docs/src/_env/adapter/vxe-table.ts        | 5 +++--
 playground/src/adapter/vxe-table.ts       | 5 +++--
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 7de2859de..b0a1f0093 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -40,9 +40,10 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
-        return h(Image, { src: row[column.field] });
+        return h(Image, { src: row[column.field], ...props });
       },
     });
 
diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index 40b8179d3..81d1cdd24 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -40,10 +40,11 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
         const src = row[column.field];
-        return h(ElImage, { src, previewSrcList: [src] });
+        return h(ElImage, { src, previewSrcList: [src], ...props });
       },
     });
 
diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts
index 3bad067cd..1c3600003 100644
--- a/apps/web-naive/src/adapter/vxe-table.ts
+++ b/apps/web-naive/src/adapter/vxe-table.ts
@@ -40,9 +40,10 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
-        return h(NImage, { src: row[column.field] });
+        return h(NImage, { src: row[column.field], ...props });
       },
     });
 
diff --git a/apps/web-tdesign/src/adapter/vxe-table.ts b/apps/web-tdesign/src/adapter/vxe-table.ts
index 43bd68afd..e406242f5 100644
--- a/apps/web-tdesign/src/adapter/vxe-table.ts
+++ b/apps/web-tdesign/src/adapter/vxe-table.ts
@@ -40,9 +40,10 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
-        return h(Image, { src: row[column.field] });
+        return h(Image, { src: row[column.field], ...props });
       },
     });
 
diff --git a/docs/src/_env/adapter/vxe-table.ts b/docs/src/_env/adapter/vxe-table.ts
index bab7f3d38..7bc27056e 100644
--- a/docs/src/_env/adapter/vxe-table.ts
+++ b/docs/src/_env/adapter/vxe-table.ts
@@ -40,9 +40,10 @@ if (!import.meta.env.SSR) {
 
       // 表格配置项可以用 cellRender: { name: 'CellImage' },
       vxeUI.renderer.add('CellImage', {
-        renderTableDefault(_renderOpts, params) {
+        renderTableDefault(renderOpts, params) {
+          const { props } = renderOpts;
           const { column, row } = params;
-          return h(Image, { src: row[column.field] });
+          return h(Image, { src: row[column.field], ...props });
         },
       });
 
diff --git a/playground/src/adapter/vxe-table.ts b/playground/src/adapter/vxe-table.ts
index 24dfd4cdc..e53090a2f 100644
--- a/playground/src/adapter/vxe-table.ts
+++ b/playground/src/adapter/vxe-table.ts
@@ -62,9 +62,10 @@ setupVbenVxeTable({
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
-        return h(Image, { src: row[column.field] });
+        return h(Image, { src: row[column.field], ...props });
       },
     });
 

From ccf70a1b762e1d77916c3d580fda8295b7fe98a4 Mon Sep 17 00:00:00 2001
From: xueyitt <1455668754@qq.com>
Date: Mon, 22 Dec 2025 19:57:21 +0800
Subject: [PATCH 11/13] =?UTF-8?q?feat:=20=E4=BF=AE=E6=AD=A3=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=8E=92=E5=BA=8F=E5=9C=A8=E4=BA=8C=E7=BA=A7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE=E9=A2=98=20(#7007?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* treeUtil增加对树形结构数据进行递归排序

* 菜单sort排序各级菜单均生效
---
 packages/@core/base/shared/src/utils/tree.ts | 30 +++++++++++++++++++-
 packages/utils/src/helpers/generate-menus.ts |  4 +--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/@core/base/shared/src/utils/tree.ts b/packages/@core/base/shared/src/utils/tree.ts
index 09a9481cb..f3056dcf5 100644
--- a/packages/@core/base/shared/src/utils/tree.ts
+++ b/packages/@core/base/shared/src/utils/tree.ts
@@ -94,4 +94,32 @@ function mapTree<T, V extends Record<string, any>>(
   });
 }
 
-export { filterTree, mapTree, traverseTreeValues };
+/**
+ * 对树形结构数据进行递归排序
+ * @param treeData - 树形数据数组
+ * @param sortFunction - 排序函数，用于定义排序规则
+ * @param options - 配置选项，包括子节点属性名
+ * @returns 排序后的树形数据
+ */
+function sortTree<T extends Record<string, any>>(
+  treeData: T[],
+  sortFunction: (a: T, b: T) => number,
+  options?: TreeConfigOptions,
+): T[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  return treeData.toSorted(sortFunction).map((item) => {
+    const children = item[childProps];
+    if (children && Array.isArray(children) && children.length > 0) {
+      return {
+        ...item,
+        [childProps]: sortTree(children, sortFunction, options),
+      };
+    }
+    return item;
+  });
+}
+
+export { filterTree, mapTree, sortTree, traverseTreeValues };
diff --git a/packages/utils/src/helpers/generate-menus.ts b/packages/utils/src/helpers/generate-menus.ts
index af36bd70c..f13d599ac 100644
--- a/packages/utils/src/helpers/generate-menus.ts
+++ b/packages/utils/src/helpers/generate-menus.ts
@@ -6,7 +6,7 @@ import type {
   RouteMeta,
 } from '@vben-core/typings';
 
-import { filterTree, mapTree } from '@vben-core/shared/utils';
+import { filterTree, mapTree, sortTree } from '@vben-core/shared/utils';
 
 /**
  * 根据 routes 生成菜单列表
@@ -81,7 +81,7 @@ function generateMenus(
   });
 
   // 对菜单进行排序，避免order=0时被替换成999的问题
-  menus = menus.toSorted((a, b) => (a?.order ?? 999) - (b?.order ?? 999));
+  menus = sortTree(menus, (a, b) => (a?.order ?? 999) - (b?.order ?? 999));
 
   // 过滤掉隐藏的菜单项
   return filterTree(menus, (menu) => !!menu.show);

From 022d538940b80c835c2c023e7aad84e41d7292b3 Mon Sep 17 00:00:00 2001
From: zhenghaoyang24 <95458562+zhenghaoyang24@users.noreply.github.com>
Date: Mon, 22 Dec 2025 19:58:05 +0800
Subject: [PATCH 12/13] Fix formatting in thin.md for clarity (#7008)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改一些语句错误
---
 docs/src/guide/introduction/thin.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md
index 157d51ffc..8a37c2578 100644
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@@ -24,7 +24,7 @@ apps/web-naive
 
 ## 演示代码精简
 
-如果你不需要演示代码，你可以直接删除的`playground`文件夹。
+如果你不需要演示代码，你可以直接删除 `playground` 文件夹。
 
 ## 文档精简
 
@@ -88,7 +88,7 @@ pnpm install
 
 - 在应用的 `src/router/routes` 文件中，你可以删除不需要的路由。其中 `core` 文件夹内，如果只需要登录和忘记密码，你可以删除其他路由，如忘记密码、注册等。路由删除后，你可以删除对应的页面文件，在 `src/views/_core` 文件夹中。
 
-- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以删除对应的页面文件，在 `src/views` 文件夹中。
+- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以在 `src/views` 文件夹中删除对应的页面文件。
 
 ### 删除不需要的组件
 

From a1bb13223380540394afdf2bb62ca5a3e966cff1 Mon Sep 17 00:00:00 2001
From: JyQAQ <45193678+jyqwq@users.noreply.github.com>
Date: Mon, 22 Dec 2025 20:00:31 +0800
Subject: [PATCH 13/13] =?UTF-8?q?feat(api-cascader):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=81=94=E7=BA=A7=E7=BB=84=E4=BB=B6ApiCascader=20(#7031)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/adapter/component/index.ts | 13 +++++++++++++
 playground/src/adapter/component/index.ts    | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index 8455ef3aa..1d288009e 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -75,6 +75,9 @@ const TimePicker = defineAsyncComponent(
 const TreeSelect = defineAsyncComponent(
   () => import('ant-design-vue/es/tree-select'),
 );
+const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
 const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
 const PreviewGroup = defineAsyncComponent(() =>
@@ -327,9 +330,11 @@ const previewImage = async (
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'AutoComplete'
+  | 'Cascader'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
@@ -359,6 +364,13 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
+    ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Cascader,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
     ApiSelect: withDefaultPlaceholder(
       {
         ...ApiComponent,
@@ -388,6 +400,7 @@ async function initComponentAdapter() {
       },
     ),
     AutoComplete,
+    Cascader,
     Checkbox,
     CheckboxGroup,
     DatePicker,
diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts
index 2e50f6dae..261a7d3be 100644
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -75,6 +75,9 @@ const TimePicker = defineAsyncComponent(
 const TreeSelect = defineAsyncComponent(
   () => import('ant-design-vue/es/tree-select'),
 );
+const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
 const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
 const PreviewGroup = defineAsyncComponent(() =>
@@ -336,9 +339,11 @@ const previewImage = async (
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'AutoComplete'
+  | 'Cascader'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
@@ -369,6 +374,13 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
+    ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Cascader,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
     ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
       component: Select,
       loadingSlot: 'suffixIcon',
@@ -384,6 +396,7 @@ async function initComponentAdapter() {
       visibleEvent: 'onVisibleChange',
     }),
     AutoComplete,
+    Cascader,
     Checkbox,
     CheckboxGroup,
     DatePicker,