From 05ec64ea8d304065df554ca98b56ac50ba6a3c1e Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 11:39:48 +0800
Subject: [PATCH 1/6] =?UTF-8?q?perf:=20=E6=A1=86=E6=9E=B6=E6=A0=B8?=
 =?UTF-8?q?=E5=BF=83=E4=BB=A3=E7=A0=81=E5=9B=BD=E9=99=85=E5=8C=96=E5=85=A8?=
 =?UTF-8?q?=E9=87=8F=E8=A6=86=E7=9B=96=EF=BC=88=E4=BB=85=E9=9C=80=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E4=B8=9A=E5=8A=A1=E4=BB=A3=E7=A0=81=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E5=8D=B3=E5=8F=AF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                                    | 12 ++++++++++++
 locales/zh-CN.yaml                                 | 14 +++++++++++++-
 .../components/search/components/SearchFooter.vue  |  9 +++++----
 .../components/search/components/SearchHistory.vue |  9 +++++++--
 .../components/search/components/SearchModal.vue   |  9 ++++++---
 src/layout/components/sidebar/centerCollapse.vue   |  7 ++++++-
 src/layout/components/sidebar/leftCollapse.vue     |  7 ++++++-
 src/layout/components/sidebar/topCollapse.vue      |  9 ++++++++-
 8 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/locales/en.yaml b/locales/en.yaml
index 894f77661e..38af1430a0 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -11,6 +11,18 @@ buttons:
   pureCloseAllTabs: Close AllTabs
   pureContentFullScreen: Content FullScreen
   pureContentExitFullScreen: Content ExitFullScreen
+  pureClickCollapse: Collapse
+  pureClickExpand: Expand
+  pureConfirm: Confirm
+  pureSwitch: Switch
+  pureClose: Close
+search:
+  pureTotal: Total
+  pureHistory: History
+  pureCollect: Collect
+  pureDragSort: （Drag Sort）
+  pureEmpty: Empty
+  purePlaceholder: Search Menu
 menus:
   pureHome: Home
   pureLogin: Login
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 69a6a86416..b4e40053a1 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -11,6 +11,18 @@ buttons:
   pureCloseAllTabs: 关闭全部标签页
   pureContentFullScreen: 内容区全屏
   pureContentExitFullScreen: 内容区退出全屏
+  pureClickCollapse: 点击折叠
+  pureClickExpand: 点击展开
+  pureConfirm: 确认
+  pureSwitch: 切换
+  pureClose: 关闭
+search:
+  pureTotal: 共
+  pureHistory: 搜索历史
+  pureCollect: 收藏
+  pureDragSort: （可拖拽排序）
+  pureEmpty: 暂无搜索结果
+  purePlaceholder: 搜索菜单（支持拼音搜索）
 menus:
   pureHome: 首页
   pureLogin: 登录
@@ -176,4 +188,4 @@ login:
   purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
   purePassWordSureReg: 请输入确认密码
   purePassWordDifferentReg: 两次密码不一致!
-  purePassWordUpdateReg: 修改密码成功
\ No newline at end of file
+  purePassWordUpdateReg: 修改密码成功
diff --git a/src/layout/components/search/components/SearchFooter.vue b/src/layout/components/search/components/SearchFooter.vue
index dc9320f359..7ab49f4c0b 100644
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useNav } from "@/layout/hooks/useNav";
+import { transformI18n, $t } from "@/plugins/i18n";
 import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
@@ -16,22 +17,22 @@ const { device } = useNav();
   <div class="search-footer text-[#333] dark:text-white">
     <span class="search-footer-item">
       <enterOutlined class="icon" />
-      确认
+      {{ transformI18n($t("buttons.pureConfirm")) }}
     </span>
     <span class="search-footer-item">
       <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
       <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
-      切换
+      {{ transformI18n($t("buttons.pureSwitch")) }}
     </span>
     <span class="search-footer-item">
       <mdiKeyboardEsc class="icon" />
-      关闭
+      {{ transformI18n($t("buttons.pureClose")) }}
     </span>
     <p
       v-if="device !== 'mobile' && props.total > 0"
       class="search-footer-total"
     >
-      共{{ props.total }}项
+      {{ `${transformI18n($t("search.pureTotal"))} ${props.total}` }}
     </p>
   </div>
 </template>
diff --git a/src/layout/components/search/components/SearchHistory.vue b/src/layout/components/search/components/SearchHistory.vue
index 132ad4b60b..4b49a2ea84 100644
--- a/src/layout/components/search/components/SearchHistory.vue
+++ b/src/layout/components/search/components/SearchHistory.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Sortable from "sortablejs";
+import { transformI18n, $t } from "@/plugins/i18n";
 import SearchHistoryItem from "./SearchHistoryItem.vue";
 import type { optionsItem, dragItem, Props } from "../types";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
@@ -141,7 +142,9 @@ defineExpose({ handleScroll });
 <template>
   <div ref="historyRef" class="history">
     <template v-if="historyList.length">
-      <div :style="titleStyle">搜索历史</div>
+      <div :style="titleStyle">
+        {{ transformI18n($t("search.pureHistory")) }}
+      </div>
       <div
         v-for="(item, index) in historyList"
         :key="item.path"
@@ -160,7 +163,9 @@ defineExpose({ handleScroll });
     </template>
     <template v-if="collectList.length">
       <div :style="titleStyle">
-        收藏{{ collectList.length > 1 ? "（可拖拽排序）" : "" }}
+        {{
+          `${transformI18n($t("search.pureCollect"))}${collectList.length > 1 ? transformI18n($t("search.pureDragSort")) : ""}`
+        }}
       </div>
       <div class="collect-container">
         <div
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index 4631597f07..45dff24341 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -6,8 +6,8 @@ import { useRouter } from "vue-router";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { useNav } from "@/layout/hooks/useNav";
-import { transformI18n } from "@/plugins/i18n";
 import SearchHistory from "./SearchHistory.vue";
