吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Header/src/Logo.vue

@@ -1,43 +1,65 @@
 <template>
+  <!-- Logo组件容器，点击触发页面跳转，包含Logo图片和网站名称 -->
   <div class="flex items-start self-stretch relative" @click="handleClick">
+    <!-- 网站名称区域，包含主名称和英文名称，点击触发跳转 -->
     <div class="flex flex-col relative py-4 z-10 text-white font-medium ob-drop-shadow cursor-pointer" @click="">
+      <!-- 网站主名称，从配置中获取，若未加载完成显示LOADING动画 -->
       <span class="flex text-3xl" v-if="websiteConfig.name">
         {{ websiteConfig.name }}
       </span>
       <span v-else class="flex text-3xl animation-text">LOADING</span>
+      <!-- 网站英文名称，默认显示BLOG -->
       <span class="font-extrabold text-xs uppercase">
         {{ websiteConfig.englishName || 'BLOG' }}
       </span>
     </div>
+    <!-- 网站Logo图片 -->
     <img class="logo-image" :src="websiteConfig.logo" alt="site-logo" />
   </div>
 </template>
 
 <script lang="ts">
+// 导入应用状态管理
 import { useAppStore } from '@/stores/app'
+// 导入Vue响应式计算属性
 import { computed } from '@vue/reactivity'
+// 导入Vue组件定义工具
 import { defineComponent } from 'vue'
+// 导入路由工具
 import { useRouter } from 'vue-router'
+// 导入通用状态管理
 import { useCommonStore } from '@/stores/common'
+// 导入导航状态管理
 import { useNavigatorStore } from '@/stores/navigator'
 
+// 定义Logo组件
 export default defineComponent({
   name: 'Logo',
   setup() {
+    // 获取应用状态实例
     const appStore = useAppStore()
+    // 获取通用状态实例
     const commonStore = useCommonStore()
+    // 获取导航状态实例
     const navigatorStore = useNavigatorStore()
+    // 获取路由实例
     const router = useRouter()
+
+    // 处理Logo点击事件：跳转到首页，若在移动端且菜单打开则关闭菜单
     const handleClick = () => {
       router.push({ path: '/' })
       if (commonStore.isMobile && navigatorStore.openMenu === true) {
         navigatorStore.toggleMobileMenu()
       }
     }
+
+    // 返回组件需要的数据和方法
     return {
+      // 从应用状态中获取网站配置（响应式）
       websiteConfig: computed(() => {
         return appStore.websiteConfig
       }),
+      // 点击事件处理方法
       handleClick
     }
   }
@@ -45,6 +67,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+// Logo图片样式
 .logo-image {
   height: 200px;
   width: 200px;
@@ -52,6 +75,6 @@ export default defineComponent({
   top: -60px;
   left: -60px;
   opacity: 0.05;
-  @apply absolute mr-2 rounded-full;
+  @apply absolute mr-2 rounded-full; // 使用Tailwind工具类：绝对定位、右边距2、圆形边框
 }
-</style>
+</style>