From 4972f1dd53d1741f74b44e8125bd21d944f814d6 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Thu, 25 Sep 2025 17:31:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E5=8D=9A=E5=AE=A2?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/blog.ts                           |   9 +-
 src/layout/components/Sidebar/BlogMenu.vue |   2 +-
 src/router/blog.ts                         |  15 ++-
 src/store/blog.ts                          |  12 ++-
 src/types/blog.ts                          |   7 ++
 src/views/search.vue                       | 107 +++++++++++++++++++++
 6 files changed, 146 insertions(+), 6 deletions(-)
 create mode 100644 src/views/search.vue

diff --git a/src/apis/blog.ts b/src/apis/blog.ts
index a50244c..e205121 100644
--- a/src/apis/blog.ts
+++ b/src/apis/blog.ts
@@ -1,5 +1,5 @@
 import { cloudService } from './index'
-import { IBlog, IBlogCategory, IBlogComment, IBlogStats, IQueryBlog } from '@/types/blog'
+import { IBlog, IBlogCategory, IBlogComment, IBlogSearch, IBlogStats, IQueryBlog } from '@/types/blog'
 
 import qs from 'qs'
 import { IPageRecord } from '@/types'
@@ -11,6 +11,13 @@ export const queryBlogApi = (currentPage: number, pageSize: number): Promise<IPa
     params: { currentPage, pageSize }
   })
 
+export const searchBlogApi = (keyword: string): Promise<IBlogSearch[]> =>
+  cloudService({
+    url: '/blog-api/blog/search',
+    method: 'get',
+    params: { keyword }
+  })
+
 export const queryBlogByConditionApi = (query: IQueryBlog): Promise<IBlog[]> =>
   cloudService({
     url: '/blog-api/blog/condition',
diff --git a/src/layout/components/Sidebar/BlogMenu.vue b/src/layout/components/Sidebar/BlogMenu.vue
index 4c5899e..e3797f7 100644
--- a/src/layout/components/Sidebar/BlogMenu.vue
+++ b/src/layout/components/Sidebar/BlogMenu.vue
@@ -17,7 +17,7 @@
       <span class="value">{{ blogStore.blogStats.blogCount }}</span>
     </el-menu-item>
 
-    <el-menu-item>
+    <el-menu-item index="/search">
       <i class="fa fa-search fa-fw" />
       <span class="menu-title">搜索</span>
     </el-menu-item>
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 3275a19..f7428f4 100644
--- a/src/router/blog.ts
+++ b/src/router/blog.ts
@@ -12,7 +12,7 @@ const blogRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/overview.vue')
       },
       {
-        path: '/overview/detail:id',
+        path: '/overview/detail/:id',
         name: 'DetailId',
         component: () => import('@/views/detail[id].vue')
       }
@@ -28,7 +28,7 @@ const blogRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/category.vue')
       },
       {
-        path: '/category:name',
+        path: '/category/:name',
         name: 'CategoryName',
         component: () => import('@/views/category[name].vue')
       }
@@ -44,6 +44,17 @@ const blogRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/archive.vue')
       }
     ]
+  },
+  {
+    path: '/search',
+    redirect: '/search/index',
+    component: BlogLayout,
+    children: [
+      {
+        path: '/search/index',
+        component: () => import('@/views/search.vue')
+      }
+    ]
   }
 ]
 
diff --git a/src/store/blog.ts b/src/store/blog.ts
index 2ef9b56..c7d8e0b 100644
--- a/src/store/blog.ts
+++ b/src/store/blog.ts
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
 import {
   IBlog, IBlogCategory, IBlogComment,
-  IBlogLatest, IBlogNestedComment, IBlogStats, INewBlog, IQueryBlog
+  IBlogLatest, IBlogNestedComment, IBlogSearch, IBlogStats, INewBlog, IQueryBlog
 } from '@/types/blog'
 import {
   addBlogCommentApi,
   queryBlogApi, queryBlogByConditionApi, queryBlogByIdApi,
-  queryBlogCategoryApi, queryBlogCommentApi, queryBlogStatsApi, queryLatestBlogApi
+  queryBlogCategoryApi, queryBlogCommentApi, queryBlogStatsApi, queryLatestBlogApi, searchBlogApi
 } from '@/apis/blog.ts'
 import { IHandleApi } from 'vue3-common/types'
 import { ImagePathEnum } from '@/types'
