✨ 一个简易的搜索功能解决方案

2020-11-30 23:56:08 +08:00 · 2020-11-30 23:56:08 +08:00 · 93c7567676
commit 93c7567676
parent 0e5ca8cfcd
8 changed files with 265 additions and 210 deletions
--- a/components/layouts/mobile/header.vue
+++ b/components/layouts/mobile/header.vue
@ -6,19 +6,18 @@
          <img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
        </a>
      </el-col>
-      <el-col :xs="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
-        <!--<el-col :xs="24" :sm="16" :xl="12">-->
-        <el-col :xs="0" :sm="0" :xl="0">
-          <el-autocomplete
-            v-model="state"
-            size="small"
-            :fetch-suggestions="querySearchAsync"
-            placeholder="搜索帖子、标签和用户"
-            :trigger-on-focus="false"
-            @select="handleSelect"
-          />
+      <el-col :xs="0" :sm="12" :md="8" :xl="8" style="text-align: center;">
+        <el-row type="flex" justify="center">
+          <el-col>
+            <el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
+                     @select="handleSelectMenu">
+              <el-menu-item index="index">首页</el-menu-item>
+              <el-menu-item index="topic">专题</el-menu-item>
+            </el-menu>
          </el-col>
-        <!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
+        </el-row>
+      </el-col>
+      <el-col :xs="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
        <client-only>
          <el-col v-if="user" style="text-align: right;">
            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
