feat:更新博客评论功能

src/apis/blog.ts

@@ -30,7 +30,7 @@ export const queryBlogByConditionApi = (query: IQueryBlog): Promise<IBlog[]> =>
 
 export const queryBlogByIdApi = (id: number): Promise<IBlog> =>
   cloudService({
-    url: `/blog-api/blog/content/${id}`,
+    url: `/blog-api/blog/${id}/content`,
     method: 'get'
   })
 
@@ -54,13 +54,13 @@ export const queryLatestBlogApi = (): Promise<IBlog[]> =>
 
 export const queryBlogCommentApi = (blogId: number): Promise<IBlogComment[]> =>
   cloudService({
-    url: `/blog-api/blog/comment/${blogId}`,
+    url: `/blog-api/blog/${blogId}/comment`,
     method: 'get'
   })
 
-export const addBlogCommentApi = (blogComment: IBlogComment): Promise<boolean> =>
+export const addBlogCommentApi = (blogId: number, blogComment: IBlogComment): Promise<boolean> =>
   cloudService({
-    url: '/blog-api/blog/comment',
+    url: `/blog-api/blog/${blogId}/comment`,
     method: 'put',
     data: blogComment
   })

src/components/Comment/BlogCommentEdit.vue

@@ -82,15 +82,14 @@ const onSelectEmoji = (emoji) => {
 
 const sendCommentClick = async () => {
   blogComment.value.parentId = props.parentId
-  blogComment.value.blogId = blogStore.currentBlogId
 
   if (!blogComment.value.name) {
     blogComment.value.name = 'Anonymous'
   }
 
-  await blogStore.addBlogComment(blogComment.value)
+  await blogStore.addBlogComment(blogStore.currentBlogId, blogComment.value)
   blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
-  blogStore.isShowBlogCommentEdit = false
+  blogStore.isShowCommentEdit = false
 }
 </script>
 

src/components/Comment/BlogCommentItem.vue

@@ -12,7 +12,7 @@
 
       <div class="sub-info">
         <span class="content">{{ props.comment.createTime }}</span>
-        <el-button v-if="!blogComment.isShowEdit"
+        <el-button v-if="!blogStore.isShowCommentEdit"
                    type="primary" text @click="replyClick">回复</el-button>
         <el-button v-else type="primary"
                    text @click="cancelClick">取消</el-button>
@@ -20,7 +20,7 @@
 
       <p>{{ props.comment.content }}</p>
 
-      <blog-comment-edit v-if="blogComment.isShowEdit"
+      <blog-comment-edit v-if="blogStore.isShowCommentEdit"
                          :parent-id="props.comment.id"/>
 
       <div class="reply-list">
@@ -49,7 +49,7 @@
 <script setup lang="ts">
 import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
 import 'vue3-emoji-picker/css'
-import { defineProps, PropType, reactive } from 'vue'
+import { defineProps, PropType } from 'vue'
 import { IBlogComment } from '@/types/blog'
 import { useBlogStore } from '@/store/blog.ts'
 import { UAParser } from 'ua-parser-js'
@@ -67,17 +67,13 @@ const props = defineProps({
   }
 })
 
-const blogComment = reactive({
-  isShowEdit: false
-})
-
 const replyClick = () => {
   blogStore.currentBlogComment = blogStore.getEmptyBlogComment()
-  blogComment.isShowEdit = true
+  blogStore.isShowCommentEdit = true
 }
 
 const cancelClick = () => {
-  blogComment.isShowEdit = false
+  blogStore.isShowCommentEdit = false
 }
 
 const getOsInfo = (userAgent: string) => {

src/store/blog.ts

@@ -66,7 +66,8 @@ export const useBlogStore = defineStore('blog', {
       pageSize: 10,
       totalSize: 1
     },
-    progressValue: '0%'
+    progressValue: '0%',
+    isShowCommentEdit: false
   }),
   actions: {
     async queryBlog() {
@@ -91,9 +92,9 @@ export const useBlogStore = defineStore('blog', {
       this.searchBlogList = await searchBlogApi(keyword)
       this.isSearching = false
     },
-    async addBlogComment(blogComment: IBlogComment) {
+    async addBlogComment(blogId: number, blogComment: IBlogComment) {
-      await addBlogCommentApi(blogComment)
+      await addBlogCommentApi(blogId, blogComment)
-      await this.queryBlogById(blogComment.blogId)
+      await this.queryBlogById(blogId)
     },
     async queryBlogCategory() {
       this.blogCategoryList = await queryBlogCategoryApi()
@@ -109,7 +110,6 @@ export const useBlogStore = defineStore('blog', {
         blogId: 0,
         content: '',
         createTime: '',
-        id: 0,
         ipAddress: '',
         isApproved: true,
         name: '',

src/styles/index.module.scss

@@ -79,7 +79,7 @@ span, input {
 
 @font-face {
   font-family: 'CustomFont';
-  src: url('@/assets/font/custom.ttf') format('truetype');
+  src: url('@/assets/font/custom.woff2') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

src/types/blog.ts

@@ -66,7 +66,7 @@ export interface IBlogVisit {
 }
 
 export interface IBlogComment {
-  id: number;
+  id?: number;
   blogId: number;
   name: string;
   website: string;