dev：系统通知优化

src/components/Notice/Index.vue

@@ -7,45 +7,54 @@
         </el-badge>
       </template>
       <div class="layout-navbars-breadcrumb-user-news">
-        <div class="head-box">
+        <el-tabs v-model="noticeType">
-          <div class="head-box-title">通知</div>
+          <el-tab-pane name="0">
-          <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
+            <template #label>
-        </div>
+              <el-badge :is-dot="newsDot" class="item"> 通知 </el-badge>
-        <div class="content-box">
+            </template>
-          <template v-if="noticeList.length > 0">
+            <div class="content-box">
-            <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
+              <div class="content-box-item" v-for="item in noticeList" @click="handleDetails(item)">
-              <div>{{ v.noticeTitle }}</div>
+                <el-icon :size="30" color="#409EFF"><bell /></el-icon>
-              <div class="content-box-msg" v-html="v.noticeContent"></div>
+                <div class="content">
-              <div class="content-box-time">{{ v.createTime }}</div>
+                  <div class="title">{{ item.noticeTitle }}</div>
+                  <div class="content-box-time">{{ dayjs(item.create_time).format('YYYY-MM-DD') }}</div>
+                </div>
+              </div>
             </div>
-          </template>
+          </el-tab-pane>
-          <div class="content-box-empty" v-else>
+
-            <div class="content-box-empty-margin">
+          <el-tab-pane label="私信" name="1"> <div class="content-box"></div></el-tab-pane>
-              <el-icon><Promotion /></el-icon>
+        </el-tabs>
-              <div class="mt15">全部已读</div>
+
-            </div>
-          </div>
-        </div>
         <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
       </div>
     </el-popover>
+
+    <el-dialog :title="info.noticeTitle" v-model="show" append-to-body>
+      <div v-html="info.noticeContent"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="noticeIndex">
 import useSocketStore from '@/store/modules/socket'
-
+import { dayjs } from 'element-plus'
 const { proxy } = getCurrentInstance()
-
+const noticeType = ref('0')
 // 小红点
 const newsDot = ref(false)
-
+const show = ref(false)
 const noticeList = computed(() => {
   return useSocketStore().noticeList
 })
 const noticeDot = computed(() => {
   return useSocketStore().noticeDot
 })
+const info = ref({})
+function handleDetails(item) {
+  show.value = true
+  info.value = item
+}
 // 全部已读点击
 function onAllReadClick() {
   newsDot.value = false
@@ -57,7 +66,7 @@ function onGoToGiteeClick() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .head-box {
   display: flex;
   border-bottom: 1px solid #ebeef5;
@@ -78,22 +87,29 @@ function onGoToGiteeClick() {
 }
 .content-box {
   font-size: 13px;
+  min-height: 60px;
+  max-height: 200px;
+  overflow-y: scroll;
+
   .content-box-item {
-    padding-top: 12px;
+    display: flex;
+    margin-bottom: 20px;
+    cursor: pointer;
+    &:hover {
+      color: var(--el-color-primary);
+    }
+
     &:last-of-type {
       padding-bottom: 12px;
     }
-    .content-box-msg {
+    .icon {
-      color: #999999;
+      width: 30px;
-      margin-top: 5px;
+      height: 30px;
-      margin-bottom: 5px;
+      margin: 2px 10px 0 0;
-      height: 100px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
     }
+
     .content-box-time {
-      color: #999999;
+      margin-top: 3px;
     }
   }
   .content-box-empty {

src/layout/components/Navbar.vue

@@ -8,6 +8,7 @@
 
     <div class="right-menu">
       <header-search id="header-search" class="right-menu-item" />
+      <Notice title="通知" class="right-menu-item" />
       <template v-if="appStore.device == 'desktop'">
         <zr-git title="源码地址" class="right-menu-item" />
         <zr-doc title="文档地址" class="right-menu-item" />
@@ -15,7 +16,6 @@
       </template>
       <size-select title="布局大小" class="right-menu-item" />
       <LangSelect title="语言设置" class="right-menu-item" />
-      <Notice title="通知" class="right-menu-item" />
 
       <el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
         <span class="avatar-wrapper">