feat: 系统设置主要LOGO版权背景修改

src/views/system/setting/components/change-login-bg.vue

@@ -0,0 +1,173 @@
+<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 { changeValue } from '@/api/system/config';
+import { uploadFile } from '@/api/tool/file';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+const appStore = useAppStore();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  filePath: string;
+  flag: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  filePath: '',
+  flag: '',
+});
+
+/**上传前检查或转换压缩 */
+function fnBeforeUpload(file: FileType) {
+  if (state.loading) return false;
+  const isJpgOrPng = [
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml',
+    'image/webp',
+  ].includes(file.type);
+  if (!isJpgOrPng) {
+    message.error('只支持上传图片格式（jpg、png、svg、webp）', 3);
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('图片文件大小必须小于 2MB', 3);
+  }
+  return isJpgOrPng && isLt2M;
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要上传登录界面背景文件吗?`,
+    onOk() {
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      let formData = new FormData();
+      formData.append('file', up.file);
+      formData.append('subPath', 'default');
+      uploadFile(formData).then(res => {
+        state.loading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success('文件上传成功,提交保存生效', 3);
+          state.filePath = res.data.fileName;
+          const baseApi = import.meta.env.VITE_API_BASE_URL;
+          state.flag = `${baseApi}${res.data.fileName}`;
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.filePath = '';
+    state.flag = appStore.getLoginBackground;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要提交当前变更的登录界面背景吗?`,
+    onOk() {
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      changeValue({ key: 'sys.loginBackground', value: state.filePath }).then(
+        res => {
+          state.loading = false;
+          hide();
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success('提交保存成功', 3);
+            appStore.loginBackground = state.filePath;
+            fnEdit(false);
+          } else {
+            message.error(res.msg, 3);
+          }
+        }
+      );
+    },
+  });
+}
+
+onMounted(() => {
+  state.filePath = '';
+  state.flag = appStore.getLoginBackground;
+});
+</script>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
+      <div class="sys-login-bg">
+        <a-image :src="state.flag" />
+      </div>
+
+      <a-form layout="vertical" v-if="state.edite">
+        <a-form-item>
+          <a-upload
+            name="file"
+            list-type="picture"
+            accept=".jpg,.png,.svg,.webp"
+            :max-count="1"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUpload"
+            :custom-request="fnUpload"
+          >
+            <a-button type="link" :loading="state.loading"> 上传背景 </a-button>
+          </a-upload>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            :disabled="state.filePath === state.flag"
+            @click="fnSave"
+          >
+            提交保存
+          </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-button type="dashed" @click="fnEdit(true)"> 编辑 </a-button>
+      </template>
+    </a-col>
+    <a-col :lg="12" :md="12" :xs="24">
+      <a-typography>
+        <a-typography-paragraph>
+          系统登录界面背景样式如预览区域所示<br />
+          请将选择合适的图片进行进行上传。
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+.sys-login-bg {
+  width: 300px;
+  border: 1px var(--ant-primary-color) solid;
+  margin-bottom: 24px;
+}
+</style>