196 lines
4.6 KiB
Vue
196 lines
4.6 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import Projects_projectBox from '../components/Projects_box.vue'
|
||
|
||
// 搜索输入
|
||
const searchQuery = ref('')
|
||
|
||
// 用于生成随机图片尺寸
|
||
const imageURL = (r1, r2) => {
|
||
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
|
||
}
|
||
|
||
// 示例项目数据
|
||
const projects = ref([
|
||
{
|
||
id: 1,
|
||
name: '智能养殖系统',
|
||
author: ["张三", "李四"],
|
||
image: null,
|
||
status: '进行中',
|
||
tags: ['智能养殖', '自动喂养', '数据分析', '物联网']
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '绿色生态猪场',
|
||
author: ["王五", "赵六"],
|
||
image: null,
|
||
status: '已完成',
|
||
tags: ['环保', '生态养殖', '有机饲料', '循环利用']
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '基因优化猪种',
|
||
author: ["刘七", "杨八"],
|
||
image: null,
|
||
status: '待定',
|
||
tags: ['基因研究', '猪种改良', '优质肉类', '育种技术']
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '猪肉生产透明化',
|
||
author: ["孙九", "钱十"],
|
||
image: null,
|
||
status: '暂停',
|
||
tags: ['透明供应链', '动物福利', '溯源技术', '肉品安全']
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '猪场废弃物处理',
|
||
author: ["吴十一", "郑十二"],
|
||
image: imageURL(Math.random(), Math.random()),
|
||
status: '进行中',
|
||
tags: ['废物利用', '环保技术', '沼气发电', '饲料再生']
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '猪肉替代品研发',
|
||
author: ["陈十三", "冯十四"],
|
||
image: imageURL(Math.random(), Math.random()),
|
||
status: '已完成',
|
||
tags: ['植物肉', '替代蛋白', '创新食品', '健康饮食']
|
||
},
|
||
{
|
||
id: 7,
|
||
name: '猪养殖智能监控',
|
||
author: ["郑十五", "许十六"],
|
||
image: imageURL(Math.random(), Math.random()),
|
||
status: '进行中',
|
||
tags: ['远程监控', '人工智能', '动物健康', '环境控制']
|
||
},
|
||
{
|
||
id: 8,
|
||
name: '猪饲料创新配方',
|
||
author: ["冯十七", "唐十八"],
|
||
image: imageURL(Math.random(), Math.random()),
|
||
status: '待定',
|
||
tags: ['营养优化', '创新饲料', '成本降低', '动物健康']
|
||
}
|
||
]);
|
||
|
||
|
||
/**
|
||
* 解析搜索栏的输入，将其按空格拆分为多个关键字 tokens
|
||
* 例如输入 "Vue3 应用" => ["Vue3", "应用"]
|
||
*/
|
||
const parseSearchInput = (input) => {
|
||
return input
|
||
.trim()
|
||
.split(/\s+/)
|
||
.filter(Boolean) // 过滤空字符串
|
||
}
|
||
|
||
/**
|
||
* 根据搜索栏输入，过滤项目
|
||
* 需求：搜索关键字既可以匹配项目名称，也可以匹配项目的 tags
|
||
* 并且多个关键字之间使用 "AND" 逻辑
|
||
*/
|
||
const filterProjects = () => {
|
||
// 如果没有输入任何搜索，直接返回全部
|
||
if (!searchQuery.value.trim()) {
|
||
return projects.value
|
||
}
|
||
|
||
// 获取用户输入的关键词数组
|
||
const tokens = parseSearchInput(searchQuery.value.toLowerCase())
|
||
|
||
return projects.value.filter((project) => {
|
||
// 将项目名称和标签都转换为小写，用于匹配
|
||
const nameLower = project.name.toLowerCase()
|
||
const tagsLower = project.tags.map((tag) => tag.toLowerCase())
|
||
|
||
// 对于每个 token，都要求能在名称或标签中找到
|
||
return tokens.every((token) => {
|
||
// 名称包含 token，或某个标签包含 token
|
||
return (
|
||
nameLower.includes(token) ||
|
||
tagsLower.some((tag) => tag.includes(token))
|
||
)
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container">
|
||
<div class="filters">
|
||
<!-- 将标签的功能合并到搜索栏内 -->
|
||
<input
|
||
type="text"
|
||
v-model="searchQuery"
|
||
placeholder="搜索（多个标签或关键词，空格分割）"
|
||
class="search-bar"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 按照搜索结果展示项目 -->
|
||
<div class="projects">
|
||
<Projects_projectBox
|
||
v-for="project in filterProjects()"
|
||
:key="project.name"
|
||
:project="project"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
height: calc(100vh - 100px);
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
/* 筛选区域 */
|
||
.filters {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 搜索栏 */
|
||
.search-bar {
|
||
padding: 10px;
|
||
margin: 20px 0;
|
||
width: 50%;
|
||
border-radius: 10px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
/* 项目区域 */
|
||
.projects {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 隐藏滚动条，可按需保留 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 亮色模式下可适当调整样式 */
|
||
.theme-light .search-bar {
|
||
border: 1px solid #ffb74d;
|
||
}
|
||
</style>
|