- 将头部组件中的产品链接从ID改为使用产品标题,提升了链接的可读性和语义性。 - 移除了搜索功能中的模拟数据,准备接入真实API数据,增强了代码的整洁性和可维护性。 这些修改旨在优化组件的功能和代码结构,为后续的真实数据接入做好准备。master
class="p-3 bg-slate-700/50 rounded-lg cursor-pointer hover:bg-slate-700 transition-colors group" | class="p-3 bg-slate-700/50 rounded-lg cursor-pointer hover:bg-slate-700 transition-colors group" | ||||
> | > | ||||
<nuxt-link | <nuxt-link | ||||
:to="`${homePath}products/${result.id}`" | |||||
:to="`${homePath}products/${result.title}`" | |||||
class="block" | class="block" | ||||
@click="closeSearch" | @click="closeSearch" | ||||
> | > |
}; | }; | ||||
} | } | ||||
// 模拟数据,实际项目中应替换为真实API数据 | |||||
const mockSearchResults: SearchResult[] = [ | |||||
{ | |||||
id: '1', | |||||
title: '产品一', | |||||
description: '这是产品一的详细描述', | |||||
summary: '这是产品一的详细描述', | |||||
matchedField: 'title', | |||||
matchedText: '产品一' | |||||
}, | |||||
{ | |||||
id: '2', | |||||
title: '产品二', | |||||
description: '这是产品二的详细描述', | |||||
summary: '这是产品二的详细描述', | |||||
matchedField: 'title', | |||||
matchedText: '产品二' | |||||
}, | |||||
{ | |||||
id: '3', | |||||
title: '如何使用产品?', | |||||
description: '详细介绍产品的使用方法', | |||||
summary: '详细介绍产品的使用方法', | |||||
matchedField: 'description', | |||||
matchedText: '使用方法' | |||||
}, | |||||
{ | |||||
id: '4', | |||||
title: '关于我们', | |||||
description: '公司简介和历史', | |||||
summary: '公司简介和历史', | |||||
matchedField: 'description', | |||||
matchedText: '公司简介' | |||||
} | |||||
]; |
<div class="max-w-screen-2xl mx-auto"> | <div class="max-w-screen-2xl mx-auto"> | ||||
<div class="w-full grid grid-cols-1 md:grid-cols-12 gap-4"> | <div class="w-full grid grid-cols-1 md:grid-cols-12 gap-4"> | ||||
<div | <div | ||||
class="sticky top-24 col-span-1 md:col-span-3 flex flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12 2xl:gap-16 mb-4 sm:mb-6 md:mb-8 lg:mb-10 xl:mb-12 2xl:mb-16 pr-4" | |||||
class="col-span-1 md:col-span-3 flex flex-col gap-4 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12 2xl:gap-16 mb-4 sm:mb-6 md:mb-8 lg:mb-10 xl:mb-12 2xl:mb-16 pr-4" | |||||
> | > | ||||
<div | <div | ||||
class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6" | class="flex flex-col gap-2 sm:gap-3 md:gap-4 lg:gap-5 xl:gap-6" |