From 152e7aedfb876fec6b6c54ef52ffb556cf3031c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 23 Dec 2024 17:33:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/index.vue         | 32 ++++++++++++++-----
 .../model-custom/model-custom-content.vue     |  6 ++--
 .../model-custom/model-custom-styles.vue      | 10 ++++++
 .../components/custom/index.vue               | 25 ++++++++++++---
 .../magic-cube-settings/tabs-styles.vue       | 10 ++++++
 .../model-data-magic-content.vue              |  2 ++
 src/components/model-search/index.vue         |  2 +-
 src/components/page-settings/index.vue        | 21 +++++++++---
 src/config/const/custom.ts                    |  4 +++
 9 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 21ca53b9..30c735c0 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -2,14 +2,18 @@
     <div :style="style_container">
         <div class="w h re" :style="style_img_container">
             <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
-                <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
-                    <div class="w h" :style="style_chunk_img_container">
-                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
+                <div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
+                    <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
+                        <div :style="style_chunk_container">
+                            <div class="w h" :style="style_chunk_img_container">
+                                <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </template>
             <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
-                <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
+                <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
                     <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                         <div :style="style_chunk_container">
                             <div class="w h" :style="style_chunk_img_container">
@@ -77,6 +81,13 @@ onBeforeMount(() => {
         }
     }
 });
+// 计算纵向显示的宽度
+const gap_width = computed(() => {
+    const model_number = Number(form.value.data_source_carousel_col);
+    // 计算间隔的空间。(gap * gap数量) / 模块数量
+    let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
+    return `calc(${100 / model_number}% - ${gap}px)`;
+});
 //#region 计算比例大小，和每块当前的大小
 const scale = ref(1);
 // 计算整体宽度和比例
@@ -124,6 +135,7 @@ const slides_per_group = ref(1);
 const dot_list = ref<unknown[]>([]);
 const swiper_height = ref(390);
 const slides_per_view = ref(1);
+const space_between = ref(0);
 // 内容参数的集合
 watchEffect(() => {
     // 是否滚动
@@ -135,22 +147,26 @@ watchEffect(() => {
     } else {
         autoplay.value = false;
     }
+    // 间距
+    space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
+    // 显示数量
+    const data_source_carousel_col = Number(form.value.data_source_carousel_col);
     // 判断是平移还是整屏滚动
-    slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(form.value.data_source_carousel_col);
+    slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : Number(data_source_carousel_col);
     // 商品数量大于列数的时候，高度是列数，否则是当前的数量
-    const col = data_source_content_list.value.length > Number(form.value.data_source_carousel_col) ? Number(form.value.data_source_carousel_col) : data_source_content_list.value.length;
+    const col = data_source_content_list.value.length > Number(data_source_carousel_col) ? Number(data_source_carousel_col) : data_source_content_list.value.length;
     slides_per_view.value = col;
     let num = 0;
     // 轮播图数量
     if (!isEmpty(data_source_content_list.value)) {
-        num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(form.value.data_source_carousel_col));
+        num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
     }
     const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
     // 轮播图高度控制
     if (form.value.data_source_direction == 'horizontal') {
         swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
     } else {
-        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col;
+        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
     }
     dot_list.value = Array(num);
     // 更新轮播图的key，确保更换时能重新更新轮播图
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index a8f4db42..adafd9a7 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -20,7 +20,7 @@
                                 <el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '纵向展示' : item == 'vertical-scroll' ? '纵向滑动' : '横向滑动' }}</el-radio>
                             </el-radio-group>
                         </el-form-item>
-                        <template v-if="default_type_data?.show_number.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)">
+                        <template v-if="default_type_data?.show_number.length > 0">
                             <el-form-item label="每屏显示">
                                 <el-radio-group v-model="form.data_source_carousel_col">
                                     <el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '行' : '列' }}展示</el-radio>
