feat:更新博客评论模块

src/components/Blog/Comment/BlogComment.vue

@@ -13,16 +13,9 @@
 
 <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">

src/components/Blog/Comment/BlogCommentEdit.vue

@@ -2,13 +2,15 @@
   <div class="blog-comment-edit">
     <div class="comment-title">
       <el-input v-model="blogComment.name"
-                placeholder="请输入Github用户名"/>
+                :maxlength="10" show-word-limit
+                placeholder="请输入昵称"/>
       <el-input v-model="blogComment.website"
+                :maxlength="50" show-word-limit
                 placeholder="请输入个人博客网站"/>
     </div>
 
     <el-input v-model="blogComment.content"
-              placeholder="有什么想和我说的呢" maxlength="500"
+              placeholder="有什么想和我说的呢" :maxlength="500"
               :rows="7" show-word-limit type="textarea"
     />
 
@@ -28,6 +30,7 @@
 
       <el-button type="primary"
                  :disabled="blogComment.content.length === 0"
+                 @click="sendCommentClick"
                  class="send-button">发送</el-button>
     </div>
   </div>
@@ -36,24 +39,59 @@
 <script setup lang="ts">
 import EmojiPicker from 'vue3-emoji-picker'
 import 'vue3-emoji-picker/css'
+import { defineProps, ref, onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { IBlogComment } from '@/types/blog.ts'
 
-import { reactive, ref } from 'vue'
-
+const blogStore = useBlogStore()
 const emojiPopoverRef = ref()
 
-const blogComment = reactive({
+const props = defineProps({
+  parentId: {
+    required: true,
+    type: Number,
+    default: 0
+  }
+})
+
+const blogComment = ref<IBlogComment>({
+  id: 0,
+  blogId: 0,
   name: '',
   website: '',
-  content: ''
+  content: '',
+  ipAddress: '',
+  userAgent: '',
+  parentId: 0,
+  isApproved: true,
+  createTime: ''
+})
+
+onMounted(() => {
+  blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
 })
 
 const onSelectEmoji = (emoji) => {
-  if (blogComment.content.length <= 498) {
-    blogComment.content += emoji.i
+  if (blogComment.value.content.length <= 498) {
+    blogComment.value.content += emoji.i
   }
 
   emojiPopoverRef.value.hide()
 }
+
+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)
+  blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
+  blogStore.isShowBlogCommentEdit = false
+}
 </script>
 
 <style lang="scss">

src/components/Blog/Comment/BlogCommentItem.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="blog-comment-card">
-    <el-avatar :size="50" :src="`https://github.com/${props.comment.name}.png`" alt="未加载"/>
+    <el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${props.comment.name}`"
+               :size="50" 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>
+        <span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
+        <span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
       </div>
 
       <div class="sub-info">
@@ -19,17 +20,19 @@
 
       <p>{{ props.comment.content }}</p>
 
-      <blog-comment-edit v-if="blogComment.isShowEdit"/>
+      <blog-comment-edit v-if="blogComment.isShowEdit"
+                         :parent-id="props.comment.id"/>
 
       <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'" />
+          <el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${item.name}`"
+                     :size="50" alt="未加载"/>
 
           <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>
+              <span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
+              <span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
             </div>
 
             <div class="sub-info">
@@ -48,12 +51,18 @@ import BlogCommentEdit from '@/components/Blog/Comment/BlogCommentEdit.vue'
 import 'vue3-emoji-picker/css'
 import { defineProps, PropType, reactive } from 'vue'
 import { IBlogComment } from '@/types/blog'
+import { useBlogStore } from '@/store/blog.ts'
+import { UAParser } from 'ua-parser-js'
+
+const blogStore = useBlogStore()
 
 const props = defineProps({
   comment: {
+    required: true,
     type: Object as PropType<IBlogComment>
   },
   replyList: {
+    required: true,
     type: Object as PropType<IBlogComment[]>
   }
 })
@@ -63,12 +72,23 @@ const blogComment = reactive({
 })
 
 const replyClick = () => {
+  blogStore.currentBlogComment = blogStore.getEmptyBlogComment()
   blogComment.isShowEdit = true
 }
 
 const cancelClick = () => {
   blogComment.isShowEdit = false
 }
+
+const getOsInfo = (userAgent: string) => {
+  const uaParse = new UAParser(userAgent)
+  return `${uaParse.getOS().name} ${uaParse.getOS().version}`
+}
+
+const getBrowser = (userAgent: string) => {
+  const uaParse = new UAParser(userAgent)
+  return `${uaParse.getBrowser().name} ${uaParse.getBrowser().version}`
+}
 </script>
 
 <style lang="scss">

src/components/Blog/Content/BlogDetail.vue

@@ -29,7 +29,7 @@
       <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
     </div>
 
-    <blog-comment-edit />
+    <blog-comment-edit :parent-id="0"/>
 
     <blog-comment />
   </div>
@@ -44,15 +44,19 @@ import 'md-editor-v3/lib/style.css'
 import { useBlogStore } from '@/store/blog.ts'
 import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
 import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const blogStore = useBlogStore()
 const route = useRoute()
 
 const currentUrl = new URL(window.location.href)
 
+const blogComment = computed(() => blogStore.getEmptyBlogComment())
+
 onMounted(async () => {
-  await blogStore.queryBlogById(route.params.id as number)
+  const blogId = route.params.id as number
+  blogStore.currentBlogId = blogId
+  await blogStore.queryBlogById(blogId)
 })
 </script>