feat:浏览器插件书签树基本完成

浏览器插件/bookmark-chrome/src/popup/popup.html

@@ -12,6 +12,7 @@
   <div id="app">
 
   </div>
+  <script src="/static/js/localforage.min.js"></script>
   <script src="popup.js"></script>
 </body>
 </html>

浏览器插件/bookmark-chrome/src/popup/router/components/BookmarkTree.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="main">
+    <el-tree :props="props" :load="loadNode" @node-click="nodeClick" lazy> </el-tree>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+  name: 'BookmarkTree',
+  data() {
+    return {
+      props: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf',
+      },
+      treeObj: null,
+    };
+  },
+  methods: {
+    async loadNode(node, resolve) {
+      if (window.treeData == null) {
+        // eslint-disable-next-line no-undef
+        if ((window.treeData = await localforage.getItem('treeData')) == null) {
+          window.treeData = await axios.get('/bookmark/currentUser');
+          // eslint-disable-next-line no-undef
+          await localforage.setItem('treeData', window.treeData);
+        }
+        console.log(window.treeData);
+      }
+      console.log(node, resolve);
+      let list;
+      if (node.level === 0) {
+        list = window.treeData[''];
+      } else {
+        list = window.treeData[node.data.path + '.' + node.data.bookmarkId];
+      }
+      list.forEach(item => (item.leaf = item.type === 0));
+      console.log(list);
+      return resolve(list);
+    },
+    nodeClick(data) {
+      if (data.type === 1) {
+        return;
+      }
+      let url = data.url;
+      if (!url.startsWith('http')) {
+        url = 'http://' + url;
+      }
+      console.log(url);
+      window.open(data.url);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 80%;
+  margin: 0 auto;
+}
+</style>

浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue

@@ -14,13 +14,18 @@
           <a target="_blank" :href="item.url">{{ item.name }}</a>
         </div>
       </div>
+      <bookmark-tree />
     </div>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
+import BookmarkTree from '../components/BookmarkTree';
 export default {
+  components: {
+    BookmarkTree,
+  },
   data() {
     return {
       personInfo: {},