+import { transformI18n, $t } from "@/plugins/i18n";
 import type { optionsItem, dragItem } from "../types";
 import { ref, computed, shallowRef, watch } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
@@ -293,7 +293,7 @@ onKeyStroke("ArrowDown", handleDown);
       v-model="keyword"
       size="large"
       clearable
-      placeholder="搜索菜单（中文模式下支持拼音搜索）"
+      :placeholder="transformI18n($t('search.purePlaceholder'))"
       @input="handleSearch"
     >
       <template #prefix>
@@ -305,7 +305,10 @@ onKeyStroke("ArrowDown", handleDown);
     </el-input>
     <div class="search-content">
       <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
-        <el-empty v-if="showEmpty" description="暂无搜索结果" />
+        <el-empty
+          v-if="showEmpty"
+          :description="transformI18n($t('search.pureEmpty'))"
+        />
         <SearchHistory
           v-if="showSearchHistory"
           ref="historyRef"
diff --git a/src/layout/components/sidebar/centerCollapse.vue b/src/layout/components/sidebar/centerCollapse.vue
index af0dcda1c8..d9d238193a 100644
--- a/src/layout/components/sidebar/centerCollapse.vue
+++ b/src/layout/components/sidebar/centerCollapse.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
+import { transformI18n, $t } from "@/plugins/i18n";
 
 import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
 
