temp

bookmark_front/src/components/main/Search.vue

@@ -19,22 +19,20 @@
     <div v-if="focused && list.length > 0" class="searchContent">
       <div
         class="listItem"
-        :class="{ itemActive: index == hoverIndex || index == selectIndex }"
+        :class="{ itemActive: index == selectIndex }"
         v-for="(item, index) in list"
         :key="item.bookmarkId"
         @mousedown="itemClick(index)"
-        @mouseenter="mouseEnterOut(index, 'enter')"
-        @mouseleave="mouseEnterOut(index, 'leave')"
         :id="'bookmark:' + item.bookmarkId"
       >
-        <div class="name" style="" target="_blank">
+        <div class="name" target="_blank" :title="item.url.substr(0, 50)">
           {{ item.name }}
         </div>
-        <div class="icons" v-if="hoverIndex === index">
+        <div class="icons">
           <a-tooltip title="定位到书签树中" v-if="showLocation">
             <my-icon style="color: white; font-size: 1.3em" type="icon-et-location" @mousedown="location($event, item)" />
           </a-tooltip>
-          <a-tooltip :title="'复制链接:' + item.url">
+          <a-tooltip title="复制链接">
             <a-icon
               type="copy"
               style="color: white; font-size: 1.3em; padding-left: 0.5em"
