🔨 Refactor: [前台]:书签开发中

front/src/components/IconFont.jsx

@@ -1,7 +1,7 @@
 import { Icon } from "antd";
 
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/font_1261825_snxc2hrpa4o.js"
+  scriptUrl: "//at.alicdn.com/t/font_1261825_cqof8s5fn5n.js"
 
 });
 

front/src/layout/MainLayout/index.jsx

@@ -53,6 +53,8 @@ class MainLayout extends React.Component {
         this.props.updateLoginInfo(null, null);
         localStorage.removeItem("token");
         localStorage.removeItem("userInfo");
+        delete window.token;
+        delete window.userInfo;
         history.replace("/");
         break;
       default:

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

@@ -14,5 +14,6 @@
   .content {
     margin: 0 10%;
     margin-top: 0.2rem;
+    height: calc(100% - 0.8rem);
   }
 }

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

@@ -0,0 +1,18 @@
+import httpUtil from "../../../util/httpUtil";
+import { Modal } from "antd";
+
+/**
+ * 删除书签
+ * @param {*} _this 组件实例
+ * @param {*} folderList 删除的文件夹列表
+ * @param {*} bookmarkList 删除的具体书签列表
+ */
+export function deleteBookmark(_this, folderList, bookmarkList) {
+  Modal.confirm({
+    title: "确认删除？",
+    content: "删除后，无法找回",
+    onOk() {
+      return httpUtil.post("/dele")
+    }
+  });
+}

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

@@ -1,7 +1,9 @@
 import React from "react";
-import { Tree, Empty, Button } from "antd";
+import { Tree, Empty, Button, Tooltip } from "antd";
 import MainLayout from "../../../layout/MainLayout";
 import httpUtil from "../../../util/httpUtil";
+import IconFont from "../../../components/IconFont";
+import styles from "./index.module.less";
 
 const { TreeNode } = Tree;
 
@@ -11,62 +13,146 @@ export default class OverView extends React.Component {
     this.state = {
       treeData: [],
       isEdit: false,
+      isLoading: true,
       expandKeys: ["0"]
     };
   }
 
   componentDidMount() {
-    httpUtil.get("/bookmark/currentUser").then(res => {
+    httpUtil
-      const data = {
+      .get("/bookmark/currentUser")
-        bookmarkId: 0,
+      .then(res => {
-        userId: 0,
+        this.data = res;
-        name: "我的书签",
+        if (res[""]) {
-        children: res
+          this.setState({ treeData: res[""] });
-      };
+        }
-      this.setState({ treeData: [data] });
+        this.setState({ isLoading: false });
-    });
+      })
+      .catch(() => this.setState({ isLoading: false }));
   }
 
-  renderTreeNodes(items) {
+  loadData = e =>
-    return items.map(item => {
+    new Promise(resolve => {
-      if (item.children && item.children.length > 0) {
+      const item = e.props.dataRef;
+      let newPath;
+      if (item.path === "") {
+        newPath = item.bookmarkId;
+      } else {
+        newPath = item.path + "." + item.bookmarkId;
+      }
+      if (this.data[newPath]) {
+        item.children = this.data[newPath];
+        this.setState({ treeData: [...this.state.treeData] });
+        resolve();
+      } else {
+        resolve();
+      }
+    });
+  /**
+   * 复制url到剪贴板
+   * @param {*} key
+   * @param {*} e
+   */
+  copyUrl(key, e) {}
+
+  deleteOne = e => {
+    const id = e.target.id;
+    
+  };
+
+  treeNodeSelect(key, e) {
+    const item = e.node.props.dataRef;
+    if (item.type === 0) {
+      window.open(item.url);
+    } else {
+    }
+  }
+
+  /**
+   * 渲染树节点中节点内容
+   * @param {*} item
+   */
+  renderNodeContent(item) {
+    const { isEdit } = this.state;
+    const bts = (
+      <React.Fragment>
+        <Button size="small" type="primary" name="copy" icon="copy" shape="circle" />
+        <Button size="small" type="danger" id={item.bookmarkId} icon="delete" shape="circle" onClick={this.deleteOne} />
+      </React.Fragment>
+    );
     return (
-          <TreeNode title={item.name} key={item.bookmarkId} disableCheckbox={item.bookmarkId === 0}>
+      <React.Fragment>
+        <Tooltip placement="bottom" title={item.url}>
+          {item.name}
+        </Tooltip>
+        {isEdit ? bts : null}
+      </React.Fragment>
+    );
+  }
+
+  /**
+   * 渲染树节点
+   * @param {*} items
+   */
+  renderTreeNodes(items) {
+    if (!(items && items.length >= 0)) {
+      return null;
+    }
+    return items.map(item => {
+      const isLeaf = item.type === 0;
+      if (!isLeaf) {
+        return (
+          <TreeNode icon={<IconFont type="icon-folder" />} isLeaf={isLeaf} title={item.name} key={item.bookmarkId} dataRef={item}>
             {this.renderTreeNodes(item.children)}
           </TreeNode>
         );
       }
-      return <TreeNode title={item.name} key={item.bookmarkId} disableCheckbox={item.bookmarkId === 0} />;
+      return (
+        <TreeNode
+          icon={<IconFont type="icon-bookmark" />}
+          isLeaf={isLeaf}
+          title={this.renderNodeContent(item)}
+          key={item.bookmarkId}
+          dataRef={item}
+        />
+      );
     });
   }
 
-  treeNodeSelect = e => {
-    console.log(e);
-  };
-
   render() {
-    console.log("页面刷新了");
+    const { isLoading, isEdit, treeData, expandKeys } = this.state;
-    const { isEdit, treeData, expandKeys } = this.state;
-    const isEmply = treeData.length === 1 && treeData[0].children && treeData[0].children.length === 0;
     return (
       <MainLayout>
+        <div className={styles.main}>
+          <div className={styles.header}>
+            <span>我的书签树</span>
             <div>
-          <Button type="primary" onClick={() => this.setState({ isEdit: true })}>
+              <Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
-            编辑
+                {isEdit ? "完成" : "编辑"}
               </Button>
             </div>
+          </div>
           {treeData.length ? (
-          <Tree defaultExpandedKeys={expandKeys} checkable={isEdit} onSelect={this.treeNodeSelect} blockNode>
+            <Tree
+              showIcon
+              loadData={this.loadData}
+              defaultExpandParent
+              checkable={isEdit}
+              onSelect={this.treeNodeSelect}
+              onDoubleClick={this.copyUrl}
+              blockNode
+            >
               {this.renderTreeNodes(treeData)}
             </Tree>
           ) : null}
-        {isEmply ? (
+          {isLoading === false && treeData.length === 0 ? (
             <Empty description="还没有数据">
-            <Button type="primary" onClick={() => this.setState({ isEdit: true })}>
+              <Button size="small" type="primary" onClick={() => this.setState({ isEdit: true })}>
-              编辑
+                新增
               </Button>
             </Empty>
           ) : null}
+        </div>
       </MainLayout>
     );
   }

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

@@ -0,0 +1,9 @@
+.main {
+  min-height: 100%;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

front/src/util/httpUtil.js

@@ -21,7 +21,6 @@ instance.interceptors.request.use(
 //实例添加响应拦截器
 instance.interceptors.response.use(
   function(res) {
-    console.log(res);
     const data = res.data;
     if (data.code === 1) {
       return data.data;