全局查询静态

5 days ago · b5924a6791
parent 729e21039c
commit b5924a6791
7 changed files with 126 additions and 23 deletions
--- a/src/assets/logo.svg
+++ b/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">
--- a/src/components/HeaderNav.vue
+++ b/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{
--- a/src/components/SearchResults/Classify.vue
+++ b/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>
--- a/src/components/SearchResults/ResultItem.vue
+++ b/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{
--- a/src/utils/api.js
+++ b/src/utils/api.js
--- a/src/utils/function.js
+++ b/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}>`;
+    });
+}
--- a/src/views/SearchResults.vue
+++ b/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>