From af0bdba6101446d30a10488a3a49540042451dd9 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, 15 Oct 2024 14:41:55 +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=E5=92=8C=E5=9B=BE=E7=89=87=E9=AD=94=E6=96=B9=E7=9A=84?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue            |  7 ++++---
 src/components/model-custom/components/index.vue      |  5 +----
 .../model-data-magic/components/magic-carousel.vue    |  2 +-
 .../model-data-magic/components/tabs-content.vue      |  9 +++++++++
 .../model-data-magic/model-data-magic-content.vue     |  1 +
 src/components/model-img-magic/index.vue              |  6 +++---
 .../model-img-magic/model-img-magic-content.vue       |  8 ++++----
 .../model-img-magic/model-img-magic-setting.vue       |  2 +-
 .../model-img-magic/model-img-magic-styles.vue        | 11 ++++++++---
 9 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 0d9bce3f..7f89f682 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -13,7 +13,7 @@
                     <icon name="close" color="f" size="8"></icon>
                 </div>
                 <template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
-                    <image-empty v-model="item.img[0]" ></image-empty>
+                    <image-empty v-model="item.img[0]" :fit="props.imgFit"></image-empty>
                 </template>
                 <template v-else>
                     <div class="cube-selected-text">
@@ -61,7 +61,7 @@ interface Props {
     cubeWidth: number;
     cubeHeight: number;
     styleActived?: number;
-    img_fit?: string;
+    imgFit?: "" | "cover" | "fill" | "contain" | "none" | "scale-down";
 }
 const props = withDefaults(defineProps<Props>(), {
     list: () => [],
@@ -69,7 +69,8 @@ const props = withDefaults(defineProps<Props>(), {
     type: 'img',
     cubeWidth: 390,
     cubeHeight: 390,
-    styleActived: 0
+    styleActived: 0,
+    imgFit: 'cover'
 });
 
 const selected_active = ref(0);
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 78cbe588..b30ebe66 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -35,7 +35,7 @@
                                     <el-icon class="iconfont icon-drag size-16 cr-d" />
                                     <div class="text-line-1 flex align-c" style="width: 70%;">
                                         <template v-if="edit_index == index">
-                                            <el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" />
+                                            <el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
                                         </template>
                                         <template v-else>
                                             <span class="size-12 cr-6 break">{{ !isEmpty(item.new_name) ? item.new_name : item.name  }}</span>
@@ -861,7 +861,4 @@ defineExpose({
         }
     }
 }
-.el-input__textarea {
-  resize: none;
-}
 </style>
diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index e3df2977..3b7db1d4 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -2,7 +2,7 @@
     <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'">
-                <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
+                <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" :fit="form.data_content.img_fit"></image-empty>
             </template>
             <template v-else>
                 <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="contentImgRadius"></product-list-show>
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 09ff62c5..eaa50474 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -14,6 +14,15 @@
                 <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
             </el-form-item>
         </template>
+        <template v-else-if="form.data_type === 'images'">
+            <el-form-item label="图片设置">
+                <el-radio-group v-model="form.img_fit">
+                    <el-radio value="contain">等比缩放</el-radio>
+                    <el-radio value="none">铺满</el-radio>
+                    <el-radio value="cover">等比剪切</el-radio>
+                </el-radio-group>
+            </el-form-item>
+        </template>
     </card-container>
     <template v-if="form.data_type == 'images'">
         <div class="bg-f5 divider-line" />
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 e3705521..83283cd8 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -106,6 +106,7 @@ const data_content = {
     goods_list:[],
     goods_ids: '',
     is_show: ['title', 'price'],
+    img_fit: 'cover',
     images_list:[
         {
             carousel_img: [],
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 404206a2..0687505b 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -6,7 +6,7 @@
                 <template v-if="form.style_actived == 2">
                     <div class="flex-row align-c jc-c style-size">
                         <div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                            <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
                         </div>
                     </div>
                 </template>
@@ -14,7 +14,7 @@
                 <template v-else-if="form.style_actived == 8">
                     <div class="flex-row align-c jc-c style-size flex-wrap">
                         <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
-                            <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                            <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
                         </div>
                     </div>
                 </template>
@@ -25,7 +25,7 @@
                 </template>
                 <template v-else>
                     <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
-                        <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                        <image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
                     </div>
                 </template>
             </div>
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 3086da3f..9ebf9706 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -10,7 +10,7 @@
                         </div>
                     </div>
                 </el-form-item>
-                <el-form-item label="图片设置">
+                <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="none">铺满</el-radio>
@@ -27,7 +27,7 @@
                         <div class="flex-row align-c jc-c gap-2 style-size">
                             <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['three bg-f5', {'cube-selected-active': selected_active == index}]" @click="selected_click(index)">
                                 <template v-if="!isEmpty(item.img[0])">
-                                    <image-empty v-model="item.img[0]"></image-empty>
+                                    <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>
@@ -40,7 +40,7 @@
                         <div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
                             <div v-for="(item, index) in form.img_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)">
                                 <template v-if="!isEmpty(item.img[0])">
-                                    <image-empty v-model="item.img[0]"></image-empty>
+                                    <image-empty v-model="item.img[0]" :fit="form.img_fit"></image-empty>
                                 </template>
                                 <template v-else>
                                     <div class="cube-selected-text">
@@ -52,7 +52,7 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :fit="form.img_fit" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>
diff --git a/src/components/model-img-magic/model-img-magic-setting.vue b/src/components/model-img-magic/model-img-magic-setting.vue
index bf623b44..aff04d4c 100644
--- a/src/components/model-img-magic/model-img-magic-setting.vue
+++ b/src/components/model-img-magic/model-img-magic-setting.vue
@@ -4,7 +4,7 @@
             <model-img-magic-content :value="value.content"></model-img-magic-content>
         </template>
         <template v-if="type == '2'">
-            <model-img-magic-styles :value="value.style"></model-img-magic-styles>
+            <model-img-magic-styles :value="value.style" :content="value.content"></model-img-magic-styles>
         </template>
     </div>
 </template>
diff --git a/src/components/model-img-magic/model-img-magic-styles.vue b/src/components/model-img-magic/model-img-magic-styles.vue
index 67345ad7..7c879a18 100644
--- a/src/components/model-img-magic/model-img-magic-styles.vue
+++ b/src/components/model-img-magic/model-img-magic-styles.vue
@@ -3,7 +3,7 @@
         <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">图片魔方</div>
-                <el-form-item label="图片间距">
+                <el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
                     <slider v-model="form.image_spacing" :max="100"></slider>
                 </el-form-item>
                 <el-form-item label="图片圆角">
@@ -21,15 +21,20 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
     }
 });
 
 // 默认值
 const state = reactive({
-    form: props.value
+    form: props.value,
+    new_content: props.content
 });
 // 如果需要解构，确保使用toRefs
-const { form } = toRefs(state);
+const { form, new_content } = toRefs(state);
 
 const common_style_update = (value: any) => {
     form.value.common_style = value;