1. 问：你们项目中的搜索栏是如何实现的？涉及到哪些前后端交互？
答：
在本项目中，搜索栏主要体现在 web-company/src/components/SearchBar.vue 组件。用户输入关键词后，前端会通过调用统一管理的API（如 web-company/src/api/search.ts）向后端发送搜索请求。后端（如 web-server/routes/web/searchRouter.js 和 web-server/controllers/web/search.js）接收请求后，从数据库中模糊匹配相关产品或新闻，并将结果返回前端，前端再将结果渲染到页面上。整个过程实现了前后端分离、异步交互和实时反馈。
2. 问：搜索栏在前端是如何做防抖处理的？为什么要这样做？
答：
在 SearchBar.vue 组件中，前端对用户输入进行了防抖处理，通常通过 lodash.debounce 或自定义的防抖函数（如 web-company/src/utils/throttleAndDebounce.ts）。这样可以避免用户每输入一个字符就频繁发送请求，减少无效API调用，提升性能和用户体验。例如，只有用户停止输入300ms后才会真正发起搜索请求。
3. 问：搜索结果是如何展示的？有无做高亮或下拉建议？
答：
搜索结果会在输入框下方以下拉列表的形式实时展示，用户可以直接点击结果跳转到对应详情页。项目中还实现了关键词高亮显示（如将匹配的关键词用 <span class="highlight"> 包裹），提升用户体验。此外，部分场景下还会根据历史搜索或热门关键词做下拉建议，相关逻辑可在 SearchBar.vue 组件中找到。
4. 问：后端搜索接口是如何实现高效模糊查询的？
答：
后端搜索接口（如 web-server/controllers/web/search.js）采用数据库的模糊查询（如 LIKE '%keyword%'），并对常用搜索字段（如产品名、新闻标题）建立了索引，提升查询效率。对于大数据量场景，还可以采用全文检索引擎（如 Elasticsearch），但本项目主要通过MySQL索引和分页返回结果，保证了响应速度和准确性。
5. 问：你们项目的搜索栏如何兼容移动端和PC端？
答：
搜索栏组件采用了响应式布局（如flex和百分比宽度），并在样式文件（如 web-company/src/styles/globals.css）中针对不同屏幕宽度做了适配。输入框和下拉结果在移动端会自动调整为全屏宽度，保证触控友好。通过媒体查询和ECharts等大屏组件的配合，保证了搜索栏在PC和移动端都能良好显示和交互。
