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

.env.development

@@ -5,7 +5,7 @@ VITE_HISTORY_HASH = false
 VITE_HISTORY_BASE_URL = "/"
 
 # 应用名称
-VITE_APP_NAME = "核心网管理系统"
+VITE_APP_NAME = "核心网管理平台"
 
 # 应用标识
 VITE_APP_CODE = "CoreNet"

.env.production

@@ -5,13 +5,13 @@ VITE_HISTORY_HASH = true
 VITE_HISTORY_BASE_URL = "/"
 
 # 应用名称
-VITE_APP_NAME = "核心网管理系统"
+VITE_APP_NAME = "核心网管理平台"
 
 # 应用标识
 VITE_APP_CODE = "CoreNet"
 
 # 应用版本
-VITE_APP_VERSION = "1.23.1023"
+VITE_APP_VERSION = "1.23.1025"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

src/api/index.ts

@@ -66,3 +66,14 @@ export async function getServerTime() {
   }
   return result;
 }
+
+/**
+ * 获取系统暴露的配置信息
+ * @returns object
+ */
+export function getSysConf() {
+  return request({
+    url: `/sysConf`,
+    method: 'get',
+  });
+}

src/api/system/config.ts

@@ -99,3 +99,16 @@ export function refreshCache() {
     method: 'put',
   });
 }
+
+/**
+ * 根据参数键名改值
+ * @param data 参数配置对象 { "key": "sys", "value": "核心网" }
+ * @returns object
+ */
+export function changeValue(data: Record<string, string>) {
+  return request({
+    url: '/system/config/changeValue',
+    method: 'put',
+    data: data,
+  });
+}

src/i18n/locales/en-US.ts

