refactor: ♻️ 消息通知组件重命名和样式优化

src/assets/icons/bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 18H19V11.0314C19 7.14806 15.866 4 12 4C8.13401 4 5 7.14806 5 11.0314V18ZM12 2C16.9706 2 21 6.04348 21 11.0314V20H3V11.0314C3 6.04348 7.02944 2 12 2ZM9.5 21H14.5C14.5 22.3807 13.3807 23.5 12 23.5C10.6193 23.5 9.5 22.3807 9.5 21Z"></path></svg>

src/components/Notification/index.vue

@@ -1,27 +1,21 @@
 <template>
-  <div class="notice">
+  <div class="notification">
-    <el-dropdown class="h-full items-center justify-center" trigger="click">
+    <el-dropdown class="h-full flex-center" trigger="click">
       <el-badge v-if="noticeList.length > 0" :offset="[0, 15]" :value="noticeList.length" :max="99">
-        <el-icon>
+        <div class="i-svg:bell" />
-          <Bell />
-        </el-icon>
       </el-badge>
 
-      <div v-else>
+      <div v-else class="i-svg:bell" />
-        <el-icon>
-          <Bell />
-        </el-icon>
-      </div>
 
       <template #dropdown>
         <div class="p-5">
           <template v-if="noticeList.length > 0">
-            <div v-for="(item, index) in noticeList" :key="index" class="w500px py-3">
+            <div v-for="(item, index) in noticeList" :key="index" class="w-500px py-3">
               <div class="flex-y-center">
                 <DictLabel v-model="item.type" code="notice_type" size="small" />
                 <el-text
                   size="small"
-                  class="w200px cursor-pointer !ml-2 !flex-1"
+                  class="w-200px cursor-pointer !ml-2 !flex-1"
                   truncated
                   @click="handleReadNotice(item.id)"
                 >
@@ -52,7 +46,7 @@
             </div>
           </template>
           <template v-else>
-            <div class="flex-center h150px w350px">
+            <div class="flex-center h-150px w-350px">
               <el-empty :image-size="50" description="暂无消息" />
             </div>
           </template>
@@ -64,21 +58,21 @@
       v-model="noticeDialogVisible"
       :title="noticeDetail?.title ?? '通知详情'"
       width="800px"
-      custom-class="notice-detail"
+      custom-class="notification-detail"
     >
-      <div v-if="noticeDetail" class="notice-detail__wrapper">
+      <div v-if="noticeDetail" class="p-x-20px">
-        <div class="notice-detail__meta">
+        <div class="flex-y-center mb-16px text-13px text-color-secondary">
-          <span>
+          <span class="flex-y-center">
             <el-icon><User /></el-icon>
             {{ noticeDetail.publisherName }}
           </span>
-          <span class="ml-2">
+          <span class="ml-2 flex-y-center">
             <el-icon><Timer /></el-icon>
             {{ noticeDetail.publishTime }}
           </span>
         </div>
 
-        <div class="notice-detail__content">
+        <div class="max-h-60vh pt-16px mb-24px overflow-y-auto border-t border-solid border-color">
           <div v-html="noticeDetail.content"></div>
         </div>
       </div>
@@ -169,7 +163,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-.notice {
+.notification {
   :deep(.el-badge) {
     display: flex;
     align-items: center;
@@ -177,39 +171,5 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100%;
   }
-
-  .notice-detail {
-    &__wrapper {
-      padding: 0 20px;
-    }
-
-    &__meta {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-      font-size: 13px;
-      color: var(--el-text-color-secondary);
-    }
-
-    &__publisher {
-      margin-right: 24px;
-
-      i {
-        margin-right: 4px;
-      }
-    }
-
-    &__content {
-      max-height: 60vh;
-      padding-top: 16px;
-      margin-bottom: 24px;
-      overflow-y: auto;
-      border-top: 1px solid var(--el-border-color);
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-    }
-  }
 }
 </style>

src/layout/components/NavBar/components/NavbarRight.vue

@@ -15,7 +15,7 @@
       <LangSelect />
 
       <!-- 通知下拉 -->
-      <NoticeDropdown />
+      <Notification />
     </template>
 
     <!-- 用户头像（个人中心、退出登录等） -->

src/types/components.d.ts

@@ -73,7 +73,7 @@ declare module "vue" {
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
     MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
     MultiImageUpload: (typeof import("./../components/Upload/MultiImageUpload.vue"))["default"];
-    NoticeDropdown: (typeof import("./../components/Notice/NoticeDropdown.vue"))["default"];
+    Notification: (typeof import("./../components/Notification/index.vue"))["default"];
     LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
     PageModal: (typeof import("./../components/CURD/PageModal.vue"))["default"];