From 4a038253139ea88cd5ec089690d6b75f0d433b59 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Nov 2025 22:51:35 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91diy-editor=20=E7=9A=84=20carousel=20=E7=9A=84=20radio?=
 =?UTF-8?q?=20=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/carousel/index.vue      | 11 +++++++----
 .../components/mobile/carousel/property.vue   | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
index 0b05db2e2..6b89b4c41 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
@@ -22,10 +22,13 @@ const handleIndexChange = (index: number) => {
 <template>
   <!-- 无图片 -->
   <div
-    class="bg-card flex h-64 items-center justify-center"
+    class="flex items-center justify-center bg-gray-300"
+    :style="{
+      height: property.items.length === 0 ? '250px' : `${property.height}px`,
+    }"
     v-if="property.items.length === 0"
   >
-    <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
+    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
   </div>
   <div v-else class="relative">
     <Carousel
@@ -33,7 +36,7 @@ const handleIndexChange = (index: number) => {
       :autoplay-speed="property.interval * 1000"
       :dots="property.indicator !== 'number'"
       @change="handleIndexChange"
-      class="h-44"
+      :style="{ height: `${property.height}px` }"
     >
       <div v-for="(item, index) in property.items" :key="index">
         <Image
@@ -45,7 +48,7 @@ const handleIndexChange = (index: number) => {
     </Carousel>
     <div
       v-if="property.indicator === 'number'"
-      class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
+      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
     >
       {{ currentIndex }} / {{ property.items.length }}
     </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
index d7a90e806..fc840dde3 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
 import {
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioButton,
   RadioGroup,
@@ -37,7 +38,7 @@ const formData = useVModel(props, 'modelValue', emit);
       <p class="text-base font-bold">样式设置：</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <FormItem label="样式" prop="type">
-          <RadioGroup v-model="formData.type">
+          <RadioGroup v-model:value="formData.type">
             <Tooltip class="item" content="默认" placement="bottom">
               <RadioButton value="default">
                 <IconifyIcon icon="system-uicons:carousel" class="size-6" />
@@ -50,18 +51,26 @@ const formData = useVModel(props, 'modelValue', emit);
             </Tooltip>
           </RadioGroup>
         </FormItem>
+        <FormItem label="高度" prop="height">
+          <InputNumber
+            v-model:value="formData.height"
+            class="mr-[10px] !w-1/2"
+            controls-position="right"
+          />
+          px
+        </FormItem>
         <FormItem label="指示器" prop="indicator">
-          <RadioGroup v-model="formData.indicator">
+          <RadioGroup v-model:value="formData.indicator">
             <Radio value="dot">小圆点</Radio>
             <Radio value="number">数字</Radio>
           </RadioGroup>
         </FormItem>
         <FormItem label="是否轮播" prop="autoplay">
-          <Switch v-model="formData.autoplay" />
+          <Switch v-model:checked="formData.autoplay" />
         </FormItem>
         <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
           <Slider
-            v-model="formData.interval"
+            v-model:value="formData.interval"
             :max="10"
             :min="0.5"
             :step="0.5"
@@ -77,7 +86,7 @@ const formData = useVModel(props, 'modelValue', emit);
         <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
           <template #default="{ element }">
             <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
-              <RadioGroup v-model="element.type">
+              <RadioGroup v-model:value="element.type">
                 <Radio value="img">图片</Radio>
                 <Radio value="video">视频</Radio>
               </RadioGroup>