feat: 新增app企业商城装修模板预览页面

src/pages/pageCustomized/components/MobileDesignPanel.tsx

 import React from 'react'
-import { BrickDesign } from 'lingxi-design'
-import MobileUIDemo from './mobileUIDemo'
+import { BrickDesign, LingxiPreview } from 'lingxi-design'
+// import MobileUIDemo from './mobileUIDemo'
 import styles from './index.less'
 
-const MobileDesignPanel = (props) => {
-  const { theme } = props
+interface MobileDesignPanelPropsType {
+  theme: string,
+  isPreview?: boolean,
+}
+
+const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
+  const { theme, isPreview } = props
 
   return (
     <div className={styles.mobileDesignContainer}>
       <div className={styles.mobileDesignWrap}>
-        <BrickDesign theme={theme} mobile />
+        {
+          isPreview ? <LingxiPreview theme={theme} /> : <BrickDesign theme={theme} mobile />
+        }
         {/* <MobileUIDemo /> */}
       </div>
       <div className={styles.appBottom}>
@@ -19,4 +26,8 @@ const MobileDesignPanel = (props) => {
   )
 }
 
+MobileDesignPanel.defaultProps = {
+  isPreview: false
+}
+
 export default MobileDesignPanel

src/pages/pageCustomized/mobileEdit/preview.tsx

+import React, { useEffect, useState } from 'react'
+import { LegoProvider } from 'lingxi-editor-core'
+import ToolBar from '../components/toolBar'
+import MobileDesignPanel from '../components/MobileDesignPanel'
+import AllComponents from '../components/ComponentsPreview'
+import { message } from 'antd'
+import config from '../configs'
+import {
+  mallLayoutConfig,
+  divWrap,
+  bannerWrap,
+  mobileHeaderNav,
+  mobileBanner,
+  mobileQuickNav,
+  mobileShowCase,
+  mobileInformation,
+  mobileRecommendShops,
+  mobileQuality,
+  mobileBottomNavigation,
+} from './config'
+import Loading from '../components/Loading'
+import { PublicApi } from '@/services/api'
+import { GetTemplateAdornAppEnterpriseFindResponse } from '@/services/TemplateApi'
+import styles from './index.less'
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+    }
+  }
+}
+
+const TemplateList = ['science']
+
+const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-mall-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-mall-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-mall-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  /**
+   * 获取app企业商城装修信息
+   */
+  const getAppEnterpriseConfig = (): Promise<GetTemplateAdornAppEnterpriseFindResponse | null> => {
+    return new Promise((resolve, reject) => {
+      const param: any = {
+        templateId: id
+      }
+      PublicApi.getTemplateAdornAppEnterpriseFind(param).then(res => {
+        if(res.code === 1000) {
+          resolve(res.data)
+        } else {
+          reject(res)
+        }
+      }).catch((eror) => {
+        reject(eror)
+      })
+    })
+  }
+
+  const getRecommendShopList = (param) => {
+    return new Promise((resolve, reject) => {
+      PublicApi.getTemplateWebMemberShopWebRecommendList(param).then(res => {
+        if(res.code === 1000) {
+          resolve(res.data.data)
+        } else {
+          reject(false)
+        }
+      }).catch((eror) => {
+        reject(false)
+      })
+    })
+  }
+
+  const getStoreBOList = (dataList) => {
+    if(dataList) {
+      const res = dataList.map(item => {
+        item.selectId = item.id
+        item.name = item.memberName
+        item.selectInfo = Object.assign({}, item)
+        return item
+      })
+      return res
+    } else {
+      return []
+    }
+  }
+
+
+
+  /**
+   * 根据选中的类型和id获取信息
+   * @param data
+   */
+  const getSelectInfo = (data): Promise<any[] | undefined> => {
+    return new Promise((resolve) => {
+      let getFn: any = null
+      const param: any = {
+        current: 1,
+        pageSize: 100,
+      }
+      switch(data.type) {
+        case 1:
+          if(data.recommend && Array.isArray(data.recommend) && data.recommend.length > 0) {
+            param.idInList = data.recommend
+            getFn = PublicApi.postSearchMobileShopEnterpriseGetCommodityList
+          }
+          break
+        case 2:
+          param.idList = data.recommend
+          getFn = PublicApi.getTemplateWebMemberShopWebRecommendList
+          break
+        case 3:
+          if(data.recommend && Array.isArray(data.recommend) && data.recommend.length > 0) {
+            param.idList = data.recommend
+            getFn = PublicApi.postSearchMobileShopEnterpriseGetCategoryBrand
+          }
+          break
+        case 4:
+          param.idList = data.recommend
+          getFn = PublicApi.getManageContentInformationPageByIdIn
+          break
+        default:
+          break
+      }
+      getFn ? getFn(param).then(res => {
+        message.destroy()
+        resolve(data.type === 3 ? res.data : res.data.data)
+      }).catch(() => {
+        resolve([])
+      }) : resolve([])
+    })
+
+  }
+
+  const getExcellentDetailsBO = async (dataList) => {
+    if(dataList) {
+      const newRes: any = []
+      for(const item of dataList) {
+        const temp = { ...item }
+        temp.recommendList = await getSelectInfo(item)
+        newRes.push(temp)
+      }
+      return newRes
+    } else {
+      return []
+    }
+  }
+
+  const getComponentsConfig = async () => {
+    try {
+      const appConfig = await getAppEnterpriseConfig()
+
+      if(appConfig?.topBO) {
+        // 顶部导航
+        mobileHeaderNav[mobileHeaderNav.key].props.styleTheme = appConfig?.topBO.style
+        mobileHeaderNav[mobileHeaderNav.key].props.dataList = appConfig?.topBO.topDetailsBOList
+      }
+
+      if(appConfig?.advertBO) {
+        // 轮播广告
+        mobileBanner[mobileBanner.key].props = {
+          visible: appConfig.advertBO.status,
+          dataList: appConfig.advertBO.advertDetailsBOList
+        }
+      }
+
+      if(appConfig?.functionBO) {
+        // 功能入口
+        mobileQuickNav[mobileQuickNav.key].props = {
+          visible: appConfig.functionBO.status,
+          dataList: appConfig.functionBO.functionDetailsBO,
+        }
+      }
+
+      if(appConfig?.showcaseBO) {
+        // 橱窗推荐
+        mobileShowCase[mobileShowCase.key].props = {
+          visible: appConfig?.showcaseBO.status,
+          dataList: appConfig?.showcaseBO.showcaseDetailsBO,
+        }
+      }
+
+      if(appConfig?.storeBO) {
+        const storeBOParam = {
+          current: 1,
+          pageSize: 100,
+          idList: appConfig?.storeBO.storeIdList || [],
+        }
+
+        const storeBORes = await getRecommendShopList(storeBOParam)
+
+        // 推荐店铺
+        mobileRecommendShops[mobileRecommendShops.key].props = {
+          visible: appConfig?.storeBO.status,
+          dataList: getStoreBOList(storeBORes),
+        }
+      }
+
+      if(appConfig?.excellentBO) {
+        // 优质推荐
+        mobileQuality[mobileQuality.key].props = {
+          visible: appConfig?.excellentBO.status,
+          dataList: await getExcellentDetailsBO(appConfig?.excellentBO.excellentDetailsBO),
+        }
+      }
+
+      if(appConfig?.bottomBO) {
+        // 底部导航
+        mobileBottomNavigation[mobileBottomNavigation.key].props = {
+          visible: appConfig?.bottomBO.status,
+          dataList: appConfig?.bottomBO.bottomDetailsBOList,
+        }
+      }
+
+      const config = {
+        ...mallLayoutConfig,
+        ...divWrap,
+        ...mobileHeaderNav,
+        ...bannerWrap,
+        ...mobileBanner,
+        ...mobileQuickNav,
+        ...mobileShowCase,
+        ...mobileInformation,
+        ...mobileRecommendShops,
+        ...mobileQuality,
+        ...mobileBottomNavigation,
+      }
+      setComponentConfigs(config)
+      setLoading(false)
+    } catch (error) {
+      console.log(error)
+    }
+
+  }
+
+  return !loading ? (
+    <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="APP首页" showActions={true} templateId={id} />
+        <div className={styles['content']}>
+          <AllComponents />
+          <div className={styles['app-wrapper']}>
+            <div className={styles['app-canvas-container']}>
+              <MobileDesignPanel theme={theme} isPreview />
+            </div>
+          </div>
+        </div>
+      </div>
+    </LegoProvider>
+  ) : <Loading />
+}
+
+export default appMallEdit

src/pages/pageCustomized/templateDetail/index.tsx

@@ -88,7 +88,8 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
         if (detailInfo?.environment === 1) {
           window.location.href = `/pageCustomized/mall/template/preview?id=${id}&template=${detailInfo?.fileName}`
         } else {
-          message.info(`暂仅支持web环境模板预览`)
+          window.location.href = `/pageCustomized/mobile/template/preview?id=${id}&template=${detailInfo?.fileName}`
+          // message.info(`暂仅支持web环境模板预览`)
         }
         break
       case "shop":