From 18418737ce79da0aa861be584b5be916b61a7288 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, 6 Jan 2025 10:48:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom-group/index.vue              | 29 ++-----------
 src/components/model-carousel/index.vue       | 27 +-----------
 src/components/model-custom/index.vue         | 27 +-----------
 src/components/model-data-magic/index.vue     | 32 ++-------------
 src/components/model-nav-group/index.vue      | 27 +-----------
 src/utils/index.ts                            | 41 +++++++++++++++++++
 6 files changed, 54 insertions(+), 129 deletions(-)

diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue
index 5fb41a45..77514287 100644
--- a/src/components/common/custom-module/model-custom-group/index.vue
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -48,7 +48,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, get_is_eligible } from '@/utils';
+import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, get_is_eligible, get_indicator_location } from '@/utils';
 import { isEmpty } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -100,6 +100,7 @@ const is_show = computed(() => {
     return get_is_eligible(field_list, condition, props);
 });
 
+//#region 自定义组真实数据
 const data_source_content_list = computed(() => {
     if (!isEmpty(props.sourceList)) {
         const data_source_id = form.value.data_source_field.id;
@@ -125,6 +126,7 @@ const get_nested_property = (obj: any, path: string) => {
     // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
     return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : []), obj) ?? [];
 }
+// #endregion
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style) + 'overflow: auto;');
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
@@ -237,30 +239,7 @@ const slideChange = (swiper: { realIndex: number }) => {
 //#endregion
 //#region 指示器位置
 // 根据指示器的位置来处理 对齐方式的处理
-const indicator_location_style = computed(() => {
-    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
-    let styles = '';
-    if (['left', 'right'].includes(indicator_new_location)) {
-        if (indicator_location == 'flex-start') {
-            styles += `top: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `top: 50%; transform: translateY(-50%);`;
-        } else {
-            styles += `bottom: 0px;`;
-        }
-    } else {
-        if (indicator_location == 'flex-start') {
-            styles += `left: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `left: 50%; transform: translateX(-50%);`;
-        } else {
-            styles += `right: 0px;`;
-        }
-    }
-    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-    return styles;
-});
+const indicator_location_style = computed(() => get_indicator_location(new_style.value));
 //#endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index ffa808cd..0c731f9f 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -74,7 +74,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer, background_computer } from '@/utils';
+import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer, common_img_computer, background_computer, get_indicator_location } from '@/utils';
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay, EffectCoverflow } from 'swiper/modules';
@@ -128,30 +128,7 @@ const indicator_style = computed(() => {
     return indicator_styles;
 });
 // 根据指示器的位置来处理 对齐方式的处理
-const indicator_location_style = computed(() => {
-    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
-    let styles = '';
-    if (['left', 'right'].includes(indicator_new_location)) {
-        if (indicator_location == 'flex-start') {
-            styles += `top: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `top: 50%; transform: translateY(-50%);`;
-        } else {
-            styles += `bottom: 0px;`;
-        }
-    } else {
-        if (indicator_location == 'flex-start') {
-            styles += `left: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `left: 50%; transform: translateX(-50%);`;
-        } else {
-            styles += `right: 0px;`;
-        }
-    }
-    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-    return styles;
-});
+const indicator_location_style = computed(() => get_indicator_location(new_style.value));
 //#endregion
 const seat_list = computed(() => {
     let seat_list = [];
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 7638760f..87e4f8b5 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -49,7 +49,7 @@
 </template>
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
-import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer } from '@/utils';
+import { border_width, common_img_computer, common_styles_computer, get_indicator_location, get_math, radius_computer } from '@/utils';
 import { source_list } from '@/config/const/custom';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -217,30 +217,7 @@ const slideChange = (swiper: { realIndex: number }) => {
 //#endregion
 //#region 指示器位置
 // 根据指示器的位置来处理 对齐方式的处理
-const indicator_location_style = computed(() => {
-    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
-    let styles = '';
-    if (['left', 'right'].includes(indicator_new_location)) {
-        if (indicator_location == 'flex-start') {
-            styles += `top: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `top: 50%; transform: translateY(-50%);`;
-        } else {
-            styles += `bottom: 0px;`;
-        }
-    } else {
-        if (indicator_location == 'flex-start') {
-            styles += `left: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `left: 50%; transform: translateX(-50%);`;
-        } else {
-            styles += `right: 0px;`;
-        }
-    }
-    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-    return styles;
-});
+const indicator_location_style = computed(() => get_indicator_location(new_style.value));
 //#endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index dc76a732..0c11434c 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -106,7 +106,7 @@
 <script setup lang="ts">
 import customIndex from './components/custom/index.vue';
 import videoIndex from './components/video/index.vue';
-import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, border_width } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, border_width, get_indicator_location } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -217,33 +217,6 @@ const indicator_style = (item: any) => {
     }
     return styles;
 };
