feat:完成底部

Yi.BBS.Vue3/src/apis/commentApi.js

@@ -12,4 +12,11 @@ export function add(data){
         method: 'post',
         data:data
     })
+};
+
+export function del(ids){
+    return myaxios({
+        url: `/comment/${ids}`,
+        method: 'delete'
+    })
 };

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>

Yi.BBS.Vue3/src/views/Article.vue

@@ -58,7 +58,9 @@
 <CommentInfo/>
 
           </el-col>
+
         </el-row>
+        <BottomInfo/>
       </el-col>
 
       <el-col :span="5">
@@ -126,7 +128,7 @@ import AvatarInfo from "@/components/AvatarInfo.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import ArticleContentInfo from "@/components/ArticleContentInfo.vue";
 import CommentInfo from "@/components/CommentInfo.vue";
-
+import BottomInfo from '@/components/BottomInfo.vue'
 import TreeArticleInfo from "@/components/TreeArticleInfo.vue";
 import { useRoute, useRouter } from "vue-router";
 

Yi.BBS.Vue3/src/views/Discuss.vue

@@ -58,14 +58,14 @@
           </div>
         </template>
 <div class="div-item" v-for="i in topDiscussList" >
-  <DisscussCard :title="i.title" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :color="i.color"  :seeNum="i.seeNum" badge="置顶"/>
+  <DisscussCard :title="i.title" :isAgree="i.isAgree" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :color="i.color"  :seeNum="i.seeNum" badge="置顶"/>
 </div>
 </el-collapse-item>
 </el-collapse>
 <el-divider v-show="topDiscussList.length>0" />
   
 <div class="div-item" v-for="i in discussList" >
-  <DisscussCard :title="i.title" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :color="i.color"  :seeNum="i.seeNum" :user="i.user"/>
+  <DisscussCard :title="i.title" :isAgree="i.isAgree" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :color="i.color"  :seeNum="i.seeNum" :user="i.user"/>
 </div>
 <div>
     <el-pagination
@@ -81,7 +81,12 @@
   </div>
 
 <el-empty v-if="discussList.length==0" description="空空如也" />
+<BottomInfo/>
     </div>
+
+
+
+    
 </template>
 
 
@@ -90,7 +95,7 @@ import DisscussCard from '@/components/DisscussCard.vue'
 import {getList,getTopList} from '@/apis/discussApi.js'
 import { onMounted, ref,reactive  } from 'vue'
 import { useRoute,useRouter } from 'vue-router'
-
+import BottomInfo from '@/components/BottomInfo.vue'
 //数据定义
 const route=useRoute()
 const router=useRouter()

Yi.BBS.Vue3/src/views/Index.vue

@@ -10,11 +10,11 @@
      
       <el-row class="left-div">
         <el-col :span="8" v-for="i in plateList" class="plate" :style="{  'padding-left': i%3==1?0:0.2+'rem','padding-right': i%3==0?0:0.2+'rem'}" >
-          <PlateCard :name="i.name" :introduction="i.introduction" :id="i.id"/>
+          <PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" />
           </el-col>
 
         <el-col :span="24" v-for="i in discussList">
-<DisscussCard :title="i.title" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :seeNum="i.seeNum"/>
+<DisscussCard :title="i.title" :introduction="i.introduction" :creationTime="i.creationTime" :agreeNum="i.agreeNum" :id="i.id" :user="i.user" :seeNum="i.seeNum" :isAgree="i.isAgree"/>
           
         </el-col>
         <el-col :span="24">