From ae600624052002ae5c005c53dc688ad369c24152 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Mon, 29 Apr 2024 17:11:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BD=E9=99=85=E5=8C=96=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/modules/enUS.ts                      |  14 +-
 src/lang/modules/zhCN.ts                      |  14 +-
 .../Header/components/Notice/index.vue        | 142 +++++++++---------
 src/layout/components/Header/index.vue        |  26 +++-
 src/views/home/home.vue                       |  19 +--
 5 files changed, 122 insertions(+), 93 deletions(-)

diff --git a/src/lang/modules/enUS.ts b/src/lang/modules/enUS.ts
index cd4d26c..6975735 100644
--- a/src/lang/modules/enUS.ts
+++ b/src/lang/modules/enUS.ts
@@ -28,6 +28,18 @@ export default {
     ["close-right-side"]: "close right side",
     ["close-other"]: "close other",
     ["close-all"]: "close all",
-    ["internationalization"]: "internationalization"
+    ["internationalization"]: "internationalization",
+    ["switch-to-night-mode"]: "switch to night mode",
+    ["switch-to-daytime-mode"]: "switch to daytime mode",
+    ["full-screen"]: "full screen",
+    ["system-settings"]: "system settings",
+    ["theme-settings"]: "theme settings",
+    ["personal-information"]: "personal information",
+    ["change-password"]: "change password",
+    ["project-address"]: "project address",
+    ["logout"]: "logout",
+    ["notice"]: "Notice",
+    ["message"]: "Message",
+    ["backlog"]: "Backlog"
   }
 };
diff --git a/src/lang/modules/zhCN.ts b/src/lang/modules/zhCN.ts
index 7d0577e..528dd4e 100644
--- a/src/lang/modules/zhCN.ts
+++ b/src/lang/modules/zhCN.ts
@@ -28,6 +28,18 @@ export default {
     ["close-right-side"]: "关闭右侧",
     ["close-other"]: "关闭其它",
     ["close-all"]: "关闭全部",
-    ["internationalization"]: "国际化"
+    ["internationalization"]: "国际化",
+    ["switch-to-night-mode"]: "切换黑夜模式",
+    ["switch-to-daytime-mode"]: "切换白天模式",
+    ["full-screen"]: "全屏",
+    ["system-settings"]: "系统设置",
+    ["theme-settings"]: "主题设置",
+    ["personal-information"]: "个人信息",
+    ["change-password"]: "修改密码",
+    ["project-address"]: "项目地址",
+    ["logout"]: "退出登录",
+    ["notice"]: "通知",
+    ["message"]: "消息",
+    ["backlog"]: "待办"
   }
 };