-//#region 指示器位置
-// 根据指示器的位置来处理 对齐方式的处理
-const indicator_location_style = (item: any) => {
-    const { indicator_new_location,  indicator_location, indicator_bottom } = item;
-    let styles = '';
-    if (['left', 'right'].includes(indicator_new_location)) {
-        if (indicator_location == 'flex-start') {
-            styles += `top: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `top: 50%; transform: translateY(-50%);`;
-        } else {
-            styles += `bottom: 0px;`;
-        }
-    } else {
-        if (indicator_location == 'flex-start') {
-            styles += `left: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `left: 50%; transform: translateX(-50%);`;
-        } else {
-            styles += `right: 0px;`;
-        }
-    }
-    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-    return styles;
-};
-//#endregion
 const style_actived_color = (item: any, index: number) => {
    return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
 }
@@ -382,7 +355,8 @@ watch(props.value.content, (val) => {
         item.actived_index = 0;
         // 指示器样式
         data_style.indicator_styles = indicator_style(data_style);
-        data_style.indicator_location_styles = indicator_location_style(data_style);
+        // 根据指示器的位置来处理
+        data_style.indicator_location_styles = get_indicator_location(data_style);
         // 获取当前的margin
         const chunk_margin = data_style?.chunk_margin || old_margin;
         // 计算左右间距
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 0137437c..1833d34e 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -29,7 +29,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, radius_computer, get_math, common_img_computer, padding_computer } from '@/utils';
+import { common_styles_computer, radius_computer, get_math, common_img_computer, padding_computer, get_indicator_location } from '@/utils';
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -88,30 +88,7 @@ const indicator_style = computed(() => {
     return indicator_styles;
 });
 // 根据指示器的位置来处理 对齐方式的处理
-const indicator_location_style = computed(() => {
-    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
-    let styles = '';
-    if (['left', 'right'].includes(indicator_new_location)) {
-        if (indicator_location == 'flex-start') {
-            styles += `top: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `top: 50%; transform: translateY(-50%);`;
-        } else {
-            styles += `bottom: 0px;`;
-        }
-    } else {
-        if (indicator_location == 'flex-start') {
-            styles += `left: 0px;`;
-        } else if (indicator_location == 'center') {
-            styles += `left: 50%; transform: translateX(-50%);`;
-        } else {
-            styles += `right: 0px;`;
-        }
-    }
-    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
-    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
-    return styles;
-});
+const indicator_location_style = computed(() => get_indicator_location(new_style.value));
 //#endregion
 // 导航间距
 const nav_space = computed(() => `row-gap:${ new_style.value?.space || '0' }px;`);
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 68c3f7a6..aca90d17 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -218,6 +218,47 @@ const compare_numbers = (a: number, b: number, type: string): boolean => {
     }
 }
 
+
+/**
+ * 根据新的样式对象计算指示器的位置样式
+ * 
+ * 此函数根据指示器的新位置和当前位置以及底部距离来生成相应的CSS样式
+ * 它处理的是一个包含指示器位置信息的对象，并返回一个字符串形式的CSS样式
+ * 
+ * @param new_style 包含指示器新位置和当前位置及底部距离的样式对象
+ * @returns 返回计算出的指示器位置CSS样式字符串
+ */
+type indicator_data = { indicator_new_location: string, indicator_location: string, indicator_bottom: number }
+export const get_indicator_location = (new_style: indicator_data) => {
+    // 解构指示器的位置信息
+    const { indicator_new_location = '',  indicator_location = '', indicator_bottom = 0 } = new_style;
+    let styles = '';
+    // 根据指示器的新位置是水平方向（left或right）还是垂直方向（默认）来决定如何设置样式
+    if (['left', 'right'].includes(indicator_new_location)) {
+        // 如果是水平方向，根据指示器的当前位置设置top、center或bottom样式
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
+        }
+    } else {
+        // 如果是垂直方向，根据指示器的当前位置设置left、center或right样式
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
+        }
+    }
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    // 返回计算出的指示器位置样式
+    return styles;
+}
+
 /**
  * 判断给定条件是否符合资格，主要用于自定义内部各个组件是否符合显示条件
  * @param field_list 字段列表，包含各个字段的数据