feat: migrate to Tailwind CSS v4 (#7614)

* chore: update deps * feat: use jsonc/x language * chore: update eslint 10.0 * fix: no-useless-assignment * feat: add CLAUDE.md * chore: ignore * feat: claude * fix: lint * chore: suppot eslint v10 * fix: lint * fix: lint * fix: type check * fix: unit test * fix: Suggested fix * fix: unit test * chore: update stylelint v17 * chore: update all major deps * fix: echarts console warn * chore: update vitest v4 * feat: add skills ignores * chore: update deps * chore: update deps * fix: cspell * chore: update deps * chore: update tailwindcss v4 * chore: remove postcss config * fix: no use catalog * chore: tailwind v4 config * fix: tailwindcss v4 sort * feat: use eslint-plugin-better-tailwindcss * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix(lint): resolve prettier and better-tailwindcss formatting conflicts * fix(tailwind): update theme references and lint sources * style(format): normalize apps docs and playground vue files * style(format): normalize core ui-kit components * style(format): normalize effects ui and layout components
2026-05-07 18:51:46 +08:00 · 2026-03-10 05:08:45 +08:00
parent aa7d8630b5
commit a4736a49f8
289 changed files with 5286 additions and 6331 deletions
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -55,7 +55,7 @@ const logoSrc = computed(() => {
 <template>
  <div
    :class="[isDark ? 'dark' : '']"
-    class="flex min-h-full flex-1 select-none overflow-x-hidden"
+    class="flex min-h-full flex-1 overflow-x-hidden select-none"
  >
    <template v-if="toolbar">
      <slot name="toolbar">
@@ -82,11 +82,11 @@ const logoSrc = computed(() => {
      <!-- 头部 Logo 和应用名称 -->
      <div
        v-if="logoSrc || appName"
-        class="absolute left-0 top-0 z-10 flex flex-1"
+        class="absolute top-0 left-0 z-10 flex flex-1"
        @click="clickLogo"
      >
        <div
-          class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+          class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
        >
          <img
            v-if="logoSrc"
@@ -106,12 +106,12 @@ const logoSrc = computed(() => {
    <!-- 系统介绍 -->
    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
      <div
-        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
+        class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
      >
-        <div class="login-background absolute left-0 top-0 size-full"></div>
+        <div class="login-background absolute top-0 left-0 size-full"></div>
        <div
          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
-          class="flex-col-center mr-20 h-full"
+          class="mr-20 flex-col-center h-full"
          :class="{
            'enter-x': authPanelLeft,
            '-enter-x': authPanelRight,
@@ -121,14 +121,14 @@ const logoSrc = computed(() => {
            <img
              :alt="appName"
              :src="sloganImage"
-              class="animate-float h-64 w-2/5"
+              class="h-64 w-2/5 animate-float"
            />
          </template>
-          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
-          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
+          <SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
+          <div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
            {{ pageTitle }}
          </div>
-          <div class="dark:text-muted-foreground mt-2">
+          <div class="mt-2 dark:text-muted-foreground">
            {{ pageDescription }}
          </div>
        </div>
@@ -136,10 +136,10 @@ const logoSrc = computed(() => {
    </div>

    <!-- 中心认证面板 -->
-    <div v-if="authPanelCenter" class="flex-center relative w-full">
-      <div class="login-background absolute left-0 top-0 size-full"></div>
+    <div v-if="authPanelCenter" class="relative flex-center w-full">
+      <div class="login-background absolute top-0 left-0 size-full"></div>
      <AuthenticationFormView
-        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
        data-side="bottom"
      >
        <template v-if="copyright" #copyright>
--- a/packages/effects/layouts/src/authentication/form.vue
+++ b/packages/effects/layouts/src/authentication/form.vue
@@ -10,7 +10,7 @@ defineProps<{

 <template>
  <div
-    class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
+    class="relative flex-col-center bg-background px-6 py-10 lg:flex-initial lg:px-8 dark:bg-background-deep"
  >
    <slot></slot>
    <!-- Router View with Transition and KeepAlive -->
@@ -30,7 +30,7 @@ defineProps<{
    <!-- Footer Copyright -->

    <div
-      class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
+      class="absolute bottom-3 flex text-center text-xs text-muted-foreground"
    >
      <slot name="copyright"> </slot>
    </div>
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -33,9 +33,9 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
  <div
    :class="{
-      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
+      'rounded-3xl bg-accent px-3 py-1': toolbarList.length > 1,
    }"
-    class="flex-center absolute right-2 top-4 z-10"
+    class="absolute top-4 right-2 z-10 flex-center"
  >
    <!-- Only show on medium and larger screens -->
    <div class="hidden md:flex">
--- a/packages/effects/layouts/src/basic/copyright/copyright.vue
+++ b/packages/effects/layouts/src/basic/copyright/copyright.vue
@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
    <a
      v-if="icp"
      :href="icpLink || 'javascript:void(0)'"
-      class="hover:text-primary-hover mx-1"
+      class="mx-1 hover:text-primary-hover"
      target="_blank"
    >
      {{ icp }}
@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
    <a
      v-if="companyName"
      :href="companySiteLink || 'javascript:void(0)'"
-      class="hover:text-primary-hover mx-1"
+      class="mx-1 hover:text-primary-hover"
      target="_blank"
    >
      {{ companyName }}
--- a/packages/effects/layouts/src/basic/footer/footer.vue
+++ b/packages/effects/layouts/src/basic/footer/footer.vue
@@ -5,7 +5,7 @@ defineOptions({
 </script>

 <template>
-  <div class="flex-center text-muted-foreground relative h-full w-full text-xs">
+  <div class="relative flex-center size-full text-xs text-muted-foreground">
    <slot></slot>
  </div>
 </template>
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -147,7 +147,7 @@ function clearPreferencesAndLogout() {
  >
    <slot name="menu"></slot>
  </div>
-  <div class="flex h-full min-w-0 flex-shrink-0 items-center">
+  <div class="flex h-full min-w-0 shrink-0 items-center">
    <template v-for="slot in rightSlots" :key="slot.name">
      <slot :name="slot.name">
        <template v-if="slot.name === 'global-search'">
@@ -165,7 +165,7 @@ function clearPreferencesAndLogout() {
          />
        </template>
        <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle class="mr-1 mt-[2px]" />
+          <ThemeToggle class="mt-[2px] mr-1" />
        </template>
        <template v-else-if="slot.name === 'language-toggle'">
          <LanguageToggle class="mr-1" />
@@ -174,7 +174,7 @@ function clearPreferencesAndLogout() {
          <VbenFullScreen class="mr-1" />
        </template>
        <template v-else-if="slot.name === 'timezone'">
-          <TimezoneButton class="mr-1 mt-[2px]" />
+          <TimezoneButton class="mt-[2px] mr-1" />
        </template>
      </slot>
    </template>
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -421,7 +421,7 @@ const headerSlots = computed(() => {

      <template v-if="preferencesButtonPosition.fixed">
        <Preferences
-          class="z-100 fixed right-0 top-1/2 -translate-y-1/2 transform"
+          class="fixed top-1/2 right-0 z-100 -translate-y-1/2 transform"
          @clear-preferences-and-logout="clearPreferencesAndLogout"
        />
      </template>
--- a/packages/effects/layouts/src/widgets/color-toggle.vue
+++ b/packages/effects/layouts/src/widgets/color-toggle.vue
@@ -31,16 +31,16 @@ function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
    >
      <template v-for="preset in COLOR_PRESETS" :key="preset.color">
        <VbenIconButton
-          class="flex-center flex-shrink-0"
+          class="flex-center shrink-0"
          @click="handleUpdate(preset.color, preset.type)"
        >
          <div
            :style="{ backgroundColor: preset.color }"
-            class="flex-center relative size-5 rounded-full hover:scale-110"
+            class="relative flex-center size-5 rounded-full hover:scale-110"
          >
            <svg
              v-if="preferences.theme.builtinType === preset.type"
-              class="h-3.5 w-3.5 text-white"
+              class="size-3.5 text-white"
              height="1em"
              viewBox="0 0 15 15"
              width="1em"
@@ -58,7 +58,7 @@ function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
    </div>

    <VbenIconButton>
-      <Palette class="text-primary size-4" />
+      <Palette class="size-4 text-primary" />
    </VbenIconButton>
  </div>
 </template>
--- a/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -103,12 +103,12 @@ onMounted(() => {
    >
      <template #title>
        <div class="flex items-center">
-          <Search class="text-muted-foreground mr-2 size-4" />
+          <Search class="mr-2 size-4 text-muted-foreground" />
          <input
            ref="searchInputRef"
            v-model="keyword"
            :placeholder="$t('ui.widgets.search.searchNavigate')"
-            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
+            class="ring-none w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal ring-0 ring-offset-transparent outline-hidden placeholder:text-muted-foreground focus-visible:ring-transparent"
          />
        </div>
      </template>
@@ -133,20 +133,20 @@ onMounted(() => {
      </template>
    </Modal>
    <div
-      class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+      class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-hidden md:bg-accent"
      @click="toggleOpen()"
    >
      <Search
-        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+        class="size-4 text-muted-foreground group-hover:text-foreground group-hover:opacity-100"
      />
      <span
-        class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
+        class="hidden text-xs text-muted-foreground duration-300 group-hover:text-foreground md:block"
      >
        {{ $t('ui.widgets.search.title') }}
      </span>
      <span
        v-if="enableShortcutKey"
-        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+        class="relative hidden rounded-sm rounded-r-xl border-foreground/60 bg-background px-1.5 py-1 text-xs leading-none text-muted-foreground group-hover:text-foreground group-hover:opacity-100 md:block"
      >
        {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
        <kbd>K</kbd>
--- a/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -223,16 +223,16 @@ onMounted(() => {

 <template>
  <VbenScrollbar>
-    <div class="!flex h-full justify-center px-2 sm:max-h-[450px]">
+    <div class="flex! h-full justify-center px-2 sm:max-h-[450px]">
      <!-- 无搜索结果 -->
      <div
        v-if="keyword && searchResults.length === 0"
-        class="text-muted-foreground text-center"
+        class="text-center text-muted-foreground"
      >
        <SearchX class="mx-auto mt-4 size-12" />
-        <p class="mb-10 mt-6 text-xs">
+        <p class="mt-6 mb-10 text-xs">
          {{ $t('ui.widgets.search.noResults') }}
-          <span class="text-foreground text-sm font-medium">
+          <span class="text-sm font-medium text-foreground">
            "{{ keyword }}"
          </span>
        </p>
@@ -240,7 +240,7 @@ onMounted(() => {
      <!-- 历史搜索记录 & 没有搜索结果 -->
      <div
        v-if="!keyword && searchResults.length === 0"
-        class="text-muted-foreground text-center"
+        class="text-center text-muted-foreground"
      >
        <p class="my-10 text-xs">
          {{ $t('ui.widgets.search.noRecent') }}
@@ -250,7 +250,7 @@ onMounted(() => {
      <ul v-show="searchResults.length > 0" class="w-full">
        <li
          v-if="searchHistory.length > 0 && !keyword"
-          class="text-muted-foreground mb-2 text-xs"
+          class="mb-2 text-xs text-muted-foreground"
        >
          {{ $t('ui.widgets.search.recent') }}
        </li>
@@ -264,19 +264,15 @@ onMounted(() => {
          "
          :data-index="index"
          :data-search-item="index"
-          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
+          class="group mb-3 flex-center w-full cursor-pointer rounded-lg bg-accent p-4"
          @click="handleEnter"
          @mouseenter="handleMouseenter"
        >
-          <VbenIcon
-            :icon="item.icon"
-            class="mr-2 size-5 flex-shrink-0"
-            fallback
-          />
+          <VbenIcon :icon="item.icon" class="mr-2 size-5 shrink-0" fallback />

          <span class="flex-1">{{ item.name }}</span>
          <div
-            class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
+            class="flex-center rounded-full p-1 hover:scale-110 hover:text-primary-foreground dark:hover:bg-accent"
            @click.stop="removeItem(index)"
          >
            <X class="size-4" />
--- a/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -32,7 +32,7 @@ async function handleUpdate(value: string | undefined) {
      @update:model-value="handleUpdate"
    >
      <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
-        <Languages class="text-foreground size-4" />
+        <Languages class="size-4 text-foreground" />
      </VbenIconButton>
    </VbenDropdownRadioMenu>
  </div>
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -96,7 +96,7 @@ async function handleSubmit() {
            class="size-20"
            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
          />
-          <div class="text-foreground my-6 flex items-center font-medium">
+          <div class="my-6 flex items-center font-medium text-foreground">
            {{ text }}
          </div>
        </div>
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -88,11 +88,11 @@ useScrollLock();
 </script>

 <template>
-  <div class="bg-background fixed z-[2000] size-full">
+  <div class="fixed z-2000 size-full bg-background">
    <transition name="slide-left">
      <div v-show="!showUnlockForm" class="size-full">
        <div
-          class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
+          class="group fixed top-6 left-1/2 z-2001 flex-col-center -translate-x-1/2 cursor-pointer text-xl font-semibold text-foreground/80 hover:text-foreground"
          @click="toggleUnlockForm"
        >
          <LockKeyhole
@@ -100,20 +100,20 @@ useScrollLock();
          />
          <span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
        </div>
-        <div class="flex h-full w-full items-center justify-center">
+        <div class="flex-center size-full">
          <div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
            <div
-              class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+              class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
            >
              <span
-                class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
+                class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
              >
                {{ meridiem }}
              </span>
              {{ hour }}
            </div>
            <div
-              class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+              class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
            >
              {{ minute }}
            </div>
@@ -128,7 +128,7 @@ useScrollLock();
        class="flex-center size-full"
        @keydown.enter.prevent="handleSubmit"
      >
-        <div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
+        <div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
          <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
          <div class="enter-x mb-2 w-full items-center">
            <Form />
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -92,11 +92,11 @@ function navigateTo(
    content-class="relative right-2 w-[360px] p-0"
  >
    <template #trigger>
-      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
-        <VbenIconButton class="bell-button text-foreground relative">
+      <div class="mr-2 flex-center h-full" @click.stop="toggle()">
+        <VbenIconButton class="bell-button relative text-foreground">
          <span
            v-if="dot"
-            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+            class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
          ></span>
          <Bell class="size-4" />
        </VbenIconButton>
@@ -115,36 +115,36 @@ function navigateTo(
        </VbenIconButton>
      </div>
      <VbenScrollbar v-if="notifications.length > 0">
-        <ul class="!flex max-h-[360px] w-full flex-col">
+        <ul class="flex! max-h-[360px] w-full flex-col">
          <template v-for="item in notifications" :key="item.id ?? item.title">
            <li
-              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
+              class="relative flex w-full cursor-pointer items-start gap-5 border-t border-border p-3 hover:bg-accent"
              @click="handleClick(item)"
            >
              <span
                v-if="!item.isRead"
-                class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
+                class="absolute top-2 right-2 size-2 rounded-sm bg-primary"
              ></span>

              <span
-                class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+                class="relative flex size-10 shrink-0 overflow-hidden rounded-full"
              >
                <img
                  :src="item.avatar"
-                  class="aspect-square h-full w-full object-cover"
+                  class="aspect-square size-full object-cover"
                />
              </span>
              <div class="flex flex-col gap-1 leading-none">
                <p class="font-semibold">{{ item.title }}</p>
-                <p class="text-muted-foreground my-1 line-clamp-2 text-xs">
+                <p class="my-1 line-clamp-2 text-xs text-muted-foreground">
                  {{ item.message }}
                </p>
-                <p class="text-muted-foreground line-clamp-2 text-xs">
+                <p class="line-clamp-2 text-xs text-muted-foreground">
                  {{ item.date }}
                </p>
              </div>
              <div
-                class="absolute right-3 top-1/2 flex -translate-y-1/2 flex-col gap-2"
+                class="absolute top-1/2 right-3 flex -translate-y-1/2 flex-col gap-2"
              >
                <VbenIconButton
                  v-if="!item.isRead"
@@ -160,7 +160,7 @@ function navigateTo(
                  v-if="item.isRead"
                  size="xs"
                  variant="ghost"
-                  class="text-destructive h-6 px-2"
+                  class="h-6 px-2 text-destructive"
                  :tooltip="$t('common.delete')"
                  @click.stop="emit('remove', item)"
                >
@@ -173,13 +173,13 @@ function navigateTo(
      </VbenScrollbar>

      <template v-else>
-        <div class="flex-center text-muted-foreground min-h-[150px] w-full">
+        <div class="flex-center min-h-[150px] w-full text-muted-foreground">
          {{ $t('common.noData') }}
        </div>
      </template>

      <div
-        class="border-border flex items-center justify-between border-t px-4 py-3"
+        class="flex items-center justify-between border-t border-border px-4 py-3"
      >
        <VbenButton
          :disabled="notifications.length <= 0"
--- a/packages/effects/layouts/src/widgets/preferences/blocks/block.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/block.vue
@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {

 <template>
  <div class="flex flex-col py-4">
-    <h3 class="mb-3 font-semibold leading-none tracking-tight">
+    <h3 class="mb-3 leading-none font-semibold tracking-tight">
      {{ title }}
    </h3>
    <slot></slot>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue
@@ -34,7 +34,7 @@ function handleClick(value: string) {
  </SwitchItem>
  <div
    v-if="transitionEnable"
-    class="mb-2 mt-3 flex justify-between gap-3 px-2"
+    class="mt-3 mb-2 flex justify-between gap-3 px-2"
  >
    <div
      v-for="item in transitionPreset"
@@ -45,7 +45,7 @@ function handleClick(value: string) {
      class="outline-box p-2"
      @click="handleClick(item)"
    >
-      <div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
+      <div :class="`${item}-slow`" class="h-10 w-12 rounded-md bg-accent"></div>
    </div>
  </div>
 </template>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -55,7 +55,7 @@ const slots = useSlots();
      />
      <CircleX
        v-if="inputValue"
-        class="hover:text-foreground text-foreground/60 absolute right-2 top-1/2 size-3 -translate-y-1/2 transform cursor-pointer"
+        class="absolute top-1/2 right-2 size-3 -translate-y-1/2 transform cursor-pointer text-foreground/60 hover:text-foreground"
        @click="() => (inputValue = '')"
      />
    </div>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
@@ -44,7 +44,7 @@ function activeClass(theme: string): string[] {
        <div :class="activeClass(theme.type)" class="outline-box flex-center">
          <component :is="components[theme.type]" />
        </div>
-        <div class="text-muted-foreground mt-2 text-center text-xs">
+        <div class="mt-2 text-center text-xs text-muted-foreground">
          {{ theme.name }}
        </div>
      </div>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -96,7 +96,7 @@ function activeClass(theme: string): string[] {
          <component :is="components[theme.type]" />
        </div>
        <div
-          class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
+          class="mt-2 flex-center text-center text-xs text-muted-foreground hover:text-foreground"
        >
          {{ theme.name }}
          <VbenTooltip v-if="theme.tip" side="bottom">
--- a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -28,7 +28,7 @@ function handleClick() {
    :class="{
      'pointer-events-none opacity-50': disabled,
    }"
-    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5 hover:bg-accent"
    @click="handleClick"
  >
    <span class="flex items-center text-sm">
@@ -47,7 +47,7 @@ function handleClick() {
        </slot>
      </VbenTooltip>
    </span>
-    <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
+    <span v-if="$slots.shortcut" class="mr-2 ml-auto text-xs opacity-60">
      <slot name="shortcut"></slot>
    </span>
    <Switch v-model="checked" @click.stop />
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -128,7 +128,7 @@ watch(
          :class="{
            'outline-box-active': theme.type === modelValue,
          }"
-          class="outline-box flex-center group cursor-pointer"
+          class="group outline-box flex-center cursor-pointer"
        >
          <template v-if="theme.type !== 'custom'">
            <div
@@ -138,9 +138,9 @@ watch(
          </template>
          <template v-else>
            <div class="size-full px-9 py-2" @click.stop="selectColor">
-              <div class="flex-center relative size-5 rounded-sm">
+              <div class="relative flex-center size-5 rounded-sm">
                <UserRoundPen
-                  class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
+                  class="absolute z-1 size-5 opacity-60 group-hover:opacity-100"
                />
                <input
                  ref="colorInput"
@@ -153,7 +153,7 @@ watch(
            </div>
          </template>
        </div>
-        <div class="text-muted-foreground my-2 text-center text-xs">
+        <div class="my-2 text-center text-xs text-muted-foreground">
          {{ typeView(theme.type) }}
        </div>
      </div>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
@@ -53,9 +53,9 @@ watch(
          <NumberFieldIncrement />
        </NumberFieldContent>
      </NumberField>
-      <span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
+      <span class="text-xs whitespace-nowrap text-muted-foreground">px</span>
    </div>
-    <div class="text-muted-foreground text-xs">
+    <div class="text-xs text-muted-foreground">
      {{ $t('preferences.theme.fontSizeTip') }}
    </div>
  </div>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
@@ -29,7 +29,7 @@ const items = [
    <template v-for="item in items" :key="item.value">
      <ToggleGroupItem
        :value="item.value"
-        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
+        class="h-7 w-16 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
      >
        {{ item.label }}
      </ToggleGroupItem>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
@@ -78,7 +78,7 @@ function nameView(name: string) {
        >
          <component :is="theme.icon" class="mx-9 size-5" />
        </div>
-        <div class="text-muted-foreground mt-2 text-center text-xs">
+        <div class="mt-2 text-center text-xs text-muted-foreground">
          {{ nameView(theme.name) }}
        </div>
      </div>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
@@ -20,7 +20,7 @@ const modelValue = defineModel<string>();
    :class="{
      'pointer-events-none opacity-50': disabled,
    }"
-    class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
+    class="flex w-full items-center justify-between rounded-md p-2 hover:bg-accent"
    disabled
  >
    <span class="text-sm">
@@ -36,7 +36,7 @@ const modelValue = defineModel<string>();
      <template v-for="item in items" :key="item.value">
        <ToggleGroupItem
          :value="item.value"
-          class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
+          class="h-7 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
        >
          {{ item.label }}
        </ToggleGroupItem>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -14,7 +14,7 @@ function clearPreferencesAndLogout() {
 <template>
  <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
    <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
-      <Settings class="text-foreground size-4" />
+      <Settings class="size-4 text-foreground" />
    </VbenIconButton>
  </Preferences>
 </template>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -252,7 +252,7 @@ async function handleReset() {
    <Drawer
      :description="$t('preferences.subtitle')"
      :title="$t('preferences.title')"
-      class="!border-0 sm:max-w-sm"
+      class="border-0! sm:max-w-sm"
    >
      <template #extra>
        <div class="flex items-center">
@@ -264,7 +264,7 @@ async function handleReset() {
          >
            <span
              v-if="diffPreference"
-              class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+              class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
            ></span>
            <RotateCw class="size-4" />
          </VbenIconButton>
--- a/packages/effects/layouts/src/widgets/preferences/preferences.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences.vue
@@ -62,7 +62,7 @@ const listen = computed(() => {
      <slot>
        <VbenButton
          :title="$t('preferences.title')"
-          class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
+          class="flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none bg-primary"
        >
          <Settings class="size-5" />
        </VbenButton>
--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -93,24 +93,19 @@ function toggleTheme(event: MouseEvent) {
    @click.stop="toggleTheme"
  >
    <svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
-      <mask
-        id="theme-toggle-moon"
-        class="theme-toggle__moon"
-        fill="hsl(var(--foreground)/80%)"
-        stroke="none"
-      >
+      <mask id="theme-toggle-moon" class="theme-toggle__moon">
        <rect fill="white" height="100%" width="100%" x="0" y="0" />
        <circle cx="40" cy="8" fill="black" r="11" />
      </mask>
      <circle
        id="sun"
-        class="theme-toggle__sun"
+        class="theme-toggle__sun fill-foreground/90"
        cx="12"
        cy="12"
        mask="url(#theme-toggle-moon)"
        r="11"
      />
-      <g class="theme-toggle__sun-beams">
+      <g class="theme-toggle__sun-beams stroke-foreground/90 stroke-2">
        <line x1="12" x2="12" y1="1" y2="3" />
        <line x1="12" x2="12" y1="21" y2="23" />
        <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
@@ -125,64 +120,46 @@ function toggleTheme(event: MouseEvent) {
 </template>

 <style scoped>
-.theme-toggle {
-  &__moon {
-    & > circle {
-      transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
-    }
-  }
+@reference "@vben-core/design/theme";

-  &__sun {
-    @apply fill-foreground/90 stroke-none;
+.theme-toggle__moon > circle {
+  transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
+}

-    transform-origin: center center;
-    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
+.theme-toggle__sun {
+  stroke: none;
+  transform-origin: center center;
+  transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
+}

-    &:hover > svg > & {
-      @apply fill-foreground/90;
-    }
-  }
+.theme-toggle__sun-beams {
+  transform-origin: center center;
+  transition:
+    transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+    opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
+}

-  &__sun-beams {
-    @apply stroke-foreground/90 stroke-[2px];
+.theme-toggle.is-light .theme-toggle__sun {
+  @apply scale-50;
+}

-    transform-origin: center center;
-    transition:
-      transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
-      opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
+.theme-toggle.is-light .theme-toggle__sun-beams {
+  transform: rotateZ(0.25turn);
+}

-    &:hover > svg > & {
-      @apply stroke-foreground;
-    }
-  }
+.theme-toggle.is-dark .theme-toggle__moon > circle {
+  transform: translateX(-20px);
+}

-  &.is-light {
-    .theme-toggle__sun {
-      @apply scale-50;
-    }
+.theme-toggle.is-dark .theme-toggle__sun-beams {
+  @apply opacity-0;
+}

-    .theme-toggle__sun-beams {
-      transform: rotateZ(0.25turn);
-    }
-  }
+.theme-toggle:hover > svg .theme-toggle__sun {
+  fill: hsl(var(--foreground));
+}

-  &.is-dark {
-    .theme-toggle__moon {
-      & > circle {
-        transform: translateX(-20px);
-      }
-    }
-
-    .theme-toggle__sun-beams {
-      @apply opacity-0;
-    }
-  }
-
-  &:hover > svg {
-    .theme-toggle__sun,
-    .theme-toggle__moon {
-      @apply fill-foreground;
-    }
-  }
+.theme-toggle:hover > svg .theme-toggle__sun-beams {
+  stroke: hsl(var(--foreground));
 }
 </style>
--- a/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
+++ b/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
@@ -59,7 +59,7 @@ const handleClick = () => {
      class="hover:animate-[shrink_0.3s_ease-in-out]"
      @click="handleClick"
    >
-      <TimezoneIcon class="text-foreground size-4" />
+      <TimezoneIcon class="size-4 text-foreground" />
    </VbenIconButton>
    <Modal :title="$t('ui.widgets.timezone.setTimezone')">
      <div class="timezone-container">
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -190,8 +190,8 @@ if (enableShortcutKey.value) {

  <DropdownMenu v-model:open="openPopover">
    <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
-      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
-        <div class="hover:text-accent-foreground flex-center">
+      <div class="mr-2 ml-1 cursor-pointer rounded-full p-1.5 hover:bg-accent">
+        <div class="flex-center hover:text-accent-foreground">
          <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
        </div>
      </div>
@@ -209,7 +209,7 @@ if (enableShortcutKey.value) {
          <div class="ml-2 w-full">
            <div
              v-if="tagText || text || $slots.tagText"
-              class="text-foreground mb-1 flex items-center text-sm font-medium"
+              class="mb-1 flex items-center text-sm font-medium text-foreground"
            >
              {{ text }}
              <slot name="tagText">
@@ -218,7 +218,7 @@ if (enableShortcutKey.value) {
                </Badge>
              </slot>
            </div>
-            <div class="text-muted-foreground text-xs font-normal">
+            <div class="text-xs font-normal text-muted-foreground">
              {{ description }}
            </div>
          </div>