优化状态栏

This commit is contained in:
Strange 2024-07-17 20:29:04 +08:00
parent bdae2cbd63
commit b91409dcd3
5 changed files with 62 additions and 37 deletions

11
src/api/tag/tag.js Normal file
View File

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

View File

@ -2,31 +2,28 @@
<div class="word-list"> <div class="word-list">
<div <div
v-for="word in words" v-for="word in words"
:key="word" :key="word.id"
class="word-item" class="word-item"
@click="handleWordClick(word)" @click="handleWordClick(word)"
> >
{{ word }} {{ word.name }}
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref,onMounted,computed } from 'vue';
const emit=defineEmits(['select']) const emit=defineEmits(['select'])
import {useTagStore } from '@/store/tagStore'
const tagStore=useTagStore()
// //
const words = ref([ const words = computed(()=>{
'高数上', '高数下', '线性代数', '数学分析', '解析几何', return tagStore.tagList
'概率论与数理统计', '复变函数', '实变函数', '常微分方程', })
'近世代数', '数据结构', 'C语言', '软件工程类', '大学物理(简明)',
'物理实验', '力学', '热学', '光学', '电磁学', '原子物理学', onMounted(()=>{
'物理专业', '高中物理', '初中物理', '高中化学', '初中化学', tagStore.getData()
'高中数学', '初中数学', '小学数学', '高中生物', '初中生物', })
'有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
'高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
'遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
'法学', '经济学', '其他'
]);
const handleWordClick = (word) => { const handleWordClick = (word) => {
console.log(`Clicked word: ${word}`); console.log(`Clicked word: ${word}`);
emit('select',word); emit('select',word);
@ -48,4 +45,4 @@
.word-item:hover { .word-item:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
</style> </style>@/store/tagStore

View File

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

18
src/store/tagStore.js Normal file
View File

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