refactor: use nested route

2021-08-07 18:17:25 +08:00 · 2021-08-07 18:17:25 +08:00 · 6f5dde78d5
parent 7695c2a6db
commit 6f5dde78d5
19 changed files with 361 additions and 487 deletions
--- a/openpbl-landing/src/App.js
+++ b/openpbl-landing/src/App.js
@ -1,55 +1,15 @@
 import { Route, BrowserRouter, Switch } from "react-router-dom";

 import './App.less';
-import Home from './pages/Home/index'
-import Project from "./pages/Project";
-import MyProject from "./pages/Project/MyProject";
-import ProjectInfo from "./pages/Project/ProjectInfo/index";
-import PublicProject from "./pages/Project/PublicProject";
-import LearningProject from "./pages/Project/LearningProject";
-import FinishedProject from "./pages/Project/FinishedProject";
-
 import AuthCallback from "./pages/User/Auth/AuthCallback";
-import Learning from "./pages/Project/LearningPage";
-import EditInfo from "./pages/Project/CreateProject/Info";
-import EditOutlined from "./pages/Project/CreateProject/Outline"
-import SectionEditPage from "./pages/Project/CreateProject/Section/SectionEditPage";
-import PreviewSection from "./pages/Project/PreviewProject/PreviewSection";
-import SurveyEditPage from "./pages/Project/CreateProject/Survey/SurveyEditPage";
-import Evidence from "./pages/Project/Evidence";
-import Message from "./pages/Message";
-import AllMessage from "./pages/Message/AllMessage";
-import UnreadMessage from "./pages/Message/UnreadMessage";
+import HeaderLayout from "./pages/component/Layout/HeaderLayout";

 function App() {
  return (
      <div className="App">
        <BrowserRouter>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/callback" component={AuthCallback} />
-
-            <Route exact path="/landing" component={Home} />
-            <Route exact path="/project" component={Project} />
-            <Route exact path="/my-project" component={MyProject} />
-
-            <Route exact path="/project/public" component={PublicProject} />
-            <Route exact path="/project/learning" component={LearningProject} />
-            <Route exact path="/project/finished" component={FinishedProject} />
-
-            <Route exact path="/project/:id/info" component={ProjectInfo} />
-
-            <Route exact path="/project/:id/info/edit" component={EditInfo} />
-            <Route exact path="/project/:id/outline/edit" component={EditOutlined} />
-
-            <Route exact path="/project/:pid/student/:sid/evidence" component={Evidence} />
-
-            <Route exact path="/project/:pid/section/:sid/edit" component={SectionEditPage} />
-            <Route exact path="/project/:pid/section/:sid/task/:tid/survey/edit" component={SurveyEditPage} />
-            <Route exact path="/project/:pid/section/:sid/preview" component={PreviewSection} />
-
-            <Route path="/message" component={Message}/>
-
-            <Route exact path="/project/learning/:pid/:cid/:sid" component={Learning} />
+          <Route path="/" component={HeaderLayout} />
+          <Route exact path="/callback" component={AuthCallback} />
        </BrowserRouter>
      </div>
  );
--- a/openpbl-landing/src/pages/Home/index.jsx
+++ b/openpbl-landing/src/pages/Home/index.jsx
@ -2,7 +2,6 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import {enquireScreen} from 'enquire-js';

-import GlobalHeader from '../component/GlobalHeader/GlobalHeader';
 import Banner from './Banner';
 import Page1 from './Page1';
 import Page2 from './Page2';
@ -35,8 +34,7 @@ class Home extends React.PureComponent {
  render() {
    return (
      <DocumentTitle title="OpenCT">
-        <div style={{textAlign: 'left'}}>
-          <GlobalHeader current="landing"/>
+        <div style={{textAlign: 'left', backgroundColor: 'white'}}>
          <div className="home-wrapper">
            <Banner isMobile={this.state.isMobile}/>
            <TestPage isMobile={this.state.isMobile}/>
--- a/openpbl-landing/src/pages/Message/index.jsx
+++ b/openpbl-landing/src/pages/Message/index.jsx
@ -1,11 +1,8 @@
 import React from "react";
-import {useState} from "react";
-import GlobalHeader from "../component/GlobalHeader/GlobalHeader";
-import MenuBar from "../Project/component/MenuBar";
 import DocumentTitle from "react-document-title";
 import {Layout, Menu, Affix} from "antd";

-import { Route, BrowserRouter, Switch, Link } from "react-router-dom";
+import { Route, Switch, Link } from "react-router-dom";

 import AllMessage from "./AllMessage";
 import UnreadMessage from "./UnreadMessage";
@ -20,8 +17,6 @@ class Message extends React.Component {
    const {menu} = this.state
    return (
      <DocumentTitle title="Project">
-        <div style={{minHeight: '100vh', backgroundColor: '#f2f4f5'}}>
-          <GlobalHeader current="null"/>
          <div style={{maxWidth: '1200px', margin: 'auto', padding: '20px'}}>
            <Layout>
              <Affix offsetTop={0}>
@ -51,7 +46,6 @@ class Message extends React.Component {
              </Layout.Content>
            </Layout>
          </div>
-        </div>
      </DocumentTitle>
    )
  }
--- a/openpbl-landing/src/pages/Project/CreateProject/Info/index.jsx
+++ b/openpbl-landing/src/pages/Project/CreateProject/Info/index.jsx
@ -25,21 +25,21 @@ class EditInfo extends React.PureComponent {
    const {pid} = this.state
    return (
      <DocumentTitle title="Project">
-        <div style={{backgroundColor: '#f2f4f5', minHeight: '100vh',}}>
-          <PageHeader
-            className="site-page-header"
-            onBack={() => this.back()}
-            title="返回"
-            subTitle="我的项目"
-          />
          <div
            style={{
-              paddingTop: '20px',
              paddingLeft: '20px',
              paddingRight: '20px',
-              paddingBottom: '20px'
+              paddingBottom: '20px',
+              maxWidth: '1200px',
+              margin: 'auto',
            }}
          >
+            <PageHeader
+              className="site-page-header"
+              onBack={() => this.back()}
+              title="返回"
+              subTitle="我的项目"
+            />
            <Card className="edit-card">
              <Steps current={0} style={{marginLeft: '20px'}}>
                <Step title="填写信息"/>
@ -49,7 +49,6 @@ class EditInfo extends React.PureComponent {
              <InfoEditPage pid={pid}/>
            </Card>
          </div>
-        </div>
      </DocumentTitle>
    )
  }
--- a/openpbl-landing/src/pages/Project/CreateProject/Outline/index.jsx
+++ b/openpbl-landing/src/pages/Project/CreateProject/Outline/index.jsx
@ -26,21 +26,22 @@ class EditOutline extends React.PureComponent {
    const {pid} = this.state
    return (
      <DocumentTitle title="Project">
-        <div style={{backgroundColor: '#f2f4f5', minHeight: '100vh',}}>
-          <PageHeader
-            className="site-page-header"
-            onBack={() => this.back()}
-            title="返回"
-            subTitle="我的项目"
-          />
-          <div
-            style={{
-              paddingTop: '20px',
-              paddingLeft: '20px',
-              paddingRight: '20px',
-              paddingBottom: '20px'
-            }}
-          >
+        <div
+          style={{
+            paddingLeft: '20px',
+            paddingRight: '20px',
+            paddingBottom: '20px',
+            maxWidth: '1200px',
+            margin: 'auto',
+          }}
+        >
+
+            <PageHeader
+              className="site-page-header"
+              onBack={() => this.back()}
+              title="返回"
+              subTitle="我的项目"
+            />
            <Card className="edit-card">
              <Steps current={1} style={{marginLeft: '20px'}}>
                <Step title="填写信息"/>
@ -49,7 +50,6 @@ class EditOutline extends React.PureComponent {
              <Divider/>
              <OutlineEditPage pid={pid}/>
            </Card>
-          </div>
        </div>
      </DocumentTitle>
    )
--- a/openpbl-landing/src/pages/Project/CreateProject/Outline/index.less
+++ b/openpbl-landing/src/pages/Project/CreateProject/Outline/index.less
@ -1,5 +1,3 @@
 .edit-card {
-  max-width: 1200px;
-  margin: auto;
  text-align: left;
 }
--- a/openpbl-landing/src/pages/Project/LearningPage/index.jsx
+++ b/openpbl-landing/src/pages/Project/LearningPage/index.jsx
@ -1,58 +0,0 @@
-import React from 'react';
-import {Card, message, PageHeader, Progress, Upload} from 'antd';
-import {Document, Page} from 'react-pdf';
-import ProjectApi from "../../../api/ProjectApi";
-
-
-class Learning extends React.PureComponent {
-  state = {
-    pid: this.props.match.params.pid,
-    cid: this.props.match.params.cid,
-    sid: this.props.match.params.sid,
-  }
-
-  componentDidMount() {
-
-  }
-
-  onDocumentLoadSuccess = (numPages) => {
-    this.setState({
-      numPages,
-    });
-  };
-  onUploadFile = (info) => {
-    if (info.file.status !== 'uploading') {
-      console.log(info.file, info.fileList);
-    }
-    if (info.file.status === 'done') {
-      message.success(`${info.file.name} 文件上传成功`);
-    } else if (info.file.status === 'error') {
-      message.error(`${info.file.name} 文件上传失败`);
-    }
-  }
-  back = e => {
-    console.log('back')
-    this.props.history.push('/project/info/' + this.state.pid)
-  }
-
-  render() {
-    const { pid, cid, sid } = this.state
-    return (
-      <div style={{ minHeight: '100vh', backgroundColor: '#f2f4f5' }}>
-        <PageHeader
-          className="site-page-header"
-          onBack={() => this.back()}
-          title="返回"
-          subTitle="项目信息"
-        />
-        <div style={{ paddingLeft: '20px', paddingRight: '20px' }}>
-          <Card style={{ maxWidth: '1200px', margin: 'auto' }} >
-            <h2>介绍</h2>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Learning;
--- a/openpbl-landing/src/pages/Project/MyProject/index.jsx
+++ b/openpbl-landing/src/pages/Project/MyProject/index.jsx
@ -1,32 +1,119 @@
 import React from 'react';
 import DocumentTitle from 'react-document-title';

-import GlobalHeader from '../../component/GlobalHeader/GlobalHeader';
-import MenuBar from "../component/MenuBar";
 import localStorage from "localStorage";
+import {Switch, Route, Link, Redirect} from 'react-router-dom'
+import PublishedProject from "../PublishedProject";
+import EditingProject from "../EditingProject";
+import FinishedProject from "../FinishedProject";
+import LearningProject from "../LearningProject";
+import {Affix, Button, Layout, Menu} from "antd";
+import {CheckCircleOutlined, CheckOutlined, CopyOutlined, HighlightOutlined, SyncOutlined} from "@ant-design/icons";
+import ProjectApi from "../../../api/ProjectApi";

 class MyProject extends React.PureComponent {
  state = {
    type: localStorage.getItem('type'),
  }
+  createProject = e => {
+    ProjectApi.createProject()
+      .then((res)=>{
+        if (res.data.code === 200) {
+          window.open(`/project/${res.data.data}/info/edit`)
+        }
+      })
+      .catch((e)=>{console.log(e)})
+  }
  render() {
    const {type} = this.state
    return (
-      <DocumentTitle title="Project">
-        <div style={{minHeight: '100vh'}}>
-          <GlobalHeader current="my-project"/>
-          <div>
-            {type === 'teacher' ?
-              <MenuBar menu="editing"/>
-              :
-              <MenuBar menu="learning"/>
-            }
-          </div>
-        </div>
+      <DocumentTitle title="My Project">
+          <Layout>
+            <Affix offsetTop={0}>
+              <Layout.Sider
+                breakpoint="lg"
+                collapsedWidth="0"
+                theme="light"
+                style={{backgroundColor: '#f2f4f5'}}
+              >
+                <Menu
+                  defaultSelectedKeys={['published']}
+                  className="menu-bar"
+                  mode="inline"
+                >
+                  {type === 'teacher' ?
+                    <>
+                      <Menu.Item key="published" icon={<CheckCircleOutlined/>}>
+                        <Link to="/my-project/published">
+                          已发布
+                        </Link>
+                      </Menu.Item>
+                      <Menu.Item key="editing" icon={<HighlightOutlined/>}>
+                        <Link to="/my-project/editing">
+                          未发布
+                        </Link>
+                      </Menu.Item>
+                      <Menu.Item key="finished" icon={<CopyOutlined/>}>
+                        <Link to="/my-project/finished">
+                          已结束
+                        </Link>
+                      </Menu.Item>
+                    </>
+                    :
+                    <>
+                      <Menu.Item key="learning" icon={<SyncOutlined/>}>
+                        <Link to="/my-project/learning">
+                          进行中
+                        </Link>
+                      </Menu.Item>
+                      <Menu.Item key="finished" icon={<CheckOutlined/>}>
+                        <Link to="/my-project/finished">
+                          已完成
+                        </Link>
+                      </Menu.Item>
+                    </>
+                  }
+                </Menu>
+                {type === 'teacher' ?
+                  <Button
+                    type='primary'
+                    shape='round'
+                    size="large"
+                    onClick={this.createProject}
+                    style={{
+                      width: '180px',
+                      margin: '10px',
+                    }}
+                  >创建项目</Button>
+                  :
+                  null
+                }
+              </Layout.Sider>
+            </Affix>
+            <Layout.Content style={{marginLeft: '10px', marginTop: '5px'}}>
+              {type === 'teacher' ?
+                <Switch>
+                  <Route exact path="/my-project" render={()=>(
+                    <Redirect to="/my-project/published" />
+                  )}/>
+                  <Route exact path="/my-project/published" component={PublishedProject}/>
+                  <Route exact path="/my-project/editing" component={EditingProject}/>
+                  <Route exact path="/my-project/finished" component={FinishedProject}/>
+                </Switch>
+                :
+                <Switch>
+                  <Route exact path="/my-project" render={()=>(
+                    <Redirect to="/my-project/learning" />
+                  )}/>
+                  <Route exact path="/my-project/learning" component={LearningProject}/>
+                  <Route exact path="/my-project/finished" component={FinishedProject}/>
+                </Switch>
+              }
+            </Layout.Content>
+          </Layout>
      </DocumentTitle>
    );
  }
 }

-
-export default MyProject;
+  export default MyProject;
--- a/openpbl-landing/src/pages/Project/ProjectInfo/index.jsx
+++ b/openpbl-landing/src/pages/Project/ProjectInfo/index.jsx
@ -294,32 +294,23 @@ class ProjectInfo extends React.PureComponent {
      <DocumentTitle title="Project">
        <div style={{backgroundColor: '#f2f4f5'}}>
          <BackTop />
-
-          <PageHeader
-            className="site-page-header"
-            onBack={() => this.back()}
-            title="返回"
-            subTitle="项目详情"
-          />
          <div
            style={{
              width: '100%',
              height: '100%',
-              display: 'flex',
              paddingRight: '20px',
              paddingLeft: '20px',
              paddingBottom: '20px',
-              marginTop: '20px'
+              margin: 'auto',
+              maxWidth: '1200px',
            }}
          >
-            <div
-              style={{
-                margin: 'auto',
-                width: '100%',
-                maxWidth: '1200px',
-                minHeight: '100vh',
-              }}
-            >
+            <PageHeader
+                className="site-page-header"
+                onBack={() => this.back()}
+                title="返回"
+                subTitle="项目详情"
+              />
              <QueueAnim>
                <div key="1">
                  <Card hoverable style={{textAlign: 'left'}}>
@ -364,9 +355,6 @@ class ProjectInfo extends React.PureComponent {
                  >
                    <Menu.Item key="project-introduce">项目信息</Menu.Item>
                    <Menu.Item key="project-outline">项目大纲</Menu.Item>
-{/*
-                    <Menu.Item key="project-comment">评论区</Menu.Item>
-*/}
                    <Menu.Item key="project-evaluation">评价方案</Menu.Item>

                    {type === 'teacher' ? <Menu.Item key="student-admin">学生管理</Menu.Item>
@ -399,7 +387,6 @@ class ProjectInfo extends React.PureComponent {
                </div>
              </QueueAnim>
            </div>
-          </div>
        </div>
      </DocumentTitle>
    );
--- a/openpbl-landing/src/pages/Project/PublicProject/index.jsx
+++ b/openpbl-landing/src/pages/Project/PublicProject/index.jsx
@ -5,7 +5,7 @@ import CarouselPBL from './component/CarouselPBL';
 class PublicProject extends React.PureComponent {
  render() {
    return (
-      <div style={{ minHeight: '100vh',margin: 'auto', maxWidth: '1200px' }}>
+      <div style={{maxWidth: '1200px', margin: 'auto'}}>
        <CarouselPBL/><br />
        <div >
          <ProjectList mode="public"/>
--- a/openpbl-landing/src/pages/Project/component/MenuBar.jsx
+++ b/openpbl-landing/src/pages/Project/component/MenuBar.jsx
@ -1,3 +1,5 @@
+// deprecated
+
 import React from 'react';
 import {Affix, Button, Layout, Menu} from 'antd';
 import {
@ -7,6 +9,7 @@ import {
  HighlightOutlined,
  SyncOutlined,
 } from '@ant-design/icons';
+import {Switch, Route, Link} from 'react-router-dom'

 import LearningProject from '../LearningProject';
 import './menu-bar.less';
@ -17,7 +20,6 @@ import EditingProject from "../EditingProject";
 import localStorage from "localStorage";
 import ProjectApi from "../../../api/ProjectApi";

-const {Sider, Content} = Layout;

 class MenuBar extends React.PureComponent {
  state = {
@ -47,27 +49,32 @@ class MenuBar extends React.PureComponent {
    return (
      <Layout style={{minHeight: '90.5vh'}}>
        <Affix offsetTop={top}>
-          <Sider
+          <Layout.Sider
            breakpoint="lg"
            collapsedWidth="0"
            style={{height: '100%', backgroundColor: '#f2f4f5'}}
          >
            <Menu
-              onClick={this.handleClick}
+              defaultSelectedKeys={['published']}
              className="menu-bar"
-              defaultSelectedKeys={[menu]}
              mode="inline"
            >
              {type === 'teacher' ?
                <>
                  <Menu.Item key="published" icon={<CheckCircleOutlined/>}>
-                    已发布
+                    <Link to="/my-project/published">
+                      已发布
+                    </Link>
                  </Menu.Item>
                  <Menu.Item key="editing" icon={<HighlightOutlined/>}>
-                    未发布
+                    <Link to="/my-project/editing">
+                      未发布
+                    </Link>
                  </Menu.Item>
                  <Menu.Item key="finished" icon={<CopyOutlined/>}>
-                    已结束
+                    <Link to="/my-project/finished">
+                      已结束
+                    </Link>
                  </Menu.Item>
                </>
                :
@ -93,25 +100,21 @@ class MenuBar extends React.PureComponent {
              :
              null
            }
-          </Sider>
+          </Layout.Sider>
        </Affix>

-        <Layout>
-          {type === 'teacher' ?
+          {/*{type === 'teacher' ?
            <Content className="project-content">
-              {/*{menu === 'public' ? <PublicProject/> : null}*/}
              {menu === 'published' ? <PublishedProject/> : null}
              {menu === 'editing' ? <EditingProject/> : null}
              {menu === 'finished' ? <FinishedProject/> : null}
            </Content>
            :
            <Content className="project-content">
-              {/*{menu === 'public' ? <PublicProject/> : null}*/}
              {menu === 'learning' ? <LearningProject/> : null}
              {menu === 'finished' ? <FinishedProject/> : null}
            </Content>
-          }
-        </Layout>
+          }*/}
      </Layout>
    );
  }
--- a/openpbl-landing/src/pages/Project/component/ProjectList.jsx
+++ b/openpbl-landing/src/pages/Project/component/ProjectList.jsx
@ -91,7 +91,7 @@ function ProjectList(obj) {
  };
  return (
    <QueueAnim delay={100} className="queue-simple">
-      <Card style={{backgroundColor: 'white', borderRadius: '4px', textAlign: 'left'}}>
+      <Card bordered={false} style={{backgroundColor: 'white', borderRadius: '4px', textAlign: 'left'}}>
        <Search
          size="large"
          placeholder="搜索"
--- a/openpbl-landing/src/pages/Project/index.jsx
+++ b/openpbl-landing/src/pages/Project/index.jsx
@ -1,23 +1,19 @@
 import React from 'react';
-import DocumentTitle from 'react-document-title';
+import DocumentTitle from 'react-document-title'

-import GlobalHeader from '../component/GlobalHeader/GlobalHeader';
 import PublicProject from "./PublicProject";

 class Project extends React.PureComponent {
-  state = {}
-
-  componentDidMount() {
-  }
-
  render() {
    return (
-      <DocumentTitle title="Project">
-        <div style={{ minHeight: '100vh', backgroundColor: '#f2f4f5' }}>
-          <GlobalHeader current="project"/>
-          <div style={{marginLeft: '10px', marginRight: '10px'}}>
-            <PublicProject/>
-          </div>
+      <DocumentTitle title="Public Project">
+        <div
+          style={{
+            backgroundColor: '#f2f4f5',
+            padding: '20px'
+          }}
+        >
+          <PublicProject/>
        </div>
      </DocumentTitle>
    );
--- a/openpbl-landing/src/pages/User/Login/index.jsx
+++ b/openpbl-landing/src/pages/User/Login/index.jsx
@ -6,7 +6,6 @@ import localStorage from 'localStorage';
 import QueueAnim from 'rc-queue-anim';

 import './login.less';
-import GlobalHeader from "../../component/GlobalHeader/GlobalHeader";


 const {TabPane} = Tabs;
@ -39,7 +38,6 @@ class Login extends React.PureComponent {
    return (
      <DocumentTitle title="Login">
        <div style={{height: '100vh'}}>
-          <GlobalHeader current="login"/>
          <QueueAnim delay={100}>
            <Card className="login-card" key="1">
              <Tabs defaultActiveKey={type} onChange={this.changeTab}>
--- a/openpbl-landing/src/pages/User/Register/index.jsx
+++ b/openpbl-landing/src/pages/User/Register/index.jsx
@ -7,7 +7,6 @@ import localStorage from 'localStorage';
 import QueueAnim from 'rc-queue-anim';

 import './register.less';
-import GlobalHeader from '../../component/GlobalHeader/GlobalHeader';

 const {TabPane} = Tabs;

@ -43,7 +42,6 @@ class Register extends React.PureComponent {
    return (
      <DocumentTitle title="Login">
        <div style={{height: '100vh'}}>
-          <GlobalHeader/>
          <QueueAnim delay={100}>
            <Card className="login-card" key="1">
              <Tabs defaultActiveKey={type} onChange={this.changeTab}>
--- a/openpbl-landing/src/pages/component/GlobalHeader/GlobalHeader.jsx
+++ b/openpbl-landing/src/pages/component/GlobalHeader/GlobalHeader.jsx
@ -1,160 +0,0 @@
-import React from "react";
-import {Avatar, Badge, Button, Col, Dropdown, Layout, Menu, Row} from "antd";
-import {Link} from "react-router-dom";
-import {LogoutOutlined, SettingOutlined, BellOutlined} from '@ant-design/icons';
-
-import * as Auth from "../../User/Auth/Auth"
-import AuthApi from "../../../api/AuthApi"
-
-import './global-header.less'
-
-const {Header} = Layout;
-
-class GlobalHeader extends React.PureComponent {
-  state = {
-    current: this.props.current,
-    account: null,
-  }
-
-  componentDidMount() {
-    AuthApi.getAccount()
-      .then((res) => {
-        if (res.data.code === 200) {
-          this.setState({
-            account: res.data.data
-          })
-          localStorage.setItem("type", res.data.data.tag)
-        } else {
-          localStorage.setItem("type", "")
-        }
-      })
-      .catch((e) => {
-        console.log(e)
-      })
-  }
-
-  handleRightDropdownClick(e) {
-    let account = this.state.account;
-    console.log(account)
-    if (e.key === 'my-account') {
-      window.open(Auth.getMyProfileUrl(account));
-    } else if (e.key === 'logout') {
-      AuthApi.logout()
-        .then((res) => {
-          if (res.data.code === 200) {
-            this.setState({
-              account: null
-            })
-            localStorage.setItem("type", "")
-            window.location.href = '/'
-          }
-        })
-        .catch(e => {
-          console.log(e)
-        })
-    }
-  }
-
-  renderRightDropdown() {
-    const menu = (
-      <Menu onClick={this.handleRightDropdownClick.bind(this)} style={{width: '150px', padding: '5px'}}>
-        <Menu.Item key='my-account'>
-          <SettingOutlined/>&nbsp;&nbsp;
-          我的账户
-        </Menu.Item>
-        <Menu.Item key='logout'>
-          <LogoutOutlined/>&nbsp;&nbsp;
-          退出账号
-        </Menu.Item>
-      </Menu>
-    )
-    return (
-        <Dropdown overlay={menu} placement="bottomRight">
-          <div style={{cursor: 'pointer'}}>
-            <Avatar size="large" src={this.state.account.avatar}/>&nbsp;
-            <span>{this.state.account.name}</span>
-          </div>
-        </Dropdown>
-    );
-  }
-
-  renderAccount() {
-    if (this.state.account === undefined || this.state.account === null) {
-      return (
-        <a href={Auth.getAuthorizeUrl()}>
-          登录注册
-        </a>
-      );
-    } else {
-      return (
-        this.renderRightDropdown()
-      )
-    }
-  }
-
-  render() {
-    const {current} = this.state;
-    return (
-      <div>
-        <Header style={{backgroundColor: 'white'}}>
-          <Row>
-            <Col xxl={15} xl={11} lg={8} md={6} sm={6} xs={10}>
-              <Link to="/landing">
-                <div className="logo">
-                  <span style={{fontSize: '25px', color: 'black', float: 'left', marginLeft: '80px'}}>OpenCT</span>
-                </div>
-              </Link>
-            </Col>
-            <Col xxl={6} xl={10} lg={12} md={14} sm={12} xs={6}>
-              <Menu theme="light" mode="horizontal" defaultSelectedKeys={[current]} style={{border: 0}}>
-                <Menu.Item key="landing">
-                  <Link to="/landing">
-                    首页
-                  </Link>
-                </Menu.Item>
-                <Menu.Item key="project">
-                  <Link to="/project">
-                    公共项目
-                  </Link>
-                </Menu.Item>
-                <Menu.Item key="my-project">
-                  <Link to="/my-project">
-                    我的空间
-                  </Link>
-                </Menu.Item>
-                <Menu.Item key="bbs">
-                  <a href="https://bbs.open-ct.com">
-                    在线论坛
-                  </a>
-                </Menu.Item>
-              </Menu>
-            </Col>
-            <Col xxl={3} xl={3} lg={4} md={4} sm={6} xs={8}>
-              {
-                <>
-                  <span style={{float: 'left'}}>
-                    <Link to="/message/all">
-                      <Button
-                        shape="circle"
-                        type="text"
-                        icon={
-                          <Badge count={999} overflowCount={99} size="small">
-                            <BellOutlined />
-                          </Badge>
-                        }
-                        size="large"
-                      />
-                    </Link>
-                  </span>
-                  {this.renderAccount()}
-                </>
-              }
-            </Col>
-          </Row>
-        </Header>
-      </div>
-    );
-  }
-}
-
-export default GlobalHeader;
--- a/openpbl-landing/src/pages/component/GlobalHeader/index.jsx
+++ b/openpbl-landing/src/pages/component/GlobalHeader/index.jsx
@ -1,119 +0,0 @@
-import React from 'react';
-import {Link} from 'react-router-dom';
-import {Col, Menu, Popover, Row} from 'antd';
-import {enquireScreen} from 'enquire-js';
-
-// const LOGO_URL = 'https://cdn.open-ct.com/logo/openct.png';
-// const LOGO_URL = require('../../assets/logo.svg');
-
-class GlobalHeader extends React.Component {
-  state = {
-    menuVisible: false,
-    menuMode: 'horizontal',
-    current: 'landing',
-  };
-
-  componentDidMount() {
-    enquireScreen((b) => {
-      console.log(b);
-      this.setState({menuMode: b ? 'inline' : 'horizontal'});
-    });
-  }
-
-  handleClick = e => {
-    this.setState({current: e.key});
-  };
-
-  render() {
-    const {menuMode, menuVisible, current} = this.state;
-
-    const menu = (
-      <Menu
-        mode={menuMode}
-        id="nav"
-        key="nav"
-        defaultSelectedKeys={[current]}
-        onClick={this.handleClick}
-      >
-        <Menu.Item key="landing">
-          <Link to="/landing">
-            首页
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="project">
-          <Link to="/project">
-            项目学习
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="student">
-          <Link to="/user/login">
-            学生登录
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="teacher">
-          <Link to="/user/login">
-            教师登录
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="register">
-          <Link to="/user/register">
-            用户注册
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="bbs">
-          <a href="https://bbs.open-ct.com">
-            在线论坛
-          </a>
-        </Menu.Item>
-      </Menu>
-    );
-
-    return (
-      <div id="header" className="header">
-        {menuMode === 'inline' ? (
-          <Popover
-            overlayClassName="popover-menu"
-            placement="bottomRight"
-            content={menu}
-            trigger="click"
-            visible={menuVisible}
-            arrowPointAtCenter
-            onVisibleChange={this.onMenuVisibleChange}
-          >
-
-
-          </Popover>
-        ) : null}
-        <Row>
-          <Col xxl={4} xl={5} lg={8} md={8} sm={24} xs={24}>
-            <div>
-              <Link to="/landing">
-                <img src="assets/logo.svg" style={{height: '64px', marginLeft: '20px'}} alt="logo"/>
-                <span style={{fontWeight: "bold", fontSize: '30px', top: '50%'}}>OpenCT</span>
-              </Link>
-            </div>
-          </Col>
-          <Col xxl={20} xl={19} lg={16} md={16} sm={0} xs={0}>
-            <div className="header-meta">
-              {/*<div id="preview">*/}
-              {/*  <a*/}
-              {/*    id="preview-button"*/}
-              {/*    target="_blank"*/}
-              {/*    href="/register"*/}
-              {/*    rel="noopener noreferrer"*/}
-              {/*  >*/}
-              {/*    <Button icon="eye-o">*/}
-              {/*      注册*/}
-              {/*    </Button>*/}
-              {/*  </a>*/}
-              {/*</div>*/}
-              {menuMode === 'horizontal' ? <div id="menu">{menu}</div> : null}
-            </div>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-export default GlobalHeader;
--- a/openpbl-landing/src/pages/component/Layout/HeaderLayout.jsx
+++ b/openpbl-landing/src/pages/component/Layout/HeaderLayout.jsx
@ -0,0 +1,193 @@
+import React from "react";
+import {Avatar, Badge, Button, Col, Dropdown, Layout, Menu, Row} from "antd";
+import {Switch, Link, Route, Redirect} from "react-router-dom";
+import {LogoutOutlined, SettingOutlined, BellOutlined} from '@ant-design/icons';
+
+import './index.less'
+
+import * as Auth from "../../User/Auth/Auth"
+import AuthApi from "../../../api/AuthApi"
+import Home from "../../Home";
+import Project from "../../Project";
+import MyProject from "../../Project/MyProject";
+import Message from "../../Message";
+import ProjectInfo from "../../Project/ProjectInfo";
+import EditInfo from "../../Project/CreateProject/Info";
+import EditOutlined from "../../Project/CreateProject/Outline";
+import Evidence from "../../Project/Evidence";
+import SectionEditPage from "../../Project/CreateProject/Section/SectionEditPage";
+import SurveyEditPage from "../../Project/CreateProject/Survey/SurveyEditPage";
+import PreviewSection from "../../Project/PreviewProject/PreviewSection";
+
+
+class HeaderLayout extends React.Component {
+  state = {
+    current: this.props.current,
+    account: null,
+  }
+
+  componentDidMount() {
+    AuthApi.getAccount()
+      .then((res) => {
+        if (res.data.code === 200) {
+          this.setState({
+            account: res.data.data
+          })
+          localStorage.setItem("type", res.data.data.tag)
+        } else {
+          localStorage.setItem("type", "")
+        }
+      })
+      .catch((e) => {
+        console.log(e)
+      })
+  }
+
+  handleRightDropdownClick(e) {
+    let account = this.state.account;
+    console.log(account)
+    if (e.key === 'my-account') {
+      window.open(Auth.getMyProfileUrl(account));
+    } else if (e.key === 'logout') {
+      AuthApi.logout()
+        .then((res) => {
+          if (res.data.code === 200) {
+            this.setState({
+              account: null
+            })
+            localStorage.setItem("type", "")
+            window.location.href = '/'
+          }
+        })
+        .catch(e => {
+          console.log(e)
+        })
+    }
+  }
+
+  renderRightDropdown() {
+    const menu = (
+      <Menu onClick={this.handleRightDropdownClick.bind(this)} style={{width: '150px', padding: '5px'}}>
+        <Menu.Item key='my-account'>
+          <SettingOutlined/>&nbsp;&nbsp;
+          我的账户
+        </Menu.Item>
+        <Menu.Item key='logout'>
+          <LogoutOutlined/>&nbsp;&nbsp;
+          退出账号
+        </Menu.Item>
+      </Menu>
+    )
+    return (
+      <Dropdown overlay={menu} placement="bottomRight">
+        <div style={{cursor: 'pointer'}}>
+          <Avatar size="large" src={this.state.account.avatar}/>&nbsp;
+          <span>{this.state.account.name}</span>
+        </div>
+      </Dropdown>
+    );
+  }
+
+  renderAccount() {
+    if (this.state.account === undefined || this.state.account === null) {
+      return (
+        <a href={Auth.getAuthorizeUrl()}>
+          登录注册
+        </a>
+      );
+    } else {
+      return (
+        this.renderRightDropdown()
+      )
+    }
+  }
+
+  render() {
+    const {current} = this.state;
+    return (
+        <Layout style={{minHeight: '100vh'}}>
+          <Layout.Header style={{backgroundColor: 'white'}}>
+            <Row>
+              <Col xxl={15} xl={11} lg={8} md={6} sm={6} xs={10}>
+                <Link to="/landing">
+                  <div className="logo">
+                    <span style={{fontSize: '25px', color: 'black', float: 'left', marginLeft: '80px'}}>OpenCT</span>
+                  </div>
+                </Link>
+              </Col>
+              <Col xxl={6} xl={10} lg={12} md={14} sm={12} xs={6}>
+                <Menu theme="light" mode="horizontal" defaultSelectedKeys={[current]} style={{border: 0}}>
+                  <Menu.Item key="landing">
+                    <Link to="/landing">
+                      首页
+                    </Link>
+                  </Menu.Item>
+                  <Menu.Item key="public-project">
+                    <Link to="/public-project">
+                      公共项目
+                    </Link>
+                  </Menu.Item>
+                  <Menu.Item key="my-project">
+                    <Link to="/my-project/published">
+                      我的空间
+                    </Link>
+                  </Menu.Item>
+                  <Menu.Item key="bbs">
+                    <a href="https://bbs.open-ct.com">
+                      在线论坛
+                    </a>
+                  </Menu.Item>
+                </Menu>
+              </Col>
+              <Col xxl={3} xl={3} lg={4} md={4} sm={6} xs={8}>
+                {
+                  <>
+                    <span style={{float: 'left'}}>
+                      <Link to="/message/all">
+                        <Button
+                          shape="circle"
+                          type="text"
+                          icon={
+                            <Badge count={999} overflowCount={99} size="small">
+                              <BellOutlined />
+                            </Badge>
+                          }
+                          size="large"
+                        />
+                      </Link>
+                    </span>
+                    {this.renderAccount()}
+                  </>
+                }
+              </Col>
+            </Row>
+          </Layout.Header>
+          <Layout.Content>
+            <Switch>
+              <Route exact path="/" render={()=>(
+                <Redirect to="/landing" />
+              )}/>
+
+              <Route exact path="/landing" component={Home}/>
+              <Route exact path="/public-project" component={Project}/>
+              <Route path="/my-project" component={MyProject} />
+              <Route path="/message" component={Message}/>
+
+              <Route exact path="/project/:id/info" component={ProjectInfo} />
+              <Route exact path="/project/:id/info/edit" component={EditInfo} />
+              <Route exact path="/project/:id/outline/edit" component={EditOutlined} />
+
+              <Route exact path="/project/:pid/student/:sid/evidence" component={Evidence} />
+
+              <Route exact path="/project/:pid/section/:sid/edit" component={SectionEditPage} />
+              <Route exact path="/project/:pid/section/:sid/task/:tid/survey/edit" component={SurveyEditPage} />
+              <Route exact path="/project/:pid/section/:sid/preview" component={PreviewSection} />
+            </Switch>
+          </Layout.Content>
+          <Layout.Footer style={{ textAlign: 'center' }}>OpenPBL</Layout.Footer>
+        </Layout>
+    );
+  }
+}
+
+export default HeaderLayout;
--- a/openpbl-landing/src/pages/component/GlobalHeader/global-header.less
+++ b/openpbl-landing/src/pages/component/GlobalHeader/global-header.less