!664 【代码优化】MALL: 修复模板装修时组件属性响应式丢失的问题

Merge pull request !664 from puhui999/dev

src/components/DiyEditor/components/ComponentContainerProperty.vue

@@ -51,7 +51,8 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentStyle, usePropertyForm } from '@/components/DiyEditor/util'
+import { ComponentStyle } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 /**
  * 组件容器属性：目前右边部分
@@ -61,7 +62,7 @@ defineOptions({ name: 'ComponentContainer' })
 
 const props = defineProps<{ modelValue: ComponentStyle }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 const treeData = [
   {

src/components/DiyEditor/components/mobile/Carousel/property.vue

@@ -93,14 +93,14 @@
 
 <script setup lang="ts">
 import { CarouselProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' })
 
 const props = defineProps<{ modelValue: CarouselProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/CouponCard/property.vue

@@ -73,7 +73,7 @@
 
 <script setup lang="ts">
 import { CouponCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
 import { floatToFixed2 } from '@/utils'
 import { PromotionDiscountTypeEnum } from '@/utils/constants'
@@ -84,7 +84,7 @@ defineOptions({ name: 'CouponCardProperty' })
 
 const props = defineProps<{ modelValue: CouponCardProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 优惠券列表
 const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])

src/components/DiyEditor/components/mobile/Divider/property.vue

@@ -45,12 +45,12 @@
 
 <script setup lang="ts">
 import { DividerProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'DividerProperty' })
 const props = defineProps<{ modelValue: DividerProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 //线类型
 const BORDER_TYPES = [

src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue

@@ -31,14 +31,14 @@
 
 <script setup lang="ts">
 import { FloatingActionButtonProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 悬浮按钮属性面板
 defineOptions({ name: 'FloatingActionButtonProperty' })
 
 const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/HotZone/property.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { HotZoneProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
 import HotZoneEditDialog from './components/HotZoneEditDialog/index.vue'
 
@@ -29,7 +29,7 @@ defineOptions({ name: 'HotZoneProperty' })
 
 const props = defineProps<{ modelValue: HotZoneProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 热区编辑对话框
 const editDialogRef = ref()

src/components/DiyEditor/components/mobile/ImageBar/property.vue

@@ -21,14 +21,14 @@
 
 <script setup lang="ts">
 import { ImageBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' })
 
 const props = defineProps<{ modelValue: ImageBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/MagicCube/property.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
 
 /** 广告魔方属性面板 */
