From 110f8a2c8f96850a84e33492bf7b0e577d638784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 24 Dec 2024 15:19:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/index.vue         | 84 +++++++++--------
 .../model-custom/model-custom-styles.vue      | 23 ++++-
 .../components/custom/index.vue               | 90 ++++++++++++++-----
 .../magic-cube-settings/tabs-styles.vue       | 23 +++++
 .../model-data-magic-content.vue              | 21 +++++
 src/config/const/custom.ts                    | 22 +++++
 6 files changed, 202 insertions(+), 61 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index a719fc63..e202d901 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -1,48 +1,51 @@
 <template>
     <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 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 oh" :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 :style="style_img_container">
+            <div :style="style_content_container">
+                <div class="w h re" :style="style_content_img_container">
+                    <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
+                        <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 oh" :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>
-                    </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" :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 oh" :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>
-                    </swiper-slide>
-                </swiper>
-                <div v-if="new_style.is_show == '1' && dot_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
-                    <template v-if="new_style.indicator_style == 'num'">
-                        <div :style="indicator_style" class="dot-item">
-                            <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
-                        </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" :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 oh" :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>
+                            </swiper-slide>
+                        </swiper>
+                        <div v-if="new_style.is_show == '1' && dot_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
+                            <template v-if="new_style.indicator_style == 'num'">
+                                <div :style="indicator_style" class="dot-item">
+                                    <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
+                            </template>
+                        </div>
+                    </div>
                     <template v-else>
-                        <div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
+                        <div :style="style_chunk_container">
+                            <div class="w h oh" :style="style_chunk_img_container">
+                                <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
+                            </div>
+                        </div>
                     </template>
                 </div>
             </div>
-            <template v-else>
-                <div :style="style_chunk_container">
-                    <div class="w h oh" :style="style_chunk_img_container">
-                        <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
-                    </div>
-                </div>
-            </template>
         </div>
     </div>
