refactor: 优化首页移动端显示效果

src/typings/components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ACheckableTag: typeof import('ant-design-vue/es')['CheckableTag']
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
@@ -34,7 +33,6 @@ declare module 'vue' {
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
-    'IconOui:appSpaces': typeof import('~icons/oui/app-spaces')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']

src/views/home/index.vue

@@ -58,7 +58,7 @@ const onUpdateType = (value: string) => {
   <NSpace vertical :size="16">
     <HeaderBanner />
     <CardData :model-value="cardCount!" />
-    <NCard :bordered="false" class="card-wrapper">
+    <NCard :bordered="false" class="card-wrapper p-t-136px xl:p-t-0">
       <div class="relative">
         <NTabs type="line" animated>
           <NTabPane name="retryTask" :tab="$t('page.home.retryTask')">
@@ -68,7 +68,7 @@ const onUpdateType = (value: string) => {
             <RetryTab :type="1" :line-params="tabParams" />
           </NTabPane>
         </NTabs>
-        <div class="absolute right-40px top-0 flex gap-16px">
+        <div class="absolute top--136px flex flex-wrap gap-16px xl:right-40px xl:top-0 xl:flex-nowrap">
           <NRadioGroup v-model:value="tabParams.type" @update:value="onUpdateType">
             <NRadioButton value="DAY" label="今日" />
             <NRadioButton value="WEEK" label="最近一周" />

src/views/home/modules/card-data.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, onUnmounted, reactive } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { useRouter } from 'vue-router';
 import { $t } from '@/locales';
@@ -15,6 +15,30 @@ interface Props {
   modelValue?: Api.Dashboard.CardCount;
 }
 
+const state = reactive({ width: 0 });
+const gridCol = computed(() => {
+  if (state.width >= 1600) {
+    return 4;
+  } else if (state.width >= 1024) {
+    return 2;
+  }
+  return 1;
+});
+
+const getState = () => {
+  state.width = document.documentElement.clientWidth;
+};
+
+nextTick(() => {
+  getState();
+  window.addEventListener('resize', getState);
+});
+
+onUnmounted(() => {
+  // 移除监听事件
+  window.removeEventListener('resize', getState);
+});
+
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => ({
     jobTask: {
@@ -189,7 +213,7 @@ function getGradientColor(color: CardData['color']) {
     </DefineGradientBg>
     <!-- define component end: GradientBg -->
 
-    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
+    <NGrid :cols="gridCol" responsive="screen" :x-gap="16" :y-gap="16">
       <NGi v-for="item in cardData" :key="item.key">
         <NSpin :show="false">
           <GradientBg