From e26e73b6fe3bd0651e36c713d00ec46c27b3fbad Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 30 Oct 2023 11:43:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=83=8C=E6=99=AF=E5=9B=BE=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=BF=98=E5=8E=9F=E9=BB=98=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/app.ts                      |  4 +-
 src/views/login.vue                           |  5 +-
 .../setting/components/change-login-bg.vue    | 46 ++++++++++++++++---
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 82b0b1ab..aa4b3148 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -78,8 +78,8 @@ const useAppStore = defineStore('app', {
      */
     getLoginBackground(state) {
       const path = state.loginBackground;
-      if (!path) {
-        return '';
+      if (!path || path === '#') {
+        return '#';
       }
       if (validHttp(path)) {
         return path;
diff --git a/src/views/login.vue b/src/views/login.vue
index 6378310b..055b2d9b 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -89,7 +89,7 @@ function fnGetCaptcha() {
 // 判断是否有背景地址
 const calcBG = computed(() => {
   const bgURL = appStore.getLoginBackground;
-  if (bgURL) {
+  if (bgURL && bgURL !== '#') {
     return {
       backgroundImage: `url(${bgURL})`,
       backgroundPosition: 'center',
@@ -101,9 +101,6 @@ const calcBG = computed(() => {
 
 onMounted(() => {
   fnGetCaptcha();
-  const container = document.getElementsByClassName('container').item(0);
-  if (container) {
-  }
 });
 
 /**改变多语言 */
diff --git a/src/views/system/setting/components/change-login-bg.vue b/src/views/system/setting/components/change-login-bg.vue
index 03edc1b7..91e93a15 100644
--- a/src/views/system/setting/components/change-login-bg.vue
+++ b/src/views/system/setting/components/change-login-bg.vue
@@ -76,7 +76,7 @@ function fnUpload(up: UploadRequestOption) {
 function fnEdit(v: boolean) {
   state.edite = v;
   if (!v) {
-    state.filePath = '';
+    state.filePath = '#';
     state.flag = appStore.getLoginBackground;
   }
 }
@@ -107,8 +107,35 @@ function fnSave() {
   });
 }
 
+/**还原初始背景 */
+function fnRevert() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认要将背景图还原到系统初始默认的背景吗?`,
+    onOk() {
+      // 发送请求
+      const hide = message.loading('请稍等...', 0);
+      state.loading = true;
+      state.filePath = '#';
+      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.filePath = appStore.getLoginBackground;
   state.flag = appStore.getLoginBackground;
 });
 </script>
@@ -117,7 +144,8 @@ onMounted(() => {
   <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" />
+        <span v-if="state.flag === '#'">暂无背景图</span>
+        <a-image :src="state.flag" v-else />
       </div>
 
       <a-form layout="vertical" v-if="state.edite">
@@ -152,14 +180,18 @@ onMounted(() => {
       </a-form>
 
       <template v-else>
-        <a-button type="dashed" @click="fnEdit(true)"> 编辑 </a-button>
+        <a-button type="default" @click="fnEdit(true)"> 编辑 </a-button>
+        <a-button type="text" danger style="margin-left: 10px" @click="fnRevert">
+          还原
+        </a-button>
       </template>
     </a-col>
     <a-col :lg="12" :md="12" :xs="24">
       <a-typography>
         <a-typography-paragraph>
-          系统登录界面背景样式如预览区域所示<br />
-          请将选择合适的图片进行进行上传。
+          系统登录界面背景样式如预览区域所示，请以实际显示为准<br />
+          请将选择合适的图片进行进行上传。<br />
+          通过点击《还原》按钮，将背景图还原到系统初始默认的背景。
         </a-typography-paragraph>
       </a-typography>
     </a-col>
@@ -169,7 +201,9 @@ onMounted(() => {
 <style lang="less" scoped>
 .sys-login-bg {
   width: 300px;
+  min-height: 150px;
   border: 1px var(--ant-primary-color) solid;
   margin-bottom: 24px;
+  text-align: center;
 }
 </style>