refactor: 重构tagsView

Author: NLRX-WJC

src/components/TagList/index.jsx

@@ -1,9 +1,9 @@
 .ant-layout-header {
   transition: width 0.2s;
-  // padding: 0px !important;
   z-index: 9;
   position: relative;
   height: 64px;
+  padding:0 20px 0 50px !important;
   background: #fff !important;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   .right-menu {

src/views/layout/Header/index.less

@@ -97,8 +97,8 @@ class Meun extends Component {
     });
   };
 
-  handleMenuSelect = ({ key }) => {
-    let menuItem = getMenuItemInMenuListByProperty(menuList,'path',key)
+  handleMenuSelect = ({ key = "/dashboard" }) => {
+    let menuItem = getMenuItemInMenuListByProperty(menuList, "path", key);
     this.props.addTaglist(menuItem);
   };
 
@@ -107,6 +107,7 @@ class Meun extends Component {
     this.setState({
       menuTreeNode,
     });
+    this.handleMenuSelect(this.state.openKey);
   }
   render() {
     const path = this.props.location.pathname;

src/views/layout/Sider/Menu/index.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { Scrollbars } from "react-custom-scrollbars";
+import { Tag } from "antd";
+import { deleteTaglist } from "@/store/actions";
+
+class TagList extends Component {
+  handleClose = (tag) => {
+    const { history, deleteTaglist, taglist } = this.props;
+    const path = tag.path;
+    const currentPath = history.location.pathname;
+    const length = taglist.length;
+    // 如果关闭的是当前页，跳转到最后一个tag
+    if (path === currentPath) {
+      history.push(taglist[length - 1].path);
+    }
+    // 如果关闭的是最后的tag ,且当前显示的也是最后的tag对应的页面，才做路由跳转
+    if (
+      path === taglist[length - 1].path &&
+      currentPath === taglist[length - 1].path
+    ) {
+      // 因为cutTaglist在最后执行，所以跳转到上一个tags的对应的路由，应该-2
+      if (length - 2 > 0) {
+        history.push(taglist[length - 2].path);
+      } else if (length === 2) {
+        history.push(taglist[0].path);
+      }
+    }
+
+    // 先跳转路由，再修改state树的taglist
+    deleteTaglist(tag);
+  };
+  handleClick = (path) => {
+    this.props.history.push(path);
+  };
+  render() {
+    const { taglist, history } = this.props;
+    const currentPath = history.location.pathname;
+    return (
+      <Scrollbars
+        autoHide
+        autoHideTimeout={1000}
+        autoHideDuration={200}
+        hideTracksWhenNotNeeded={true}
+        renderView={props => <div {...props} className="scrollbar-container" />}
+        renderTrackVertical={props => <div {...props} className="scrollbar-track-vertical"/>}
+      >
+        <ul className="tags-wrap">
+          {taglist.map((tag) => (
+            <li key={tag.path}>
+              <Tag
+                onClose={this.handleClose.bind(null, tag)}
+                closable={tag.path !== "/dashboard"}
+                color={currentPath === tag.path ? "geekblue" : "gold"}
+                onClick={this.handleClick.bind(null, tag.path)}
+              >
+                {tag.title}
+              </Tag>
+            </li>
+          ))}
+        </ul>
+      </Scrollbars>
+    );
+  }
+}
+export default withRouter(
+  connect((state) => state.tagsView, { deleteTaglist })(TagList)
+);

src/views/layout/TagsView/components/TagList.jsx

@@ -1,16 +1,13 @@
 import React from "react";
-import { withRouter } from "react-router-dom";
-import Tags from "./components/Tags";
-// import Dropdown from "./component/Dropdown";
+import TagList from "./components/TagList";
 import "./index.less";
 
 const TagsView = () => {
   return (
-      <div className="tags-row-wrap">
-        <Tags />
-        {/* <Dropdown /> */}
-      </div>
+    <div className="tagsView-container">
+      <TagList />
+    </div>
   );
 };
 
-export default withRouter(TagsView);
+export default TagsView;

src/views/layout/TagsView/components/Tags.jsx

@@ -1,13 +1,11 @@
-.tags-row-wrap {
+.tagsView-container {
   white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
   width: 100%;
   height: 36px;
   line-height: 36px;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-  background-color: #fff;
+  background: #fff;
   padding: 0 16px;
   .tags-wrap {
     padding: 0;
@@ -16,3 +14,10 @@
     }
   }
 }
+
+.scrollbar-container {
+  overflow-y: hidden !important;
+}
+.scrollbar-track-vertical {
+  visibility: hidden !important;
+}