@@ -17,6 +17,7 @@ export const useBlogStore = defineStore('blog', {
     blogList: [] as IBlog[],
     blogCommentList: [] as IBlogComment[],
     blogNestedCommentList: [] as IBlogNestedComment[],
+    searchBlogList: [] as IBlogSearch[],
     currentBlogComment: {
       id: 0,
       blogId: 0,
@@ -50,6 +51,8 @@ export const useBlogStore = defineStore('blog', {
     blogStats: {} as IBlogStats,
     latestBlogList: [] as IBlogLatest[],
     queryBlog: {} as IQueryBlog,
+    searchBlogKeyword: '',
+    isSearching: false,
     blogImagePath: ImagePathEnum.BLOG,
     blogApiType: 'ADD' as IHandleApi,
     pageInfo: {
@@ -83,6 +86,11 @@ export const useBlogStore = defineStore('blog', {
     async queryBlogComment(blogId: number) {
       this.blogCommentList = await queryBlogCommentApi(blogId)
     },
+    async searchBlog(keyword: string) {
+      this.isSearching = true
+      this.searchBlogList = await searchBlogApi(keyword)
+      this.isSearching = false
+    },
     async addBlogComment(blogComment: IBlogComment) {
       await addBlogCommentApi(blogComment)
       await this.queryBlogById(blogComment.blogId)
diff --git a/src/types/blog.ts b/src/types/blog.ts
index 3f500ca..327a7aa 100644
--- a/src/types/blog.ts
+++ b/src/types/blog.ts
@@ -82,3 +82,10 @@ export interface IBlogNestedComment {
   comment: IBlogComment;
   replies: IBlogComment[];
 }
+
+export interface IBlogSearch {
+  id: number;
+  title: string;
+  content: string;
+  highlight: string;
+}
diff --git a/src/views/search.vue b/src/views/search.vue
new file mode 100644
index 0000000..5bd50b7
--- /dev/null
+++ b/src/views/search.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="blog-search blog-section card-item">
+    <el-input
+        v-model="blogStore.searchBlogKeyword"
+        @input="searchBlogClick"
+        clearable
+        placeholder="搜索博客文章..."
+    />
+
+    <div v-if="blogStore.searchBlogList.length > 0"
+         v-loading="blogStore.isSearching"
+         element-loading-text="正在搜索中..."
+         class="blog-results">
+      <h3 class="results-title">找到 {{ blogStore.searchBlogList.length }} 篇相关博客</h3>
+
+      <div v-for="(blog, index) in blogStore.searchBlogList"
+           :key="index" class="blog-card card-item">
+        <h4 class="blog-title">{{ blog.title }}</h4>
+        <div class="blog-excerpt" v-html="blog.highlight" />
+
+        <router-link :to="`/overview/detail/${blog.id}`" class="read-more">阅读全文</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlogStore } from '@/store/blog'
+import { onMounted } from 'vue'
+
+const blogStore = useBlogStore()
+
+onMounted(() => {
+  blogStore.searchBlogKeyword = ''
+  blogStore.searchBlogList = []
+})
+
+const searchBlogClick = async (value: string) => {
+  if (!value) {
+    blogStore.searchBlogList = []
+    return
+  }
+
+  await blogStore.searchBlog(value)
+}
+</script>
+
+<style lang="scss">
+.blog-search {
+  padding: 20px;
+
+  .search-box {
+    display: flex;
+    gap: 10px;
+  }
+
+  .blog-results {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .results-title {
+      color: #333;
+      margin-bottom: 25px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .blog-card {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .blog-title {
+        color: #2c3e50;
+        margin: 0 0 10px 0;
+        font-size: 1.4rem;
+      }
+
+      .blog-excerpt {
+        color: #34495e;
+        line-height: 1.6;
+      }
+
+      .read-more {
+        display: inline-block;
+        color: #009FA8;
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.3s;
+      }
+
+      .read-more:hover {
+        color: #009FA8;
+        text-decoration: underline;
+      }
+    }
+
+    .blog-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+    }
+  }
+}
+</style>