From 9d35fc823758bcb040dfce21e4334f5b159a9ce1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 24 Apr 2025 18:23:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BF=9D=E5=AD=98=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |  9 ++++++++-
 src/styles/common.scss                       | 19 +++++++++++++++++-
 src/views/layout/components/navbar/index.vue |  4 ++--
 src/views/layout/index.vue                   | 21 +++++++++++++++-----
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7706c29b..f636b78a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <template>
     <el-config-provider :locale="zhCn">
+        <keep-alive>
+            <div class="message-box-custom"><div class="el-message__icon"></div></div>
+        </keep-alive>
         <router-view />
     </el-config-provider>
 </template>
@@ -10,4 +13,8 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn';
 // 英文
 import en from 'element-plus/es/locale/lang/en';
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.message-box-custom {
+    visibility: hidden;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index fe5291e2..85fe6b0d 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -324,4 +324,21 @@
     color: #fff;
     white-space: nowrap;
     border-radius: 0.8rem 0 0.8rem 0;
-}
\ No newline at end of file
+}
+
+
+.message-box-custom {
+    .el-message__icon {
+        background: url('@/assets/loading.svg') no-repeat center; /* 使用自定义图标 */
+        background-size: contain;
+        animation: message__icon 2s infinite linear;
+    }
+}
+@keyframes message__icon {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/views/layout/components/navbar/index.vue b/src/views/layout/components/navbar/index.vue
index bad3d92c..1147dfd8 100644
--- a/src/views/layout/components/navbar/index.vue
+++ b/src/views/layout/components/navbar/index.vue
@@ -15,7 +15,7 @@
         </div>
         <div class="nav-right">
             <el-button class="btn-plain" @click="upload_manage">上传管理</el-button>
-            <el-button class="btn-plain" @click="preview_event">预览</el-button>
+            <el-button class="btn-plain" :class="saveDisabled ? 'disabled' : ''" :disabled="saveDisabled" @click="preview_event">预览</el-button>
             <el-button class="btn-plain" :class="saveDisabled ? 'disabled' : ''" :disabled="saveDisabled" @click="save_event">仅保存</el-button>
             <el-button class="btn-white" :class="saveDisabled ? 'disabled' : ''" :disabled="saveDisabled" @click="save_close_event">保存关闭</el-button>
         </div>
@@ -95,7 +95,7 @@ const upload_manage = () => {
 };
 //  * 点击预览时的事件处理函数。
 const preview_event = () => {
-    emit('preview');
+    emit('preview', true);
 };
 // 点击仅保存时的事件处理函数。
 const save_event = () => {
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 7c91e95b..5b28f30c 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -230,7 +230,8 @@ const loading_event = () => {
 //#region 顶部导航回调方法 ---------------------start
 const preview_dialog = ref(false);
 const diy_id = ref('');
-const preview_event = () => {
+const preview_event = (bool: boolean) => {
+    save_disabled.value = bool;
     save_formmat_form_data(form.value, false, false, true);
 };
 const save_disabled = ref(false);
@@ -244,6 +245,13 @@ const save_close_event = (bool: boolean) => {
 };
 // save_formmat_form_data: 保存数据， data： 数据， close： 是否关闭， is_export： 是否导出， is_preview： 是否预览
 const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_export: boolean = false, is_preview: boolean = false) => {
+    ElMessage({
+        message: '保存中',
+        type: 'success',
+        duration: 0,
+        icon: 'Loading',
+        customClass: 'message-box-custom',
+    })
     const clone_form = cloneDeep(data);
     clone_form.header.show_tabs = '1';
     // 去除位置颜色
@@ -401,10 +409,13 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
             setTimeout(() => {
                 save_disabled.value = false;
             }, 500);
-            // 如果是导出或预览模式，则不显示保存成功的消息
-            if (!(is_export || is_preview)) {
-                ElMessage.success('保存成功');
-            }
+            ElMessage.closeAll();
+            setTimeout(() => {
+              // 如果是导出或预览模式，则不显示保存成功的消息
+                if (!(is_export || is_preview)) {
+                    ElMessage.success('保存成功');
+                }
+            }, 100);
             if (close) {
                 ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
                     .then(() => {