update: optimized the display of search results

easemob · Sep 19, 2024 · b844578 · b844578
1 parent 5a0f734
commit b844578
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -71,7 +71,17 @@ export default defineUserConfig({
           'hierarchy.lvl6:20',
           'content:50'
         ],
-        hitsPerPage: 50
+        hitsPerPage: 50,
+        facetFilters: [
+          [
+            'type:lvl0',
+            'type:lvl1',
+            'type:lvl2',
+            'type:lvl3',
+            'type:lvl4',
+            'type:lvl5'
+          ]
+        ]
       },
       maxResultsPerGroup: 30,
       // transformItems: (items) => {

diff --git a/docs/.vuepress/layouts/InstanceSearchLayout.vue b/docs/.vuepress/layouts/InstanceSearchLayout.vue
@@ -21,6 +21,7 @@
         <div class="searchLeft">
           <h3 class="searchCategory">文档分类</h3>
           <ais-refinement-list attribute="category" />
+          <ais-refinement-list v-show="false" attribute="type" />
         </div>
         <div class="searchRight">
           <ais-search-box />
@@ -31,14 +32,6 @@
 
           <ais-hits>
             <template v-slot:item="{ item }">
-              <!-- <ais-hierarchical-menu
-              :attributes="[
-                'hierarchy.lvl0',
-                'hierarchy.lvl1',
-                'hierarchy.lvl2',
-                'hierarchy.lvl3'
-              ]"
-            /> -->
               <p>
                 <a :href="item.url" target="_blank">
                   <ais-highlight attribute="hierarchy.lvl0" :hit="item" />
@@ -48,10 +41,18 @@
                   <ais-highlight attribute="hierarchy.lvl2" :hit="item" />
                   <span v-if="item.hierarchy.lvl3"> > </span>
                   <ais-highlight attribute="hierarchy.lvl3" :hit="item" />
+                  <span v-if="item.hierarchy.lvl4"> > </span>
+                  <ais-highlight attribute="hierarchy.lvl4" :hit="item" />
+                  <span v-if="item.hierarchy.lvl5"> > </span>
+                  <ais-highlight attribute="hierarchy.lvl5" :hit="item" />
                 </a>
               </p>
-              <div>
-                <ais-snippet attribute="content" :hit="item" />
+              <div class="content-snippet">
+                <ais-snippet
+                  style="font-size: 14px"
+                  attribute="content"
+                  :hit="item"
+                />
               </div>
             </template>
           </ais-hits>
@@ -64,7 +65,8 @@
 
 <script>
 import Navbar from '../components/Navbar.vue'
-import { liteClient } from 'algoliasearch/lite'
+import { liteClient as algoliasearch } from 'algoliasearch/lite'
+
 import { useRoute } from 'vue-router'
 
 export default {
@@ -74,13 +76,16 @@ export default {
   },
   data() {
     return {
-      searchClient: liteClient(
+      searchClient: algoliasearch(
         '5K8UTB3JVE',
         'df9e938d06f6531ce8dd8de71f907f0d'
       ),
       initialUiState: {
         ['im-beta-easemob']: {
-          query: useRoute().query.query || ''
+          query: useRoute().query.query || '',
+          refinementList: {
+            type: ['content']
+          }
         }
       },
       snippet: [
@@ -136,9 +141,23 @@ body {
   width: calc(100% - 1rem) !important;
 }
 
+.ais-HierarchicalMenu-count,
+.ais-Menu-count,
+.ais-RefinementList-count,
+.ais-ToggleRefinement-count {
+  margin-left: 0.3em;
+}
+
 .ais-InstantSearch {
   /* display: grid;
   grid-template-columns: 1fr 4fr;
   grid-gap: 1em; */
 }
+.content-snippet {
+  color: #888;
+}
+
+.content-snippet .ais-Snippet-highlighted {
+  font-size: 14px;
+}
 </style>
diff --git a/patches/@vuepress+plugin-docsearch+2.0.0-beta.61.patch b/patches/@vuepress+plugin-docsearch+2.0.0-beta.61.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@vuepress/plugin-docsearch/lib/client/components/Docsearch.js b/node_modules/@vuepress/plugin-docsearch/lib/client/components/Docsearch.js
-index ecd2b21..75b7b9c 100644
+index ecd2b21..003e0bd 100644
 --- a/node_modules/@vuepress/plugin-docsearch/lib/client/components/Docsearch.js
 +++ b/node_modules/@vuepress/plugin-docsearch/lib/client/components/Docsearch.js
 @@ -46,6 +46,26 @@ export const Docsearch = defineComponent({
@@ -21,7 +21,7 @@ index ecd2b21..75b7b9c 100644
 +                            console.log(event, state);
 +                        },
 +                        // Raw text rendered in the HTML element
-+                        children: `查看总计${state.context.nbHits}条搜索结果`,
++                        children: `查看更多搜索结果`,
 +                        },
 +                        __v: null,
 +                    };