feat:增加查询博客相邻记录功能

src/apis/blog.ts

@@ -1,5 +1,5 @@
 import { cloudService } from './index'
-import { IBlog, IBlogCategory, IBlogComment, IBlogSearch, IBlogStats, IQueryBlog } from '@/types/blog'
+import { IBlog, IBlogAdjacent, IBlogCategory, IBlogComment, IBlogSearch, IBlogStats, IQueryBlog } from '@/types/blog'
 
 import qs from 'qs'
 import { IPageRecord } from '@/types'
@@ -52,6 +52,12 @@ export const queryLatestBlogApi = (): Promise<IBlog[]> =>
     method: 'get'
   })
 
+export const queryBlogAdjacentApi = (blogId: number): Promise<IBlogAdjacent[]> =>
+  cloudService({
+    url: `/blog-api/blog/${blogId}/adjacent`,
+    method: 'get'
+  })
+
 export const queryBlogCommentApi = (blogId: number): Promise<IBlogComment[]> =>
   cloudService({
     url: `/blog-api/blog/${blogId}/comment`,

src/components/Content/BlogDetail.vue

@@ -31,6 +31,42 @@
       <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
     </div>
 
+    <div class="blog-navigation">
+      <el-row :gutter="20">
+        <!-- 上一篇 -->
+        <el-col :span="12">
+          <div class="nav-item prev">
+            <el-icon><ArrowLeft /></el-icon>
+            <span class="label">上一篇：</span>
+            <router-link v-if="blogStore.blogAdjacentList[0].id !== 0"
+                         :to="`/overview/detail/${blogStore.blogAdjacentList[0].id}`"
+                         class="blog-navigation-title">
+              {{ blogStore.blogAdjacentList[0].title }}
+            </router-link>
+            <span v-else>
+              已经是第一篇了~
+            </span>
+          </div>
+        </el-col>
+
+        <!-- 下一篇 -->
+        <el-col :span="12">
+          <div class="nav-item next">
+            <el-icon><ArrowRight /></el-icon>
+            <router-link v-if="blogStore.blogAdjacentList[1].id !== 0"
+                         :to="`/overview/detail/${blogStore.blogAdjacentList[1].id}`"
+                         class="blog-navigation-title">
+              {{ blogStore.blogAdjacentList[1].title }}
+            </router-link>
+            <span v-else>
+              已经是最后一篇了~
+            </span>
+            <span class="label">下一篇：</span>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <blog-comment-edit :parent-id="0"/>
 
     <blog-comment />
@@ -38,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import BlogLabel from '@/components/Content/BlogLabel.vue'
 import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
 import BlogComment from '@/components/Comment/BlogComment.vue'
@@ -47,7 +84,7 @@ import { useBlogStore } from '@/store/blog.ts'
 import { useAppStore } from '@/store/app'
 import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
 import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 
 const blogStore = useBlogStore()
 const appStore = useAppStore()
@@ -57,11 +94,61 @@ const currentUrl = new URL(window.location.href)
 
 onMounted(async () => {
   const blogId = route.params.id as number
+  await refreshBlog(blogId)
+})
+
+watch(() => route.params.id, async (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    await refreshBlog(newValue as number)
+  }
+})
+
+const refreshBlog = async (blogId: number) => {
   blogStore.currentBlogId = blogId
   await blogStore.queryBlogById(blogId)
-})
+  await blogStore.queryBlogAdjacent(blogId)
+}
 </script>
 
 <style scoped lang="scss">
 @use "@/styles/blog/blog.detail.module.scss";
+
+.blog-navigation {
+  width: 100%;
+  background-color: var(--color-copyright-bg);
+
+  .nav-item {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .label {
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+  }
+
+  .blog-navigation-title {
+    color: var(--el-text-color-primary);
+    text-decoration: none;
+    transition: color 0.3s;
+    font-weight: 500;
+
+    &:hover {
+      color: var(--el-color-primary);
+      text-decoration: underline;
+    }
+  }
+
+  .prev {
+    flex-direction: row;
+    text-align: left;
+  }
+
+  .next {
+    flex-direction: row-reverse;
+    text-align: right;
+  }
+}
 </style>

src/layout/components/Sidebar/BlogSummary.vue

@@ -45,7 +45,7 @@ const blogSummaryInfo = reactive({
  * 监听路由变化 如果当前是查看博客 则需要显示博客目录
  */
 watch(() => router.currentRoute.value.path, (path) => {
-  blogSummaryInfo.isBlogDetail = path.includes('/blog/detail')
+  blogSummaryInfo.isBlogDetail = path.includes('/detail')
   if (blogSummaryInfo.isBlogDetail) {
     blogSummaryInfo.activePanelName = 'Catalog'
   }

src/store/blog.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import {
-  IBlog, IBlogCategory, IBlogComment,
+  IBlog, IBlogAdjacent, IBlogCategory, IBlogComment,
   IBlogLatest, IBlogNestedComment, IBlogSearch, IBlogStats, INewBlog, IQueryBlog
 } from '@/types/blog'
 import {
-  addBlogCommentApi,
+  addBlogCommentApi, queryBlogAdjacentApi,
   queryBlogApi, queryBlogByConditionApi, queryBlogByIdApi,
   queryBlogCategoryApi, queryBlogCommentApi, queryBlogStatsApi, queryLatestBlogApi, searchBlogApi
 } from '@/apis/blog.ts'
@@ -50,6 +50,7 @@ export const useBlogStore = defineStore('blog', {
     blogCategoryList: [] as IBlogCategory[],
     blogStats: {} as IBlogStats,
     latestBlogList: [] as IBlogLatest[],
+    blogAdjacentList: [{ id: 0, title: '' }, { id: 0, title: '' }] as IBlogAdjacent[],
     queryBlog: {} as IQueryBlog,
     searchBlogKeyword: '',
     isSearching: false,
@@ -84,6 +85,9 @@ export const useBlogStore = defineStore('blog', {
       await this.queryBlogComment(this.currentBlogId)
       this.blogNestedCommentList = flattenToTwoLevel(this.blogCommentList)
     },
+    async queryBlogAdjacent(blogId: number) {
+      this.blogAdjacentList = await queryBlogAdjacentApi(blogId)
+    },
     async queryBlogComment(blogId: number) {
       this.blogCommentList = await queryBlogCommentApi(blogId)
     },

src/styles/blog/blog.sidebar.module.scss

@@ -245,6 +245,11 @@ $sub-title-font-size: 1rem;
       width: 100%;
       overflow: auto;
 
+      .md-editor-catalog-active {
+        background-color: var(--color-copyright-bg);
+        font-weight: bold;
+      }
+
       span {
         word-break: break-all;
         white-space: normal;

src/styles/index.module.scss

@@ -49,6 +49,7 @@ span, input {
   --color-card-bg: #FFFFFF;
   --color-scroll-card-bg: #F8F9FA;
   --color-copyright-bg: #F8F8F8;
+  --color-navigation-bg: #F8F8F8;
   --color-border-bg: #F5F5F5;
   --color-text: #000000;
 }

src/types/blog.ts

@@ -45,6 +45,11 @@ export interface IBlogCategory {
   count: number;
 }
 
+export interface IBlogAdjacent {
+  id: number;
+  title: string;
+}
+
 export interface IBlogStats {
   blogCount: number;
   categoryCount: number;