新增导航栏和点击详情打开新页面

packages/web/src/pages/search.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
     <!--    {{ list }}-->
-
-    <div class="search-box max-w-screen-lg my-[50px] mx-auto">
+    <div class="breadcrumb my-[30px] max-w-screen-lg pb-[20px] mx-auto bb-1px_#EBEBEB">
+      <n-breadcrumb separator=">">
+         <n-breadcrumb-item @click="$router.push('/')">{{ $t('home') }}</n-breadcrumb-item>
+        <n-breadcrumb-item>{{ $t('search_res') }}</n-breadcrumb-item>
+      </n-breadcrumb>
+    </div>
+    <div class="search-box max-w-screen-lg mb-[50px] mx-auto">
       <n-h2 class="title"> {{ $t('search_res') }}：</n-h2>
       <template v-if="list.length > 0">
         <n-list hoverable clickable>
@@ -46,7 +51,7 @@ layout: "base"
 }
 </route>
 <script lang="ts" setup>
-import { NList, NListItem, NThing, NH2, NEmpty, NButton } from 'naive-ui'
+import { NList, NListItem, NThing, NH2, NEmpty, NButton, NBreadcrumb, NBreadcrumbItem, } from 'naive-ui'
 import { type ArticleDetailType, getArticleSearch } from '@/api'
 import router from '@/plugins/router.ts'
 
@@ -71,7 +76,10 @@ onMounted(async () => {
 })
 
 const handleToArticle = (item: ArticleDetailType) => {
-  router.push(`/showdoc/${item.id}`)
+  // router.push(`/showdoc/${item.id}`)
+  // 改成打开新标签页
+  const resolved = router.resolve({ path: `/showdoc/${item.id}` });
+  window.open(resolved.href, '_blank');
 }
 </script>
 <style lang="scss" scoped>
@@ -92,5 +100,23 @@ const handleToArticle = (item: ArticleDetailType) => {
       }
     }
   }
+  .breadcrumb {
+    height: 0.88rem;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 0.5333rem;
+    overflow-x: auto;
+    :deep(.n-breadcrumb) {
+      ul {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+    }
+  }
 }
 </style>