优化搜索栏样式

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(MdHistory, RiCloseCircleLine)
-addIcons(MdRemove)
 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>
         ))}

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}

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
+
   }
 })