优化状态栏

src/api/tag/tag.js

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

src/components/TypeSelect.vue

@@ -2,31 +2,28 @@
     <div class="word-list">
       <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 { ref } from 'vue';
+  import { ref,onMounted,computed } from 'vue';
   const emit=defineEmits(['select'])
+  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);
@@ -48,4 +45,4 @@
   .word-item:hover {
     background-color: #f0f0f0;
   }
-  </style>
+  </style>@/store/tagStore

src/components/Xuaua_header.vue

@@ -3,23 +3,7 @@
     <div class="logo-box"><span class="loogText">Xuaua</span></div>
     <div>
       <div class="search-box">
-        <!-- <el-input type="text" prefix-icon="el-icon-search" style="height: 38px;" class="search-input" placeholder="搜索关键词" v-model="selectType">
-      
-          </el-input> -->
-        <el-input
-          v-model="input3"
-          style="max-width: 600px"
-          placeholder="搜索关键词"
-          class="input-with-select"
-        >
-          <template #prepend>
-            <el-button :icon="Search" />
-          </template>
-        </el-input>
-
-      </div>
-
-      <el-popover :width="700" trigger="click">
+        <el-popover class="search-box" :width="700" trigger="click">
           <template #reference>
             <!-- <div class="selectInput">
               <div @click="selectClick">
@@ -28,10 +12,21 @@
                 </el-icon>
               </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"></TypeSelect>
         </el-popover>
       </div>
+    </div>
     <div @click="router.push('/user')" class="user-avatar">
       <el-avatar :size="40" :src="circleUrl" />用户名
     </div>
@@ -39,10 +34,14 @@
 </template>
 <script setup>
 // import {defineProps} from "vue"
-import { ElMessage } from "element-plus";
 import TypeSelect from "@/components/TypeSelect.vue";
-import { ref } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+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">
 .nav {
@@ -57,7 +56,7 @@ import { Search } from '@element-plus/icons-vue'
     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 是你要更新的标签列表
+    }
+  },
+});