吴雨瞳添加了注释

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

@@ -1,29 +1,37 @@
 <template>
+  <!-- 个人资料组件容器：设置高度、宽度、圆角、阴影等样式，背景使用渐变 -->
   <div class="h-98 w-full rounded-2xl relative shadow-xl mb-8" :style="gradientBackground">
+    <!-- 个人资料卡片：深色背景、圆角、半透明、居中布局，带悬停阴影效果 -->
     <div
-      class="ob-gradient-cut-plate absolute bg-ob-deep-900 rounded-xl opacity-90 flex justify-center items-center pt-4 px-6 shadow-lg hover:shadow-2xl duration-300"
-      data-dia="author">
+        class="ob-gradient-cut-plate absolute bg-ob-deep-900 rounded-xl opacity-90 flex justify-center items-center pt-4 px-6 shadow-lg hover:shadow-2xl duration-300"
+        data-dia="author">
       <div class="profile absolute w-full flex flex-col justify-center items-center">
         <div class="flex flex-col justify-center items-center">
+          <!-- 作者头像：优先使用配置中的头像，否则使用默认头像 -->
           <img v-if="websiteConfig.authorAvatar" :class="avatarClass" :src="websiteConfig.authorAvatar" />
           <img v-else :class="avatarClass" :src="default" />
+          <!-- 作者名称：使用配置中的作者名，否则显示骨架屏 -->
           <h2 class="text-center pt-4 text-4xl font-semibold text-ob-bright">
             <template v-if="websiteConfig.author">
               {{ websiteConfig.author }}
             </template>
             <ob-skeleton v-else height="2.25rem" width="7rem" />
           </h2>
+          <!-- 名称下方的渐变分隔线 -->
           <span class="h-1 w-14 rounded-full mt-2" :style="gradientBackground" />
+          <!-- 作者简介：使用配置中的简介，否则显示骨架屏 -->
           <p
-            v-if="websiteConfig.authorIntro"
-            class="pt-6 px-10 w-full text-s text-center"
-            v-html="websiteConfig.authorIntro" />
+              v-if="websiteConfig.authorIntro"
+              class="pt-6 px-10 w-full text-s text-center"
+              v-html="websiteConfig.authorIntro" />
           <p v-else class="pt-6 px-10 w-full text-sm text-center flex flex-col gap-2">
             <ob-skeleton :count="2" height="20px" width="10rem" />
           </p>
         </div>
         <div class="h-full w-full flex flex-col flex-1 justify-end items-end">
+          <!-- 社交媒体链接组件 -->
           <Social />
+          <!-- 统计数据列表：文章数、说说数、分类数、标签数 -->
           <ul class="grid grid-cols-4 pt-4 w-full px-2 text-lg">
             <li class="col-span-1 text-center">
               <span class="text-ob-bright">
@@ -51,36 +59,54 @@
 </template>
 
 <script lang="ts">
+// 导入应用状态存储
 import { useAppStore } from '@/stores/app'
+// 导入Vue相关工具：计算属性、组件定义
 import { computed, defineComponent } from 'vue'
+// 导入国际化工具
 import { useI18n } from 'vue-i18n'
+// 导入社交媒体组件
 import Social from '@/components/Social.vue'
 
+// 定义个人资料组件
 export default defineComponent({
   name: 'Profile',
+  // 注册子组件
   components: { Social },
   setup() {
+    // 获取应用状态实例
     const appStore = useAppStore()
+    // 获取国际化翻译函数
     const { t } = useI18n()
     return {
+      // 默认头像图片地址
       default: 'https://static.linhaojun.top/aurora/config/52a81cd2772167b645569342e81ce312.jpg',
+      // 计算头像样式类：基础类 + 主题配置中的头像形状类
       avatarClass: computed(() => {
         return {
           'ob-avatar': true,
           [appStore.themeConfig.profile_shape]: true
         }
       }),
+      // 主题配置（计算属性，从应用状态中获取）
       themeConfig: computed(() => appStore.themeConfig),
+      // 渐变背景样式（计算属性，使用主题配置中的头部渐变CSS）
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.header_gradient_css }
       }),
+      // 网站配置（计算属性，从应用状态中获取）
       websiteConfig: computed(() => {
         return appStore.websiteConfig
       }),
+      // 文章数量（计算属性，从应用状态中获取）
       articleCount: computed(() => appStore.articleCount),
+      // 说说数量（计算属性，从应用状态中获取）
       talkCount: computed(() => appStore.talkCount),
+      // 分类数量（计算属性，从应用状态中获取）
       categoryCount: computed(() => appStore.categoryCount),
+      // 标签数量（计算属性，从应用状态中获取）
       tagCount: computed(() => appStore.tagCount),
+      // 国际化翻译函数
       t
     }
   }
@@ -88,9 +114,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+// 个人资料容器样式：调整顶部位置和高度
 .profile {
   top: -7%;
   height: 100%;
   max-height: 100%;
 }
-</style>
+</style>