feat: 新增tagsView

Author: NLRX-WJC

src/components/BreadCrumb/index.jsx

@@ -6,8 +6,6 @@ import "./index.less";
 /**
  * 根据当前浏览器地址栏的路由地址，在menuConfig中查找路由跳转的路径
  * 如路由地址为/charts/keyboard,则查找到的路径为[{title: "图表",...},{title: "键盘图表",...}]
- * @param {*} menuList
- * @param {*} pathname
  */
 const getPath = (menuList, pathname) => {
   let temppath = [];

src/components/TagList/index.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { Tag } from "antd";
+import { deleteTaglist } from "@/store/actions";
+
+const TagList = (props) => {
+  const { history, deleteTaglist, taglist, tag } = props;
+  const title = tag.title;
+  const path = tag.path;
+  const currentPath = history.location.pathname;
+
+  const handleClose = (path) => {
+    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);
+  };
+
+  const handleClick = (path, event) => {
+    history.push(path);
+  };
+
+  return (
+    <Tag
+      onClose={() => {
+        handleClose(path);
+      }}
+      closable
+      color={currentPath === path ? "geekblue" : "gold"}
+      onClick={(e) => handleClick(path, e)}
+    >
+      {title}
+    </Tag>
+  );
+};
+
+export default withRouter(
+  connect((state) => state.tagsView, { deleteTaglist })(TagList)
+);

src/store/action-types.js

@@ -7,5 +7,10 @@ export const APP_TOGGLE_SIDEBAR = "APP_TOGGLE_SIDEBAR";
 export const APP_TOGGLE_SETTINGPANEL = "APP_TOGGLE_SETTINGPANEL";
 
 // settings
-
 export const SETTINGS_CHANGE_SETTINGS = "SETTINGS_CHANGE_SETTINGS";
+
+// tagsView
+export const TAGSVIEW_ADD_TAGLIST = "TAGSVIEW_ADD_TAGLIST";
+export const TAGSVIEW_DELETE_TAGLIST = "TAGSVIEW_DELETE_TAGLIST";
+export const TAGSVIEW_EMPTY_TAGLIST = "TAGSVIEW_EMPTY_TAGLIST";
+

src/store/actions/index.js

@@ -2,6 +2,7 @@ import { login, logout } from "./auth";
 import { getUserInfo, setUserToken, setUserInfo, resetUser } from "./user";
 import { toggleSiderBar, toggleSettingPanel } from "./app";
 import { changeSetting } from "./settings";
+import { addTaglist, emptyTaglist, deleteTaglist } from "./tagsView";
 export {
   login,
   logout,
@@ -12,4 +13,7 @@ export {
   toggleSiderBar,
   toggleSettingPanel,
   changeSetting,
+  addTaglist,
+  emptyTaglist,
+  deleteTaglist,
 };

src/store/actions/tagsView.js

@@ -0,0 +1,20 @@
+import * as types from "../action-types";
+export const addTaglist = (tag) => {
+  return {
+    type: types.TAGSVIEW_ADD_TAGLIST,
+    tag
+  };
+};
+
+export const emptyTaglist = () => {
+  return {
+    type: types.TAGSVIEW_EMPTY_TAGLIST
+  };
+};
+
+export const deleteTaglist = (tag) => {
+  return {
+    type: types.TAGSVIEW_DELETE_TAGLIST,
+    tag
+  };
+};

src/store/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
 import user from "./user";
 import app from "./app";
 import settings from "./settings";
+import tagsView from "./tagsView";
 
 export default combineReducers({
   user,
   app,
-  settings
+  settings,
+  tagsView,
 });

src/store/reducers/tagsView.js

@@ -0,0 +1,30 @@
+import * as types from "../action-types";
+const initState = {
+  taglist: [],
+};
+export default function app(state = initState, action) {
+  switch (action.type) {
+    case types.TAGSVIEW_ADD_TAGLIST:
+      const tag = action.tag;
+      if (state.taglist.includes(tag)) {
+        return state;
+      } else {
+        return {
+          ...state,
+          taglist: [...state.taglist, tag],
+        };
+      }
+    case types.TAGSVIEW_DELETE_TAGLIST:
+      return {
+        ...state,
+        taglist: [...state.taglist.filter((item) => item !== action.tag)],
+      };
+    case types.TAGSVIEW_EMPTY_TAGLIST:
+      return {
+        ...state,
+        taglist: [],
+      };
+    default:
+      return state;
+  }
+}

src/utils/index.js

@@ -1,34 +1,50 @@
 export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result;
 
-  const later = function() {
+  const later = function () {
     // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+    const last = +new Date() - timestamp;
 
     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
     if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
+      timeout = setTimeout(later, wait - last);
     } else {
-      timeout = null
+      timeout = null;
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
       if (!immediate) {
-        result = func.apply(context, args)
-        if (!timeout) context = args = null
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
       }
     }
-  }
+  };
 
