From 06cd197c93b55aa992f14dc8f5a81855922f76c6 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, 29 Oct 2024 18:50:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E5=92=8C=E6=95=B0=E6=8D=AE=E9=AD=94=E6=96=B9=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    |  8 ++--
 .../components/product-list-show.vue          |  5 ++-
 src/components/model-data-magic/index.vue     | 15 ++++---
 .../model-data-magic-content.vue              | 15 ++++---
 src/components/model-img-magic/index.vue      | 16 ++++----
 .../model-img-magic-content.vue               | 41 +++++++++++++------
 src/config/const/data-magic.ts                |  3 ++
 src/config/const/img-magic.ts                 |  3 ++
 src/utils/index.ts                            |  8 ++++
 9 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 7f89f682..e8dcacf3 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -18,10 +18,10 @@
                 <template v-else>
                     <div class="cube-selected-text">
                         <template v-if="styleActived !== 10">
-                            {{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
+                            建议{{ Math.round((props.cubeWidth / densityNum) * (item.end.x - item.start.x + 1)) }}
                             x
-                            {{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
-                            像素
+                            {{ Math.round((props.cubeHeight / densityNum) * (item.end.y - item.start.y + 1)) }}
+                            px
                             <template v-if="props.type == 'data'">
                                 <div>{{ data_title(item) }}</div>
                             </template>
@@ -264,6 +264,7 @@ const data_title = (item: CubeItem) => {
         text-align: center;
         box-sizing: border-box;
         position: relative;
+        overflow: hidden;
         .item {
             border: 1px solid #fff;
             border-top: 0;
@@ -307,6 +308,7 @@ const data_title = (item: CubeItem) => {
     }
     .cube-selected {
         position: absolute;
+        overflow: hidden;
         background-color: #eee;
         border: 1px solid #fff;
         text-align: center;
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index 65321ffe..9c97764d 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -61,7 +61,7 @@
         </div>
     </template>
     <template v-else>
-        <div class="flex-col gap-20 align-c w h">
+        <div class="flex-col gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
                 <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h shop-max-height">
                     <template v-if="!isEmpty(item.new_cover)">
@@ -108,6 +108,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const split_list = computed(() => props.value || {});
+const gap_height = computed(() => 20 / 3 + 'px');
 </script>
 
 <style lang="scss" scoped>
@@ -138,7 +139,7 @@ const split_list = computed(() => props.value || {});
     border-radius: 0.8rem;
 }
 .shop-max-height{
-    max-height: 33%;
+    max-height: calc((100% / 3) - v-bind(gap_height));
 }
 .half-width {
     width: 50%;
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 2efa6e08..fed8d51d 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -70,7 +70,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer, common_img_computer } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -95,7 +95,10 @@ const spacing = computed(() => (new_style.value?.image_spacing || 0) / 2 + 'px')
 const content_radius = computed(() => radius_computer(new_style.value.data_radius));
 //#region 容器大小计算
 const div_width = ref(0);
-const container_size = computed(() => div_width.value + 'px');
+// 如果容器高度为空，则取容器宽度
+const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
+
+const container_size = computed(() => container_height.value + 'px');
 const container = ref<HTMLElement | null>(null);
 onMounted(() => {
     if (container.value) {
@@ -129,7 +132,7 @@ const density = ref('4');
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
-const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
+const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
 const getSelectedWidth = (item: data_magic) => {
     return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
 };
@@ -147,11 +150,7 @@ const getSelectedLeft = (item: data_magic) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: data_magic) => {
-    return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
-};
-// 计算成百分比
-const percentage = (num: number) => {
-    return percentage_count(num, div_width.value);
+    return `overflow: hidden;width: calc(${getSelectedWidth(item)}px - ${ outer_spacing.value } ); height: calc(${getSelectedHeight(item)}px - ${ outer_spacing.value } ); top: ${getSelectedTop(item)}px;left: ${getSelectedLeft(item)}px;`;
 };
 //#endregion
 //#region 组装页面显示的数据
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 bbc3246e..abb333b4 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -10,6 +10,9 @@
                         </div>
                     </div>
                 </el-form-item>
+                <el-form-item label="容器高度" label-width="60">
+                    <slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
@@ -18,10 +21,10 @@
                     <!-- 风格9 -->
                     <template v-if="form.style_actived == 7">
                         <div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
-                            <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
+                            <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5 oh', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
                                 <div class="cube-selected-text">
-                                    <template v-if="[0, 1].includes(index)">375 x 375 像素</template> 
-                                    <template v-else>250 x 375 像素</template>
+                                    <template v-if="[0, 1].includes(index)">建议195 x {{ Math.round(form.container_height / 2) }}px</template> 
+                                    <template v-else>建议130 x {{ Math.round(form.container_height / 2) }}px</template>
                                     <div>{{ data_title(item) }}</div>
                                 </div>
                             </div>
@@ -163,11 +166,12 @@ onUnmounted(() => {
 
 const handleResize = () => {
     if (window.innerWidth <= 1560) {
+        const sales = 330 / 390;
         cubeWidth.value = 330;
-        cubeHeight.value = 330;
+        cubeHeight.value = form.value.container_height * sales;
     } else {
         cubeWidth.value = 390;
-        cubeHeight.value = 390;
+        cubeHeight.value = form.value.container_height;
     }
 }
 //#endregion
@@ -176,7 +180,6 @@ const selected_active = ref(0);
 // 切换风格
 const style_click = (index: number) => {
     form.value.data_magic_list = magic_list(index);
-
     form.value.style_actived = index;
     selected_active.value = 0;
     tabs_name.value = 'content';
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 96444f09..b52b73a6 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -40,7 +40,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_img_computer, common_styles_computer, radius_computer } from '@/utils';
+import { common_img_computer, common_styles_computer, radius_computer, is_number } from '@/utils';
 
 const props = defineProps({
     value: {
@@ -67,7 +67,10 @@ const spacing = computed(() => new_style_spacing.value / 2 + 'px');
 const content_img_radius = computed(() => radius_computer(new_style.value));
 //#region 容器大小计算
 const div_width = ref(0);
-const container_size = computed(() => form.value.style_actived === 10 ? '100%' : div_width.value + 'px');
+// 如果容器高度为空，则取容器宽度
+const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
+
+const container_size = computed(() => form.value.style_actived === 10 ? '100%' : container_height.value + 'px');
 const container_size_10 = computed(() => div_width.value + 'px');
 const container = ref<HTMLElement | null>(null);
 onMounted(() => {
@@ -93,7 +96,7 @@ const density = ref('4');
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
-const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
+const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
 const getSelectedWidth = (item: CubeItem) => {
     return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
 };
@@ -111,12 +114,7 @@ const getSelectedLeft = (item: CubeItem) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: CubeItem) => {
-    return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
-};
-// 计算成百分比
-const percentage = (num: number) => {
-    const marks = (num / div_width.value) * 100;
-    return marks.toFixed(4) + '%';
+    return `width: ${getSelectedWidth(item)}px; height: ${getSelectedHeight(item)}px; top: ${getSelectedTop(item)}px; left: ${getSelectedLeft(item)}px;`;
 };
 //#endregion
 // 公共样式
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index e37a257b..7b8331cf 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -10,20 +10,25 @@
                         </div>
                     </div>
                 </el-form-item>
-                <el-form-item v-if="form.style_actived !== 10" label="图片设置">
-                    <el-radio-group v-model="form.img_fit">
-                        <el-radio value="contain">等比缩放</el-radio>
-                        <el-radio value="fill">铺满</el-radio>
-                        <el-radio value="cover">等比剪切</el-radio>
-                    </el-radio-group>
-                </el-form-item>
+                <template v-if="form.style_actived !== 10">
+                    <el-form-item label="容器高度">
+                        <slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
+                    </el-form-item>
+                    <el-form-item label="图片设置">
+                        <el-radio-group v-model="form.img_fit">
+                            <el-radio value="contain">等比缩放</el-radio>
+                            <el-radio value="fill">铺满</el-radio>
+                            <el-radio value="cover">等比剪切</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </template>
                 <template v-else>
                     <el-form-item label="限制尺寸">
                         <el-switch v-model="form.limit_size" active-value="1" inactive-value="0" />
                     </el-form-item>
                     <template v-if="form.limit_size == '1'">
                         <el-form-item label="图片高度">
-                            <slider v-model="form.image_height" :max="500"></slider>
+                            <slider v-model="form.image_height" :max="500" @update:model-value="handleResize"></slider>
                         </el-form-item>
                         <el-form-item label="图片设置">
                             <el-radio-group v-model="form.img_fit">
@@ -47,7 +52,7 @@
                                     <image-empty v-model="item.img[0]" :fit="form.img_fit" ></image-empty>
                                 </template>
                                 <template v-else>
-                                    <div class="cube-selected-text"> 250 x 750 像素</div>
+                                    <div class="cube-selected-text">建议130 x {{ form.container_height }}px</div>
                                 </template>
                             </div>
                         </div>
@@ -61,8 +66,8 @@
                                 </template>
                                 <template v-else>
                                     <div class="cube-selected-text">
-                                        <template v-if="[0, 1].includes(index)">375 x 375 像素</template> 
-                                        <template v-else>250 x 375 像素</template> 
+                                        <template v-if="[0, 1].includes(index)">建议195 x {{ Math.round(form.container_height / 2) }}px</template>
+                                        <template v-else>建议130 x {{ Math.round(form.container_height / 2) }}px</template> 
                                     </div>
                                 </template>
                             </div>
@@ -130,11 +135,12 @@ onUnmounted(() => {
 
 const handleResize = () => {
     if (window.innerWidth <= 1560) {
+        const sales = 330 / 390;
         cubeWidth.value = 330;
-        cubeHeight.value = 330;
+        cubeHeight.value = form.value.container_height * sales;
     } else {
         cubeWidth.value = 390;
-        cubeHeight.value = 390;
+        cubeHeight.value = form.value.container_height;
     }
 }
 //#endregion
@@ -147,6 +153,15 @@ const style_click = (index: number) => {
     form.value.img_magic_list = cloneDeep(style_show_list[index]);
     form.value.style_actived = index;
     selected_active.value = 0;
+    if (index === 10) {
+        if (window.innerWidth <= 1560) {
+            cubeWidth.value = 330;
+            cubeHeight.value = 330;
+        } else {
+            cubeWidth.value = 390;
+            cubeHeight.value = 390;
+        }
+    }
 }
 // 选中的点击事件
 const selected_click = (index: number) => {
diff --git a/src/config/const/data-magic.ts b/src/config/const/data-magic.ts
index f6ae891d..7745e6f9 100644
--- a/src/config/const/data-magic.ts
+++ b/src/config/const/data-magic.ts
@@ -9,6 +9,7 @@ interface data_magic {
 interface defaultSearch {
     content: {
         style_actived: number;
+        container_height: number;
         data_magic_list: data_magic[];
     };
     style: {
@@ -22,6 +23,8 @@ const defaultSearch: defaultSearch = {
     content: {
         // 样式风格
         style_actived: 0,
+        // 容器高度
+        container_height: 390,
         // 数据列表
         data_magic_list: [],
     },
diff --git a/src/config/const/img-magic.ts b/src/config/const/img-magic.ts
index eb787636..4d5173f3 100644
--- a/src/config/const/img-magic.ts
+++ b/src/config/const/img-magic.ts
@@ -10,6 +10,7 @@ interface defaultSearch {
     content: {
         style_actived: number;
         img_magic_list: img_magic[];
+        container_height: number;
         img_fit: string;
         limit_size: string,
         image_height: number;
@@ -44,6 +45,8 @@ const defaultSearch: defaultSearch = {
                 img_link: {}
             }
         ],
+        // 容器高度
+        container_height: 390,
         // 图标填充方式
         img_fit: 'cover',
         // 是否限制尺寸
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0aee3c5d..2261aba1 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -15,6 +15,14 @@ export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333',
 export function is_obj_empty(obj: object): boolean {
     return Object.keys(obj).length === 0;
 }
+/**
+ * 判断一个字符串是否是数字。
+ * @param val 要检查的值
+ * @returns 如果字符串为数字，则返回true；否则返回false。
+ */
+export function is_number(val: string | number): boolean {
+    return typeof val == 'number' && !isNaN(val);
+}
 /**
  * 将对象或数组中的字符串转换为数字
  * 此函数递归地遍历给定对象或数组，将所有能转换为数字的字符串转换成数字类型