From 22baf253bf40cb7a81776f4aa22b73230febbb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 6 Nov 2024 18:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=96=B0=E5=A2=9Ex?=
 =?UTF-8?q?=E8=BD=B4=E5=92=8Cy=E8=BD=B4=E7=9A=84=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-icon/model-icon-style.vue           | 20 +++++++++++++++++++
 .../model-image/model-image-style.vue         | 20 +++++++++++++++++++
 .../model-lines/model-lines-style.vue         | 20 +++++++++++++++++++
 .../model-panel/model-panel-style.vue         | 20 +++++++++++++++++++
 .../model-text/model-text-style.vue           | 19 ++++++++++++++++++
 src/components/common/drag-group/index.vue    |  2 +-
 .../model-custom/components/index.vue         |  2 +-
 .../model-title/model-title-styles.vue        |  8 +++++---
 8 files changed, 106 insertions(+), 5 deletions(-)

diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index 973e3613..221bcc24 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
                 <el-form-item label="选择图标">
@@ -126,6 +136,16 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.direction = type.toString();
 };
 
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
+
 watch(
     diy_data,
     (val) => {
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index d94a1aac..f1f49ec3 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">图片设置</div>
                 <el-form-item label="上传图片">
@@ -95,6 +105,16 @@ const img_src_change = (key: string) => {
     }
 }
 
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
+
 watch(
     diy_data,
     (val) => {
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index 883a3223..99c027d9 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container class="">
                 <div class="mb-12">线条设置</div>
                 <el-form-item label="竖线横线">
@@ -56,6 +66,16 @@ const { diy_data } = toRefs(state);
 const form = ref(diy_data.value.com_data);
 const center_height = defineModel("height", { type: Number, default: 0 })
 
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
+
 watch(diy_data, (val) => {
     let width = 0;
     let height = 0;
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 72bdc356..6a1e8899 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
                 <el-form-item label="链接">
@@ -95,6 +105,16 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.direction = type.toString();
 };
 
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
+
 watch(
     diy_data,
     (val) => {
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 430133e2..38e6a3b7 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,16 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
                 <el-form-item label="文本内容">
@@ -148,6 +158,15 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.color_list = arry;
     form.value.direction = type.toString();
 };
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
 
 watchEffect(() => {
     form.value.line_text_size  = form.value.text_size;
diff --git a/src/components/common/drag-group/index.vue b/src/components/common/drag-group/index.vue
index 469e4233..7417d684 100644
--- a/src/components/common/drag-group/index.vue
+++ b/src/components/common/drag-group/index.vue
@@ -47,7 +47,7 @@ onUnmounted(() => {
 const edit_index = ref(-1);
 // 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
 const outerClick = (e: any) => {
-    if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
+    if ((!isEmpty(e.target.className) && !e.target.className.includes('do-not-trigger')) && (!isEmpty(e.target.parentNode.className) && !e.target.parentNode.className.includes('do-not-trigger'))) {
         edit_close_processing(edit_index.value);
         edit_index.value = -1;
     }
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index e53b628d..8fb9b45a 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -217,7 +217,7 @@ const on_edit = (index: number) => {
 };
 // 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
 const outerClick = (e: any) => {
-    if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
+    if ((!isEmpty(e.target.className) && !e.target.className.includes('do-not-trigger')) && (!isEmpty(e.target.parentNode.className) && !e.target.parentNode.className.includes('do-not-trigger'))) {
         edit_close_processing(edit_index.value);
         edit_index.value = -1;
     }
diff --git a/src/components/model-title/model-title-styles.vue b/src/components/model-title/model-title-styles.vue
index 50741e9f..c14072c3 100644
--- a/src/components/model-title/model-title-styles.vue
+++ b/src/components/model-title/model-title-styles.vue
@@ -15,6 +15,11 @@
                         </div>
                     </el-form-item>
                 </template>
+                <template v-if="!isEmpty(content.img_src)">
+                    <el-form-item label="图片高度">
+                        <slider v-model="form.img_height" :max="500"></slider>
+                    </el-form-item>
+                </template>
                 <el-form-item label="主标题">
                     <div class="flex-col gap-10 w">
                         <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
@@ -46,9 +51,6 @@
                         <el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
                     </el-form-item>
                 </template>
-                <el-form-item label="图片高度">
-                    <slider v-model="form.img_height" :max="500"></slider>
-                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>