@ -127,27 +126,6 @@
      }
    },
    methods: {
-      loadAll() {
-        return [
-          {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
-          {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
-          {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"}
-        ]
-      },
-      querySearchAsync(queryString, cb) {
-        let restaurants = this.restaurants;
-        let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
-
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-          cb(results);
-        }, 3000 * Math.random());
-      },
-      createStateFilter(queryString) {
-        return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
      handleSelectMenu(item) {
        let _ts = this;
        let activeMenu = _ts.$store.state.activeMenu;
@ -171,9 +149,6 @@
          }
        }
      },
-      handleSelect(item) {
-        console.log(item)
-      },
      handleCommand(item) {
        let _ts = this;
        switch (item) {
@ -211,7 +186,6 @@
      }
    },
    mounted() {
-      // this.restaurants = this.loadAll();
      let user = this.user;
      if (user) {
        this.getUnreadNotifications();
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@ -6,37 +6,50 @@
          <img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
        </a>
      </el-col>
-      <el-col :xs="0" :sm="12" :md="14" :xl="18" style="text-align: center;">
+      <el-col :xs="0" :sm="8" :md="8" :xl="12" style="text-align: center;">
        <el-row type="flex" justify="center">
          <el-col>
-            <el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
+            <el-menu :default-active="activeMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
                     @select="handleSelectMenu">
              <el-menu-item index="index">首页</el-menu-item>
              <el-menu-item index="topic">专题</el-menu-item>
-<!--              <el-menu-item index="github">开源代码</el-menu-item>-->
-<!--              <el-menu-item index="open-source">资料下载</el-menu-item>-->
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
-      <el-col :xs="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
-        <!--<el-col :xs="24" :sm="16" :xl="12">-->
-        <el-col :xs="0" :sm="0" :xl="0">
+      <el-col :xs="10" :sm="6" :md="6" :xl="6" style="padding-top: 1rem;text-align: right;">
        <el-autocomplete
-            v-model="state"
+          v-model="queryString"
          size="small"
+          value-key="label"
          :fetch-suggestions="querySearchAsync"
-            placeholder="搜索帖子、标签和用户"
+          placeholder="搜索帖子、作品集和用户"
          :trigger-on-focus="false"
          @select="handleSelect"
-          />
+          style="width: 80%;"
+          popper-class="search-result-box"
+        >
+          <template slot-scope="{ item }">
+            <el-col>
+              <span class="search-result-type">
+                <small class="text-muted" v-html="getSearchResultType(item.type)"></small>
+              </span>
+              <span>{{ item.label }}</span>
            </el-col>
-        <!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
+          </template>
+<!--          <template slot="append">-->
+<!--            <el-button size="small" icon="el-icon-search" @click="search"></el-button>-->
+<!--          </template>-->
+        </el-autocomplete>
+      </el-col>
+      <el-col :xs="6" :sm="6" :md="6" :xl="3" style="padding-top: 1rem;">
        <client-only>
          <el-col v-if="user" style="text-align: right;">
-            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/portfolio/post">创建作品集
+            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
+                     href="/portfolio/post">创建作品集
            </el-link>
-            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
+            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
+                     href="/article/post">发帖
            </el-link>
            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;">
              <el-dropdown trigger="click" @command="handleCommand">
@ -61,7 +74,9 @@
                               :src="avatarURL"></el-avatar>
                    <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
                               src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                    <el-link rel="nofollow" :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
+                    <el-link rel="nofollow" :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">
+                      {{ nickname }}
+                    </el-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
@ -88,18 +103,18 @@
 </template>

 <script>
-  import { isBrowser } from '~/environment'
+import {mapState} from 'vuex';
+import {isBrowser} from '~/environment';

 const Cookie = process.client ? require('js-cookie') : undefined
 export default {
  name: "PcHeader",
  computed: {
-      getActiveMenu() {
-        return this.$store.state.activeMenu;
-      },
-      user() {
-        return this.$store.state.oauth;
-      },
+    ...mapState({
+      activeMenu: state => state.activeMenu,
+      user: state => state.oauth,
+      initialSearchData: state => state.search.list
+    }),
    avatarURL() {
      let _ts = this;
      if (isBrowser) {
@ -130,8 +145,7 @@
  },
  data() {
    return {
-        restaurants: [],
-        state: '',
+      queryString: '',
      timeout: null,
      show: false,
      notifications: [],
@ -144,16 +158,9 @@
    }
  },
  methods: {
-      loadAll() {
-        return [
-          {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
-          {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
-          {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"}
-        ]
-      },
    querySearchAsync(queryString, cb) {
-        let restaurants = this.restaurants;
-        let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      let initialSearchData = this.initialSearchData;
+      let results = queryString ? initialSearchData.filter(this.createStateFilter(queryString)) : initialSearchData;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
@ -162,7 +169,9 @@
    },
    createStateFilter(queryString) {
      return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        if (state && state.label) {
+          return (state.label.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
+        }
      };
    },
    handleSelectMenu(item) {
@ -189,7 +198,13 @@
      }
    },
    handleSelect(item) {
-        console.log(item)
+      console.log(item);
+      let _ts = this;
+      if (item) {
+        _ts.$router.push({
+          path: `/${item.type}/${item.value}`
+        })
+      }
    },
    handleCommand(item) {
      let _ts = this;
@ -225,10 +240,26 @@
          }
        })
      }
+    },
+    search() {
+      console.log(this.queryString)
+    },
+    getSearchResultType(type) {
+      switch (type) {
+        case 'article':
+          type = '文章';
+          break;
+        case 'portfolio':
+          type = '作品集';
+          break;
+        case 'user':
+          type = '用户';
+          break;
+      }
+      return type;
    }
  },
  mounted() {
-      // this.restaurants = this.loadAll();
    let user = this.user;
    if (user) {
      this.getUnreadNotifications();
@ -256,4 +287,12 @@
  vertical-align: top;
  width: auto;
 }
+
+.search-result-box {
+  min-width: 20vw !important;
+}
+
+.search-result-type {
+  padding-right: 5px;
+}
 </style>
--- a/pages/portfolio/_portfolio_id.vue
+++ b/pages/portfolio/_portfolio_id.vue
@ -136,6 +136,9 @@
      currentChangeArticle(page) {
        this.$store.dispatch('portfolio/fetchArticleList', {page: page, portfolio_id: this.routePortfolioId})
      }
+    },
+    mounted() {
+      this.$store.commit('setActiveMenu', 'portfolioDetail');
    }
  }
 </script>
--- a/plugins/element-ui.js
+++ b/plugins/element-ui.js
@ -1,5 +1,5 @@
 import Vue from 'vue'
 import Element from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/zh-CN'
+import language from 'element-ui/lib/locale/lang/zh-CN'

-Vue.use(Element, { locale })
+Vue.use(Element, { language })
--- a/store/global.js
+++ b/store/global.js
@ -4,7 +4,7 @@ export const state = () => ({
  // ua
  userAgent: '',
  // 默认语言
-  language: '',
+  language: 'zh-CN',
 })


--- a/store/index.js
+++ b/store/index.js
@ -1,6 +1,6 @@
 import { isServer } from '~/environment'

-const cookieparser = process.server ? require('cookieparser') : undefined
+const cookieParser = isServer ? require('cookieparser') : undefined

 export const state = () => {
  return {
@ -52,7 +52,7 @@ export const actions = {
          android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1, //android终端或uc浏览器
          iPhone: userAgent.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
          iPad: userAgent.indexOf('iPad') > -1, //是否iPad
-          webApp: userAgent.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
+          webApp: userAgent.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
        };
      } ()
    }
@ -62,7 +62,7 @@ export const actions = {
    }
    let auth = null
    if (req.headers.cookie) {
-      const parsed = cookieparser.parse(req.headers.cookie)
+      const parsed = cookieParser.parse(req.headers.cookie)
      try {
        auth = JSON.parse(parsed.auth)
      } catch (err) {
@ -75,7 +75,8 @@ export const actions = {
    const initFetchAppData = [
      // 内容数据
      store.dispatch('topic/fetchNavList'),
-      store.dispatch('article/fetchList')
+      store.dispatch('article/fetchList'),
+      store.dispatch('search/fetchList'),
    ]

    return Promise.all(initFetchAppData)
--- a/store/search.js
+++ b/store/search.js
@ -0,0 +1,38 @@
+export const BASE_API_PATH = '/api/console';
+
+export const state = () => {
+  return {
+    fetching: false,
+    list: []
+  }
+}
+
+export const mutations = {
+  // 数据列表
+  updateListFetching(state, action) {
+    state.fetching = action
+  },
+  updateListData(state, action) {
+    state.list = action
+  }
+}
+
+export const actions = {
+  // 获取文章列表
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', []);
+    commit('updateListFetching', true);
+
+    return this.$axios
+      .$get(`${BASE_API_PATH}/initial-search`)
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  }
+}