全局查询静态

src/assets/logo.svg

@@ -1,4 +1,4 @@
-<svg width="132" height="43" viewBox="0 0 132 43" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg preserveAspectRatio="xMidYMid meet" shape-rendering="crispEdges" width="132" height="43" viewBox="0 0 132 43" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <rect width="131.63" height="42.2486" fill="url(#pattern0_744_6238)"/>
 <defs>
 <pattern id="pattern0_744_6238" patternContentUnits="objectBoundingBox" width="1" height="1">

src/components/HeaderNav.vue

@@ -56,9 +56,10 @@ const searchEvent=()=>{
   if(input1.value){
     visible.value=false
     activeMenuIndex.value=null
-    localStorage.setItem('activeMenu',route.fullPath)
     menuKey.value += 1 //强制刷新
-    router.push({path:'/search',query:{keyword:input1.value}})
+    router.push({path:'/search',query:{keyword:input1.value}}).then(()=>{
+      localStorage.setItem('activeMenu',route.fullPath)
+    })
 
   }
 }
@@ -149,8 +150,8 @@ const searchEvent=()=>{
     margin-left: 160px;
     margin-right: auto;
     .logo{
-      width: 131.63px;
-      height: 42.25px;
+      width: 133px;
+      height: 43px;
     }
   }
   .person{

src/components/SearchResults/Classify.vue

@@ -13,13 +13,17 @@ const props = defineProps({
     default: ''
   }
 })
+const emit = defineEmits(['changeClassify'])
+const changeClassify = (classify) => {
+  emit('changeClassify', classify)
+}
 </script>
 
 <template>
   <div class="classify">
     <p class="title">分类</p>
-    <div class="classify-item" v-for="item in classifyList" :key="item.value" :class="{'active':item.value===activeClassify}">
-      <div class="circle"></div>{{item.label}}（{{item.count}}）
+    <div class="classify-item" v-for="item in classifyList" :key="item.value" :class="{'active':item.value===activeClassify}" @click="changeClassify(item.value)">
+      <div class="circle"></div><span>{{item.label}}</span><span>（{{item.count}}）</span>
     </div>
   </div>
 </template>
