From a627a4b0ecc92f18ae3ff48b5e0a7a97dd1e939c Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Mon, 11 Nov 2024 17:53:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/header/search/SearchHistory.tsx    |  9 ++++-----
 src/layout/header/search/SearchSuggestion.tsx | 13 +++++++++++--
 src/layout/header/search/useSearchStore.ts    |  7 +++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/layout/header/search/SearchHistory.tsx b/src/layout/header/search/SearchHistory.tsx
index 01239dc..e589a70 100644
--- a/src/layout/header/search/SearchHistory.tsx
+++ b/src/layout/header/search/SearchHistory.tsx
@@ -1,11 +1,10 @@
 import { defineComponent } from 'vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
-import { MdHistory, MdRemove } from 'oh-vue-icons/icons'
+import { MdHistory, MdRemove, RiCloseCircleLine } from 'oh-vue-icons/icons'
 import useSearchConfigStore from './useSearchConfigStore'
 import jump from '@/utils/jump'
 import useSettingsStore from '@/settings/useSettingsStore'
-addIcons(MdHistory)
-addIcons(MdRemove)
+addIcons(MdHistory, RiCloseCircleLine)
 export default defineComponent(() => {
   const searchConfig = useSearchConfigStore()
   const settings = useSettingsStore()
@@ -15,7 +14,7 @@ export default defineComponent(() => {
         {searchConfig.history.map((item, idx) => (
           <div
             key={idx}
-            class="flex justify-between items-center text-black/80 cursor-pointer hover:bg-white/40 py-1 px-2 rounded transition-all"
+            class="flex justify-between hover:pl-[20px] duration-300 items-center text-black/80 cursor-pointer hover:bg-white/40 py-1 px-2 rounded transition-all"
             onMousedown={() => {
               jump(searchConfig.current.url + item)
             }}
@@ -34,7 +33,7 @@ export default defineComponent(() => {
                 searchConfig.removeHistory(idx)
               }}
             >
-              <OhVueIcon name="md-remove" />
+              <OhVueIcon name={RiCloseCircleLine.name} />
             </div>
           </div>
         ))}
diff --git a/src/layout/header/search/SearchSuggestion.tsx b/src/layout/header/search/SearchSuggestion.tsx
index a924f3c..4691c42 100644
--- a/src/layout/header/search/SearchSuggestion.tsx
+++ b/src/layout/header/search/SearchSuggestion.tsx
@@ -23,7 +23,7 @@ export const Item = defineComponent({
     return () => (
       <div
         class={
-          'flex justify-between items-center text-black/80 cursor-pointer  py-1 px-2 rounded transition-all ' +
+          'flex justify-between hover:pl-[20px] duration-300 mt-1 items-center text-black/80 cursor-pointer  py-1 px-2 rounded transition-all ' +
           (props.current === props.num ? 'bg-white/40' : 'hover:bg-white/40')
         }
         onClick={() => {
@@ -46,7 +46,7 @@ export default defineComponent(() => {
   const searchConfig = useSearchConfigStore()
 
   return () => (
-    <div class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg bg-white/60 backdrop-blur shadow-lg p-4">
+    <div class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg bg-[#fffc] backdrop-blur-[10px] shadow-lg p-4">
       <Item
         prefix={aIUrl}
         path={search.searchStr}
@@ -63,6 +63,15 @@ export default defineComponent(() => {
         current={search.current}
         num={1}
       />
+      {
+        search.addList.map((el, idx) => (
+          <div class={"flex justify-start  mt-1 gap-x-2 cursor-pointer items-center w-full bg-white  py-[5px] px-2 rounded-lg transition-all"} key={idx}>
+            <img src={el.icon} alt='icon' class={"w-[20px] h-[20px] "}></img>
+            <span class={"whitespace-nowrap text-[12px] text-[#333] w-0 flex-1 overflow-hidden text-ellipsis"}>{el.name}</span>
+            <button class={"flex items-center justify-center bg-[#337aff] w-[72px] h-[26px] text-white rounded text-[14px]"}>立即打开</button>
+          </div>
+        ))
+      }
       {search.sugList.map((el, idx) => (
         <Item
           key={idx}
diff --git a/src/layout/header/search/useSearchStore.ts b/src/layout/header/search/useSearchStore.ts
index c6def70..34c0f39 100644
--- a/src/layout/header/search/useSearchStore.ts
+++ b/src/layout/header/search/useSearchStore.ts
@@ -55,8 +55,10 @@ export default defineStore('search', () => {
   )
   const debouncedHandler = debounce((newValue) => {
     console.log('数值改变并已防抖处理:', newValue)
-    request<SearchAdType[]>("GET", `/api/app/searchBars`).then((res) => {
+    request<SearchAdType[]>("GET", `/api/app/searchBars?keyword=${newValue || 'undefine'}`).then((res) => {
       addList.value = res
+      console.log(addList.value);
+
     })
   }, 500) // 
   watch(searchStr, (newValue) => {
@@ -111,6 +113,7 @@ export default defineStore('search', () => {
     focus,
     showSearchConfig,
     current,
-    sugList
+    sugList, addList
+
   }
 })