fix: 【mall 商城】 修复 DiyEditor 组件的循环渲染问题

src/components/DiyEditor/index.vue

@@ -142,7 +142,7 @@
         >
           <!-- 组件名称 -->
           <template #header>
-            <div class="flex items-center gap-8px">
+            <div class="flex items-center gap-[8px]">
               <Icon :icon="selectedComponent?.icon" color="gray" />
               <span>{{ selectedComponent?.name }}</span>
             </div>
@@ -167,7 +167,7 @@
     <div class="flex justify-around">
       <IFrame
         :src="previewUrl"
-        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
+        class="w-[375px] border-[4px] border-rounded-[8px] border-solid p-[2px] h-[667px]!"
       />
       <div class="flex flex-col">
         <el-text>手机扫码预览</el-text>
@@ -233,11 +233,15 @@ const props = defineProps({
   previewUrl: propTypes.string.def('')
 })
 
+const isUpdatingFromProp = ref(false)
+
 // 监听传入的页面配置
 // 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
 watch(
   () => props.modelValue,
   () => {
+    // 标志位，表示正在从外部传入的配置更新组件配置，防止引起死循环
+    isUpdatingFromProp.value = true
     const modelValue =
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
@@ -256,9 +260,14 @@ watch(
         return { ...component, property: item.property }
       }
     )
+    // 更新完成，在下一个 tick 中重置标志位
+    nextTick(() => {
+      isUpdatingFromProp.value = false
+    })
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true // 深度监听，防止属性变化时不更新
   }
 )
 
@@ -302,6 +311,7 @@ const pageConfigChange = () => {
   const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
   emits('update:modelValue', modelValue)
 }
+// 监听页面配置变化
 watch(
   () => [
     pageConfigComponent.value.property,
@@ -310,6 +320,8 @@ watch(
     pageComponents.value
   ],
   () => {
+    //如果是从外部传入的配置更新引起的变化，则不触发更新
+    if (isUpdatingFromProp.value) return
     pageConfigChange()
   },
   { deep: true }