吴雨瞳添加了注释

aurora-vue/aurora-admin/src/layout/components/NavBar.vue

@@ -1,22 +1,32 @@
 <template>
   <div>
+    <!-- 导航栏容器 -->
     <div class="nav-bar">
+      <!-- 汉堡菜单按钮，点击触发侧边栏折叠/展开 -->
       <div class="hambuger-container" @click="trigger">
         <i :class="isFold" />
       </div>
+      <!-- 面包屑导航组件 -->
       <el-breadcrumb>
         <el-breadcrumb-item v-for="item of breadcrumbs" :key="item.path">
+          <!-- 有重定向的面包屑项仅显示文本 -->
           <span v-if="item.redirect">{{ item.name }}</span>
+          <!-- 无重定向的面包屑项显示为路由链接 -->
           <router-link v-else :to="item.path">{{ item.name }}</router-link>
         </el-breadcrumb-item>
       </el-breadcrumb>
+      <!-- 右侧功能菜单区 -->
       <div class="right-menu">
+        <!-- 全屏切换按钮 -->
         <div class="screen-full" @click="fullScreen">
           <i class="iconfont el-icon-myicwindowzoom48px" />
         </div>
+        <!-- 用户下拉菜单 -->
         <el-dropdown @command="handleCommand">
+          <!-- 用户头像，从store中获取用户信息 -->
           <el-avatar :size="40" :src="this.$store.state.userInfo.avatar" />
           <i class="el-icon-caret-bottom" />
+          <!-- 下拉菜单内容 -->
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="setting"> <i class="el-icon-s-custom" />个人中心 </el-dropdown-item>
             <el-dropdown-item command="logout" divided>
@@ -26,70 +36,97 @@
         </el-dropdown>
       </div>
     </div>
+    <!-- 标签页容器 -->
     <div class="tabs-view-container">
       <div class="tabs-wrapper">
+        <!-- 循环渲染标签页列表，从store中获取 -->
         <span :class="isActive(item)" v-for="item of this.$store.state.tabList" :key="item.path" @click="goTo(item)">
           {{ item.name }}
+          <!-- 非首页标签显示关闭按钮，点击停止事件冒泡并移除标签 -->
           <i class="el-icon-close" v-if="item.path != '/'" @click.stop="removeTab(item)" />
         </span>
       </div>
+      <!-- 全部关闭按钮 -->
       <div class="tabs-close-item" style="float: right" @click="closeAllTab">全部关闭</div>
     </div>
   </div>
 </template>
 
 <script>
+// 导入重置路由的方法
 import { resetRouter } from '@/router'
 export default {
+  // 组件创建时执行
   created() {
+    // 过滤出路由匹配记录中包含name的项
     let matched = this.$route.matched.filter((item) => item.name)
     const first = matched[0]
+    // 如果第一个匹配项不是首页，则在前面添加首页
     if (first && first.name !== '首页') {
       matched = [{ path: '/', name: '首页' }].concat(matched)
     }
+    // 设置面包屑数据
     this.breadcrumbs = matched
+    // 将当前路由添加到标签页列表
     this.$store.commit('saveTab', this.$route)
   },
   data: function () {
     return {
-      isSearch: false,
-      fullscreen: false,
-      breadcrumbs: []
+      isSearch: false, // 搜索状态标识
+      fullscreen: false, // 全屏状态标识
+      breadcrumbs: [] // 面包屑数据
     }
   },
   methods: {
+    // 跳转到指定标签页
     goTo(tab) {
       this.$router.push({ path: tab.path })
     },
+    // 移除指定标签页
     removeTab(tab) {
+      // 调用store的removeTab方法移除标签
       this.$store.commit('removeTab', tab)
+      // 如果移除的是当前激活的标签，跳转到最后一个标签页
       if (tab.path == this.$route.path) {
         var tabList = this.$store.state.tabList
         this.$router.push({ path: tabList[tabList.length - 1].path })
       }
     },
+    // 触发侧边栏折叠/展开
     trigger() {
       this.$store.commit('trigger')
     },
+    // 处理下拉菜单命令
     handleCommand(command) {
+      // 个人中心命令：跳转到设置页面
       if (command == 'setting') {
         this.$router.push({ path: '/setting' })
       }
+      // 退出登录命令
       if (command == 'logout') {
         this.axios.post('/api/users/logout').then(({ data }) => {
+          // 清除用户信息
           this.$store.commit('logout')
+          // 重置标签页
           this.$store.commit('resetTab')
+          // 重置路由
           resetRouter()
+          // 跳转到登录页
           this.$router.push({ path: '/login' })
         })
       }
     },
+    // 关闭所有标签页
     closeAllTab() {
+      // 调用store的resetTab方法清空标签
       this.$store.commit('resetTab')
+      // 跳转到首页
       this.$router.push({ path: '/' })
     },
+    // 全屏切换功能
     fullScreen() {
       let element = document.documentElement
+      // 如果当前是全屏状态，则退出全屏
       if (this.fullscreen) {
         if (document.exitFullscreen) {
           document.exitFullscreen()
@@ -101,6 +138,7 @@ export default {
           document.msExitFullscreen()
         }
       } else {
+        // 如果当前是非全屏状态，则进入全屏
         if (element.requestFullscreen) {
           element.requestFullscreen()
         } else if (element.webkitRequestFullScreen) {
@@ -111,10 +149,12 @@ export default {
           element.msRequestFullscreen()
         }
       }
+      // 切换全屏状态标识
       this.fullscreen = !this.fullscreen
     }
   },
   computed: {
+    // 判断标签页是否为当前激活状态
     isActive() {
       return function (tab) {
         if (tab.path == this.$route.path) {
@@ -123,6 +163,7 @@ export default {
         return 'tabs-view-item'
       }
     },
+    // 根据侧边栏折叠状态返回对应的图标类名
     isFold() {
       return this.$store.state.collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
     }
@@ -233,6 +274,7 @@ export default {
   margin-right: 1rem;
   font-size: 1.25rem;
 }
+/* 自定义滚动条样式 */
 *::-webkit-scrollbar {
   width: 0.5rem;
   height: 6px;
@@ -241,4 +283,4 @@ export default {
   border-radius: 0.5rem;
   background-color: rgba(144, 147, 153, 0.3);
 }
-</style>
+</style>