update navigator

ZhiShuYun · Dec 30, 2023 · 1afc8c5 · 1afc8c5
1 parent 14541a4
commit 1afc8c5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
@@ -2,31 +2,36 @@
   <div class="sidebar">
     <div class="top">
       <div v-for="(link, linkIndex) in links" :key="linkIndex" class="link">
-        <el-button
-          :class="{
+        <el-tooltip effect="dark" :content="link.displayName" placement="right">
+          <el-button
+            :class="{
             button: true,
             active: link.routes.includes($route.name as string)
           }"
-          @click="$router.push(link.route)"
-        >
-          <font-awesome-icon :icon="link.icon" />
-        </el-button>
+            @click="$router.push(link.route)"
+          >
+            <font-awesome-icon :icon="link.icon" />
+            <!-- <img :src="link.image" class="image" :alt="link.icon" /> -->
+          </el-button>
+        </el-tooltip>
       </div>
     </div>
     <div class="middle"></div>
     <div class="bottom">
       <div class="link">
-        <el-button class="button" @click="onLogout">
-          <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
-        </el-button>
+        <el-tooltip effect="dark" :content="$t('common.nav.logOut')" placement="right">
+          <el-button class="button" @click="onLogout">
+            <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
+          </el-button>
+        </el-tooltip>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElButton } from 'element-plus';
+import { ElButton, ElTooltip } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   ROUTE_AUTH_LOGIN,
@@ -41,6 +46,7 @@ export default defineComponent({
   name: 'Navigator',
   components: {
     ElButton,
+    ElTooltip,
     FontAwesomeIcon
   },
   data() {
@@ -50,14 +56,18 @@ export default defineComponent({
           route: {
             name: ROUTE_CHAT_INDEX
           },
+          displayName: this.$t('common.nav.chat'),
           icon: 'fa-regular fa-comment',
+          image: 'https://cdn.zhishuyun.com/9ad12c99b2.png/thumb_100x100',
           routes: [ROUTE_CHAT_INDEX, ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW]
         },
         {
           route: {
             name: ROUTE_MIDJOURNEY_INDEX
           },
+          displayName: this.$t('common.nav.midjourney'),
           icon: 'fa-solid fa-palette',
+          image: 'https://cdn.zhishuyun.com/83ee211091.png/thumb_100x100',
           routes: [ROUTE_MIDJOURNEY_INDEX, ROUTE_MIDJOURNEY_HISTORY]
         }
       ]

diff --git a/src/i18n/zh/common/nav.ts b/src/i18n/zh/common/nav.ts
@@ -1,4 +1,6 @@
 export default {
+  chat: '问答',
+  midjourney: 'Midjourney',
   editor: '编辑器',
   setting: '设置',
   home: '首页',