Commit dc4b05272f67b5ea8a85cac15b11e14a76c2c1d6

Authored by Carson
Committed by GitHub
1 parent b8411c93

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

Co-authored-by: huguangju <huguangju@wowkai.cn>
src/api/demo/table.ts
... ... @@ -14,6 +14,7 @@ export const demoListApi = (params: DemoParams) =&gt;
14 14 url: Api.DEMO_LIST,
15 15 params,
16 16 headers: {
  17 + // @ts-ignore
17 18 ignoreCancelToken: true,
18 19 },
19 20 });
... ...
src/components/Page/src/PageWrapper.vue
... ... @@ -5,7 +5,7 @@
5 5 :title="title"
6 6 v-bind="omit($attrs, 'class')"
7 7 ref="headerRef"
8   - v-if="content || $slots.headerContent || title || getHeaderSlots.length"
  8 + v-if="getShowHeader"
9 9 >
10 10 <template #default>
11 11 <template v-if="content">
... ... @@ -99,6 +99,10 @@
99 99 ];
100 100 });
101 101  
  102 + const getShowHeader = computed(
  103 + () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
  104 + );
  105 +
102 106 const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
103 107  
104 108 const getHeaderSlots = computed(() => {
... ... @@ -150,6 +154,7 @@
150 154 getClass,
151 155 getHeaderSlots,
152 156 prefixCls,
  157 + getShowHeader,
153 158 getShowFooter,
154 159 omit,
155 160 getContentClass,
... ...
src/hooks/event/useWindowSizeFn.ts
1   -import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
2   -import { useDebounceFn } from '@vueuse/core';
  1 +import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
3 2  
4 3 interface WindowSizeOptions {
5 4 once?: boolean;
... ...
src/utils/cache/storageCache.ts
1 1 import { cacheCipher } from '/@/settings/encryptionSetting';
2   -
3 2 import type { EncryptionParams } from '/@/utils/cipher';
4   -
5 3 import { AesEncryption } from '/@/utils/cipher';
6   -
7 4 import { isNullOrUnDef } from '/@/utils/is';
8 5  
9 6 export interface CreateStorageParams extends EncryptionParams {
... ... @@ -27,8 +24,8 @@ export const createStorage = ({
27 24 const encryption = new AesEncryption({ key, iv });
28 25  
29 26 /**
30   - *Cache class
31   - *Construction parameters can be passed into sessionStorage, localStorage,
  27 + * Cache class
  28 + * Construction parameters can be passed into sessionStorage, localStorage,
32 29 * @class Cache
33 30 * @example
34 31 */
... ... @@ -53,11 +50,10 @@ export const createStorage = ({
53 50 }
54 51  
55 52 /**
56   - *
57   - * Set cache
  53 + * Set cache
58 54 * @param {string} key
59 55 * @param {*} value
60   - * @expire Expiration time in seconds
  56 + * @param {*} expire Expiration time in seconds
61 57 * @memberof Cache
62 58 */
63 59 set(key: string, value: any, expire: number | null = timeout) {
... ... @@ -73,8 +69,9 @@ export const createStorage = ({
73 69 }
74 70  
75 71 /**
76   - *Read cache
  72 + * Read cache
77 73 * @param {string} key
  74 + * @param {*} def
78 75 * @memberof Cache
79 76 */
80 77 get(key: string, def: any = null): any {
... ...
src/utils/factory/createAsyncComponent.tsx
... ... @@ -3,7 +3,7 @@ import {
3 3 // FunctionalComponent, CSSProperties
4 4 } from 'vue';
5 5 import { Spin } from 'ant-design-vue';
6   -import { noop } from '/@/utils/index';
  6 +import { noop } from '/@/utils';
7 7  
8 8 // const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => {
9 9 // const style: CSSProperties = {
... ...
src/views/dashboard/analysis/components/GrowCard.vue
... ... @@ -5,15 +5,14 @@
5 5 size="small"
6 6 :loading="loading"
7 7 :title="item.title"
8   - class="md:w-1/4 w-full !md:mt-0 !mt-4"
9   - :class="[index + 1 < 4 && '!md:mr-4']"
10   - :canExpan="false"
  8 + class="md:w-1/4 w-full !md:mt-0"
  9 + :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
11 10 >
12 11 <template #extra>
13 12 <Tag :color="item.color">{{ item.action }}</Tag>
14 13 </template>
15 14  
16   - <div class="py-4 px-4 flex justify-between">
  15 + <div class="py-4 px-4 flex justify-between items-center">
17 16 <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
18 17 <Icon :icon="item.icon" :size="40" />
19 18 </div>
... ...
src/views/dashboard/analysis/components/SalesProductPie.vue
... ... @@ -22,6 +22,7 @@
22 22  
23 23 const chartRef = ref<HTMLDivElement | null>(null);
24 24 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  25 +
25 26 watch(
26 27 () => props.loading,
27 28 () => {
... ...
src/views/dashboard/analysis/components/VisitAnalysis.vue
1 1 <template>
2 2 <div ref="chartRef" :style="{ height, width }"></div>
3 3 </template>
  4 +<script lang="ts">
  5 + import { basicProps } from './props';
  6 +</script>
4 7 <script lang="ts" setup>
5 8 import { onMounted, ref, Ref } from 'vue';
6 9 import { useECharts } from '/@/hooks/web/useECharts';
7   - import { basicProps } from './props';
8 10  
9 11 defineProps({
10 12 ...basicProps,
... ... @@ -26,26 +28,7 @@
26 28 xAxis: {
27 29 type: 'category',
28 30 boundaryGap: false,
29   - data: [
30   - '6:00',
31   - '7:00',
32   - '8:00',
33   - '9:00',
34   - '10:00',
35   - '11:00',
36   - '12:00',
37   - '13:00',
38   - '14:00',
39   - '15:00',
40   - '16:00',
41   - '17:00',
42   - '18:00',
43   - '19:00',
44   - '20:00',
45   - '21:00',
46   - '22:00',
47   - '23:00',
48   - ],
  31 + data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
49 32 splitLine: {
50 33 show: true,
51 34 lineStyle: {
... ...
src/views/dashboard/analysis/components/VisitAnalysisBar.vue
1 1 <template>
2 2 <div ref="chartRef" :style="{ height, width }"></div>
3 3 </template>
  4 +<script lang="ts">
  5 + import { basicProps } from './props';
  6 +</script>
4 7 <script lang="ts" setup>
5 8 import { onMounted, ref, Ref } from 'vue';
6 9 import { useECharts } from '/@/hooks/web/useECharts';
7   - import { basicProps } from './props';
8 10  
9 11 defineProps({
10 12 ...basicProps,
... ... @@ -26,20 +28,7 @@
26 28 grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
27 29 xAxis: {
28 30 type: 'category',
29   - data: [
30   - '1月',
31   - '2月',
32   - '3月',
33   - '4月',
34   - '5月',
35   - '6月',
36   - '7月',
37   - '8月',
38   - '9月',
39   - '10月',
40   - '11月',
41   - '12月',
42   - ],
  31 + data: [...new Array(12)].map((_item, index) => `${index + 1}月`),
43 32 },
44 33 yAxis: {
45 34 type: 'value',
... ...
src/views/dashboard/analysis/components/VisitRadar.vue
... ... @@ -19,9 +19,9 @@
19 19 default: '300px',
20 20 },
21 21 });
22   -
23 22 const chartRef = ref<HTMLDivElement | null>(null);
24 23 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  24 +
25 25 watch(
26 26 () => props.loading,
27 27 () => {
... ...
src/views/dashboard/analysis/components/VisitSource.vue
... ... @@ -20,6 +20,7 @@
20 20 });
21 21 const chartRef = ref<HTMLDivElement | null>(null);
22 22 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  23 +
23 24 watch(
24 25 () => props.loading,
25 26 () => {
... ...
src/views/dashboard/workbench/components/ProjectCard.vue
... ... @@ -4,19 +4,17 @@
4 4 <a-button type="link" size="small">更多</a-button>
5 5 </template>
6 6  
7   - <template v-for="item in items" :key="item">
8   - <CardGrid class="!md:w-1/3 !w-full">
9   - <span class="flex">
10   - <Icon :icon="item.icon" :color="item.color" size="30" />
11   - <span class="text-lg ml-4">{{ item.title }}</span>
12   - </span>
13   - <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
14   - <div class="flex justify-between text-secondary">
15   - <span>{{ item.group }}</span>
16   - <span>{{ item.date }}</span>
17   - </div>
18   - </CardGrid>
19   - </template>
  7 + <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full">
  8 + <span class="flex">
  9 + <Icon :icon="item.icon" :color="item.color" size="30" />
  10 + <span class="text-lg ml-4">{{ item.title }}</span>
  11 + </span>
  12 + <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
  13 + <div class="flex justify-between text-secondary">
  14 + <span>{{ item.group }}</span>
  15 + <span>{{ item.date }}</span>
  16 + </div>
  17 + </CardGrid>
20 18 </Card>
21 19 </template>
22 20 <script lang="ts">
... ...
src/views/dashboard/workbench/components/QuickNav.vue
1 1 <template>
2 2 <Card title="快捷导航" v-bind="$attrs">
3   - <template v-for="item in navItems" :key="item">
4   - <CardGrid>
5   - <span class="flex flex-col items-center">
6   - <Icon :icon="item.icon" :color="item.color" size="20" />
7   - <span class="text-md mt-2">{{ item.title }}</span>
8   - </span>
9   - </CardGrid>
10   - </template>
  3 + <CardGrid v-for="item in navItems" :key="item">
  4 + <span class="flex flex-col items-center">
  5 + <Icon :icon="item.icon" :color="item.color" size="20" />
  6 + <span class="text-md mt-2">{{ item.title }}</span>
  7 + </span>
  8 + </CardGrid>
11 9 </Card>
12 10 </template>
13 11 <script lang="ts" setup>
... ...