Merge pull request”更新注释文档”（#12）from feature/wyh into develop

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-list-item-meta
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                  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-list-item-meta
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+                  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-list-item-meta
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+                  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,
+      loadding: false, // 加载状态
-      visible: 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 {
+/* 通知框样式配置 */
+.header-notice-wrapper {
   top: 50px !important;
-  }
+}
 </style>
 <style lang="less" scoped>
-  .header-notice{
+/* 层级框样式 */
+.header-notice{
   display: inline-block;
   transition: all 0.3s;
 
   span {
     vertical-align: initial;
   }
-  }
+}
 </style>