feat:完成模板预览功能

config/router.tsx

@@ -11,6 +11,10 @@ const router = [
     component: '@/pages/pageCustomized/mallEdit',
   },
   {
+    path: '/mall/template/preview',
+    component: '@/pages/pageCustomized/preview/mallPreview',
+  },
+  {
     path: '/',
     component: '@/layouts/index',
     routes: [

config/routes/index.ts

@@ -31,6 +31,18 @@ const router = [
     component: '@/pages/pageCustomized/mallEdit',
   },
   {
+    path: '/mall/template/preview',
+    component: '@/pages/pageCustomized/preview/mallPreview',
+  },
+  {
+    path: '/channel/template/preview',
+    component: '@/pages/pageCustomized/preview/channelPreview',
+  },
+  {
+    path: '/shop/template/preview',
+    component: '@/pages/pageCustomized/preview/shopPreview',
+  },
+  {
     path: '/',
     component: '@/layouts/index',
     routes: [

package.json

@@ -44,8 +44,8 @@
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "god": "0.1.28",
-    "lingxi-design": "^1.0.7",
-    "lingxi-design-ui": "^1.1.6",
+    "lingxi-design": "^1.0.8",
+    "lingxi-design-ui": "^1.1.10",
     "lingxi-editor-core": "^1.0.6",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",

scripts/services/index.js

@@ -43,17 +43,24 @@ const serviceConfig = {
     }
   },
   //初始化会员支付策略配置
-  payConfig:{
-    payInitializeConfig:{
-      url:'/pay/initialize/config',
+  payConfig: {
+    payInitializeConfig: {
+      url: '/pay/initialize/config',
       method: 'get'
     },
-    payPlatformPayConfig:{
-      url:'/pay/platform/pay/config',
-      method:'get'
+    payPlatformPayConfig: {
+      url: '/pay/platform/pay/config',
+      method: 'get'
     }
   },
   web: {
+    shopInfo: {
+      url: '/manage/shop/findShopsBySiteId',
+      params: {
+        siteId: SITE_ID,
+      },
+      method: 'get'
+    },
     orderMode: {
       url: '/order/rule/configuration/all',
       method: 'get'
@@ -68,7 +75,7 @@ async function batchAxiosHttps() {
   const serverErrorQueue = []
   console.log('\n')
   for (const item in serviceConfig) {
-    if(JSON.stringify(item) !== '{}'){
+    if (JSON.stringify(item) !== '{}') {
       for (const subItem in serviceConfig[item]) {
         try {
           const data = await axios(serviceConfig[item][subItem])
@@ -76,12 +83,12 @@ async function batchAxiosHttps() {
           if (data.data.code === 1000) {
             asyncHttpQueue[item][subItem] = data.data.data
           } else {
-            serverErrorQueue.push({ ...asyncHttpQueue[item][subItem], ...data.data})
+            serverErrorQueue.push({ ...asyncHttpQueue[item][subItem], ...data.data })
             // 默认置为null
             asyncHttpQueue[item][subItem] = null
           }
-        } catch(err) {
-          httpErrorQueue.push({...serviceConfig[item][subItem], ...err.response.data})
+        } catch (err) {
+          httpErrorQueue.push({ ...serviceConfig[item][subItem], ...err.response.data })
         }
       }
     }

src/global/config/global.d.ts

@@ -43,6 +43,17 @@ export interface PayConfig {
 	payPlatformPayConfig: PayPlatformPayConfig[];
 }
 
+export interface ShopInfo {
+	id: number;
+	name: string;
+	type: number;
+	environment: number;
+	logoUrl: string;
+	describe?: any;
+	state: number;
+	url: string;
+}
+
 export interface OrderMode {
 	value: number;
 	label: string;
@@ -50,6 +61,7 @@ export interface OrderMode {
 }
 
 export interface Web {
+	shopInfo: ShopInfo[];
 	orderMode: OrderMode[];
 }
 

src/pages/pageCustomized/channelTemplate/index.tsx

@@ -23,7 +23,9 @@ const ChannelTemplate: React.FC<ShopCenterTemplatePropsType> = (props) => {
     }
     //@ts-ignore
     PublicApi.getTemplatePlatformFindAllTemplateByType(prarm).then(res => {
-      setTemplateList(res.data)
+      if (res.code === 1000) {
+        setTemplateList(res.data)
+      }
     })
   }, [])
 
@@ -33,7 +35,7 @@ const ChannelTemplate: React.FC<ShopCenterTemplatePropsType> = (props) => {
         {
           templateList.map(item => (
             <Col xxl={6} xl={8} lg={12} key={item.id}>
-              <TemplateItem templateInfo={item} type="shop" />
+              <TemplateItem templateInfo={item} type="channel" />
             </Col>
           ))
         }

src/pages/pageCustomized/components/DesignPreview.tsx

+import React from 'react'
+import { LingxiPreview } from 'lingxi-design';
+
+const DesignPreview = (props) => {
+  const { theme } = props
+  return <LingxiPreview theme={theme} />
+}
+
+export default DesignPreview

src/pages/pageCustomized/components/Loading/index.less

+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
\ No newline at end of file

src/pages/pageCustomized/components/toolBar/index.less

@@ -29,4 +29,8 @@
       margin-left: 4px;
     }
   }
+}
+
+.modal_confirm {
+  width: 420px !important;
 }
\ No newline at end of file

src/pages/pageCustomized/components/toolBar/index.tsx

 import React from 'react'
+import { Modal } from 'antd'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 import { history } from 'umi'
 import styles from './index.less'
 
-const ToolBar: React.FC = () => {
+interface ToolBarPropsType {
+  type?: number;
+  title?: string
+}
+
+const ToolBar: React.FC<ToolBarPropsType> = (props) => {
+  const { type = 1, title = "首页" } = props
+
+  const handleGoBack = () => {
+    if (type === 1) {
+      Modal.confirm({
+        content: "是否确认离开模板装修页面？",
+        okText: "确认",
+        className: styles.modal_confirm,
+        cancelText: "取消",
+        onOk: () => {
+          history.goBack()
+        }
+      })
+    } else {
+      history.goBack()
+    }
+  }
+
 
   return (
     <div className={styles.toolbar}>
-      <div className={styles.toolbar_back_btn} onClick={() => history.goBack()}>
+      <div className={styles.toolbar_back_btn} onClick={() => handleGoBack()}>
         <ArrowLeftOutlined />
       </div>
       <div className={styles.toolbar_title}>
-        <span>正在编辑：</span>
-        <label>首页</label>
+        <span>{type === 1 ? '正在编辑：' : '正在预览：'}</span>
+        <label>{title}</label>
       </div>
     </div>
   )

src/pages/pageCustomized/mallEdit/defaultData.ts

@@ -39,7 +39,9 @@ export const headerConfig = {
   key: "3",
   "3": {
     "componentName": "Header",
-    "props": {},
+    "props": {
+      "logoUrl": ""
+    },
   },
 }
 

src/pages/pageCustomized/mallEdit/index.less

@@ -22,19 +22,4 @@
   height: calc(@content-height + 50px);
   overflow: hidden;
 
-}
-
-.loading_wrap {
-  width: 100%;
-  height: 100vh;
-  justify-content: center;
-  flex-direction: column;
-  display: flex;
-  align-items: center;
-
-  .loading_text {
-    margin-top: 16px;
-    font-size: 14px;
-    font-weight: bold;
-  }
 }
\ No newline at end of file

src/pages/pageCustomized/mallEdit/index.tsx

@@ -4,8 +4,9 @@ import ToolBar from '../components/toolBar'
 import DesignPanel from '../components/DesignPanel'
 import SettingPanel from '../settingsPanel'
 import config from '../configs'
+import { GlobalConfig } from '@/global/config'
 import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, interactAdvertConfig, mallLayoutConfig, FindMoreConfig, InformationConfig, FooterConfig } from './defaultData'
-import Loading from './loading'
+import Loading from '../components/Loading'
 import { LAYOUT_TYPE } from '@/constants'
 import { menuData } from './defaultMenu'
 import { PublicApi } from '@/services/api'
@@ -83,7 +84,11 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
   const fetchFirstCategory = () => {
     return new Promise((resolve) => {
       PublicApi.getTemplatePlatformFindAllFirstCategory().then(res => {
-        resolve(res.data)
+        if (res.code === 1000) {
+          resolve(res.data)
+        } else {
+          resolve([])
+        }
       })
     })
   }
@@ -100,7 +105,9 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
 
       // @ts-ignore
       PublicApi.getTemplatePlatformFindFirstCategoryDetail(param).then(res => {
-        resolve(res.data)
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
       })
     })
   }
@@ -110,7 +117,9 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
     return new Promise((resolve) => {
       //@ts-ignore
       PublicApi.getTemplatePlatformFindMallHome({ templateId: id }).then(res => {
-        resolve(res.data)
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
       })
     })
   }
@@ -133,7 +142,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
             })
           } else {
             resolve({
-              leadNewsList,
+              leadLeftNews: leadNewsList,
               leadRightNews: []
             })
           }
@@ -180,6 +189,11 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
     // 二号位广告
     interactAdvertConfig[interactAdvertConfig.key].props.advertList = await findSecondAdvertsByType()
 
+    const shopList = GlobalConfig.web.shopInfo
+    let webMallInfo = shopList.filter(item => item.environment === 1 && item.type === 1)[0]
+    headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl
+    topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name
+
     // 行情资讯
     InformationConfig[InformationConfig.key].props.newsList = await fetchLeadNews()
     InformationConfig[InformationConfig.key].props.allColumn = await fetchAllColumn()

src/pages/pageCustomized/preview/channelPreview/defaultData.ts

+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#FFF"
+      }
+    },
+    "childNodes": ["1", "3", "4", "5", "6"]
+  },
+}
+const shopInfo = {
+  "id": 3,
+  "logo": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/8225da43b0bb4d6199a028a63d9f8da91603161481060.jpg",
+  "describe": "广州市数商云网络科技有限公司（软件企业编号：粤RO-2018-0284 | 高新科技企业编号：GR201844008227），简称「数商云」，是一家领先的企业全链数字化运营服务提供商。致力于通过大数据、云计算等新技术协助企业打造渠道端—营销端—数据端等全链数字化运营体系，全面提升企业运营效益与智慧数字化商业转型。自2013年成立以来，数商云致力于提供企业数字化运营产品及解决方案。",
+  "workshopPics": [
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/1fd1b242c72d45ac8c4950fe45ead3641602840737765.jpg"
+  ],
+  "honorPics": [
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/bc9ebf96f3444063ab38456fd384c6511601286280869.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/ed78a5e0cf984d8b9b0e2901c7eaf7331601286289517.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5d960eb644da493a82c820cde44055621601286293632.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/d8b2dd1f6d204d7ea9e48f97551feb2c1601286299031.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2ef2306619304e7e8bfd505a092bfe3b1601286331100.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/140027f0881d4a2dbeb1dd4214d761f51601286345616.jpg"
+  ],
+  "shopId": 2,
+  "storeUrl": "http://lingxi.shushangyun.com/shop/pointsMall?shopId=eyJzaG9wSWQiOjMsIm1lbWJlcklkIjo5fQ==",
+  "customerUrl": " http://10.0.0.25:4396/shop?shopId=eyJzaG9wSWQiOm51bGwsIm1lbWJlcklkIjpudWxsfQ==",
+  "allStatus": 0,
+  "company": "广州市数商云网络科技有限公司",
+  "templateId": 3,
+  "fileName": "science",
+  "memberId": 9,
+  "levelTag": "青铜会员",
+  "outerStatus": 3,
+  "registerYears": 1,
+}
+
+export const topBarConfig = {
+  key: "1",
+  "1": {
+    "componentName": "TopBar",
+    "props": {
+      linkdisable: true,
+      shopname: shopInfo.company
+    },
+  }
+}
+
+export const topAdvertConfig = {
+  key: "2",
+  "2": {
+    "componentName": "Advert",
+    "props": {
+      "type": "top",
+      "linkdisable": true,
+      "advertList": []
+    },
+  },
+}
+
+
+
+export const headerConfig = {
+  key: "3",
+  "3": {
+    "componentName": "ChannelHeader",
+    "props": {
+      "shopInfo": shopInfo,
+      "logoUrl": shopInfo.logo
+    },
+  },
+}
+
+export const mainNavConfig = {
+  key: "4",
+  "4": {
+    "componentName": "MainNav",
+    "props": {},
+  },
+}
+
+export const bannerAdvertConfig = {
+  key: "5",
+  "5": {
+    "componentName": "Advert",
+    "props": {
+      "type": "banner",
+      "linkdisable": true,
+      "advertList": [
+        {
+          "id": 27,
+          "type": 1,
+          "name": "1",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/fb5b67cab9794cf2a0fefd3e60e17afb1601281348273.jpg",
+          "link": "",
+          "sort": 1
+        },
+        {
+          "id": 28,
+          "type": 1,
+          "name": "2",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/6385b53673734c779aed1548e275bbd21601281360139.jpg",
+          "link": "",
+          "sort": 2
+        },
+        {
+          "id": 29,
+          "type": 1,
+          "name": "3",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/f695c27b7ada424292baff4de01468331601281356852.jpg",
+          "link": "",
+          "sort": 3
+        }
+      ]
+    }
+  },
+}
+
+export const CommonTitle1Config = {
+  key: "6",
+  "6": {
+    "componentName": "CommonTitle",
+    "props": {
+      "title": "热销商品",
+      "type": "primary"
+    },
+  },
+}
+
+export const serviceAdvertConfig = {
+  key: "16",
+  "16": {
+    "componentName": "Advert",
+    "props": {
+      "type": "service",
+      "linkdisable": true,
+      "advertList": [
+        {
+          "id": 23,
+          "type": 2,
+          "name": "1",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/84de6571697843a7accc2144cc3866741601281306690.jpg",
+          "link": "",
+          "sort": 1
+        },
+        {
+          "id": 24,
+          "type": 2,
+          "name": "2",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a3e9ad36257448729b3fe566537bc3221601281314878.jpg",
+          "link": "3",
+          "sort": 2
+        },
+        {
+          "id": 25,
+          "type": 2,
+          "name": "3",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5ba394af86d444ac98d93a66404cbc521601281321253.jpg",
+          "link": "",
+          "sort": 3
+        },
+        {
+          "id": 26,
+          "type": 2,
+          "name": "4",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/c97a56016c9c440087d4bb2ca6e76f3b1601281327363.jpg",
+          "link": "",
+          "sort": 4
+        }
+      ]
+    }
+  },
+}
+
+
+export const CommonTitle2Config = {
+  key: "17",
+  "17": {
+    "componentName": "CommonTitle",
+    "props": {
+      "title": "关于我们",
+      "type": "primary"
+    },
+  },
+}
+
+export const AboutUsConfig = {
+  key: "18",
+  "18": {
+    "componentName": "AboutUs",
+    "props": {
+      "shopInfo": shopInfo
+    },
+  },
+}
+
+const changeColumn = (data) => {
+  let allColumn = data
+  let result = ''
+  if (allColumn && allColumn.length > 0) {
+    let labelList = allColumn.map((item: any) => item.name)
+    let showCount = 4
+    if (labelList.length <= showCount) {
+      result = labelList.join(' | ')
+    } else {
+      labelList = labelList.slice(0, showCount)
+      result = labelList.join(' | ') + " ..."
+    }
+  }
+  return result
+}
+
+
+export const InformationConfig = {
+  key: '19',
+  "19": {
+    "componentName": "Information",
+    "props": {
+      newsList: {
+        leadLeftNews: [
+          {
+            "id": 14,
+            "title": "跨境出口B2B电商风口已至，如何进阶为头部玩家？",
+            "columnId": 3,
+            "recommendLabel": 1,
+            "sort": 1,
+            "top": 0,
+            "readCount": 701,
+            "labelIds": [],
+            "imageUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/89adb7cde8d44da2bd442f9c36f82a781602215115706.jpg",
+            "digest": "后疫情时代，传统外贸企业、尤其是中小企业业务发展面临着巨大的挑战，如何在市场变幻中实现增长突围，找到破局之道，是当下众多外贸企业面临最为紧迫的问题。其中，“转向线上”成为很多传统外贸企业的选择。电子商务的迅速崛起，改变了我们的生活方式，不仅影响了面向个人消费者的零售模式(B2C) ，也同样对企业与企业之间进行的交易（B2B）产生深远影响，尤其是在今年疫情到来后，全球商采线上化、电商化趋势明显，B2B跨境电商的巨大潜力机遇正在加速释放。",
+            "content": "",
+            "status": 2,
+            "createTime": 1602215187400,
+          }
+        ],
+        leadRightNews: [
+          {
+            "id": 11,
+            "title": "疫情这大半年，那些头部的MRO企业都在干啥？",
+            "columnId": 2,
+            "recommendLabel": 1,
+            "sort": null,
+            "top": 0,
+            "readCount": 404,
+            "labelIds": [],
+            "imageUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/1392f6f82bb54073862dc6515958f65a1602213784486.jpg",
+            "digest": "截止到年中，国内社会总零售额的25.2%已经转为电商。其中，一些类似“叮咚买菜”的生活服务类电商和MRO行业的工业品电商，更是迎来了新一轮增速发展。",
+            "content": "",
+            "status": 2,
+            "createTime": 1602215187400
+          }
+        ]
+      },
+      allColumn: changeColumn([
+        {
+          "id": 1,
+          "name": "今日热点",
+          "sort": 1,
+          "status": 1,
+          "createTime": 1601445237254
+        },
+        {
+          "id": 2,
+          "name": "行业头条",
+          "sort": 2,
+          "status": 1,
+          "createTime": 1601445254005
+        },
+        {
+          "id": 3,
+          "name": "专题报道",
+          "sort": 3,
+          "status": 1,
+          "createTime": 1601445278738
+        },
+        {
+          "id": 4,
+          "name": "电商动态",
+          "sort": 4,
+          "status": 1,
+          "createTime": 1602146992259
+        },
+        {
+          "id": 5,
+          "name": "电商运营",
+          "sort": 5,
+          "status": 1,
+          "createTime": 1602146999832
+        },
+        {
+          "id": 6,
+          "name": "商城建设",
+          "sort": 6,
+          "status": 1,
+          "createTime": 1602147013017
+        },
+        {
+          "id": 7,
+          "name": "技术干货",
+          "sort": 7,
+          "status": 1,
+          "createTime": 1602147029778
+        },
+        {
+          "id": 8,
+          "name": "供应链",
+          "sort": 8,
+          "status": 1,
+          "createTime": 1602147068579
+        },
+        {
+          "id": 9,
+          "name": "常见问题",
+          "sort": 8,
+          "status": 1,
+          "createTime": 1602147077521
+        }
+      ])
+    },
+  },
+}
+
+export const FooterConfig = {
+  key: '20',
+  "20": {
+    "componentName": "Footer",
+    "props": {},
+  },
+}
+

