From 55bf2e997d0d3880ccd1dca69ebbf956583b2e0a 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, 15 Aug 2024 09:40:04 +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

---
 .../model-carousel/model-carousel-styles.vue  |  2 +-
 .../components/tabs-styles.vue                |  2 +-
 src/components/model-data-magic/index.vue     | 59 +++++++++++++------
 .../model-data-magic-content.vue              |  2 +-
 .../model-nav-group-styles.vue                |  2 +-
 src/layout/components/main/index.vue          | 18 +++---
 src/utils/index.ts                            |  2 -
 7 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index 35fab800..520be12d 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -10,7 +10,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">轮播设置</div>
                 <el-form-item label="自动轮播">
-                    <el-switch v-model="form.is_roll" size="large" />
+                    <el-switch v-model="form.is_roll" />
                 </el-form-item>
                 <el-form-item label="间隔时间">
                     <slider v-model="form.interval_time" :max="100"></slider>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 2466d94e..bad973c4 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -22,7 +22,7 @@
             </div>
         </el-form-item>
         <el-form-item label="自动轮播">
-            <el-switch v-model="form.is_roll" size="large" />
+            <el-switch v-model="form.is_roll" />
         </el-form-item>
         <el-form-item label="轮播方向">
             <el-radio-group v-model="form.rotation_direction" class="ml-4">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 3adb4260..e3e0e10b 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -2,19 +2,21 @@
     <div ref="container" class="img-magic" :style="style_container">
         <div class="w h re outer-style">
             <!-- 风格9 -->
-            <template v-if="form.style_actived == 8">
+            <template v-if="form.style_actived == 7">
                 <div class="flex-row align-c jc-c style-size flex-wrap">
                     <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
                         <!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
