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
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
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
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
src/views/dashboard/analysis/components/VisitSource.vue
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> |
... | ... |