企业级门户网站设计与实现：基于SpringBoot + Vue3的全栈解决方案（Day 9）

搜索功能完善与界面优化

前言

第八天完成了内容安全防护和广告位完善。第九天的开发工作将重点关注搜索功能的精确匹配优化、防复制弹窗界面美化、Footer组件交互增强以及导航栏样式优化，提升用户体验和界面美观度。

一、搜索功能精确匹配优化

1.1 问题分析

之前的搜索功能存在两个问题：

1. 搜索命中规则不够精确，输入"公文格式"时返回了所有文章而非仅命中的文章

2. 无搜索结果时未正确提示，仍显示全文结果

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 需求分析

用户复制文章内容时弹出的提示框需要：

1. 二维码区域尺寸缩小

2. 替换为实际公众号二维码图片

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