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,6 +14,7 @@ export const demoListApi = (params: DemoParams) =&gt;
14 url: Api.DEMO_LIST, 14 url: Api.DEMO_LIST,
15 params, 15 params,
16 headers: { 16 headers: {
  17 + // @ts-ignore
17 ignoreCancelToken: true, 18 ignoreCancelToken: true,
18 }, 19 },
19 }); 20 });
src/components/Page/src/PageWrapper.vue
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 :title="title" 5 :title="title"
6 v-bind="omit($attrs, 'class')" 6 v-bind="omit($attrs, 'class')"
7 ref="headerRef" 7 ref="headerRef"
8 - v-if="content || $slots.headerContent || title || getHeaderSlots.length" 8 + v-if="getShowHeader"
9 > 9 >
10 <template #default> 10 <template #default>
11 <template v-if="content"> 11 <template v-if="content">
@@ -99,6 +99,10 @@ @@ -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 const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter); 106 const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
103 107
104 const getHeaderSlots = computed(() => { 108 const getHeaderSlots = computed(() => {
@@ -150,6 +154,7 @@ @@ -150,6 +154,7 @@
150 getClass, 154 getClass,
151 getHeaderSlots, 155 getHeaderSlots,
152 prefixCls, 156 prefixCls,
  157 + getShowHeader,
153 getShowFooter, 158 getShowFooter,
154 omit, 159 omit,
155 getContentClass, 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 interface WindowSizeOptions { 3 interface WindowSizeOptions {
5 once?: boolean; 4 once?: boolean;
src/utils/cache/storageCache.ts
1 import { cacheCipher } from '/@/settings/encryptionSetting'; 1 import { cacheCipher } from '/@/settings/encryptionSetting';
2 -  
3 import type { EncryptionParams } from '/@/utils/cipher'; 2 import type { EncryptionParams } from '/@/utils/cipher';
4 -  
5 import { AesEncryption } from '/@/utils/cipher'; 3 import { AesEncryption } from '/@/utils/cipher';
6 -  
7 import { isNullOrUnDef } from '/@/utils/is'; 4 import { isNullOrUnDef } from '/@/utils/is';
8 5
9 export interface CreateStorageParams extends EncryptionParams { 6 export interface CreateStorageParams extends EncryptionParams {
@@ -27,8 +24,8 @@ export const createStorage = ({ @@ -27,8 +24,8 @@ export const createStorage = ({
27 const encryption = new AesEncryption({ key, iv }); 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 * @class Cache 29 * @class Cache
33 * @example 30 * @example
34 */ 31 */
@@ -53,11 +50,10 @@ export const createStorage = ({ @@ -53,11 +50,10 @@ export const createStorage = ({
53 } 50 }
54 51
55 /** 52 /**
56 - *  
57 - * Set cache 53 + * Set cache
58 * @param {string} key 54 * @param {string} key
59 * @param {*} value 55 * @param {*} value
60 - * @expire Expiration time in seconds 56 + * @param {*} expire Expiration time in seconds
61 * @memberof Cache 57 * @memberof Cache
62 */ 58 */
63 set(key: string, value: any, expire: number | null = timeout) { 59 set(key: string, value: any, expire: number | null = timeout) {
@@ -73,8 +69,9 @@ export const createStorage = ({ @@ -73,8 +69,9 @@ export const createStorage = ({
73 } 69 }
74 70
75 /** 71 /**
76 - *Read cache 72 + * Read cache
77 * @param {string} key 73 * @param {string} key
  74 + * @param {*} def
78 * @memberof Cache 75 * @memberof Cache
79 */ 76 */
80 get(key: string, def: any = null): any { 77 get(key: string, def: any = null): any {
src/utils/factory/createAsyncComponent.tsx
@@ -3,7 +3,7 @@ import { @@ -3,7 +3,7 @@ import {
3 // FunctionalComponent, CSSProperties 3 // FunctionalComponent, CSSProperties
4 } from 'vue'; 4 } from 'vue';
5 import { Spin } from 'ant-design-vue'; 5 import { Spin } from 'ant-design-vue';
6 -import { noop } from '/@/utils/index'; 6 +import { noop } from '/@/utils';
7 7
8 // const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => { 8 // const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => {
9 // const style: CSSProperties = { 9 // const style: CSSProperties = {
src/views/dashboard/analysis/components/GrowCard.vue
@@ -5,15 +5,14 @@ @@ -5,15 +5,14 @@
5 size="small" 5 size="small"
6 :loading="loading" 6 :loading="loading"
7 :title="item.title" 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 <template #extra> 11 <template #extra>
13 <Tag :color="item.color">{{ item.action }}</Tag> 12 <Tag :color="item.color">{{ item.action }}</Tag>
14 </template> 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 <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" /> 16 <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
18 <Icon :icon="item.icon" :size="40" /> 17 <Icon :icon="item.icon" :size="40" />
19 </div> 18 </div>
src/views/dashboard/analysis/components/SalesProductPie.vue
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 22
23 const chartRef = ref<HTMLDivElement | null>(null); 23 const chartRef = ref<HTMLDivElement | null>(null);
24 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); 24 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  25 +
25 watch( 26 watch(
26 () => props.loading, 27 () => props.loading,
27 () => { 28 () => {
src/views/dashboard/analysis/components/VisitAnalysis.vue
1 <template> 1 <template>
2 <div ref="chartRef" :style="{ height, width }"></div> 2 <div ref="chartRef" :style="{ height, width }"></div>
3 </template> 3 </template>
  4 +<script lang="ts">
  5 + import { basicProps } from './props';
  6 +</script>
4 <script lang="ts" setup> 7 <script lang="ts" setup>
5 import { onMounted, ref, Ref } from 'vue'; 8 import { onMounted, ref, Ref } from 'vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 9 import { useECharts } from '/@/hooks/web/useECharts';
7 - import { basicProps } from './props';  
8 10
9 defineProps({ 11 defineProps({
10 ...basicProps, 12 ...basicProps,
@@ -26,26 +28,7 @@ @@ -26,26 +28,7 @@
26 xAxis: { 28 xAxis: {
27 type: 'category', 29 type: 'category',
28 boundaryGap: false, 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 splitLine: { 32 splitLine: {
50 show: true, 33 show: true,
51 lineStyle: { 34 lineStyle: {
src/views/dashboard/analysis/components/VisitAnalysisBar.vue
1 <template> 1 <template>
2 <div ref="chartRef" :style="{ height, width }"></div> 2 <div ref="chartRef" :style="{ height, width }"></div>
3 </template> 3 </template>
  4 +<script lang="ts">
  5 + import { basicProps } from './props';
  6 +</script>
4 <script lang="ts" setup> 7 <script lang="ts" setup>
5 import { onMounted, ref, Ref } from 'vue'; 8 import { onMounted, ref, Ref } from 'vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 9 import { useECharts } from '/@/hooks/web/useECharts';
7 - import { basicProps } from './props';  
8 10
9 defineProps({ 11 defineProps({
10 ...basicProps, 12 ...basicProps,
@@ -26,20 +28,7 @@ @@ -26,20 +28,7 @@
26 grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, 28 grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
27 xAxis: { 29 xAxis: {
28 type: 'category', 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 yAxis: { 33 yAxis: {
45 type: 'value', 34 type: 'value',
src/views/dashboard/analysis/components/VisitRadar.vue
@@ -19,9 +19,9 @@ @@ -19,9 +19,9 @@
19 default: '300px', 19 default: '300px',
20 }, 20 },
21 }); 21 });
22 -  
23 const chartRef = ref<HTMLDivElement | null>(null); 22 const chartRef = ref<HTMLDivElement | null>(null);
24 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); 23 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  24 +
25 watch( 25 watch(
26 () => props.loading, 26 () => props.loading,
27 () => { 27 () => {
src/views/dashboard/analysis/components/VisitSource.vue
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 }); 20 });
21 const chartRef = ref<HTMLDivElement | null>(null); 21 const chartRef = ref<HTMLDivElement | null>(null);
22 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); 22 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  23 +
23 watch( 24 watch(
24 () => props.loading, 25 () => props.loading,
25 () => { 26 () => {
src/views/dashboard/workbench/components/ProjectCard.vue
@@ -4,19 +4,17 @@ @@ -4,19 +4,17 @@
4 <a-button type="link" size="small">更多</a-button> 4 <a-button type="link" size="small">更多</a-button>
5 </template> 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 </Card> 18 </Card>
21 </template> 19 </template>
22 <script lang="ts"> 20 <script lang="ts">
src/views/dashboard/workbench/components/QuickNav.vue
1 <template> 1 <template>
2 <Card title="快捷导航" v-bind="$attrs"> 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 </Card> 9 </Card>
12 </template> 10 </template>
13 <script lang="ts" setup> 11 <script lang="ts" setup>