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

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

@@ -0,0 +1,285 @@
+<script lang="ts" setup>
+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 { onMounted, reactive } 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';
+const appStore = useAppStore();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  filePath: string; // 是否上传文件
+  flag: string; // 是否变更标记
+  type: 'brand' | 'icon';
+  icon: string;
+  brand: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  filePath: '',
+  flag: '',
+  type: 'icon',
+  icon: '',
+  brand: '',
+});
+
+/**上传前检查或转换压缩 */
+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);
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('图片文件大小必须小于 2MB', 3);
+  }
+  return isJpgOrPng && isLt2M;
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要上传LOGO文件吗?`,
+    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;
+          // appStore.setLOGO(state.type, res.data.fileName);
+          const baseApi = import.meta.env.VITE_API_BASE_URL;
+          if (state.type === 'icon') {
+            state.icon = `${baseApi}${res.data.fileName}`;
+          }
+          if (state.type === 'brand') {
+            state.brand = `${baseApi}${res.data.fileName}`;
+          }
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    Object.assign(state, {
+      filePath: '',
+      flag: `${appStore.logoType}/`,
+      type: appStore.logoType,
+      icon: appStore.getLOGOIcon,
+      brand: appStore.getLOGOBrand,
+    });
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要提交当前变更的LOGO文件吗?`,
+    onOk() {
+      const reqArr = [];
+      // 改变LOGO地址
+      if (state.filePath) {
+        let changeFilePath = 'sys.logo.filePathIcon';
+        if (state.type === 'brand') {
+          changeFilePath = 'sys.logo.filePathBrand';
+        }
+        reqArr.push(
+          changeValue({ key: changeFilePath, value: state.filePath })
+        );
+      }
+      // 判断类型是否改变
+      if (state.type !== appStore.logoType) {
+        reqArr.push(changeValue({ key: 'sys.logo.type', value: state.type }));
+      }
+
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      Promise.all(reqArr).then(resArr => {
+        state.loading = false;
+        hide();
+        if (resArr[0].code === RESULT_CODE_SUCCESS) {
+          message.success('提交保存成功', 3);
+          if (state.filePath) {
+            appStore.setLOGO(state.type, state.filePath);
+          }
+          if (state.type !== appStore.logoType) {
+            appStore.logoType = state.type;
+          }
+          fnEdit(false);
+        } else {
+          message.error(resArr[0].msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**有变更状态进行禁用提交按钮 */
+const changeStatus = computed(() => {
+  const changeFlag = `${state.type}/${state.filePath}`;
+  if (changeFlag !== state.flag) {
+    return false;
+  }
+  return true;
+});
+
+onMounted(() => {
+  Object.assign(state, {
+    filePath: '',
+    flag: `${appStore.logoType}/`,
+    type: appStore.logoType,
+    icon: appStore.getLOGOIcon,
+    brand: appStore.getLOGOBrand,
+  });
+});
+</script>
+
+<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="224" :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">首页</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-group>
+            <a-upload
+              name="file"
+              list-type="picture"
+              accept=".jpg,.png"
+              :max-count="1"
+              :show-upload-list="false"
+              :before-upload="fnBeforeUpload"
+              :custom-request="fnUpload"
+            >
+              <a-button type="link" :loading="state.loading">
+                上传LOGO
+              </a-button>
+            </a-upload>
+          </a-space>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button type="primary" :disabled="changeStatus" @click="fnSave">
+            提交保存
+          </a-button>
+          <a-button style="margin-left: 10px" @click="fnEdit(false)">
+            {{ t('common.cancel') }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <a-button type="dashed" @click="fnEdit(true)" v-else> 编辑 </a-button>
+    </a-col>
+    <a-col :lg="12" :md="12" :xs="24">
+      <a-typography>
+        <a-typography-paragraph>
+          系统LOGO展示样式如预览区域所示<br />
+          如需变更请将图片进行对应处理调整后在进行上传。
+        </a-typography-paragraph>
+        <a-typography-title :level="5">全图</a-typography-title>
+        <a-typography-paragraph>
+          将整张图片展示到系统LOGO区域，请使用透明背景，尺寸比例大小
+          <a-typography-text mark>224x48</a-typography-text>
+        </a-typography-paragraph>
+        <a-typography-title :level="5">小图</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>
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+.header {
+  display: flex;
+  align-content: center;
+  height: 48px;
+  padding-left: 16px;
+  background-color: #001529;
+  margin-bottom: 24px;
+
+  &-brand {
+    width: 224px;
+    height: 48px;
+    margin-right: 12px;
+    border: 1px var(--ant-primary-color) solid;
+  }
+  &-icon {
+    display: flex;
+    align-content: center;
+    min-width: 192px;
+    height: 100%;
+    align-items: center;
+    margin-right: 12px;
+    border: 1px var(--ant-primary-color) solid;
+
+    & > img {
+      height: 32px;
+      vertical-align: middle;
+      border-style: none;
+      border-radius: 6.66px;
+    }
+    & > h1 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 180px;
+      color: #fff;
+      margin: 0 0 0 12px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  &-menu {
+    width: 90px;
+    line-height: 45px;
+    color: #ffffff;
+    align-self: center;
+    text-align: center;
+  }
+}
+</style>