From 4c53ffa3caaa9d94d707e92ab614db60453100fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= <i@mikuhl.cn>
Date: Tue, 3 Sep 2024 03:06:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(layouts):=20=E7=A7=BB=E9=99=A4i18n?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Header.vue        | 35 +++-------------
 src/layouts/components/LayoutContent.vue | 17 +++-----
 src/layouts/components/MenuContent.vue   | 14 ++-----
 src/layouts/components/Notice.vue        | 23 ++++------
 src/layouts/components/Search.vue        |  2 +-
 src/layouts/setting.vue                  | 53 +++++++++---------------
 6 files changed, 43 insertions(+), 101 deletions(-)

diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index ad36bf3..768d296 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -23,38 +23,24 @@
           <!-- 全局通知 -->
           <notice />
 
-          <t-tooltip placement="bottom" :content="$t('layout.header.code')">
+          <t-tooltip placement="bottom" content="代码仓库">
             <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
               <t-icon name="logo-github" />
             </t-button>
           </t-tooltip>
-          <t-tooltip placement="bottom" :content="$t('layout.header.help')">
+          <t-tooltip placement="bottom" content="帮助文档">
             <t-button theme="default" shape="square" variant="text" @click="navToHelper">
               <t-icon name="help-circle" />
             </t-button>
           </t-tooltip>
-          <t-dropdown trigger="click">
-            <t-button theme="default" shape="square" variant="text">
-              <translate-icon />
-            </t-button>
-            <t-dropdown-menu>
-              <t-dropdown-item
-                v-for="(lang, index) in langList"
-                :key="index"
-                :value="lang.value"
-                @click="(options) => changeLang(options.value as string)"
-                >{{ lang.content }}</t-dropdown-item
-              ></t-dropdown-menu
-            >
-          </t-dropdown>
           <t-dropdown :min-column-width="120" trigger="click">
             <template #dropdown>
               <t-dropdown-menu>
                 <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
-                  <user-circle-icon />{{ $t('layout.header.user') }}
+                  <user-circle-icon />个人中心
                 </t-dropdown-item>
                 <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
-                  <poweroff-icon />{{ $t('layout.header.signOut') }}
+                  <poweroff-icon />退出登录
                 </t-dropdown-item>
               </t-dropdown-menu>
             </template>
@@ -66,7 +52,7 @@
               <template #suffix><chevron-down-icon /></template>
             </t-button>
           </t-dropdown>
-          <t-tooltip placement="bottom" :content="$t('layout.header.setting')">
+          <t-tooltip placement="bottom" content="系统设置">
             <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
               <setting-icon />
             </t-button>
@@ -78,15 +64,13 @@
 </template>
 
 <script setup lang="ts">
-import { ChevronDownIcon, PoweroffIcon, SettingIcon, TranslateIcon, UserCircleIcon } from 'tdesign-icons-vue-next';
+import { ChevronDownIcon, PoweroffIcon, SettingIcon, UserCircleIcon } from 'tdesign-icons-vue-next';
 import type { PropType } from 'vue';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import LogoFull from '@/assets/assets-logo-full.svg?component';
 import { prefix } from '@/config/global';
-import { langList } from '@/locales/index';
-import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import { useSettingStore, useUserStore } from '@/store';
 import type { MenuRoute, ModeType } from '@/types/interface';
@@ -152,13 +136,6 @@ const menuCls = computed(() => {
   ];
 });
 const menuTheme = computed(() => props.theme as ModeType);
