From 1f8da6335c41e61ccfd68556f453152733bdbd43 Mon Sep 17 00:00:00 2001
From: pswqm3ot6 <2754728380@qq.com>
Date: Sun, 15 Dec 2024 17:27:57 +0800
Subject: [PATCH] Update docs(Noticelcon.vue) (#12)

---
 .../src/components/NoticeIcon/NoticeIcon.vue  | 62 +++++++++++++------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/NoticeIcon/NoticeIcon.vue b/frontend/src/components/NoticeIcon/NoticeIcon.vue
index bc849b6..5c458bc 100644
--- a/frontend/src/components/NoticeIcon/NoticeIcon.vue
+++ b/frontend/src/components/NoticeIcon/NoticeIcon.vue
@@ -1,4 +1,6 @@
 <template>
+<!-- 进入层。展示一个通知消息组件，透过点击设置触发展示。-->
+<!-- 通过 <a-popover> 实现通知消息框，配置消息流和点击事件。-->
   <a-popover
     v-model="visible"
     trigger="click"
@@ -9,23 +11,40 @@
     :overlayStyle="{ width: '300px', top: '50px' }"
   >
     <template slot="content">
+      <!-- 透过加载线段和标签，分类显示通知。 -->
       <a-spin :spinning="loadding">
         <a-tabs>
           <a-tab-pane tab="通知" key="1">
+            <!-- 显示通知列表，具体消息以组件形式显示 -->
             <a-list>
               <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                <a-list-item-meta
+                  title="你收到了 14 份新周报"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+                <a-list-item-meta
+                  title="你推荐的 曲妮妮 已通过第三轮面试"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+                <a-list-item-meta
+                  title="这种模板可以区分多种通知类型"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
                 </a-list-item-meta>
               </a-list-item>
             </a-list>
@@ -39,6 +58,7 @@
         </a-tabs>
       </a-spin>
     </template>
+    <!-- 点击回调消息分类加载功能 -->
     <span @click="fetchNotice" class="header-notice">
       <a-badge count="12">
         <a-icon style="font-size: 16px; padding: 4px" type="bell" />
@@ -49,41 +69,45 @@
 
 <script>
 export default {
-  name: 'HeaderNotice',
+  name: 'HeaderNotice', // 组件名称
   data () {
     return {
-      loadding: false,
-      visible: false
+      loadding: false, // 加载状态
+      visible: false // 视图显示或隐藏状态
     }
   },
   methods: {
+    // 点击调用消息加载和切换显示状态
     fetchNotice () {
       if (!this.visible) {
         this.loadding = true
+        // 模拟加载耗时
         setTimeout(() => {
           this.loadding = false
         }, 2000)
       } else {
         this.loadding = false
       }
-      this.visible = !this.visible
+      this.visible = !this.visible // 切换加载状态
     }
   }
 }
 </script>
 
 <style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
+/* 通知框样式配置 */
+.header-notice-wrapper {
+  top: 50px !important;
+}
 </style>
 <style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
+/* 层级框样式 */
+.header-notice{
+  display: inline-block;
+  transition: all 0.3s;
 
-    span {
-      vertical-align: initial;
-    }
+  span {
+    vertical-align: initial;
   }
+}
 </style>