-    
 </template>
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
@@ -92,11 +95,15 @@ const gap_width = computed(() => {
 const scale = ref(1);
 // 计算整体宽度和比例
 watchEffect(() => {
-    const { common_style, data_style } = new_style.value;
+    const { common_style, data_style, data_content_style } = new_style.value;
+    // 外层左右间距
     const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right;
+    // 内容左右间距
+    const content_spacing = data_content_style.margin_left + data_content_style.margin_right + data_content_style.padding_left + data_content_style.padding_right;
+    // 数据左右间距
     const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
     // 根据容器宽度来计算内部大小
-    const width = 390 - outer_spacing - internal_spacing - props.outerContainerPadding;
+    const width = 390 - outer_spacing - internal_spacing - content_spacing - props.outerContainerPadding;
     // 获得对应宽度的比例
     scale.value = width / 390;
 });
@@ -104,7 +111,10 @@ watchEffect(() => {
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
-
+// 内容样式
+const style_content_container = computed(() => common_styles_computer(new_style.value.data_content_style));
+const style_content_img_container = computed(() => common_img_computer(new_style.value.data_content_style));
+// 数据样式
 const style_chunk_container = computed(() => common_styles_computer(new_style.value.data_style));
 const style_chunk_img_container = computed(() => common_img_computer(new_style.value.data_style));
 
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index 9a8b34fa..1679d1ba 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -50,6 +50,22 @@
                     </div>
                 </el-form-item>
             </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">内容样式</div>
+                <el-form-item label="背景">
+                    <background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
+                </el-form-item>
+                <el-form-item label="外间距">
+                    <margin :value="form.data_content_style"></margin>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :value="form.data_content_style"></padding>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.data_content_style"></radius>
+                </el-form-item>
+            </card-container>
         </el-form>
         <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" />
@@ -72,7 +88,12 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
-
+// 内容样式
+const mult_content_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.data_content_style.color_list = arry;
+    form.value.data_content_style.direction = type.toString();
+}
+// 数据样式
 const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.data_style.color_list = arry;
     form.value.data_style.direction = type.toString();
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index 5d5d82e8..9a8dd606 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -1,36 +1,40 @@
 <template>
-    <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
-        <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 :style="style_content_container">
+        <div :style="style_content_img_container">
+            <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
+                <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" :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 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>
+                    </swiper-slide>
+                </swiper>
             </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" :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">
+            <template v-else>
+                <div 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>
+                        <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
                     </div>
                 </div>
-            </swiper-slide>
-        </swiper>
+            </template>
+        </div>
     </div>
-    <template v-else>
-        <div class="oh" :style="style_container">
-            <div class="w h oh" :style="style_img_container">
-                <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
-            </div>
-        </div>
-    </template>
 </template>
 <script setup lang="ts">
-import { background_computer, get_math, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+import { background_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
 import { isEmpty } from "lodash";
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -86,6 +90,46 @@ interface new_style {
     data_background_img: uploadList[];
     data_background_img_style: string;
 }
+console.log(new_style.value.data_content_style);
+
+const defalt_style: any = {
+    color_list: [{ color: '', color_percentage: undefined }],
+    direction: '180deg',
+    background_img_style: '2',
+    background_img: [],
+    radius: 0,
+    radius_top_left: 0,
+    radius_top_right: 0,
+    radius_bottom_left: 0,
+    radius_bottom_right: 0,
+    padding: 0,
+    padding_top: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    padding_right: 0,
+    margin: 0,
+    margin_top: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    margin_right: 0,
+};
+// 内容样式
+const style_content_container = computed(() => {
+    if (!isEmpty(new_style.value.data_content_style)) {
+        return common_styles_computer(new_style.value.data_content_style);
+    } else {
+        // 没有样式的时候，使用默认样式
+        return common_styles_computer(defalt_style);
+    }
+});
+const style_content_img_container = computed(() => {
+    if (!isEmpty(new_style.value.data_content_style)) {
+        return common_img_computer(new_style.value.data_content_style);
+    } else {
+        return common_img_computer(defalt_style);
+    }
+});
+
 // 用于样式显示
 const style_container = computed(() => {
     if (!isEmpty(new_style.value)) {
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 9ab814af..644d34da 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
@@ -94,6 +94,24 @@
             </el-form-item>
         </card-container>
         <div class="bg-f5 divider-line" />
+        <template v-if="tabs_content.data_type == 'custom'">
+            <card-container>
+                <div class="mb-12">内容样式</div>
+                <el-form-item label="背景">
+                    <background-common :key="form.carouselKey" v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="data_content_mult_color_picker_event" />
+                </el-form-item>
+                <el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
+                    <margin :key="form.carouselKey" :value="form.data_content_style"></margin>
+                </el-form-item>
+                <el-form-item label="内间距">
+                    <padding :key="form.carouselKey" :value="form.data_content_style"></padding>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :key="form.carouselKey" :value="form.data_content_style"></radius>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
+        </template>
     </template>
     <template v-if="tabs_content.data_type === 'goods'">
         <card-container>
@@ -200,6 +218,11 @@ const img_radius_change = (radius: radiusStyle) => {
         'radius_bottom_right',
     ]));
 }
+// 内容底板颜色
+const data_content_mult_color_picker_event = (arry: string[], type: number) => {
+    form.value.data_content_style.color_list = arry;
+    form.value.data_content_style.direction = type.toString();
+}
 // 数据底板颜色
 const data_mult_color_picker_event = (arry: string[], type: number) => {
     form.value.data_color_list = arry;
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 b0de818a..77000c68 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,27 @@ const data_style = {
         radius_bottom_left: 4,
         radius_bottom_right: 4,
     },
+    data_content_style: {
+        color_list: [{ color: '', color_percentage: undefined }],
+        direction: '180deg',
+        background_img_style: '2',
+        background_img: [],
+        radius: 0,
+        radius_top_left: 0,
+        radius_top_right: 0,
+        radius_bottom_left: 0,
+        radius_bottom_right: 0,
+        padding: 0,
+        padding_top: 0,
+        padding_bottom: 0,
+        padding_left: 0,
+        padding_right: 0,
+        margin: 0,
+        margin_top: 0,
+        margin_bottom: 0,
+        margin_left: 0,
+        margin_right: 0,
+    },
     column_gap: 0,
     row_gap: 0,
     indicator_style: 'dot',
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index 061660c5..babc6a76 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -99,6 +99,7 @@ interface defaultSearch {
         indicator_size: number;
         indicator_radius: radiusStyle;
         data_style: object;
+        data_content_style: object;
         row_gap: number;
         column_gap: number;
         // 通用样式
@@ -176,6 +177,27 @@ const defaultSearch: defaultSearch = {
             margin_left: 0,
             margin_right: 0,
         },
+        data_content_style: {
+            color_list: [{ color: '', color_percentage: undefined }],
+            direction: '180deg',
+            background_img_style: '2',
+            background_img: [],
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+            padding_right: 0,
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         row_gap: 0,
         column_gap: 0,
         common_style: {