feat: 图标支持根据语言上传对应图标

src/views/system/setting/components/change-help-doc.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue/lib';
 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 { transferHelpDoc } from '@/api/index';
+import { transferStaticFile } 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';
 import { useRouter } from 'vue-router';
+const appStore = useAppStore();
 const router = useRouter();
 const { t, currentLocale, optionsLocale } = useI18n();
 
@@ -79,9 +81,10 @@ function fnSave() {
       // 发送请求
       const hide = message.loading(t('common.loading'), 0);
       state.loading = true;
-      transferHelpDoc({
+      transferStaticFile({
         language: state.language,
         uploadPath: state.filePath,
+        staticPath: appStore.helpDoc,
       }).then(res => {
         state.loading = false;
         hide();

src/views/system/setting/components/change-logo.vue

@@ -3,20 +3,22 @@ import { Modal, message } from 'ant-design-vue/lib';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import IconFont from '@/components/IconFont/index.vue';
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, watch, computed } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { uploadFile } from '@/api/tool/file';
 import { changeValue } from '@/api/system/config';
-import { computed } from 'vue';
 import { sessionGet } from '@/utils/cache-session-utils';
+import { transferStaticFile } from '@/api';
+import { parseUrlPath } from '@/plugins/file-static-url';
 const appStore = useAppStore();
-const { t } = useI18n();
+const { t, currentLocale, optionsLocale } = useI18n();
 
 type StateType = {
   edite: boolean;
   loading: boolean;
+  language: string;
   filePath: string; // 是否上传文件
   flag: string; // 是否变更标记
   type: 'brand' | 'icon';
@@ -27,6 +29,7 @@ type StateType = {
 let state: StateType = reactive({
   edite: false,
   loading: false,
+  language: '',
   filePath: '',
   flag: '',
   type: 'icon',
@@ -39,11 +42,14 @@ function fnBeforeUpload(file: FileType) {
   if (state.loading) return false;
   const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type);
   if (!isJpgOrPng) {
-    message.error('只支持上传图片格式（jpg、png）', 3);
+    message.error(
+      t('views.system.setting.uploadFormat', { format: 'jpg、png' }),
+      3
+    );
   }
   const isLt2M = file.size / 1024 / 1024 < 2;
   if (!isLt2M) {
-    message.error('图片文件大小必须小于 2MB', 3);
+    message.error(t('views.system.setting.uploadSize', { size: 2 }), 3);
   }
   return isJpgOrPng && isLt2M;
 }
@@ -92,8 +98,8 @@ function fnEdit(v: boolean) {
       filePath: '',
       flag: `${appStore.logoType}/`,
       type: appStore.logoType,
-      icon: appStore.getLOGOIcon,
-      brand: appStore.getLOGOBrand,
+      icon: getLogoURL('icon'),
+      brand: getLogoURL('brand'),
     });
   }
 }
@@ -107,12 +113,16 @@ function fnSave() {
       const reqArr = [];
       // 改变LOGO地址
       if (state.filePath) {
-        let changeFilePath = 'sys.logo.filePathIcon';
+        let changeFilePath = appStore.filePathIcon;
         if (state.type === 'brand') {
-          changeFilePath = 'sys.logo.filePathBrand';
+          changeFilePath = appStore.filePathBrand;
         }
         reqArr.push(
-          changeValue({ key: changeFilePath, value: state.filePath })
+          transferStaticFile({
+            language: state.language,
+            uploadPath: state.filePath,
+            staticPath: changeFilePath,
+          })
         );
       }
       // 判断类型是否改变
@@ -128,9 +138,6 @@ function fnSave() {
         hide();
         if (resArr[0].code === RESULT_CODE_SUCCESS) {
           message.success(t('views.system.setting.saveSuccess'), 3);
-          if (state.filePath) {
-            appStore.setLOGO(state.type, state.filePath);
-          }
           if (state.type !== appStore.logoType) {
             appStore.logoType = state.type;
           }
@@ -152,13 +159,38 @@ const changeStatus = computed(() => {
   return true;
 });
 
+// LOGO地址
+function getLogoURL(type: 'brand' | 'icon') {
+  let url =
+    type === 'brand'
+      ? parseUrlPath(appStore.filePathBrand)
+      : parseUrlPath(appStore.filePathIcon);
+  if (url.indexOf('{language}') === -1) {
+    return url;
+  }
+  // 语言参数替换
+  const local = state.language;
+  const lang = local.split('_')[0];
+  return url.replace('{language}', lang || 'en');
+}
+
+// 监听语言切换
+watch(
+  () => state.language,
+  () => {
+    state.icon = getLogoURL('icon');
+    state.brand = getLogoURL('brand');
+  }
+);
+
 onMounted(() => {
   Object.assign(state, {
+    language: currentLocale.value,
     filePath: '',
     flag: `${appStore.logoType}/`,
     type: appStore.logoType,
-    icon: appStore.getLOGOIcon,
-    brand: appStore.getLOGOBrand,
+    icon: getLogoURL('icon'),
+    brand: getLogoURL('brand'),
   });
 });
 </script>
@@ -166,21 +198,39 @@ onMounted(() => {
 <template>
   <a-row :gutter="16">
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
-      <div class="header">
-        <div class="header-brand" v-show="state.type === 'brand'">
-          <img :width="174" :height="48" :src="state.brand" />
-        </div>
-        <div class="header-icon" v-show="state.type === 'icon'">
-          <img :src="state.icon" />
-          <h1 :title="appStore.appName">
-            {{ appStore.appName }}
-          </h1>
-        </div>
-        <div class="header-menu">
-          <IconFont type="icon-pcduan" style="margin-right: 10px"></IconFont>
-          {{ t('router.index') }}
-        </div>
-      </div>
+      <a-form layout="vertical">
+        <a-form-item style="margin-bottom: 12px">
+          <div class="header">
+            <div class="header-brand" v-show="state.type === 'brand'">
+              <img :width="174" :height="48" :src="state.brand" />
+            </div>
+            <div class="header-icon" v-show="state.type === 'icon'">
+              <img :src="state.icon" />
+              <h1 :title="appStore.appName">
+                {{ appStore.appName }}
+              </h1>
+            </div>
+            <div class="header-menu">
+              <IconFont
+                type="icon-pcduan"
+                style="margin-right: 10px"
+              ></IconFont>
+              {{ t('router.index') }}
+            </div>
+          </div>
+        </a-form-item>
+        <a-form-item>
+          <a-select v-model:value="state.language" style="width: 100px">
+            <a-select-option
+              v-for="opt in optionsLocale"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
 
       <a-form layout="vertical" v-if="state.edite">
         <a-form-item>
@@ -257,7 +307,6 @@ onMounted(() => {
   height: 48px;
   padding-left: 16px;
   background-color: #001529;
-  margin-bottom: 24px;
 
   &-brand {
     width: 174px;