feat: use unocss

.vscode/settings.json

@@ -157,6 +157,7 @@
     "vben",
     "vditor",
     "videojs",
+    "vite",
     "vitejs",
     "vuedraggable",
     "vueuse",

src/components/VirtualScroll/src/VirtualScroll.vue

@@ -104,7 +104,7 @@ export default defineComponent({
       if (!wrapEl)
         return 0
 
-      const height = Number.parseInt(props.height || 0, 10) || wrapEl.clientHeight
+      const height = Number.parseInt(`${props.height || 0}`, 10) || wrapEl.clientHeight
 
       return first + Math.ceil(height / unref(getItemHeightRef))
     }

src/layouts/default/feature/index.vue

@@ -6,7 +6,6 @@ import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@/enums/appEnum'
 import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue'
@@ -18,11 +17,10 @@ const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/inde
 const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
 
 const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent }
-    = useRootSetting()
+  = useRootSetting()
 
 const getTarget = () => document.body
 const userStore = useUserStoreWithOut()
-const { prefixCls } = useDesign('setting-drawer-feature')
 const { getShowHeader } = useHeaderSetting()
 
 const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)
@@ -44,41 +42,17 @@ const getIsFixedSettingDrawer = computed(() => {
   <LayoutLockPage />
   <FloatButton.BackTop v-if="getUseOpenBackTop" :target="getTarget" />
   <FloatButton
-    shape="circle"
-    type="primary"
-    :badge="{ dot: true }"
-    :style="{
+    shape="circle" type="primary" :badge="{ dot: true }" :style="{
       right: '64px',
-    }"
-    @click="openWindow(SITE_URL)"
+    }" @click="openWindow(SITE_URL)"
   >
     <template #icon>
       <QuestionCircleOutlined />
     </template>
   </FloatButton>
-  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
+  <SettingDrawer
+    v-if="getIsFixedSettingDrawer"
+    class="absolute top-[45%] z-10 flex cursor-pointer items-center justify-items-center rounded-l-md rounded-r-none p-2.5"
+  />
   <SessionTimeoutLogin v-if="getIsSessionTimeout" />
 </template>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
-
-  .@{prefix-cls} {
-    position: absolute;
-    top: 45%;
-    right: 0;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    color: @white;
-    cursor: pointer;
-    border-radius: 6px 0 0 6px;
-
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-  }
-</style>

src/layouts/default/setting/components/SettingFooter.vue

@@ -67,12 +67,12 @@ function handleClearAndRedo() {
       {{ t('layout.setting.copyBtn') }}
     </a-button>
 
-    <a-button color="warning" block class="my-3" @click="handleResetSetting">
+    <a-button block class="my-3" @click="handleResetSetting">
       <RedoOutlined class="mr-2" />
       {{ t('common.resetText') }}
     </a-button>
 
-    <a-button color="error" block @click="handleClearAndRedo">
+    <a-button type="primary" danger block @click="handleClearAndRedo">
       <RedoOutlined class="mr-2" />
       {{ t('layout.setting.clearBtn') }}
     </a-button>

src/layouts/default/setting/index.vue

@@ -11,7 +11,7 @@ const [register, { openDrawer }] = useDrawer()
 
 <template>
   <div @click="openDrawer(true)">
-    <Icon icon="ion:settings-outline" />
+    <Icon class="h-4 w-4" icon="ion:settings-outline" />
     <SettingDrawer @register="register" />
   </div>
 </template>