1.保存按钮新增禁止重复点击功能

src/views/layout/components/navbar/index.vue

@@ -16,8 +16,8 @@
         <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" @click="save_event">仅保存</el-button>
-            <el-button class="btn-white" @click="save_close_event">保存关闭</el-button>
+            <el-button class="btn-plain" :disabled="true" @click="save_event">仅保存</el-button>
+            <el-button class="btn-white" :disabled="saveDisabled" @click="save_close_event">保存关闭</el-button>
         </div>
     </div>
     <el-dialog v-model="dialog_visible" class="radius-lg" width="650" draggable :close-on-click-modal="false" append-to-body>
@@ -53,6 +53,12 @@
 </template>
 <script setup lang="ts">
 import { FormInstance, FormRules } from 'element-plus';
+const props = defineProps({
+    saveDisabled: {
+        type: Boolean,
+        default: false,
+    },
+});
 const modelValue = defineModel({ type: Object, default: {} });
 // #region 变量 --------------------start
 const is_custom_dialog = ref(false);
@@ -91,15 +97,13 @@ const upload_manage = () => {
 const preview_event = () => {
     emit('preview');
 };
-
 // 点击仅保存时的事件处理函数。
 const save_event = () => {
-    emit('save');
+    emit('save', true);
 };
-
 // 点击保存并关闭时的事件处理函数。
 const save_close_event = () => {
-    emit('saveClose');
+    emit('saveClose', true);
 };
 
 const confirm_event = async (formEl: FormInstance | undefined) => {

src/views/layout/index.vue

@@ -2,7 +2,7 @@
     <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
         <template v-if="!loading_content">
             <template v-if="!is_empty">
-                <navbar v-model="form.model" @preview="preview_event" @save="save_event" @save-close="save_close_event" />
+                <navbar v-model="form.model" :save-disabled="save_disabled" @preview="preview_event" @save="save_event" @save-close="save_close_event" />
                 <div class="app-wrapper-content flex-row">
                     <app-main :diy-data="form.diy_data" :tabs-data="form.tabs_data" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event" @clear="clear_data_event"></app-main>
                     <settings :key="key" :value="diy_data_item"></settings>
@@ -177,10 +177,13 @@ const diy_id = ref('');
 const preview_event = () => {
     save_formmat_form_data(form.value, false, false, true);
 };
-const save_event = () => {
+const save_disabled = ref(false);
+const save_event = (bool: boolean) => {
+    save_disabled.value = bool;
     save_formmat_form_data(form.value);
 };
-const save_close_event = () => {
+const save_close_event = (bool: boolean) => {
+    save_disabled.value = bool;
     save_formmat_form_data(form.value, true);
 };
 // save_formmat_form_data: 保存数据， data： 数据， close： 是否关闭， is_export： 是否导出， is_preview： 是否预览
@@ -275,6 +278,10 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
             form.value.id = String(res.data);
             history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
         }
+
+        setTimeout(() => {
+            save_disabled.value = false;
+        }, 500);
     });
 };
 //#endregion 顶部导航回调方法 ---------------------end

src/views/tabbar/index.vue

@@ -7,7 +7,7 @@
                     <settings :key="key" :value="form"></settings>
                 </div>
                 <div class="app-wrapper-footer flex-row align-c">
-                    <el-button type="primary" class="footer-save" @click="save_event">保存</el-button>
+                    <el-button type="primary" class="footer-save" :disabled="save_disabled" @click="save_event">保存</el-button>
                 </div>
             </template>
             <template v-else>
@@ -71,16 +71,21 @@ const loading_event = () => {
 //#endregion 页面初始化数据 ---------------------end
 
 //#region 顶部导航回调方法 ---------------------start
+const save_disabled = ref(false);
 const save_event = () => {
     const clone_form = cloneDeep(form.value);
     const new_data = {
         type: 'home',
         config: clone_form,
     };
+    save_disabled.value = true;
     // 数据改造
     DiyAPI.saveTabbar(new_data).then((res: any) => {
         // 如果是导出或预览模式，则不显示保存成功的消息
         ElMessage.success('保存成功');
+        setTimeout(() => {
+            save_disabled.value = false;
+        }, 500);
     });
 };
 //#endregion 顶部导航回调方法 ---------------------end