refactor(projects): perf code

src/layouts/modules/theme-drawer/components/layout-mode-card.vue

@@ -80,7 +80,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
         <template #trigger>
           <div
             class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
-            :class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
+            :class="[key.includes('vertical') ? 'flex' : 'flex-col']"
           >
             <slot :name="key"></slot>
           </div>

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -26,7 +26,7 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
 
 <template>
   <NDivider>{{ $t('theme.themeSchema.title') }}</NDivider>
-  <div class="flex-vertical-stretch gap-16px">
+  <div class="flex-col-stretch gap-16px">
     <div class="i-flex-center">
       <NTabs
         :key="themeStore.themeScheme"
@@ -50,20 +50,13 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
 </template>
 
 <style scoped>
-.sider-inverted-enter-active {
-  height: 22px;
-  transition: all 0.3s ease-in-out;
-}
-
+.sider-inverted-enter-active,
 .sider-inverted-leave-active {
-  height: 22px;
-  transition: all 0.3s ease-in-out;
+  --uno: h-22px transition-all-300;
 }
 
 .sider-inverted-enter-from,
 .sider-inverted-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-  height: 0;
+  --uno: translate-x-20px opacity-0 h-0;
 }
 </style>

src/layouts/modules/theme-drawer/modules/layout-mode.vue

@@ -60,7 +60,7 @@ const themeStore = useThemeStore();
 }
 
 .vertical-wrapper {
-  --uno: flex-1 flex-vertical gap-6px;
+  --uno: flex-1 flex-col gap-6px;
 }
 
 .horizontal-wrapper {

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -21,14 +21,14 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
 
 <template>
   <NDivider>{{ $t('theme.pageFunTitle') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-vertical-stretch gap-12px">
+  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
     <SettingItem key="1" :label="$t('theme.scrollMode.title')">
       <NSelect
         v-model:value="themeStore.layout.scrollMode"
         :options="translateOptions(themeScrollModeOptions)"
         size="small"
         class="w-120px"
-      ></NSelect>
+      />
     </SettingItem>
     <SettingItem key="1-1" :label="$t('theme.page.animate')">
       <NSwitch v-model:value="themeStore.page.animate" />
@@ -108,16 +108,15 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
 .setting-list-move,
 .setting-list-enter-active,
 .setting-list-leave-active {
-  transition: all 0.3s ease-in-out;
+  --uno: transition-all-300;
 }
 
 .setting-list-enter-from,
 .setting-list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
+  --uno: opacity-0 -translate-x-30px;
 }
 
 .setting-list-leave-active {
-  position: absolute;
+  --uno: absolute;
 }
 </style>

src/layouts/modules/theme-drawer/modules/theme-color.vue

@@ -35,7 +35,7 @@ const swatches: string[] = [
 
 <template>
   <NDivider>{{ $t('theme.themeColor.title') }}</NDivider>
-  <div class="flex-vertical-stretch gap-12px">
+  <div class="flex-col-stretch gap-12px">
     <SettingItem v-for="(_, key) in themeStore.themeColors" :key="key" :label="$t(`theme.themeColor.${key}`)">
       <template v-if="key === 'info'" #suffix>
         <NCheckbox v-model:checked="themeStore.isInfoFollowPrimary">