From c9fee634584e1513a7ca1917a16a64a1808c7501 Mon Sep 17 00:00:00 2001
From: PeterAlbus <wuhongdb@163.com>
Date: Tue, 29 Mar 2022 15:16:43 +0800
Subject: [PATCH] fix some bug

---
 src/components/Comment.vue | 166 +++++++++++++++++++-----
 src/views/About.vue        | 259 ++++++++++++++++++++++++++++++-------
 src/views/Blog.vue         |   8 +-
 src/views/EditBlog.vue     |   2 +-
 4 files changed, 346 insertions(+), 89 deletions(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 1057734..af00078 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -9,7 +9,7 @@
             type="textarea"
             placeholder="请友善交流，文明用语"
         />
-        <div>
+        <div style="display: flex;flex-direction: row;justify-content: right;align-items: center">
           <el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
           <el-button
               size="small" @click="addComment"
@@ -17,26 +17,47 @@
               type="primary" color="#63a35c">发布</el-button>
         </div>
       </div>
-      <el-scrollbar max-height="20vh">
-        <div v-for="item in comments" class="main-comment">
+      <el-scrollbar max-height="20vh" ref="scrollbarRef">
+        <div v-for="item in currentPageComments" class="main-comment">
           <div class="comment-user">
             <el-avatar :src="item.userAvatar" :size="30"></el-avatar>
-            <span style="padding: 0 10px 0 10px;display: flex;align-items: center">{{item.userUsername}}<el-tag :type="identityType(item.userIdentity)" effect="dark" size="small">{{ userIdentity(item.userIdentity) }}</el-tag></span>
+            <span style="padding: 0 10px 0 10px;display: flex;align-items: center">{{item.userUsername}}</span>
+            <el-tag :type="identityType(item.userIdentity)" effect="dark" size="small">{{ userIdentity(item.userIdentity) }}</el-tag>
           </div>
           <div style="padding: 10px 10px 10px 40px" class="comment-box">
             <div style="width: 100%">{{item.commentContent}}</div>
           </div>
           <div class="comment-buttons">
-            <el-icon class="comment-button" @click="openComment(item,item)"><chat-line-square /></el-icon>
+            <div class="comment-button">{{item.gmtCreate}}</div>
+            <div class="comment-button">{{item.index+1}}楼</div>
+            <div class="comment-button" @click="openComment(item,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
+            <div class="comment-button" @click="deleteComment(item)" v-if="userStore.userIdentity<=1||userStore.userId===item.commentUserId">
+              <el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
+            </div>
           </div>
-          <div class="side-comment" v-if="item.hasComment">
-            <div v-for="i in item.comments" class="comment-box">
-              <div style="width: 100%"><span style="font-weight: bold;color: #56AD93">{{ i.userUsername }}</span> {{i.commentContent}}</div>
-              <div class="comment-buttons">
-                <el-icon class="comment-button" @click="openComment(i,item)"><chat-line-square /></el-icon>
+          <el-scrollbar max-height="130px">
+            <div class="side-comment" v-if="item.hasComment">
+              <div v-for="i in item.comments" class="comment-box">
+                <div style="width: 100%"><span style="font-weight: bold;color: #56AD93">{{ i.userUsername }}</span> {{i.commentContent}}</div>
+                <div class="comment-buttons">
+                  <div class="comment-button" @click="openComment(i,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
+                  <div class="comment-button" @click="deleteComment(i)" v-if="userStore.userIdentity<=1||userStore.userId===i.commentUserId">
+                    <el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+          </el-scrollbar>
+          <el-divider></el-divider>
+        </div>
+        <div style="display: flex;justify-content: center">
+          <el-pagination layout="prev, pager, next"
+                         small hide-on-single-page
+                         v-model:current-page="currentPage"
+                         :page-size="3"
+                         @current-change="toTop"
+                         :total="comments.length">
+          </el-pagination>
         </div>
       </el-scrollbar>
     </div>
@@ -52,7 +73,7 @@
         type="textarea"
         placeholder="请友善交流，文明用语"
     />
-    <div>
+    <div style="display: flex;flex-direction: row;justify-content: right;align-items: center">
       <el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
       <el-button
           size="small" @click="showFloatComment=false"
@@ -67,28 +88,35 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, reactive, ref, watch} from "vue";
+import {computed, onMounted, PropType, reactive, ref, watch} from "vue";
 import axios from "axios";
 import {Comment,ChatLineSquare,Close} from "@element-plus/icons-vue"
 import qs from "qs";
 import {useUserStore} from "@/store/user";
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
+import type { ElScrollbar } from 'element-plus'
+import {useRoute} from "vue-router";
+import router from "@/router";
+const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
+
+const toTop=()=>{
+  scrollbarRef.value!.setScrollTop(0)
+}
 
 const userStore = useUserStore()
