吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Sidebar/src/Navigator.vue

@@ -1,56 +1,77 @@
 <template>
+  <!-- 侧边导航组件容器，使用flex布局，深色背景，带圆角和阴影效果 -->
   <ul
-    id="sidebar-navigator"
-    class="flex flex-row bg-ob-deep-800 rounded-xl shadow-2xl justify-items-center overflow-hidden">
+      id="sidebar-navigator"
+      class="flex flex-row bg-ob-deep-800 rounded-xl shadow-2xl justify-items-center overflow-hidden">
+    <!-- 返回按钮：点击触发返回上一页功能，带右边框和悬停效果 -->
     <li
-      class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
-      @click="goBack">
+        class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
+        @click="goBack">
       <svg-icon class="inline-block text-3xl" icon-class="go-back" />
     </li>
+    <!-- 返回顶部按钮：点击触发滚动到页面顶部功能，带右边框和悬停效果 -->
     <li
-      class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
-      @click="toPageTop">
+        class="border-r-4 border-ob-deep-900 flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
+        @click="toPageTop">
       <svg-icon class="inline-block text-3xl" icon-class="back-to-top" />
     </li>
+    <!-- 跳转到评论区按钮：点击滚动到评论区域，带悬停效果 -->
     <li
-      class="flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
-      @click="jumpToComments"
-      data-dia="jump-to-comment">
+        class="flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
+        @click="jumpToComments"
+        data-dia="jump-to-comment">
       <svg-icon class="inline-block text-3xl" icon-class="quote" />
     </li>
   </ul>
 </template>
 
 <script lang="ts">
+// 导入Vue组件定义工具和响应式引用
 import { defineComponent, ref } from 'vue'
+// 导入路由工具
 import { useRouter } from 'vue-router'
 
+// 定义侧边导航组件
 export default defineComponent({
   name: 'Example',
   setup() {
+    // 获取路由实例
     const router = useRouter()
+    // 存储评论区偏移量的响应式变量
     const commentOffset = ref(0)
+    // 存储评论区DOM元素的响应式变量
     const commentEl = ref()
+
+    // 滚动到页面顶部的方法，使用平滑滚动效果
     const toPageTop = () => {
       window.scrollTo({
         top: 0,
         behavior: 'smooth'
       })
     }
+
+    // 返回上一页的方法，调用路由的back方法
     const goBack = () => {
       router.back()
     }
+
+    // 跳转到评论区的方法
     const jumpToComments = () => {
+      // 获取id为'comments'的评论区DOM元素
       commentEl.value = document.getElementById('comments')
       if (commentEl.value) {
+        // 计算评论区的滚动偏移量（考虑布局调整：元素顶部距离 + 120px - 30px）
         commentOffset.value =
-          commentEl.value && commentEl.value instanceof HTMLElement ? commentEl.value.offsetTop + 120 - 30 : 0
+            commentEl.value && commentEl.value instanceof HTMLElement ? commentEl.value.offsetTop + 120 - 30 : 0
       }
+      // 滚动到计算好的评论区位置，使用平滑滚动效果
       window.scrollTo({
         top: commentOffset.value,
         behavior: 'smooth'
       })
     }
+
+    // 暴露组件方法供模板使用
     return {
       goBack,
       toPageTop,
@@ -62,8 +83,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #sidebar-navigator {
+  // 禁止SVG图标触发鼠标事件，确保点击事件由父元素li处理
   svg {
     pointer-events: none;
   }
 }
-</style>
+</style>