Commit a45208673ade8ba595ea25fb4ab20b2e89b5278e

Authored by Lovell Liu
Committed by GitHub
1 parent 39188780

Fix/workbech page (#2264)

* fix: fix display issues when reloading page

* feat: change a fit color for js-logo icon

* fix: prevent layout chaos because of text wrap
src/views/dashboard/workbench/components/ProjectCard.vue
... ... @@ -4,7 +4,7 @@
4 4 <a-button type="link" size="small">更多</a-button>
5 5 </template>
6 6  
7   - <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full">
  7 + <CardGrid v-for="item in items" :key="item.title" class="!md:w-1/3 !w-full">
8 8 <span class="flex">
9 9 <Icon :icon="item.icon" :color="item.color" size="30" />
10 10 <span class="text-lg ml-4">{{ item.title }}</span>
... ... @@ -19,12 +19,12 @@
19 19 </template>
20 20 <script lang="ts">
21 21 import { defineComponent } from 'vue';
22   - import { Card } from 'ant-design-vue';
  22 + import { Card, CardGrid } from 'ant-design-vue';
23 23 import { Icon } from '/@/components/Icon';
24 24 import { groupItems } from './data';
25 25  
26 26 export default defineComponent({
27   - components: { Card, CardGrid: Card.Grid, Icon },
  27 + components: { Card, CardGrid, Icon },
28 28 setup() {
29 29 return { items: groupItems };
30 30 },
... ...
src/views/dashboard/workbench/components/QuickNav.vue
1 1 <template>
2   - <Card title="快捷导航" v-bind="$attrs">
3   - <CardGrid v-for="item in navItems" :key="item">
  2 + <Card title="快捷导航">
  3 + <CardGrid v-for="item in navItems" :key="item.title">
4 4 <span class="flex flex-col items-center">
5 5 <Icon :icon="item.icon" :color="item.color" size="20" />
6   - <span class="text-md mt-2">{{ item.title }}</span>
  6 + <span class="text-md mt-2 truncate">{{ item.title }}</span>
7 7 </span>
8 8 </CardGrid>
9 9 </Card>
10 10 </template>
11 11 <script lang="ts" setup>
12   - import { Card } from 'ant-design-vue';
  12 + import { Card, CardGrid } from 'ant-design-vue';
13 13 import { navItems } from './data';
14 14 import { Icon } from '/@/components/Icon';
15   -
16   - const CardGrid = Card.Grid;
17 15 </script>
... ...
src/views/dashboard/workbench/components/data.ts
... ... @@ -148,7 +148,7 @@ export const groupItems: GroupItem[] = [
148 148 {
149 149 title: 'Js',
150 150 icon: 'ion:logo-javascript',
151   - color: '#4daf1bc9',
  151 + color: '#EBD94E',
152 152 desc: '路是走出来的,而不是空想出来的。',
153 153 group: '架构组',
154 154 date: '2021-04-01',
... ...