From 6077822e7b663ad0d0060e7547f42a226c7ffe41 Mon Sep 17 00:00:00 2001
From: luckyasme <807254037@qq.com>
Date: Tue, 11 Mar 2025 20:22:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=90=9C=E7=B4=A2=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=85=B3=E9=94=AE=E8=AF=8D=E5=80=99=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/src/@types/type-search.ts    |   1 +
 docs/.vitepress/src/components/DocSearch.vue | 109 ++++++++++++++++---
 docs/.vitepress/src/layouts/LayoutDoc.vue    |  16 +--
 3 files changed, 96 insertions(+), 30 deletions(-)

diff --git a/docs/.vitepress/src/@types/type-search.ts b/docs/.vitepress/src/@types/type-search.ts
index 0d7f315..443a703 100644
--- a/docs/.vitepress/src/@types/type-search.ts
+++ b/docs/.vitepress/src/@types/type-search.ts
@@ -3,6 +3,7 @@ import type { DocMenuNodeT } from '@/utils/tree';
 export interface SearchRecommendT {
   key: string;
   count: number;
+  keyHtml: string;
 }
 
 // 文档搜索参数
diff --git a/docs/.vitepress/src/components/DocSearch.vue b/docs/.vitepress/src/components/DocSearch.vue
index c54a05a..58944c6 100644
--- a/docs/.vitepress/src/components/DocSearch.vue
+++ b/docs/.vitepress/src/components/DocSearch.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { OInput, OIcon } from '@opensig/opendesign';
+import { OInput, OIcon, ODropdown, ODropdownItem, OScroller } from '@opensig/opendesign';
 
 import IconSearch from '~icons/app/icon-search.svg';
 
 import { useSearchingStore } from '@/stores/common';
 import { useScreen } from '@/composables/useScreen';
 
+import type { SearchRecommendT } from '@/@types/type-search';
+import { getSearchRecommend } from '@/api/api-search';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+
 const emit = defineEmits(['switchVisible']);
 
 const { size } = useScreen();
@@ -19,6 +23,7 @@ const searchValue = ref('');
 
 // -------------------- 回车搜索文档 --------------------
 const enterSearchDoc = () => {
+  showSearchWord.value = false;
   if (lastSearchValue.value !== searchValue.value) {
     searchStore.setIsSearching(true);
     searchStore.setKeyword(searchValue.value);
@@ -34,26 +39,92 @@ const enterSearchDoc = () => {
 const clearSearchDoc = () => {
   lastSearchValue.value = '';
   searchStore.setIsSearching(false);
+  showSearchWord.value = false;
+  recommendData.value = [];
+};
+
+// ----------------- 联想搜索 -------------------------
+const recommendData = ref<SearchRecommendT[]>([]);
+const showSearchWord = ref(false);
+
+const queryGetSearchRecommend = useDebounceFn((val: string) => {
+  getSearchRecommend({
+    query: val,
+  }).then((res) => {
+    res.obj.word.forEach((e: SearchRecommendT) => {
+      e.keyHtml = e.key.replace(val, `<span class="found">${val}</span>`);
+    });
+
+    recommendData.value = res.obj.word;
+    showSearchWord.value = recommendData.value.length > 0;
+  });
+}, 300);
+
+const onInputValueInput = () => {
+  if (searchValue.value) {
+    queryGetSearchRecommend(searchValue.value);
+  } else {
+    recommendData.value = [];
+    showSearchWord.value = false;
+  }
+};
+
+const onClickWordItem = (item: SearchRecommendT) => {
+  searchValue.value = item.key;
+  enterSearchDoc();
 };
+
+const inputRef = ref();
+const scrollerRef = ref();
+onClickOutside(
+  inputRef,
+  () => {
+    recommendData.value = [];
+    showSearchWord.value = false;
+  },
+  {
+    ignore: [scrollerRef],
+  }
+);
 </script>
 
 <template>
   <div class="doc-search">
-    <OInput
-      :style="{ width: '100%' }"
-      v-model="searchValue"
-      size="large"
-      placeholder="在本文档内搜索"
-      @keyup.enter="enterSearchDoc"
-      @clear="clearSearchDoc"
-      clearable
-    >
-      <template #prefix>
-        <OIcon :style="{ fontSize: '24px' }">
-          <IconSearch />
-        </OIcon>
+    <ODropdown :visible="showSearchWord" trigger="none" optionPosition="bl">
+      <OInput
+        ref="inputRef"
+        :style="{ width: '100%' }"
+        v-model="searchValue"
+        size="large"
+        placeholder="在本文档内搜索"
+        @keyup.enter="enterSearchDoc"
+        @clear="clearSearchDoc"
+        clearable
+        @input="onInputValueInput"
+      >
+        <template #prefix>
+          <OIcon :style="{ fontSize: '24px' }">
+            <IconSearch />
+          </OIcon>
+        </template>
+      </OInput>
+
+      <template #dropdown>
+        <OScroller ref="scrollerRef" class="search-scroller" show-type="hover" size="small" disabled-x>
+          <ODropdownItem
+            v-for="item in recommendData"
+            v-dompurify-html="item.keyHtml"
+            :key="item.key"
+            :style="{
+              '--dropdown-item-color-hover': 'var(--o-color-info2)',
+              '--dropdown-item-padding': '8px 12px',
+              '--dropdown-item-justify': 'start',
+            }"
+            @click="onClickWordItem(item)"
+          />
+        </OScroller>
       </template>
-    </OInput>
+    </ODropdown>
   </div>
 </template>
 
@@ -127,4 +198,12 @@ const clearSearchDoc = () => {
     --result-image-height: 70px;
   }
 }
+
+.search-scroller {
+  max-height: 304px;
+
+  :deep(.found) {
+    color: var(--o-color-primary1);
+  }
+}
 </style>
diff --git a/docs/.vitepress/src/layouts/LayoutDoc.vue b/docs/.vitepress/src/layouts/LayoutDoc.vue
index 8a7cf0f..3f7a0f4 100644
--- a/docs/.vitepress/src/layouts/LayoutDoc.vue
+++ b/docs/.vitepress/src/layouts/LayoutDoc.vue
@@ -2,21 +2,7 @@
 import { onMounted, onUnmounted, ref, computed, onUpdated } from 'vue';
 import { storeToRefs } from 'pinia';
 import { Content, useRouter, useRoute } from 'vitepress';
-import {
-  OIcon,
-  ODropdown,
-  ODropdownItem,
-  OPopup,
-  ODialog,
-  ORadioGroup,
-  ORadio,
-  OToggle,
-  OButton,
-  ODivider,
-  OScroller,
-  isClient,
-  useMessage,
-} from '@opensig/opendesign';
+import { OIcon, ODropdown, ODropdownItem, OPopup, ODialog, ORadioGroup, ORadio, OToggle, OButton, ODivider, OScroller, useMessage } from '@opensig/opendesign';
 
 import AppFooter2 from '@/components/AppFooter2.vue';
 import DocSearch from '@/components/DocSearch.vue';
-- 
Gitee