diff --git a/src/layout/components/Header/components/Notice/index.vue b/src/layout/components/Header/components/Notice/index.vue
index d472299..37038ac 100644
--- a/src/layout/components/Header/components/Notice/index.vue
+++ b/src/layout/components/Header/components/Notice/index.vue
@@ -1,71 +1,71 @@
-<template>
-  <a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab">
-    <a-tab-pane v-for="item in noticeData" :key="item.id">
-      <template #title>{{ `${item.title}(${item.data.length})` }}</template>
-      <div class="notice" v-for="content in item.data" :key="content.id">
-        <a-image width="36" height="36" fit="cover" :src="myImage" class="notice_img" />
-        <div class="content margin-left-text">
-          <div>
-            <span class="nickname">{{ content.nickname }}</span>
-            <span class="time margin-left-text">{{ content.time }}</span>
-          </div>
-          <div class="context">{{ content.content }}</div>
-        </div>
-      </div>
-      <a-empty v-if="item.data.length === 0" />
-    </a-tab-pane>
-  </a-tabs>
-</template>
-
-<script setup lang="ts">
-import myImage from "@/assets/img/my-image.jpg";
-const data = ref([
-  { id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
-  { id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" },
-  { id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
-]);
-const noticeData = ref([
-  {
-    id: 1,
-    title: "通知",
-    data: data.value
-  },
-  { id: 2, title: "消息", data: [] },
-  { id: 3, title: "代办", data: [] }
-]);
-const current = ref<number>(1);
-const onTab = (key: number) => {
-  current.value = key;
-};
-</script>
-
-<style lang="scss" scoped>
-.notice {
-  margin-bottom: $margin;
-  display: flex;
-  align-items: center;
-  .notice_img {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-  }
-  .content {
-    width: 200px;
-    .nickname {
-      font-size: $font-size-body-3;
-      color: $color-text-2;
-    }
-    .time {
-      font-size: $font-size-body-1;
-      color: $color-text-3;
-    }
-    .context {
-      font-size: $font-size-body-3;
-    }
-  }
-}
-// 解决tabs宽度异常的bug
-:deep(.arco-tabs-content .arco-tabs-content-list) {
-  display: unset;
-}
-</style>
+<template>
+  <a-tabs :default-active-key="current" :active-key="current" @tab-click="onTab">
+    <a-tab-pane v-for="item in noticeData" :key="item.id">
+      <template #title>{{ `${$t(`language.${item.title}`)}(${item.data.length})` }}</template>
+      <div class="notice" v-for="content in item.data" :key="content.id">
+        <a-image width="36" height="36" fit="cover" :src="myImage" class="notice_img" />
+        <div class="content margin-left-text">
+          <div>
+            <span class="nickname">{{ content.nickname }}</span>
+            <span class="time margin-left-text">{{ content.time }}</span>
+          </div>
+          <div class="context">{{ content.content }}</div>
+        </div>
+      </div>
+      <a-empty v-if="item.data.length === 0" />
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script setup lang="ts">
+import myImage from "@/assets/img/my-image.jpg";
+const data = ref([
+  { id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
+  { id: 120, img: "", time: "1小时前", nickname: "捷克大力士", content: "与你握手问好" },
+  { id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
+]);
+const noticeData = ref([
+  {
+    id: 1,
+    title: "notice",
+    data: data.value
+  },
+  { id: 2, title: "message", data: [] },
+  { id: 3, title: "backlog", data: [] }
+]);
+const current = ref<number>(1);
+const onTab = (key: number) => {
+  current.value = key;
+};
+</script>
+
+<style lang="scss" scoped>
+.notice {
+  margin-bottom: $margin;
+  display: flex;
+  align-items: center;
+  .notice_img {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+  }
+  .content {
+    width: 200px;
+    .nickname {
+      font-size: $font-size-body-3;
+      color: $color-text-2;
+    }
+    .time {
+      font-size: $font-size-body-1;
+      color: $color-text-3;
+    }
+    .context {
+      font-size: $font-size-body-3;
+    }
+  }
+}
+// 解决tabs宽度异常的bug
+:deep(.arco-tabs-content .arco-tabs-content-list) {
+  display: unset;
+}
+</style>
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index ed52cc4..d48be50 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -14,6 +14,7 @@
       </div>
     </div>
     <div class="header_setting">
+      <!-- 国际化 -->
       <a-dropdown trigger="hover" @select="onLange">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
@@ -25,13 +26,15 @@
           <a-doption :disabled="language === 'en-US'">{{ $t(`language.en-US`) }}</a-doption>
         </template>
       </a-dropdown>
-      <a-tooltip content="切换黑夜模式">
+      <!-- 切换黑夜模式 -->
+      <a-tooltip :content="$t(`language.switch-to-night-mode`)">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
             <icon-sun-fill :size="18" />
           </template>
         </a-button>
       </a-tooltip>
+      <!-- 通知 -->
       <a-popover position="bottom" trigger="click">
         <a-button size="mini" type="text" class="icon_btn notice">
           <template #icon>
@@ -40,21 +43,24 @@
         </a-button>
         <template #content><Notice /></template>
       </a-popover>
-      <a-tooltip content="全屏">
+      <!-- 全屏 -->
+      <a-tooltip :content="$t(`language.full-screen`)">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
             <icon-fullscreen :size="18" />
           </template>
         </a-button>
       </a-tooltip>
-      <a-tooltip content="系统设置">
+      <!-- 系统设置 -->
+      <a-tooltip :content="$t(`language.system-settings`)">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
             <icon-settings :size="18" />
           </template>
         </a-button>
       </a-tooltip>
-      <a-tooltip content="主题设置">
+      <!-- 主题设置 -->
+      <a-tooltip :content="$t(`language.theme-settings`)">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
             <icon-skin :size="18" />
@@ -71,29 +77,33 @@
           </div>
         </div>
         <template #content>
+          <!-- 个人中心 -->
           <a-doption>
             <template #default>
               <SvgIcon :name="'user'" :size="18" />
-              <span class="margin-left-text">个人信息</span>
+              <span class="margin-left-text">{{ $t(`language.personal-information`) }}</span>
             </template>
           </a-doption>
+          <!-- 修改密码 -->
           <a-doption>
             <template #default>
               <SvgIcon :name="'lock-pwd'" :size="18" />
-              <span class="margin-left-text">修改密码</span>
+              <span class="margin-left-text">{{ $t(`language.change-password`) }}</span>
             </template>
           </a-doption>
+          <!-- 项目地址 -->
           <a-doption>
             <template #default>
               <SvgIcon :name="'gitee'" :size="18" />
-              <span class="margin-left-text">项目地址</span>
+              <span class="margin-left-text">{{ $t(`language.project-address`) }}</span>
             </template>
           </a-doption>
           <a-divider margin="0" />
+          <!-- 退出登录 -->
           <a-doption @click="logOut">
             <template #default>
               <SvgIcon :name="'exit'" :size="18" />
-              <span class="margin-left-text">退出登录</span>
+              <span class="margin-left-text">{{ $t(`language.logout`) }}</span>
             </template>
           </a-doption>
         </template>
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index ac00dac..d0273e6 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -1,12 +1,7 @@
-<template>
-  <div>
-    首页
-    <img :src="tom" />
-  </div>
-</template>
-
-<script setup>
-import tom from "@/assets/img/tom.jpg";
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div>首页</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>