调整优化

src/api/tag/tag.js

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

src/components/TypeSelect.vue

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

src/components/Xuaua_header.vue

@@ -2,22 +2,30 @@
   <div class="nav">
     <div class="logo-box"><span class="loogText">Xuaua</span></div>
     <div>
-     
-      <el-popover :width="700" trigger="click">
+      <div class="search-box">
+        <el-popover class="search-box" :width="700" trigger="click">
           <template #reference>
-            <div class="search-box">
-              <div class="selectInput">
+            <!-- <div class="selectInput">
               <div @click="selectClick">
                 <el-icon :size="size" :color="color">
                   <Search />
                 </el-icon>
               </div>
-              <input type="text" placeholder="搜索关键词" v-model="type" />
-            </div>
-      </div>
+            </div> -->
+            <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" :type="type"></TypeSelect>
+          <TypeSelect @select="selectInput"></TypeSelect>
         </el-popover>
+      </div>
     </div>
     <div @click="router.push('/user')" class="user-avatar">
       <el-avatar :size="40" :src="circleUrl" />用户名
@@ -27,28 +35,15 @@
 <script setup>
 // import {defineProps} from "vue"
 import TypeSelect from "@/components/TypeSelect.vue";
-import { debounceRef } from "@/utils/debounceRef";
-import { ref } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-const type = debounceRef('', 500);
+import { ref,computed } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import {useTagStore } from '@/store/tagStore'
+  const tagStore=useTagStore()
+
+
+let searchVal = computed(()=> useTagStore().$state.Val)
 </script>
-<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%;
-  }
-}
+<style lang="scss">
 .nav {
   width: 100%;
   height: 70px;
@@ -61,7 +56,7 @@ const type = debounceRef('', 500);
     margin-left: 52px;
     margin-bottom: 11px;
   }
-  .input-with-select{
+  .input-with-select {
     border-radius: 30px;
   }
   .search-box {

src/store/tagStore.js

@@ -0,0 +1,18 @@
+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 是你要更新的标签列表
+    }
+  },
+});