+                        <div></div>
                     </div>
                 </div>
             </template>
             <template v-else>
                 <div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${selected_style(item)} ${ item.data_style.background_style }`">
-                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :height="`${ getSelectedHeight(item) }px`" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
-                        <el-carousel-item v-for="(item2, index) in item.data_content.product_list" :key="index">
-                            {{ item2 }}
-                            {{ item.actived_index }}
+                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
+                        <el-carousel-item v-for="(item2, index) in item.data_content.list" :key="index">
+                            <template>
+
+                            </template>
                         </el-carousel-item>
                     </el-carousel>
                     <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
@@ -100,8 +102,8 @@ const getSelectedLeft = (item: CubeItem) => {
     return (item.start.x - 1) * cubeCellWidth.value;
 };
 // 根据当前页面大小计算成百分比
-const selected_style = (item: CubeItem) => {
-    return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
+const selected_style = (item: CubeItem, ) => {
+    return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
 };
 // 计算成百分比
 const percentage = (num: number) => {
@@ -128,21 +130,33 @@ watch(props.value.content, (val) => {
         // 指示器样式
         data_style.indicator_styles = indicator_style(data_style);
         data_style.background_style = background_style(data_style);
+
+        const { is_roll, rotation_direction, interval_time } = data_style;
+        const { product_list, img_list } = data_content;
+        data_content.list = data_content.data_type == 'commodity' ? data_content.product_list : data_content.img_list;
+        const new_data = {
+            interval_time: interval_time,
+            is_roll: is_roll,
+            rotation_direction: rotation_direction,
+            product_list: [...product_list], // 确保深拷贝
+            img_list: [...img_list] // 确保深拷贝
+        };
+        let old_data = old_list.value[key];
         // 获取旧数据
-        if (!isEmpty(old_list.value[key])) {
-            let old_data = old_list.value[key];
-            const { is_roll, rotation_direction, interval_time } = data_style;
-            // 判断跟历史的是否相等，不相等更新组件时间
-            if (old_data.interval_time != interval_time || old_data.is_roll != is_roll || old_data.rotation_direction != rotation_direction) {
-                // 记录历史保存的时间
-                old_data = {
-                    interval_time: interval_time,
-                    is_roll: is_roll,
-                    rotation_direction: rotation_direction
-                };
+        if (!isEmpty(old_data)) {
+            // 旧数据
+            const oldDataStringified = JSON.stringify(old_data);
+            // 新数据
+            const newDataStringified = JSON.stringify(new_data);
+
+            if (oldDataStringified !== newDataStringified) {
+                // 更新旧数据
+                old_data = JSON.parse(newDataStringified);
                 // 更新轮播图的key，确保更换时能重新更新轮播图
                 data_style.carouselKey = get_math();
             }
+        } else {
+            old_data = new_data;
         }
     });
     data_magic_list.value = data;
@@ -204,7 +218,7 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 }
 
 .img-spacing-border {
-    padding: v-bind(spacing);
+    margin: v-bind(spacing);
 }
 
 .style-size {
@@ -240,6 +254,13 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
         margin: 0 0.3rem;
     }
 }
+// 轮播高度自适应
+:deep(.el-carousel) {
+    height: 100%;
+    .el-carousel__container {
+        height: 100%;
+    }
+}
 
 :deep(.el-image) {
     height: 100%;
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index ccbfc02f..42f7eff5 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -58,7 +58,7 @@ const data_style = {
     direction: '180deg',
     background_img_style: 2,
     background_img_url: [],
-    is_roll: true,
+    is_roll: false,
     rotation_direction: 'horizontal',
     interval_time: 2,
     heading_color: '#000',
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index b09e3c79..41e8974f 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -11,7 +11,7 @@
                 <card-container class="mb-8">
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
-                        <el-switch v-model="form.is_roll" size="large" />
+                        <el-switch v-model="form.is_roll" />
                     </el-form-item>
                     <el-form-item label="间隔时间">
                         <slider v-model="form.interval_time" :max="100"></slider>
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 08a47fa5..05027dc8 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -166,6 +166,7 @@ const props = defineProps({
 const diy_data = ref(props.diyData);
 const page_data = ref(props.header);
 const footer_nav = ref(props.footer);
+const content_style = ref('');
 // 监听
 watch(
     () => props.diyData,
@@ -173,12 +174,21 @@ watch(
         diy_data.value = newValue;
     }
 );
+// 监听
 watch(
     () => props.header,
     (newValue) => {
         page_data.value = newValue;
+        page_settings();
     }
 );
+
+watchEffect(() => {
+    const content =  props.header.com_data?.content || {};
+    const container_common_styles = gradient_computer(content) + background_computer(content);
+
+    content_style.value = container_common_styles;
+})
 watch(
     () => props.footer,
     (newValue) => {
@@ -455,13 +465,6 @@ const scroll = () => {
 };
 //#endregion
 //#region 页面设置 导出 导入
-const content_style = ref('');
-watch(page_data.value.com_data, (val) => {
-    const content = val?.content || {};
-    const container_common_styles = gradient_computer(content) + background_computer(content);
-
-    content_style.value = container_common_styles;
-});
 // 在组件挂载时默认执行
 onMounted(() => {
     page_settings();
@@ -477,6 +480,7 @@ const page_settings = () => {
             item.show_tabs = false;
         });
     }
+    
     emits('rightUpdate', page_data.value, diy_data.value, page_data.value, footer_nav.value);
 };
 //导出
diff --git a/src/utils/index.ts b/src/utils/index.ts
index bf596efe..4338315e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -33,7 +33,6 @@ export function gradient_computer(new_style: gradientStyle) {
  * @returns 返回一个字符串，包含生成的线性渐变样式。
  */
 export function gradient_handle(color_list: color_list[], direction: string) {
-    console.log(color_list, direction);
     let container_common_styles = ``;
     if (color_list && color_list.length > 0) {
         container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
@@ -64,7 +63,6 @@ export function gradient_handle(color_list: color_list[], direction: string) {
         });
         container_common_styles += `);`;
     }
-    console.log(container_common_styles);
 
     return container_common_styles;
 }