From 9802d91edf511894fae5d48b4b0777a54d9bd28a 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, 14 Nov 2024 11:34:13 +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=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/index.vue         |  50 ++++---
 .../model-custom/model-custom-content.vue     |  25 ++--
 .../components/carousel/magic-carousel.vue    |  40 +++---
 .../components/custom/index.vue               | 125 ++++++++++++++----
 .../magic-cube-settings/tabs-styles.vue       |  15 ++-
 .../components/video/index.vue                |   4 +-
 .../model-data-magic-content.vue              |  21 ++-
 src/config/const/custom.ts                    |  14 +-
 src/views/layout/index.vue                    |  16 ++-
 9 files changed, 214 insertions(+), 96 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 79c64792..cf16071b 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -1,26 +1,24 @@
 <template>
     <template v-if="data_source_content_list.length > 0">
-        <div v-for="(item1, index1) in data_source_content_list" :key="index1">
-            <div :style="style_container">
-                <div class="w h" :style="style_img_container">
-                    <div class="w h re custom-other">
-                        <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
-                            <template v-if="item.key == 'text'">
-                                <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
-                            </template>
-                            <template v-else-if="item.key == 'img'">
-                                <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
-                            </template>
-                            <template v-else-if="item.key == 'auxiliary-line'">
-                                <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
-                            </template>
-                            <template v-else-if="item.key == 'icon'">
-                                <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
-                            </template>
-                            <template v-else-if="item.key == 'panel'">
-                                <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
-                            </template>
-                        </div>
+        <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
+            <div class="w h" :style="style_img_container">
+                <div class="w h re custom-other">
+                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
+                        <template v-if="item.key == 'text'">
+                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -32,19 +30,19 @@
                 <div class="w h re custom-other">
                     <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
                         <template v-if="item.key == 'text'">
-                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
+                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
                         </template>
                         <template v-else-if="item.key == 'img'">
-                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
+                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
                         </template>
                         <template v-else-if="item.key == 'auxiliary-line'">
-                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
+                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
                         </template>
                         <template v-else-if="item.key == 'icon'">
-                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
+                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
                         </template>
                         <template v-else-if="item.key == 'panel'">
