feat: add internationalization support for the header

kirklin · Jul 27, 2023 · 9e7df78 · 9e7df78 · vercel · Jul 27, 2023
1 parent 9a403d3
commit 9e7df78
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 23 deletions.
diff --git a/apps/admin/src/layouts/header/components/CollapseButton.vue b/apps/admin/src/layouts/header/components/CollapseButton.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useMenuSetting } from "~/composables/setting/useMenuSetting";
 import IconButtonWithToolTip from "~/layouts/header/components/IconButtonWithToolTip.vue";
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <IconButtonWithToolTip tooltip-text="Toggle Collapsed" icon="i-tabler-menu-2" color="gray" @click="useMenuSetting().toggleCollapsed()" />
+  <IconButtonWithToolTip :tooltip-text="t('layouts.header.toggleCollapsed')" icon="i-tabler-menu-2" color="gray" @click="useMenuSetting().toggleCollapsed()" />
 </template>
diff --git a/apps/admin/src/layouts/header/components/FullScreenButton.vue b/apps/admin/src/layouts/header/components/FullScreenButton.vue
@@ -2,10 +2,11 @@
 import IconButtonWithToolTip from "~/layouts/header/components/IconButtonWithToolTip.vue";
 
 const { toggle: toggleFullScreen } = useFullscreen();
+const { t } = useI18n();
 </script>
 
 <template>
-  <IconButtonWithToolTip tooltip-text="Toggle FullScreen" icon="i-tabler-maximize" color="gray" @click="toggleFullScreen" />
+  <IconButtonWithToolTip :tooltip-text="t('layouts.header.toggleFullScreen')" icon="i-tabler-maximize" color="gray" @click="toggleFullScreen" />
 </template>
 
 <style scoped>