src/pages/pageCustomized/preview/channelPreview/defaultMenu.ts

+export const menuData = [
+  {
+    "path": "/shop",
+    "name": "首页",
+    "key": "shopHome",
+  },
+  {
+    "path": "/shop/commodity",
+    "name": "商品",
+    "key": "shopCommodity",
+  },
+  {
+    "path": "/shop/pointsMall",
+    "name": "积分兑换",
+    "key": "shopPointsMall",
+  },
+  {
+    "path": "/shop/infomation",
+    "name": "资讯",
+    "key": "shopInfomation",
+  },
+  {
+    "path": "/shop/about",
+    "name": "关于我们",
+    "key": "shopAbout",
+  },
+]
\ No newline at end of file

src/pages/pageCustomized/preview/channelPreview/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.canvas-container {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  background-color: #F4F5F7;
+  height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
\ No newline at end of file

src/pages/pageCustomized/preview/channelPreview/index.tsx

+import React, { useEffect, useState } from 'react'
+import { LegoProvider } from 'lingxi-editor-core'
+import ToolBar from '../../components/toolBar'
+import DesignPreview from '../../components/DesignPreview'
+import config from '../../configs'
+import { LAYOUT_TYPE } from '@/constants'
+import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData'
+import { menuData } from './defaultMenu'
+import Loading from '../../components/Loading'
+import styles from './index.less'
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+    }
+  }
+}
+
+let TemplateList = ['science']
+
+const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-channel-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-channel-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-channel-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  const getComponentsConfig = async () => {
+    // 导航栏
+    mainNavConfig[mainNavConfig.key].props.menuData = menuData
+    mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.channel
+    mainNavConfig[mainNavConfig.key].props.categoryList = []
+
+    let initIndex = 100
+    let floorLineConfig: any = {}
+    let floorLineKeys: any = []
+
+    let firstCategory: any = [
+      {
+        "id": 23,
+        "name": "电子电器"
+      },
+      {
+        "id": 14,
+        "name": "机械设备"
+      }
+    ]
+
+    const detailData = {
+      23: {
+        "categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/e7d718165e5945e0a27aa668f121479e1601286205635.jpg",
+        "categoryBOList": [
+          {
+            "categoryId": 24,
+            "categoryName": "工业自动化",
+            "selectStatus": 1
+          }
+        ],
+        "goodsBOList": [
+          {
+            "goodsId": 24,
+            "goodsName": "15/19/22/27/32寸嵌入式十指电容触摸工业触摸显示器",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/53caa906bde04a8c8d042de721a6f8e71601283425278.jpg",
+            "goodsPrice": "1000.0",
+            "categoryName": "工控设备",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 21,
+            "goodsName": "10/15/19寸工控一体机触摸屏嵌入式全封闭防尘PLC平板电脑",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2aa8143601ef4b0fbe736db6339e552a1601379088893.png",
+            "goodsPrice": "1300.0",
+            "categoryName": "工控设备",
+            "brandName": "火狐热控"
+          },
+          {
+            "goodsId": 22,
+            "goodsName": "15/17/19寸新零售触摸显示器电容触摸工业触控显示器嵌入式",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/57dd9e8027b04e24a40a26af4f5a97f01601282964802.jpg",
+            "goodsPrice": "987.0",
+            "categoryName": "工控设备",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 28,
+            "goodsName": "穿孔式交流电流变送器霍尔直流0-5A隔离转电压4-20mA 电流变送器",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/80a5abfdae394da5ab1dc62893e1f1821601284763925.jpg",
+            "goodsPrice": "4.6",
+            "categoryName": "变送器",
+            "brandName": "友昌振兴"
+          }
+        ]
+      },
+      14: {
+        "categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/00b31368eacd4f24869ca40e88450bf91601281268329.jpg",
+        "categoryBOList": [
+          {
+            "categoryId": 15,
+            "categoryName": "工程机械",
+            "selectStatus": 1
+          }
+        ],
+        "goodsBOList": [
+          {
+            "goodsId": 19,
+            "goodsName": "厂家直销挖掘装载机多功能两头忙挖掘装载机小型挖掘装载机",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a0561fc936364f969d9216027138737b1601278766489.jpg",
+            "goodsPrice": "10000.0",
+            "categoryName": "挖掘机",
+            "brandName": "数商云"
+          },
+          {
+            "goodsId": 31,
+            "goodsName": "新款30型小挖掘机配驾驶室带空调市政工程水利建设小型液压挖掘机",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/9c535ba9c3374307ae6afbbf535a311e1601364018708.jpeg",
+            "goodsPrice": "20000.0",
+            "categoryName": "立式包装机",
+            "brandName": "合能为"
+          },
+          {
+            "goodsId": 30,
+            "goodsName": "犀牛XN18挖掘机洋马发动机 农用果园",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a748f76ebffc4912a104ad5a1e2727851601364061691.jpeg",
+            "goodsPrice": "30000.0",
+            "categoryName": "挖掘机",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 26,
+            "goodsName": "全新微型挖掘机 犀牛XN18挖掘机洋马发动机 农用果园",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/03f5168b495b428baea67c7ad87f82361601364173457.jpeg",
+            "goodsPrice": "20000.0",
+            "categoryName": "挖掘机",
+            "brandName": "鹏飞宏"
+          }
+        ]
+      }
+    }
+
+    for (let item of firstCategory) {
+      let categoryDetail: any = detailData[item.id]
+
+      let floorLineConfigItem = {}
+      floorLineKeys.push(String(initIndex + 1))
+
+      let FloorLine = {
+        [String(initIndex + 1)]: {
+          "componentName": "ShopFloorLine",
+          "props": {
+            title: item.name
+          },
+          "childNodes": [String(initIndex + 2), String(initIndex + 3)]
+        }
+      }
+
+      let Category = {
+        [String(initIndex + 2)]: {
+          "componentName": "ShopFloorLine.Category",
+          "props": {
+            categoryAdvertPicUrl: categoryDetail.categoryAdvertPicUrl,
+            categoryid: item.id,
+            categoryList: categoryDetail.categoryBOList
+          },
+        },
+      }
+
+      let Goods = {
+        [String(initIndex + 3)]: {
+          "componentName": "ShopFloorLine.Goods",
+          "props": {
+            linkdisable: true,
+            categoryid: item.id,
+            goodsList: categoryDetail.goodsBOList
+          },
+        },
+      }
+
+      floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
+      floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
+      initIndex += 100
+    }
+
+    mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, CommonTitle2Config.key, AboutUsConfig.key, InformationConfig.key, FooterConfig.key]
+    let config = {
+      ...mallLayoutConfig,
+      ...topBarConfig,
+      ...topAdvertConfig,
+      ...headerConfig,
+      ...mainNavConfig,
+      ...bannerAdvertConfig,
+      ...CommonTitle1Config,
+      ...floorLineConfig,
+      ...serviceAdvertConfig,
+      ...CommonTitle2Config,
+      ...AboutUsConfig,
+      ...InformationConfig,
+      ...FooterConfig
+    }
+    setComponentConfigs(config)
+    setLoading(false)
+  }
+
+  return !loading ? (
+    <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="首页" />
+        <div className={styles['content']}>
+          <div className={styles['canvas-container']}>
+            <DesignPreview theme={theme} />
+          </div>
+        </div>
+      </div>
+    </LegoProvider>
+  ) : <Loading />
+}
+
+export default ShopPreview
\ No newline at end of file

