1.解决清空后双向绑定失效的问题

src/components/page-settings/index.vue

@@ -2,10 +2,10 @@
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
             <div class="pt-15 pl-18 pr-22 w pb-6">
-                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
+                <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
             </div>
             <div class="model-head tc re mlr-12 mt-6">
-                <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form.indicator_location == 'flex-end' || form.theme == 3 ? '95px' : '0'}, text_style]">
+                <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form.indicator_location == 'flex-end' || form.theme == 3 ? '95px' : '0' }, text_style]">
                     <template v-if="['2', '3'].includes(form.theme)">
                         <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
                     </template>
@@ -17,9 +17,12 @@
                     </template>
                 </div>
                 <div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
-                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon></div>
+                    <div class="flex-row gap-2">
+                        <icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span
+                        ><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
+                    </div>
                     <template v-if="['5'].includes(form.theme)">
-                        <div class="flex-1" style="padding-right:95px">
+                        <div class="flex-1" style="padding-right: 95px">
                             <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
                         </div>
                     </template>
@@ -45,9 +48,18 @@ const emits = defineEmits(['page_settings']);
 const page_settings = () => {
     emits('page_settings');
 };
+// 监听props.pageData
+watch(
+    () => props.pageData,
+    (newVal) => {
+        console.log(newVal, 'header');
+    },
+    { immediate: true, deep: true }
+);
+
 const form = computed(() => props.pageData.com_data.content);
 const new_style = computed(() => props.pageData.com_data.style);
-const position = computed(() => new_style.value.up_slide_display == '1' ? 'absolute' : 'relative');
+const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative'));
 const roll_style = computed(() => {
     let style = ``;
     const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style.value;
@@ -66,7 +78,7 @@ const url_computer = (name: string) => {
     const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
     return new_url;
 };
-const text_style = computed(() => `font-weight:${ new_style.value.header_background_title_typeface }; font-size: ${ new_style.value.header_background_title_size }px; color: ${ new_style.value.header_background_title_color };`);
+const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`);
 </script>
 <style lang="scss" scoped>
 .model-top {
@@ -116,5 +128,4 @@ const text_style = computed(() => `font-weight:${ new_style.value.header_backgro
         }
     }
 }
-
 </style>

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

@@ -266,7 +266,7 @@ const toggle_drawer = () => {
     drawer_selected.value = !drawer_selected.value;
 };
 // 父组件调用的方法
-const emits = defineEmits(['rightUpdate', 'import', 'export']);
+const emits = defineEmits(['rightUpdate', 'import', 'export', 'clear']);
 const activeNames = reactive(['base', 'plugins', 'tool']);
 interface componentsData {
     name: string;
@@ -583,10 +583,8 @@ const upload_change = async (uploadFile: UploadFile) => {
 // 清空列表
 const clear_click = () => {
     app?.appContext.config.globalProperties.$common.message_box('清空后不可恢复，确定继续吗?', 'warning').then(() => {
-        page_data.value.com_data = cloneDeep(defaultSettings.header_nav);
-        footer_nav.value.com_data = cloneDeep(defaultSettings.footer_nav);
-        diy_data.value = [];
         page_settings();
+        emits('clear');
     });
 };
 //#endregion

src/views/layout/index.vue

@@ -4,7 +4,7 @@
             <template v-if="!is_empty">
                 <navbar v-model="form.model" @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" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event"></app-main>
+                    <app-main :diy-data="form.diy_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>
                 </div>
             </template>
@@ -90,11 +90,12 @@ const api_count = ref(0);
 const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
     diy_data_item.value = item;
     form.value.diy_data = diy;
-    // form.value.header = header;
+    form.value.header = header;
-    // form.value.footer = footer;
+    form.value.footer = footer;
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
 };
+// 导入数据
 const import_data_event = (uploadFile: UploadFile) => {
     // 截取document.location.search字符串内id/后面的所有字段
     const form_data = new FormData();
@@ -110,9 +111,15 @@ const import_data_event = (uploadFile: UploadFile) => {
         init();
     });
 };
+// 导出数据
 const export_data_event = () => {
     save_formmat_form_data(form.value, false, true);
 };
+// 清空数据
+const clear_data_event = () => {
+    let new_tem_form = cloneDeep(temp_form.value);
+    form.value = new_tem_form;
+};
 //#region 页面初始化数据 ---------------------start
 // 页面加载
 onBeforeMount(async () => {