fix：【antd】【mall】diy-editor 的 hot-zone-edit-dialog 不正确

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts

@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';
 
 import type { HotZoneItemProperty } from '../../config';
 
-// 热区的最小宽高
+export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高
-export const HOT_ZONE_MIN_SIZE = 100;
 
-// 控制的类型
+/** 控制的类型 */
 export enum CONTROL_TYPE_ENUM {
   LEFT,
   TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
   HEIGHT,
 }
 
-// 定义热区的控制点
+/** 定义热区的控制点 */
 export interface ControlDot {
   position: string;
   types: CONTROL_TYPE_ENUM[];
   style: StyleValue;
 }
 
-// 热区的8个控制点
+/** 热区的 8 个控制点 */
 export const CONTROL_DOT_LIST = [
   {
     position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
 ] as ControlDot[];
 
 // region 热区的缩放
-// 热区的缩放比例
+export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
-export const HOT_ZONE_SCALE_RATE = 2;
+
-// 缩小：缩回适合手机屏幕的大小
+/** 缩小：缩回适合手机屏幕的大小 */
-export const zoomOut = (list?: HotZoneItemProperty[]) => {
+export function zoomOut(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
+}
-// 放大：作用是为了方便在电脑屏幕上编辑
+
-export const zoomIn = (list?: HotZoneItemProperty[]) => {
+/** 放大：作用是为了方便在电脑屏幕上编辑 */
+export function zoomIn(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
+}
+
 // endregion
 
 /**

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -213,8 +213,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
         </span>
         <IconifyIcon
           icon="lucide:x"
-          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
           :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          :size="14"
           @click="handleRemove(item)"
         />
 
@@ -230,9 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
     </div>
     <template #prepend-footer>
       <Button @click="handleAdd" type="primary" ghost>
-        <template #icon>
+        <IconifyIcon icon="lucide:plus" class="mr-5px" />
-          <IconifyIcon icon="lucide:plus" />
-        </template>
         添加热区
       </Button>
     </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue

@@ -2,8 +2,10 @@
 import type { HotZoneProperty } from './config';
 
 import { Image } from 'ant-design-vue';
+
 /** 热区 */
 defineOptions({ name: 'HotZone' });
+
 const props = defineProps<{ property: HotZoneProperty }>();
 </script>
 
@@ -12,21 +14,23 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <Image
       :src="props.property.imgUrl"
       class="pointer-events-none h-full w-full select-none"
+      :preview="false"
     />
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
         top: `${item.top}px`,
         left: `${item.left}px`,
+        color: 'hsl(var(--primary))',
+        background: 'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+        borderColor: 'hsl(var(--primary))',
       }"
     >
-      <p class="text-primary">
       {{ item.name }}
-      </p>
     </div>
   </div>
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue

@@ -15,42 +15,40 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 defineOptions({ name: 'HotZoneProperty' });
 
 const props = defineProps<{ modelValue: HotZoneProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 热区编辑对话框
+const editDialogRef = ref(); // 热区编辑对话框
-const editDialogRef = ref();
+
-// 打开热区编辑对话框
+/** 打开热区编辑对话框 */
-const handleOpenEditDialog = () => {
+function handleOpenEditDialog() {
   editDialogRef.value.open();
-};
+}
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <Form
+    <Form label-width="80px" :model="formData" class="mt-2">
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-      :model="formData"
-      class="mt-2"
-    >
       <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-20"
+          class="min-w-[80px]"
           :show-description="false"
         />
+        <p class="text-xs text-gray-500">推荐宽度 750</p>
       </FormItem>
-      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
+    <Button type="primary" plain class="w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
+
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
     ref="editDialogRef"
@@ -58,26 +56,3 @@ const handleOpenEditDialog = () => {
     :img-url="formData.imgUrl"
   />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: hsl(var(--text-color));
-  cursor: move;
-  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-  border: 1px solid hsl(var(--primary));
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue

@@ -23,9 +23,9 @@ const formData = useVModel(props, 'modelValue', emit);
 const editDialogRef = ref(); // 热区编辑对话框
 
 /** 打开热区编辑对话框 */
-const handleOpenEditDialog = () => {
+function handleOpenEditDialog() {
   editDialogRef.value.open();
-};
+}
 </script>
 
 <template>