src/pages/pageCustomized/preview/mallPreview/defaultData.ts

+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%"
+      }
+    },
+    "childNodes": ["1", "3", "4", "5", "6"]
+  },
+}
+
+export const topBarConfig = {
+  key: "1",
+  "1": {
+    "componentName": "TopBar",
+    "props": {
+      linkdisable: true
+    },
+  }
+}
+
+export const topAdvertConfig = {
+  key: "2",
+  "2": {
+    "componentName": "Advert",
+    "props": {
+      "type": "top",
+      "linkdisable": true,
+      "advertList": []
+    },
+  },
+}
+
+export const headerConfig = {
+  key: "3",
+  "3": {
+    "componentName": "Header",
+    "props": {},
+  },
+}
+
+export const mainNavConfig = {
+  key: "4",
+  "4": {
+    "componentName": "MainNav",
+    "props": {},
+  },
+}
+
+export const bannerAdvertConfig = {
+  key: "5",
+  "5": {
+    "componentName": "Advert",
+    "props": {
+      "type": "banner",
+      "hasQuickNav": true,
+      "linkdisable": true,
+      "advertList": []
+    }
+  },
+}
+
+export const interactAdvertConfig = {
+  key: "6",
+  "6": {
+    "componentName": "Advert",
+    "props": {
+      "type": "interact",
+      "linkdisable": true,
+      "advertList": []
+    },
+  },
+}
+
+export const FindMoreConfig = {
+  key: "18",
+  "18": {
+    "componentName": "FindMore",
+    "props": {},
+  },
+}
+
+export const InformationConfig = {
+  key: '19',
+  "19": {
+    "componentName": "Information",
+    "props": {},
+  },
+}
+
+export const FooterConfig = {
+  key: '20',
+  "20": {
+    "componentName": "Footer",
+    "props": {},
+  },
+}

