From aa679e48a9a950f04770eb0c2823e718cc9c19de Mon Sep 17 00:00:00 2001
From: fanxb <fanxb.tl@gmail.com>
Date: Thu, 2 Jan 2020 23:44:14 +0800
Subject: [PATCH] =?UTF-8?q?[chrome]feat=EF=BC=9A=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 浏览器插件/bookmark-chrome/src/popup/App.vue  |  4 +-
 .../src/popup/router/components/BookmarkTree.vue | 15 ++-
 .../src/popup/router/components/SearchBookmark.vue | 92 +++++++++++++++++++
 .../src/popup/router/pages/Index.vue          | 39 +-------
 浏览器插件/bookmark-chrome/src/util/config.js | 10 +-
 5 files changed, 120 insertions(+), 40 deletions(-)
 create mode 100644 浏览器插件/bookmark-chrome/src/popup/router/components/SearchBookmark.vue

diff --git a/浏览器插件/bookmark-chrome/src/popup/App.vue b/浏览器插件/bookmark-chrome/src/popup/App.vue
index 3a42280..29ab101 100644
--- a/浏览器插件/bookmark-chrome/src/popup/App.vue
+++ b/浏览器插件/bookmark-chrome/src/popup/App.vue
@@ -14,7 +14,7 @@ export default {
 
 <style>
 .app {
-  width: 500px;
-  height: 500px;
+  width: 600px;
+  height: 580px;
 }
 </style>
diff --git a/浏览器插件/bookmark-chrome/src/popup/router/components/BookmarkTree.vue b/浏览器插件/bookmark-chrome/src/popup/router/components/BookmarkTree.vue
index 17b7ef9..76b293b 100644
--- a/浏览器插件/bookmark-chrome/src/popup/router/components/BookmarkTree.vue
+++ b/浏览器插件/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>
diff --git a/浏览器插件/bookmark-chrome/src/popup/router/components/SearchBookmark.vue b/浏览器插件/bookmark-chrome/src/popup/router/components/SearchBookmark.vue
new file mode 100644
index 0000000..c495636
--- /dev/null
+++ b/浏览器插件/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>
diff --git a/浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue b/浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue
index da74689..1380d36 100644
--- a/浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue
+++ b/浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue
@@ -5,49 +5,26 @@
       <span>{{ personInfo.username }}</span>
     </div>
     <!-- 书签检索 -->
-    <div class="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>
+    <search />
+    <bookmark-tree />
   </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>
diff --git a/浏览器插件/bookmark-chrome/src/util/config.js b/浏览器插件/bookmark-chrome/src/util/config.js
index ce9a820..7add2c5 100644
--- a/浏览器插件/bookmark-chrome/src/util/config.js
+++ b/浏览器插件/bookmark-chrome/src/util/config.js
@@ -1,5 +1,11 @@
-// const baseUri = 'https://bm.tapme.top';
-const baseUri = 'http://localhost:3000';
+// const baseUri = ;
+var baseUri;
+
+if (process.env.NODE_ENV === 'development') {
+  baseUri = 'http://localhost:3000';
+} else {
+  baseUri = 'https://bm.tapme.top';
+}
 
 const config = {
   baseUrl: baseUri + '/bookmark/api',