🚀 Perf: [前台]:重写节点操作菜单,pc端邮件触发，移动端点击编辑/菜单按钮触发

front/src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { message } from "antd";
 import { withRouter } from "react-router-dom";
 import { Provider } from "react-redux";
-import Clipboard from "clipboard";
+import ClipboardJS from "clipboard";
 import store from "./redux";
 import NotFound from "./pages/public/notFound/NotFound";
 
@@ -21,7 +21,11 @@ class App extends Component {
 
   componentDidMount() {
     //初始化clipboard
-    let clipboard = new Clipboard(".copy-to-board");
+    let clipboard = new ClipboardJS(".copy-to-board", {
+      text: function(trigger) {
+        return window.copyUrl;
+      }
+    });
     clipboard.on("success", function(e) {
       message.success("复制成功");
       e.clearSelection();

front/src/pages/manage/OverView/function.js

@@ -1,46 +1,75 @@
 import httpUtil from "../../../util/httpUtil";
 import React from "react";
-import { Modal, Button,  Tree, message } from "antd";
+import { Modal, Button, Tree, message, Menu, Dropdown } from "antd";
 import styles from "./index.module.less";
 import IconFont from "../../../components/IconFont";
+import { stopTransfer } from "../../../util/eventUtil";
 const { TreeNode } = Tree;
 
+function menuVisible(item, visible) {
+  if (visible) {
+    window.copyUrl = item.url;
+  }
+  this.props.changeCurrentClickItem(item);
+}
+
+function menuClick(e) {
+  stopTransfer(e);
+  const { currentClickItem, addNode, editNode } = this.props;
+  switch (e.key) {
+    case "add":
+      addNode(currentClickItem);
+      break;
+    case "edit":
+      editNode(currentClickItem);
+      break;
+    case "delete":
+      deleteOne.call(this, currentClickItem);
+      break;
+    default:
+      break;
+  }
+}
+
 /**
  * 渲染树节点中节点内容
  * @param {*} item
  */
 export function renderNodeContent(item) {
-  const { isEdit, addNode, editNode } = this.props;
+  const { isEdit } = this.props;
   // 节点内容后面的操作按钮
-  const btns = (
-    <div className={styles.btns}>
+  const menu = (
+    <Menu onClick={menuClick.bind(this)}>
       {item.type === 0 ? (
-        <Button
-          size="small"
-          className="copy-to-board"
-          data-clipboard-text={item.url}
-          type="primary"
-          name="copy"
-          icon="copy"
-          shape="circle"
-          title="点击复制url"
-        />
-      ) : null}
-      {item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, item)} /> : null}
-      <Button size="small" type="primary" icon="edit" shape="circle" onClick={editNode.bind(this, item)} />
-      <Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
-    </div>
+        <Menu.Item key="copyUrl">
+          <span className="copy-to-board">复制URL</span>
+        </Menu.Item>
+      ) : (
+        <Menu.Item key="add">
+          <span>新增</span>
+        </Menu.Item>
+      )}
+      <Menu.Item key="edit">编辑</Menu.Item>
+      <Menu.Item key="delete">删除</Menu.Item>
+    </Menu>
   );
   return (
     <React.Fragment>
-      {item.type === 0 ? (
-        <a href={item.url} className={styles.nodeContent}>
-          {item.name}
-        </a>
-      ) : (
-        <span className={styles.nodeContent}>{item.name}</span>
-      )}
-      {isEdit ? btns : null}
+      {/* 触发右键菜单 */}
+      <Dropdown overlay={menu} trigger={["contextMenu"]} onVisibleChange={menuVisible.bind(this, item)}>
+        {item.type === 0 ? (
+          <a href={item.url} className={styles.nodeContent}>
+            {item.name}
+          </a>
+        ) : (
+          <span className={styles.nodeContent}>{item.name}</span>
+        )}
+      </Dropdown>
+      {isEdit ? (
+        <Dropdown overlay={menu} trigger={["click"]} onVisibleChange={menuVisible.bind(this, item)}>
+          <Button size="small" onClick={stopTransfer.bind(this)} type="danger" icon="menu" shape="circle" />
+        </Dropdown>
+      ) : null}
     </React.Fragment>
   );
 }
@@ -84,8 +113,7 @@ export function renderTreeNodes(items) {
  * 删除一个
  * @param {*} e
  */
-export function deleteOne(item, e) {
-  e.stopPropagation();
+export function deleteOne(item) {
   if (item.type === 0) {
     deleteBookmark.call(this, [], [item.bookmarkId]);
   } else {

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

@@ -22,7 +22,8 @@ function mapDispatchToProps(dispatch) {
     editNode: (item, e) => dispatch(action.editNode(item, e)),
     changeIsInit: value => dispatch(action.changeIsInit(value)),
     changeCheckedKeys: (keys, nodes) => dispatch(action.changeCheckedKeys(keys, nodes)),
-    changeExpandedKeys: keys => dispatch(action.changeExpandedKeys(keys))
+    changeExpandedKeys: keys => dispatch(action.changeExpandedKeys(keys)),
+    changeCurrentClickItem: item => dispatch(action.changeCurrentClickItem(item))
   };
 }
 
@@ -60,9 +61,6 @@ class OverView extends React.Component {
    * @param {*} e
    */
   treeNodeSelect(key, e) {
-    if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
-      return;
-    }
     const { expandedKeys, changeExpandedKeys } = this.props;
     const item = e.node.props.dataRef;
     if (item.type === 0) {
@@ -85,7 +83,7 @@ class OverView extends React.Component {
           <div className={styles.header}>
             <div className={styles.left}>
               <span className={styles.myTree}>我的书签树</span>
-              {isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, null)} /> : null}
+              <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, null)} />
               {expandedKeys.length > 0 ? (
                 <Button type="primary" size="small" onClick={changeExpandedKeys.bind(this, [])}>
                   收起

front/src/pages/manage/OverView/index.module.less

@@ -20,6 +20,7 @@
 
   .nodeContent {
     display: inline-block;
+    min-width: 4em;
     align-items: center;
     margin-right: 1em;
     overflow-x: hidden;

front/src/redux/action/BookmarkTreeOverview.js

@@ -13,7 +13,9 @@ export function getInitData() {
     checkedKeys: [],
     checkedNodes: [],
     expandedKeys: [],
-    isInit: false
+    isInit: false,
+    //右键菜单触发项
+    currentClickItem: null
   };
 }
 
@@ -46,9 +48,7 @@ export const setIsEdit = isEdit => {
 //新增节点
 export const ADD_NODE = "addNode";
 
-export const addNode = (node, e) => {
-  console.log("add node");
-  e.stopPropagation();
+export const addNode = node => {
   return {
     type: ADD_NODE,
     data: {
@@ -61,8 +61,7 @@ export const addNode = (node, e) => {
 //编辑节点
 export const EDIT_NODE = "editNode";
 
-export const editNode = (node, e) => {
-  e.stopPropagation();
+export const editNode = node => {
   return {
     type: EDIT_NODE,
     data: {
@@ -95,7 +94,6 @@ export const changeCheckedKeys = (checkedKeys, e) => {
 //修改expandedKeys
 export const CHANGE_EXPANDED_KEYS = "changeExpandedKeys";
 export const changeExpandedKeys = expandedKeys => {
-  console.log(expandedKeys);
   return {
     type: CHANGE_EXPANDED_KEYS,
     data: { expandedKeys }
@@ -110,3 +108,11 @@ export const changeIsInit = isInit => {
     data: { isInit }
   };
 };
+
+export const CHANGE_CURRENT_CLICK_ITEM = "changeCurrentClickItem";
+export const changeCurrentClickItem = currentClickItem => {
+  return {
+    type: CHANGE_CURRENT_CLICK_ITEM,
+    data: { currentClickItem }
+  };
+};

front/src/redux/reducer/BookmarkTreeOverview.js

@@ -7,6 +7,7 @@ const BookmarkTreeOverviewReducer = (state = info.getInitData(), action) => {
     case info.UPDATE_TREEDATA:
     case info.CHANGE_CHECKED_KEYS:
     case info.CHANGE_EXPANDED_KEYS:
+    case info.CHANGE_CURRENT_CLICK_ITEM:
     case info.ADD_NODE:
     case info.EDIT_NODE:
       return { ...state, ...action.data };