src/pages/pageCustomized/preview/mallPreview/defaultMenu.ts

+export const menuData = [
+  {
+    "path": "/shop",
+    "name": "首页",
+    "key": "shopHome",
+  },
+  {
+    "path": "/commodity",
+    "name": "商品商城",
+    "key": "shopCommodity",
+  },
+  {
+    "path": "/purchaseOnline",
+    "name": "在线求购",
+    "key": "purchaseOnline",
+  },
+  {
+    "path": "/pointsMall",
+    "name": "积分商城",
+    "key": "shopPointsMall",
+  },
+  {
+    "path": "/shops",
+    "name": "店铺",
+    "key": "shops",
+  },
+  {
+    "path": "/shop/infomation",
+    "name": "资讯",
+    "key": "shopInfomation",
+  },
+]
\ No newline at end of file

src/pages/pageCustomized/preview/mallPreview/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.canvas-container {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  background-color: #F4F5F7;
+  height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
\ No newline at end of file

src/pages/pageCustomized/preview/shopPreview/defaultData.ts

+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#FFF"
+      }
+    },
+    "childNodes": ["1", "3", "4", "5", "17", "18", "6"]
+  },
+}
+
+export const topBarConfig = {
+  key: "1",
+  "1": {
+    "componentName": "TopBar",
+    "props": {
+      linkdisable: true
+    },
+  }
+}
+
+export const topAdvertConfig = {
+  key: "2",
+  "2": {
+    "componentName": "Advert",
+    "props": {
+      "type": "top",
+      "linkdisable": true,
+      "advertList": []
+    },
+  },
+}
+
+const shopInfo = {
+  "id": 3,
+  "logo": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/8225da43b0bb4d6199a028a63d9f8da91603161481060.jpg",
+  "describe": "广州市数商云网络科技有限公司（软件企业编号：粤RO-2018-0284 | 高新科技企业编号：GR201844008227），简称「数商云」，是一家领先的企业全链数字化运营服务提供商。致力于通过大数据、云计算等新技术协助企业打造渠道端—营销端—数据端等全链数字化运营体系，全面提升企业运营效益与智慧数字化商业转型。自2013年成立以来，数商云致力于提供企业数字化运营产品及解决方案。",
+  "workshopPics": [
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/1fd1b242c72d45ac8c4950fe45ead3641602840737765.jpg"
+  ],
+  "honorPics": [
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/bc9ebf96f3444063ab38456fd384c6511601286280869.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/ed78a5e0cf984d8b9b0e2901c7eaf7331601286289517.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5d960eb644da493a82c820cde44055621601286293632.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/d8b2dd1f6d204d7ea9e48f97551feb2c1601286299031.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2ef2306619304e7e8bfd505a092bfe3b1601286331100.jpg",
+    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/140027f0881d4a2dbeb1dd4214d761f51601286345616.jpg"
+  ],
+  "shopId": 2,
+  "storeUrl": "http://lingxi.shushangyun.com/shop/pointsMall?shopId=eyJzaG9wSWQiOjMsIm1lbWJlcklkIjo5fQ==",
+  "customerUrl": " http://10.0.0.25:4396/shop?shopId=eyJzaG9wSWQiOm51bGwsIm1lbWJlcklkIjpudWxsfQ==",
+  "allStatus": 0,
+  "company": "广州市数商云网络科技有限公司",
+  "templateId": 3,
+  "fileName": "science",
+  "memberId": 9,
+  "levelTag": "青铜会员",
+  "outerStatus": 3,
+  "registerYears": 1,
+}
+
+export const headerConfig = {
+  key: "3",
+  "3": {
+    "componentName": "ShopHeader",
+    "props": {
+      "shopInfo": shopInfo,
+      "logoUrl": ""
+    },
+  },
+}
+
+export const mainNavConfig = {
+  key: "4",
+  "4": {
+    "componentName": "MainNav",
+    "props": {},
+  },
+}
+
+export const bannerAdvertConfig = {
+  key: "5",
+  "5": {
+    "componentName": "Advert",
+    "props": {
+      "type": "banner",
+      "linkdisable": true,
+      "advertList": [
+        {
+          "id": 27,
+          "type": 1,
+          "name": "1",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/fb5b67cab9794cf2a0fefd3e60e17afb1601281348273.jpg",
+          "link": "",
+          "sort": 1
+        },
+        {
+          "id": 28,
+          "type": 1,
+          "name": "2",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/6385b53673734c779aed1548e275bbd21601281360139.jpg",
+          "link": "",
+          "sort": 2
+        },
+        {
+          "id": 29,
+          "type": 1,
+          "name": "3",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/f695c27b7ada424292baff4de01468331601281356852.jpg",
+          "link": "",
+          "sort": 3
+        }
+      ]
+    }
+  },
+}
+
+export const CommonTitle1Config = {
+  key: "6",
+  "6": {
+    "componentName": "CommonTitle",
+    "props": {
+      "title": "热销商品",
+      "type": "primary"
+    },
+  },
+}
+
+export const serviceAdvertConfig = {
+  key: "16",
+  "16": {
+    "componentName": "Advert",
+    "props": {
+      "type": "service",
+      "linkdisable": true,
+      "advertList": [
+        {
+          "id": 23,
+          "type": 2,
+          "name": "1",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/84de6571697843a7accc2144cc3866741601281306690.jpg",
+          "link": "",
+          "sort": 1
+        },
+        {
+          "id": 24,
+          "type": 2,
+          "name": "2",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a3e9ad36257448729b3fe566537bc3221601281314878.jpg",
+          "link": "3",
+          "sort": 2
+        },
+        {
+          "id": 25,
+          "type": 2,
+          "name": "3",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5ba394af86d444ac98d93a66404cbc521601281321253.jpg",
+          "link": "",
+          "sort": 3
+        },
+        {
+          "id": 26,
+          "type": 2,
+          "name": "4",
+          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/c97a56016c9c440087d4bb2ca6e76f3b1601281327363.jpg",
+          "link": "",
+          "sort": 4
+        }
+      ]
+    }
+  },
+}
+
+
+export const CommonTitle2Config = {
+  key: "17",
+  "17": {
+    "componentName": "CommonTitle",
+    "props": {
+      "title": "关于我们",
+      "type": "primary"
+    },
+  },
+}
+
+export const AboutUsConfig = {
+  key: "18",
+  "18": {
+    "componentName": "AboutUs",
+    "props": {
+      "shopInfo": shopInfo
+    },
+  },
+}
+
+export const InformationConfig = {
+  key: '19',
+  "19": {
+    "componentName": "Information",
+    "props": {},
+  },
+}
+
+export const FooterConfig = {
+  key: '20',
+  "20": {
+    "componentName": "Footer",
+    "props": {},
+  },
+}
+