@@ -117,8 +117,8 @@ const form = ref(props.value);
 const center_width = ref(props.magicWidth);
 // 可拖拽区域的宽度
 const custom_width = computed(() => {
-    // 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == horizontal 为横向滑动
-    if (form.value.is_custom_data == '1' && form.value.data_source_direction == 'horizontal') {
+    // 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction != vertical-scroll 不为纵向滑动的都是横向宽度变化
+    if (form.value.is_custom_data == '1' && form.value.data_source_direction != 'vertical-scroll') {
         return center_width.value / form.value.data_source_carousel_col;
     } else {
         return center_width.value;
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index 3f1df080..9a8b34fa 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -39,6 +39,16 @@
                 <el-form-item label="圆角">
                     <radius :value="form.data_style"></radius>
                 </el-form-item>
+                <el-form-item label="数据间距">
+                    <div class="flex-col w h gap-10">
+                        <el-form-item v-if="['vertical', 'horizontal'].includes(data.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.column_gap" :max="100"></slider>
+                        </el-form-item>
+                        <el-form-item v-if="['vertical', 'vertical-scroll'].includes(data.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
+                            <slider v-model="form.row_gap" :max="100"></slider>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
             </card-container>
         </el-form>
         <div class="bg-f5 divider-line" />
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index 41d3f028..4a5f497e 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -1,13 +1,17 @@
 <template>
     <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
-        <div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
-            <div class="w h oh" :style="style_img_container">
-                <data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
+        <div class="flex-row flex-wrap" :style="`row-gap: ${ new_style.row_gap }px;column-gap: ${ new_style.column_gap }px;`">
+            <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
+                <div :style="style_container">
+                    <div class="w h oh" :style="style_img_container">
+                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
+                    </div>
+                </div>
             </div>
         </div>
     </template>
     <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == 'horizontal' ? `height:100%;` : `height: ${ swiper_height }px;`">
-        <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
+        <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == 'horizontal' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="space_between" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
             <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                 <div :style="style_container">
                     <div class="w h" :style="style_img_container">
@@ -119,6 +123,13 @@ watchEffect(() => {
     const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
     scale.value = (width / form.value.width) * props.magicScale;
 })
+// 计算纵向显示的宽度
+const gap_width = computed(() => {
+    const model_number = Number(form.value.data_source_carousel_col);
+    // 计算间隔的空间。(gap * gap数量) / 模块数量
+    let gap = (new_style.value.column_gap * (model_number - 1)) / model_number;
+    return `calc(${100 / model_number}% - ${gap}px)`;
+});
 //#region 轮播图操作
 // 轮播图key值
 const carouselKey = ref('0');
@@ -126,6 +137,7 @@ const autoplay = ref<boolean | object>(false);
 const slides_per_group = ref(1);
 const slides_per_view = ref(1);
 const swiper_height = ref(150);
+const space_between = ref(0);
 const emit = defineEmits(['carousel_change']);
 // 内容参数的集合
 watchEffect(() => {
@@ -138,6 +150,9 @@ watchEffect(() => {
     } else {
         autoplay.value = false;
     }
+    // 间距
+    space_between.value = form.value.data_source_direction == 'horizontal' ? new_style.value.column_gap : new_style.value.row_gap;
+    // 显示数量
     const carousel_col = Number(form.value?.data_source_carousel_col) || 1;
     // 判断是平移还是整屏滚动
     slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col;
@@ -151,7 +166,7 @@ watchEffect(() => {
     if (form.value.data_source_direction == '2') {
         swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
     } else {
-        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col;
+        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value);
     }
     // 更新轮播图的key，确保更换时能重新更新轮播图
     carouselKey.value = get_math();
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index 784634af..9ab814af 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -79,6 +79,16 @@
             <el-form-item label="圆角">
                 <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
             </el-form-item>
+            <el-form-item v-if="tabs_content.data_type == 'custom'" label="数据间距">
+                <div class="flex-col w h gap-10">
+                    <el-form-item v-if="['vertical', 'horizontal'].includes(tabs_content.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
+                        <slider v-model="form.column_gap" :max="100"></slider>
+                    </el-form-item>
+                    <el-form-item v-if="['vertical', 'vertical-scroll'].includes(tabs_content.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
+                        <slider v-model="form.row_gap" :max="100"></slider>
+                    </el-form-item>
+                </div>
+            </el-form-item>
             <el-form-item v-if="tabs_content.data_type == 'goods'" label="数据间距">
                 <slider v-model="form.data_goods_gap" :min="0" :max="50"></slider>
             </el-form-item>
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 8403115f..b0de818a 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -186,6 +186,8 @@ const data_style = {
         radius_bottom_left: 4,
         radius_bottom_right: 4,
     },
+    column_gap: 0,
+    row_gap: 0,
     indicator_style: 'dot',
     indicator_new_location: 'bottom',
     indicator_location: 'center',
diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 1bd18186..7ca13207 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -9,7 +9,7 @@
                                 <image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
                                 <icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
                             </template>
-                            <span class="location-name size-12 text-line-1">{{ form.positioning_name }}</span>
+                            <span class="location-name size-12 text-line-1" :style="`max-width: ${ form.theme == '4' ? '150px' : '100px;' }`">{{ form.positioning_name }}</span>
                             <template v-if="form.is_location_right_icon_show == '1'">
                                 <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
                                 <icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index e560d089..8d6d685b 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -41,7 +41,7 @@
                                             <image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
                                             <icon v-else :name="form.location_left_icon" :size="new_style?.location_left_icon_size + '' || '12'"></icon>
                                         </template>
-                                        <span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
+                                        <span class="location-name size-14 text-line-1" :style="location_name_style">{{ form.positioning_name }}</span>
                                         <template v-if="form.is_location_right_icon_show == '1'">
                                             <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
                                             <icon v-else :name="form.location_right_icon" :size="new_style?.location_right_icon_size + '' || '12'"></icon>
@@ -64,7 +64,7 @@
                         <div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
                             <template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
                                 <div class="flex-1">
-                                    <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                                    <model-search :value="pageData.com_data" :is-page-settings="true" search-type="header" :header-location-style="style_location_container" :header-location-img-style="style_location_img_container"></model-search>
                                 </div>
                             </template>
                             <div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
@@ -199,6 +199,21 @@ const style_location_img_container = computed(() => {
     const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
     return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height}px;line-height: ${height}px;`;
 });
+
+const location_name_style = computed(() => {
+    let width = 0;
+    if (is_search_alone_row.value && is_icon_alone_row.value) {
+        width = 200;
+    } else if (is_search_alone_row.value || is_icon_alone_row.value) {
+        width = 100;
+    }
+    if (form.value.theme == '4') {
+       return `max-width: ${ 150 + width }px;`;
+    } else {
+       return `max-width: ${ 100 + width }px;`;
+    }
+});
+
 // 文字样式
 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 position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : ''));
@@ -230,8 +245,6 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     .model-head-content {
         height: 3.2rem;
         .location-name {
-            // line-height: 100%;
-            max-width: 15rem;
             width: 100%;
             flex-basis: content;
             flex-shrink: 1;
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index baa7513f..061660c5 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -99,6 +99,8 @@ interface defaultSearch {
         indicator_size: number;
         indicator_radius: radiusStyle;
         data_style: object;
+        row_gap: number;
+        column_gap: number;
         // 通用样式
         common_style: object;
     };
@@ -174,6 +176,8 @@ const defaultSearch: defaultSearch = {
             margin_left: 0,
             margin_right: 0,
         },
+        row_gap: 0,
+        column_gap: 0,
         common_style: {
             ...defaultCommon,
             color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],