@@ -65,8 +63,6 @@ export default {
       value: "",
       focused: false,
       list: [],
-      //鼠标悬浮选中
-      hoverIndex: null,
       //上下选中
       selectIndex: null,
       copyBoard: null, //剪贴板对象
@@ -129,7 +125,7 @@ export default {
     submit(forceSearch) {
       let url;
       if (forceSearch || this.selectIndex == null) {
-        //说明使用百度搜索
+        //说明使用网页搜索
         url = this.searchUrl + encodeURIComponent(this.value);
       } else {
         //说明跳转到书签
@@ -142,21 +138,11 @@ export default {
       a.click();
     },
     inputBlur() {
-      console.log("blur");
       this.focused = false;
     },
     inputFocus() {
-      console.log("focus");
       this.focused = true;
     },
-    mouseEnterOut(item, type) {
-      console.log(item, type);
-      if (type === "enter") {
-        this.hoverIndex = item;
-      } else {
-        this.hoverIndex = null;
-      }
-    },
     //定位到书签树中
     location(event, item) {
       this.$emit("location", item);
@@ -299,13 +285,19 @@ export default {
         white-space: nowrap;
       }
       .icons {
-        display: flex;
+        display: none;
         align-items: center;
       }
     }
+    .listItem:hover {
+      background-color: @listActiveBgColor;
+    }
     .itemActive {
       background-color: @listActiveBgColor;
     }
+    .listItem:hover .icons {
+      display: flex;
+    }
   }
 }
 </style>

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

@@ -1,14 +1,14 @@
 <template>
   <div>
     <a-form-model ref="addForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-model-item v-if="isAdd" prop="type" label="类别">
+      <a-form-model-item v-if="isAdd && !addType" prop="type" label="类别">
         <a-radio-group v-model="form.type" :options="options" />
       </a-form-model-item>
       <template v-if="form.type !== 'file'">
         <a-form-model-item prop="name" label="名称" :required="false">
           <a-input v-model="form.name" placeholder="名称" />
         </a-form-model-item>
-        <a-form-model-item v-if="form.type === '0'" prop="url" label="URL">
+        <a-form-model-item v-if="form.type === 'bookmark'" prop="url" label="URL">
           <a-input v-model="form.url" placeholder="url" />
         </a-form-model-item>
         <div class="btns">
@@ -16,7 +16,13 @@
         </div>
       </template>
       <div v-else prop="file">
-        <a-upload-dragger name="file" :data="{ path: form.path }" :headers="{ 'jwt-token': token }" action="/bookmark/api/bookmark/uploadBookmarkFile" @change="fileChange">
+        <a-upload-dragger
+          name="file"
+          :data="{ path: form.path }"
+          :headers="{ 'jwt-token': token }"
+          action="/bookmark/api/bookmark/uploadBookmarkFile"
+          @change="fileChange"
+        >
           <p class="ant-upload-drag-icon">
             <a-icon type="inbox" />
           </p>
@@ -30,14 +36,15 @@
 <script>
 import HttpUtil from "@/util/HttpUtil";
 const options = [
-  { label: "书签", value: "0" },
+  { label: "书签", value: "bookmark" },
-  { label: "文件夹", value: "1" },
+  { label: "文件夹", value: "folder" },
   { label: "导入", value: "file" },
 ];
 export default {
   name: "addBookmark",
   props: {
-    isAdd: Boolean,
+    isAdd: Boolean, //是否新增
+    addType: String, //新增的类别
     targetNode: Object,
   },
   data() {
@@ -48,7 +55,7 @@ export default {
       token: "",
       loading: false,
       form: {
-        type: "0", //0:书签,1:文件夹,file:文件
+        type: "bookmark",
         name: "",
         url: "",
         path: "",
@@ -63,9 +70,9 @@ export default {
   created() {
     console.log(this.isAdd, this.targetNode);
     if (!this.isAdd) {
-      this.form.type = this.targetNode.type.toString();
+      this.form.type = this.targetNode.type == 0 ? "bookmark" : "folder";
       this.form.name = this.targetNode.name;
-      this.form.url = this.form.type === "0" ? this.targetNode.url : "";
+      this.form.url = this.form.type === "bookmark" ? this.targetNode.url : "";
     }
     this.token = this.$store.state.globalConfig.token;
     this.form.path = this.targetNode == null ? "" : this.targetNode.path + (this.isAdd ? "." + this.targetNode.bookmarkId : "");
@@ -74,25 +81,27 @@ export default {
     /**
      * 文件提交不走这儿
      */
-    submit() {
+    async submit() {
       //名称校验
       this.loading = true;
-      this.$refs["addForm"].validateField(this.form.type === 0 ? ["name", "url"] : "name", async (message) => {
+      this.$refs["addForm"].validate(async (pass) => {
-        if (message.length > 0) {
+        if (!pass) {
           this.loading = false;
           return;
         }
         let res = null;
+        let body = JSON.parse(JSON.stringify(this.form));
+        body.type = body.type === "bookmark" ? 0 : 1;
         if (this.isAdd) {
-          res = await HttpUtil.put("/bookmark", null, this.form);
+          res = await HttpUtil.put("/bookmark", null, body);
           await this.$store.dispatch("treeData/addNode", { sourceNode: this.targetNode, targetNode: res });
         } else {
-          this.form.bookmarkId = this.targetNode.bookmarkId;
+          body.bookmarkId = this.targetNode.bookmarkId;
-          let newIcon = await HttpUtil.post("/bookmark/updateOne", null, this.form);
+          let newIcon = await HttpUtil.post("/bookmark/updateOne", null, body);
           await this.$store.dispatch("treeData/editNode", { node: this.targetNode, newName: this.form.name, newUrl: this.form.url, newIcon });
         }
         this.$message.success("操作成功");
-        this.$emit("close", false);
+        this.$emit("close", this.form.type);
         this.loading = false;
       });
     },
@@ -106,7 +115,7 @@ export default {
           });
         } else {
           this.$message.success("解析成功");
-          this.$emit("close", true);
+          this.$emit("close", this.form.type);
         }
       }
     },

bookmark_front/src/main.js

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

bookmark_front/src/store/modules/treeData.js

@@ -20,6 +20,10 @@ export const noLoginInit = "noLoginInit";
 export const loginInit = "loginInit";
 export const refresh = "refresh";
 export const clear = "clear";
+/**
+ * 删除书签数据
+ */
+export const deleteData = "deleteData";
 
 /**
  * 版本检查定时调度
@@ -240,7 +244,7 @@ const actions = {
 	/**
 	 * 删除节点数据
 	 */
-	async deleteData (context, { pathList, bookmarkIdList }) {
+	async [deleteData] (context, { pathList, bookmarkIdList }) {
 		//待删除的书签
 		let bookmarkIdSet = new Set();
 		bookmarkIdList.forEach(item => bookmarkIdSet.add(item));

bookmark_front/src/views/home/PinBookmarkItem.vue

@@ -2,13 +2,11 @@
   <div>
     <a href="pinObj.url" v-if="pinObj" class="pinBookmarkItem">
       <img :src="pinObj.icon.length > 0 ? pinObj.icon : '/favicon.ico'" class="icon" />
-      <span class="text">{{ pinObj.name }}</span>
+      <span class="text" :title="pinObj.name">{{ pinObj.name }}</span>
       <span class="action actionShow">...</span>
     </a>
-    <div v-else class="pinBookmarkItem" @click="add">
+    <div v-else class="pinBookmarkItem" @click="showAddBlock = !showAddBlock" title="新增书签并固定到首页">
-      <a-tooltip title="新增">
+      <a-icon style="font-size: 1.5em" type="plus" />
-        <a-icon style="font-size: 1.5em" type="plus" />
-      </a-tooltip>
     </div>
   </div>
 </template>
@@ -20,7 +18,12 @@ export default {
     pinObj: Object,
   },
   data() {
-    return {};
+    return {
+      showAddBlock: false,
+    };
+  },
+  methods: {
+    add() {},
   },
 };
 </script>

bookmark_front/src/views/manage/bookmarkTree/index.vue

@@ -99,7 +99,7 @@ import { mapState } from "vuex";
 import { downloadFile } from "@/util/FileUtil";
 import ClipboardJS from "clipboard";
 import moment from "moment";
-import { TREE_DATA, SHOW_REFRESH_TOAST, refreshHomePinList, HOME_PIN_LIST } from "@/store/modules/treeData";
+import { TREE_DATA, SHOW_REFRESH_TOAST, refreshHomePinList, deleteData, HOME_PIN_LIST } from "@/store/modules/treeData";
 import { dealList, exportFileHead } from "@/views/manage/bookmarkTree/helper";
 import { GLOBAL_CONFIG } from "@/store/modules/globalConfig";
 export default {
@@ -167,6 +167,7 @@ export default {
      * 加载数据，兼容treeNode为id
      */
     loadData(treeNode) {
+      console.log("加载数据", treeNode);
       return new Promise((resolve) => {
         const data = typeof treeNode === "number" ? this.$store.getters["treeData/getById"](treeNode) : treeNode.dataRef;
         let newPath = data.path + "." + data.bookmarkId;
@@ -193,6 +194,7 @@ export default {
      * 重置当前data中书签相关数据
      */
     resetData() {
+      console.log("重置数据");
       this.treeData = this.totalTreeData[""];
       this.expandedKeys = [];
       this.checkedKeys = [];
@@ -284,13 +286,9 @@ export default {
         this.$message.warn("请选择后再进行操作");
         return;
       }
-
       this.loading = true;
-      await HttpUtil.post("/bookmark/batchDelete", null, {
+      await HttpUtil.post("/bookmark/batchDelete", null, { pathList, bookmarkIdList });
-        pathList,
+      this.$store.dispatch(TREE_DATA + "/" + deleteData, { pathList, bookmarkIdList });
-        bookmarkIdList,
-      });
-      this.$store.dispatch("treeData/deleteData", { pathList, bookmarkIdList });
       //删除已经被删除的数据
       pathList.forEach((item) => {
         const id = parseInt(item.split(".").reverse()[0]);
@@ -337,8 +335,8 @@ export default {
      * 关闭弹窗
      * @param isUpload 说明为上传书签文件，需要刷新缓存数据
      */
-    async close(isUpload) {
+    async close(type) {
-      if (isUpload) {
+      if (type === "file") {
         this.refresh(true);
       } else {
         this.treeData.__ob__.dep.notify();