@conecli/cone-render 0.10.1-beta.1 → 0.10.1-beta.3

package/dist/components/base/LazyLoadImage/index.h5.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop,
  sgmCustomReport,
  isImageOptimizeEnable,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII='
  'https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png'
  const {
    src,
    lazyLoad,
    imagRenderingSet,
    width,
    height,
    className,
    isSkuImage,
    hideErrorImage,
    style,
    backgroundColor,
    errorSrc,
    onLoad,
    onError,
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const measureRef = useRef<HTMLElement | null>(null)
  const [measureComplete, setMeasureComplete] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const requestSrcRef = useRef(src)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const enableAvifOptimize = isImageOptimizeEnable()
  
  const getRequestSrc = useCallback(
    src => {
      const requestSrc = getQualityImage(imgSrc, {
        isSkuImage,
        size: measureRef?.current?.offsetWidth,
      })
      requestSrcRef.current = requestSrc
      return requestSrc
    },
    [src],
  )
  const imageError = useCallback(
    e => {
      console.log(' ==============> 图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
      const { shopId, venderId } = global.info.queryInfo || {}
      sgmCustomReport({
        code: 'jshopViewImageLoadError',
        msg: {
          shopId,
          venderId,
          buildType,
          originSrc: src,
          requestSrc: requestSrcRef.current,
        },
      })
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    setMeasureComplete(true)
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, res => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  const dealPageScrollInfo = res => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined')
      return
    if (measureRef.current) {
      const eleClientRect = measureRef.current.getBoundingClientRect()
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
  return isH5AndJdShopView &&
    global?.config?.needImageLazy !== false &&
    !needShowHighVersion &&
    !isAppStowShop ? (
    <View
      ref={measureRef}
      className={classNames(
        imageStyle['d-app-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges':
            !taroJdBaseInfo.info.pageInfo.isVipShop && imagRenderingSet,
        },
        'J_html5ImageBg',
        className,
      )}
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      {...otherOption}
    >
      {(componentShowState || lazyLoad === false) && (
        <img
          src={getQualityImage(
            imgSrc,
            taroJdBaseInfo.info.pageInfo.isVipShop
              ? NetWorkTypeQuality['perfect']
              : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageError}
        />
      )}
    </View>
  ) : enableAvifOptimize ? (
    [
      measureComplete ? (
        <Image
          key={'realImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            className,
          )}
          src={getRequestSrc(imgSrc)}
          lazyLoad={isChartH5 ? false : lazyLoad}
          onError={imageError}
          onLoad={imageLoad.bind(this, imgSrc)}
          {...otherOption}
        />
      ) : (
        <Image
          key={'defaultImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            className,
          )}
          src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
        />
      ),
      loadSuccess ? null : <View key={'measureRef'} ref={measureRef}></View>,
    ]
  ) : (
    <Image
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      className={classNames(
        imageStyle['d-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': imagRenderingSet,
        },
        className,
      )}
      src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
      lazyLoad={isChartH5 ? false : lazyLoad}
      onError={imageError}
      onLoad={imageLoad.bind(this, imgSrc)}
      {...otherOption}
    />
  )
  lazyLoad: true, 
  isSkuImage: false,
  hideErrorImage: false, 
  imagRenderingSet: true, 
  src: null,
  style: null, 
  width: null,
  height: null,
  backgroundColor: null, 
  className: null, 
  errorSrc: null, 
  onLoad: null, 
  onError: null, 
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isJdApp,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop,
  sgmCustomReport,
  isImageOptimizeEnable,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII='
  'https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png'
  const {
    src = null,
    lazyLoad = true, 
    imagRenderingSet = true, 
    width = null,
    height = null,
    className = null, 
    isSkuImage = false,
    hideErrorImage = false, 
    style = null, 
    backgroundColor = null, 
    errorSrc = null, 
    onLoad = null, 
    onError = null, 
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const measureRef = useRef<HTMLElement | null>(null)
  const [measureComplete, setMeasureComplete] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const componentLazyRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  const requestSrcRef = useRef(src)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const enableAvifOptimize = isImageOptimizeEnable()
  
  const getRequestSrc = useCallback(
    (src) => {
      const requestSrc = getQualityImage(imgSrc, {
        isSkuImage,
        size: measureRef?.current?.offsetWidth,
      })
      requestSrcRef.current = requestSrc
      return requestSrc
    },
    [src],
  )
  const imageError = useCallback(
    (e) => {
      console.log(' ==============> 图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
      const { shopId, venderId } = global.info.queryInfo || {}
      sgmCustomReport({
        code: 'jshopViewImageLoadError',
        msg: {
          shopId,
          venderId,
          buildType,
          originSrc: src,
          requestSrc: requestSrcRef.current,
        },
      })
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    setMeasureComplete(true)
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined')
      return
    if (measureRef.current) {
      const eleClientRect = measureRef.current.getBoundingClientRect()
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
  return isH5AndJdShopView &&
    global?.config?.needImageLazy !== false &&
    !needShowHighVersion &&
    !isAppStowShop ? (
    <View
      ref={measureRef}
      className={classNames(
        imageStyle['d-app-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges':
            !taroJdBaseInfo.info.pageInfo.isVipShop && imagRenderingSet,
        },
        'J_html5ImageBg',
        className,
      )}
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      {...otherOption}
    >
      {(componentShowState || lazyLoad === false) && (
        <img
          src={getQualityImage(
            imgSrc,
            taroJdBaseInfo.info.pageInfo.isVipShop
              ? NetWorkTypeQuality['perfect']
              : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageError}
        />
      )}
    </View>
  ) : enableAvifOptimize ? (
    [
      measureComplete ? (
        <Image
          key={'realImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            className,
          )}
          src={getRequestSrc(imgSrc)}
          lazyLoad={isChartH5 ? false : lazyLoad}
          onError={imageError}
          onLoad={imageLoad.bind(this, imgSrc)}
          {...otherOption}
        />
      ) : (
        <Image
          key={'defaultImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            className,
          )}
          src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
        />
      ),
      loadSuccess ? null : <View key={'measureRef'} ref={measureRef}></View>,
    ]
  ) : (
    <Image
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      className={classNames(
        imageStyle['d-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': imagRenderingSet,
        },
        className,
      )}
      src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
      lazyLoad={isChartH5 ? false : lazyLoad}
      onError={imageError}
      onLoad={imageLoad.bind(this, imgSrc)}
      {...otherOption}
    />
  )

package/dist/components/base/LazyLoadImage/index.tsx

@@ -1 +1 @@
-import React, {useCallback, useState} from 'react'
+import React, { useCallback, useState } from 'react'
  const {
    src = null,
    lazyLoad = true, 
    imagRenderingSet = true, 
    width = null,
    height = null,
    className = null, 
    isSkuImage = false,
    hideErrorImage = false, 
    style = null, 
    backgroundColor = null, 
    errorSrc = null, 
    onLoad = null, 
    onError = null, 
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const [imageErrState, setImageErrState] = useState(false)
  const imageError = useCallback(
    (e) => {
      console.log('图片加载错误', e)
      errorSrc && setImgSrc(errorSrc)
      hideErrorImage && setImageErrState(true)
      typeof onError === 'function' && onError(e, src, props)
    },
    [src],
  )
  
  const imageLoad = useCallback(
    (event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  return (
    <Image
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      className={classNames(
        imageStyle['d-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': imagRenderingSet,
        },
        className,
      )}
      src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
      lazyLoad={lazyLoad}
      onError={imageError}
      onLoad={imageLoad}
      {...otherOption}
    />
  )

package/dist/components/decorate/PlaceHolder/index.tsx

@@ -1 +1 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
  const { placeHolderPreContainerId = '-1', containerId } = props
  return (
    <View
      className={classNames(placeHolderStyle['d-place-holder'], {
        [placeHolderStyle['d-place-holder-active']]:
          placeHolderPreContainerId === containerId ||
          placeHolderPreContainerId === EMPTY_LIST_PREFLOOR_ID,
      })}
    >
      <View
        className={classNames(
          placeHolderStyle['d-place-holder-border'],
          'flexible-center-box',
        )}
      >
        <Text className={placeHolderStyle['d-place-holder-text']}>
          松开鼠标模块会放到这里
        </Text>
      </View>
    </View>
  )

package/dist/components/floorItem.jd.tsx

@@ -1 +1 @@
-import React from 'react'
    return FloorContentItem ? (
        <FloorContentItem {...props} dataDefines={dataDefines} />
    ) : isDevMode ? (
        renderDecorateDefaultModule()
    ) : null
+import React from 'react'
  const {
    floorData,
    renderSourceType = BUSINESS_TYPE.ONLINE, 
    builtInComponents = {},
    updateContainerFloorListDataFn,
  } = props
  const isDevMode = renderSourceType === BUSINESS_TYPE.DECORATE
  const floorModuleType = floorData?.floorExtInfo?.moduleFlag
  const FloorContentItem =
    (floorModuleType && builtInComponents[floorModuleType]) || null
  const dataDefines = getFloorDataToDataDefines(floorData)
  
  const renderDecorateDefaultModule = () => {
    return (
      <View
        style={{
          lineHeight: '120px',
          textAlign: 'center',
        }}
      >
        当前模块是{floorData.moduleName}
      </View>
    )
  }
  return FloorContentItem ? (
    <FloorContentItem {...props} dataDefines={dataDefines} />
  ) : isDevMode ? (
    renderDecorateDefaultModule()
  ) : null
  switch (moduleId) {
    case 83158:
      return 'freeLayout'
    case 99654:
      return 'activeText'
    case 100382:
      return 'superGoods'
  }
  floorList.map((item) => {
    if (!item.floorExtInfo) {
      return null
    }
    const moduleFlag = item.floorExtInfo.moduleFlag
    if (!moduleFlag) {
      const newModuleFlag = moduleId2ModuleFlag(item.moduleId)
      if (newModuleFlag) {
        item.floorExtInfo.moduleFlag = newModuleFlag
      }
    }
  })