feat: 增加博客评论模块

src/components/Blog/Comment/BlogComment.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="blog-comment">
+    <div class="comment-total">
+      <span>共 {{ blogStore.blogNestedCommentList.length }} 条评论</span>
+    </div>
+
+    <div class="comment-list">
+      <blog-comment-item v-for="(item, index) in blogStore.blogNestedCommentList" :key="index"
+                         :comment="item.comment" :replyList="item.replies"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogCommentItem from '@/components/Blog/Comment/BlogCommentItem.vue'
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog'
+import { flattenToTwoLevel } from '@/utils/blog/blogUtil'
+
+const blogStore = useBlogStore()
+
+onMounted(() => {
+  blogStore.queryBlogComment(blogStore.currentBlogId)
+  blogStore.blogNestedCommentList = flattenToTwoLevel(blogStore.blogCommentList)
+})
+</script>
+
+<style lang="scss">
+.blog-comment {
+  width: 100%;
+  padding: 10px;
+
+  background-color: #FFFFFF;
+  border: 1px solid #EEEEEE;
+  border-radius: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

src/components/Blog/Comment/BlogCommentEdit.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="blog-comment-edit">
+    <div class="comment-title">
+      <el-input v-model="blogComment.name"
+                placeholder="请输入Github用户名"/>
+      <el-input v-model="blogComment.website"
+                placeholder="请输入个人博客网站"/>
+    </div>
+
+    <el-input v-model="blogComment.content"
+              placeholder="有什么想和我说的呢" maxlength="500"
+              :rows="7" show-word-limit type="textarea"
+    />
+
+    <div class="comment-button">
+      <el-popover ref="emojiPopoverRef" placement="top" :width="300" trigger="hover">
+        <template #default>
+          <div class="emoji-panel">
+            <EmojiPicker :native="true" @select="onSelectEmoji" />
+          </div>
+        </template>
+        <template #reference>
+          <el-button circle>
+            <i class="fa-regular fa-face-smile"></i>
+          </el-button>
+        </template>
+      </el-popover>
+
+      <el-button type="primary"
+                 :disabled="blogComment.content.length === 0"
+                 class="send-button">发送</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EmojiPicker from 'vue3-emoji-picker'
+import 'vue3-emoji-picker/css'
+
+import { reactive, ref } from 'vue'
+
+const emojiPopoverRef = ref()
+
+const blogComment = reactive({
+  name: '',
+  website: '',
+  content: ''
+})
+
+const onSelectEmoji = (emoji) => {
+  if (blogComment.content.length <= 498) {
+    blogComment.content += emoji.i
+  }
+
+  emojiPopoverRef.value.hide()
+}
+</script>
+
+<style lang="scss">
+.blog-comment-edit {
+  width: 100%;
+  padding: 10px;
+
+  background-color: #FFFFFF;
+  border: 1px solid #EEEEEE;
+  border-radius: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .comment-title {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .comment-button {
+    width: 100%;
+    display: flex;
+
+    .send-button {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/components/Blog/Comment/BlogCommentItem.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="blog-comment-card">
+    <el-avatar :size="50" :src="`https://github.com/${props.comment.name}.png`" alt="未加载"/>
+
+    <div class="blog-comment-content">
+      <div class="basic-info">
+        <span>{{ props.comment.name }}</span>
+        <span class="content">Chrome 137.0.0.0</span>
+        <span class="content">macOS 10.15.7</span>
+      </div>
+
+      <div class="sub-info">
+        <span class="content">{{ props.comment.createTime }}</span>
+        <el-button v-if="!blogComment.isShowEdit"
+                   type="primary" text @click="replyClick">回复</el-button>
+        <el-button v-else type="primary"
+                   text @click="cancelClick">取消</el-button>
+      </div>
+
+      <p>{{ props.comment.content }}</p>
+
+      <blog-comment-edit v-if="blogComment.isShowEdit"/>
+
+      <div class="reply-list">
+        <div class="blog-comment-card" v-for="(item, index) in props.replyList" :key="index">
+          <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+
+          <div class="blog-comment-content">
+            <div class="basic-info">
+              <span>{{ item.name }}</span>
+              <span class="content">Chrome 137.0.0.0</span>
+              <span class="content">macOS 10.15.7</span>
+            </div>
+
+            <div class="sub-info">
+              <span class="content">{{ item.createTime }}</span>
+            </div>
+            <p>{{ item.content }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogCommentEdit from '@/components/Blog/Comment/BlogCommentEdit.vue'
+import 'vue3-emoji-picker/css'
+import { defineProps, PropType, reactive } from 'vue'
+import { IBlogComment } from '@/types/blog'
+
+const props = defineProps({
+  comment: {
+    type: Object as PropType<IBlogComment>
+  },
+  replyList: {
+    type: Object as PropType<IBlogComment[]>
+  }
+})
+
+const blogComment = reactive({
+  isShowEdit: false
+})
+
+const replyClick = () => {
+  blogComment.isShowEdit = true
+}
+
+const cancelClick = () => {
+  blogComment.isShowEdit = false
+}
+</script>
+
+<style lang="scss">
+.blog-comment-card {
+  width: 100%;
+  padding: 10px;
+
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  gap: 5px;
+
+  .blog-comment-content {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .basic-info {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: small;
+    }
+
+    .sub-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .content {
+      font-size: small;
+      color: #666666;
+    }
+  }
+}
+</style>

src/components/Blog/Content/BlogDetail.vue

@@ -28,11 +28,17 @@
     <div class="blog-ending">
       <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
     </div>
+
+    <blog-comment-edit />
+
+    <blog-comment />
   </div>
 </template>
 
 <script setup lang="ts">
 import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
+import BlogCommentEdit from '@/components/Blog/Comment/BlogCommentEdit.vue'
+import BlogComment from '@/components/Blog/Comment/BlogComment.vue'
 import { MdPreview } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import { useBlogStore } from '@/store/blog.ts'

src/store/blog.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import {
-  IBlog, IBlogCategory,
-  IBlogLatest, IBlogStats, INewBlog, IQueryBlog
+  IBlog, IBlogCategory, IBlogComment,
+  IBlogLatest, IBlogNestedComment, IBlogStats, INewBlog, IQueryBlog
 } from '@/types/blog'
 import {
   addBlogApi, deleteBlogApi, queryAdminBlogApi, queryAdminBlogByIdApi, queryAdminBlogCategoryApi,
@@ -15,6 +15,8 @@ import { ImagePathEnum } from '@/types'
 export const useBlogStore = defineStore('blog', {
   state: () => ({
     blogList: [] as IBlog[],
+    blogCommentList: [] as IBlogComment[],
+    blogNestedCommentList: [] as IBlogNestedComment[],
     currentBlogId: 0,
     currentBlog: {
       id: 0,
@@ -79,6 +81,190 @@ export const useBlogStore = defineStore('blog', {
     async queryAdminBlogById(id: number) {
       this.currentBlog = await queryAdminBlogByIdApi(id)
     },
+    async queryBlogComment(blogId: number) {
+      this.blogCommentList = [
+        {
+          id: 1,
+          blogId,
+          name: 'Cxx0822',
+          website: 'https://zhangsan.com',
+          content: '这篇文章写得非常好，对我理解前端框架很有帮助，期待更多类似内容！',
+          ipAddress: '114.114.114.114',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-15 08:30:22'
+        },
+        {
+          id: 2,
+          blogId,
+          name: '李四',
+          website: '',
+          content: '请问文中提到的性能优化方案在实际项目中效果如何？有没有遇到什么坑？',
+          ipAddress: '127.0.0.1',
+          userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13.2; rv:109.0) Gecko/20100101 Firefox/114.0',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-15 14:15:47'
+        },
+        {
+          id: 3,
+          blogId,
+          name: '作者',
+          website: 'https://blog.example.com',
+          content: '回复 @李四：实际应用中效果显著，但需要注意兼容性问题，特别是旧版本浏览器的支持情况。',
+          ipAddress: '192.168.1.100',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0',
+          parentId: 2,
+          isApproved: true,
+          createTime: '2025-06-16 09:22:10'
+        },
+        {
+          id: 4,
+          blogId,
+          name: '王五',
+          website: 'https://wangwu.dev',
+          content: '能否分享一下文章中提到的代码示例？想学习具体实现方式。',
+          ipAddress: '203.0.113.5',
+          userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_4 like Mac OS X) AppleWebKit/605.1.15',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-16 16:38:55'
+        },
+        {
+          id: 5,
+          blogId,
+          name: '赵六',
+          website: '',
+          content: '前端性能优化确实是个重要课题，我在项目中也遇到过类似问题，感谢分享经验！',
+          ipAddress: '103.235.46.133',
+          userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-17 10:12:30'
+        },
+        {
+          id: 6,
+          blogId,
+          name: '林七',
+          website: 'https://linqi.com',
+          content: '这个框架的状态管理方案看起来很新颖，和Redux相比有什么优势吗？',
+          ipAddress: '172.16.31.10',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-10 15:45:18'
+        },
+        {
+          id: 7,
+          blogId,
+          name: '作者',
+          website: 'https://blog.example.com',
+          content: '回复 @林七：最大的优势是更简洁的API和更好的TypeScript支持，尤其适合小型到中型项目。',
+          ipAddress: '192.168.1.100',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0',
+          parentId: 6,
+          isApproved: true,
+          createTime: '2025-06-11 09:10:22'
+        },
+        {
+          id: 8,
+          blogId,
+          name: '孙八',
+          website: 'https://sunba.dev',
+          content: '已经按照文章中的步骤实践了，效果不错！不过在SSR场景下遇到了一些问题...',
+          ipAddress: '192.168.3.11',
+          userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13.2; rv:109.0) Gecko/20100101 Firefox/114.0',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-12 11:22:35'
+        },
+        {
+          id: 9,
+          blogId,
+          name: '周九',
+          website: '',
+          content: '请问文章中的示例代码是否支持IE11？我们项目还在使用旧浏览器。',
+          ipAddress: '172.16.58.3',
+          userAgent: 'Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko',
+          parentId: 0,
+          isApproved: false, // 未审核
+          createTime: '2025-06-08 08:08:08'
+        },
+        {
+          id: 10,
+          blogId,
+          name: '吴十',
+          website: 'https://wushi.net',
+          content: '前端工程化真的很重要，之前项目因为没有规范导致维护困难，感谢分享最佳实践！',
+          ipAddress: '192.168.127.12',
+          userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-09 14:30:45'
+        },
+        {
+          id: 11,
+          blogId,
+          name: '郑十一',
+          website: '',
+          content: '回复 @周九：需要添加polyfill，具体可以参考这篇文档：https://example.com/ie-support',
+          ipAddress: '172.16.17.32',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          parentId: 9,
+          isApproved: false, // 未审核
+          createTime: '2025-06-08 09:15:22'
+        },
+        {
+          id: 12,
+          blogId,
+          name: '钱十二',
+          website: 'https://qianshier.com',
+          content: '这个UI组件库的设计风格我很喜欢，请问有移动端适配方案吗？',
+          ipAddress: '10.10.10.10',
+          userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_4 like Mac OS X) AppleWebKit/605.1.15',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-05 16:20:10'
+        },
+        {
+          id: 13,
+          blogId,
+          name: '作者',
+          website: 'https://blog.example.com',
+          content: '回复 @钱十二：有的，组件库内置了响应式设计，支持移动端自适应布局。',
+          ipAddress: '192.168.1.100',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0',
+          parentId: 12,
+          isApproved: true,
+          createTime: '2025-06-06 10:05:33'
+        },
+        {
+          id: 14,
+          blogId,
+          name: '冯十三',
+          website: 'https://fengshisan.dev',
+          content: '文档很详细，但是在Tree Shaking时遇到了问题，请问如何配置？',
+          ipAddress: '192.168.3.11',
+          userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13.2; rv:109.0) Gecko/20100101 Firefox/114.0',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-07 09:45:15'
+        },
+        {
+          id: 15,
+          blogId,
+          name: '陈十四',
+          website: '',
+          content: '性能测试部分的数据很有参考价值，能否分享一下测试环境和工具？',
+          ipAddress: '172.16.31.10',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+          parentId: 0,
+          isApproved: true,
+          createTime: '2025-06-04 14:12:28'
+        }
+      ]
+    },
     async queryBlogCategory() {
       this.blogCategoryList = await queryBlogCategoryApi()
     },

src/styles/blog/blog.detail.module.scss

@@ -46,6 +46,8 @@
   background-color: #F8F8F8;
   padding: 1vh 1vw;
   border-left: 3px solid #FD2C17;
+  font-size:  blog.$small-font-size;
+  color: #666666;
 
   display: flex;
   flex-direction: column;

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

@@ -176,7 +176,11 @@ $sub-title-font-size: 1rem;
           align-items: center;
           gap: 5px;
           color: blog.$normal-text-color;
-          font-size: blog.$normal-font-size;
+          font-size: blog.$small-font-size;
+
+          .name {
+            font-size: blog.$small-font-size;
+          }
         }
 
         .item:hover {
@@ -245,8 +249,8 @@ $sub-title-font-size: 1rem;
       span {
         word-break: break-all;
         white-space: normal;
-        font-size: blog.$normal-font-size;
-        color: #000000;
+        font-size: blog.$smaller-font-size;
+        color: #666666;
       }
     }
 

src/styles/blog/blog.variable.module.scss

@@ -17,6 +17,7 @@ $blog-title-font-size: 1.6rem;
 $large-font-size: 1.3rem;
 $normal-font-size: 1rem;
 $small-font-size: 0.9rem;
+$smaller-font-size: 0.8rem;
 
 $border-color: #EEEEEE;
 $border-radius: 15px;

src/types/blog.ts

@@ -64,3 +64,21 @@ export interface IBlogVisit {
   title: string;
   visitTime: string;
 }
+
+export interface IBlogComment {
+  id: number;
+  blogId: number;
+  name: string;
+  website: string;
+  content: string;
+  ipAddress: string;
+  userAgent: string;
+  parentId: number;
+  isApproved: boolean;
+  createTime: string;
+}
+
+export interface IBlogNestedComment {
+  comment: IBlogComment;
+  replies: IBlogComment[];
+}

src/utils/blog/blogUtil.ts

@@ -1,5 +1,5 @@
 import { ElMessage } from 'element-plus'
-import { IBasicBlog, IBlog } from '@/types/blog.ts'
+import { IBasicBlog, IBlog, IBlogComment, IBlogNestedComment } from '@/types/blog.ts'
 import dayjs from 'dayjs'
 
 /**
@@ -172,3 +172,24 @@ export const getBasicBlog = (blog: IBlog): IBasicBlog => {
   }
 }
 
+// 扁平化数据转两层嵌套结构
+export function flattenToTwoLevel(comments: IBlogComment[]): IBlogNestedComment[] {
+  // 创建评论映射表，快速查找评论
+  const commentMap = new Map<number, IBlogComment>()
+  comments.forEach((comment) => commentMap.set(comment.id, comment))
+
+  // 结果数组
+  const result: IBlogNestedComment[] = []
+
+  // 遍历所有评论，构建两层结构
+  comments.forEach((comment) => {
+    if (comment.parentId === 0) {
+      // 顶层评论
+      const replies = comments.filter((reply) => reply.parentId === comment.id)
+      result.push({ comment, replies })
+    }
+  })
+
+  return result
+}
+