'完成页面基础代码'

src/app.ts

@@ -87,7 +87,7 @@ export const request: RequestConfig = {
 };
 
 
-export async function getInitialState() {
+export async function getInitialState(): Promise<{ isLogin: boolean, fetchUserInfo: () => any, currentUser?: any }> {
   async function fetchUserInfo() {
     const res = await queryCurrent();
     handleRequest(res)
@@ -98,17 +98,19 @@ export async function getInitialState() {
   }
 
   // 如果是登录页面，不执行
-  if (history.location.pathname !== '/login') {
+  if (history.location.pathname !== '/login' && history.location.pathname !== '/~docs') {
     const currentUser = await fetchUserInfo();
     if(!currentUser) {
       logout(); 
     }
     return {
       fetchUserInfo,
+      isLogin: !!currentUser,
       currentUser,
     };
   }
   return {
+    isLogin: false,
     fetchUserInfo,
   };
 }

src/pages/index.less

@@ -1,3 +0,0 @@
-.title {
-  background: rgb(121, 242, 157);
-}

src/pages/index.tsx

@@ -1,9 +1,8 @@
 import styles from './index.less';
+import { Redirect } from 'react-router';
 
 export default function IndexPage() {
   return (
-    <div>
-      <h1 className={styles.title}>Page index</h1>
-    </div>
+    <Redirect to="/sync" />
   );
 }

src/pages/sync/index.tsx

@@ -1,9 +1,43 @@
-import React from 'react'
+import React from 'react';
+import { useState } from 'react';
+import styles from './sync.less';
+import syncingImg from './assets/syncing.png';
+import syncSuccessImg from './assets/sync.success.png';
+import syncErrorImg from './assets/sync.error.png';
+import classNames from 'classnames';
+
+enum SyncType {
+  Syncing,
+  SyncSuccess,
+  SyncError,
+}
+
+const syncTypeList = [
+  { type: SyncType.Syncing, label: '同步中', icon: syncingImg },
+  { type: SyncType.SyncSuccess, label: '同步成功', icon: syncSuccessImg },
+  { type: SyncType.SyncError, label: '同步异常', icon: syncErrorImg },
+];
 
 export default function SyncView() {
+  const [type, setType] = useState<SyncType>(SyncType.Syncing);
   return (
-    <div>
-      同步任务界面
+    <div className={styles.sync}>
+      <div className={styles.left}>
+        <h4><span>同步任务</span></h4>
+        {
+          syncTypeList.map(({ type: iType, label, icon }) => (
+            <div className={classNames(styles.tab, iType === type ? styles.active : '')} onClick={() => setType(iType)}>
+              <img className={styles.icon} src={icon} alt="" />
+              <span className={styles.label}>{label}</span>
+              <span className={styles.count}>99+</span>
+            </div>
+          ))
+        }
+      </div>
+      <div className={styles.right}>
+        同步任务界面
+        <div style={{ height: 20000 }}></div>
+      </div>
     </div>
   )
 }

src/pages/sync/sync.less

@@ -0,0 +1,42 @@
+.sync {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  .left {
+    flex: none;
+    width: 120px;
+    background-color: #fff;
+    h4 {
+      display: flex;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.6);
+      padding-left: 12px;
+      line-height: 32px;
+      margin-bottom: 0;
+      span { display: block; transform: scale(0.83); }
+    }
+    .tab {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 40px;
+      padding: 0 4px 0 12px;
+      cursor: pointer;
+      opacity: 0.4;
+      border-right: 2px solid transparent;
+      &.active {
+        opacity: 1;
+        border-right-color: @primary-color;
+        background: rgba(120, 80, 255, 0.04);
+      }
+      .icon { flex: none; }
+      .label { flex: 0 0 48px; margin: 0 8px; font-size: 12px; color: rgba(#000, 0.85); }
+      .count { flex: 1; font-size: 12px; color: #8E909F; transform: scale(0.83); }
+    }
+  }
+  .right {
+    flex: 1;
+    overflow: auto;
+  }
+}