@@ -5,8 +5,8 @@ export default {
 
   // 通用
   common: {
-    title: 'Core network management system',
-    desc: '',
+    title: 'Core Network Management Platform',
+    desc: 'Login to Core Network Management Platform',
     loading: 'Please wait...',
     tipTitle: 'Prompt',
     msgSuccess: 'Success {msg}',
@@ -144,7 +144,8 @@ export default {
         versionPlease: 'Version number cannot be empty',
         updateTime: 'Uploaded',
         description: 'Description',
-        deleteTip: 'Are you sure to delete the data item with record number [{num}]?',
+        deleteTip: 'Are you sure to delete the data item with software [{fileName}]?',
+        downloadTip: 'Are you sure to download the data item with software [{fileName}]?',
         updateComment: 'software documentation',
         updateCommentPlease: 'Please enter the software description',
         updateFile: 'Software Files',
@@ -152,11 +153,11 @@ export default {
         verifyFile: 'Verify File',
         selectFile: 'SELECT FILE',
         sendTitle: 'Distribute software version',
-        sendContent: 'Are you sure to send the data item file with the number [{num}] to the corresponding network element?',
+        sendContent: 'Are you sure to send the file with the software package [{fileName}] to the corresponding network element?',
         runTitle: 'Activate software version',
-        runContent: 'Confirm that the software version with the number [{num}] has been issued for activation on the corresponding network element?',
+        runContent: 'Are you sure to activate the software version of [{fileName}] that has been issued to the corresponding network element?',
         backTitle: 'Fallback software version',
-        backContent: 'Confirm that the software version with the number [{num}] has been issued for the corresponding network element rollback?',
+        backContent: 'Confirm that the software version of [{fileName}] has been issued for the corresponding network element rollback?',
         neId: 'Corresponding network element',
         neIdPlease: 'Please select the corresponding network element',
       },

src/i18n/locales/zh-CN.ts

@@ -5,8 +5,8 @@ export default {
 
   // 通用
   common: {
-    title: '核心网管理系统',
-    desc: '',
+    title: '核心网络管理平台',
+    desc: '登录核心网络管理平台',
     loading: '请稍等...',
     tipTitle: '提示',
     msgSuccess: '成功 {msg}',
@@ -144,7 +144,8 @@ export default {
         versionPlease: '版本号不能为空',
         updateTime: '上传时间',
         description: '功能描述',
-        deleteTip: '确认删除记录编号为 【{num}】 的数据项?',
+        deleteTip: '确认删除 【{fileName}】 的软件数据项?',
+        downloadTip: '确认下载 【{fileName}】 的软件数据项?',
         updateComment: '软件说明',
         updateCommentPlease: '请输入软件说明',
         updateFile: '软件文件',
@@ -152,11 +153,11 @@ export default {
         verifyFile: '校验文件',
         selectFile: '选择文件',
         sendTitle: '下发软件版本',
-        sendContent: '确认下发编号为【{num}】的数据项文件到对应网元?',
+        sendContent: '确认下发软件包为【{fileName}】的文件到对应网元?',
         runTitle: '激活软件版本',
-        runContent: '确认在对应网元激活已下发编号为【{num}】的软件版本?',
+        runContent: '确认在对应网元激活已下发【{fileName}】的软件版本?',
         backTitle: '回退软件版本',
-        backContent: '确认在对应网元回退已下发编号为【{num}】的软件版本?',
+        backContent: '确认在对应网元回退已下发【{fileName}】的软件版本?',
         neId: '对应网元',
         neIdPlease: '请选择对应网元',
       },

src/layouts/BasicLayout.vue

@@ -190,10 +190,25 @@ document.addEventListener('visibilitychange', function () {
       <!--插槽-菜单头-->
       <template #menuHeaderRender>
         <RouterLink :to="{ name: 'Index' }" :replace="true">
-          <img class="logo" src="@/assets/logo.png" />
-          <h1 class="title" :title="t('common.title')">
-            {{ t('common.title') }}
-          </h1>
+          <template v-if="appStore.logoType === 'icon'">
+            <img
+              class="logo-icon"
+              :src="appStore.getLOGOIcon"
+              :alt="t('common.title')"
+              :title="appStore.appName"
+            />
+            <h1 class="title" :title="appStore.appName">
+              {{ appStore.appName }}
+            </h1>
+          </template>
+          <template v-if="appStore.logoType === 'brand'">
+            <img
+              class="logo-brand"
+              :src="appStore.getLOGOBrand"
+              :alt="t('common.title')"
+              :title="appStore.appName"
+            />
+          </template>
         </RouterLink>
       </template>
 
@@ -257,13 +272,21 @@ document.addEventListener('visibilitychange', function () {
 </template>
 
 <style lang="less" scoped>
-.logo {
+.logo-icon {
   height: 32px;
   vertical-align: middle;
   border-style: none;
   border-radius: 6.66px;
 }
 
+.logo-brand {
+  height: 48px;
+  width: 224px;
+  vertical-align: middle;
+  border-style: none;
+  margin-right: 12px;
+}
+
 .title {
   overflow: hidden;
   text-overflow: ellipsis;

src/router/index.ts

@@ -8,8 +8,6 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import BasicLayout from '../layouts/BasicLayout.vue';
 import BlankLayout from '../layouts/BlankLayout.vue';
-import LinkLayout from '../layouts/LinkLayout.vue';
-import { encode } from 'js-base64';
 import { getToken } from '@/plugins/auth-token';
 import { validHttp } from '@/utils/regular-utils';
 import useUserStore from '@/store/modules/user';
@@ -139,6 +137,11 @@ const WHITE_LIST: string[] = ['/login', '/auth-redirect', '/bind', '/register'];
 router.beforeEach((to, from, next) => {
   NProgress.start();
   const token = getToken();
+  // 获取系统配置信息
+  const appStore = useAppStore();
+  if (!appStore.filePathIcon) {
+    appStore.fnSysConf();
+  }
 
   // 没有token
   if (!token) {

src/store/modules/app.ts

@@ -1,5 +1,26 @@
+import { getSysConf } from '@/api';
+import defaultLOGO from '@/assets/logo_icon.png';
+import defaultLoginBackground from '@/assets/background.svg';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { validHttp } from '@/utils/regular-utils';
 import { defineStore } from 'pinia';
 
+/**
+ * 格式解析LOGO地址
+ * @param 资源路径
+ * @returns url地址
+ */
+function parseLOGO(path: string): string {
+  if (!path) {
+    return defaultLOGO;
+  }
+  if (validHttp(path)) {
+    return path;
+  }
+  const baseApi = import.meta.env.VITE_API_BASE_URL;
+  return `${baseApi}${path}`;
+}
+
 /**应用参数类型 */
 type AppStore = {
   /**应用名称 */
@@ -10,6 +31,15 @@ type AppStore = {
   appVersion: string;
   /**应用版权声明 */
   copyright: string;
+  /**LOGO显示类型 */
+  logoType: 'brand' | 'icon';
+  /**LOGO文件路径 */
+  filePathIcon: string;
+  filePathBrand: string;
+  /**开启用户注册 */
+  registerUser: boolean;
+  /**登录界面背景 */
+  loginBackground: string;
 };
 
 const useAppStore = defineStore('app', {
@@ -18,7 +48,46 @@ const useAppStore = defineStore('app', {
     appCode: import.meta.env.VITE_APP_CODE,
     appVersion: import.meta.env.VITE_APP_VERSION,
     copyright: 'Copyright ©2023 For AGrand 千通科技',
+    logoType: 'icon',
+    filePathIcon: '',
+    filePathBrand: '',
+    registerUser: false,
+    loginBackground: '',
   }),
+  getters: {
+    /**
+     * 获取正确LOGO地址-icon
+     * @param state 内部属性不用传入
+     * @returns LOGO地址url
+     */
+    getLOGOIcon(state) {
+      return parseLOGO(state.filePathIcon);
+    },
+    /**
+     * 获取正确LOGO地址-brand
+     * @param state 内部属性不用传入
+     * @returns LOGO地址url
+     */
+    getLOGOBrand(state) {
+      return parseLOGO(state.filePathBrand);
+    },
+    /**
+     * 获取正确登录背景地址
+     * @param state 内部属性不用传入
+     * @returns 背景地址url
+     */
+    getLoginBackground(state) {
+      const path = state.loginBackground;
+      if (!path) {
+        return defaultLoginBackground;
+      }
+      if (validHttp(path)) {
+        return path;
+      }
+      const baseApi = import.meta.env.VITE_API_BASE_URL;
+      return `${baseApi}${path}`;
+    },
+  },
   actions: {
     /**设置网页标题 */
     setTitle(title?: string) {
@@ -32,6 +101,48 @@ const useAppStore = defineStore('app', {
     setCopyright(text: string) {
       this.copyright = text;
     },
+    /**设置LOGO */
+    setLOGO(type: 'brand' | 'icon', filePath: string) {
+      this.logoType = type;
+      if (type === 'brand') {
+        this.filePathBrand = filePath;
+      }
+      if (type === 'icon') {
+        this.filePathIcon = filePath;
+      }
+    },
+    // 获取系统配置信息
+    async fnSysConf() {
+      const res = await getSysConf();
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        if (res.data.title) {
+          this.appName = res.data.title;
+        }
+        if (res.data.copyright) {
+          this.copyright = res.data.copyright;
+        }
+        this.filePathIcon = res.data.filePathIcon;
+        this.filePathBrand = res.data.filePathBrand;
+        if (res.data.logoType) {
+          this.logoType = res.data.logoType;
+          // 修改html内容
+          const iconDom = document.querySelector("link[rel~='icon']");
+          if (iconDom) {
+            if(this.logoType === 'icon'){
+              iconDom.setAttribute('href', this.getLOGOIcon);
+            }
+            if(this.logoType === 'brand'){
+              iconDom.setAttribute('href', this.getLOGOBrand);
+            }
+          }
+        }
+        this.registerUser = res.data.registerUser === 'true';
+        if (res.data.loginBackground) {
+          this.loginBackground = res.data.loginBackground;
+        }
+      }
+      return res;
+    },
   },
 });
 

src/views/login.vue

@@ -46,13 +46,6 @@ let state = reactive({
 /**表单验证通过 */
 function fnFinish() {
   state.fromClick = true;
-  // 账号密码登录
-  // let form = {
-  //   userName: state.from.username,
-  //   value: state.from.password,
-  //   grantType: 'password',
-  // };
-
   // 发送请求
   useUserStore()
     .fnLogin(toRaw(state.from))
@@ -96,6 +89,9 @@ function fnGetCaptcha() {
 
 onMounted(() => {
   fnGetCaptcha();
+  const container = document.getElementsByClassName('container').item(0);
+  if (container) {
+  }
 });
 
 /**改变多语言 */
@@ -105,19 +101,43 @@ function fnChangeLocale(e: any) {
 </script>
 
 <template>
-  <div class="container">
-    <div class="top">
-      <div class="header">
-        <a href="/" target="_self"
-          ><img src="@/assets/logo.png" class="logo" alt="logo" />
-          <span class="title">{{ t('common.title') }}</span>
-        </a>
+  <div
+    class="container"
+    :style="{
+      backgroundImage: `url(${appStore.getLoginBackground})`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    }"
+  >
+    <a-card :bordered="false" class="login-card">
+      <div class="login-card__top">
+        <div class="header">
+          <template v-if="appStore.logoType === 'icon'">
+            <img
+              :src="appStore.getLOGOIcon"
+              class="logo-icon"
+              :alt="appStore.appName"
+            />
+            <span class="title">{{ appStore.appName }}</span>
+          </template>
+          <template v-if="appStore.logoType === 'brand'">
+            <img
+              :src="appStore.getLOGOBrand"
+              class="logo-brand"
+              :alt="appStore.appName"
+            />
+          </template>
+        </div>
+        <div class="desc">
+          {{ t('common.desc') }}
+        </div>
       </div>
-      <div class="desc">{{ t('common.desc') }}</div>
-    </div>
-
-    <div class="main">
-      <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
+      <a-form
+        class="login-card__main"
+        :model="state.from"
+        name="stateFrom"
+        @finish="fnFinish"
+      >
         <a-form-item
           name="username"
           :rules="[
@@ -207,7 +227,7 @@ function fnChangeLocale(e: any) {
           align="middle"
           style="margin-bottom: 16px"
         >
-          <a-col :span="12">
+          <a-col :span="12" v-if="appStore.registerUser">
             <a-button
               type="link"
               target="_self"
@@ -251,70 +271,77 @@ function fnChangeLocale(e: any) {
           </a-col>
         </a-row>
       </a-form>
-    </div>
+    </a-card>
 
-    <GlobalFooter class="footer" :links="false" :copyright="appStore.copyright" />
+    <GlobalFooter
+      class="footer"
+      :links="false"
+      :copyright="appStore.copyright"
+    />
   </div>
 </template>
 
 <style lang="less" scoped>
+.login-card {
+  width: 368px;
+  min-width: 260px;
+  margin: 0 auto;
+  border-radius: 4px;
+  &__top {
+    text-align: center;
+    .header {
+      height: 48px;
+      line-height: 48px;
+
+      .logo-icon {
+        height: 48px;
+        margin-right: 16px;
+        vertical-align: top;
+        border-style: none;
+        border-radius: 6.66px;
+      }
+      .logo-brand {
+        height: 48px;
+        vertical-align: top;
+        border-style: none;
+        border-radius: 2px;
+      }
+      .title {
+        position: relative;
+        top: 2px;
+        color: rgba(0, 0, 0, 0.85);
+        font-weight: 600;
+        font-size: 33px;
+        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      }
+    }
+
+    .desc {
+      margin-top: 14px;
+      margin-bottom: 20px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+  &__main {
+    .prefix-icon {
+      color: #8c8c8c;
+      font-size: 16px;
+    }
+  }
+}
+
 .container {
   position: relative;
   width: 100%;
   min-height: 100%;
-  padding: 110px 0 144px;
+  padding-top: 150px;
   background-image: url(../assets/background.svg);
   background-repeat: no-repeat;
   background-position: center 110px;
   background-size: 100%;
 }
 
-.top {
-  text-align: center;
-
-  a {
-    text-decoration: none;
-  }
-
-  .header {
-    height: 44px;
-    line-height: 44px;
-    .logo {
-      height: 44px;
-      margin-right: 16px;
-      vertical-align: top;
-      border-style: none;
-      border-radius: 6.66px;
-    }
-    .title {
-      position: relative;
-      top: 2px;
-      color: rgba(0, 0, 0, 0.85);
-      font-weight: 600;
-      font-size: 33px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-    }
-  }
-
-  .desc {
-    margin-top: 12px;
-    margin-bottom: 40px;
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 14px;
-  }
-}
-
-.main {
-  width: 368px;
-  min-width: 260px;
-  margin: 0 auto;
-
-  .prefix-icon {
-    color: #8c8c8c;
-    font-size: 16px;
-  }
-}
-
 .footer {
   position: absolute;
   bottom: 0;

src/views/register.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
+import { GlobalFooter } from '@ant-design-vue/pro-layout';
 import { Modal, message } from 'ant-design-vue/lib';
 import { reactive, toRaw } from 'vue';
 import { register } from '@/api/login';
 import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';
 import { useRouter } from 'vue-router';
+import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 const { t } = useI18n();
 const router = useRouter();
+const appStore = useAppStore();
 
 let state = reactive({
   /**表单属性 */
@@ -71,9 +74,14 @@ function fnFinish() {
   <div class="container">
     <div class="top">
       <div class="header">
-        <a href="/" target="_self"
-          ><img src="@/assets/logo.png" class="logo" alt="logo" />
-          <span class="title">{{ t('common.title') }}</span>
+        <a href="/" target="_self">
+          <template v-if="appStore.logoType === 'icon'">
+            <img :src="appStore.getLOGOIcon" class="logo" alt="logo" />
+            <span class="title">{{ appStore.appName }}</span>
+          </template>
+          <template v-if="appStore.logoType === 'brand'">
+            <img :src="appStore.getLOGOBrand" class="logo" alt="logo" /> 
+          </template>
         </a>
       </div>
       <div class="desc">{{ t('common.desc') }}</div>
@@ -166,6 +174,12 @@ function fnFinish() {
         </a-button>
       </a-form>
     </div>
+
+    <GlobalFooter
+      class="footer"
+      :links="false"
+      :copyright="appStore.copyright"
+    />
   </div>
 </template>
 
@@ -189,10 +203,10 @@ function fnFinish() {
   }
 
   .header {
-    height: 44px;
-    line-height: 44px;
+    height: 48px;
+    line-height: 48px;
     .logo {
-      height: 44px;
+      height: 48px;
       margin-right: 16px;
       vertical-align: top;
       border-style: none;
@@ -209,8 +223,8 @@ function fnFinish() {
   }
 
   .desc {
-    margin-top: 12px;
-    margin-bottom: 40px;
+    margin-top: 14px;
+    margin-bottom: 20px;
     color: rgba(0, 0, 0, 0.45);
     font-size: 14px;
   }

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

@@ -0,0 +1,118 @@
+<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';
+const appStore = useAppStore();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  copyright: string;
+  flag: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  copyright: '',
+  flag: '',
+});
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.copyright = appStore.copyright;
+    state.flag = appStore.copyright;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要提交当前变更的版权声明吗?`,
+    onOk() {
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      changeValue({ key: 'sys.copyright', value: state.copyright }).then(
+        res => {
+          state.loading = false;
+          hide();
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success('提交保存成功', 3);
+            appStore.copyright = state.copyright;
+            fnEdit(false);
+          } else {
+            message.error(res.msg, 3);
+          }
+        }
+      );
+    },
+  });
+}
+
+onMounted(() => {
+  state.copyright = appStore.copyright;
+  state.flag = appStore.copyright;
+});
+</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-input
+            v-model:value="state.copyright"
+            allow-clear
+            :maxlength="40"
+            placeholder="输入版权声明"
+          ></a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            :disabled="state.copyright === 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>
+        <div class="sys-copyright">{{ state.copyright }}</div>
+        <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>
+          版权声明限制
+          <a-typography-text mark>40</a-typography-text>
+          位字符长度
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+.sys-copyright {
+  color: rgba(0, 0, 0, 0.75);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-bottom: 24px;
+}
+</style>

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>

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>

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

@@ -0,0 +1,117 @@
+<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';
+const appStore = useAppStore();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  title: string;
+  flag: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  title: '',
+  flag: '',
+});
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.title = appStore.appName;
+    state.flag = appStore.appName;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要提交当前变更的系统名称吗?`,
+    onOk() {
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      changeValue({ key: 'sys.title', value: state.title }).then(res => {
+        state.loading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success('提交保存成功', 3);
+          appStore.appName = state.title;
+          fnEdit(false);
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  state.title = appStore.appName;
+  state.flag = appStore.appName;
+});
+</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-input
+            v-model:value="state.title"
+            allow-clear
+            :maxlength="11"
+            style="width: 224px"
+            placeholder="输入系统名称"
+          ></a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            :disabled="state.title === 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>
+        <div class="sys-title">{{ state.title }}</div>
+        <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>
+          系统名称限制
+          <a-typography-text mark>11</a-typography-text>
+          位字符长度
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+.sys-title {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-bottom: 24px;
+}
+</style>

src/views/system/setting/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { PageContainer } from '@ant-design-vue/pro-layout';
+import ChangeLogo from './components/change-logo.vue';
+import ChangeLogoBG from './components/change-login-bg.vue';
+import ChangeTitle from './components/change-title.vue';
+import ChangeCopyright from './components/change-copyright.vue';
+</script>
+
+<template>
+  <PageContainer>
+    <a-card :bordered="false">
+      <a-divider orientation="left">系统LOGO</a-divider>
+      <ChangeLogo></ChangeLogo>
+      <a-divider orientation="left">系统名称</a-divider>
+      <ChangeTitle></ChangeTitle>
+      <a-divider orientation="left">版权声明</a-divider>
+      <ChangeCopyright></ChangeCopyright>
+      <a-divider orientation="left">登录界面背景</a-divider>
+      <ChangeLogoBG></ChangeLogoBG>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>