feat: app装修页面

config/proxy.ts

 export default {
   '/api': {
-    'target': process.env.BACK_GATEWAY || 'http://10.0.0.25:8100/',
+    'target': process.env.BACK_GATEWAY || 'http://10.0.0.10:8100/',
     'changeOrigin': true,
     'pathRewrite': { '^/api' : '' },
   }
-}
\ No newline at end of file
+}

src/pages/pageCustomized/components/MobileDesignPanel.tsx

 import React from 'react'
 import { BrickDesign } from 'lingxi-design';
 // import { useSelector } from 'lingxi-editor-core';
+import MobileUIDemo from './mobileUIDemo'
 import styles from './index.less'
 
 const MobileDesignPanel = (props) => {
@@ -8,7 +9,8 @@ const MobileDesignPanel = (props) => {
 
   return (
     <div className={styles.mobileDesignWrap}>
-      <BrickDesign theme={theme} />
+      {/* <BrickDesign theme={theme} /> */}
+      <MobileUIDemo />
       <div className={styles.appBottom}>
         <div className={styles.appBottomStrip}></div>
       </div>

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

+@prefixCls: lingxi;
+@headerNavDefaultColor: #FFF;
+@headerNavScienceColor: #D32F2F;
+
+.mall_latyout {
+  width: 100%;
+  min-height: 100%;
+}
+
+.@{prefixCls}-header-nav {
+  position: relative;
+
+  // 默认样式
+  &.default {
+    background-color: @headerNavDefaultColor;
+
+    .@{prefixCls}-status-bar {
+      background-color: @headerNavDefaultColor;
+    }
+  }
+
+  // 科技类样式
+  &.science {
+    background-color: @headerNavScienceColor;
+
+    .@{prefixCls}-status-bar {
+      // background-color: @headerNavScienceColor;
+      color: #FFF;
+    }
+  }
+
+  .@{prefixCls}-status-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 44px;
+    padding: 0 20px;
+
+    &-time {
+      font-size: 15px;
+      width: 54px;
+      text-align: center;
+    }
+
+    &-right {
+      margin-left: auto;
+      font-size: 20px;
+
+      &-icon {
+        margin-left: 8px;
+      }
+    }
+  }
+}

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

+import React from 'react'
+import { MobileHeaderNav } from 'lingxi-design-ui'
+import { createFromIconfontCN } from '@ant-design/icons'
+import cx from 'classnames'
+import LogoIcon from './icon.png'
+import styles from './index.less'
+
+const MIcon = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2245831_4qatg126x18.js', // 在 iconfont.cn 上生成
+});
+
+const MobileUIDemo: React.FC = () => {
+
+  return (
+    <div className={styles.mall_latyout}>
+      {/* <MobileHeaderNav /> */}
+      <div className={cx(styles["lingxi-header-nav"], styles.science)}>
+        <div className={styles["lingxi-status-bar"]}>
+          <span className={styles["lingxi-status-bar-time"]}>9:41</span>
+          <div className={styles["lingxi-status-bar-right"]}>
+            <MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-xinhao-full" />
+            <MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-xinhao" />
+            <MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-dianliang" />
+          </div>
+        </div>
+        <div className={styles["lingxi-header"]}>
+          <div className={styles["lingxi-header-logoWrap"]}>
+            <img className={styles["lingxi-header-logoWrap-logo"]} src={LogoIcon} />
+            <span className={styles["lingxi-header--shopName"]}>瓴犀商城</span>
+          </div>
+          <div className={styles["lingxi-header-actions"]}>
+            <div className={styles["lingxi-header-actions-item"]}>
+              <img className={styles["lingxi-header-actions-item-icon"]} />
+              <span className={styles.actionText}>我的</span>
+            </div>
+            <div className={styles.actionsItem}>
+              <img className={styles["lingxi-header-actions-item-icon"]} />
+              <span className={styles.actionText}>进货单</span>
+            </div>
+            <div className={styles.actionsItem}>
+              <img className={styles["lingxi-header-actions-item-icon"]} />
+              <span className={styles.actionText}>消息</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MobileUIDemo

src/pages/pageCustomized/mobileEdit/index.tsx

@@ -242,9 +242,7 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
               <MobileDesignPanel theme={theme} />
             </div>
           </div>
-          <div style={{width: 440, backgroundColor: '#FFF'}}>
-
-          </div>
+          <div style={{width: 440, backgroundColor: '#FFF'}}></div>
         </div>
       </div>
       <SettingPanel templateId={id} />