feat:完成底部

Yi.BBS.Vue3/src/components/BottomInfo.vue

@@ -1,25 +1,36 @@
 <template>
-<div class="body-div">
-<a>站长：橙子</a>
-<a>YiFramework意框架</a>
-<a>关于本站&nbsp&nbsp&nbsp&nbsp建议反馈</a>
-<a>2023 <span style="color: #40a9ff ;">意社区</span> | 赣ICP备xxxxxx号-4</a>
+<div class="botton-div">
+<a><el-icon><UserFilled /></el-icon>站长：橙子</a>
+<a><el-icon><Search /></el-icon>YiFramework意框架</a>
+<a><el-icon><View /></el-icon>关于本站</a>
+<a><el-icon><Message /></el-icon>建议反馈</a>
+<p></p>
+<a><el-icon><Position /></el-icon>2023 <span style="color: #40a9ff ;">意社区</span> | 赣ICP备xxxxxx号-4</a>
 </div>
 </template>
 <script setup>
 </script>
 <style scoped>
+.el-icon
+{margin: 0 0.2rem;}
 a{
-    display: block;
+    margin-right: 2rem;
+    line-height: 1.8rem;
 }
 a:hover {
     color: #40a9ff;
     cursor:pointer;
 }
-.body-div
+.botton-div
 {
     background: transparent;
     color: rgba(0,0,0,.45);
     font-size: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    width: auto;
+    justify-content: center;
+    margin: 1rem auto;
 }
 </style>

Yi.BBS.Vue3/src/components/CommentInfo.vue

@@ -32,21 +32,23 @@
     <span class="pointer"><el-icon>
         <Pointer />
       </el-icon> 4</span>
-    <el-button @click="replay(item.createUser.nick, item.id, item.id)" size="large" text>回复</el-button>
+    <el-button type="primary" @click="replay(item.createUser.nick, item.id, item.id)" size="large" text>回复</el-button>
+    <el-button  type="danger" @click="delComment(item.id)" size="large" text>删除</el-button>
     <div v-show="replayId == item.id" class="input-reply">
       <el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
       <div class="btn-reply">
         <el-button @click="addComment" type="primary">回复</el-button>
+        
       </div>
     </div>
 
 
     <!-- 开始子评论主体 -->
     <div v-for="children in item.children" :key="children.id" class="comment2">
-
+     
       <div style="display: flex ;">
         <AvatarInfo :userInfo="children.createUser" />
-        <span style="align-self: center;"> 回复@{{ children.commentedUser.nick }}</span>
+        <span style="align-self: center;color:#606266;"> 回复@{{ children.commentedUser.nick }}</span>
       </div>
       <div class="content">
         {{ children.content }}
@@ -55,8 +57,8 @@
       <span class="pointer"> <el-icon>
           <Pointer />
         </el-icon>0</span>
-      <el-button @click="replay(children.createUser.nick, children.id, item.id)" size="large" text>回复</el-button>
-    
+      <el-button  type="primary" @click="replay(children.createUser.nick, children.id, item.id)" size="large" text>回复</el-button>
+      <el-button  type="danger" @click="delComment(children.id)" size="large" text>删除</el-button>
       <div v-show="replayId == children.id" class="input-reply">
       <el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
       <div class="btn-reply">
@@ -74,7 +76,7 @@
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { getListByDiscussId, add } from "@/apis/commentApi.js";
+import { getListByDiscussId, add ,del} from "@/apis/commentApi.js";
 import AvatarInfo from './AvatarInfo.vue';
 //数据定义
 const route = useRoute();
@@ -129,6 +131,23 @@ const addComment = async () => {
     type: 'success',
   })
 };
+const delComment=async(ids)=>{
+  ElMessageBox.confirm(`确定是否删除编号[${ids}]的评论吗?`, "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+   
+await del(ids);
+await loadComment();
+ElMessage({
+    message: '评论已删除!',
+    type: 'success',
+  })
+  });
+
+
+}
 const replay = async (parentUserName, parentId, rootId) => {
   replayId.value = parentId;
   form.parentId = parentId;

Yi.BBS.Vue3/src/components/DisscussCard.vue

@@ -19,8 +19,9 @@
                 </div>
 
 
-                <el-button icon="Pointer" text @click="agree">
-                    点赞:{{ agreeNum??0 }}</el-button>
+                <el-button  text @click="agree" >
+                    <el-icon v-if="isAgree" color="#409EFF"><CircleCheckFilled /></el-icon>
+                    <el-icon v-else color="#1E1E1E" ><Pointer /></el-icon>     点赞:{{ agreeNum??0 }}</el-button>
                 <el-button icon="Star" text>
                     收藏</el-button>
                
@@ -39,7 +40,7 @@ import { useRouter } from 'vue-router'
 import AvatarInfo from './AvatarInfo.vue';
 import {operate} from '@/apis/agreeApi'
 
-const props = defineProps(['title','introduction','creationTime','id','user','badge',"color","seeNum","agreeNum"])
+const props = defineProps(['title','introduction','creationTime','id','user','badge',"color","seeNum","agreeNum","isAgree"])
 
 const router = useRouter()
 const spacer = h(ElDivider, { direction: 'vertical' })
@@ -47,13 +48,15 @@ const enterDiscuss = (id) => {
     router.push(`/article/${id}`)
 }
 const agreeNum=ref(0)
+const isAgree=ref(false)
 //点赞操作
 const agree=async ()=>{
   const response=  await operate(props.id)
   const res=response.data;
   //提示框，颜色区分
-  if(res.isArgee)
+  if(res.isAgree)
   {
+    isAgree.value=true;
     agreeNum.value+=1;
     ElMessage({
     message: res.message,
@@ -62,6 +65,7 @@ const agree=async ()=>{
   }
   else
   {
+    isAgree.value=false;
     agreeNum.value-=1;
     ElMessage({
     message: res.message,
@@ -70,6 +74,7 @@ const agree=async ()=>{
   }
 }
 onMounted(()=>{
+    isAgree.value=props.isAgree;
     agreeNum.value=props.agreeNum;
     })
 </script>