@@ -34,7 +35,11 @@ const toggleClick = () => {
 <template>
   <div
     v-tippy="{
-      content: props.isActive ? '点击折叠' : '点击展开',
+      content: transformI18n(
+        props.isActive
+          ? $t('buttons.pureClickCollapse')
+          : $t('buttons.pureClickExpand')
+      ),
       theme: tooltipEffect,
       hideOnClick: 'toggle',
       placement: 'right'
diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue
index fbf132d450..39bff7a2a9 100644
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
+import { transformI18n, $t } from "@/plugins/i18n";
 
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 
@@ -44,7 +45,11 @@ const toggleClick = () => {
   <div class="left-collapse">
     <IconifyIconOffline
       v-tippy="{
-        content: props.isActive ? '点击折叠' : '点击展开',
+        content: transformI18n(
+          props.isActive
+            ? $t('buttons.pureClickCollapse')
+            : $t('buttons.pureClickExpand')
+        ),
         theme: tooltipEffect,
         hideOnClick: 'toggle',
         placement: 'right'
diff --git a/src/layout/components/sidebar/topCollapse.vue b/src/layout/components/sidebar/topCollapse.vue
index 348b71fedf..7ed3d45ff8 100644
--- a/src/layout/components/sidebar/topCollapse.vue
+++ b/src/layout/components/sidebar/topCollapse.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { transformI18n, $t } from "@/plugins/i18n";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
@@ -22,7 +23,13 @@ const toggleClick = () => {
 <template>
   <div
     class="px-3 mr-1 navbar-bg-hover"
-    :title="props.isActive ? '点击折叠' : '点击展开'"
+    :title="
+      transformI18n(
+        props.isActive
+          ? $t('buttons.pureClickCollapse')
+          : $t('buttons.pureClickExpand')
+      )
+    "
     @click="toggleClick"
   >
     <IconifyIconOffline

From d0b8efdb3b8ec0a2dcb7faabf587e3b50beae724 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 13:21:41 +0800
Subject: [PATCH 2/6] chore: update

---
 CHANGELOG.zh_CN.md                                   |  4 ++--
 locales/en.yaml                                      |  9 ++++++++-
 locales/zh-CN.yaml                                   |  9 ++++++++-
 src/config/index.ts                                  |  2 +-
 src/layout/components/appMain.vue                    |  4 +++-
 src/layout/components/navbar.vue                     |  2 +-
 src/layout/components/notice/index.vue               |  4 +++-
 src/layout/components/notice/noticeList.vue          |  5 ++++-
 src/layout/components/panel/index.vue                | 12 ++++++++----
 .../components/search/components/SearchFooter.vue    | 11 ++++++-----
 .../components/search/components/SearchHistory.vue   |  7 ++++---
 .../components/search/components/SearchModal.vue     |  9 +++------
 src/layout/components/setting/index.vue              |  2 +-
 src/layout/components/sidebar/centerCollapse.vue     | 11 +++++------
 src/layout/components/sidebar/horizontal.vue         |  2 +-
 src/layout/components/sidebar/leftCollapse.vue       | 11 +++++------
 src/layout/components/sidebar/mixNav.vue             |  2 +-
 src/layout/components/sidebar/topCollapse.vue        | 12 ++++++------
 src/layout/index.vue                                 |  4 +++-
 src/style/dark.scss                                  |  2 +-
 src/utils/responsive.ts                              |  4 ++--
 src/views/guide/index.vue                            |  4 ++--
 22 files changed, 78 insertions(+), 54 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 6ab74107f9..41a7a4389e 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -41,7 +41,7 @@
 - 修复`windwos`下点击注册页面会出现滚动条问题
 - 修复`windows`下页面切换，内容区会出现滚动条问题
 - 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
-- 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+- 修复系统配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
 
 ### 🍏 Perf
 
@@ -84,7 +84,7 @@
 - 所有`search`搜索图标统一替换为`@iconify-icons/ri/search-line`它比较常用将其放入全局离线图标中
 - 移除`iframe`在暗模式下的滤镜效果
 - 带来更美观精致的首页
-- 更干净整洁的项目配置右侧弹出面板
+- 更干净整洁的系统配置右侧弹出面板
 - 重构关于页面，整体更紧致，关键信息更突出
 
 ### 🎫 Feat
diff --git a/locales/en.yaml b/locales/en.yaml
index 38af1430a0..13c174df0f 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -2,7 +2,7 @@ buttons:
   pureAccountSettings: Account
   pureLoginOut: LoginOut
   pureLogin: Login
-  pureSystemSet: Open ProjectConfig
+  pureOpenSystemSet: Open System Configs
   pureReload: Reload
   pureCloseCurrentTab: Close CurrentTab
   pureCloseLeftTabs: Close LeftTabs
@@ -16,6 +16,7 @@ buttons:
   pureConfirm: Confirm
   pureSwitch: Switch
   pureClose: Close
+  pureBackTop: BackTop
 search:
   pureTotal: Total
   pureHistory: History
@@ -23,6 +24,11 @@ search:
   pureDragSort: （Drag Sort）
   pureEmpty: Empty
   purePlaceholder: Search Menu
+panel:
+  pureSystemSet: System Configs
+  pureCloseSystemSet: Close System Configs
+  pureClearCacheAndToLogin: Clear Cache And To Login Page
+  pureClearCache: Clear Cache
 menus:
   pureHome: Home
   pureLogin: Login
@@ -148,6 +154,7 @@ menus:
   pureChildMenuOverflow: Child Menu Overflow Show Tooltip Text
 status:
   pureLoad: Loading...
+  pureNoMessage: No Message
 login:
   pureUsername: Username
   purePassword: Password
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index b4e40053a1..63c0f4d2af 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -2,7 +2,7 @@ buttons:
   pureAccountSettings: 账户设置
   pureLoginOut: 退出系统
   pureLogin: 登录
-  pureSystemSet: 打开项目配置
+  pureOpenSystemSet: 打开系统配置
   pureReload: 重新加载
   pureCloseCurrentTab: 关闭当前标签页
   pureCloseLeftTabs: 关闭左侧标签页
@@ -16,6 +16,7 @@ buttons:
   pureConfirm: 确认
   pureSwitch: 切换
   pureClose: 关闭
+  pureBackTop: 回到顶部
 search:
   pureTotal: 共
   pureHistory: 搜索历史
@@ -23,6 +24,11 @@ search:
   pureDragSort: （可拖拽排序）
   pureEmpty: 暂无搜索结果
   purePlaceholder: 搜索菜单（支持拼音搜索）
+panel:
+  pureSystemSet: 系统配置
+  pureCloseSystemSet: 关闭配置
+  pureClearCacheAndToLogin: 清空缓存并返回登录页
+  pureClearCache: 清空缓存
 menus:
   pureHome: 首页
   pureLogin: 登录
@@ -148,6 +154,7 @@ menus:
   pureChildMenuOverflow: 菜单超出显示 Tooltip 文字提示
 status:
   pureLoad: 加载中...
+  pureNoMessage: 暂无消息
 login:
   pureUsername: 账号
   purePassword: 密码
diff --git a/src/config/index.ts b/src/config/index.ts
index 3573dc2d32..c81d1c4d76 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -35,7 +35,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
   })
     .then(({ data: config }) => {
       let $config = app.config.globalProperties.$config;
-      // 自动注入项目配置
+      // 自动注入系统配置
       if (app && $config && typeof config === "object") {
         $config = Object.assign($config, config);
         app.config.globalProperties.$config = $config;
diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 8543acc244..9f8d767c18 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import Footer from "./footer/index.vue";
 import { useGlobal, isNumber } from "@pureadmin/utils";
 import KeepAliveFrame from "./keepAliveFrame/index.vue";
@@ -10,6 +11,7 @@ const props = defineProps({
   fixedHeader: Boolean
 });
 
+const { t } = useI18n();
 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
 
 const isKeepAlive = computed(() => {
@@ -121,7 +123,7 @@ const transitionMain = defineComponent({
               }"
             >
               <el-backtop
-                title="回到顶部"
+                :title="t('buttons.pureBackTop')"
                 target=".app-main .el-scrollbar__wrap"
               >
                 <backTop />
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 174a89e299..4c148419c3 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -113,7 +113,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.pureSystemSet')"
+        :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 443c1c03c8..93bd9a4bab 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
 import Bell from "@iconify-icons/ep/bell";
 
+const { t } = useI18n();
 const noticesNum = ref(0);
 const notices = ref(noticesData);
 const activeKey = ref(noticesData[0].key);
@@ -30,7 +32,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
         >
           <el-empty
             v-if="notices.length === 0"
-            description="暂无消息"
+            :description="t('status.pureNoMessage')"
             :image-size="60"
           />
           <span v-else>
diff --git a/src/layout/components/notice/noticeList.vue b/src/layout/components/notice/noticeList.vue
index 6e6484eb99..54bdf2f7de 100644
--- a/src/layout/components/notice/noticeList.vue
+++ b/src/layout/components/notice/noticeList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import { ListItem } from "./data";
+import { useI18n } from "vue-i18n";
 import NoticeItem from "./noticeItem.vue";
 
 const props = defineProps({
@@ -9,6 +10,8 @@ const props = defineProps({
     default: () => []
   }
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -19,5 +22,5 @@ const props = defineProps({
       :noticeItem="item"
     />
   </div>
-  <el-empty v-else description="暂无消息" />
+  <el-empty v-else :description="t('status.pureNoMessage')" />
 </template>
diff --git a/src/layout/components/panel/index.vue b/src/layout/components/panel/index.vue
index 6a1bb446ae..ff08bd376c 100644
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
 import { ref, computed, onMounted, onBeforeUnmount } from "vue";
@@ -25,6 +26,7 @@ const iconClass = computed(() => {
   ];
 });
 
+const { t } = useI18n();
 const { onReset } = useDataThemeChange();
 
 onClickOutside(target, (event: any) => {
@@ -51,10 +53,12 @@ onBeforeUnmount(() => {
       <div
         class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
       >
-        <h4 class="dark:text-white">项目配置</h4>
+        <h4 class="dark:text-white">
+          {{ t("panel.pureSystemSet") }}
+        </h4>
         <span
           v-tippy="{
-            content: '关闭配置',
+            content: t('panel.pureCloseSystemSet'),
             placement: 'bottom-start',
             zIndex: 41000
           }"
@@ -78,7 +82,7 @@ onBeforeUnmount(() => {
       >
         <el-button
           v-tippy="{
-            content: '清空缓存并返回登录页',
+            content: t('panel.pureClearCacheAndToLogin'),
             placement: 'left-start',
             zIndex: 41000
           }"
@@ -87,7 +91,7 @@ onBeforeUnmount(() => {
           bg
           @click="onReset"
         >
-          清空缓存
+          {{ t("panel.pureClearCache") }}
         </el-button>
       </div>
     </div>
diff --git a/src/layout/components/search/components/SearchFooter.vue b/src/layout/components/search/components/SearchFooter.vue
index 7ab49f4c0b..ed605b0f60 100644
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { useNav } from "@/layout/hooks/useNav";
-import { transformI18n, $t } from "@/plugins/i18n";
 import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<{ total: number }>(), {
   total: 0
 });
 
+const { t } = useI18n();
 const { device } = useNav();
 </script>
 
@@ -17,22 +18,22 @@ const { device } = useNav();
   <div class="search-footer text-[#333] dark:text-white">
     <span class="search-footer-item">
       <enterOutlined class="icon" />
-      {{ transformI18n($t("buttons.pureConfirm")) }}
+      {{ t("buttons.pureConfirm") }}
     </span>
     <span class="search-footer-item">
       <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
       <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
-      {{ transformI18n($t("buttons.pureSwitch")) }}
+      {{ t("buttons.pureSwitch") }}
     </span>
     <span class="search-footer-item">
       <mdiKeyboardEsc class="icon" />
-      {{ transformI18n($t("buttons.pureClose")) }}
+      {{ t("buttons.pureClose") }}
     </span>
     <p
       v-if="device !== 'mobile' && props.total > 0"
       class="search-footer-total"
     >
-      {{ `${transformI18n($t("search.pureTotal"))} ${props.total}` }}
+      {{ `${t("search.pureTotal")} ${props.total}` }}
     </p>
   </div>
 </template>
diff --git a/src/layout/components/search/components/SearchHistory.vue b/src/layout/components/search/components/SearchHistory.vue
index 4b49a2ea84..87d5488c96 100644
--- a/src/layout/components/search/components/SearchHistory.vue
+++ b/src/layout/components/search/components/SearchHistory.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Sortable from "sortablejs";
-import { transformI18n, $t } from "@/plugins/i18n";
+import { useI18n } from "vue-i18n";
 import SearchHistoryItem from "./SearchHistoryItem.vue";
 import type { optionsItem, dragItem, Props } from "../types";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
@@ -20,6 +20,7 @@ const innerHeight = ref();
 /** 判断是否停止鼠标移入事件处理 */
 const stopMouseEvent = ref(false);
 
+const { t } = useI18n();
 const emit = defineEmits<Emits>();
 const instance = getCurrentInstance()!;
 const props = withDefaults(defineProps<Props>(), {});
@@ -143,7 +144,7 @@ defineExpose({ handleScroll });
   <div ref="historyRef" class="history">
     <template v-if="historyList.length">
       <div :style="titleStyle">
-        {{ transformI18n($t("search.pureHistory")) }}
+        {{ t("search.pureHistory") }}
       </div>
       <div
         v-for="(item, index) in historyList"
@@ -164,7 +165,7 @@ defineExpose({ handleScroll });
     <template v-if="collectList.length">
       <div :style="titleStyle">
         {{
-          `${transformI18n($t("search.pureCollect"))}${collectList.length > 1 ? transformI18n($t("search.pureDragSort")) : ""}`
+          `${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
         }}
       </div>
       <div class="collect-container">
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index 45dff24341..1b5162382c 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
 
 const router = useRouter();
-const { locale } = useI18n();
+const { t, locale } = useI18n();
 
 const HISTORY_TYPE = "history";
 const COLLECT_TYPE = "collect";
@@ -293,7 +293,7 @@ onKeyStroke("ArrowDown", handleDown);
       v-model="keyword"
       size="large"
       clearable
-      :placeholder="transformI18n($t('search.purePlaceholder'))"
+      :placeholder="t('search.purePlaceholder')"
       @input="handleSearch"
     >
       <template #prefix>
@@ -305,10 +305,7 @@ onKeyStroke("ArrowDown", handleDown);
     </el-input>
     <div class="search-content">
       <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
-        <el-empty
-          v-if="showEmpty"
-          :description="transformI18n($t('search.pureEmpty'))"
-        />
+        <el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
         <SearchHistory
           v-if="showSearchHistory"
           ref="historyRef"
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 0676f05845..8761bfe341 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -291,7 +291,7 @@ function watchSystemThemeChange() {
 }
 
 onBeforeMount(() => {
-  /* 初始化项目配置 */
+  /* 初始化系统配置 */
   nextTick(() => {
     watchSystemThemeChange();
     settings.greyVal &&
diff --git a/src/layout/components/sidebar/centerCollapse.vue b/src/layout/components/sidebar/centerCollapse.vue
index d9d238193a..fd39f43683 100644
--- a/src/layout/components/sidebar/centerCollapse.vue
+++ b/src/layout/components/sidebar/centerCollapse.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
-import { transformI18n, $t } from "@/plugins/i18n";
 
 import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
 
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 });
 
+const { t } = useI18n();
 const { tooltipEffect } = useNav();
 
 const iconClass = computed(() => {
@@ -35,11 +36,9 @@ const toggleClick = () => {
 <template>
   <div
     v-tippy="{
-      content: transformI18n(
-        props.isActive
-          ? $t('buttons.pureClickCollapse')
-          : $t('buttons.pureClickExpand')
-      ),
+      content: props.isActive
+        ? t('buttons.pureClickCollapse')
+        : t('buttons.pureClickExpand'),
       theme: tooltipEffect,
       hideOnClick: 'toggle',
       placement: 'right'
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index ea1c431e19..a6f5322fbb 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -129,7 +129,7 @@ nextTick(() => {
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.pureSystemSet')"
+        :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue
index 39bff7a2a9..cd475ab905 100644
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
-import { transformI18n, $t } from "@/plugins/i18n";
 
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 });
 
+const { t } = useI18n();
 const { tooltipEffect } = useNav();
 
 const iconClass = computed(() => {
@@ -45,11 +46,9 @@ const toggleClick = () => {
   <div class="left-collapse">
     <IconifyIconOffline
       v-tippy="{
-        content: transformI18n(
-          props.isActive
-            ? $t('buttons.pureClickCollapse')
-            : $t('buttons.pureClickExpand')
-        ),
+        content: props.isActive
+          ? t('buttons.pureClickCollapse')
+          : t('buttons.pureClickExpand'),
         theme: tooltipEffect,
         hideOnClick: 'toggle',
         placement: 'right'
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
index 2a8d38b7bc..3d7d99e738 100644
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -162,7 +162,7 @@ watch(
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.pureSystemSet')"
+        :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
diff --git a/src/layout/components/sidebar/topCollapse.vue b/src/layout/components/sidebar/topCollapse.vue
index 7ed3d45ff8..278da07f70 100644
--- a/src/layout/components/sidebar/topCollapse.vue
+++ b/src/layout/components/sidebar/topCollapse.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { transformI18n, $t } from "@/plugins/i18n";
+import { useI18n } from "vue-i18n";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
@@ -11,6 +11,8 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 });
 
+const { t } = useI18n();
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -24,11 +26,9 @@ const toggleClick = () => {
   <div
     class="px-3 mr-1 navbar-bg-hover"
     :title="
-      transformI18n(
-        props.isActive
-          ? $t('buttons.pureClickCollapse')
-          : $t('buttons.pureClickExpand')
-      )
+      props.isActive
+        ? t('buttons.pureClickCollapse')
+        : t('buttons.pureClickExpand')
     "
     @click="toggleClick"
   >
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 895b6ab95d..0cd73a844f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,6 +3,7 @@ import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
+import { useI18n } from "vue-i18n";
 import { useLayout } from "./hooks/useLayout";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
@@ -31,6 +32,7 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 
+const { t } = useI18n();
 const appWrapperRef = ref();
 const { isDark } = useDark();
 const { layout } = useLayout();
@@ -185,7 +187,7 @@ const layoutHeader = defineComponent({
       </div>
       <el-scrollbar v-else>
         <el-backtop
-          title="回到顶部"
+          :title="t('buttons.pureBackTop')"
           target=".main-container .el-scrollbar__wrap"
         >
           <backTop />
diff --git a/src/style/dark.scss b/src/style/dark.scss
index 3dd785fa65..9bd9675780 100644
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -117,7 +117,7 @@ html.dark {
     }
   }
 
-  /* 项目配置面板 */
+  /* 系统配置面板 */
   .right-panel-items {
     .el-divider__text {
       --el-bg-color: var(--el-bg-color);
diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts
index dd631f066f..28f1bcfcf1 100644
--- a/src/utils/responsive.ts
+++ b/src/utils/responsive.ts
@@ -19,10 +19,10 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
         darkMode: config.DarkMode ?? false,
         sidebarStatus: config.SidebarStatus ?? true,
         epThemeColor: config.EpThemeColor ?? "#409EFF",
-        themeColor: config.Theme ?? "light", // 主题色（对应项目配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
+        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
         overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
       },
-      // 项目配置-界面显示
+      // 系统配置-界面显示
       configure: Storage.getData("configure", nameSpace) ?? {
         grey: config.Grey ?? false,
         weak: config.Weak ?? false,
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index afd15ebbc5..e10d098ba2 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -51,8 +51,8 @@ const GUIDE_STEPS = [
   },
   {
     element: document.querySelector(".set-icon") as string | HTMLElement,
-    title: "项目配置",
-    intro: "您可以在这里查看项目配置",
+    title: "系统配置",
+    intro: "您可以在这里查看系统配置",
     position: "left"
   },
   {

From 7282b0d345ad3ca5b17b3f9ad93fce4383c13083 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 14:43:02 +0800
Subject: [PATCH 3/6] chore: update

---
 locales/en.yaml                         | 32 ++++++++-
 locales/zh-CN.yaml                      | 30 +++++++++
 src/layout/components/setting/index.vue | 86 +++++++++++++------------
 3 files changed, 107 insertions(+), 41 deletions(-)

diff --git a/locales/en.yaml b/locales/en.yaml
index 13c174df0f..6c235ae28e 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -17,6 +17,8 @@ buttons:
   pureSwitch: Switch
   pureClose: Close
   pureBackTop: BackTop
+  pureOpenText: Open
+  pureCloseText: Close
 search:
   pureTotal: Total
   pureHistory: History
@@ -27,8 +29,36 @@ search:
 panel:
   pureSystemSet: System Configs
   pureCloseSystemSet: Close System Configs
-  pureClearCacheAndToLogin: Clear Cache And To Login Page
+  pureClearCacheAndToLogin: Clear cache and return to login page
   pureClearCache: Clear Cache
+  pureOverallStyle: Overall Style
+  pureOverallStyleLight: Light
+  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
+  pureOverallStyleDark: Dark
+  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
+  pureOverallStyleSystem: Auto
+  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
+  pureThemeColor: Theme Color
+  pureLayoutModel: Layout Model
+  pureVerticalTip: The menu on the left is familiar and friendly
+  pureHorizontalTip: Top menu, concise overview
+  pureMixTip: Mixed menu, flexible
+  pureStretch: Stretch Page
+  pureStretchFixed: Fixed
+  pureStretchFixedTip: Compact pages make it easy to find the information you need
+  pureStretchCustom: Custom
+  pureStretchCustomTip: Minimum 1280, maximum 1600
+  pureTagsStyle: Tags Style
+  pureTagsStyleSmart: Smart
+  pureTagsStyleSmartTip: Smart tags add fun and brilliance
+  pureTagsStyleCard: Card
+  pureTagsStyleCardTip: Card tags for efficient browsing
+  pureInterfaceDisplay: Interface Display
+  pureGreyModel: Grey Model
+  pureWeakModel: Weak Model
+  pureHiddenTags: Hidden Tags
+  pureHiddenFooter: Hidden Footer
+  pureMultiTagsCache: MultiTags Cache
 menus:
   pureHome: Home
   pureLogin: Login
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 63c0f4d2af..ce4da125f6 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -17,6 +17,8 @@ buttons:
   pureSwitch: 切换
   pureClose: 关闭
   pureBackTop: 回到顶部
+  pureOpenText: 开
+  pureCloseText: 关
 search:
   pureTotal: 共
   pureHistory: 搜索历史
@@ -29,6 +31,34 @@ panel:
   pureCloseSystemSet: 关闭配置
   pureClearCacheAndToLogin: 清空缓存并返回登录页
   pureClearCache: 清空缓存
+  pureOverallStyle: 整体风格
+  pureOverallStyleLight: 浅色
+  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
+  pureOverallStyleDark: 深色
+  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
+  pureOverallStyleSystem: 自动
+  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
+  pureThemeColor: 主题色
+  pureLayoutModel: 导航模式
+  pureVerticalTip: 左侧菜单，亲切熟悉
+  pureHorizontalTip: 顶部菜单，简洁概览
+  pureMixTip: 混合菜单，灵活多变
+  pureStretch: 页宽
+  pureStretchFixed: 固定
+  pureStretchFixedTip: 紧凑页面，轻松找到所需信息
+  pureStretchCustom: 自定义
+  pureStretchCustomTip: 最小1280、最大1600
+  pureTagsStyle: 页签风格
+  pureTagsStyleSmart: 灵动
+  pureTagsStyleSmartTip: 灵动标签，添趣生辉
+  pureTagsStyleCard: 卡片
+  pureTagsStyleCardTip: 卡片标签，高效浏览
+  pureInterfaceDisplay: 界面显示
+  pureGreyModel: 灰色模式
+  pureWeakModel: 色弱模式
+  pureHiddenTags: 隐藏标签页
+  pureHiddenFooter: 隐藏页脚
+  pureMultiTagsCache: 页签持久化
 menus:
   pureHome: 首页
   pureLogin: 登录
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 8761bfe341..269ca350a7 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -9,6 +9,7 @@ import {
   onUnmounted,
   onBeforeMount
 } from "vue";
+import { useI18n } from "vue-i18n";
 import panel from "../panel/index.vue";
 import { emitter } from "@/utils/mitt";
 import { useNav } from "@/layout/hooks/useNav";
@@ -26,6 +27,7 @@ import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import systemIcon from "@/assets/svg/system.svg?component";
 
+const { t } = useI18n();
 const { device } = useNav();
 const { isDark } = useDark();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
@@ -147,13 +149,13 @@ function setFalse(Doms): any {
 /** 页宽 */
 const stretchTypeOptions: Array<OptionsType> = [
   {
-    label: "固定",
-    tip: "紧凑页面，轻松找到所需信息",
+    label: t("panel.pureStretchFixed"),
+    tip: t("panel.pureStretchFixedTip"),
     value: "fixed"
   },
   {
-    label: "自定义",
-    tip: "最小1280、最大1600",
+    label: t("panel.pureStretchCustom"),
+    tip: t("panel.pureStretchCustomTip"),
     value: "custom"
   }
 ];
@@ -194,24 +196,24 @@ const pClass = computed(() => {
 const themeOptions = computed<Array<OptionsType>>(() => {
   return [
     {
-      label: "浅色",
+      label: t("panel.pureOverallStyleLight"),
       icon: dayIcon,
       theme: "light",
-      tip: "清新启航，点亮舒适的工作界面",
+      tip: t("panel.pureOverallStyleLightTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: "深色",
+      label: t("panel.pureOverallStyleDark"),
       icon: darkIcon,
       theme: "dark",
-      tip: "月光序曲，沉醉于夜的静谧雅致",
+      tip: t("panel.pureOverallStyleDarkTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: "自动",
+      label: t("panel.pureOverallStyleSystem"),
       icon: systemIcon,
       theme: "system",
-      tip: "同步时光，界面随晨昏自然呼应",
+      tip: t("panel.pureOverallStyleSystemTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     }
   ];
@@ -219,13 +221,13 @@ const themeOptions = computed<Array<OptionsType>>(() => {
 
 const markOptions: Array<OptionsType> = [
   {
-    label: "灵动",
-    tip: "灵动标签，添趣生辉",
+    label: t("panel.pureTagsStyleSmart"),
+    tip: t("panel.pureTagsStyleSmartTip"),
     value: "smart"
   },
   {
-    label: "卡片",
-    tip: "卡片标签，高效浏览",
+    label: t("panel.pureTagsStyleCard"),
+    tip: t("panel.pureTagsStyleCardTip"),
     value: "card"
   }
 ];
@@ -309,7 +311,7 @@ onUnmounted(() => removeMatchMedia);
 <template>
   <panel>
     <div class="p-5">
-      <p :class="pClass">整体风格</p>
+      <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
       <Segmented
         class="select-none"
         :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
@@ -326,7 +328,7 @@ onUnmounted(() => removeMatchMedia);
         "
       />
 
-      <p :class="['mt-5', pClass]">主题色</p>
+      <p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
       <ul class="theme-color">
         <li
           v-for="(item, index) in themeColors"
@@ -345,12 +347,12 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <p :class="['mt-5', pClass]">导航模式</p>
+      <p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
       <ul class="pure-theme">
         <li
           ref="verticalRef"
           v-tippy="{
-            content: '左侧菜单，亲切熟悉',
+            content: t('panel.pureVerticalTip'),
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
@@ -363,7 +365,7 @@ onUnmounted(() => removeMatchMedia);
           v-if="device !== 'mobile'"
           ref="horizontalRef"
           v-tippy="{
-            content: '顶部菜单，简洁概览',
+            content: t('panel.pureHorizontalTip'),
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
@@ -376,7 +378,7 @@ onUnmounted(() => removeMatchMedia);
           v-if="device !== 'mobile'"
           ref="mixRef"
           v-tippy="{
-            content: '混合菜单，灵活多变',
+            content: t('panel.pureMixTip'),
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
@@ -388,7 +390,7 @@ onUnmounted(() => removeMatchMedia);
       </ul>
 
       <span v-if="useAppStoreHook().getViewportWidth > 1280">
-        <p :class="['mt-5', pClass]">页宽</p>
+        <p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
         <Segmented
           class="mb-2 select-none"
           :modelValue="isNumber(settings.stretch) ? 1 : 0"
@@ -430,7 +432,7 @@ onUnmounted(() => removeMatchMedia);
         </button>
       </span>
 
-      <p :class="['mt-4', pClass]">页签风格</p>
+      <p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
       <Segmented
         class="select-none"
         :modelValue="markValue === 'smart' ? 0 : 1"
@@ -438,45 +440,47 @@ onUnmounted(() => removeMatchMedia);
         @change="onChange"
       />
 
-      <p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
+      <p class="mt-5 font-medium text-sm dark:text-white">
+        {{ t("panel.pureInterfaceDisplay") }}
+      </p>
       <ul class="setting">
         <li>
-          <span class="dark:text-white">灰色模式</span>
+          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
           <el-switch
             v-model="settings.greyVal"
             inline-prompt
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="greyChange"
           />
         </li>
         <li>
-          <span class="dark:text-white">色弱模式</span>
+          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
           <el-switch
             v-model="settings.weakVal"
             inline-prompt
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="weekChange"
           />
         </li>
         <li>
-          <span class="dark:text-white">隐藏标签页</span>
+          <span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
           <el-switch
             v-model="settings.tabsVal"
             inline-prompt
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="tagsChange"
           />
         </li>
         <li>
-          <span class="dark:text-white">隐藏页脚</span>
+          <span class="dark:text-white">{{ t("panel.pureHiddenFooter") }}</span>
           <el-switch
             v-model="settings.hideFooter"
             inline-prompt
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="hideFooterChange"
           />
         </li>
@@ -487,18 +491,20 @@ onUnmounted(() => removeMatchMedia);
             inline-prompt
             :active-value="true"
             :inactive-value="false"
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="logoChange"
           />
         </li>
         <li>
-          <span class="dark:text-white">页签持久化</span>
+          <span class="dark:text-white">
+            {{ t("panel.pureMultiTagsCache") }}
+          </span>
           <el-switch
             v-model="settings.multiTagsCache"
             inline-prompt
-            active-text="开"
-            inactive-text="关"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="multiTagsCacheChange"
           />
         </li>

From 34ed020328add7d2b4919f5ec21321deb2c4faee Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 14:56:57 +0800
Subject: [PATCH 4/6] chore: update

---
 locales/en.yaml            | 1 +
 locales/zh-CN.yaml         | 1 +
 src/api/user.ts            | 2 +-
 src/layout/hooks/useNav.ts | 3 ++-
 src/router/utils.ts        | 2 +-
 src/utils/auth.ts          | 2 +-
 src/views/login/index.vue  | 4 ++--
 7 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/locales/en.yaml b/locales/en.yaml
index 6c235ae28e..4605818fea 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -209,6 +209,7 @@ login:
   pureTip: After scanning the code, click "Confirm" to complete the login
   pureDefinite: Definite
   pureLoginSuccess: Login Success
+  pureLoginFail: Login Fail
   pureRegisterSuccess: Regist Success
   pureTickPrivacy: Please tick Privacy Policy
   pureReadAccept: I have read it carefully and accept
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index ce4da125f6..1d2f2ce154 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -209,6 +209,7 @@ login:
   pureTip: 扫码后点击"确认"，即可完成登录
   pureDefinite: 确定
   pureLoginSuccess: 登录成功
+  pureLoginFail: 登录失败
   pureRegisterSuccess: 注册成功
   pureTickPrivacy: 请勾选隐私政策
   pureReadAccept: 我已仔细阅读并接受
diff --git a/src/api/user.ts b/src/api/user.ts
index 79c30ce0cf..58696b6655 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -5,7 +5,7 @@ export type UserResult = {
   data: {
     /** 用户名 */
     username: string;
-    /** 当前登陆用户的角色 */
+    /** 当前登录用户的角色 */
     roles: Array<string>;
     /** `token` */
     accessToken: string;
diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts
index c1382caf69..33e6df4773 100644
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -17,7 +17,8 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 
-const errorInfo = "当前路由配置不正确，请检查配置";
+const errorInfo =
+  "The current routing configuration is incorrect, please check the configuration";
 
 export function useNav() {
   const pureApp = useAppStoreHook();
diff --git a/src/router/utils.ts b/src/router/utils.ts
index 35065c7238..7df59d74cc 100644
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -81,7 +81,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
     : true;
 }
 
-/** 从localStorage里取出当前登陆用户的角色roles，过滤无权限的菜单 */
+/** 从localStorage里取出当前登录用户的角色roles，过滤无权限的菜单 */
 function filterNoPermissionTree(data: RouteComponent[]) {
   const currentRoles =
     storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index b158ae79dc..fc953c919c 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -15,7 +15,7 @@ export interface DataInfo<T> {
   username?: string;
   /** 昵称 */
   nickname?: string;
-  /** 当前登陆用户的角色 */
+  /** 当前登录用户的角色 */
   roles?: Array<string>;
 }
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6eb5db3e89..157db39770 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -77,12 +77,12 @@ const onLogin = async (formEl: FormInstance | undefined) => {
               router
                 .push(getTopMenu(true).path)
                 .then(() => {
-                  message("登录成功", { type: "success" });
+                  message(t("login.pureLoginSuccess"), { type: "success" });
                 })
                 .finally(() => (disabled.value = false));
             });
           } else {
-            message("登录失败", { type: "error" });
+            message(t("login.pureLoginFail"), { type: "error" });
           }
         })
         .finally(() => (loading.value = false));

From cd8f5137f7a28b383da3765fed9768f57d94b7cf Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 15:25:22 +0800
Subject: [PATCH 5/6] chore: update

---
 src/layout/components/setting/index.vue | 52 +++++++++++++------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 269ca350a7..7ffb34f0e2 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -147,18 +147,20 @@ function setFalse(Doms): any {
 }
 
 /** 页宽 */
-const stretchTypeOptions: Array<OptionsType> = [
-  {
-    label: t("panel.pureStretchFixed"),
-    tip: t("panel.pureStretchFixedTip"),
-    value: "fixed"
-  },
-  {
-    label: t("panel.pureStretchCustom"),
-    tip: t("panel.pureStretchCustomTip"),
-    value: "custom"
-  }
-];
+const stretchTypeOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: t("panel.pureStretchFixed"),
+      tip: t("panel.pureStretchFixedTip"),
+      value: "fixed"
+    },
+    {
+      label: t("panel.pureStretchCustom"),
+      tip: t("panel.pureStretchCustomTip"),
+      value: "custom"
+    }
+  ];
+});
 
 const setStretch = value => {
   settings.stretch = value;
@@ -219,18 +221,20 @@ const themeOptions = computed<Array<OptionsType>>(() => {
   ];
 });
 
-const markOptions: Array<OptionsType> = [
-  {
-    label: t("panel.pureTagsStyleSmart"),
-    tip: t("panel.pureTagsStyleSmartTip"),
-    value: "smart"
-  },
-  {
-    label: t("panel.pureTagsStyleCard"),
-    tip: t("panel.pureTagsStyleCardTip"),
-    value: "card"
-  }
-];
+const markOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: t("panel.pureTagsStyleSmart"),
+      tip: t("panel.pureTagsStyleSmartTip"),
+      value: "smart"
+    },
+    {
+      label: t("panel.pureTagsStyleCard"),
+      tip: t("panel.pureTagsStyleCardTip"),
+      value: "card"
+    }
+  ];
+});
 
 /** 设置导航模式 */
 function setLayoutModel(layout: string) {

From f9af3572922bd50e4898bdb410ce15f0e72fa955 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Apr 2024 15:40:22 +0800
Subject: [PATCH 6/6] chore: update

---
 src/components/ReSegmented/src/index.tsx | 7 ++++++-
 src/layout/components/setting/index.vue  | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx
index 5d20005e00..f28d30d16e 100644
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -42,6 +42,11 @@ const props = {
   disabled: {
     type: Boolean,
     default: false
+  },
+  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+  resize: {
+    type: Boolean,
+    default: false
   }
 };
 
@@ -108,7 +113,7 @@ export default defineComponent({
       });
     }
 
-    props.block && handleResizeInit();
+    (props.block || props.resize) && handleResizeInit();
 
     watch(
       () => curIndex.value,
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 7ffb34f0e2..ee3ef2b01f 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -317,6 +317,7 @@ onUnmounted(() => removeMatchMedia);
     <div class="p-5">
       <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
       <Segmented
+        resize
         class="select-none"
         :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
         :options="themeOptions"
@@ -396,6 +397,7 @@ onUnmounted(() => removeMatchMedia);
       <span v-if="useAppStoreHook().getViewportWidth > 1280">
         <p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
         <Segmented
+          resize
           class="mb-2 select-none"
           :modelValue="isNumber(settings.stretch) ? 1 : 0"
           :options="stretchTypeOptions"
@@ -438,6 +440,7 @@ onUnmounted(() => removeMatchMedia);
 
       <p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
       <Segmented
+        resize
         class="select-none"
         :modelValue="markValue === 'smart' ? 0 : 1"
         :options="markOptions"