💄 UI: [前台]:书签树展示进行中

front/src/App.jsx

@@ -14,6 +14,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {};
+    window.reactHistory = this.props.history;
   }
 
   render() {

front/src/components/Hello/index.jsx

@@ -1,18 +0,0 @@
-import React, { Component } from "react";
-import { Button } from "antd";
-import styles1 from "./index.module.less";
-
-class Hello extends Component {
-  render() {
-    return (
-      <div className={styles1.main}>
-        hello
-        <div className={styles1.text}>world</div>
-        <Button type="primary">你好</Button>
-        <div className="text1">heihei</div>
-      </div>
-    );
-  }
-}
-
-export default Hello;

front/src/components/Hello/index.module.less

@@ -1,15 +0,0 @@
-.main {
-  width: 100%;
-  height: 50px;
-  text-align: center;
-
-  .text {
-    font-size: 2em;
-  }
-
-  :global {
-    .text1 {
-      color: green;
-    }
-  }
-}

front/src/global.less

@@ -0,0 +1 @@
+@mainBgColor: #ffffff;

front/src/layout/LoginLayout/index.module.less

@@ -1,8 +1,7 @@
+@import "../../global.less";
+
 .main {
-  //   background-image: url("/img/login_bg.jpg");
-  background-color: #f1f1f1;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background-color: @mainBgColor;
 
   display: flex;
   justify-content: center;

front/src/layout/MainLayout/index.jsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Link, withRouter } from "react-router-dom";
+import { Menu, Dropdown, Divider } from "antd";
+import { connect } from "react-redux";
+import styles from "./index.module.less";
+import { changeLoginInfo, DATA_NAME } from "../../redux/action/LoginInfoAction";
+
+function mapStateToProps(state) {
+  return state[DATA_NAME];
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo))
+  };
+}
+
+class MainLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log(props);
+    this.state = {};
+  }
+
+  renderUserArea() {
+    const { userInfo } = this.props;
+    const menu = (
+      <Menu onClick={this.onClick}>
+        <Menu.Item key="personSpace">个人资料</Menu.Item>
+        <Menu.Item key="logout">退出登陆</Menu.Item>
+      </Menu>
+    );
+    if (userInfo !== null) {
+      return (
+        <Dropdown overlay={menu} placement="bottomCenter">
+          <span style={{ cursor: "pointer" }}>{userInfo.username}</span>
+        </Dropdown>
+      );
+    } else {
+      return (
+        <div>
+          <Link to="/public/login">登陆</Link>
+          <Link to="/public/register">注册</Link>
+        </div>
+      );
+    }
+  }
+
+  onClick = e => {
+    const { history } = this.props;
+    switch (e.key) {
+      case "logout":
+        this.props.updateLoginInfo(null, null);
+        localStorage.removeItem("token");
+        localStorage.removeItem("userInfo");
+        history.replace("/");
+        break;
+      default:
+        break;
+    }
+  };
+
+  render() {
+    return (
+      <div className={"fullScreen " + styles.main}>
+        <div className={styles.header}>
+          <img style={{ width: "1.5rem" }} src="/img/bookmarkLogo.png" alt="logo" />
+          {this.renderUserArea()}
+        </div>
+        <Divider style={{ margin: 0 }} />
+        <div className={styles.content}>{this.props.children}</div>
+      </div>
+    );
+  }
+}
+
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(MainLayout)
+);

front/src/layout/MainLayout/index.module.less

@@ -0,0 +1,18 @@
+@import "../../global.less";
+
+.main {
+  background-color: @mainBgColor;
+  min-width: 1366px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.1rem 0.5rem;
+  }
+
+  .content {
+    margin: 0 10%;
+    margin-top: 0.2rem;
+  }
+}

front/src/pages/index.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Button } from "antd";
-import httpUtil from "../util/httpUtil.js";
-
-class Main extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  testPriviledge = () => {
-    httpUtil.get("/priviledgeTest");
-  };
-
-  render() {
-    return (
-      <div>
-        <div>这是主页</div>
-        <Button type="primary" onClick={this.testPriviledge}>
-          测试未登录跳转
-        </Button>
-      </div>
-    );
-  }
-}
-
-export default Main;

front/src/pages/manage/OverView/index.jsx

@@ -1,12 +1,73 @@
 import React from "react";
+import { Tree, Empty, Button } from "antd";
+import MainLayout from "../../../layout/MainLayout";
+import httpUtil from "../../../util/httpUtil";
+
+const { TreeNode } = Tree;
 
 export default class OverView extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      treeData: [],
+      isEdit: false,
+      expandKeys: ["0"]
+    };
   }
 
+  componentDidMount() {
+    httpUtil.get("/bookmark/currentUser").then(res => {
+      const data = {
+        bookmarkId: 0,
+        userId: 0,
+        name: "我的书签",
+        children: res
+      };
+      this.setState({ treeData: [data] });
+    });
+  }
+
+  renderTreeNodes(items) {
+    return items.map(item => {
+      if (item.children && item.children.length > 0) {
+        return (
+          <TreeNode title={item.name} key={item.bookmarkId} disableCheckbox={item.bookmarkId === 0}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode title={item.name} key={item.bookmarkId} disableCheckbox={item.bookmarkId === 0} />;
+    });
+  }
+
+  treeNodeSelect = e => {
+    console.log(e);
+  };
+
   render() {
-    return <div>主界面</div>;
+    console.log("页面刷新了");
+    const { isEdit, treeData, expandKeys } = this.state;
+    const isEmply = treeData.length === 1 && treeData[0].children && treeData[0].children.length === 0;
+    return (
+      <MainLayout>
+        <div>
+          <Button type="primary" onClick={() => this.setState({ isEdit: true })}>
+            编辑
+          </Button>
+        </div>
+        {treeData.length ? (
+          <Tree defaultExpandedKeys={expandKeys} checkable={isEdit} onSelect={this.treeNodeSelect} blockNode>
+            {this.renderTreeNodes(treeData)}
+          </Tree>
+        ) : null}
+        {isEmply ? (
+          <Empty description="还没有数据">
+            <Button type="primary" onClick={() => this.setState({ isEdit: true })}>
+              编辑
+            </Button>
+          </Empty>
+        ) : null}
+      </MainLayout>
+    );
   }
 }

front/src/util/httpUtil.js

@@ -1,9 +1,6 @@
 import { notification } from "antd";
-import { createBrowserHistory } from "history";
 import axios from "axios";
 
-const history = createBrowserHistory();
-
 //定义http实例
 const instance = axios.create({
   baseURL: "/bookmark/api",
@@ -48,10 +45,8 @@ function showError(response) {
   if (response) {
     description = response.message;
     if (response.code === -1) {
-      setTimeout(() => {
-        let redirect = encodeURIComponent(window.location.pathname + window.location.search);
-        history.replace("/public/login?redirect=" + redirect);
-      }, 1000);
+      let redirect = encodeURIComponent(window.location.pathname + window.location.search);
+      window.reactHistory.replace("/public/login?redirect=" + redirect);
     }
   } else {
     description = "无网络连接";