src/pages/pageCustomized/preview/shopPreview/defaultMenu.ts

+export const menuData = [
+  {
+    "path": "/shop",
+    "name": "首页",
+    "key": "shopHome",
+  },
+  {
+    "path": "/shop/commodity",
+    "name": "商品",
+    "key": "shopCommodity",
+  },
+  {
+    "path": "/shop/pointsMall",
+    "name": "积分兑换",
+    "key": "shopPointsMall",
+  },
+  {
+    "path": "/shop/infomation",
+    "name": "资讯",
+    "key": "shopInfomation",
+  },
+  {
+    "path": "/shop/about",
+    "name": "关于我们",
+    "key": "shopAbout",
+  },
+]
\ No newline at end of file

src/pages/pageCustomized/preview/shopPreview/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.canvas-container {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  background-color: #F4F5F7;
+  height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
\ No newline at end of file

src/pages/pageCustomized/preview/shopPreview/index.tsx

+import React, { useEffect, useState } from 'react'
+import { LegoProvider } from 'lingxi-editor-core'
+import ToolBar from '../../components/toolBar'
+import PreviewPanel from '../../components/DesignPreview'
+import config from '../../configs'
+import { LAYOUT_TYPE } from '@/constants'
+import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData'
+import { menuData } from './defaultMenu'
+import Loading from '../../components/Loading'
+import { PublicApi } from '@/services/api'
+import { GlobalConfig } from '@/global/config'
+import styles from './index.less'
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+    }
+  }
+}
+
+let TemplateList = ['science']
+
+const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-shop-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-shop-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-shop-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  const getComponentsConfig = async () => {
+    // 导航栏
+    mainNavConfig[mainNavConfig.key].props.menuData = menuData
+    mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.shop
+    mainNavConfig[mainNavConfig.key].props.categoryList = []
+
+    const shopList = GlobalConfig.web.shopInfo
+    let webMallInfo = shopList.filter(item => item.environment === 1 && item.type === 1)[0]
+    headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl
+    topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name
+
+    let initIndex = 100
+    let floorLineConfig: any = {}
+    let floorLineKeys: any = []
+
+    let firstCategory: any = [
+      {
+        "id": 23,
+        "name": "电子电器"
+      },
+      {
+        "id": 14,
+        "name": "机械设备"
+      }
+    ]
+
+    const detailData = {
+      23: {
+        "categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/e7d718165e5945e0a27aa668f121479e1601286205635.jpg",
+        "categoryBOList": [
+          {
+            "categoryId": 24,
+            "categoryName": "工业自动化",
+            "selectStatus": 1
+          }
+        ],
+        "goodsBOList": [
+          {
+            "goodsId": 24,
+            "goodsName": "15/19/22/27/32寸嵌入式十指电容触摸工业触摸显示器",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/53caa906bde04a8c8d042de721a6f8e71601283425278.jpg",
+            "goodsPrice": "1000.0",
+            "categoryName": "工控设备",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 21,
+            "goodsName": "10/15/19寸工控一体机触摸屏嵌入式全封闭防尘PLC平板电脑",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2aa8143601ef4b0fbe736db6339e552a1601379088893.png",
+            "goodsPrice": "1300.0",
+            "categoryName": "工控设备",
+            "brandName": "火狐热控"
+          },
+          {
+            "goodsId": 22,
+            "goodsName": "15/17/19寸新零售触摸显示器电容触摸工业触控显示器嵌入式",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/57dd9e8027b04e24a40a26af4f5a97f01601282964802.jpg",
+            "goodsPrice": "987.0",
+            "categoryName": "工控设备",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 28,
+            "goodsName": "穿孔式交流电流变送器霍尔直流0-5A隔离转电压4-20mA 电流变送器",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/80a5abfdae394da5ab1dc62893e1f1821601284763925.jpg",
+            "goodsPrice": "4.6",
+            "categoryName": "变送器",
+            "brandName": "友昌振兴"
+          }
+        ]
+      },
+      14: {
+        "categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/00b31368eacd4f24869ca40e88450bf91601281268329.jpg",
+        "categoryBOList": [
+          {
+            "categoryId": 15,
+            "categoryName": "工程机械",
+            "selectStatus": 1
+          }
+        ],
+        "goodsBOList": [
+          {
+            "goodsId": 19,
+            "goodsName": "厂家直销挖掘装载机多功能两头忙挖掘装载机小型挖掘装载机",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a0561fc936364f969d9216027138737b1601278766489.jpg",
+            "goodsPrice": "10000.0",
+            "categoryName": "挖掘机",
+            "brandName": "数商云"
+          },
+          {
+            "goodsId": 31,
+            "goodsName": "新款30型小挖掘机配驾驶室带空调市政工程水利建设小型液压挖掘机",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/9c535ba9c3374307ae6afbbf535a311e1601364018708.jpeg",
+            "goodsPrice": "20000.0",
+            "categoryName": "立式包装机",
+            "brandName": "合能为"
+          },
+          {
+            "goodsId": 30,
+            "goodsName": "犀牛XN18挖掘机洋马发动机 农用果园",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a748f76ebffc4912a104ad5a1e2727851601364061691.jpeg",
+            "goodsPrice": "30000.0",
+            "categoryName": "挖掘机",
+            "brandName": "友飞翔"
+          },
+          {
+            "goodsId": 26,
+            "goodsName": "全新微型挖掘机 犀牛XN18挖掘机洋马发动机 农用果园",
+            "goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/03f5168b495b428baea67c7ad87f82361601364173457.jpeg",
+            "goodsPrice": "20000.0",
+            "categoryName": "挖掘机",
+            "brandName": "鹏飞宏"
+          }
+        ]
+      }
+    }
+
+    for (let item of firstCategory) {
+      let categoryDetail: any = detailData[item.id]
+
+      let floorLineConfigItem = {}
+      floorLineKeys.push(String(initIndex + 1))
+
+      let FloorLine = {
+        [String(initIndex + 1)]: {
+          "componentName": "ShopFloorLine",
+          "props": {
+            title: item.name
+          },
+          "childNodes": [String(initIndex + 2), String(initIndex + 3)]
+        }
+      }
+
+      let Category = {
+        [String(initIndex + 2)]: {
+          "componentName": "ShopFloorLine.Category",
+          "props": {
+            categoryAdvertPicUrl: categoryDetail.categoryAdvertPicUrl,
+            categoryid: item.id,
+            categoryList: categoryDetail.categoryBOList
+          },
+        },
+      }
+
+      let Goods = {
+        [String(initIndex + 3)]: {
+          "componentName": "ShopFloorLine.Goods",
+          "props": {
+            linkdisable: true,
+            categoryid: item.id,
+            goodsList: categoryDetail.goodsBOList
+          },
+        },
+      }
+
+      floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
+      floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
+      initIndex += 100
+    }
+
+    mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, FooterConfig.key]
+    let config = {
+      ...mallLayoutConfig,
+      ...topBarConfig,
+      ...topAdvertConfig,
+      ...headerConfig,
+      ...mainNavConfig,
+      ...bannerAdvertConfig,
+      ...CommonTitle2Config,
+      ...AboutUsConfig,
+      ...CommonTitle1Config,
+      ...floorLineConfig,
+      ...serviceAdvertConfig,
+      ...FooterConfig
+    }
+    setComponentConfigs(config)
+    setLoading(false)
+  }
+
+  return !loading ? (
+    <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="首页" />
+        <div className={styles['content']}>
+          <div className={styles['canvas-container']}>
+            <PreviewPanel theme={theme} />
+          </div>
+        </div>
+      </div>
+    </LegoProvider>
+  ) : <Loading />
+}
+
+export default ShopPreview
\ No newline at end of file

