💄 UI: [前台]:昵称触发下拉菜单方式改为hover+click

front/src/layout/MainLayout/index.jsx

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