Merge branch 'dev' of fanxb/bookmark into master

bookMarkService/web/src/main/resources/db/migration/V23__插件版本更新.sql

@@ -0,0 +1,3 @@
+update global_config
+set value='0.1.2'
+where code = "pluginVersion";

bookmark_front/src/components/main/things/AddBookmark.vue

@@ -62,7 +62,7 @@ export default {
         file: null,
       },
       rules: {
-        name: [{ required: true, min: 1, max: 1000, message: "名称长度为1-1000", trigger: "change" }],
+        name: [{ required: true, min: 1, max: 1000, message: "名称长度为1-200", trigger: "change" }],
         url: [{ required: true, min: 1, message: "不能为空", trigger: "change" }],
       },
     };

bookmark_front/src/main.js

@@ -19,7 +19,8 @@ import {
 	Popconfirm,
 	AutoComplete,
 	Select,
-	Popover
+	Popover,
+	Breadcrumb
 } from "ant-design-vue";
 import App from "./App.vue";
 import router from "./router";
@@ -46,6 +47,7 @@ Vue.use(Popconfirm);
 Vue.use(AutoComplete);
 Vue.use(Select);
 Vue.use(Popover);
+Vue.use(Breadcrumb);
 Vue.component("my-icon", IconFont);
 
 Vue.prototype.$message = message;

bookmark_front/src/store/modules/treeData.js

@@ -249,12 +249,16 @@ const actions = {
       }
       context.state[TOTAL_TREE_DATA][""].push(targetNode);
     } else {
+      let path = sourceNode.path + "." + sourceNode.bookmarkId;
+      if (!context.state[TOTAL_TREE_DATA][path]) {
+        context.state[TOTAL_TREE_DATA][path] = [];
+      }
       if (sourceNode.children === undefined) {
-        sourceNode.children = [];
+        sourceNode.children = context.state[TOTAL_TREE_DATA][path];
       }
       sourceNode.children.push(targetNode);
     }
