refactor: new ui for search

package.json

@@ -72,6 +72,7 @@
     "md5": "^2.3.0",
     "music-metadata": "^7.5.2",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "react-is": "^16.13.1",
     "typescript": "^5.2.2",
     "uuid": "^8.3.2",

src/api/search.ts

@@ -46,3 +46,20 @@ export const searchSuggest = async (key: string): Promise<SearchSuggest> => {
   })
   return data.result
 }
+
+export const getSearchDefaultKeyword = () =>
+  get<{ data: { realkeyword: string } }>('/api/search/default')
+
+export const getSearchHotKeywords = () =>
+  get<{
+    data: {
+      searchWord: string
+      score: number
+      content: string
+      source: string
+      iconType: number
+      iconUrl: string
+      url: string
+      alg: string
+    }[]
+  }>('/api/search/hot/detail')

src/components/MatchText.vue

@@ -0,0 +1,17 @@
+<template>
+  <span v-html="showText" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  match: string
+}>()
+
+const showText = props.text.replace(new RegExp(props.match, 'i'), $ => {
+  console.log($)
+  return `<span class="text-primary">${$}</span>`
+})
+</script>
+
+<style></style>

src/hooks/path.ts

@@ -33,3 +33,14 @@ export const useJumpArtist = () => {
     })
   }
 }
+
+export const useJump = () => {
+  const jumpSongList = useJumpSongList()
+  const jumpArtist = useJumpArtist()
+  const jumpAblum = useJumpAblumList()
+  return {
+    jumpAblum,
+    jumpArtist,
+    jumpSongList
+  }
+}

src/pages/header/component/push-shift.tsx

@@ -85,32 +85,47 @@ export const PushShift = defineComponent({
 
     return () => {
       const { historyRoute } = store.state
-      const forward = () => handleRouteCommand(COMMAND.FORWARD)
-      const back = () => handleRouteCommand(COMMAND.BACK)
+
+      const cantForward = !historyRoute.after.length
+      const cantBack = !historyRoute.before.length
+
+      const forward = () => {
+        if (cantForward) {
+          return
+        }
+        handleRouteCommand(COMMAND.FORWARD)
+      }
+      const back = () => {
+        if (cantBack) {
+          return
+        }
+        handleRouteCommand(COMMAND.BACK)
+      }
       return (
-        <div class="push-shift">
-          <ve-button
-            disabled={!historyRoute.before.length}
-            class={classnames({
-              'push-shift-disabled': !historyRoute.before.length
-            })}
+        <div class="push-shift space-x-4 flex items-center">
+          <div
+            class={classnames(
+              'w-5 h-5 bg-[#0000001c] rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer',
+              {
+                'opacity-40 !cursor-not-allowed': cantBack
+              }
+            )}
             onClick={back}
-            type="text"
-            circle
           >
-            <icon icon="toLeft" size={16}></icon>
-          </ve-button>
-          <ve-button
-            disabled={!historyRoute.after.length}
-            class={classnames({
-              'push-shift-disabled': !historyRoute.after.length
-            })}
+            <icon icon="toLeft" size={12}></icon>
+          </div>
+
+          <div
+            class={classnames(
+              'w-5 h-5 bg-[#0000001c] rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer',
+              {
+                'opacity-40 !cursor-not-allowed': cantForward
+              }
+            )}
             onClick={forward}
-            type="text"
-            circle
           >
-            <icon icon="toRight" size={16} color={'#fff'}></icon>
-          </ve-button>
+            <icon icon="toRight" size={12} color={'#fff'}></icon>
+          </div>
         </div>
       )
     }

src/pages/header/component/search.less

@@ -8,7 +8,7 @@ li.qq-song {
 
 .search {
   -webkit-app-region: no-drag;
-  margin-left: 10px;
+  margin-left: 20px;
   &-popper {
     height: 240px;
     font-size: 13px;