src/api/tag/tag.js

@@ -1,11 +1,11 @@
 import http from "@/utils/http";
-
+//获取标签名
-export const getTagList =(tagName)=>{
+export const getTags= (tagName)=>{
     return http({
         url:"/tag/getTags",
         method:"get",
-        data:{
+        params:{
-            tagName:tagName
+            tagName
         },
     })
 }

src/components/TypeSelect.vue

@@ -3,29 +3,55 @@
       <!-- {{ props.type }}{{ props }} -->
       <div
         v-for="word in words"
-        :key="word.id"
+        :key="word"
         class="word-item"
         @click="handleWordClick(word)"
       >
-        {{ word.name }}
+        {{ word }}
       </div>
 
     </div>
   </template>
   
   <script setup>
-  import { ref,onMounted,computed } from 'vue';
+  import { onMounted, ref ,watch} from 'vue';
+  import { getTags } from "@/api/tag/tag";
   const emit=defineEmits(['select'])
-  import {useTagStore } from '@/store/tagStore'
+  const props=defineProps({
-  const tagStore=useTagStore()
+    type:{
+      type:String,
+      default:''
+    }
+  })
+  const getWords=async(type)=>{
+    let res=await getTags(type);
+    if(res.code==200){
+      words.value=res.data.map(itme=>itme.name);
+      if(words.value.length==0){
+        words.value=['暂无数据']
+      }
+    }
+  }
+  watch(() => props.type,(newValue)=>{
+    getWords(newValue);
+    console.log("props",newValue);
+  },{
+    //深度监听
+    deep: true, // 启用深度监听
+  })
   // 包含所有可点击词的数组
-  const words = computed(()=>{
+  const words = ref([
-    return tagStore.tagList
+  '高数上', '高数下', '线性代数', '数学分析', '解析几何',
-  })
+  '概率论与数理统计', '复变函数', '实变函数', '常微分方程',
-
+  '近世代数', '数据结构', 'C语言', '软件工程类', '大学物理（简明）',
-  onMounted(()=>{
+  '物理实验', '力学', '热学', '光学', '电磁学', '原子物理学',
-    tagStore.getData()
+  '物理专业', '高中物理', '初中物理', '高中化学', '初中化学',
-  })
+  '高中数学', '初中数学', '小学数学', '高中生物', '初中生物',
+  '有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
+  '高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
+  '遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
+  '法学', '经济学', '其他'
+]);
   const handleWordClick = (word) => {
     console.log(`Clicked word: ${word}`);
     emit('select',word);
@@ -50,4 +76,4 @@
   .word-item:hover {
     background-color: #f0f0f0;
   }
-  </style>@/store/tagStore
+  </style>

src/components/Xuaua_header.vue

@@ -2,30 +2,22 @@
   <div class="nav">
     <div class="logo-box"><span class="loogText">Xuaua</span></div>
     <div>
-      <div class="search-box">
+     
-        <el-popover class="search-box" :width="700" trigger="click">
+      <el-popover :width="700" trigger="click">
           <template #reference>
-            <!-- <div class="selectInput">
+            <div class="search-box">
+              <div class="selectInput">
               <div @click="selectClick">
                 <el-icon :size="size" :color="color">
                   <Search />
                 </el-icon>
               </div>
-            </div> -->
+              <input type="text" placeholder="搜索关键词" v-model="type" />
-            <el-input
-              v-model="searchVal"
-              style="max-width: 600px"
-              placeholder="搜索关键词"
-              class="input-with-select"
-            >
-              <template #prepend>
-                <el-button :icon="Search" />
-              </template>
-            </el-input>
-          </template>
-          <TypeSelect @select="selectInput"></TypeSelect>
-        </el-popover>
             </div>
+      </div>
+          </template>
+          <TypeSelect @select="selectInput" :type="type"></TypeSelect>
+        </el-popover>
     </div>
     <div @click="router.push('/user')" class="user-avatar">
       <el-avatar :size="40" :src="circleUrl" />用户名
@@ -35,15 +27,28 @@
 <script setup>
 // import {defineProps} from "vue"
 import TypeSelect from "@/components/TypeSelect.vue";
-import { ref,computed } from "vue";
+import { debounceRef } from "@/utils/debounceRef";
-import { Search } from "@element-plus/icons-vue";
+import { ref } from 'vue'
-import {useTagStore } from '@/store/tagStore'
+import { Search } from '@element-plus/icons-vue'
-  const tagStore=useTagStore()
+const type = debounceRef('', 500);
-
-
-let searchVal = computed(()=> useTagStore().$state.Val)
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.selectInput {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 7px 10px;
+  border: 2px #000000 solid;
+  border-radius: 30px;
+  input {
+    background-color: #00000000; /* 透明背景 */
+    border: none; /* 无边框 */
+    outline: none; /* 去除聚焦时的轮廓 */
+    padding: 0; /* 无内边距 */
+    margin: 0; /* 无外边距 */
+    width: 100%;
+  }
+}
 .nav {
   width: 100%;
   height: 70px;

src/store/tagStore.js

@@ -1,18 +0,0 @@
-import { defineStore } from "pinia";
-import { getTagList } from "@/api/tag/tag";
-
-export const useTagStore = defineStore("useTagStore", {
-  state: () => ({
-    count: 0,
-    tagList: [],
-    Val: "测试"
-  }),
-
-  actions: {
-    async getData(name = null) {
-      const res = await getTagList(name);
-      console.log(res);
-      this.tagList = res.data; // 假设 res.data 是你要更新的标签列表
-    }
-  },
-});