-    if (targetNode.type === 0) {
+    if (targetNode.type === 1) {
       context.state[TOTAL_TREE_DATA][targetNode.path + "." + targetNode.bookmarkId] = [];
     }
     targetNode.isLeaf = targetNode.type === 0;

bookmark_front/src/views/home/PinBookmarkItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a :href="pinObj.url" v-if="pinObj" class="pinBookmarkItem" target="_blank">
+    <a :href="pinObj.url" v-if="pinObj" class="pinBookmarkItem">
       <img :src="pinObj.icon.length > 0 ? pinObj.icon : '/favicon.ico'" class="icon" />
       <span class="text" :title="pinObj.name">{{ pinObj.name }}</span>
       <a-dropdown :trigger="['click']">

bookmark_front/src/views/noHead/addBookmark/index.vue

@@ -1,16 +1,51 @@
 <template>
   <div class="ssoAddBookmark">
-    正在添加，请稍后！！！
+    <div class="body">
-    <!-- <button @click="closeIframe">关闭</button> -->
+      <div>
+        <a-input placeholder="标题" v-model="form.name" />
+        <a-input placeholder="网址" v-model="form.url" />
+      </div>
+      <div class="list">
+        <div class="path">
+          <div>保存路径:</div>
+          <a-breadcrumb>
+            <a-breadcrumb-item class="breadItem"><span @click="breadClick(null)">根</span></a-breadcrumb-item>
+            <a-breadcrumb-item class="breadItem" v-for="item in breadList" :key="item.bookmarkId">
+              <span @click="breadClick(item)">{{ item.name.length > 4 ? item.name.substr(0, 3) + "..." : item.name }}</span>
+            </a-breadcrumb-item>
+          </a-breadcrumb>
+        </div>
+        <div class="folderList">
+          <div class="item" v-for="item in folderList" :key="item.bookmarkId" @click="folderClick(item)">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="action">
+      <div v-if="showAddInput" style="display: flex">
+        <a-input v-model="addFolderName" style="width: 8em" />
+        <a-button shape="circle" icon="close" @click="showAddInput = false" />
+        <a-button type="primary" shape="circle" icon="check" @click="addFolder" />
+      </div>
+      <a-button v-else type="link" @click="showAddInput = true">新建文件夹</a-button>
+      <div>
+        <a-button style="marging-right: 1em" type="" @click="closeIframe">取消</a-button>
+        <a-button type="primary" @click="addBookmark">{{ breadList.length === 0 ? "保存到根" : "保存" }}</a-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import HttpUtil from "@/util/HttpUtil";
-import { TREE_DATA, addNode } from "@/store/modules/treeData";
+import { mapState } from "vuex";
+import { TREE_DATA, TOTAL_TREE_DATA, addNode } from "@/store/modules/treeData";
 export default {
   data() {
     return {
+      breadList: [],
+      showAddInput: false,
+      addFolderName: "",
       form: {
         name: null,
         url: null,
@@ -21,6 +56,13 @@ export default {
       },
     };
   },
+  computed: {
+    ...mapState(TREE_DATA, [TOTAL_TREE_DATA]),
+    folderList() {
+      let path = this.getCurrentPath();
+      return this.totalTreeData[path] ? this.totalTreeData[path].filter((item) => item.type == 1) : [];
+    },
+  },
   mounted() {
     //接受父节点传递的书签信息
     window.addEventListener("message", (event) => {
@@ -34,7 +76,7 @@ export default {
         this.form.url = event.data.data.url;
         this.form.icon = event.data.data.icon;
         this.form.iconUrl = event.data.data.iconUrl;
-        this.addBookmark();
+        // this.addBookmark();
       }
     });
     console.log("向父节点获取数据");
@@ -46,11 +88,73 @@ export default {
     },
     //新增书签
     async addBookmark() {
+      this.form.path = this.getCurrentPath();
       let res = await HttpUtil.put("/bookmark", null, this.form);
       this.$message.success("添加成功");
-      await this.$store.dispatch(TREE_DATA + "/" + addNode, { sourceNode: null, targetNode: res });
+      await this.$store.dispatch(TREE_DATA + "/" + addNode, {
+        sourceNode: this.breadList.length == 0 ? null : this.breadList[this.breadList.length - 1],
+        targetNode: res,
+      });
       setTimeout(this.closeIframe, 500);
     },
+    //面包屑点击
+    async breadClick(item) {
+      console.log(item);
+      //点击最后一个无效
+      if (item == null && this.breadList.length == 0) {
+        return;
+      }
+      if (item === this.breadList[this.breadList.length - 1]) {
+        return;
+      }
+      if (item == null) {
+        this.breadList = [];
+      } else {
+        let index = this.breadList.indexOf(item);
+        this.breadList = [...this.breadList.slice(0, index + 1)];
+      }
+    },
+    //点击文件夹
+    folderClick(item) {
+      this.form.path = item.path + "." + item.bookmarkId;
+      this.breadList.push(item);
+    },
+    //新增文件夹
+    async addFolder() {
+      let length = this.addFolderName.trim().length;
+      if (length == 0) {
+        this.$message.error("文件夹名称不为空");
+        return;
+      }
+      if (length > 200) {
+        this.$message.error("文件夹名称长度不能大于200");
+        return;
+      }
+      let form = {
+        name: this.addFolderName,
+        path: this.getCurrentPath(),
+        type: 1,
+        url: "",
+      };
+      let res = await HttpUtil.put("/bookmark", null, form);
+      await this.$store.dispatch(TREE_DATA + "/" + addNode, {
+        sourceNode: this.breadList.length == 0 ? null : this.breadList[this.breadList.length - 1],
+        targetNode: res,
+      });
+      this.addFolderName = "";
+      this.showAddInput = false;
+      this.breadList = [...this.breadList];
+      this.$message.success("新增成功");
+    },
+    //获取当前文件夹路径
+    getCurrentPath() {
+      if (this.breadList.length == 0) {
+        return "";
+      } else {
+        let lastOne = this.breadList[this.breadList.length - 1];
+        return lastOne.path + "." + lastOne.bookmarkId;
+      }
+    },
   },
 };
 </script>
@@ -58,10 +162,64 @@ export default {
 <style lang="less" scoped>
 .ssoAddBookmark {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
-  align-items: center;
+  padding: 0.5em;
+  padding-bottom: 1em;
   background: white;
   width: 100%;
   height: 100vh;
+
+  .body {
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .list {
+      padding-top: 1em;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 0;
+
+      .path {
+        display: flex;
+        overflow: auto;
+        font-size: 0.9em;
+
+        .breadItem {
+          cursor: pointer;
+        }
+
+        .breadItem:last-child {
+          cursor: text;
+        }
+      }
+
+      .folderList {
+        flex: 1;
+        overflow: auto;
+        height: 0;
+        margin-left: 0.5em;
+
+        .item {
+          cursor: pointer;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .item:hover {
+          background: green;
+        }
+      }
+    }
+  }
+
+  .action {
+    padding-top: 1em;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>

浏览器插件/bookmarkBrowserPlugin/static/js/config.js

@@ -1,7 +1,7 @@
 var bookmarkHost = "https://fleyx.com";
 // var bookmarkHost = "http://localhost:8080";
 
-var version = "0.1.1";
+var version = "0.1.2";
 
 window.token = localStorage.getItem('token');
 axios.defaults.baseURL = bookmarkHost + '/bookmark/api';

浏览器插件/bookmarkBrowserPlugin/static/js/content.js

@@ -62,7 +62,7 @@ async function addBookmark (data) {
   document.getElementsByTagName("body")[0].appendChild(addBlockDiv);
   iframe = document.createElement("iframe");
   iframe.src = bookmarkHost + "/noHead/addBookmark?token=" + data.token;
-  iframe.setAttribute("style", "width:70%;min-height:60vh;margin-left:15%;margin-top:10vh;padding:0;border:0;border-radius:10px");
+  iframe.setAttribute("style", "width:640px;display:block;height:80vh;margin:0 auto;margin-top:10vh;padding:0;border:0;border-radius:10px");
   addBlockDiv.appendChild(iframe);
 }