-                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content?.data_list[0] || {}" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
+                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
                         </template>
                     </div>
                 </div>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index eeb15e99..0f4a0194 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -192,6 +192,8 @@ const accomplish = () => {
 const url_value_dialog_visible = ref(false);
 const source_list = {
     goods: {
+        // 存放手动输入的id
+        data_ids: [],
         // 商品类型
         data_type: '0',
         // 商品分类
@@ -206,6 +208,8 @@ const source_list = {
         order_by_rule: '0',
     },
     article: {
+        // 存放手动输入的id
+        data_ids: [],
         data_type: '0',
         number: 4,
         order_by_type: '0',
@@ -216,6 +220,8 @@ const source_list = {
         category_ids: [],
     },
     brand: {
+        // 存放手动输入的id
+        data_ids: [],
         // 商品类型
         data_type: '0',
         // 商品分类
@@ -412,15 +418,18 @@ const get_brand =  () => {
     console.log('品牌分类数据');
     form.data_source_content.data_auto_list = [];
 }
-watch(() => form.data_source_content_value, (new_val, old_val) => {
-    if (form.data_source == 'goods') {
-        get_products();
-    } else if (form.data_source == 'article') {
-        get_article();
-    } else if (form.data_source == 'brand') {
-        get_brand();
+watch(() => form.data_source_content_value, (new_val) => {
+    // 数据发生变化时，如果是自动获取数据，则调用接口获取数据
+    if (new_val.data_type != '0') {
+        if (form.data_source == 'goods') {
+            get_products();
+        } else if (form.data_source == 'article') {
+            get_article();
+        } else if (form.data_source == 'brand') {
+            get_brand();
+        }
     }
-},{ immediate: true, deep: true });
+},{ deep: true });
 //#endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-data-magic/components/carousel/magic-carousel.vue b/src/components/model-data-magic/components/carousel/magic-carousel.vue
index 5b4a4ac6..ca7dd745 100644
--- a/src/components/model-data-magic/components/carousel/magic-carousel.vue
+++ b/src/components/model-data-magic/components/carousel/magic-carousel.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="w h oh" :style="props.type === 'img' ? '' : style_container(form.data_style)">
-        <div class="w h" :style="props.type === 'img' ? '' : style_img_container(form.data_style)">
+    <div class="w h oh" :style="props.type === 'img' ? '' : style_container">
+        <div class="w h" :style="props.type === 'img' ? '' : style_img_container">
             <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
                 <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
                     <template v-if="props.type === 'img'">
@@ -41,31 +41,27 @@ interface new_style {
 
 // 用于样式显示
 const style_container = computed(() => {
-    return (val: new_style) => {
-        if (!isEmpty(val)) {
-            const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = val;
-            const data = {
-                color_list: data_color_list,
-                direction: data_direction,
-            }
-            return gradient_computer(data) + radius_computer(data_radius);
-        } else {
-            return '';
+    if (!isEmpty(form.value.data_style)) {
+        const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = form.value.data_style;
+        const data = {
+            color_list: data_color_list,
+            direction: data_direction,
         }
+        return gradient_computer(data) + radius_computer(data_radius);
+    } else {
+        return '';
     }
 });
 const style_img_container = computed(() => {
-    return (val: new_style) => {
-        if (!isEmpty(val)) {
-            const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
-            const data = {
-                background_img: data_background_img,
-                background_img_style: data_background_img_style,
-            }
-            return padding_computer(data_chunk_padding) + background_computer(data);
-        } else {
-            return '';
+    if (!isEmpty(form.value.data_style)) {
+        const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = form.value.data_style;
+        const data = {
+            background_img: data_background_img,
+            background_img_style: data_background_img_style,
         }
+        return padding_computer(data_chunk_padding) + background_computer(data);
+    } else {
+        return '';
     }
 });
 
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index b0b90661..eaaa6511 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -1,28 +1,58 @@
 <template>
-    <div class="w h oh" :style="style_container">
-        <div class="w h re custom-other oh">
-            <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                <template v-if="item.key == 'text'">
-                    <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
-                </template>
-                <template v-else-if="item.key == 'img'">
-                    <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-image>
-                </template>
-                <template v-else-if="item.key == 'auxiliary-line'">
-                    <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
-                </template>
-                <template v-else-if="item.key == 'icon'">
-                    <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
-                </template>
-                <template v-else-if="item.key == 'panel'">
-                    <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
-                </template>
+    <template v-if="data_source_content_list.length > 0">
+        <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">
+                <div class="w h re custom-other oh">
+                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
+                        <template v-if="item.key == 'text'">
+                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
+                        </template>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
+    </template>
+    <template v-else>
+        <div class="oh" :style="style_container">
+            <div class="w h oh" :style="style_img_container">
+                <div class="w h re custom-other oh">
+                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
+                        <template v-if="item.key == 'text'">
+                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
+                        </template>
+                        <template v-else-if="item.key == 'img'">
+                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
+                        </template>
+                        <template v-else-if="item.key == 'auxiliary-line'">
+                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
+                        </template>
+                        <template v-else-if="item.key == 'icon'">
+                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
+                        </template>
+                        <template v-else-if="item.key == 'panel'">
+                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
 </template>
 <script setup lang="ts">
-import { padding_computer } from '@/utils';
+import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+import { isEmpty } from "lodash";
 
 const props = defineProps({
     value: {
@@ -51,20 +81,69 @@ const scale = ref(1);
 const percentage_count = (val: number) => {
     return val * scale.value + 'px';
 };
-// 公共样式
-const style_container = computed(() => padding_computer(new_style.value.chunk_padding));
+// 数据来源的内容
+let data_source_content_list = computed(() => {
+    if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
+        if (form.value.data_source_content_value.data_type == '0') {
+            return form.value.data_source_content.data_list;
+        } else {
+            return form.value.data_source_content.data_auto_list;
+        }
+    } else {
+        return form.value.data_source_content.data_list;
+    }
+})
+interface new_style {
+    data_color_list: color_list[];
+    data_direction: string; 
+    data_radius: radiusStyle;
+    data_chunk_margin: marginStyle;
+    data_chunk_padding: paddingStyle;
+    data_background_img: uploadList[];
+    data_background_img_style: string;
+}
+// 用于样式显示
+const style_container = computed(() => {
+    if (!isEmpty(new_style.value)) {
+        const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 }} = new_style.value;
+        const data = {
+            color_list: data_color_list,
+            direction: data_direction,
+        }
+        return gradient_computer(data) + radius_computer(data_radius) + margin_computer(data_chunk_margin);
+    } else {
+        return '';
+    }
+});
+const style_img_container = computed(() => {
+    if (!isEmpty(new_style.value)) {
+        const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = new_style.value;
+        const data = {
+            background_img: data_background_img,
+            background_img_style: data_background_img_style,
+        }
+        return padding_computer(data_chunk_padding) + background_computer(data);
+    } else {
+        return '';
+    }
+});
+const custom_height = computed(() => form.value.height * scale.value + 'px');
 watchEffect(() => {
     // 重新赋值
     form.value = props.value.data_content;
     new_style.value = props.value.data_style;
 
     const { padding_left, padding_right } = new_style.value.chunk_padding;
+    const { margin_left, margin_right } = new_style.value.data_chunk_margin;
     // 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
-    const width = form.value.width - padding_left - padding_right - (props.dataSpacing / 2);
+    const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
     scale.value = (width / form.value.width) * props.magicScale;
 })
 </script>
 <style lang="scss" scoped>
+.custom-other {
+    height: v-bind(custom_height);
+}
 .main-content {
     position: absolute;
     overflow: hidden;
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 f0ab5e5e..a1a73549 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
@@ -27,7 +27,7 @@
                 </el-form-item>
             </template>
         </template>
-        <el-form-item label="内间距">
+        <el-form-item v-if="tabs_content.data_type != 'custom'" label="内间距">
             <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
         </el-form-item>
         <template v-if="tabs_content.data_type === 'goods'">
@@ -38,7 +38,7 @@
                 <slider v-model="form.title_data_gap" :min="0" :max="100"></slider>
             </el-form-item>
         </template>
-        <el-form-item label="图片圆角">
+        <el-form-item v-if="tabs_content.data_type != 'custom'" :label="tabs_content.data_type != 'video' ? '图片圆角' : '视频圆角'">
             <radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
         </el-form-item>
     </card-container>
@@ -64,7 +64,7 @@
             </el-form-item>
         </card-container>
     </template>
-    <template v-if="tabs_content.data_type === 'goods'">
+    <template v-if="['goods', 'custom'].includes(tabs_content.data_type)">
         <div class="bg-f5 divider-line" />
         <card-container>
             <div class="mb-12">数据样式</div>
@@ -79,13 +79,16 @@
                     <upload v-model="form.data_background_img" :limit="1"></upload>
                 </div>
             </el-form-item>
+            <el-form-item v-if="tabs_content.data_type == 'custom'" label="外间距">
+                <margin :key="form.carouselKey" :value="form.data_chunk_margin" @update:value="data_chunk_margin_change"></margin>
+            </el-form-item>
             <el-form-item label="内间距">
                 <padding :key="form.carouselKey" :value="form.data_chunk_padding" @update:value="data_chunk_padding_change"></padding>
             </el-form-item>
             <el-form-item label="圆角">
                 <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
             </el-form-item>
-            <el-form-item label="数据间距">
+            <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>
         </card-container>
@@ -169,6 +172,10 @@ const data_mult_color_picker_event = (arry: string[], type: number) => {
 const data_chunk_padding_change = (padding: paddingStyle) => {
     form.value.data_chunk_padding = Object.assign(form.value.data_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
+
+const data_chunk_margin_change = (margin: marginStyle) => {
+    form.value.data_chunk_margin = Object.assign(form.value.data_chunk_margin, pick(margin, ['margin', 'margin_top', 'margin_bottom', 'margin_left', 'margin_right']));
+};
 // 内容圆角
 const data_radius_change = (radius: radiusStyle) => {
     const data = !isEmpty(form.value.data_radius) ? form.value.data_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
diff --git a/src/components/model-data-magic/components/video/index.vue b/src/components/model-data-magic/components/video/index.vue
index 3094534f..4e2310d8 100644
--- a/src/components/model-data-magic/components/video/index.vue
+++ b/src/components/model-data-magic/components/video/index.vue
@@ -13,7 +13,7 @@
 </template>
 <script setup lang="ts">
 import { commonStore } from '@/store';
-import { padding_computer } from '@/utils';
+import { padding_computer, radius_computer } from '@/utils';
 const common_store = commonStore();
 /**
  * @description: 视频 （渲染）
@@ -46,7 +46,7 @@ const video = computed(() => {
     }
 });
 // 公共样式
-const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding));
+const style_container = computed(() => padding_computer(props.dataStyle.chunk_padding) + radius_computer(props.value.img_radius));
 </script>
 <style lang="scss" scoped>
 video {
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 ac3fbcc3..d455ca88 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -134,6 +134,13 @@ const data_style = {
     data_direction: '180deg',
     data_background_img_style: '2',
     data_background_img: [],
+    data_chunk_margin: {
+        margin: 0,
+        margin_top: 0,
+        margin_bottom: 0,
+        margin_left: 0,
+        margin_right: 0,
+    },
     data_chunk_padding: {
         padding: 0,
         padding_top: 0, 
@@ -194,10 +201,18 @@ const data_content = {
     // 图片key  
     img_key: '',
     // 存放数据内容的id
-    data_source_content_value: '',
+    data_source_content_value: {
+        // 存放手动输入的id
+        data_ids: [],
+    },
     // 数据源内容
-    data_source_content: {},
-    // 数据源
+    data_source_content: {
+        // 手动输入
+        data_list: [],
+        // 自动
+        data_auto_list: [],
+    },
+    // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
     data_source:'',
     // 自定义内容列表
     custom_list: [],
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index b9d5bac7..bc4a46ab 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -1,15 +1,18 @@
 import defaultCommon from "./index";
 interface content {
-    data_ids: Array<string>;
     data_list: Array<object>;
     data_auto_list: Array<object>;
 }
+
+interface content_value {
+    data_ids: Array<string>;
+}
 interface defaultSearch {
     content: {
         height: number;
         img_key: string;
         data_source: string;
-        data_source_content_value: string | object;
+        data_source_content_value: content_value;
         data_source_content: content;
         custom_list: string[];
     };
@@ -24,11 +27,12 @@ const defaultSearch: defaultSearch = {
         // 图片key  
         img_key: '',
         // 存放数据内容的id
-        data_source_content_value: '',
-        // 数据源内容
-        data_source_content: {
+        data_source_content_value: {
             // 存放手动输入的id
             data_ids: [],
+        },
+        // 数据源内容
+        data_source_content: {
             // 手动输入
             data_list: [],
             // 自动
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index db90f9dd..34ad0503 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -305,12 +305,22 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                         data_id: item3.data.id,
                     };
                 });
-                item1.data_content.data_source_content_value = item1.data_content.data_source_content.id;
-                item1.data_content.data_source_content = {};
+                // 数据改造,存放手动的id
+                item1.data_content.data_source_content_value.data_ids = item1.data_content.data_source_content.data_list.map((item4: any) => item4.data.id).join(',') || '';
+                // 自动数据清空
+                item1.data_content.data_source_content.data_auto_list = [];
+                // 数据改造,存放手动的清除里边的data
+                item1.data_content.data_source_content.data_list = item1.data_content.data_source_content.data_list.map((item5: any) => {
+                    return {
+                        ...item5,
+                        data: [],
+                        data_id: item5.data.id,
+                    };
+                });
             });
         } else if (new_array_5.includes(item.key)) {
             // 数据改造,存放手动的id
-            item.com_data.content.data_source_content.data_ids = item.com_data.content.data_source_content.data_list.map((item: any) => item.data.id).join(',') || '';
+            item.com_data.content.data_source_content_value.data_ids = item.com_data.content.data_source_content.data_list.map((item: any) => item.data.id).join(',') || '';
             // 自动数据清空
             item.com_data.content.data_source_content.data_auto_list = [];
             // 数据改造,存放手动的清除里边的data