From a45208673ade8ba595ea25fb4ab20b2e89b5278e Mon Sep 17 00:00:00 2001
From: Lovell Liu <64905610+lovelliu@users.noreply.github.com>
Date: Wed, 12 Oct 2022 16:17:42 +0800
Subject: [PATCH] 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
---
 .../dashboard/workbench/components/ProjectCard.vue     |  6 +++---
 src/views/dashboard/workbench/components/QuickNav.vue  | 10 ++++------
 src/views/dashboard/workbench/components/data.ts       |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/workbench/components/ProjectCard.vue b/src/views/dashboard/workbench/components/ProjectCard.vue
index 0c4990bf..24327336 100644
--- a/src/views/dashboard/workbench/components/ProjectCard.vue
+++ b/src/views/dashboard/workbench/components/ProjectCard.vue
@@ -4,7 +4,7 @@
       <a-button type="link" size="small">更多</a-button>
     </template>
 
-    <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full">
+    <CardGrid v-for="item in items" :key="item.title" class="!md:w-1/3 !w-full">
       <span class="flex">
         <Icon :icon="item.icon" :color="item.color" size="30" />
         <span class="text-lg ml-4">{{ item.title }}</span>
@@ -19,12 +19,12 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
+  import { Card, CardGrid } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
   import { groupItems } from './data';
 
   export default defineComponent({
-    components: { Card, CardGrid: Card.Grid, Icon },
+    components: { Card, CardGrid, Icon },
     setup() {
       return { items: groupItems };
     },
diff --git a/src/views/dashboard/workbench/components/QuickNav.vue b/src/views/dashboard/workbench/components/QuickNav.vue
index e1297727..d9111102 100644
--- a/src/views/dashboard/workbench/components/QuickNav.vue
+++ b/src/views/dashboard/workbench/components/QuickNav.vue
@@ -1,17 +1,15 @@
 <template>
-  <Card title="快捷导航" v-bind="$attrs">
-    <CardGrid v-for="item in navItems" :key="item">
+  <Card title="快捷导航">
+    <CardGrid v-for="item in navItems" :key="item.title">
       <span class="flex flex-col items-center">
         <Icon :icon="item.icon" :color="item.color" size="20" />
-        <span class="text-md mt-2">{{ item.title }}</span>
+        <span class="text-md mt-2 truncate">{{ item.title }}</span>
       </span>
     </CardGrid>
   </Card>
 </template>
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
+  import { Card, CardGrid } from 'ant-design-vue';
   import { navItems } from './data';
   import { Icon } from '/@/components/Icon';
-
-  const CardGrid = Card.Grid;
 </script>
diff --git a/src/views/dashboard/workbench/components/data.ts b/src/views/dashboard/workbench/components/data.ts
index c7172c3c..3bf43328 100644
--- a/src/views/dashboard/workbench/components/data.ts
+++ b/src/views/dashboard/workbench/components/data.ts
@@ -148,7 +148,7 @@ export const groupItems: GroupItem[] = [
   {
     title: 'Js',
     icon: 'ion:logo-javascript',
-    color: '#4daf1bc9',
+    color: '#EBD94E',
     desc: '路是走出来的，而不是空想出来的。',
     group: '架构组',
     date: '2021-04-01',