feat:搜索完成

bookmark_front/src/components/main/Search.vue

@@ -11,11 +11,13 @@
       allowClear
       @blur.prevent="inputBlur"
       @focus="inputFocus"
+      @keydown="keyPress"
     />
     <div v-if="focused" class="searchContent">
       <a-empty v-if="list.length == 0" />
       <div
         class="listItem"
+        :class="{ itemActive: index == hoverIndex || index == selectIndex }"
         v-for="(item, index) in list"
         :key="item.bookmarkId"
         @mouseenter="mouseEnterOut(index, 'enter')"
@@ -23,7 +25,13 @@
         @mouseup="onMouse"
         @click="itemClick(item)"
       >
-        <a style="min-width: 4em" :href="item.url" target="_blank">
+        <a
+          class="listItemUrl"
+          style="padding-right: 1em; max-width: calc(100% - 2em)"
+          :id="'bookmark:' + item.bookmarkId"
+          :href="item.url"
+          target="_blank"
+        >
           {{ item.name }}
         </a>
         <a-tooltip v-if="showActions && hoverIndex === index" title="定位到书签树中">
@@ -31,6 +39,7 @@
         </a-tooltip>
       </div>
     </div>
+    <a ref="targetA" style="left: 1000000px" target="_blank" />
   </div>
 </template>
 
@@ -50,7 +59,10 @@ export default {
       list: [],
       //计时器结束列表的显示
       timer: null,
+      //鼠标悬浮选中
       hoverIndex: null,
+      //上下选中
+      selectIndex: null,
     };
   },
   computed: {
@@ -102,6 +114,26 @@ export default {
     location(item) {
       this.$emit("location", item);
     },
+    //上下事件
+    keyPress(e) {
+      switch (e.key) {
+        case "ArrowUp":
+          this.selectIndex = this.selectIndex == null ? this.list.length - 1 : this.selectIndex == 0 ? null : this.selectIndex - 1;
+          break;
+        case "ArrowDown":
+          this.selectIndex = this.selectIndex == null ? 0 : this.selectIndex == this.list.length - 1 ? null : this.selectIndex + 1;
+          break;
+        case "Enter":
+          if (this.selectIndex == null) {
+            this.targetUrl = "https://www.baidu.com/s?ie=UTF-8&wd=" + encodeURIComponent(this.value);
+          } else {
+            this.targetUrl = this.list[this.selectIndex].url;
+          }
+          let a = this.$refs["targetA"];
+          a.href = this.targetUrl;
+          a.click();
+      }
+    },
     dealSearch(content) {
       let res = [];
       let arrs = Object.values(this.totalTreeData);
@@ -137,7 +169,16 @@ export default {
       font-size: 0.16rem;
       display: flex;
       height: 0.3rem;
+      line-height: 0.3rem;
       align-items: center;
+      .listItemUrl {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    .itemActive {
+      background-color: #f8f8f8;
     }
   }
 }

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

@@ -69,9 +69,9 @@ export default {
   created() {
     console.log(this.isAdd, this.targetNode);
     if (!this.isAdd) {
-      this.form.type = this.targetNode.type;
+      this.form.type = this.targetNode.type.toString();
       this.form.name = this.targetNode.name;
-      this.form.url = this.form.type === "bookmark" ? this.targetNode.url : "";
+      this.form.url = this.form.type === "0" ? this.targetNode.url : "";
     }
     this.token = window.token;
     this.form.path = this.targetNode == null ? "" : this.targetNode.path + (this.isAdd ? "." + this.targetNode.bookmarkId : "");

bookmark_front/src/global.less

@@ -20,3 +20,15 @@
  * content配置
  */
 @contentbgcolor: rgb(255, 255, 255); //公共背景色
+
+.treeNodeItem {
+  span {
+    span {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

bookmark_front/src/store/modules/treeData.js

@@ -77,7 +77,12 @@ const actions = {
     if (!treeData[""]) {
       treeData[""] = [];
     }
-    treeData[""].forEach(item => (item.isLeaf = item.type === 0));
+    Object.values(treeData).forEach(item =>
+      item.forEach(item1 => {
+        item1.isLeaf = item.type === 0;
+        item1.class = "treeNodeItem";
+      })
+    );
     context.commit(TOTAL_TREE_DATA, treeData);
     await localforage.setItem(TOTAL_TREE_DATA, treeData);
     let userInfo = await httpUtil.get("/user/currentUserInfo");
@@ -94,7 +99,6 @@ const actions = {
     await localforage.removeItem(VERSION);
   },
   async moveNode(context, info) {
-    debugger;
     let data = context.state[TOTAL_TREE_DATA];
     const target = info.node.dataRef;
     const current = info.dragNode.dataRef;

bookmark_front/src/views/main/pages/things/BookmarkManage.vue

@@ -56,6 +56,7 @@
       checkStrictly
       :draggable="!isPhone"
       @drop="onDrop"
+      @rightClick="rightClick"
     />
     <!-- 新增、修改 -->
     <a-modal v-model="addModal.show" :title="addModal.isAdd ? '新增' : '编辑'" :footer="null">
@@ -151,6 +152,13 @@ export default {
         this.expandedKeys.pop();
       }
     },
+    rightClick({ node }) {
+      if (this.currentSelect === node.dataRef) {
+        this.currentSelect = null;
+      } else {
+        this.currentSelect = node.dataRef;
+      }
+    },
     check(key, { checked, node }) {
       let item = node.dataRef;
       if (checked) {