@@ -29,8 +33,9 @@ const props = defineProps({
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 268px;
+  width: 310px;
   gap: 20px;
+  padding-left: 100px;
   .title{
     font-weight: 500;
     font-size: 24px;
@@ -44,6 +49,32 @@ const props = defineProps({
     color: #666666;
     display: flex;
     align-items: center;
+    cursor: pointer;
+    .circle{
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      margin-right: 10px;
+      border: 1px solid #D9D9D9;
+    }
+  }
+  .classify-item.active{
+    .circle{
+      border: 1px solid #1890FF;
+      position: relative;
+      &::after{
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: #1890FF;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 }
 </style>

src/components/SearchResults/ResultItem.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import { highlightKeywords } from '@/utils/function.js'
 
 const props=defineProps({
   item:{
@@ -13,6 +14,10 @@ const props=defineProps({
         source:''
       }
     }
+  },
+  searchKey:{
+    type:String,
+    default:''
   }
 })
 </script>
@@ -30,11 +35,9 @@ const props=defineProps({
     </el-col>
     <el-col :span="19" style="flex:1 ;max-width: 100%;">
       <div class="content">
-          <div class="title">
-            {{item.title}}
+          <div class="title" v-html=highlightKeywords(item.title,searchKey)>
           </div>
-          <div class="description">
-            {{item.description}}
+          <div class="description" v-html=highlightKeywords(item.description,searchKey)>
           </div>
           <div class="source" >
             <span style="margin-right: 10px">来源:</span>{{item.source}}
@@ -50,9 +53,10 @@ const props=defineProps({
 .search-results-item {
   padding: 20px 10px;
   border-bottom: 1px solid #E3E3E3;
-
+  //width: 1100px;
+  box-sizing: border-box;
   .href {
-    margin-bottom: 60px;
+    margin-bottom: 40px;
     font-weight: 400;
     font-size: 14px;
     line-height: 100%;
@@ -67,10 +71,9 @@ const props=defineProps({
     display: flex;
     align-items: center;
     justify-content: center;
-
+    overflow: hidden;
     img {
-      width: 163.13px;
-      height: 93.85px;
+      object-fit: contain;
     }
   }
   //.content{

src/utils/function.js

@@ -40,3 +40,33 @@ export const getImageUrl = (path) => {
         return '';
     }
 }
+
+export function highlightKeywords(text, keywords, options = {}) {
+    // 处理边界情况：文本或关键字为空时直接返回原文本
+    if (!text || !keywords || (Array.isArray(keywords) && keywords.length === 0)) {
+        return text;
+    }
+
+    // 合并默认配置
+    const {
+        color = '#2D00F5',
+        ignoreCase = true,
+        tag = 'span'
+    } = options;
+
+    // 统一将关键字转为数组格式（兼容单个关键字传入）
+    const keywordList = Array.isArray(keywords) ? keywords : [keywords];
+    // 过滤空关键字
+    const validKeywords = keywordList.filter(keyword => keyword && keyword.trim());
+    if (validKeywords.length === 0) return text;
+
+    // 构建正则表达式：转义特殊字符 + 忽略大小写 + 全局匹配
+    const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regexStr = validKeywords.map(escapeRegExp).join('|');
+    const regex = new RegExp(regexStr, ignoreCase ? 'gi' : 'g');
+
+    // 替换匹配的关键字，用指定标签包裹并设置颜色
+    return text.replace(regex, (match) => {
+        return `<${tag} style="color: ${color};">${match}</${tag}>`;
+    });
+}

src/views/SearchResults.vue

@@ -5,8 +5,10 @@ import {nextTick, ref} from "vue";
 import {useRouter,useRoute} from "vue-router";
 import ResultItem from "@/components/SearchResults/ResultItem.vue";
 import img from "@/assets/img/search1.png"
+import img1 from "@/assets/img/search2.png"
 import Classify from "@/components/SearchResults/Classify.vue";
 
+
 const router=useRouter()
 const route=useRoute()
 
@@ -50,7 +52,21 @@ const searchResults=ref([
     title:'反馈抑制模块',
     description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
     source:'产品中心'
-  }
+  },
+  {
+    href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
+    url:'',
+    title:'AI 降噪模块',
+    description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
+    source:'服务交流'
+  },
+  {
+    href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
+    url:img1,
+    title:'AI 降噪模块',
+    description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
+    source:'服务交流'
+  },
 ])
 const classifyList=ref([
   {label:'全部',value:'全部',count:256},
@@ -58,9 +74,12 @@ const classifyList=ref([
   {label:'产品',value:'解决方案',count:64},
   {label:'解决方案',value:'服务交流',count:32},
   {label:'服务交流',value:'关于我们',count:16},
-  {label:'公司&新闻',value:'关于我们',count:8},
+  {label:'公司&新闻',value:'公司&新闻',count:8},
 ])
 const activeClassify=ref('全部')
+const changeClassify=(classify)=>{
+  activeClassify.value=classify
+}
 </script>
 
 <template>
@@ -71,6 +90,7 @@ const activeClassify=ref('全部')
   <div class="search-input">
     <el-input
         v-model="input"
+        clearable
         :suffix-icon="Search"
         placeholder="关键词搜索产品、文档、新闻"
         size="large"
@@ -79,9 +99,12 @@ const activeClassify=ref('全部')
     ></el-input>
   </div>
   <div class="search-results-list">
-      <Classify :classifyList=classifyList :activeClassify="activeClassify"></Classify>
-       <div>
-         <ResultItem v-for="item in searchResults" :key="item.href" :item="item"></ResultItem>
+      <Classify :classifyList=classifyList :activeClassify="activeClassify" @changeClassify="changeClassify"></Classify>
+       <div style="width: 1100px">
+         <div class="total">256条结果</div>
+         <ResultItem v-for="item in searchResults" :key="item.href" :item="item" :searchKey="input"></ResultItem>
+         <el-empty description="暂时还没有数据呢"  v-if="searchResults.length === 0"/>
+         <el-pagination default-page-size="5" class="pagination"  layout="prev, pager, next" :total="256" />
       </div>
   </div>
 
@@ -109,7 +132,22 @@ const activeClassify=ref('全部')
     width: 1400px;
     margin:auto;
     display: flex;
-    gap: 30px;
+    gap: 122px;
+    .total{
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 100%;
+      color: #999999;
+      border-bottom: 1px solid #E3E3E3;
+      padding-bottom: 15px;
+      padding-left: 10px;
+    }
+    .pagination{
+      margin-top: 30px;
+      :deep(.el-pager li.is-active){
+        border: 1px solid #1890FF;
+      }
+    }
   }
 }
 </style>