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

Reviewed-on: #14
2023-08-13 15:19:18 +08:00 · 2023-08-13 15:19:18 +08:00 · bb7deda121
commit bb7deda121
parent 51eb22adaa 0d000223a2
4 changed files with 90 additions and 70 deletions
--- 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] 主页功能
--- 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,6 +295,7 @@ 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);
@ -299,17 +303,21 @@ export default {
        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;
    }
--- a/bookmark_front/src/store/index.js
+++ b/bookmark_front/src/store/index.js
@ -30,7 +30,7 @@ let noLoginFinish = false;
 /**
 * 执行各模块的登陆后初始化
 */
-export async function loginInit () {
+export async function loginInit() {
  if (!noLoginFinish) {
    await finishNoLogin();
  }
@ -40,12 +40,13 @@ export async function loginInit () {
    store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.loginInit);
    store.dispatch(treeData.TREE_DATA + "/" + treeData.loginInit);
  }
+  console.log("初始化完成");
 }

 /**
 * 推出登陆时需要清理的
 */
-export async function logoutClear () {
+export async function logoutClear() {
  await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.clear);
  await store.dispatch(treeData.TREE_DATA + "/" + treeData.clear);
 }
@ -53,7 +54,7 @@ export async function logoutClear () {
 /**
 * 确保未登录前要初始化的初始化完了
 */
-async function finishNoLogin () {
+async function finishNoLogin() {
  return new Promise((resolve) => {
    let timer = setInterval(() => {
      if (noLoginFinish) {
@ -61,7 +62,7 @@ async function finishNoLogin () {
        resolve();
      }
    }, 100);
-	})
+  });
 }

 export default store;
--- 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);