diff --git a/apps/admin/src/layouts/header/components/LocaleSwitcher.vue b/apps/admin/src/layouts/header/components/LocaleSwitcher.vue
@@ -22,7 +22,7 @@ const handleSelect = (key: string) => {
 
 <template>
   <NDropdown :options="options" trigger="click" :value="getLocale" @select="handleSelect">
-    <IconButtonWithToolTip tooltip-text="Switch Locale" icon="i-tabler-language" color="gray" />
+    <IconButtonWithToolTip :tooltip-text="t('layouts.header.switchLocale')" icon="i-tabler-language" color="gray" />
   </NDropdown>
 </template>
 

diff --git a/apps/admin/src/layouts/header/components/UserInfoButton.vue b/apps/admin/src/layouts/header/components/UserInfoButton.vue
@@ -3,22 +3,23 @@ import type { UserInfo } from "@celeris/types";
 import ToolTipper from "~/layouts/header/components/ToolTipper.vue";
 import { useUserStore } from "~/store/modules/user";
 
+const { t } = useI18n();
 const userStore = useUserStore();
 const userInfo = toRef<UserInfo | null>(userStore.getUserInfo);
 const dialog = useDialog();
 const message = useMessage();
 const handleLogout = () => {
   dialog.warning({
-    title: "警告",
-    content: "您确定要退出登录吗？",
-    positiveText: "退出登录",
-    negativeText: "取消",
+    title: t("layouts.logoutConfirmation.title"),
+    content: t("layouts.logoutConfirmation.content"),
+    positiveText: t("layouts.logoutConfirmation.positiveText"),
+    negativeText: t("layouts.logoutConfirmation.negativeText"),
     onPositiveClick: () => {
       userStore.logout();
-      message.success("退出登录成功");
+      message.success(t("layouts.logoutConfirmation.onPositiveClickMessage"));
     },
     onNegativeClick: () => {
-      message.info("取消退出登录");
+      message.info(t("layouts.logoutConfirmation.onNegativeClickMessage"));
     },
   });
 };
@@ -41,15 +42,15 @@ const handleLogout = () => {
       </ToolTipper>
     </template>
     <h4 class="mb-1">
-      <span class="font-bold">Hello, </span> <span class="">{{ userInfo?.fullName }}</span>
+      <span class="font-bold">{{ t('layouts.userInfo.greeting') }}, </span> <span class="">{{ userInfo?.fullName }} </span>
     </h4>
     <p>
-      角色列表: {{ userInfo?.roles }}
+      {{ t('layouts.userInfo.rolesList', { roles: userInfo?.roles }) }}
     </p>
     <template #footer>
       <div>
         <NButton block quaternary @click="handleLogout">
-          退出登录
+          {{ t('layouts.userInfo.logoutButton') }}
         </NButton>
       </div>
     </template>

diff --git a/apps/admin/src/layouts/setting/components/SettingButton.vue b/apps/admin/src/layouts/setting/components/SettingButton.vue
@@ -3,11 +3,12 @@ import { useHeaderSetting } from "~/composables";
 import IconButtonWithToolTip from "~/layouts/header/components/IconButtonWithToolTip.vue";
 
 const { toggleShouldShowSettingDrawer } = useHeaderSetting();
+const { t } = useI18n();
 </script>
 
 <template>
   <IconButtonWithToolTip
-    tooltip-text="Open Setting Drawer" icon="i-tabler-settings" color="gray"
+    :tooltip-text="t('layouts.header.openSettingDrawer')" icon="i-tabler-settings" color="gray"
     @click="toggleShouldShowSettingDrawer"
   />
 </template>

diff --git a/apps/admin/src/layouts/setting/components/SettingDrawer/components/DarkMode/index.vue b/apps/admin/src/layouts/setting/components/SettingDrawer/components/DarkMode/index.vue
@@ -5,14 +5,15 @@ import { SettingMenu } from "~/layouts/setting/components/SettingDrawer/componen
 defineOptions({ name: "DarkMode" });
 
 const { getDarkMode, setDarkMode, getFollowSystemTheme, setFollowSystemTheme } = useThemeSetting();
+const { t } = useI18n();
 </script>
 
 <template>
   <NDivider title-placement="center">
-    主题模式
+    {{ t('layouts.header.themeMode') }}
   </NDivider>
   <NSpace vertical size="large">
-    <SettingMenu label="深色主题">
+    <SettingMenu :label="t('layouts.header.darkMode')">
       <NSwitch :value="getDarkMode" @update:value="setDarkMode">
         <template #checked-icon>
           <span class="i-line-md-moon-rising-twotone-alt-loop" />
@@ -22,7 +23,7 @@ const { getDarkMode, setDarkMode, getFollowSystemTheme, setFollowSystemTheme } =
         </template>
       </NSwitch>
     </SettingMenu>
-    <SettingMenu label="跟随系统">
+    <SettingMenu :label="t('layouts.header.followSystem')">
       <NSwitch :value="getFollowSystemTheme" @update:value="setFollowSystemTheme">
         <template #checked-icon>
           <span class="i-material-symbols:brightness-auto-outline-rounded" />

diff --git a/apps/admin/src/layouts/setting/components/SettingDrawer/components/ThemeBackup/index.vue b/apps/admin/src/layouts/setting/components/SettingDrawer/components/ThemeBackup/index.vue
@@ -4,6 +4,7 @@ import { useDesignStore } from "~/store/modules/design";
 defineOptions({
   name: "ThemeBackup",
 });
+const { t } = useI18n();
 const message = useMessage();
 const designStore = useDesignStore();
 
@@ -15,25 +16,25 @@ function getSettingJson() {
 
 function handleResetSetting() {
   designStore.resetDesignState();
-  message.success("已重置配置，请重新拷贝！");
+  message.success(t("layouts.header.themeConfig.message.resetConfigSuccess"));
 }
 function handleCopySetting() {
-  message.success("复制成功！");
+  message.success(t("layouts.header.themeConfig.message.copyConfigSuccess"));
 }
 </script>
 
 <template>
   <NDivider title-placement="center">
-    主题配置
+    {{ t('layouts.header.themeConfig.title') }}
   </NDivider>
   <NSpace vertical>
     <div v-copy="dataClipboardText">
       <NButton type="primary" :block="true" @click="handleCopySetting">
-        拷贝当前配置
+        {{ t('layouts.header.themeConfig.copyConfigButton') }}
       </NButton>
     </div>
     <NButton type="warning" :block="true" @click="handleResetSetting">
-      重置当前配置
+      {{ t('layouts.header.themeConfig.resetConfigButton') }}
     </NButton>
   </NSpace>
 </template>

diff --git a/apps/admin/src/layouts/setting/components/SettingDrawer/components/ThemeColor/index.vue b/apps/admin/src/layouts/setting/components/SettingDrawer/components/ThemeColor/index.vue
@@ -3,11 +3,12 @@ import { presetPrimaryColors } from "@celeris/utils";
 import { ColorCheckbox } from "./components";
 
 const { getThemeColor, setThemeColor } = useThemeSetting();
+const { t } = useI18n();
 </script>
 
 <template>
   <NDivider title-placement="center">
-    系统主题
+    {{ t('layouts.header.systemTheme') }}
   </NDivider>
   <NGrid :cols="8" :x-gap="8" :y-gap="12">
     <NGridItem v-for="color in presetPrimaryColors" :key="color" class="flex-x-center">

diff --git a/apps/admin/src/layouts/setting/components/SettingDrawer/index.vue b/apps/admin/src/layouts/setting/components/SettingDrawer/index.vue
@@ -6,14 +6,15 @@ defineOptions({
   name: "SettingDrawer",
 });
 const { getShouldShowSettingDrawer, setShouldShowSettingDrawer } = useHeaderSetting();
+const { t } = useI18n();
 </script>
 
 <template>
   <NDrawer
     :show="getShouldShowSettingDrawer" display-directive="show" width="25%"
     @mask-click="setShouldShowSettingDrawer(false)"
   >
-    <NDrawerContent title="Project Setting" :native-scrollbar="false">
+    <NDrawerContent :title="t('layouts.header.projectSetting')" :native-scrollbar="false">
       <DarkMode />
       <ThemeColor />
       <ThemeBackup />

diff --git a/apps/admin/src/locales/en.json b/apps/admin/src/locales/en.json
@@ -1,4 +1,43 @@
 {
+  "layouts": {
+    "header": {
+      "toggleCollapsed": "Toggle Menu",
+      "toggleFullScreen": "Toggle Fullscreen",
+      "switchLocale": "Switch Language",
+      "settingDrawer": "Settings Drawer",
+      "openSettingDrawer": "Open Settings Drawer",
+      "projectSetting": "Project Settings",
+      "darkMode": "Dark Mode",
+      "followSystem": "Follow System",
+      "systemDefault": "System Default",
+      "systemTheme": "System Theme",
+      "themeMode": "Theme Mode",
+      "lightMode": "Light Mode",
+      "colorWeak": "Color Weak Mode",
+      "themeConfig": {
+        "title": "Theme Configuration",
+        "copyConfigButton": "Copy Current Configuration",
+        "resetConfigButton": "Reset Current Configuration",
+        "message": {
+          "copyConfigSuccess": "Configuration copied successfully!",
+          "resetConfigSuccess": "Configuration reset successfully!"
+        }
+      }
+    },
+    "userInfo": {
+      "greeting": "Hello",
+      "rolesList": "Role List: {roles}",
+      "logoutButton": "Logout"
+    },
+    "logoutConfirmation": {
+      "title": "Warning",
+      "content": "Are you sure you want to log out?",
+      "positiveText": "Logout",
+      "negativeText": "Cancel",
+      "onNegativeClickMessage": "Logout canceled",
+      "onPositiveClickMessage": "Logout successful"
+    }
+  },
   "page": {
     "login": {
       "title": "Login",

diff --git a/apps/admin/src/locales/zh.json b/apps/admin/src/locales/zh.json
@@ -1,4 +1,43 @@
 {
+  "layouts": {
+    "header": {
+      "toggleCollapsed": "折叠菜单",
+      "toggleFullScreen": "切换全屏",
+      "switchLocale": "切换语言",
+      "settingDrawer": "设置抽屉",
+      "openSettingDrawer": "打开设置抽屉",
+      "projectSetting": "项目设置",
+      "darkMode": "深色主题",
+      "followSystem": "跟随系统",
+      "systemDefault": "系统默认",
+      "systemTheme": "系统主题",
+      "themeMode": "主题模式",
+      "lightMode": "浅色主题",
+      "colorWeak": "色弱模式",
+      "themeConfig": {
+        "title": "主题配置",
+        "copyConfigButton": "拷贝当前配置",
+        "resetConfigButton": "重置当前配置",
+        "message": {
+          "copyConfigSuccess": "拷贝配置成功！",
+          "resetConfigSuccess": "重置配置成功！"
+        }
+      }
+    },
+    "userInfo": {
+      "greeting": "你好",
+      "rolesList": "角色列表：{roles}",
+      "logoutButton": "退出登录"
+    },
+    "logoutConfirmation": {
+      "title": "警告",
+      "content": "您确定要退出登录吗？",
+      "positiveText": "退出登录",
+      "negativeText": "取消",
+      "onNegativeClickMessage": "取消退出登录",
+      "onPositiveClickMessage": "退出登录成功"
+    }
+  },
   "page": {
     "login": {
       "title": "登录",