style: 个人中心多语言

src/views/account/components/base-info.vue

@@ -43,7 +43,7 @@ function fnInitstateForm() {
 function fnFinish() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认要提交修改用户基本信息吗?`,
+    content: t('views.account.settings.profileTip'),
     onOk() {
       stateForm.formClick = true;
       // 发送请求
@@ -55,8 +55,8 @@ function fnFinish() {
         if (res.code === RESULT_CODE_SUCCESS) {
           Modal.success({
             title: t('common.tipTitle'),
-            content: `用户基本信息修改成功！`,
-            okText: '我知道了',
+            content: t('views.account.settings.profileOk'),
+            okText: t('views.account.settings.know'),
             onOk() {
               uerStore.setBaseInfo(form);
             },
@@ -77,11 +77,14 @@ function fnBeforeUpload(file: FileType) {
   if (upState.value) return false;
   const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type);
   if (!isJpgOrPng) {
-    message.error('只支持上传图片格式（jpg、png）', 3);
+    message.error(
+      t('views.account.settings.uploadFormat', { format: 'jpg、png' }),
+      3
+    );
   }
   const isLt2M = file.size / 1024 / 1024 < 2;
   if (!isLt2M) {
-    message.error('图片文件大小必须小于 2MB', 3);
+    message.error(t('views.account.settings.uploadSize', { size: '2' }), 3);
   }
   return isJpgOrPng && isLt2M;
 }
@@ -90,7 +93,7 @@ function fnBeforeUpload(file: FileType) {
 function fnUpload(up: UploadRequestOption) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认要上传/变更用户头像吗?`,
+    content: t('views.account.settings.uploadTip'),
     onOk() {
       // 发送请求
       const hide = message.loading(t('common.loading'), 0);
@@ -101,7 +104,7 @@ function fnUpload(up: UploadRequestOption) {
         upState.value = false;
         hide();
         if (res.code === RESULT_CODE_SUCCESS) {
-          message.success('头像上传/变更成功', 3);
+          message.success(t('views.account.settings.uploadOk'), 3);
           uerStore.setAvatar(res.data);
         } else {
           message.error(res.msg, 3);
@@ -134,13 +137,13 @@ onMounted(() => {
     <a-row :gutter="16">
       <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
         <a-form-item
-          label="用户昵称"
+          :label="t('views.account.settings.nick')"
           name="nickName"
           :rules="[
             {
               required: true,
               pattern: regExpNick,
-              message: '昵称只能包含字母、数字、中文和下划线，且不少于2位',
+              message: t('views.account.settings.nickTip'),
             },
           ]"
         >
@@ -148,18 +151,18 @@ onMounted(() => {
             v-model:value="stateForm.form.nickName"
             allow-clear
             :maxlength="26"
-            placeholder="请输入用户昵称"
+            :placeholder="t('views.account.settings.nickPleace')"
           ></a-input>
         </a-form-item>
 
         <a-form-item
-          label="手机号码"
+          :label="t('views.account.settings.phonenumber')"
           name="phonenumber"
           :rules="[
             {
               required: false,
               pattern: regExpMobile,
-              message: '请输入正确手机号码',
+              message: t('views.account.settings.phonenumberPleace'),
             },
           ]"
         >
@@ -167,18 +170,18 @@ onMounted(() => {
             v-model:value="stateForm.form.phonenumber"
             allow-clear
             :maxlength="11"
-            placeholder="请输入手机号码"
+            :placeholder="t('views.account.settings.phonenumberPleace')"
           ></a-input>
         </a-form-item>
 
         <a-form-item
-          label="电子邮箱"
+          :label="t('views.account.settings.email')"
           name="email"
           :rules="[
             {
               required: false,
               pattern: regExpEmail,
-              message: '请输入正确电子邮箱',
+              message: t('views.account.settings.emailPleace'),
             },
           ]"
         >
@@ -186,25 +189,21 @@ onMounted(() => {
             v-model:value="stateForm.form.email"
             allow-clear
             :maxlength="40"
-            placeholder="请输入电子邮箱"
+            :placeholder="t('views.account.settings.emailPleace')"
           ></a-input>
         </a-form-item>
 
         <a-form-item
-          label="用户性别"
+          :label="t('views.account.settings.sex')"
           name="sex"
           :rules="[
             {
               required: true,
-              message: '请选择用户性别',
+              message: t('views.account.settings.sexPleace'),
             },
           ]"
         >
-          <a-select
-            v-model:value="stateForm.form.sex"
-            placeholder="用户性别"
-            :options="sysUserSex"
-          >
+          <a-select v-model:value="stateForm.form.sex" :options="sysUserSex">
           </a-select>
         </a-form-item>
 
@@ -215,21 +214,27 @@ onMounted(() => {
             html-type="submit"
             :loading="stateForm.formClick"
           >
-            确认修改
+            {{ t('views.account.settings.submit') }}
           </a-button>
           <a-button
             type="default"
             @click="fnInitstateForm"
             :disabled="stateForm.formClick"
           >
-            重置
+            {{ t('views.account.settings.reset') }}
           </a-button>
         </a-space>
       </a-col>
       <a-col :lg="12" :md="12" :xs="24">
         <a-space direction="vertical" :size="16">
           <a-image :width="128" :height="128" :src="uerStore.getAvatar" />
-          <span>请选择等比大小图片作为头像，如200x200、400x400</span>
+          <span>
+            {{
+              t('views.account.settings.uploadPleace', {
+                txt: '200x200、400x400',
+              })
+            }}
+          </span>
           <a-upload
             name="file"
             list-type="picture"
@@ -239,7 +244,7 @@ onMounted(() => {
             :custom-request="fnUpload"
           >
             <a-button type="default" :loading="upState">
-              上传/变更图片
+              {{ t('views.account.settings.upload') }}
             </a-button>
           </a-upload>
         </a-space>

src/views/account/components/reset-passwd.vue

@@ -29,22 +29,22 @@ function fnEqualToPassword(
   callback: (error?: string) => void
 ) {
   if (!value) {
-    return Promise.reject('请输入确认新密码');
+    return Promise.reject(t('views.account.settings.equalToPassword'));
   }
   if (state.form.oldPassword === value) {
-    return Promise.reject('与旧密码一致，请重新输入新密码');
+    return Promise.reject(t('views.account.settings.equalToPasswordOld'));
   }
   if (state.form.newPassword === value) {
     return Promise.resolve();
   }
-  return Promise.reject('两次输入的新密码不一致');
+  return Promise.reject(t('views.account.settings.equalToPasswordErr'));
 }
 
 /**表单验证通过 */
 function fnFinish() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: `确认要提交修改密码吗?`,
+    content: t('views.account.settings.submitTip'),
     onOk() {
       state.formClick = true;
       // 发送请求
@@ -54,8 +54,10 @@ function fnFinish() {
           if (res.code === RESULT_CODE_SUCCESS) {
             Modal.success({
               title: t('common.tipTitle'),
-              content: `恭喜您，${userName} 账号密码修改成功！`,
-              okText: '重新登录',
+              content: t('views.account.settings.submitOkTip', {
+                num: userName,
+              }),
+              okText: t('views.account.settings.submitOk'),
               onOk() {
                 fnLogOut().finally(() => router.push({ name: 'Login' }));
               },
@@ -82,20 +84,20 @@ function fnFinish() {
     @finish="fnFinish"
   >
     <a-form-item
-      label="旧密码"
+      :label="t('views.account.settings.oldPassword')"
       name="oldPassword"
       :rules="[
         {
           required: true,
           min: 6,
           max: 26,
-          message: '旧密码不能为空，且不少于6位',
+          message: t('views.account.settings.oldPasswordTip'),
         },
       ]"
     >
       <a-input-password
         v-model:value="state.form.oldPassword"
-        placeholder="请输入旧密码"
+        :placeholder="t('views.account.settings.oldPasswordPleace')"
         :maxlength="26"
       >
         <template #prefix>
@@ -104,19 +106,19 @@ function fnFinish() {
       </a-input-password>
     </a-form-item>
     <a-form-item
-      label="新密码"
+      :label="t('views.account.settings.newPassword')"
       name="newPassword"
       :rules="[
         {
           required: true,
           pattern: regExpPasswd,
-          message: '密码至少包含大小写字母、数字、特殊符号，且不少于6位',
+          message: t('views.account.settings.newPasswordTip'),
         },
       ]"
     >
       <a-input-password
         v-model:value="state.form.newPassword"
-        placeholder="请输入新密码"
+        :placeholder="t('views.account.settings.newPassworddPleace')"
         :maxlength="26"
       >
         <template #prefix>
@@ -125,7 +127,7 @@ function fnFinish() {
       </a-input-password>
     </a-form-item>
     <a-form-item
-      label="确认新密码"
+      :label="t('views.account.settings.confirmPassword')"
       name="confirmPassword"
       :rules="[
         {
@@ -136,7 +138,7 @@ function fnFinish() {
     >
       <a-input-password
         v-model:value="state.form.confirmPassword"
-        placeholder="请确认新密码"
+        :placeholder="t('views.account.settings.confirmPasswordPleace')"
         :maxlength="26"
       >
         <template #prefix>
@@ -152,7 +154,7 @@ function fnFinish() {
         html-type="submit"
         :loading="state.formClick"
       >
-        提交修改
+        {{ t('views.account.settings.submit') }}
       </a-button>
     </a-form-item>
   </a-form>

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)

src/views/account/profile.vue

@@ -6,6 +6,8 @@ import { reactive, ref, onMounted } from 'vue';
 import { parseDateToStr } from '@/utils/date-utils';
 import useUserStore from '@/store/modules/user';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 
 /**加载状态 */
 let loading = ref<boolean>(true);
@@ -100,31 +102,33 @@ onMounted(() => {
             :bordered="true"
             :column="1"
           >
-            <a-descriptions-item label="手机号码">
+            <a-descriptions-item
+              :label="t('views.account.profile.phonenumber')"
+            >
               {{ state.user.phonenumber || '-' }}
             </a-descriptions-item>
-            <a-descriptions-item label="用户邮箱">
+            <a-descriptions-item :label="t('views.account.profile.email')">
               {{ state.user.email || '-' }}
             </a-descriptions-item>
-            <a-descriptions-item label="所属部门">
+            <a-descriptions-item :label="t('views.account.profile.deptName')">
               {{ state.user.dept?.deptName || '-' }}
             </a-descriptions-item>
-            <a-descriptions-item label="拥有岗位">
+            <a-descriptions-item :label="t('views.account.profile.postGroup')">
               <span v-if="state.postGroup.length === 0">-</span>
               <a-tag v-else v-for="v in state.postGroup" :key="v">
                 {{ v }}
               </a-tag>
             </a-descriptions-item>
-            <a-descriptions-item label="拥有角色">
+            <a-descriptions-item :label="t('views.account.profile.roleGroup')">
               <span v-if="state.roleGroup.length === 0">-</span>
               <a-tag v-else v-for="v in state.roleGroup" :key="v">
                 {{ v }}
               </a-tag>
             </a-descriptions-item>
-            <a-descriptions-item label="登录地址">
+            <a-descriptions-item :label="t('views.account.profile.loginIp')">
               {{ state.user.loginIp || '-' }}
             </a-descriptions-item>
-            <a-descriptions-item label="登录时间">
+            <a-descriptions-item :label="t('views.account.profile.loginDate')">
               <span v-if="+state.user.loginDate > 0">
                 {{ parseDateToStr(+state.user.loginDate) }}
               </span>
@@ -140,7 +144,7 @@ onMounted(() => {
             :destroy-inactive-tab-pane="true"
             v-model:activeKey="activeKey"
           >
-            <a-tab-pane key="list" tab="列表">
+            <a-tab-pane key="list" :tab="t('views.account.profile.list')">
               <a-list
                 item-layout="horizontal"
                 :data-source="listData"
@@ -163,10 +167,14 @@ onMounted(() => {
                 </template>
               </a-list>
             </a-tab-pane>
-            <a-tab-pane key="empty" tab="空状态">
+            <a-tab-pane key="empty" :tab="t('views.account.profile.empty')">
               <a-empty>
-                <template #description> 暂无数据，尝试刷新看看 </template>
-                <a-button type="primary">刷新</a-button>
+                <template #description>
+                  {{ t('views.account.profile.description') }}
+                </template>
+                <a-button type="primary">
+                  {{ t('commom.reloadText') }}
+                </a-button>
               </a-empty>
             </a-tab-pane>
           </a-tabs>

src/views/account/settings.vue

@@ -4,6 +4,8 @@ import { PageContainer } from '@ant-design-vue/pro-layout';
 import BaseInfo from './components/base-info.vue';
 import ResetPasswd from './components/reset-passwd.vue';
 import StyleLayout from './components/style-layout.vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 
 /**Tab标签激活 */
 let activeKey = ref<string>('base-info');
@@ -13,13 +15,13 @@ let activeKey = ref<string>('base-info');
   <PageContainer>
     <a-card>
       <a-tabs tab-position="left" v-model:activeKey="activeKey">
-        <a-tab-pane key="base-info" tab="基础信息">
+        <a-tab-pane key="base-info" :tab="t('views.account.settings.baseInfo')">
           <BaseInfo></BaseInfo>
         </a-tab-pane>
-        <a-tab-pane key="reset-passwd" tab="重置密码">
+        <a-tab-pane key="reset-passwd" :tab="t('views.account.settings.resetPasswd')">
           <ResetPasswd></ResetPasswd>
         </a-tab-pane>
-        <a-tab-pane key="style-layout" tab="个性化">
+        <a-tab-pane key="style-layout" :tab="t('views.account.settings.styleLayout')">
           <StyleLayout></StyleLayout>
         </a-tab-pane>
       </a-tabs>