+const route=useRoute()
 const showFloatComment = ref(false)
 const hideMyself = ref(false)
 const commentUsername= ref('')
+const currentPage=ref(1)
 
 const props = defineProps({
-  blogId: {
-    default() {
-      return ''
-    },
-  }
+  blogId: {}
 });
 
 let comments=ref([
   {
+    index: 0,
     commentId:"1",
     commentTarget:1,
     commentTargetId:"1505910717547618306",
@@ -97,22 +125,30 @@ let comments=ref([
     userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
     userIdentity:-1,
     commentContent:"数据加载中",
-    gmtCreate:null,
-    gmtModified:null,
+    gmtCreate:'',
+    gmtModified:'',
     hasComment:false,
     comments:[{
       commentUserId:"-1",
       commentContent:"",
       userUsername:"匿名",
       userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-      userIdentity:-1
+      userIdentity:-1,
+      gmtCreate:''
     }]
   }
 ])
 
-const newComment=reactive({
+interface Comment {
+  commentTarget:number
+  commentTargetId:any
+  commentUserId:string
+  commentContent:string
+}
+
+const newComment=reactive<Comment>({
   commentTarget:1,
-  commentTargetId:"",
+  commentTargetId:route.query.id,
   commentUserId:"-1",
   commentContent:"",
 })
@@ -131,11 +167,15 @@ const openComment=(comment:any,bigComment:any)=>{
 }
 
 const getComments=()=>{
+  if(!props.blogId) return
   axios.get("/comment/getCommentByBlogId?blogId="+props.blogId)
   .then((res)=>{
     comments.value=res.data
+    let count=0
     for(let comment of comments.value)
     {
+      comment.index=count
+      count++
       if(comment.commentUserId!=='-1')
       {
         axios.get("/user/getUserById?userId="+comment.commentUserId)
@@ -174,6 +214,7 @@ const getComments=()=>{
             }
           })
     }
+    comments.value.reverse()
   })
 }
 
@@ -189,7 +230,19 @@ const addComment=()=>{
   .then((res)=>{
     if(res.data=="notLogin")
     {
-      ElMessage.error("没有登录不可评论！")
+      ElMessageBox.confirm(
+          '没有登录账号无法进行评论',
+          '信息',
+          {
+            confirmButtonText: '前往注册/登录',
+            cancelButtonText: '取消',
+            type: 'info',
+          }
+      )
+          .then(() => {
+            router.push('/login')
+          })
+          .catch(() => {})
     }
     else if(res.data=="fail")
     {
@@ -216,7 +269,21 @@ const addCommentToComment=()=>{
       .then((res)=>{
         if(res.data=="notLogin")
         {
-          ElMessage.error("没有登录不可评论！")
+          ElMessageBox.confirm(
+              '没有登录账号无法进行评论',
+              '信息',
+              {
+                confirmButtonText: '前往注册/登录',
+                cancelButtonText: '取消',
+                type: 'info',
+              }
+          )
+              .then(() => {
+                router.push('/login')
+              })
+              .catch(() => {
+                newCommentToComment.commentContent=""
+              })
         }
         else if(res.data=="fail")
         {
@@ -232,6 +299,33 @@ const addCommentToComment=()=>{
       })
 }
 
+const deleteComment=(comment:any)=>{
+  ElMessageBox.confirm(
+      '确认要删除本条评论吗？删除后无法恢复！',
+      '警告',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+        axios.post('/comment/deleteComment',qs.stringify(comment))
+        .then((res)=>{
+          if(res.data=="noPermission")
+          {
+            ElMessage.error("你没有权限进行此操作")
+          }
+          else
+          {
+            ElMessage.success("删除成功")
+            getComments()
+          }
+        })
+      })
+      .catch(() => {})
+}
+
 const identityType = (userIdentity:any)=>{
   if(userIdentity==0)
   {
@@ -270,6 +364,12 @@ const userIdentity = (userIdentity:any)=>{
   }
 }
 
+const currentPageComments=computed(
+    function (){
+      return comments.value.slice((currentPage.value-1)*3,currentPage.value*3)
+    }
+)
+
 watch(() => props.blogId,
     () => {
       getComments()
@@ -282,18 +382,18 @@ onMounted(()=>{
 
 <style scoped>
 .main-comment{
-  background-color: #F7F7F7;
+  background-color: #ffffff;
   margin: 5px;
-  padding: 5px;
-  border-radius: 5px;
   text-align: left;
 }
 
 .side-comment{
-  background-color: #E3E3E3;
+  background-color: #f3f3f3;
   margin: 5px 5px 5px 40px ;
-  padding: 5px;
+  padding: 10px;
   text-align: left;
+  border-radius: 5px;
+
 }
 
 .comment-user{
@@ -319,8 +419,10 @@ onMounted(()=>{
 }
 
 .comment-button{
-  color: black;
+  color: gray;
   cursor: pointer;
+  font-size: small;
+  padding: 0 10px 0 10px;
 }
 
 .comment-button:hover{
diff --git a/src/views/About.vue b/src/views/About.vue
index db942b3..d4abf64 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -2,71 +2,167 @@
   <div class="banner">
     <div class="banner-container">
       <div>
-        <h1>个人介绍</h1>
+        <h1>博客详情</h1>
       </div>
     </div>
   </div>
   <div class="main-container">
     <el-row>
       <el-col :lg="{span:11,offset:3}" :sm="15">
-        <div class="module">
-          <div class="blog-header">
-            <h1>个人简介</h1>
-            <p><i class="fa fa-user"></i> PeterAlbus</p>
-          </div>
-          <div class="blog-content">
-            <v-md-editor v-model="blogContent" mode="preview"></v-md-editor>
-          </div>
+        <div class="blog-header">
+          <h1 style="padding: 8px 20px 2px;">{{blog.blogTitle}}</h1>
+          <p style="padding: 0 5px 5px 5px"><i class="fa fa-user"></i> {{blog.blogAuthor}}&emsp;<i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
+        </div>
+        <div class="blog-content">
+          <v-md-preview :text="blog.blogContent" ref="mdRef"></v-md-preview>
         </div>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
         <PersonalInfo></PersonalInfo>
-        <FriendLinks></FriendLinks>
+        <div class="sticky-box">
+          <div class="module anchors" :class="{'hide-small-screen':hideCatalogue}" v-if="titleList.length!==0">
+            <h2 class="title"><el-icon style="vertical-align: -10%"><notebook /></el-icon> 目录</h2>
+            <div class="content" style="padding: 10px">
+              <el-scrollbar max-height="30vh">
+                <div
+                    v-for="anchor in titleList"
+                    :style="{ padding: `2px 20px 2px ${anchor.indent * 20 + 20}px` }"
+                    class="anchor"
+                    @click="handleAnchorClick(anchor)"
+                >
+                  <a style="cursor: pointer"><el-icon class="arrow-icon" style="vertical-align: -15%"><arrow-right /></el-icon> {{ anchor.title }}</a>
+                </div>
+              </el-scrollbar>
+            </div>
+          </div>
+          <Comment :blogId="blog.blogId"></Comment>
+          <div class="module">
+            <h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
+            <div class="content paragraph">
+              <Share
+                  url="https://www.peteralbus.com/%23/about"
+                  :title="blog.blogTitle"
+                  source="PeterAlbus的博客"
+                  :description="blog.blogDescription"
+                  :image="blog.blogImg"
+                  :twitter="true"
+                  :google="true"
+              ></Share>
+            </div>
+          </div>
+        </div>
       </el-col>
     </el-row>
   </div>
+  <div class="fixed-buttons hide-big-screen">
+    <el-button type="success" :icon="Notebook" circle @click="hideCatalogue=!hideCatalogue" v-if="titleList.length!==0"/>
+  </div>
 </template>
 
-<script>
-import {Link} from "@element-plus/icons-vue";
-import FriendLinks from "@/components/FriendLinks.vue"
-import PersonalInfo from "@/components/PersonalInfo.vue"
-export default {
-  components:{LinkIcon:Link,PersonalInfo,FriendLinks},
-  name: "About",
-  data(){
-    return{
-      blogContent:'欢迎访问我的博客！我的网名是PeterAlbus，是一名计算机专业的普通大学生。\n' +
-          '\n' +
-          '<br>'+
-          '我对于计算机相关内容都比较感兴趣。小站初建成，还十分简陋，会一步步添加新的功能。\n' +
-          '\n' +
-          '<br>'+
-          '欢迎通过电子邮箱:wuhongdb@163.com或 QQ:2997592724与我联系。',
-      friendLinkList:[
-        {
-          linkId:1,
-          linkName:'loading',
-          linkUrl:'#'
-        }
-      ]
-    }
-  },
-  created() {
-    this.getFriendLinkList()
-  },
-  methods:{
-    getFriendLinkList: function (){
-      let that=this;
-      that.$axios.get('friendLink/getFriendLinkList')
-          .then(res=>{
-            that.friendLinkList=res.data;
-          })
-    }
+<script setup lang="ts">
+import {onMounted, ref ,nextTick} from "vue";
+import {useRoute} from "vue-router";
+import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
+import axios from "axios";
+import PersonalInfo from '@/components/PersonalInfo.vue'
+import Comment from '@/components/Comment.vue'
+import type {vMdEditor} from "@kangc/v-md-editor"
+
+
+const route=useRoute()
+let mdRef=ref<InstanceType<typeof vMdEditor>>()
+let titleList:any=ref([])
+
+let hideCatalogue=ref(true)
+
+let blog=ref({
+  blogId:'1508671319567269890',
+  blogTitle:'稍等，数据正在请求中',
+  blogImg:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
+  blogType:1,
+  blogDescription:'这里显示的是默认数据',
+  blogAuthor:'PeterAlbus',
+  blogContent:'# 提示\n' +
+      '如果很长时间都依旧显示本文字，检查你的互联网是否突然中断，或联系PeterAlbus，他可能忘记开服务器后端了',
+  blogTime:'2021-7-19',
+  blogLike:18,
+  blogViews:200,
+  isTop:1
+})
+
+const getBlog=()=>{
+  if(blog.value.blogId!==undefined)
+  {
+    axios.get('queryById?id='+blog.value.blogId)
+        .then(res=>{
+          blog.value=res.data;
+          blog.value.blogViews+=1;
+          axios.get('/visitBlog?blogId='+blog.value.blogId+"&ipAddress="+localStorage.getItem('ipAddress'));
+          document.title = blog.value.blogTitle+'——PeterAlbus的博客'
+          let meta:any=document.querySelector('meta[name="description"]')
+          if(!meta)
+          {
+            meta.setAttribute('content',blog.value.blogDescription)
+          }
+          nextTick(getTitles)
+        })
+  }
+}
+
+const getTitles=()=>{
+  const anchors=mdRef.value?.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
+  const titles = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
+  if (!titles.length) {
+    titleList.value = [];
+    return;
   }
+
+  const hTags = Array.from(new Set(titles.map((title:any) => title.tagName))).sort();
+
+  titleList.value = titles.map((el:any) => ({
+    title: el.innerText,
+    lineIndex: el.getAttribute('data-v-md-line'),
+    indent: hTags.indexOf(el.tagName),
+  }));
+}
+
+const handleAnchorClick=(anchor:any)=>{
+  const { lineIndex } = anchor;
+
+  const heading = mdRef.value?.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
+
+  if (heading) {
+    mdRef.value?.scrollToTarget({
+      target: heading,
+      scrollContainer: window,
+      top: 60,
+    });
+  }
+}
+
+let friendLinkList=ref([
+  {
+    linkId:1,
+    linkName:'loading',
+    linkUrl:'#'
+  }
+])
+
+const getFriendLinkList=function () {
+  axios.get('friendLink/getFriendLinkList')
+      .then(res => {
+        friendLinkList.value = res.data;
+      })
 }
+
+onMounted(()=>{
+  getBlog()
+  getFriendLinkList()
+})
 </script>
 
+
+
 <style scoped>
 .banner {
   position: relative;
@@ -89,16 +185,81 @@ export default {
 
 .blog-content{
   text-align: left;
+  word-wrap:break-word;
+  width: 90%;
+  margin: 0 auto;
 }
 
 .blog-header{
-  margin-bottom: 1px;
-  padding: 8px 20px 12px;
   background-color: #f7f7f7;
+  width: 90%;
+  margin: 0 auto;
 }
 
 .blog-header p{
   font-size: 14px;
-  color: #4B6186;
+  color: #245440;
+}
+
+.anchor{
+  text-align: left;
+  transition: transform 0.3s ease .1s;
+}
+
+.anchors a:hover{
+  color: #63a35c;
+}
+
+.anchor:hover{
+  transform: translateX(+5px);
+  background-color: #f1f1f1;
+}
+
+.fixed-buttons{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  position: fixed;
+  right: 10px;
+  bottom: 80px;
+  z-index: 101;
+  height: 200px;
+  width: 32px;
+}
+
+@media screen and (max-width: 767px){
+  .anchors{
+    position: fixed;
+    bottom: 80px;
+    padding: 0;
+    right: 60px;
+    width: 70%;
+    max-width: 300px;
+    z-index: 102;
+    transform-origin: right bottom;
+    transition-property:opacity,transform;
+    transition-duration:0.3s;
+    transition-timing-function:ease;
+  }
+
+  .anchors .title{
+    border-radius: 5px 5px 0 0;
+  }
+
+  .anchors .content{
+    border-radius: 0 0 5px 5px;
+  }
+
+  .anchors {
+    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
+    border-radius: 5px;
+  }
+
+
+  .anchors:hover{
+    box-shadow: 0 6px 16px 12px rgba(7,17,27,0.25);
+  }
+
 }
 </style>
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index 5055f8c..6cc054c 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -35,7 +35,7 @@
               </el-scrollbar>
             </div>
           </div>
-          <Comment :blogId="blogId"></Comment>
+          <Comment :blogId="blog.blogId"></Comment>
           <div class="module">
             <h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
             <div class="content paragraph">
@@ -90,8 +90,6 @@ let blog=ref({
   isTop:1
 })
 
-let blogId:string='-1'
-
 const getBlog=()=>{
   if(blog.value.blogId!==undefined)
   {
@@ -158,10 +156,6 @@ const getFriendLinkList=function () {
 }
 
 onMounted(()=>{
-  if(route.query.id!=null)
-  {
-    blogId=route.query.id.toString()
-  }
   getBlog()
   getFriendLinkList()
 })
diff --git a/src/views/EditBlog.vue b/src/views/EditBlog.vue
index cedb76f..63b8a96 100644
--- a/src/views/EditBlog.vue
+++ b/src/views/EditBlog.vue
@@ -197,7 +197,7 @@ const onSubmit= async (formEl: FormInstance | undefined) => {
               else
               {
                 ElMessage.success('发布成功');
-                router.push('/blog?id='+blog.value.blogId)
+                router.push('/')
               }
             })
       }