From a43c75f31f78c9bb506e82a44757d0230db78f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 14 Sep 2024 15:21:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/diy.ts                              |   1 +
 src/components/base/color-picker/index.vue  |   1 -
 src/components/common/div-content/index.vue |  54 +-----
 src/components/common/tabs-view/index.vue   |   9 +-
 src/components/model-goods-list/index.vue   |  10 +-
 src/views/layout/components/main/index.vue  | 193 ++++++++++++++++----
 src/views/layout/index.vue                  |  11 +-
 7 files changed, 180 insertions(+), 99 deletions(-)

diff --git a/src/api/diy.ts b/src/api/diy.ts
index c6b507b4..3d819fbf 100644
--- a/src/api/diy.ts
+++ b/src/api/diy.ts
@@ -52,6 +52,7 @@ export interface headerAndFooter {
     com_data: any;
 }
 export interface diyConfig {
+    tabs_data: Array<any>;
     diy_data: Array<any>;
     footer: headerAndFooter;
     header: headerAndFooter;
diff --git a/src/components/base/color-picker/index.vue b/src/components/base/color-picker/index.vue
index 9d806667..d64a8e4a 100644
--- a/src/components/base/color-picker/index.vue
+++ b/src/components/base/color-picker/index.vue
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const color = defineModel({ type: String });
 const reset_event = () => {
-    console.log(1);
     if (color.value == props.defaultColor) {
         return;
     } else {
diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 42e2b2c4..ba2b6c8c 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -3,7 +3,7 @@
         <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
             <el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
             <el-icon class="iconfont icon-del" @click.stop="del(index)" />
-            <el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
+            <el-icon :class="['iconfont icon-copy', {'disabled': props.isTabs }] " @click.stop="copy(index)" />
             <el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
             <el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
         </div>
@@ -104,17 +104,17 @@
 </template>
 <script lang="ts" setup>
 const app = getCurrentInstance();
-import { get_math } from '@/utils';
-import { cloneDeep, isEmpty } from 'lodash';
 interface Props {
     diyData: any[];
     showModelBorder: boolean;
+    isTabs?: boolean;
     mainContentStyle: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     diyData: () => [],
     showModelBorder: false,
+    isTabs: false,
     mainContentStyle: ''
 });
 const diy_data = ref(props.diyData);
@@ -205,7 +205,7 @@ const arrow_disable_method = (item_key: string, index: number, key: string) => {
     }
     return arrow_disable;
 };
-const emits = defineEmits(['on_choose', 'set_show_tabs', 'del']);
+const emits = defineEmits(['on_choose', 'del', 'copy', 'moveUp', 'moveDown']);
 
 // 是否启用
 const set_enable = (index: number) => {
@@ -221,18 +221,11 @@ const on_choose = (index: number, show_tabs: string) => {
 
 // 复制
 const copy = (index: number) => {
-    // 获取当前数据, 复制的时候id更换一下
-    const new_data = {
-        ...cloneDeep(get_diy_index_data(index)),
-        id: get_math(),
-    };
-    // 在当前位置下插入数据
-    diy_data.value.splice(index, 0, new_data);
-    emits('set_show_tabs', index + 1);
+    emits('copy', index);
 };
 // 删除
 const del = (index: number) => {
-    emits('del', index);
+    emits('del', index, props.isTabs);
 };
 // 获取当前传递过来的index对应的diy_data中的数据
 const get_diy_index_data = (index: number) => {
@@ -241,46 +234,17 @@ const get_diy_index_data = (index: number) => {
 // 向上移动
 const moveUp = (index: number, flag: boolean) => {
     if (flag) {
-        const old_data = get_diy_index_data(index);
-        // 截取前半部分信息, 并反转一下，从最后边往前查询
-        const new_list = diy_data.value.slice(0, index).reverse();
-        const count = float_count(new_list);
-        // 删除当前位置信息
-        diy_data.value.splice(index, 1);
-        // 将数据插入上一层数据中
-        diy_data.value.splice(index - count, 0, old_data);
         // 设置对应的位置为显示
-        emits('set_show_tabs', index - count);
+        emits('moveUp', index, flag);
     }
 };
 // 向下移动
 const moveDown = (index: number, flag: boolean) => {
     if (flag) {
-        const old_data = get_diy_index_data(index);
-        // 截取后半部分信息, 舍弃自身的信息
-        const new_list = diy_data.value.slice(index + 1, diy_data.value.length);
-        const count = float_count(new_list);
-        // 删除当前位置信息
-        diy_data.value.splice(index, 1);
-        // 将数据插入下一层数据中
-        diy_data.value.splice(index + count, 0, old_data);
-        emits('set_show_tabs', index + count);
+        emits('moveDown', index, flag);
     }
 };
-const float_count = (new_list: any[]) => {
-    // 记录一下当前查询的是否是对应的信息
-    let key = '';
-    let conunt = 1;
-    new_list.forEach((item, index) => {
-        // 如果当前的key是悬浮按钮，并且历史的也是就加一，否则的话记录一下当前的key，避免多次循环
-        if (item.key == 'float-window' && isEmpty(key)) {
-            conunt += 1;
-        } else {
-            key = item.key;
-        }
-    });
-    return conunt;
-};
+
 interface FloatBottom {
     [key: string]: string;
 }
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 567d9641..dfda5e04 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -28,13 +28,8 @@ const props = defineProps({
 });
 // const tabs = ref(props.value);
 // 用于页面判断显示
-const state = reactive({
-    form: props.value.content,
-    new_style: props.value.style,
-});
-// 如果需要解构，确保使用toRefs
-const { form, new_style } = toRefs(state);
-
+const form = computed(() => props.value.content);
+const new_style = computed(() => props.value.style);
 // 选中的值
 const tabs_theme_index = computed(() => form.value.tabs_theme);
 //选中的样式
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index c52fc712..1c5e7f60 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -226,7 +226,7 @@ const default_list = {
 //#region 列表数据
 const list = ref<data_list[]>([]);
 // 初始化的时候执行
-onBeforeMount(() => {
+onMounted(() => {
     // 指定商品并且指定商品数组不为空
     if (!isEmpty(form.value.data_list) && form.value.data_type == '0') {
         list.value = form.value.data_list.map((item: any) => ({
@@ -236,12 +236,8 @@ onBeforeMount(() => {
         }));
     } else if (!isEmpty(form.value.data_auto_list) && form.value.data_type == '1') {
         // 筛选商品并且筛选商品数组不为空
-        list.value = form.value.data_auto_list.map((item: any) => ({
-            ...item.data,
-            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
-            new_cover: item.new_cover,
-        }));
-    } else { // 为空的时候走默认数据
+        list.value = form.value.data_auto_list;
+    } else {
         list.value = Array(4).fill(default_list);
     }
 });
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 1e1c279c..6ec8cb98 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -4,14 +4,18 @@
         <el-collapse v-model="activeNames">
             <template v-for="(com, i) in components">
                 <el-collapse-item v-if="com.data.length > 0" :key="i" :title="com.name" :name="com.key">
-                    <VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
-                        <div v-for="item in com.data" :key="item.key" class="item">
-                            <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
-                            <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
-                                <img class="img radius-xs" :src="url_computer(item.key)" />
-                                <div>{{ item.name }}</div>
-                            </div>
-                        </div>
+                    <VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" handle=".is-drag" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :sort="false" :force-fallback="true">
+                        <template v-for="item in com.data" :key="item.key">
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="该组件只可以点击添加, 并且只能添加一次" placement="top" :disabled="item.key != 'tabs'">
+                                <div :class="['item', {'is-drag': item.key != 'tabs' }]" @click.stop="draggable_click(item)">
+                                    <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
+                                    <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
+                                        <img class="img radius-xs" :src="url_computer(item.key)" />
+                                        <div>{{ item.name }}</div>
+                                    </div>
+                                </div>
+                            </el-tooltip>
+                        </template>
                     </VueDraggable>
                 </el-collapse-item>
             </template>
@@ -21,12 +25,17 @@
         <div class="drawer-content pt-5" :style="{ left: drawer_selected ? '0' : '-100%' }">
             <div class="size-14 cr-3 fw pl-12 drawer-title" :style="{ opacity: drawer_selected ? '1' : '0' }">已选组件({{ diy_data.length }})</div>
             <div ref="left_scrollTop" class="drawer-drag-area">
+                <li v-for="(item, index) in tabs_data" :key="index" :class="['flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-drag-bg': item.show_tabs == '1' }]" @click="set_tabs_event(true)">
+                    <el-icon class="iconfont icon-drag size-16 cr-d" />
+                    <span class="size-12 cr-6">{{ item.name }}</span>
+                    <el-icon class="iconfont icon-close-b size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index, true)" />
+                </li>
                 <VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" :on-sort="on_sort">
                     <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
                         <li v-for="(item, index) in diy_data" :key="index" :class="['flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)">
                             <el-icon class="iconfont icon-drag size-16 cr-d" />
                             <span class="size-12 cr-6">{{ item.name }}</span>
-                            <el-icon class="iconfont icon-close-b size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index)" />
+                            <el-icon class="iconfont icon-close-b size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index, false)" />
                         </li>
                     </TransitionGroup>
                 </VueDraggable>
@@ -57,8 +66,9 @@
                     <page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
                         <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
+                            <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true);" @del="del"></div-content>
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
-                                <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @set_show_tabs="set_show_tabs"></div-content>
+                                <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
                             </VueDraggable>
                         </div>
                     </div>
@@ -75,7 +85,7 @@
 <script setup lang="ts">
 import { background_computer, get_math, gradient_computer, padding_computer, radius_computer } from '@/utils';
 import type { UploadFile, UploadFiles } from 'element-plus';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
 import { footerNavCounterStore, commonStore } from '@/store';
@@ -87,6 +97,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    tabsData: {
+        type: Array<any>,
+        default: () => [],
+    },
     footer: {
         type: Object,
         default: () => {},
@@ -97,6 +111,7 @@ const props = defineProps({
     },
 });
 const diy_data = ref(props.diyData);
+const tabs_data = ref(props.tabsData);
 const page_data = ref(props.header);
 const footer_nav = ref(props.footer);
 // 监听
@@ -106,6 +121,12 @@ watch(
         diy_data.value = newValue;
     }
 );
+watch(
+    () => props.tabsData,
+    (newValue) => {
+        tabs_data.value = newValue;
+    }
+);
 // 监听
 watch(
     () => props.header,
@@ -157,7 +178,7 @@ watchEffect(() => {
 // 已选组件逻辑处理
 const drawer_selected = ref(false);
 watchEffect(() => {
-    if (diy_data.value.length > 0) {
+    if (diy_data.value.length > 0 || tabs_data.value.length > 0) {
         drawer_selected.value = true;
     } else {
         drawer_selected.value = false;
@@ -182,13 +203,23 @@ const url_computer = (name: string) => {
 
 //#region 拖拽组件的公共方法
 // 是否显示提示用户拖拽位置
-const isDrag = ref(false);
 const show_model_border = ref(true);
-
-// 开始拖拽的时候显示位置提示
-const onStart = () => {
-    isDrag.value = true;
-};
+// 点击添加tabs组件
+const draggable_click = (item: componentsData) => {
+    if (item.key == 'tabs' && isEmpty(tabs_data.value.length)) {
+        // 添加tabs组件
+        tabs_data.value.push({
+            name: item.name,
+            show_tabs: '1',
+            is_enable: '1',
+            src: '',
+            id: get_math(),
+            key: 'tabs',
+            com_data: cloneDeep(defaultSettings.tabs),
+        });
+        set_tabs_event(true);
+    }
+}
 // 复制
 const clone_item_com_data = (item: commonComponentData) => {
     return {
@@ -205,10 +236,6 @@ const clone_item_com_data = (item: commonComponentData) => {
 // 任何行动都会触发
 const on_sort = (item: SortableEvent) => {
     let index = item?.newIndex || 0;
-    // if (diy_data.value.length - 1 < index) {
-    //     index = diy_data.value.length - 1;
-    // }
-    isDrag.value = false;
     // 设置对应的位置为显示
     set_show_tabs(index);
 };
@@ -231,37 +258,111 @@ const on_choose = (index: number, show_tabs: string) => {
         set_show_tabs(index);
     }
 };
-
+// 复制
+const copy = (index: number) => {
+    // 获取当前数据, 复制的时候id更换一下
+    const new_data = {
+        ...cloneDeep(get_diy_index_data(index)),
+        id: get_math(),
+    };
+    // 在当前位置下插入数据
+    diy_data.value.splice(index, 0, new_data);
+    set_show_tabs(index + 1);
+};
 // 删除
-const del = (index: number) => {
+const del = (index: number, is_tabs: boolean) => {
     app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
-        const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
-        if (show_tabs_index == index) {
-            diy_data.value.splice(index, 1);
+        // 如果是选项卡被删除，则删除tabs组件，并判断是否有拖拽内容，有的选中第一个，没有的时候，默认选中页面设置
+        if (is_tabs) {
+            tabs_data.value.splice(0, 1);
             if (diy_data.value.length > 0) {
-                let new_index: number = index;
-                // 删除的时候如果大于0，则显示上边的数据
-                if (index > 0) {
-                    new_index = new_index - 1;
-                }
-                set_show_tabs(new_index);
+                set_show_tabs(0);
             } else {
                 page_settings();
             }
+            return;
         } else {
-            diy_data.value.splice(index, 1);
+            const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
+            // 删除的是当前的这个数据
+            if (show_tabs_index == index) {
+                diy_data.value.splice(index, 1);
+                if (diy_data.value.length > 0) {
+                    let new_index: number = index;
+                    // 删除的时候如果大于0，则显示上边的数据
+                    if (index > 0) {
+                        new_index = new_index - 1;
+                    }
+                    set_show_tabs(new_index);
+                } else if (tabs_data.value.length > 0) {
+                    // 拖拽数据不存在时，选中tabs组件
+                    set_tabs_event(true);
+                } else {
+                    page_settings();
+                }
+            } else {
+                diy_data.value.splice(index, 1);
+            }
         }
     });
 };
+// 向上移动
+const moveUp = (index: number, flag: boolean) => {
+    if (flag) {
+        const old_data = get_diy_index_data(index);
+        // 截取前半部分信息, 并反转一下，从最后边往前查询
+        const new_list = diy_data.value.slice(0, index).reverse();
+        const count = float_count(new_list);
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入上一层数据中
+        diy_data.value.splice(index - count, 0, old_data);
+        // 设置对应的位置为显示
+        set_show_tabs(index - count);
+    }
+};
+// 向下移动
+const moveDown = (index: number, flag: boolean) => {
+    if (flag) {
+        const old_data = get_diy_index_data(index);
+        // 截取后半部分信息, 舍弃自身的信息
+        const new_list = diy_data.value.slice(index + 1, diy_data.value.length);
+        const count = float_count(new_list);
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入下一层数据中
+        diy_data.value.splice(index + count, 0, old_data);
+        set_show_tabs(index + count);
+    }
+};
+
+const float_count = (new_list: any[]) => {
+    // 记录一下当前查询的是否是对应的信息
+    let key = '';
+    let conunt = 1;
+    new_list.forEach((item, index) => {
+        // 如果当前的key是悬浮按钮，并且历史的也是就加一，否则的话记录一下当前的key，避免多次循环
+        if (item.key == 'float-window' && isEmpty(key)) {
+            conunt += 1;
+        } else {
+            key = item.key;
+        }
+    });
+    return conunt;
+};
+// 获取当前传递过来的index对应的diy_data中的数据
+const get_diy_index_data = (index: number) => {
+    return (<arrayIndex>diy_data.value)[index.toString()];
+};
 // 设置当前选中的是那个
 const set_show_tabs = (index: number) => {
     page_data.value.show_tabs = '0';
     footer_nav.value.show_tabs = '0';
+    set_tabs_event(false);
     diy_data.value.forEach((item, for_index) => {
         // 先将全部的设置为false,再将当前选中的设置为true
         item.show_tabs = '0';
         if (for_index == index) {
-            emits('rightUpdate', item, diy_data.value, page_data.value, footer_nav.value);
+            emits('rightUpdate', item, diy_data.value, page_data.value, footer_nav.value, tabs_data.value);
             item.show_tabs = '1';
             // 悬浮按钮的时候不用滚动到指定位置
             if (item.key !== 'float-window') {
@@ -321,13 +422,30 @@ const page_settings = () => {
     // 页面设置显示
     page_data.value.show_tabs = '1';
     footer_nav.value.show_tabs = '0';
+    set_tabs_event(false);
     // 将拖拽的信息全部变为不选中
     if (diy_data.value.length > 0) {
         diy_data.value.forEach((item) => {
             item.show_tabs = '0';
         });
     }
-    emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
+    emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value, tabs_data.value);
+};
+const set_tabs_event = (choose: Boolean) => {
+    if (tabs_data.value.length > 0 && !choose) {
+        tabs_data.value[0].show_tabs = '0';
+    } else if (tabs_data.value.length > 0 && choose) {
+        tabs_data.value[0].show_tabs = '1';
+        page_data.value.show_tabs = '0';
+        footer_nav.value.show_tabs = '0';
+        // 将拖拽的信息全部变为不选中
+        if (diy_data.value.length > 0) {
+            diy_data.value.forEach((item) => {
+                item.show_tabs = '0';
+            });
+        }
+        emits('rightUpdate', tabs_data.value[0], diy_data.value, page_data.value, footer_nav.value, tabs_data.value);
+    }
 };
 //导出
 const export_click = () => {
@@ -355,13 +473,14 @@ const footer_nav_event = () => {
     // 页面设置显示
     page_data.value.show_tabs = '0';
     footer_nav.value.show_tabs = '1';
+    set_tabs_event(false);
     // 将拖拽的信息全部变为不选中
     if (diy_data.value.length > 0) {
         diy_data.value.forEach((item) => {
             item.show_tabs = '0';
         });
     }
-    emits('rightUpdate', footer_nav.value, diy_data.value, page_data.value, footer_nav.value);
+    emits('rightUpdate', footer_nav.value, diy_data.value, page_data.value, footer_nav.value, tabs_data.value);
 };
 //#endregion
 </script>
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 314422fb..cc28eec1 100644
--- a/src/views/layout/index.vue
+++ b/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" @clear="clear_data_event"></app-main>
+                    <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>
                 </div>
             </template>
@@ -36,6 +36,7 @@ interface diy_data_item {
     };
     header: headerAndFooter;
     footer: headerAndFooter;
+    tabs_data: Array<any>;
     diy_data: Array<any>;
 }
 const temp_form = ref<diy_data_item>({
@@ -58,6 +59,7 @@ const temp_form = ref<diy_data_item>({
         key: 'footer-nav',
         com_data: defaultSettings.footer_nav,
     },
+    tabs_data: [],
     diy_data: [],
 });
 const form = ref<diy_data_item>({
@@ -80,17 +82,19 @@ const form = ref<diy_data_item>({
         key: 'footer-nav',
         com_data: {},
     },
+    tabs_data: [],
     diy_data: [],
 });
 const diy_data_item = ref({});
 
 const key = ref('');
 
-const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
+const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter, tabs_data: [Array<any>]) => {
     diy_data_item.value = item;
     form.value.diy_data = diy;
     form.value.header = header;
     form.value.footer = footer;
+    form.value.tabs_data = tabs_data;
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
 };
@@ -121,6 +125,7 @@ const clear_data_event = () => {
     form.value.footer.show_tabs = '0';
     form.value.header.com_data = new_tem_form.header.com_data;
     form.value.footer.com_data = new_tem_form.footer.com_data;
+    form.value.tabs_data = [];
     form.value.diy_data = [];
     diy_data_item.value = new_tem_form.header;
 };
@@ -262,6 +267,7 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
             },
             header: is_obj(temp_config) ? (temp_config as diyConfig).header : JSON.parse(temp_config as string).header,
             footer: is_obj(temp_config) ? (temp_config as diyConfig).footer : JSON.parse(temp_config as string).footer,
+            tabs_data: is_obj(temp_config) ? (temp_config as diyConfig).tabs_data : JSON.parse(temp_config as string).tabs_data,
             diy_data: is_obj(temp_config) ? (temp_config as diyConfig).diy_data : JSON.parse(temp_config as string).diy_data,
         };
     } catch (error) {
@@ -275,6 +281,7 @@ const form_data_transfor_diy_data = (clone_form: diyData) => {
             },
             header: new_tem_form.header,
             footer: new_tem_form.footer,
+            tabs_data: new_tem_form.tabs_data,
             diy_data: new_tem_form.diy_data,
         };
     }