Compare commits

..

2 Commits

Author SHA1 Message Date
Strange f56f7e97ed 调整优化 2024-07-17 21:48:01 +08:00
Strange b91409dcd3 优化状态栏 2024-07-17 20:29:04 +08:00
6 changed files with 60 additions and 73 deletions

View File

@ -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
},
})
}

View File

@ -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

View File

@ -2,23 +2,31 @@
<div class="nav">
<div class="logo-box"><span class="loogText">Xuaua</span></div>
<div>
<el-popover :width="700" trigger="click">
<template #reference>
<div class="search-box">
<div class="selectInput">
<el-popover class="search-box" :width="700" trigger="click">
<template #reference>
<!-- <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>
<TypeSelect @select="selectInput" :type="type"></TypeSelect>
</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>
@ -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 {

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