feat: 补充前端

Yi.Bbs.Vue3/src/hubs/bbsNoticeHub.js

@@ -4,11 +4,11 @@ import { dayjs } from 'element-plus'
 const receiveMsg=(connection)=> {
 
   const noticeStore = useNoticeStore();
-    connection.on("Personal", (message) => {
+    connection.on("Personal", (message,creationTime) => {
       noticeStore.addNotice({
         message:message,
         isRead:false,
-       creationTime:dayjs().format()
+       creationTime
       });
       });
   };

Yi.Bbs.Vue3/src/layout/AppHeader.vue

@@ -11,9 +11,7 @@
         <el-menu-item index="1" @click="enterIndex">主页</el-menu-item>
 
         <el-menu-item index="2" @click="enterStart"
-        style="color: red;font-weight: bolder;font-size: large;"
+          style="color: red;font-weight: bolder;font-size: large;">开始</el-menu-item>
-        
-        >开始</el-menu-item>
 
         <el-sub-menu index="3">
           <template #title>学习</template>
@@ -85,10 +83,18 @@
               </el-dropdown-item>
 
 
-              <el-dropdown-item v-for="(item, index) in noticeList" :key="index">
+              <el-dropdown-item class="notice-item" v-for="(item, index) in noticeList" :key="index">
-                <div v-if="item.isRead" class="notice-msg" v-html="item.message"></div>
+
+
+
+                <div v-if="item.isRead" class="notice-msg" style="background-color: #f7f7f7;">
+                  <span class="notice-time">[已读]通知时间： {{ dayjs(item.creationTime).format('YYYY年M月D日 HH时mm分ss秒') }}</span>
+                  <div v-html="item.message"></div>
+                </div>
 
                 <el-badge is-dot v-else >
+
+                  <span class="notice-time">[未读]通知时间： {{ dayjs(item.creationTime).format('YYYY年M月D日 HH时mm分ss秒') }}</span>
                   <div class="notice-msg" v-html="item.message"></div>
                 </el-badge>
 
@@ -118,6 +124,7 @@
   </div>
 </template>
 <script setup>
+import { dayjs } from 'element-plus'
 import { Bell } from '@element-plus/icons-vue'
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import { computed, onMounted, ref } from "vue";
@@ -219,6 +226,13 @@ const enterStart=()=>{
 
 
 <style scoped lang="scss">
+.notice-item{
+  padding: 10px 0px 30px 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+.notice-time{
+  font-size: larger;
+}
 .money {
 
   font-size: small;
@@ -302,11 +316,13 @@ const enterStart=()=>{
 
 .notice {
   margin: 0 5px;
+
   &-oper {
     display: flex;
     justify-content: space-between;
     width: 100%;
   }
+
   &-msg {
     white-space: wrap !important;
     width: 400px;