Merge pull request 'feat:支持搜索引擎自定义' (#14) from dev into master

Reviewed-on: https://gitea.fleyx.com/fanxb/bookmark/pulls/14
FleyX · Aug 13, 2023 · bb7deda · bb7deda
2 parents 51eb22a + 0d00022
commit bb7deda
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,16 @@
 
 帮助文档：[点击跳转](https://blog.fleyx.com/blog/detail/20220329/)
 
+# 更新日志
+
+## 2023-08-13
+
+![pic](https://s3.fleyx.com/picbed/2023/08/Snipaste_2023-08-13_15-01-20.png)
+
+搜索引擎支持自定义[#43](https://github.com/FleyX/bookmark/issues/43)
+
+位置：右上角个人中心-管理搜索引擎
+
 # TODO
 
 - [x] 主页功能

diff --git a/bookmark_front/src/components/main/Search.vue b/bookmark_front/src/components/main/Search.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="search">
     <div :class="{ listShow: focused && list.length > 0 }" class="newSearch">
-      <input ref="searchInput" class="input" type="text" v-model="value" @keydown="keyPress" @focus="inputFocus" @blur="inputBlur" />
+      <input ref="searchInput" class="input" type="text" v-model="value" @keydown="keyPress" @focus="inputFocus"
+             @blur="inputBlur" />
       <div class="action">
         <a-dropdown :trigger="['click']">
           <a-tooltip title="点击切换网页搜索">
-            <my-icon class="icon" style="margin-right: 0.5em" :type="searchIcon" />
+            <my-icon class="icon" style="margin-right: 0.5em" :type="checkedSearchEngine.icon"
+                     @click="searchIconClick" />
           </a-tooltip>
           <a-menu slot="overlay" @click="searchEngineChange">
-            <a-menu-item key="google">谷歌</a-menu-item>
-            <a-menu-item key="bing">bing</a-menu-item>
-            <a-menu-item key="baidu">baidu</a-menu-item>
+            <a-menu-item v-for="item in searchEngineList" :key="item.id">{{ item.name }}</a-menu-item>
           </a-menu>
         </a-dropdown>
         <a-icon class="icon" type="search" @click="submit(true)" />
@@ -30,7 +30,8 @@
         </div>
         <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)" />
+            <my-icon style="color: white; font-size: 1.3em" type="icon-et-location"
+                     @mousedown="location($event, item)" />
           </a-tooltip>
           <a-tooltip title="复制链接">
             <a-icon
@@ -61,10 +62,11 @@ import { mapState } from "vuex";
 import ClipboardJS from "clipboard";
 import { GLOBAL_CONFIG, USER_INFO } from "@/store/modules/globalConfig";
 import { TREE_DATA, refreshHomePinList, HOME_PIN_BOOKMARK_ID_MAP } from "@/store/modules/treeData";
+
 export default {
   name: "Search",
   props: {
-    showLocation: Boolean, //是否显示定位等按钮
+    showLocation: Boolean //是否显示定位等按钮
   },
   data() {
     return {
@@ -74,19 +76,25 @@ export default {
       //上下选中
       selectIndex: null,
       copyBoard: null, //剪贴板对象
+      searchEngineList: [],
+      checkedSearchEngine: { icon: "icon-baidu", name: "百度", url: "https://www.baidu.com/s?ie=UTF-8&wd=%s" }
     };
   },
-  mounted() {
+  async mounted() {
     //初始化clipboard
     this.copyBoard = new ClipboardJS(".search-copy-to-board", {
-      text: function (trigger) {
+      text: function(trigger) {
         return trigger.attributes.data.nodeValue;
-      },
+      }
     });
     this.copyBoard.on("success", (e) => {
       this.$message.success("复制成功");
       e.clearSelection();
     });
+    if (this.$store.state.globalConfig.token != null) {
+      this.searchEngineList = await HttpUtil.get("/searchEngine/list");
+      this.checkedSearchEngine = this.searchEngineList.find(item => item.checked === 1);
+    }
   },
   destroyed() {
     if (this.copyBoard != null) {
@@ -95,26 +103,20 @@ export default {
   },
   computed: {
     ...mapState("treeData", ["totalTreeData", HOME_PIN_BOOKMARK_ID_MAP]),
-    ...mapState("globalConfig", ["userInfo"]),
-    searchIcon() {
-      let search = this.userInfo != null ? this.userInfo.defaultSearchEngine : "baidu";
-      return search === "baidu" ? "icon-baidu" : search === "bing" ? "icon-bing" : "icon-google";
-    },
-    searchUrl() {
-      let search = this.userInfo && this.userInfo.defaultSearchEngine ? this.userInfo.defaultSearchEngine : "baidu";
-      return search === "baidu"
-        ? "https://www.baidu.com/s?ie=UTF-8&wd="
-        : search === "bing"
-        ? "https://www.bing.com/search?q="
-        : "https://www.google.com/search?q=";
-    },
+    ...mapState("globalConfig", ["userInfo"])
   },
   watch: {
     value(newVal, oldVal) {
       this.search(newVal);
-    },
+    }
   },
   methods: {
+    searchIconClick() {
+      if (this.userInfo == null) {
+        this.searchEngineList = [];
+        this.$message.warning("未登录，请登录后操作");
+      }
+    },
     search(content) {
       console.log(content);
       let val = content.toLocaleLowerCase().trim();
@@ -135,7 +137,7 @@ export default {
       let url;
       if (forceSearch || this.selectIndex == null) {
         //说明使用网页搜索
-        url = this.searchUrl + encodeURIComponent(this.value);
+        url = this.checkedSearchEngine.url.replace("%s", encodeURIComponent(this.value));
       } else {
         //说明跳转到书签
         let bookmark = this.list[this.selectIndex];
@@ -176,15 +178,10 @@ export default {
     },
     //修改默认搜索引擎
     async searchEngineChange(item) {
-      if (this.userInfo == null) {
-        this.$message.warning("未登录，请登录后操作");
-        return;
-      }
-      if (item.key !== this.userInfo.defaultSearchEngine) {
-        await HttpUtil.post("/baseInfo/updateSearchEngine", null, { defaultSearchEngine: item.key });
-        this.userInfo.defaultSearchEngine = item.key;
-        this.$store.commit(GLOBAL_CONFIG + "/" + USER_INFO, this.userInfo);
-      }
+
+      let target = this.searchEngineList.find(one => one.id === item.key);
+      await HttpUtil.post("/searchEngine/setChecked", null, { id: item.key });
+      this.checkedSearchEngine = target;
     },
     //固定书签到首页
     async pinBookmark(event, { bookmarkId }) {
@@ -228,8 +225,8 @@ export default {
       }
       console.log("阻止成功");
       return false;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -240,10 +237,12 @@ export default {
 @listActiveBgColor: #454545;
 .search {
   position: relative;
+
   .listShow {
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
+
   .newSearch {
     display: flex;
     align-items: center;
@@ -252,6 +251,7 @@ export default {
     overflow: hidden;
     font-size: 1.2em;
     color: @textColor;
+
     .input {
       flex: 1;
       border: 0;
@@ -260,11 +260,13 @@ export default {
       padding-left: 0.19rem;
       outline: none;
     }
+
     .action {
       padding: 0.1rem;
       padding-right: 0.19rem;
       display: flex;
       align-items: center;
+
       .icon {
         color: @textColor;
         cursor: pointer;
@@ -282,6 +284,7 @@ export default {
     border-bottom-left-radius: 0.18rem;
     border-bottom-right-radius: 0.18rem;
     overflow: hidden;
+
     .listItem {
       font-size: 0.16rem;
       display: flex;
@@ -292,24 +295,29 @@ export default {
       margin: 0.05rem 0 0.05rem 0;
       padding: 0 0.19rem 0 0.19rem;
       cursor: pointer;
+
       .name {
         padding-right: 1em;
         max-width: calc(100% - 2em);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
+
       .icons {
         display: none;
         align-items: center;
       }
     }
+
     .listItem:hover {
       background-color: @listActiveBgColor;
     }
+
     .itemActive {
       background-color: @listActiveBgColor;
     }
+
     .listItem:hover .icons {
       display: flex;
     }

diff --git a/bookmark_front/src/store/index.js b/bookmark_front/src/store/index.js
@@ -8,60 +8,61 @@ import { checkJwtValid } from "@/util/UserUtil";
 Vue.use(Vuex);
 
 let store = new Vuex.Store({
-	state: {},
-	mutations: {},
-	actions: {},
-	modules: {
-		[globalConfig.GLOBAL_CONFIG]: globalConfig.store,
-		[treeData.TREE_DATA]: treeData.store
-	}
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {
+    [globalConfig.GLOBAL_CONFIG]: globalConfig.store,
+    [treeData.TREE_DATA]: treeData.store
+  }
 });
 
 let noLoginFinish = false;
 
 //执行各自的非登陆初始化
 (async () => {
-	await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.noLoginInit);
-	//无需等待执行
-	store.dispatch(treeData.TREE_DATA + "/" + treeData.noLoginInit);
-	noLoginFinish = true;
+  await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.noLoginInit);
+  //无需等待执行
+  store.dispatch(treeData.TREE_DATA + "/" + treeData.noLoginInit);
+  noLoginFinish = true;
 })();
 
 /**
  * 执行各模块的登陆后初始化
  */
-export async function loginInit () {
-	if (!noLoginFinish) {
-		await finishNoLogin();
-	}
-	console.log(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN]);
-	if (checkJwtValid(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN])) {
-		//无需等待执行完毕
-		store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.loginInit);
-		store.dispatch(treeData.TREE_DATA + "/" + treeData.loginInit);
-	}
+export async function loginInit() {
+  if (!noLoginFinish) {
+    await finishNoLogin();
+  }
+  console.log(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN]);
+  if (checkJwtValid(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN])) {
+    //无需等待执行完毕
+    store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.loginInit);
+    store.dispatch(treeData.TREE_DATA + "/" + treeData.loginInit);
+  }
+  console.log("初始化完成");
 }
 
 /**
  * 推出登陆时需要清理的
  */
-export async function logoutClear () {
-	await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.clear);
-	await store.dispatch(treeData.TREE_DATA + "/" + treeData.clear);
+export async function logoutClear() {
+  await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.clear);
+  await store.dispatch(treeData.TREE_DATA + "/" + treeData.clear);
 }
 
 /**
- * 确保未登录前要初始化的初始化完了 
+ * 确保未登录前要初始化的初始化完了
  */
-async function finishNoLogin () {
-	return new Promise((resolve) => {
-		let timer = setInterval(() => {
-			if (noLoginFinish) {
-				clearInterval(timer);
-				resolve();
-			}
-		}, 100);
-	})
+async function finishNoLogin() {
+  return new Promise((resolve) => {
+    let timer = setInterval(() => {
+      if (noLoginFinish) {
+        clearInterval(timer);
+        resolve();
+      }
+    }, 100);
+  });
 }
 
 export default store;

diff --git a/bookmark_front/src/store/modules/globalConfig.js b/bookmark_front/src/store/modules/globalConfig.js
@@ -69,6 +69,7 @@ const actions = {
     let userInfo = await HttpUtil.get("/user/currentUserInfo");
     context.commit(USER_INFO, userInfo);
     context.commit(IS_INIT, true);
+    console.log("用户完了");
   },
   async [setToken]({ commit }, token) {
     await localforage.setItem(TOKEN, token);