src/pages/pageCustomized/shopTemplate/index.tsx

@@ -23,7 +23,9 @@ const ShopTemplate: React.FC<ShopCenterTemplatePropsType> = (props) => {
     }
     //@ts-ignore
     PublicApi.getTemplatePlatformFindAllTemplateByType(prarm).then(res => {
-      setTemplateList(res.data)
+      if (res.code === 1000) {
+        setTemplateList(res.data)
+      }
     })
   }, [])
 

src/pages/pageCustomized/templateDetail/index.tsx

 import React, { useState, Fragment, useEffect } from 'react'
 import { history } from 'umi'
 import { LayoutOutlined, EyeOutlined, PlayCircleOutlined, ToTopOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
-import { Modal } from 'antd'
+import { Modal, message } from 'antd'
 import cx from 'classnames'
 import { inject } from 'mobx-react'
 import UseModal from '../components/useModal'
@@ -51,7 +51,9 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
   const fetchDetail = () => {
     //@ts-ignore
     PublicApi.getTemplatePlatformFindTemplateDetails({ id }).then(res => {
-      setDetailInfo(res.data)
+      if (res.code === 1000) {
+        setDetailInfo(res.data)
+      }
     })
   }
 
@@ -108,6 +110,34 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
     })
   }
 
+  const linkToPreview = () => {
+    switch (type) {
+      case "mall":
+        if (detailInfo?.environment === 1) {
+          window.location.href = `/mall/template/preview?id=${id}&template=${detailInfo?.fileName}`
+        } else {
+          message.info(`暂仅支持web环境模板预览`)
+        }
+        break
+      case "shop":
+        if (detailInfo?.environment === 1) {
+          window.location.href = `/shop/template/preview?template=${detailInfo?.fileName}`
+        } else {
+          message.info(`暂仅支持web环境模板预览`)
+        }
+        break
+      case "channel":
+        if (detailInfo?.environment === 1) {
+          window.location.href = `/channel/template/preview?template=${detailInfo?.fileName}`
+        } else {
+          message.info(`暂仅支持web环境模板预览`)
+        }
+        break
+      default:
+        break
+    }
+  }
+
   return (
     <DetailPage
       title="查看模板"
@@ -141,14 +171,20 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
             </div>
           </div>
         </div>
-        <div className={styles.btn}>
+        <div className={styles.btn} onClick={() => linkToPreview()}>
           <EyeOutlined />
           <label>预览</label>
         </div>
         {
           type === 'mall' && (
             <Fragment>
-              <div className={cx(styles.btn, styles.renovation)} onClick={() => window.location.href = `/mall/template/edit?id=${id}&template=${detailInfo?.fileName}`} >
+              <div className={cx(styles.btn, styles.renovation)} onClick={() => {
+                if (detailInfo?.environment === 1) {
+                  window.location.href = `/mall/template/edit?id=${id}&template=${detailInfo?.fileName}`
+                } else {
+                  message.info(`暂仅支持web环境模板装修`)
+                }
+              }} >
                 <LayoutOutlined />
                 <label>装修</label>
               </div>

src/theme/style/colors.less

 // science下的全局变量在此定义
 // 企业商城科技模板
 .theme-mall-science {
+  font-size: 14px;
   --mall_main_color: #D32F2F;
   --mall_main_color_opacity_2: rgba(211, 47, 47, .2);
   --mall_sub_color: rgba(211, 47, 47, 0.1);
@@ -13,6 +14,7 @@
 
 // 渠道科技类模板
 .theme-channel-science {
+  font-size: 14px;
   --mall_main_color: #464552;
   --mall_sub_color: #FFFFFF;
 
@@ -23,6 +25,7 @@
 
 // 店铺科技类模板颜色配置
 .theme-shop-science {
+  font-size: 14px;
   --mall_main_color: #D32F2F;
   --mall_sub_color: rgba(211, 47, 47, 0.1);