修改保存时的显示逻辑

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>

src/styles/common.scss

@@ -324,4 +324,21 @@
     color: #fff;
     white-space: nowrap;
     border-radius: 0.8rem 0 0.8rem 0;
-}
+}
+
+
+.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);
+    }
+}

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 = () => {

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(() => {