@@ -64,7 +64,7 @@ defineOptions({ name: 'MagicCubeProperty' })
 
 const props = defineProps<{ modelValue: MagicCubeProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 选中的热区
 const selectedHotAreaIndex = ref(-1)

src/components/DiyEditor/components/mobile/MenuGrid/property.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_GRID_ITEM_PROPERTY,
   MenuGridProperty
@@ -59,7 +59,7 @@ defineOptions({ name: 'MenuGridProperty' })
 
 const props = defineProps<{ modelValue: MenuGridProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/MenuList/property.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_LIST_ITEM_PROPERTY,
   MenuListProperty
@@ -39,7 +39,7 @@ defineOptions({ name: 'MenuListProperty' })
 
 const props = defineProps<{ modelValue: MenuListProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/MenuSwiper/property.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import {
   EMPTY_MENU_SWIPER_ITEM_PROPERTY,
   MenuSwiperProperty
@@ -70,7 +70,7 @@ defineOptions({ name: 'MenuSwiperProperty' })
 
 const props = defineProps<{ modelValue: MenuSwiperProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

@@ -64,7 +64,7 @@
 
 <script lang="ts" setup>
 import { NavigationBarCellProperty } from '../config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' })
 

src/components/DiyEditor/components/mobile/NavigationBar/index.vue

@@ -4,7 +4,7 @@
       <div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
         <span v-if="cell.type === 'text'">{{ cell.text }}</span>
         <img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
-        <SearchBar v-else :property="getSearchProp" />
+        <SearchBar v-else :property="getSearchProp(cell)" />
       </div>
     </div>
     <img
@@ -51,14 +51,14 @@ const getCellStyle = (cell: NavigationBarCellProperty) => {
   } as StyleValue
 }
 // 获得搜索框属性
-const getSearchProp = (cell: NavigationBarCellProperty) => {
+const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
     showScan: false,
     placeholder: cell.placeholder,
     borderRadius: cell.borderRadius
   } as SearchProperty
-}
+})
 </script>
 <style lang="scss" scoped>
 .navigation-bar {

src/components/DiyEditor/components/mobile/NavigationBar/property.vue

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
 import { NavigationBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue'
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarProperty' })
@@ -77,7 +77,7 @@ const rules = {
 
 const props = defineProps<{ modelValue: NavigationBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 if (!formData.value._local) {
   formData.value._local = { previewMp: true, previewOther: false }
 }

src/components/DiyEditor/components/mobile/NoticeBar/property.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { NoticeBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' })
 // 表单校验
@@ -40,7 +40,7 @@ const rules = {
 
 const props = defineProps<{ modelValue: NoticeBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/PageConfig/property.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { PageConfigProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'PageConfigProperty' })
 // 表单校验
@@ -28,7 +28,7 @@ const rules = {}
 
 const props = defineProps<{ modelValue: PageConfigProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/Popover/property.vue

@@ -25,14 +25,14 @@
 
 <script setup lang="ts">
 import { PopoverProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' })
 
 const props = defineProps<{ modelValue: PopoverProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/ProductCard/property.vue

@@ -135,7 +135,7 @@
 
 <script setup lang="ts">
 import { ProductCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
 // 商品卡片属性面板
@@ -143,7 +143,7 @@ defineOptions({ name: 'ProductCardProperty' })
 
 const props = defineProps<{ modelValue: ProductCardProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/ProductList/property.vue

@@ -85,7 +85,7 @@
 
 <script setup lang="ts">
 import { ProductListProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 
 // 商品栏属性面板
@@ -93,7 +93,7 @@ defineOptions({ name: 'ProductListProperty' })
 
 const props = defineProps<{ modelValue: ProductListProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/PromotionArticle/property.vue

@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { PromotionArticleProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as ArticleApi from '@/api/mall/promotion/article/index'
 
 // 营销文章属性面板
@@ -33,7 +33,7 @@ defineOptions({ name: 'PromotionArticleProperty' })
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 文章列表
 const articles = ref<ArticleApi.ArticleVO>([])
 

src/components/DiyEditor/components/mobile/PromotionCombination/property.vue

@@ -140,7 +140,7 @@
 
 <script setup lang="ts">
 import { PromotionCombinationProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
 import { CommonStatusEnum } from '@/utils/constants'
 import CombinationShowcase from '@/views/mall/promotion/combination/components/CombinationShowcase.vue'
@@ -150,7 +150,7 @@ defineOptions({ name: 'PromotionCombinationProperty' })
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 活动列表
 const activityList = ref<CombinationActivityApi.CombinationActivityVO[]>([])
 onMounted(async () => {

src/components/DiyEditor/components/mobile/PromotionPoint/property.vue

@@ -140,7 +140,7 @@
 
 <script lang="ts" setup>
 import { PromotionPointProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import PointShowcase from '@/views/mall/promotion/point/components/PointShowcase.vue'
 
 // 秒杀属性面板
@@ -148,7 +148,7 @@ defineOptions({ name: 'PromotionPointProperty' })
 
 const props = defineProps<{ modelValue: PromotionPointProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style lang="scss" scoped></style>

src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue

@@ -140,7 +140,7 @@
 
 <script setup lang="ts">
 import { PromotionSeckillProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
 import { CommonStatusEnum } from '@/utils/constants'
 import SeckillShowcase from '@/views/mall/promotion/seckill/components/SeckillShowcase.vue'
@@ -150,7 +150,7 @@ defineOptions({ name: 'PromotionSeckillProperty' })
 
 const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 // 活动列表
 const activityList = ref<SeckillActivityApi.SeckillActivityVO[]>([])
 onMounted(async () => {

src/components/DiyEditor/components/mobile/SearchBar/property.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
 
 /** 搜索框属性面板 */
@@ -67,7 +67,7 @@ defineOptions({ name: 'SearchProperty' })
 
 const props = defineProps<{ modelValue: SearchProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/TabBar/property.vue

@@ -80,13 +80,13 @@
 
 <script setup lang="ts">
 import { TabBarProperty, component, THEME_LIST } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 底部导航栏
 defineOptions({ name: 'TabBarProperty' })
 
 const props = defineProps<{ modelValue: TabBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items

src/components/DiyEditor/components/mobile/TitleBar/property.vue

@@ -101,13 +101,13 @@
 </template>
 <script lang="ts" setup>
 import { TitleBarProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' })
 
 const props = defineProps<{ modelValue: TitleBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 表单校验
 const rules = {}

src/components/DiyEditor/components/mobile/UserCard/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserCardProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户卡片属性面板
 defineOptions({ name: 'UserCardProperty' })
 
 const props = defineProps<{ modelValue: UserCardProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/UserCoupon/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserCouponProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户卡券属性面板
 defineOptions({ name: 'UserCouponProperty' })
 
 const props = defineProps<{ modelValue: UserCouponProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/UserOrder/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserOrderProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户订单属性面板
 defineOptions({ name: 'UserOrderProperty' })
 
 const props = defineProps<{ modelValue: UserOrderProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/UserWallet/property.vue

@@ -4,14 +4,14 @@
 
 <script setup lang="ts">
 import { UserWalletProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 用户资产属性面板
 defineOptions({ name: 'UserWalletProperty' })
 
 const props = defineProps<{ modelValue: UserWalletProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/VideoPlayer/property.vue

@@ -42,14 +42,14 @@
 
 <script setup lang="ts">
 import { VideoPlayerProperty } from './config'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' })
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>()
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped lang="scss"></style>

src/components/DiyEditor/index.vue

@@ -110,7 +110,7 @@
           <el-tag
             v-if="showPageConfig"
             :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
-            :type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
+            :type="selectedComponent?.uid === pageConfigComponent.uid ? 'primary' : 'info'"
             size="large"
             @click="handleComponentSelected(pageConfigComponent)"
           >
@@ -121,7 +121,7 @@
             <el-tag
               v-if="component.position === 'fixed'"
               :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
-              :type="selectedComponent?.uid === component.uid ? '' : 'info'"
+              :type="selectedComponent?.uid === component.uid ? 'primary' : 'info'"
               closable
               size="large"
               @click="handleComponentSelected(component)"
@@ -191,7 +191,7 @@ import { cloneDeep, includes } from 'lodash-es'
 import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
 import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
-import { isString } from '@/utils/is'
+import { isEmpty, isString } from '@/utils/is'
 import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
 import { componentConfigs } from '@/components/DiyEditor/components/mobile'
 import { array, oneOfType } from 'vue-types'
@@ -238,24 +238,42 @@ const props = defineProps({
 watch(
   () => props.modelValue,
   () => {
-    const modelValue = isString(props.modelValue)
-      ? (JSON.parse(props.modelValue) as PageConfig)
-      : props.modelValue
-    pageConfigComponent.value.property = modelValue?.page || PAGE_CONFIG_COMPONENT.property
+    const modelValue =
+      isString(props.modelValue) && !isEmpty(props.modelValue)
+        ? (JSON.parse(props.modelValue) as PageConfig)
+        : props.modelValue
+    pageConfigComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.page) || PAGE_CONFIG_COMPONENT.property
     navigationBarComponent.value.property =
-      modelValue?.navigationBar || NAVIGATION_BAR_COMPONENT.property
-    tabBarComponent.value.property = modelValue?.tabBar || TAB_BAR_COMPONENT.property
+      (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
+      NAVIGATION_BAR_COMPONENT.property
+    tabBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.tabBar) || TAB_BAR_COMPONENT.property
     // 查找对应的页面组件
-    pageComponents.value = (modelValue?.components || []).map((item) => {
-      const component = componentConfigs[item.id]
-      return { ...component, property: item.property }
-    })
+    pageComponents.value = ((typeof modelValue !== 'string' && modelValue?.components) || []).map(
+      (item) => {
+        const component = componentConfigs[item.id]
+        return { ...component, property: item.property }
+      }
+    )
   },
   {
     immediate: true
   }
 )
 
+/** 选择组件修改其属性后更新它的配置 */
+watch(
+  selectedComponent,
+  (val: any) => {
+    if (!val || selectedComponentIndex.value === -1) {
+      return
+    }
+    pageComponents.value[selectedComponentIndex.value] = selectedComponent.value!
+  },
+  { deep: true }
+)
+
 // 保存
 const handleSave = () => {
   // 发送保存通知

src/components/DiyEditor/util.ts

@@ -1,4 +1,3 @@
-import { ref, Ref } from 'vue'
 import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
 import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
 import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
@@ -78,34 +77,6 @@ export interface PageConfig {
 // 页面组件，只保留组件ID，组件属性
 export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
 
-// 属性表单监听
-export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } {
-  const formData = ref<T>()
-  // 监听属性数据变动
-  watch(
-    () => modelValue,
-    () => {
-      formData.value = modelValue
-    },
-    {
-      deep: true,
-      immediate: true
-    }
-  )
-  // 监听表单数据变动
-  watch(
-    () => formData.value,
-    () => {
-      emit('update:modelValue', formData.value)
-    },
-    {
-      deep: true
-    }
-  )
-
-  return { formData } as { formData: Ref<T> }
-}
-
 // 页面组件库
 export const PAGE_LIBS = [
   {

src/components/Draggable/index.vue

@@ -13,9 +13,16 @@
         class="mb-4px flex flex-col gap-4px border border-gray-2 border-rounded rounded border-solid p-8px"
       >
         <!-- 操作按钮区 -->
-        <div class="m--8px m-b-4px flex flex-row items-center justify-between p-8px" style="background-color: var(--app-content-bg-color);">
+        <div
+          class="m--8px m-b-4px flex flex-row items-center justify-between p-8px"
+          style="background-color: var(--app-content-bg-color)"
+        >
           <el-tooltip content="拖动排序">
-            <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" style="color: #8a909c;" />
+            <Icon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
           </el-tooltip>
           <el-tooltip content="删除">
             <Icon
@@ -47,7 +54,7 @@
 <script setup lang="ts">
 // 拖拽组件
 import VueDraggable from 'vuedraggable'
-import { usePropertyForm } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
 import { any, array } from 'vue-types'
 import { propTypes } from '@/utils/propTypes'
 import { cloneDeep } from 'lodash-es'
@@ -66,7 +73,7 @@ const props = defineProps({
 })
 // 定义事件
 const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+const formData = useVModel(props, 'modelValue', emit)
 
 // 处理添加
 const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}))

src/components/InputWithColor/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-input v-model="valueRef" v-bind="$attrs">
+  <el-input v-model="modelValue" v-bind="$attrs">
     <template #append>
-      <el-color-picker v-model="colorRef" :predefine="PREDEFINE_COLORS" />
+      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
     </template>
   </el-input>
 </template>
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { PREDEFINE_COLORS } from '@/utils/color'
+import { useVModels } from '@vueuse/core'
 
 /**
  * 带颜色选择器输入框
@@ -19,33 +20,8 @@ const props = defineProps({
   modelValue: propTypes.string.def('').isRequired,
   color: propTypes.string.def('').isRequired
 })
-
-watch(
-  () => props.modelValue,
-  (val: string) => {
-    if (val === unref(valueRef)) return
-    valueRef.value = val
-  }
-)
-
 const emit = defineEmits(['update:modelValue', 'update:color'])
-
-// 输入框的值
-const valueRef = ref(props.modelValue)
-watch(
-  () => valueRef.value,
-  (val: string) => {
-    emit('update:modelValue', val)
-  }
-)
-// 颜色
-const colorRef = ref(props.color)
-watch(
-  () => colorRef.value,
-  (val: string) => {
-    emit('update:color', val)
-  }
-)
+const { modelValue, color } = useVModels(props, emit)
 </script>
 <style scoped lang="scss">
 :deep(.el-input-group__append) {

src/views/mall/promotion/diy/template/decorate.vue

@@ -52,7 +52,9 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
 const formRef = ref() // 表单 Ref
 // 当前编辑的属性
-const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>({
+  property: ''
+} as DiyPageApi.DiyPageVO)
 // templateItem 对应的缓存
 const currentFormDataMap = ref<
   Map<string, DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>
@@ -92,17 +94,21 @@ const handleTemplateItemChange = (val: number) => {
   // 编辑模板
   if (val === 0) {
     libs.value = templateLibs
-    currentFormData.value = isEmpty(data) ? formData.value : data
+    currentFormData.value = (isEmpty(data) ? formData.value : data) as
+      | DiyTemplateApi.DiyTemplatePropertyVO
+      | DiyPageApi.DiyPageVO
     return
   }
 
   // 编辑页面
   libs.value = PAGE_LIBS
-  currentFormData.value = isEmpty(data)
-    ? formData.value!.pages.find(
-        (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
-      )
-    : data
+  currentFormData.value = (
+    isEmpty(data)
+      ? formData.value!.pages.find(
+          (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
+        )
+      : data
+  ) as DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO
 }
 
 // 提交表单
@@ -170,7 +176,9 @@ const recoverPageIndex = () => {
   sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
 
   // 重新初始化数据
-  currentFormData.value = formData.value
+  currentFormData.value = formData.value as
+    | DiyTemplateApi.DiyTemplatePropertyVO
+    | DiyPageApi.DiyPageVO
   currentFormDataMap.value = new Map<
     string,
     DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO