style: 系统设置多语言

2023-11-10 11:43:03 +08:00
parent 946db8848c
commit be4e1b1d09
7 changed files with 162 additions and 54 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -576,7 +576,45 @@ export default {
        loginPwd:'Login password',
        updateSure:'Do you want to update existing data',
        downloadObj:'Download Tpl',
-    }
+      },
+      setting: {
+        charMaxLen: 'bit character length',
+        saveSubmit: 'Submit Save',
+        saveSuccess: 'Submit Save Successful',
+        revert: 'Vat',
+        revertSuccess: 'Vat Successful',
+        uploadFormat: 'Only the upload image format ({format}) is supported',
+        uploadSize: 'Image file size must be less than {size}MB',
+        uploadSuccess: 'File uploaded successfully, submit and save to take effect',
+        sysLogo: 'System Logo',
+        sysLogoBrand: 'Brand',
+        sysLogoIcon: 'Icon',
+        sysLogoUpload: 'Upload Logo',
+        sysLogoTipContent: 'Confirm that you want to submit the currently changed logo file?',
+        sysLogoTipContentUpload: 'Are you sure you want to upload the logo file?',
+        sysLogoInstruction: 'The system logo display style is shown in the preview area.',
+        sysLogoInstruction1: 'If you want to change the image, please adjust it accordingly before uploading.',
+        sysLogoInstruction2: 'Show the whole picture to the system logo area, please use transparent background, size ratio size',
+        sysLogoInstruction3: 'Displayed as logo + system name to the system logo area.',
+        sysLogoInstruction4: 'Logo size ratio size',
+        sysName: 'System Name',
+        sysNamePlease: 'Please enter the system name',
+        sysNameLimitation: 'System Name Restrictions',
+        sysNameTipContent: 'Confirm that you want to submit the current changed system name?',
+        sysCopyright: 'Copyright Notice',
+        sysCopyrightPlease: 'Please enter copyright notice',
+        sysCopyrightLimitation: 'Copyright Notice Limitation',
+        sysCopyrightTipContent: 'Confirmation of submitting a copyright notice for the current change?',
+        sysLoginBg: 'Login screen background',
+        sysLoginBgNone: 'No background image',
+        sysLoginBgUpload: 'Upload background image',
+        sysLoginBgTipContentUpload: 'Confirmed to upload login screen background file?',
+        sysLoginBgTipContent: 'Are you sure you want to submit the currently changed login screen background?',
+        sysLoginBgTipContentRevert: 'Are you sure you want to restore the background image to the initial system default background?',
+        sysLoginBgInstruction: 'The background style of the system login interface is shown in the preview area, please refer to the actual display.',
+        sysLoginBgInstruction1: 'Please select the appropriate image for uploading.',
+        sysLoginBgInstruction2: 'Restore the background image to the initial system default background by clicking the Restore button.',
+      },
  },
  },
 };
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -576,7 +576,45 @@ export default {
        loginPwd:'登入密码',
        updateSure:'是否更新已经存在的数据',
        downloadObj:'下载模板',
-          },
+      },
+      setting: {
+        charMaxLen: '位字符长度',
+        saveSubmit: '提交保存',
+        saveSuccess: '提交保存成功',
+        revert: '还原',
+        revertSuccess: '还原成功',
+        uploadFormat: '只支持上传图片格式（{format}）',
+        uploadSize: '图片文件大小必须小于 {size}MB',
+        uploadSuccess: '文件上传成功,提交保存生效',
+        sysLogo: '系统LOGO',
+        sysLogoBrand: '全图',
+        sysLogoIcon: '小图',
+        sysLogoUpload: '上传LOGO',
+        sysLogoTipContent: '确认要提交当前变更的LOGO文件吗?',
+        sysLogoTipContentUpload: '确认要上传LOGO文件吗?',
+        sysLogoInstruction: '系统LOGO展示样式如预览区域所示',
+        sysLogoInstruction1: '如需变更请将图片进行对应处理调整后在进行上传。',
+        sysLogoInstruction2: '将整张图片展示到系统LOGO区域，请使用透明背景，尺寸比例大小',
+        sysLogoInstruction3: '以LOGO+系统名称的形式展示到系统LOGO区域。',
+        sysLogoInstruction4: 'LOGO尺寸比例大小',
+        sysName: '系统名称',
+        sysNamePlease: '请输入系统名称',
+        sysNameLimitation: '系统名称限制',
+        sysNameTipContent: '确认要提交当前变更的系统名称吗?',
+        sysCopyright: '版权声明',
+        sysCopyrightPlease: '请输入版权声明',
+        sysCopyrightLimitation: '版权声明限制',
+        sysCopyrightTipContent: '确认要提交当前变更的版权声明吗?',
+        sysLoginBg: '登录界面背景',
+        sysLoginBgNone: '暂无背景图',
+        sysLoginBgUpload: '上传背景图',
+        sysLoginBgTipContentUpload: '确认要上传登录界面背景文件吗?',
+        sysLoginBgTipContent: '确认要提交当前变更的登录界面背景吗?',
+        sysLoginBgTipContentRevert: '确认要将背景图还原到系统初始默认的背景吗?',
+        sysLoginBgInstruction: '系统登录界面背景样式如预览区域所示，请以实际显示为准',
+        sysLoginBgInstruction1: '请将选择合适的图片进行进行上传。',
+        sysLoginBgInstruction2: '通过点击《还原》按钮，将背景图还原到系统初始默认的背景。',
+      },
  },
  },
 };
