From 850efc04f05528070fb0c7afc5895a3870821abf 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, 20 Feb 2025 18:01:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E7=9A=84=E8=B7=9F=E9=9A=8F=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/custom-location/index.vue   | 34 +++++++++++++++++--
 .../common/custom-module/model-text/index.vue |  3 +-
 .../model-text/model-text-style.vue           | 12 +++++--
 .../model-custom/components/index-default.ts  |  8 +++++
 .../model-custom/components/index.vue         |  2 +-
 5 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index 3d504920..86158dfe 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -1,22 +1,52 @@
 <template>
     <card-container>
         <div class="mb-12">定位设置</div>
-        <el-form-item label="X轴">
+        <el-form-item label="跟随组件">
+            <el-select v-model="data_follow.follow_id" value-key="id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="follow_id_change()">
+                <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
+            </el-select>
+        </el-form-item>
+        <template v-if="data_follow.follow_id != ''">
+            <el-form-item label="跟随方式">
+                <el-radio-group v-model="data_follow.follow_type" @change="operation_end">
+                    <el-radio value="none">无</el-radio>
+                    <el-radio value="left">跟随左侧</el-radio>
+                    <el-radio value="top">跟随上边</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="跟随间距">
+                <slider v-model="data_follow.follow_spacing" :max="390" @operation_end="operation_end"></slider>
+            </el-form-item>
+        </template>
+        <el-form-item v-if="data_follow.follow_type != 'left'" label="X轴">
             <slider v-model="data_location.x" :max="390" @operation_end="operation_end"></slider>
         </el-form-item>
-        <el-form-item label="Y轴">
+        <el-form-item v-if="data_follow.follow_type != 'top'" label="Y轴">
             <slider v-model="data_location.y" :max="1000" @operation_end="operation_end"></slider>
         </el-form-item>
     </card-container>
 </template>
 
 <script lang="ts" setup>
+const props = defineProps({
+    options: {
+        type: Array<any>,
+        default: () => [],
+    },
+});
+// 跟随内容
+const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0 }});
+// x轴 Y轴设计
 const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0, staging_y: 0 }) });
 const emit = defineEmits(['operation_end']);
 // 失去焦点时触发事件
 const operation_end = () => {
     emit('operation_end');
 };
+// 跟随id发生变化时的处理
+const follow_id_change = () => {
+
+}
 // 监听y轴
 watch(() => data_location.value.y, (val) => {
     if (val !== data_location.value.staging_y) {
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 4f5444d3..5185d1dd 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -205,7 +205,8 @@ const set_count = () => {
     if (props.isDisplayPanel) {
         return '';
     } else {
-        return `width: ${ form.value.com_width }px; height: ${ form.value.com_height }px;`;
+        const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0'} = form.value;
+        return `${ is_width_auto == '1' ? `width:100%;max-width: ${ com_width }px;` : `width:${ com_width }px;`}${ is_height_auto == '1' ? `height:100%;max-height: ${ com_height }px;` : `height: ${ com_height }px;` }`;
     }
 };
 </script>
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 8f039f7d..3f8c9307 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w h bg-f">
-        <el-form :model="form" label-width="70">
+        <el-form :model="form" label-width="80">
             <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
@@ -86,10 +86,16 @@
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
-                <el-form-item label="容器宽度">
+                <el-form-item label="宽度自适应">
+                    <el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="operation_end"/>
+                </el-form-item>
+                <el-form-item :label="form.is_width_auto == '1' ? '最大宽度' : '容器宽度'">
                     <slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
                 </el-form-item>
-                <el-form-item label="容器高度">
+                <el-form-item label="高度自适应">
+                    <el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="operation_end"/>
+                </el-form-item>
+                <el-form-item :label="form.is_width_auto == '1' ? '最大高度' : '容器宽度'">
                     <slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 4fc3336e..ebb78fc9 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -21,6 +21,9 @@ const text_com_data = {
         middle: '',
         right: '',
     },
+    is_width_auto: '0',
+    is_height_auto: '0',
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     is_rich_text: '0',
     is_up_down: '1',
     text_color: '#000',
@@ -77,6 +80,7 @@ const img_com_data = {
         id: '',
         option: {}
     },
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     img_radius: {
         radius: 0,
         radius_top_left: 0,
@@ -125,6 +129,7 @@ const line_com_data = {
         type: '', // 条件类型
         value: '', // 值
     },
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     animation_style: {
         type: 'none',
         number: 'infinite',
@@ -147,6 +152,7 @@ const icon_com_data = {
         id: '',
         option: {}
     },
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     is_rich_icon: '0',
     is_up_down: '1',
     icon_color: '#000',
@@ -197,6 +203,7 @@ const panel_com_data = {
         id: '',
         option: {}
     },
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     icon_rotate: 0,
     background_img_style: '2',
     background_img: [],
@@ -234,6 +241,7 @@ const custom_group_com_data = {
         id: '',
         option: []
     },
+    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
     // 条件判断
     condition: {
         field: '', // 字段id
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 0d7cc959..61068acd 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -68,7 +68,7 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#f00f00" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
-                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': (diy_data.length - 1) - index }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
                                     <div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>