-  return function(...args) {
-    context = this
-    timestamp = +new Date()
-    const callNow = immediate && !timeout
+  return function (...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
     // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
+    if (!timeout) timeout = setTimeout(later, wait);
     if (callNow) {
-      result = func.apply(context, args)
-      context = args = null
+      result = func.apply(context, args);
+      context = args = null;
     }
 
-    return result
+    return result;
+  };
+}
+// 根据某个属性值从MenuList查找拥有该属性值的menuItem
+export function getMenuItemInMenuListByProperty(menuList, key, value) {
+  let stack = [];
+  stack = stack.concat(menuList);
+  let res;
+  while (stack.length) {
+    let cur = stack.shift();
+    if (cur.children && cur.children.length > 0) {
+      stack = cur.children.concat(stack);
+    }
+    if (value === cur[key]) {
+      res = cur;
+    }
   }
-}
+  return res;
+}

src/views/layout/Content/index.jsx

@@ -3,23 +3,16 @@ import { Redirect, withRouter, Route, Switch } from "react-router-dom";
 import DocumentTitle from "react-document-title";
 import { connect } from "react-redux";
 import { Layout } from "antd";
+import { getMenuItemInMenuListByProperty } from "@/utils";
 import routeList from "@/config/routeMap";
 import menuList from "@/config/menuConfig";
 const { Content } = Layout;
 
 const getPageTitle = (menuList, pathname) => {
-  let stack = [];
   let title = "Ant Design Pro";
-  stack = stack.concat(menuList);
-
-  while (stack.length) {
-    let cur = stack.shift();
-    if (cur.children && cur.children.length > 0) {
-      stack = cur.children.concat(stack);
-    }
-    if (pathname === cur.path) {
-      title = `${cur.title} - Ant Design Pro`;
-    }
+  let item = getMenuItemInMenuListByProperty(menuList, "path", pathname);
+  if (item) {
+    title = `${item.title} - Ant Design Pro`;
   }
   return title;
 };
@@ -33,7 +26,7 @@ const LayoutContent = (props) => {
   };
   return (
     <DocumentTitle title={getPageTitle(menuList, pathname)}>
-      <Content style={{"height":"calc(100% - 100px)"}}>
+      <Content style={{ height: "calc(100% - 100px)" }}>
         <Switch>
           <Redirect exact from="/" to="/dashboard" />
           {routeList.map((route) => {

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

@@ -4,15 +4,15 @@ import { Link, withRouter } from "react-router-dom";
 import { Scrollbars } from "react-custom-scrollbars";
 import { connect } from "react-redux";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { addTaglist } from "@/store/actions";
+import { getMenuItemInMenuListByProperty } from "@/utils";
 import menuList from "@/config/menuConfig";
 import "./index.less";
 const SubMenu = Menu.SubMenu;
 // 重新记录数组顺序
 const reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
-
   const [removed] = result.splice(startIndex, 1);
-
   result.splice(endIndex, 0, removed);
   return result;
 };
@@ -97,6 +97,11 @@ class Meun extends Component {
     });
   };
 
+  handleMenuSelect = ({ key }) => {
+    let menuItem = getMenuItemInMenuListByProperty(menuList,'path',key)
+    this.props.addTaglist(menuItem);
+  };
+
   componentWillMount() {
     const menuTreeNode = this.getMenuNodes(menuList);
     this.setState({
@@ -128,6 +133,7 @@ class Meun extends Component {
                           <Menu
                             mode="inline"
                             theme="dark"
+                            onSelect={this.handleMenuSelect}
                             selectedKeys={[path]}
                             defaultOpenKeys={openKey}
                           >
@@ -147,4 +153,4 @@ class Meun extends Component {
   }
 }
 
-export default connect((state) => state.user)(withRouter(Meun));
+export default connect((state) => state.user, { addTaglist })(withRouter(Meun));