feat: 帮助文档多语言文件上传

2023-11-24 14:20:59 +08:00
parent 030254db4e
commit 627e579729
8 changed files with 140 additions and 109 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -77,3 +77,15 @@ export function getSysConf() {
    method: 'get',
  });
 }
+
+/**
+ * 转存帮助文档
+ * @returns object
+ */
+export function transferHelpDoc(data: Record<string, any>) {
+  return request({
+    url: `/help-doc`,
+    method: 'post',
+    data,
+  });
+}
--- a/src/hooks/useI18n.ts
+++ b/src/hooks/useI18n.ts
@@ -16,10 +16,23 @@ export default function useLocale() {
  const changeLocale = (value: string) => {
    i18n.locale.value = value;
    localSet(CACHE_LOCAL_I18N, value);
-    window.location.reload()
+    window.location.reload();
  };

+  // 可选的语言
+  const optionsLocale= [
+    {
+      value: 'zh_CN',
+      label: '中文',
+    },
+    {
+      value: 'en_US',
+      label: 'English',
+    },
+  ];
+
  return {
+    optionsLocale,
    currentLocale,
    changeLocale,
    t: i18n.t,
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1079,9 +1079,7 @@ export default {
        sysLoginBgInstruction2: 'Restore the background image to the initial system default background by clicking the Restore button.',
        sysHelpDoc: 'System User Documentation',
        sysHelpDocTipContentUpload: 'Are you sure you want to upload the system documentation?',
-        sysHelpDocTipContent: 'Confirm that you want to submit system usage documentation for the current change?',
-        sysHelpDocTipContentRevert: 'Are you sure you want to restore and clear the system usage files?',
-        sysHelpDocNo: 'No Documentation',
+        sysHelpDocTipContent: 'Confirm that you want to submit system usage documentation for the current [{lang}] change?',
        sysHelpDocOpen: 'Document Access',
        sysHelpDocInstruction: 'Description of system functions and use, PDF document manual',
        sysOfficialUrl: 'Official Link',
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1079,9 +1079,7 @@ export default {
        sysLoginBgInstruction2: '通过点击《还原》按钮，将背景图还原到系统初始默认的背景。',
        sysHelpDoc: '系统使用文档',
        sysHelpDocTipContentUpload: '确认要上传系统使用文档吗?',
-        sysHelpDocTipContent: '确认要提交当前变更的系统使用文档吗?',
-        sysHelpDocTipContentRevert: '确认要还原清空系统使用文档吗?',
-        sysHelpDocNo: '无文档',
+        sysHelpDocTipContent: '确认要提交当前【{lang}】变更的系统使用文档吗?',
        sysHelpDocOpen: '文档查阅',
        sysHelpDocInstruction: '系统功能及使用说明，PDF文档手册',
        sysOfficialUrl: '官网链接',
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -6,7 +6,7 @@ import useI18n from '@/hooks/useI18n';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useAlarmStore from '@/store/modules/alarm';
-const { t, changeLocale } = useI18n();
+const { t, changeLocale, optionsLocale } = useI18n();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const router = useRouter();
@@ -77,8 +77,9 @@ function fnChangeLocale(e: any) {
      </a-button>
      <template #overlay>
        <a-menu @click="fnChangeLocale">
-          <a-menu-item key="zh_CN">中文</a-menu-item>
-          <a-menu-item key="en_US">English</a-menu-item>
+          <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
+            {{ opt.label }}
+          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -8,7 +8,7 @@ import { useRouter, useRoute } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
 import { toRaw } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-const { t, changeLocale } = useI18n();
+const { t, changeLocale, optionsLocale } = useI18n();
 const appStore = useAppStore();
 const router = useRouter();
 const route = useRoute();
@@ -111,7 +111,7 @@ function fnLocale() {
 }

 onMounted(() => {
-  fnLocale()
+  fnLocale();
  fnGetCaptcha();
 });

@@ -279,8 +279,9 @@ function fnChangeLocale(e: any) {
              </a-button>
              <template #overlay>
                <a-menu @click="fnChangeLocale">
-                  <a-menu-item key="zh_CN">中文</a-menu-item>
-                  <a-menu-item key="en_US">English</a-menu-item>
+                  <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
+                    {{ opt.label }}
+                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
--- a/src/views/system/setting/components/change-help-doc.vue
+++ b/src/views/system/setting/components/change-help-doc.vue
@@ -4,7 +4,7 @@ import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { changeValue } from '@/api/system/config';
+import { transferHelpDoc } from '@/api/index';
 import { uploadFileChunk } from '@/api/tool/file';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
@@ -12,20 +12,20 @@ import { sessionGet } from '@/utils/cache-session-utils';
 import { useRouter } from 'vue-router';
 const appStore = useAppStore();
 const router = useRouter();
-const { t } = useI18n();
+const { t, currentLocale, optionsLocale } = useI18n();

 type StateType = {
  edite: boolean;
  loading: boolean;
+  language: string;
  filePath: string;
-  flag: string;
 };

 let state: StateType = reactive({
  edite: false,
  loading: false,
+  language: '',
  filePath: '',
-  flag: '',
 });

 /**上传前检查或转换压缩 */
@@ -54,11 +54,6 @@ function fnUpload(up: UploadRequestOption) {
        if (res.code === RESULT_CODE_SUCCESS) {
          message.success(t('views.system.setting.uploadSuccess'), 3);
          state.filePath = res.data.fileName;
-          // 兼容旧前端可改配置文件
-          const baseUrl = import.meta.env.PROD
-            ? sessionGet('baseUrl') || import.meta.env.VITE_API_BASE_URL
-            : import.meta.env.VITE_API_BASE_URL;
-          state.flag = `${baseUrl}${res.data.fileName}`;
        } else {
          message.error(res.msg, 3);
        }
@@ -71,51 +66,30 @@ function fnUpload(up: UploadRequestOption) {
 function fnEdit(v: boolean) {
  state.edite = v;
  if (!v) {
-    state.filePath = '#';
-    state.flag = appStore.getHelpDoc;
+    state.filePath = '';
  }
 }

 /**提交保存 */
 function fnSave() {
+  const item = optionsLocale.find(s => s.value === state.language);
  Modal.confirm({
    title: t('common.tipTitle'),
-    content: t('views.system.setting.sysHelpDocTipContent'),
+    content: t('views.system.setting.sysHelpDocTipContent', {
+      lang: item?.label,
+    }),
    onOk() {
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
      state.loading = true;
-      changeValue({ key: 'sys.helpDoc', value: state.filePath }).then(res => {
+      transferHelpDoc({
+        language: state.language,
+        uploadPath: state.filePath,
+      }).then(res => {
        state.loading = false;
        hide();
        if (res.code === RESULT_CODE_SUCCESS) {
          message.success(t('views.system.setting.saveSuccess'), 3);
-          appStore.helpDoc = state.filePath;
-          fnEdit(false);
-        } else {
-          message.error(res.msg, 3);
-        }
-      });
-    },
-  });
-}
-
-/**还原清空文件 */
-function fnRevert() {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.system.setting.sysHelpDocTipContentRevert'),
-    onOk() {
-      // 发送请求
-      const hide = message.loading(t('common.loading'), 0);
-      state.loading = true;
-      state.filePath = '#';
-      changeValue({ key: 'sys.helpDoc', value: state.filePath }).then(res => {
-        state.loading = false;
-        hide();
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success(t('views.system.setting.revertSuccess'), 3);
-          appStore.helpDoc = state.filePath;
          fnEdit(false);
        } else {
          message.error(res.msg, 3);
@@ -126,70 +100,91 @@ function fnRevert() {
 }

 onMounted(() => {
-  state.filePath = appStore.getHelpDoc;
-  state.flag = appStore.getHelpDoc;
+  state.language = currentLocale.value;
 });
 </script>

 <template>
  <a-row :gutter="16">
    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
-      <a-form layout="vertical" v-if="state.edite">
-        <a-form-item>
-          <a-upload
-            name="file"
-            list-type="text"
-            accept=".pdf"
-            :max-count="1"
-            :show-upload-list="false"
-            :before-upload="fnBeforeUpload"
-            :custom-request="fnUpload"
-          >
-            <a-button type="link" :disabled="state.loading">
-              {{ t('views.system.setting.uploadFile') }}
+      <a-form layout="vertical">
+        <template v-if="state.edite">
+          <a-form-item>
+            <a-select
+              v-model:value="state.language"
+              style="width: 100px"
+              size="small"
+            >
+              <a-select-option
+                v-for="opt in optionsLocale"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </a-select-option>
+            </a-select>
+            <a-upload
+              name="file"
+              list-type="text"
+              accept=".pdf"
+              :max-count="1"
+              :show-upload-list="false"
+              :before-upload="fnBeforeUpload"
+              :custom-request="fnUpload"
+            >
+              <a-button type="link" :disabled="state.loading">
+                {{ t('views.system.setting.uploadFile') }}
+              </a-button>
+            </a-upload>
+          </a-form-item>
+
+          <a-form-item>
+            <a-button
+              type="primary"
+              :disabled="state.filePath === ''"
+              @click="fnSave"
+            >
+              {{ t('views.system.setting.saveSubmit') }}
            </a-button>
-          </a-upload>
-        </a-form-item>
+            <a-button style="margin-left: 10px" @click="fnEdit(false)">
+              {{ t('common.cancel') }}
+            </a-button>
+          </a-form-item>
+        </template>

-        <a-form-item>
-          <a-button
-            type="primary"
-            :disabled="state.filePath === state.flag"
-            @click="fnSave"
-          >
-            {{ t('views.system.setting.saveSubmit') }}
+        <template v-else>
+          <a-form-item>
+            <a-space direction="horizontal" :size="18">
+              <a-select
+                v-model:value="state.language"
+                style="width: 100px"
+                size="small"
+              >
+                <a-select-option
+                  v-for="opt in optionsLocale"
+                  :key="opt.value"
+                  :value="opt.value"
+                >
+                  {{ opt.label }}
+                </a-select-option>
+              </a-select>
+              <a-button
+                type="link"
+                :href="'/help?language=' + state.language"
+                target="_blank"
+              >
+                <template #icon>
+                  <QuestionCircleOutlined />
+                  {{ t('views.system.setting.sysHelpDocOpen') }}
+                </template>
+              </a-button>
+            </a-space>
+          </a-form-item>
+          <a-button type="default" @click="fnEdit(true)">
+            {{ t('common.editText') }}
          </a-button>
-          <a-button style="margin-left: 10px" @click="fnEdit(false)">
-            {{ t('common.cancel') }}
-          </a-button>
-        </a-form-item>
+        </template>
      </a-form>
-
-      <template v-else>
-        <a-form-item>
-          <a-button type="text" v-if="state.flag === '#'">
-            {{ t('views.system.setting.sysHelpDocNo') }}
-          </a-button>
-          <a-button type="link" href="/help" target="_blank" v-else>
-            <template #icon>
-              <QuestionCircleOutlined />
-              {{ t('views.system.setting.sysHelpDocOpen') }}
-            </template>
-          </a-button>
-        </a-form-item>
-
-        <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/src/views/tool/help/index.vue
+++ b/src/views/tool/help/index.vue
@@ -3,11 +3,24 @@ import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-const { t } = useI18n();
+import { computed } from 'vue';
+const { t, currentLocale } = useI18n();
 const appStore = useAppStore();
 const route = useRoute();
-const docUrl = appStore.getHelpDoc;
 const height = ref<string>(document.documentElement.clientHeight + 'px');
+
+// 文档地址
+const docUrl = computed(() => {
+  let url = appStore.getHelpDoc;
+  if (url.indexOf('{language}') === -1) {
+    return url;
+  }
+  // 语言参数替换
+  const local = (route.query.language as string) ?? currentLocale.value;
+  const lang = local.split('_')[0];
+  return url.replace('{language}', lang);
+});
+
 /**
 * 国际化翻译转换
 */