[chrome]feat：搜索功能优化

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

@@ -14,7 +14,7 @@ export default {
 
 <style>
 .app {
-  width: 500px;
+  width: 600px;
-  height: 500px;
+  height: 580px;
 }
 </style>

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

@@ -1,6 +1,10 @@
 <template>
   <div class="main">
-    <el-tree :props="props" :load="loadNode" @node-click="nodeClick" lazy> </el-tree>
+    <el-tree :props="props" :load="loadNode" accordion @node-click="nodeClick" lazy>
+      <span class="treeItem" slot-scope="{ node }">
+        <span>{{ node.label }}</span>
+      </span>
+    </el-tree>
   </div>
 </template>
 
@@ -57,7 +61,14 @@ export default {
 
 <style scoped>
 .main {
-  width: 80%;
+  width: 95%;
+  height: 500px;
+  overflow: auto;
   margin: 0 auto;
 }
+
+.treeItem {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 </style>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-popover placement="bottom-start" width="550" popper-class="popover" trigger="manual" :visible-arrow="false" v-model="isShow">
+      <div>
+        <div class="item" v-for="item in searchList" :key="item.bookmarkId">
+          <a target="_blank" :href="item.url">{{ item.name }}</a>
+        </div>
+      </div>
+      <el-input
+        ref="searchInput"
+        type="text"
+        placeholder="搜索"
+        v-model="searchContent"
+        clearable
+        :autofocus="true"
+        slot="reference"
+        @blur="clear"
+        @keyup.enter.native="searchKey"
+        @focus="focus"
+      >
+        <el-button slot="append" icon="el-icon-search" @click="searchKey"></el-button>
+      </el-input>
+    </el-popover>
+    <div class="searchResult"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+  name: 'searchBookmark',
+  data() {
+    return {
+      searchContent: '',
+      // 是否展示结果列表
+      isShow: false,
+      // 是否有焦点
+      isFocus: false,
+      searchList: [],
+      timeOut: null,
+    };
+  },
+  watch: {
+    searchContent(newVal, oldVal) {
+      if (newVal.trim().length === 0) {
+        return;
+      }
+      if (newVal.trim() !== oldVal) {
+        if (this.timeOut != null) {
+          clearTimeout(this.timeOut);
+        }
+        this.searchList = [];
+        this.timeOut = setTimeout(async () => {
+          this.searchList = await axios.get(`bookmark/searchUserBookmark?content=${newVal}`);
+          this.isShow = this.searchList.length > 0;
+          this.timeOut = null;
+        }, 200);
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs['searchInput'].focus();
+    });
+  },
+  methods: {
+    searchKey() {
+      window.open('https://www.baidu.com/s?ie=UTF-8&wd=' + window.encodeURIComponent(this.searchContent));
+    },
+    focus() {
+      this.isFocus = true;
+    },
+    clear() {
+      this.isFocus = false;
+      if (this.timeOut != null) {
+        clearTimeout(this.timeOut);
+      }
+      this.searchContent = '';
+      this.searchList = [];
+      this.isShow = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  width: 500px;
+  padding: 5px;
+  border-bottom: 1px solid black;
+}
+</style>

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

@@ -5,49 +5,26 @@
       <span>{{ personInfo.username }}</span>
     </div>
     <!-- 书签检索 -->
-    <div class="search">
+    <search />
-      <el-input placeholder="关键词检索" v-model="searchContent">
-        <el-button slot="append" icon="el-icon-search"></el-button>
-      </el-input>
-      <div class="searchResult">
-        <div class="item" v-for="item in searchList" :key="item.bookmarkId">
-          <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';
+import Search from '../components/SearchBookmark';
 export default {
   components: {
     BookmarkTree,
+    Search,
   },
   data() {
     return {
       personInfo: {},
-      searchContent: '',
-      searchList: [],
-      timeOut: null,
     };
   },
-  watch: {
+
-    searchContent(newVal, oldVal) {
-      if (newVal.trim() !== oldVal) {
-        if (this.timeOut != null) {
-          clearTimeout(this.timeOut);
-        }
-        this.searchList = [];
-        this.timeOut = setTimeout(async () => {
-          this.searchList = await axios.get(`bookmark/searchUserBookmark?content=${newVal}`);
-          this.timeOut = null;
-        }, 200);
-      }
-    },
-  },
   created() {
     window.token = localStorage.getItem('token');
     this.init();
@@ -69,10 +46,4 @@ export default {
   align-items: center;
   padding: 0 5% 0 5%;
 }
-.searchResult {
-}
-.item {
-  padding: 5px;
-  border-bottom: 1px solid black;
-}
 </style>

浏览器插件/bookmark-chrome/src/util/config.js

@@ -1,5 +1,11 @@
-// const baseUri = 'https://bm.tapme.top';
+// const baseUri = ;
-const baseUri = 'http://localhost:3000';
+var baseUri;
+
+if (process.env.NODE_ENV === 'development') {
+  baseUri = 'http://localhost:3000';
+} else {
+  baseUri = 'https://bm.tapme.top';
+}
 
 const config = {
   baseUrl: baseUri + '/bookmark/api',