-
-// 切换语言
-const { changeLocale } = useLocale();
-const changeLang = (lang: string) => {
-  changeLocale(lang);
-};
-
 const changeCollapsed = () => {
   settingStore.updateConfig({
     isSidebarCompact: !settingStore.isSidebarCompact,
diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index f6d1db3..c784c6b 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/src/layouts/components/LayoutContent.vue
@@ -30,29 +30,29 @@
             }"
           >
             <template v-if="!routeItem.isHome">
-              {{ renderTitle(routeItem.title) }}
+              {{ routeItem.title }}
             </template>
             <t-icon v-else name="home" />
             <template #dropdown>
               <t-dropdown-menu>
                 <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
                   <t-icon name="refresh" />
-                  {{ $t('layout.tagTabs.refresh') }}
+                  刷新
                 </t-dropdown-item>
                 <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
                   <t-icon name="arrow-left" />
-                  {{ $t('layout.tagTabs.closeLeft') }}
+                  关闭左侧
                 </t-dropdown-item>
                 <t-dropdown-item
                   v-if="index < tabRouters.length - 1"
                   @click="() => handleCloseBehind(routeItem.path, index)"
                 >
                   <t-icon name="arrow-right" />
-                  {{ $t('layout.tagTabs.closeRight') }}
+                  关闭右侧
                 </t-dropdown-item>
                 <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
                   <t-icon name="close-circle" />
-                  {{ $t('layout.tagTabs.closeOther') }}
+                  关闭其它
                 </t-dropdown-item>
               </t-dropdown-menu>
             </template>
@@ -76,7 +76,6 @@ import { computed, nextTick, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { prefix } from '@/config/global';
-import { useLocale } from '@/locales/useLocale';
 import { useSettingStore, useTabsRouterStore } from '@/store';
 import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';
 
@@ -92,8 +91,6 @@ const tabsRouterStore = useTabsRouterStore();
 const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
 const activeTabPath = ref('');
 
-const { locale } = useLocale();
-
 const handleChangeCurrentTab = (path: string) => {
   const { tabRouters } = tabsRouterStore;
   const route = tabRouters.find((i) => i.path === path);
@@ -108,10 +105,6 @@ const handleRemove = (options: TTabRemoveOptions) => {
   if ((options.value as string) === route.path) router.push({ path: nextRouter.path, query: nextRouter.query });
 };
 
-const renderTitle = (title: string | Record<string, string>) => {
-  if (typeof title === 'string') return title;
-  return title[locale.value];
-};
 const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
   tabsRouterStore.toggleTabRouterAlive(routeIdx);
   nextTick(() => {
diff --git a/src/layouts/components/MenuContent.vue b/src/layouts/components/MenuContent.vue
index 9d3c27c..1c1d1e1 100644
--- a/src/layouts/components/MenuContent.vue
+++ b/src/layouts/components/MenuContent.vue
@@ -6,16 +6,16 @@
           <template #icon>
             <component :is="menuIcon(item)" class="t-icon"></component>
           </template>
-          {{ renderMenuTitle(item.title) }}
+          {{ item.title }}
         </t-menu-item>
         <t-menu-item v-else :name="item.path" :value="getPath(item)" :to="item.path">
           <template #icon>
             <component :is="menuIcon(item)" class="t-icon"></component>
           </template>
-          {{ renderMenuTitle(item.title) }}
+          {{ item.title }}
         </t-menu-item>
       </template>
-      <t-submenu v-else :name="item.path" :value="item.path" :title="renderMenuTitle(item.title)">
+      <t-submenu v-else :name="item.path" :value="item.path" :title="item.title">
         <template #icon>
           <component :is="menuIcon(item)" class="t-icon"></component>
         </template>
@@ -28,7 +28,6 @@
 import type { PropType } from 'vue';
 import { computed } from 'vue';
 
-import { useLocale } from '@/locales/useLocale';
 import { getActive } from '@/router';
 import type { MenuRoute } from '@/types/interface';
 
@@ -40,10 +39,8 @@ const props = defineProps({
     default: () => [],
   },
 });
-
 const active = computed(() => getActive());
 
-const { locale } = useLocale();
 const list = computed(() => {
   const { navData } = props;
   return getMenuList(navData);
@@ -55,11 +52,6 @@ const menuIcon = (item: ListItemType) => {
   return RenderIcon;
 };
 
-const renderMenuTitle = (title: string | Record<string, string>) => {
-  if (typeof title === 'string') return title;
-  return title[locale.value];
-};
-
 const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
   if (!list || list.length === 0) {
     return [];
diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue
index e79c71a..8dc2b7c 100644
--- a/src/layouts/components/Notice.vue
+++ b/src/layouts/components/Notice.vue
@@ -3,14 +3,9 @@
     <template #content>
       <div class="header-msg">
         <div class="header-msg-top">
-          <p>{{ $t('layout.notice.title') }}</p>
-          <t-button
-            v-if="unreadMsg.length > 0"
-            class="clear-btn"
-            variant="text"
-            theme="primary"
-            @click="setRead('all')"
-            >{{ $t('layout.notice.clear') }}</t-button
+          <p>通知中心</p>
+          <t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
+            >清空</t-button
           >
         </div>
         <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
@@ -21,21 +16,19 @@
             </div>
             <p class="msg-time">{{ item.date }}</p>
             <template #action>
-              <t-button size="small" variant="outline" @click="setRead('radio', item)">
-                {{ $t('layout.notice.setRead') }}
-              </t-button>
+              <t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
             </template>
           </t-list-item>
         </t-list>
 
         <div v-else class="empty-list">
           <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
-          <p>{{ $t('layout.notice.empty') }}</p>
+          <p>暂无通知</p>
         </div>
         <div v-if="unreadMsg.length > 0" class="header-msg-bottom">
-          <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{
-            $t('layout.notice.viewAll')
-          }}</t-button>
+          <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail"
+            >查看全部</t-button
+          >
         </div>
       </div>
     </template>
diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue
index fc83e65..0b654b2 100644
--- a/src/layouts/components/Search.vue
+++ b/src/layouts/components/Search.vue
@@ -2,7 +2,7 @@
   <div v-if="layout === 'side'" class="header-menu-search">
     <t-input
       :class="['header-search', { 'hover-active': isSearchFocus }]"
-      :placeholder="$t('layout.searchPlaceholder')"
+      placeholder="请输入搜索内容"
       @blur="changeSearchFocus(false)"
       @focus="changeSearchFocus(true)"
     >
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 3575769..15c3711 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -3,14 +3,14 @@
     v-model:visible="showSettingPanel"
     size="408px"
     :footer="false"
-    :header="$t('layout.setting.title')"
+    header="页面配置"
     :close-btn="true"
     class="setting-drawer-container"
     @close-btn-click="handleCloseDrawer"
   >
     <div class="setting-container">
       <t-form ref="form" :data="formData" label-align="left">
-        <div class="setting-group-title">{{ $t('layout.setting.theme.mode') }}</div>
+        <div class="setting-group-title">主题模式</div>
         <t-radio-group v-model="formData.mode">
           <div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
             <div>
@@ -21,7 +21,7 @@
             </div>
           </div>
         </t-radio-group>
-        <div class="setting-group-title">{{ $t('layout.setting.theme.color') }}</div>
+        <div class="setting-group-title">主题色</div>
         <t-radio-group v-model="formData.brandTheme">
           <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
             <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
@@ -52,7 +52,7 @@
             </t-popup>
           </div>
         </t-radio-group>
-        <div class="setting-group-title">{{ $t('layout.setting.navigationLayout') }}</div>
+        <div class="setting-group-title">导航布局</div>
         <t-radio-group v-model="formData.layout">
           <div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
             <t-radio-button :key="index" :value="item">
@@ -60,50 +60,38 @@
             </t-radio-button>
           </div>
         </t-radio-group>
-
-        <t-form-item v-show="formData.layout === 'mix'" :label="$t('layout.setting.splitMenu')" name="splitMenu">
+        <t-form-item v-show="formData.layout === 'mix'" label="分割菜单（混合模式下有效）" name="splitMenu">
           <t-switch v-model="formData.splitMenu" />
         </t-form-item>
-        <t-form-item
-          v-show="formData.layout === 'mix'"
-          :label="$t('layout.setting.fixedSidebar')"
-          name="isSidebarFixed"
-        >
+        <t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
           <t-switch v-model="formData.isSidebarFixed" />
         </t-form-item>
-
-        <div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div>
-        <t-form-item :label="$t('layout.setting.sideMode')" name="sideMode">
+        <div class="setting-group-title">元素开关</div>
+        <t-form-item label="侧边栏模式" name="sideMode">
           <t-radio-group v-model="formData.sideMode" class="side-mode-radio">
-            <t-radio-button key="light" value="light" :label="$t('layout.setting.theme.options.light')" />
-            <t-radio-button key="dark" value="dark" :label="$t('layout.setting.theme.options.dark')" />
+            <t-radio-button key="light" value="light" label="明亮" />
+            <t-radio-button key="dark" value="dark" label="暗黑" />
           </t-radio-group>
         </t-form-item>
-        <t-form-item
-          v-show="formData.layout === 'side'"
-          :label="$t('layout.setting.element.showHeader')"
-          name="showHeader"
-        >
+        <t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
           <t-switch v-model="formData.showHeader" />
         </t-form-item>
-        <t-form-item :label="$t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb">
+        <t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
           <t-switch v-model="formData.showBreadcrumb" />
         </t-form-item>
-        <t-form-item :label="$t('layout.setting.element.showFooter')" name="showFooter">
+        <t-form-item label="显示 Footer" name="showFooter">
           <t-switch v-model="formData.showFooter" />
         </t-form-item>
-        <t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter">
+        <t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
           <t-switch v-model="formData.isUseTabsRouter"></t-switch>
         </t-form-item>
-        <t-form-item :label="$t('layout.setting.element.menuAutoCollapsed')" name="menuAutoCollapsed">
+        <t-form-item label="菜单自动折叠" name="menuAutoCollapsed">
           <t-switch v-model="formData.menuAutoCollapsed"></t-switch>
         </t-form-item>
       </t-form>
       <div class="setting-info">
-        <p>{{ $t('layout.setting.tips') }}</p>
-        <t-button theme="primary" variant="text" @click="handleCopy">
-          {{ $t('layout.setting.copy.title') }}
-        </t-button>
+        <p>请复制后手动修改配置文件: /src/config/style.ts</p>
+        <t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
       </div>
     </div>
   </t-drawer>
@@ -121,7 +109,6 @@ import ColorContainer from '@/components/color/index.vue';
 import Thumbnail from '@/components/thumbnail/index.vue';
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 import STYLE_CONFIG from '@/config/style';
-import { t } from '@/locales';
 import { useSettingStore } from '@/store';
 
 const settingStore = useSettingStore();
@@ -129,9 +116,9 @@ const settingStore = useSettingStore();
 const LAYOUT_OPTION = ['side', 'top', 'mix'];
 
 const MODE_OPTIONS = [
-  { type: 'light', text: t('layout.setting.theme.options.light') },
-  { type: 'dark', text: t('layout.setting.theme.options.dark') },
-  { type: 'auto', text: t('layout.setting.theme.options.auto') },
+  { type: 'light', text: '明亮' },
+  { type: 'dark', text: '暗黑' },
+  { type: 'auto', text: '跟随系统' },
 ];
 
 const initStyleConfig = () => {