--- a/src/views/system/setting/components/change-copyright.vue
+++ b/src/views/system/setting/components/change-copyright.vue
@@ -35,7 +35,7 @@ function fnEdit(v: boolean) {
 function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要提交当前变更的版权声明吗?`,
+    content: t('views.system.setting.sysCopyrightTipContent'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -45,7 +45,7 @@ function fnSave() {
          state.loading = false;
          hide();
          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success('提交保存成功', 3);
+            message.success(t('views.system.setting.saveSuccess'), 3);
            appStore.copyright = state.copyright;
            fnEdit(false);
          } else {
@@ -72,7 +72,7 @@ onMounted(() => {
            v-model:value="state.copyright"
            allow-clear
            :maxlength="40"
-            placeholder="输入版权声明"
+            :placeholder="t('views.system.setting.sysCopyrightPlease')"
          ></a-input>
        </a-form-item>

@@ -82,7 +82,7 @@ onMounted(() => {
            :disabled="state.copyright === state.flag"
            @click="fnSave"
          >
-            提交保存
+            {{ t('views.system.setting.saveSubmit') }}
          </a-button>
          <a-button style="margin-left: 10px" @click="fnEdit(false)">
            {{ t('common.cancel') }}
@@ -92,15 +92,17 @@ onMounted(() => {

      <template v-else>
        <div class="sys-copyright">{{ state.copyright }}</div>
-        <a-button type="dashed" @click="fnEdit(true)"> 编辑 </a-button>
+        <a-button type="dashed" @click="fnEdit(true)">
+          {{ t('common.editText') }}
+        </a-button>
      </template>
    </a-col>
    <a-col :lg="12" :md="12" :xs="24">
      <a-typography>
        <a-typography-paragraph>
-          版权声明限制
+          {{ t('views.system.setting.sysCopyrightLimitation') }}
          <a-typography-text mark>40</a-typography-text>
-          位字符长度
+          {{ t('views.system.setting.charMaxLen') }}
        </a-typography-paragraph>
      </a-typography>
    </a-col>
--- a/src/views/system/setting/components/change-login-bg.vue
+++ b/src/views/system/setting/components/change-login-bg.vue
@@ -36,11 +36,14 @@ function fnBeforeUpload(file: FileType) {
    'image/webp',
  ].includes(file.type);
  if (!isJpgOrPng) {
-    message.error('只支持上传图片格式（jpg、png、svg、webp）', 3);
+    message.error(
+      t('views.system.setting.uploadFormat', { format: 'jpg、png、svg、webp' }),
+      3
+    );
  }
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
-    message.error('图片文件大小必须小于 10MB', 3);
+    message.error(t('views.system.setting.uploadSize', { size: 10 }), 3);
  }
  return isJpgOrPng && isLt10M;
 }
@@ -49,7 +52,7 @@ function fnBeforeUpload(file: FileType) {
 function fnUpload(up: UploadRequestOption) {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要上传登录界面背景文件吗?`,
+    content: t('views.system.setting.sysLoginBgTipContentUpload'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -61,7 +64,7 @@ function fnUpload(up: UploadRequestOption) {
        state.loading = false;
        hide();
        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success('文件上传成功,提交保存生效', 3);
+          message.success(t('views.system.setting.uploadSuccess'), 3);
          state.filePath = res.data.fileName;
          // 兼容旧前端可改配置文件
          const baseUrl = import.meta.env.PROD
@@ -89,7 +92,7 @@ function fnEdit(v: boolean) {
 function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要提交当前变更的登录界面背景吗?`,
+    content: t('views.system.setting.sysLoginBgTipContent'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -99,7 +102,7 @@ function fnSave() {
          state.loading = false;
          hide();
          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success('提交保存成功', 3);
+            message.success(t('views.system.setting.saveSuccess'), 3);
            appStore.loginBackground = state.filePath;
            fnEdit(false);
          } else {
@@ -115,7 +118,7 @@ function fnSave() {
 function fnRevert() {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要将背景图还原到系统初始默认的背景吗?`,
+    content: t('views.system.setting.sysLoginBgTipContentRevert'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -126,7 +129,7 @@ function fnRevert() {
          state.loading = false;
          hide();
          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success('还原成功', 3);
+            message.success(t('views.system.setting.revertSuccess'), 3);
            appStore.loginBackground = state.filePath;
            fnEdit(false);
          } else {
@@ -148,7 +151,9 @@ onMounted(() => {
  <a-row :gutter="16">
    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
      <div class="sys-login-bg">
-        <span v-if="state.flag === '#'">暂无背景图</span>
+        <span v-if="state.flag === '#'">
+          {{ t('views.system.setting.sysLoginBgNone') }}
+        </span>
        <a-image :src="state.flag" v-else />
      </div>

@@ -164,7 +169,7 @@ onMounted(() => {
            :custom-request="fnUpload"
          >
            <a-button type="link" :disabled="state.loading">
-              上传背景
+              {{ t('views.system.setting.sysLoginBgUpload') }}
            </a-button>
          </a-upload>
        </a-form-item>
@@ -175,7 +180,7 @@ onMounted(() => {
            :disabled="state.filePath === state.flag"
            @click="fnSave"
          >
-            提交保存
+            {{ t('views.system.setting.saveSubmit') }}
          </a-button>
          <a-button style="margin-left: 10px" @click="fnEdit(false)">
            {{ t('common.cancel') }}
@@ -184,23 +189,25 @@ onMounted(() => {
      </a-form>

      <template v-else>
-        <a-button type="default" @click="fnEdit(true)"> 编辑 </a-button>
+        <a-button type="default" @click="fnEdit(true)">
+          {{ t('common.editText') }}
+        </a-button>
        <a-button
          type="text"
          danger
          style="margin-left: 10px"
          @click="fnRevert"
        >
-          还原
+          {{ t('views.system.setting.revert') }}
        </a-button>
      </template>
    </a-col>
    <a-col :lg="12" :md="12" :xs="24">
      <a-typography>
        <a-typography-paragraph>
-          系统登录界面背景样式如预览区域所示，请以实际显示为准<br />
-          请将选择合适的图片进行进行上传。<br />
-          通过点击《还原》按钮，将背景图还原到系统初始默认的背景。
+          {{ t('views.system.setting.sysLoginBgInstruction') }}<br />
+          {{ t('views.system.setting.sysLoginBgInstruction1') }}<br />
+          {{ t('views.system.setting.sysLoginBgInstruction2') }}
        </a-typography-paragraph>
      </a-typography>
    </a-col>
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -51,7 +51,7 @@ function fnBeforeUpload(file: FileType) {
 function fnUpload(up: UploadRequestOption) {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要上传LOGO文件吗?`,
+    content: t('views.system.setting.sysLogoTipContentUpload'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -63,7 +63,7 @@ function fnUpload(up: UploadRequestOption) {
        state.loading = false;
        hide();
        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success('文件上传成功,提交保存生效', 3);
+          message.success(t('views.system.setting.uploadSuccess'), 3);
          state.filePath = res.data.fileName;
          // 兼容旧前端可改配置文件
          const baseUrl = import.meta.env.PROD
@@ -101,7 +101,7 @@ function fnEdit(v: boolean) {
 function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要提交当前变更的LOGO文件吗?`,
+    content: t('views.system.setting.sysLogoTipContent'),
    onOk() {
      const reqArr = [];
      // 改变LOGO地址
@@ -126,7 +126,7 @@ function fnSave() {
        state.loading = false;
        hide();
        if (resArr[0].code === RESULT_CODE_SUCCESS) {
-          message.success('提交保存成功', 3);
+          message.success(t('views.system.setting.saveSuccess'), 3);
          if (state.filePath) {
            appStore.setLOGO(state.type, state.filePath);
          }
@@ -175,15 +175,19 @@ onMounted(() => {
            {{ appStore.appName }}
          </h1>
        </div>
-        <div class="header-menu">首页</div>
+        <div class="header-menu">Menu</div>
      </div>

      <a-form layout="vertical" v-if="state.edite">
        <a-form-item>
          <a-space direction="horizontal" :size="18">
            <a-radio-group v-model:value="state.type" button-style="solid">
-              <a-radio value="brand">全图</a-radio>
-              <a-radio value="icon">小图</a-radio>
+              <a-radio value="brand">
+                {{ t('views.system.setting.sysLogoBrand') }}
+              </a-radio>
+              <a-radio value="icon">
+                {{ t('views.system.setting.sysLogoIcon') }}
+              </a-radio>
            </a-radio-group>
            <a-upload
              name="file"
@@ -195,7 +199,7 @@ onMounted(() => {
              :custom-request="fnUpload"
            >
              <a-button type="link" :loading="state.loading">
-                上传LOGO
+                {{ t('views.system.setting.sysLogoUpload') }}
              </a-button>
            </a-upload>
          </a-space>
@@ -203,7 +207,7 @@ onMounted(() => {

        <a-form-item>
          <a-button type="primary" :disabled="changeStatus" @click="fnSave">
-            提交保存
+            {{ t('views.system.setting.saveSubmit') }}
          </a-button>
          <a-button style="margin-left: 10px" @click="fnEdit(false)">
            {{ t('common.cancel') }}
@@ -211,24 +215,31 @@ onMounted(() => {
        </a-form-item>
      </a-form>

-      <a-button type="dashed" @click="fnEdit(true)" v-else> 编辑 </a-button>
+      <a-button type="dashed" @click="fnEdit(true)" v-else>
+        {{ t('common.editText') }}
+      </a-button>
    </a-col>
    <a-col :lg="12" :md="12" :xs="24">
      <a-typography>
        <a-typography-paragraph>
-          系统LOGO展示样式如预览区域所示<br />
-          如需变更请将图片进行对应处理调整后在进行上传。
+          {{ t('views.system.setting.sysLogoInstruction') }}<br />
+          {{ t('views.system.setting.sysLogoInstruction1') }}
        </a-typography-paragraph>
-        <a-typography-title :level="5">全图</a-typography-title>
+        <a-typography-title :level="5">{{
+          t('views.system.setting.sysLogoBrand')
+        }}</a-typography-title>
        <a-typography-paragraph>
-          将整张图片展示到系统LOGO区域，请使用透明背景，尺寸比例大小
+          {{ t('views.system.setting.sysLogoInstruction2') }}
          <a-typography-text mark>174x48</a-typography-text>
        </a-typography-paragraph>
-        <a-typography-title :level="5">小图</a-typography-title>
+        <a-typography-title :level="5">
+          {{ t('views.system.setting.sysLogoIcon') }}
+        </a-typography-title>
        <a-typography-paragraph>
-          以LOGO+系统名称的形式展示到系统LOGO区域。<br />
-          LOGO尺寸比例大小<a-typography-text mark>1:1</a-typography-text>
-          列如：<a-typography-text mark>132x132</a-typography-text>
+          {{ t('views.system.setting.sysLogoInstruction3') }}<br />
+          {{ t('views.system.setting.sysLogoInstruction4') }}
+          <a-typography-text mark>1:1</a-typography-text>
+          eg：<a-typography-text mark>132x132</a-typography-text>
        </a-typography-paragraph>
      </a-typography>
    </a-col>
--- a/src/views/system/setting/components/change-title.vue
+++ b/src/views/system/setting/components/change-title.vue
@@ -35,7 +35,7 @@ function fnEdit(v: boolean) {
 function fnSave() {
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: `确认要提交当前变更的系统名称吗?`,
+    content: t('views.system.setting.sysNameTipContent'),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
@@ -44,7 +44,7 @@ function fnSave() {
        state.loading = false;
        hide();
        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success('提交保存成功', 3);
+          message.success(t('views.system.setting.saveSuccess'), 3);
          appStore.appName = state.title;
          fnEdit(false);
        } else {
@@ -71,7 +71,7 @@ onMounted(() => {
            allow-clear
            :maxlength="11"
            style="width: 224px"
-            placeholder="输入系统名称"
+            :placeholder="t('views.system.setting.sysNamePlease')"
          ></a-input>
        </a-form-item>

@@ -81,7 +81,7 @@ onMounted(() => {
            :disabled="state.title === state.flag"
            @click="fnSave"
          >
-            提交保存
+            {{ t('views.system.setting.saveSubmit') }}
          </a-button>
          <a-button style="margin-left: 10px" @click="fnEdit(false)">
            {{ t('common.cancel') }}
@@ -91,15 +91,17 @@ onMounted(() => {

      <template v-else>
        <div class="sys-title">{{ state.title }}</div>
-        <a-button type="dashed" @click="fnEdit(true)"> 编辑 </a-button>
+        <a-button type="dashed" @click="fnEdit(true)">
+          {{ t('common.editText') }}
+        </a-button>
      </template>
    </a-col>
    <a-col :lg="12" :md="12" :xs="24">
      <a-typography>
        <a-typography-paragraph>
-          系统名称限制
+          {{ t('views.system.setting.sysNameLimitation') }}
          <a-typography-text mark>11</a-typography-text>
-          位字符长度
+          {{ t('views.system.setting.charMaxLen') }}
        </a-typography-paragraph>
      </a-typography>
    </a-col>
--- a/src/views/system/setting/index.vue
+++ b/src/views/system/setting/index.vue
@@ -4,18 +4,28 @@ import ChangeLogo from './components/change-logo.vue';
 import ChangeLogoBG from './components/change-login-bg.vue';
 import ChangeTitle from './components/change-title.vue';
 import ChangeCopyright from './components/change-copyright.vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 </script>

 <template>
  <PageContainer>
    <a-card :bordered="false">
-      <a-divider orientation="left">系统LOGO</a-divider>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.sysLogo') }}
+      </a-divider>
      <ChangeLogo></ChangeLogo>
-      <a-divider orientation="left">系统名称</a-divider>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.sysName') }}
+      </a-divider>
      <ChangeTitle></ChangeTitle>
-      <a-divider orientation="left">版权声明</a-divider>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.sysCopyright') }}
+      </a-divider>
      <ChangeCopyright></ChangeCopyright>
-      <a-divider orientation="left">登录界面背景</a-divider>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.sysLoginBg') }}
+      </a-divider>
      <ChangeLogoBG></ChangeLogoBG>
    </a-card>
  </PageContainer>