style: 个人中心多语言

src/views/account/components/style-layout.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue';
 import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
 import useLayoutStore from '@/store/modules/layout';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 const { proConfig, changeConf } = useLayoutStore();
 
 let color = ref<string>(getLocalColor());
@@ -19,42 +21,57 @@ function fnColorChange(e: Event) {
 </script>
 
 <template>
-  <a-divider orientation="left">布局属性</a-divider>
+  <a-divider orientation="left">
+    {{ t('views.account.settings.area1') }}
+  </a-divider>
   <a-list item-layout="vertical" size="large" row-key="title">
     <a-list-item>
-      整体布局
-      <template #actions> 导航模式模块设置 </template>
+      {{ t('views.account.settings.layout') }}
+      <template #actions>
+        {{ t('views.account.settings.layoutActions') }}
+      </template>
       <template #extra>
         <a-radio-group
           style="margin-bottom: 12px"
           :value="proConfig.layout"
           @change="(e:any) => changeConf('layout', e.target.value)"
         >
-          <a-radio value="side">左侧菜单布局</a-radio>
-          <a-radio value="top">顶部菜单布局</a-radio>
-          <a-radio value="mix">混合菜单布局</a-radio>
+          <a-radio value="side">
+            {{ t('views.account.settings.layoutSide') }}
+          </a-radio>
+          <a-radio value="top">
+            {{ t('views.account.settings.layoutTop') }}
+          </a-radio>
+          <a-radio value="mix">
+            {{ t('views.account.settings.layoutMix') }}
+          </a-radio>
         </a-radio-group>
       </template>
     </a-list-item>
     <a-list-item>
-      风格配色
-      <template #actions> 整体风格配色设置 </template>
+      {{ t('views.account.settings.color') }}
+      <template #actions>
+        {{ t('views.account.settings.colorActions') }}
+      </template>
       <template #extra>
         <a-space :size="16" align="end" direction="horizontal">
           <a-button type="primary" size="small" @click="fnColorChange">
-            <BgColorsOutlined /> 随机
+            <BgColorsOutlined />
+            {{ t('views.account.settings.colorRandomly') }}
           </a-button>
           <input type="color" :value="color" @input="fnColorChange" />
         </a-space>
       </template>
     </a-list-item>
     <a-list-item>
-      深色菜单
-      <template #actions> 只能改变导航模式的菜单 </template>
+      {{ t('views.account.settings.navTheme') }}
+      <template #actions>
+        {{ t('views.account.settings.navThemeActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="是"
-          un-checked-children="否"
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
           :checked="proConfig.navTheme === 'dark'"
           @change="
             (checked:any) => changeConf('navTheme', checked ? 'dark' : 'light')
@@ -63,53 +80,61 @@ function fnColorChange(e: Event) {
       </template>
     </a-list-item>
     <a-list-item>
-      固定顶部导航栏
-      <template #actions> 顶部导航栏是否固定，不随滚动条移动 </template>
+      {{ t('views.account.settings.fixedHeader') }}
+      <template #actions>
+        {{ t('views.account.settings.fixedHeaderActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="是"
-          un-checked-children="否"
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
           :checked="proConfig.fixedHeader"
           @change="(checked:any) => changeConf('fixedHeader', checked)"
         ></a-switch>
       </template>
     </a-list-item>
     <a-list-item>
-      固定左侧菜单
-      <template #actions> 左侧菜单是否固定，仅左侧菜单布局时有效 </template>
+      {{ t('views.account.settings.fixSiderbar') }}
+      <template #actions>
+        {{ t('views.account.settings.fixSiderbarActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="是"
-          un-checked-children="否"
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
           :checked="proConfig.fixSiderbar"
           @change="(checked:any) => changeConf('fixSiderbar', checked)"
         ></a-switch>
       </template>
     </a-list-item>
     <a-list-item>
-      自动分割菜单
+      {{ t('views.account.settings.splitMenus') }}
       <template #actions>
-        顶部有多级菜单时显示左侧菜单，仅混合菜单布局时有效
+        {{ t('views.account.settings.splitMenusActions') }}
       </template>
       <template #extra>
         <a-switch
-          checked-children="是"
-          un-checked-children="否"
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
           :checked="proConfig.splitMenus"
           @change="(checked:any) => changeConf('splitMenus', checked)"
         ></a-switch>
       </template>
     </a-list-item>
   </a-list>
-  <a-divider orientation="left">内容区域</a-divider>
+  <a-divider orientation="left">
+    {{ t('views.account.settings.area2') }}
+  </a-divider>
   <a-list item-layout="vertical" size="large" row-key="title">
     <a-list-item>
-      顶栏
-      <template #actions> 是否显示顶部导航栏 </template>
+      {{ t('views.account.settings.headerRender') }}
+      <template #actions>
+        {{ t('views.account.settings.headerRenderActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="显示"
-          un-checked-children="隐藏"
+          :checked-children="t('common.switch.show')"
+          :un-checked-children="t('common.switch.hide')"
           :checked="proConfig.headerRender === undefined"
           @change="
             (checked:any) => changeConf('headerRender', checked === true && undefined)
@@ -118,12 +143,14 @@ function fnColorChange(e: Event) {
       </template>
     </a-list-item>
     <a-list-item>
-      页脚
-      <template #actions> 是否显示底部导航栏 </template>
+      {{ t('views.account.settings.footerRender') }}
+      <template #actions>
+        {{ t('views.account.settings.footerRenderActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="显示"
-          un-checked-children="隐藏"
+          :checked-children="t('common.switch.show')"
+          :un-checked-children="t('common.switch.hide')"
           :checked="proConfig.footerRender === undefined"
           @change="
             (checked:any) => changeConf('footerRender', checked === true && undefined)
@@ -132,12 +159,14 @@ function fnColorChange(e: Event) {
       </template>
     </a-list-item>
     <a-list-item>
-      菜单头
-      <template #actions> 是否显示左侧菜单栏顶部LOGO区域 </template>
+      {{ t('views.account.settings.menuHeaderRender') }}
+      <template #actions>
+        {{ t('views.account.settings.menuHeaderRenderActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="显示"
-          un-checked-children="隐藏"
+          :checked-children="t('common.switch.show')"
+          :un-checked-children="t('common.switch.hide')"
           :checked="proConfig.menuHeaderRender === undefined"
           @change="
             (checked:any) => changeConf('menuHeaderRender', checked === true && undefined)
@@ -146,12 +175,14 @@ function fnColorChange(e: Event) {
       </template>
     </a-list-item>
     <a-list-item>
-      导航标签项
-      <template #actions> 是否显示顶部Tab导航标签项 </template>
+      {{ t('views.account.settings.tabRender') }}
+      <template #actions>
+        {{ t('views.account.settings.tabRenderActions') }}
+      </template>
       <template #extra>
         <a-switch
-          checked-children="显示"
-          un-checked-children="隐藏"
+          :checked-children="t('common.switch.show')"
+          :un-checked-children="t('common.switch.hide')"
           :checked="proConfig.tabRender === undefined"
           @change="
             (checked:any) => changeConf('tabRender', checked === true && undefined)