Commit dc4b05272f67b5ea8a85cac15b11e14a76c2c1d6
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>
Showing
13 changed files
with
46 additions
and
75 deletions
src/api/demo/table.ts
@@ -14,6 +14,7 @@ export const demoListApi = (params: DemoParams) => | @@ -14,6 +14,7 @@ export const demoListApi = (params: DemoParams) => | ||
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
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> |