feat: 系统设置国际化切换

src/i18n/locales/en-US.ts

@@ -1107,6 +1107,10 @@ export default {
         sysOfficialUrlOpen: 'Open the official website.',
         sysOfficialUrlInstruction: 'Official website link address',
         sysOfficialUrlInstruction1: 'start, if you need to hide do not jump to fill in the',
+        i18n: "Internationalization Switch",
+        i18nOpen: "Display Switch",
+        i18nDefault: "Default Languages",
+        i18nInstruction: 'Whether to display the internationalization switch and set the system default language',
       },
       role:{
         allScopeOptions:'All data permissions',

src/i18n/locales/zh-CN.ts

@@ -1107,6 +1107,10 @@ export default {
         sysOfficialUrlOpen: '打开官网',
         sysOfficialUrlInstruction: '官网链接地址',
         sysOfficialUrlInstruction1: '开头，如需隐藏不跳转填写',
+        i18n: "国际化切换",
+        i18nOpen: "显示切换",
+        i18nDefault: "默认语言",
+        i18nInstruction: '是否显示国际化切换，设置系统默认语言',
       },
       role:{
         allScopeOptions:'全部数据权限',

src/store/modules/app.ts

@@ -2,7 +2,7 @@ import { getSysConf } from '@/api';
 import { CACHE_LOCAL_I18N } from '@/constants/cache-keys-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseUrlPath } from '@/plugins/file-static-url';
-import { localGet } from '@/utils/cache-local-utils';
+import { localGet, localSet } from '@/utils/cache-local-utils';
 import { defineStore } from 'pinia';
 
 /**应用参数类型 */
@@ -95,6 +95,11 @@ const useAppStore = defineStore('app', {
         this.officialUrl = res.data.officialUrl;
         this.i18nOpen = res.data.i18nOpen === 'true';
         this.i18nDefault = res.data.i18nDefault;
+        // 切换禁用时，设置默认语言
+        const localI18n = localGet(CACHE_LOCAL_I18N);
+        if (localI18n == null || (!this.i18nOpen && this.i18nDefault)) {
+          localSet(CACHE_LOCAL_I18N, this.i18nDefault);
+        }
       }
       return res;
     },

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

@@ -0,0 +1,143 @@
+<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 { changeValue } from '@/api/system/config';
+import { CACHE_LOCAL_I18N } from '@/constants/cache-keys-constants';
+import { localSet } from '@/utils/cache-local-utils';
+const appStore = useAppStore();
+const { t, optionsLocale } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  open: boolean;
+  default: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  open: false,
+  default: '',
+});
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.open = appStore.i18nOpen;
+    state.default = appStore.i18nDefault;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysOfficialUrlTipContent'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.loading = true;
+      Promise.all([
+        changeValue({ key: 'sys.i18n.open', value: `${state.open}` }),
+        changeValue({ key: 'sys.i18n.default', value: `${state.default}` }),
+      ])
+        .then(resArr => {
+          // 不判断
+          message.success(t('views.system.setting.saveSuccess'), 3);
+          appStore.i18nOpen = state.open;
+          appStore.i18nDefault = state.default;
+          localSet(CACHE_LOCAL_I18N, state.default);
+          fnEdit(false);
+        })
+        .finally(() => {
+          state.loading = false;
+          hide();
+        });
+    },
+  });
+}
+
+onMounted(() => {
+  state.open = appStore.i18nOpen;
+  state.default = appStore.i18nDefault;
+});
+</script>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
+      <a-form v-if="state.edite">
+        <a-form-item :label="t('views.system.setting.i18nOpen')">
+          <a-switch
+            :checked-children="t('common.switch.open')"
+            :un-checked-children="t('common.switch.shut')"
+            v-model:checked="state.open"
+          ></a-switch>
+        </a-form-item>
+        <a-form-item :label="t('views.system.setting.i18nDefault')">
+          <a-select v-model:value="state.default" 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-item>
+          <a-button type="primary" @click="fnSave">
+            {{ t('views.system.setting.saveSubmit') }}
+          </a-button>
+          <a-button style="margin-left: 10px" @click="fnEdit(false)">
+            {{ t('common.cancel') }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <template v-else>
+        <a-form-item :label="t('views.system.setting.i18nOpen')">
+          <a-switch
+            :disabled="true"
+            :checked-children="t('common.switch.open')"
+            :un-checked-children="t('common.switch.shut')"
+            v-model:checked="state.open"
+          ></a-switch>
+        </a-form-item>
+        <a-form-item :label="t('views.system.setting.i18nDefault')">
+          <a-select
+            v-model:value="state.default"
+            style="width: 100px"
+            :disabled="true"
+          >
+            <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-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.i18nInstruction') }}
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/setting/index.vue

@@ -6,6 +6,7 @@ import ChangeTitle from './components/change-title.vue';
 import ChangeCopyright from './components/change-copyright.vue';
 import ChangeHelpDoc from './components/change-help-doc.vue';
 import ChangeOfficialUrl from './components/change-official-url.vue';
+import ChangeI18n from './components/change-i18n.vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 </script>
@@ -29,14 +30,18 @@ const { t } = useI18n();
         {{ t('views.system.setting.sysLoginBg') }}
       </a-divider>
       <ChangeLogoBG></ChangeLogoBG>
-      <a-divider orientation="left"> 
+      <a-divider orientation="left">
         {{ t('views.system.setting.sysHelpDoc') }}
-       </a-divider>
+      </a-divider>
       <ChangeHelpDoc></ChangeHelpDoc>
       <a-divider orientation="left">
         {{ t('views.system.setting.sysOfficialUrl') }}
       </a-divider>
       <ChangeOfficialUrl></ChangeOfficialUrl>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.i18n') }}
+      </a-divider>
+      <ChangeI18n></ChangeI18n>
     </a-card>
   </PageContainer>
 </template>