基本完成单曲搜索

src/views/common/Search.vue

@@ -1,19 +1,63 @@
 <script setup>
-import {NInput} from 'naive-ui'
+import { NInput, NIcon } from "naive-ui";
+import pubsub from "pubsub-js";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import { getHotDetail, searchSuggest } from "@/network/search.js";
+import { ref } from "vue";
+import SvgSearchOutline from "@/assets/svgs/SearchOutline.svg";
 
+const store = useStore();
+const router = useRouter();
+
+const keywords = ref("");
+const elSearch = ref(null);
+
+const search = () => {
+  if (keywords.value.length > 0){
+    pubsub.publish("zp.toggleSearch");
+    // elSearch.value.blur()
+    router.push(`/search/1/${keywords.value}`);
+  }
+};
+
+const handleInput = () => {
+  pubsub.publish('zp.showSearch');
+  pubsub.publish("zp.searchInput", keywords.value);
+};
+
+
+const result = ref({});
 </script>
 <template>
   <div id="search">
-    <n-input size="small" round placeholder="请搜索..." />
+    <n-input
+      ref="elSearch"
+      size="small"
+      round
+      placeholder="请搜索..."
+      clearable
+      @activate="
+        () => {
+          pubsub.publish('zp.showSearch');
+        }
+      "
+      v-model:value="keywords"
+      @keyup.enter="search"
+      @input="handleInput"
+      style="width: 190px"
+    >
+      <template #prefix>
+        <n-icon>
+          <SvgSearchOutline />
+        </n-icon>
+      </template>
+    </n-input>
   </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
-</style>
+<style></style>