搜索功能完善与界面优化
前言
第八天完成了内容安全防护和广告位完善。第九天的开发工作将重点关注搜索功能的精确匹配优化、防复制弹窗界面美化、Footer组件交互增强以及导航栏样式优化，提升用户体验和界面美观度。
编辑
编辑
一、搜索功能精确匹配优化
1.1 问题分析
之前的搜索功能存在两个问题：
- 搜索命中规则不够精确，输入"公文格式"时返回了所有文章而非仅命中的文章
- 无搜索结果时未正确提示，仍显示全文结果
1.2 解决方案
修改后端 YucmsArticleController.java，添加关键词精确搜索逻辑：
@GetMapping(value = "/list")
public Result<IPage<YucmsArticle>> queryPageList(YucmsArticle yucmsArticle,
@RequestParam(name="pageNo", defaultValue="1") Integer pageNo,
@RequestParam(name="pageSize", defaultValue="10") Integer pageSize,
@RequestParam(name="keyword", required=false) String keyword,
HttpServletRequest req) {
QueryWrapper<YucmsArticle> queryWrapper = QueryGenerator.initQueryWrapper(yucmsArticle, req.getParameterMap());
// 如果有keyword参数，进行全文搜索
if(oConvertUtils.isNotEmpty(keyword)) {
queryWrapper.and(wrapper -> {
wrapper.like("content", keyword)
.or()
.like("title", keyword);
});
}
Page<YucmsArticle> page = new Page<YucmsArticle>(pageNo, pageSize);
IPage<YucmsArticle> pageList = yucmsArticleService.page(page, queryWrapper);
return Result.OK(pageList);
}
1.3 前端提示优化
修改 SearchResult.vue，在无搜索结果时显示"没有关键字文章"提示：
<!-- 无搜索结果提示 -->
<div v-if="total === 0 && keyword" class="text-center py-12">
<div class="w-16 h-16 mx-auto mb-4 bg-slate-100 rounded-full flex items-center justify-center">
<i data-lucide="search" class="w-8 h-8 text-slate-400"></i>
</div>
<p class="text-slate-500">没有关键字文章</p>
</div>
1.4 搜索规则说明
| 场景 | 行为 |
|---|---|
| 输入完整关键词 | 精确匹配content和title字段 |
| 无匹配结果 | 显示"没有关键字文章"提示 |
| 空关键词 | 提示"请输入关键词进行搜索" |
二、防复制弹窗界面优化
2.1 需求分析
用户复制文章内容时弹出的提示框需要：
- 二维码区域尺寸缩小
- 替换为实际公众号二维码图片
2.2 实现方案
修改 ArticleDetail.vue 中的弹窗内容：
<!-- 二维码区域 -->
<div class="w-24 h-24 mx-auto bg-white border-2 border-slate-200 rounded-lg overflow-hidden">
<img src="/fintechren.jpg" alt="扫码关注" class="w-full h-full object-cover" />
</div>
2.3 修改说明
| 修改项 | 修改前 | 修改后 |
|---|---|---|
| 尺寸 | w-28 h-28 (112px) | w-24 h-24 (96px) |
| 内容 | 图标+文字 | 实际图片 |
三、Footer组件交互增强
3.1 需求分析
点击"关于我们"链接时，弹出遮罩层展示公众号二维码，便于用户扫码关注。
3.2 实现方案
修改 Footer.vue，添加弹窗交互：
<!-- 关于我们按钮 -->
<button
@click="showAboutModal = true"
class="font-bold mb-4 text-amber-500 hover:text-amber-600 transition-colors cursor-pointer text-left"
>
关于我们
</button>
<!-- 关于我们弹窗 -->
<Teleport to="body">
<Transition name="modal">
<div
v-if="showAboutModal"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
@click.self="showAboutModal = false"
>
<!-- 遮罩层 -->
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
<!-- 弹窗内容 -->
<div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
<!-- 头部 -->
<div class="bg-gradient-to-r from-blue-500 to-cyan-500 px-6 py-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
<i data-lucide="info" class="w-6 h-6 text-white"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-white">关于我们</h3>
<p class="text-white/80 text-sm">金融科技.人</p>
</div>
</div>
<button @click="showAboutModal = false">
<i data-lucide="x" class="w-5 h-5 text-white/80"></i>
</button>
</div>
</div>
<!-- 内容 -->
<div class="p-6">
<p class="text-slate-700 mb-6">
金融科技.人（Fintech.Ren）专注金融（银行）科技领域，分享核心系统、信创改造等技术干货。
</p>
<div class="bg-slate-50 rounded-xl p-4 text-center">
<p class="text-slate-500 text-sm mb-3">扫码关注公众号</p>
<div class="w-36 h-36 mx-auto bg-white border-2 border-slate-200 rounded-xl overflow-hidden shadow-lg">
<img src="/fintechren.jpg" alt="Fintech.Ren" class="w-full h-full object-cover" />
</div>
<p class="text-bank-primary font-semibold mt-3">Fintech.Ren</p>
</div>
</div>
<!-- 底部按钮 -->
<div class="px-6 pb-6">
<button
@click="showAboutModal = false"
class="w-full py-3 bg-bank-primary text-white rounded-xl font-medium"
>
我知道了
</button>
</div>
</div>
</div>
</Transition>
</Teleport>
3.3 交互效果
| 触发方式 | 效果 |
|---|---|
| 点击"关于我们" | 弹窗渐入，带有缩放动画 |
| 点击遮罩层 | 弹窗关闭 |
| 点击关闭按钮 | 弹窗关闭 |
| 点击底部按钮 | 弹窗关闭 |
四、导航栏样式优化
4.1 需求分析
一级导航条字体需要放大加粗，提升视觉层次感。
4.2 实现方案
修改 Header.vue 中的导航样式：
<a href="#"
:class="['px-3 py-2 text-base font-semibold', activeNavId === item.id ? 'text-bank-primary bg-slate-50' : 'text-slate-700 hover:text-bank-primary']">
{{ item.name }}
</a>
4.3 样式对比
| 属性 | 修改前 | 修改后 |
|---|---|---|
| 字体大小 | text-sm (14px) | text-base (16px) |
| 字重 | font-medium (500) | font-semibold (600) |
| 未选中颜色 | text-slate-600 | text-slate-700 |
五、今日开发总结
| 模块 | 修改内容 | 文件路径 |
|---|---|---|
| 搜索功能 | 精确匹配优化、无结果提示 | YucmsArticleController.java, SearchResult.vue |
| 防复制弹窗 | 尺寸缩小、图片替换 | ArticleDetail.vue |
| Footer组件 | 关于我们弹窗交互 | Footer.vue |
| Header组件 | 导航字体放大加粗 | Header.vue |
