refactor(dashboard): adjust the spacing of Card under the small screen (#1399)

Co-authored-by: Nhuguangju <huguangju@wowkai.cn>

src/api/demo/table.ts

@@ -14,6 +14,7 @@ export const demoListApi = (params: DemoParams) =>
     url: Api.DEMO_LIST,
     params,
     headers: {
+      // @ts-ignore
       ignoreCancelToken: true,
     },
   });

src/components/Page/src/PageWrapper.vue

@@ -5,7 +5,7 @@
       :title="title"
       v-bind="omit($attrs, 'class')"
       ref="headerRef"
-      v-if="content || $slots.headerContent || title || getHeaderSlots.length"
+      v-if="getShowHeader"
     >
       <template #default>
         <template v-if="content">
@@ -99,6 +99,10 @@
         ];
       });
 
+      const getShowHeader = computed(
+        () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
+      );
+
       const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
 
       const getHeaderSlots = computed(() => {
@@ -150,6 +154,7 @@
         getClass,
         getHeaderSlots,
         prefixCls,
+        getShowHeader,
         getShowFooter,
         omit,
         getContentClass,

src/hooks/event/useWindowSizeFn.ts

-import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
-import { useDebounceFn } from '@vueuse/core';
+import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 
 interface WindowSizeOptions {
   once?: boolean;

src/utils/cache/storageCache.ts

 import { cacheCipher } from '/@/settings/encryptionSetting';
-
 import type { EncryptionParams } from '/@/utils/cipher';
-
 import { AesEncryption } from '/@/utils/cipher';
-
 import { isNullOrUnDef } from '/@/utils/is';
 
 export interface CreateStorageParams extends EncryptionParams {
@@ -27,8 +24,8 @@ export const createStorage = ({
   const encryption = new AesEncryption({ key, iv });
 
   /**
-   *Cache class
-   *Construction parameters can be passed into sessionStorage, localStorage,
+   * Cache class
+   * Construction parameters can be passed into sessionStorage, localStorage,
    * @class Cache
    * @example
    */
@@ -53,11 +50,10 @@ export const createStorage = ({
     }
 
     /**
-     *
-     *  Set cache
+     * Set cache
      * @param {string} key
      * @param {*} value
-     * @expire Expiration time in seconds
+     * @param {*} expire Expiration time in seconds
      * @memberof Cache
      */
     set(key: string, value: any, expire: number | null = timeout) {
@@ -73,8 +69,9 @@ export const createStorage = ({
     }
 
     /**
-     *Read cache
+     * Read cache
      * @param {string} key
+     * @param {*} def
      * @memberof Cache
      */
     get(key: string, def: any = null): any {

src/utils/factory/createAsyncComponent.tsx

@@ -3,7 +3,7 @@ import {
   // FunctionalComponent, CSSProperties
 } from 'vue';
 import { Spin } from 'ant-design-vue';
-import { noop } from '/@/utils/index';
+import { noop } from '/@/utils';
 
 // const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => {
 //   const style: CSSProperties = {

src/views/dashboard/analysis/components/GrowCard.vue

@@ -5,15 +5,14 @@
         size="small"
         :loading="loading"
         :title="item.title"
-        class="md:w-1/4 w-full !md:mt-0 !mt-4"
-        :class="[index + 1 < 4 && '!md:mr-4']"
-        :canExpan="false"
+        class="md:w-1/4 w-full !md:mt-0"
+        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
       >
         <template #extra>
           <Tag :color="item.color">{{ item.action }}</Tag>
         </template>
 
-        <div class="py-4 px-4 flex justify-between">
+        <div class="py-4 px-4 flex justify-between items-center">
           <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
           <Icon :icon="item.icon" :size="40" />
         </div>

src/views/dashboard/analysis/components/SalesProductPie.vue

@@ -22,6 +22,7 @@
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
   watch(
     () => props.loading,
     () => {

src/views/dashboard/analysis/components/VisitAnalysis.vue

 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
+<script lang="ts">
+  import { basicProps } from './props';
+</script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { basicProps } from './props';
 
   defineProps({
     ...basicProps,
@@ -26,26 +28,7 @@
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: [
-          '6:00',
-          '7:00',
-          '8:00',
-          '9:00',
-          '10:00',
-          '11:00',
-          '12:00',
-          '13:00',
-          '14:00',
-          '15:00',
-          '16:00',
-          '17:00',
-          '18:00',
-          '19:00',
-          '20:00',
-          '21:00',
-          '22:00',
-          '23:00',
-        ],
+        data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
         splitLine: {
           show: true,
           lineStyle: {

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
+<script lang="ts">
+  import { basicProps } from './props';
+</script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { basicProps } from './props';
 
   defineProps({
     ...basicProps,
@@ -26,20 +28,7 @@
       grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
       xAxis: {
         type: 'category',
-        data: [
-          '1月',
-          '2月',
-          '3月',
-          '4月',
-          '5月',
-          '6月',
-          '7月',
-          '8月',
-          '9月',
-          '10月',
-          '11月',
-          '12月',
-        ],
+        data: [...new Array(12)].map((_item, index) => `${index + 1}月`),
       },
       yAxis: {
         type: 'value',

src/views/dashboard/analysis/components/VisitRadar.vue

@@ -19,9 +19,9 @@
       default: '300px',
     },
   });
-
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
   watch(
     () => props.loading,
     () => {

src/views/dashboard/analysis/components/VisitSource.vue

@@ -20,6 +20,7 @@
   });
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
   watch(
     () => props.loading,
     () => {

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -4,19 +4,17 @@
       <a-button type="link" size="small">更多</a-button>
     </template>
 
-    <template v-for="item in items" :key="item">
-      <CardGrid class="!md:w-1/3 !w-full">
-        <span class="flex">
-          <Icon :icon="item.icon" :color="item.color" size="30" />
-          <span class="text-lg ml-4">{{ item.title }}</span>
-        </span>
-        <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
-        <div class="flex justify-between text-secondary">
-          <span>{{ item.group }}</span>
-          <span>{{ item.date }}</span>
-        </div>
-      </CardGrid>
-    </template>
+    <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full">
+      <span class="flex">
+        <Icon :icon="item.icon" :color="item.color" size="30" />
+        <span class="text-lg ml-4">{{ item.title }}</span>
+      </span>
+      <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
+      <div class="flex justify-between text-secondary">
+        <span>{{ item.group }}</span>
+        <span>{{ item.date }}</span>
+      </div>
+    </CardGrid>
   </Card>
 </template>
 <script lang="ts">

src/views/dashboard/workbench/components/QuickNav.vue

 <template>
   <Card title="快捷导航" v-bind="$attrs">
-    <template v-for="item in navItems" :key="item">
-      <CardGrid>
-        <span class="flex flex-col items-center">
-          <Icon :icon="item.icon" :color="item.color" size="20" />
-          <span class="text-md mt-2">{{ item.title }}</span>
-        </span>
-      </CardGrid>
-    </template>
+    <CardGrid v-for="item in navItems" :key="item">
+      <span class="flex flex-col items-center">
+        <Icon :icon="item.icon" :color="item.color" size="20" />
+        <span class="text-md mt-2">{{ item.title }}</span>
+      </span>
+    </CardGrid>
   </Card>
 </template>
 <script lang="ts" setup>