chore: update

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

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: 登录

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: "固定",
+    label: t("panel.pureStretchFixed"),
-    tip: "紧凑页面，轻松找到所需信息",
+    tip: t("panel.pureStretchFixedTip"),
     value: "fixed"
   },
   {
-    label: "自定义",
+    label: t("panel.pureStretchCustom"),
-    tip: "最小1280、最大1600",
+    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: "灵动",
+    label: t("panel.pureTagsStyleSmart"),
-    tip: "灵动标签，添趣生辉",
+    tip: t("panel.pureTagsStyleSmartTip"),
     value: "smart"
   },
   {
-    label: "卡片",
+    label: t("panel.pureTagsStyleCard"),
-    tip: "卡片标签，高效浏览",
+    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="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :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="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :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="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :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="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="hideFooterChange"
           />
         </li>
@@ -487,18 +491,20 @@ onUnmounted(() => removeMatchMedia);
             inline-prompt
             :active-value="true"
             :inactive-value="false"
-            active-text="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :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="开"
+            :active-text="t('buttons.pureOpenText')"
-            inactive-text="关"
+            :inactive-text="t('buttons.pureCloseText')"
             @change="multiTagsCacheChange"
           />
         </li>