From 15780d189421d831c497f2de19385c163ea37efe Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Thu, 11 Apr 2024 17:16:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/typings/components.d.ts          |  2 --
 src/views/home/index.vue             |  4 ++--
 src/views/home/modules/card-data.vue | 28 ++++++++++++++++++++++++++--
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 9db90d5..6680333 100644
--- a/src/typings/components.d.ts
+++ b/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']
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 625ed83..c74b165 100644
--- a/src/views/home/index.vue
+++ b/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="最近一周" />
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 9b7276e..c1ea1c3 100644
--- a/src/views/home/modules/card-data.vue
+++ b/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