🆕 新增登录页入口, 调整预览框宽度, 添加在线编程入口

src/components/BasicShop/BasicComponents/Image/index.tsx

@@ -52,8 +52,8 @@ const Image = memo((props: IImageConfig) => {
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
-                marginLeft: translate[0],
-                marginTop: translate[1],
+                marginLeft: translate && translate[0],
+                marginTop: translate && translate[1],
                 textAlign: align,
               }}
             >

src/pages/editor/components/Header/index.less

@@ -21,6 +21,7 @@
       display: inline-block;
       width: 50px;
       height: 50px;
+      border-radius: 3px;
       overflow: hidden;
       background: url(../../../../assets/logo.png) no-repeat;
       background-size: contain;
@@ -32,7 +33,8 @@
     text-align: center;
   }
   .btnArea {
-    width: 320px;
-    text-align: left;
+    width: 390px;
+    margin-left: 20px;
+    text-align: right;
   }
 }

src/pages/editor/components/Header/index.tsx

@@ -9,11 +9,12 @@ import {
   UndoOutlined,
   RedoOutlined,
   FileAddOutlined,
+  CodeOutlined,
+  SketchOutlined,
 } from '@ant-design/icons';
 import { history } from 'umi';
 import QRCode from 'qrcode.react';
 import { saveAs } from 'file-saver';
-import Zan from 'components/Zan';
 import req from '@/utils/req';
 import Code from '@/assets/code.png';
 import styles from './index.less';
@@ -47,6 +48,14 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
     }, 600);
   };
 
+  const toOnlineCoding = () => {
+    window.open('/ide');
+  };
+
+  const toVipLogin = () => {
+    window.open('/login');
+  };
+
   const content = () => {
     const { tid } = location.query || '';
     return (
@@ -213,7 +222,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
       <div className={styles.btnArea}>
         <Select
           defaultValue="h5"
-          style={{ width: 120, marginRight: 20 }}
+          style={{ width: 100, marginRight: 20 }}
           onChange={e => {
             setTheme(e);
           }}
@@ -221,7 +230,14 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           <Select.Option value="h5">h5模式</Select.Option>
           <Select.Option value="pc">pc模式</Select.Option>
         </Select>
-        <Zan />
+        <Button type="primary" ghost onClick={toOnlineCoding} style={{ marginRight: '12px' }}>
+          <CodeOutlined />
+          在线编程
+        </Button>
+        <Button type="primary" ghost onClick={toVipLogin} style={{ marginRight: '12px' }}>
+          <SketchOutlined />
+          会员登录
+        </Button>
       </div>
     </div>
   );

src/pages/editor/preview.tsx

@@ -60,7 +60,7 @@ const PreviewPage = memo((props: PreviewPageProps) => {
       height: '684px',
       overflow: 'auto',
       position: 'relative',
-      transform: 'scale(0.6) translateY(-80px)',
+      transform: 'scale(0.7) translateY(-80px)',
     };
   }, [width]);
 
@@ -93,7 +93,7 @@ const PreviewPage = memo((props: PreviewPageProps) => {
             height: '840px',
             width: '419px', //375+22+22
             left: '50%',
-            transform: 'translate(-50%,-80px) scale(0.6)',
+            transform: 'translate(-50%,-80px) scale(0.7)',
             boxShadow: '0 4px 30px 0 rgba(4, 59, 85, 0.1)',
             borderRadius: '60px',
             pointerEvents: 'none',