吴雨瞳添加了注释

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

@@ -1,65 +1,104 @@
 <template>
+  <!-- 侧边栏网站信息组件容器，应用sidebar-box样式 -->
   <div class="sidebar-box">
+    <!-- 子标题组件：显示标题为国际化的"网站信息"，图标为网站信息图标 -->
     <SubTitle :title="'titles.website_info'" icon="website-info" />
+    <!-- 网站信息列表容器，水平居中 -->
     <ul class="mx-auto">
+      <!-- 网站运行时间信息项 -->
       <li class="pb-3">
+        <!-- 标签文本：国际化的"运行时间"，使用小号字体和中等字重 -->
         <span class="text-sm font-medium">{{ t('settings.running-time') }}:</span>
+        <!-- 运行时间值：当有数据时显示，右对齐 -->
         <span class="text-sm font-medium text-right float-right" v-if="websiteCreateTime != ''">
           {{ websiteCreateTime }}
         </span>
+        <!-- 骨架屏：当无数据时显示，占位宽度136px，高度16px -->
         <ob-skeleton v-else class="float-right" tag="span" width="136px" height="16px" />
       </li>
+      <!-- 网站访问量信息项 -->
       <li class="pb-2">
+        <!-- 标签文本：国际化的"访问量"，使用小号字体和中等字重 -->
         <span class="text-sm font-medium">{{ t('settings.view-count') }}:</span>
+        <!-- 访问量值：当有数据时显示，右对齐 -->
         <span class="text-sm font-medium text-right float-right" v-if="viewCount">{{ viewCount }}</span>
+        <!-- 骨架屏：当无数据时显示，占位宽度60px，高度16px -->
         <ob-skeleton v-else class="float-right" tag="span" width="60px" height="16px" />
       </li>
     </ul>
   </div>
 </template>
+
 <script lang="ts">
+// 导入Vue相关工具：组件定义、生命周期钩子、响应式引用
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+// 导入子标题组件
 import { SubTitle } from '@/components/Title'
+// 导入应用状态存储
 import { useAppStore } from '@/stores/app'
+// 导入国际化工具
 import { useI18n } from 'vue-i18n'
 
+// 定义网站信息组件
 export default defineComponent({
   name: 'WebsiteInfo',
+  // 注册子组件
   components: { SubTitle },
   setup() {
+    // 获取国际化翻译函数
     const { t } = useI18n()
+    // 获取应用状态实例
     const appStore = useAppStore()
+    // 响应式变量：存储网站运行时间字符串
     const websiteCreateTime = ref('')
+    // 响应式变量：存储网站访问量
     const viewCount = ref(0)
+    // 定时器变量：用于更新运行时间
     let timer: any
+
+    // 组件挂载时执行：初始化运行时间并设置定时器每秒更新
     onMounted(() => {
       runTime()
       timer = setInterval(runTime, 1000)
     })
+
+    // 组件卸载时执行：清除定时器，避免内存泄漏
     onUnmounted(() => {
       clearInterval(timer)
     })
+
+    // 计算并更新网站运行时间的函数
     const runTime = () => {
+      // 若未配置网站创建时间，则不执行
       if (!appStore.websiteConfig.websiteCreateTime) {
         return
       }
+      // 计算当前时间与网站创建时间的毫秒差
       let timeold = new Date().getTime() - new Date(appStore.websiteConfig.websiteCreateTime).getTime()
+      // 每天的毫秒数
       let msPerDay = 24 * 60 * 60 * 1000
+      // 计算运行天数
       let daysold = Math.floor(timeold / msPerDay)
-      let str = ''
+      // 获取当前时间对象
       let day = new Date()
+      // 拼接运行时间字符串（天时分秒）
+      let str = ''
       str += daysold + '天'
       str += day.getHours() + '时'
       str += day.getMinutes() + '分'
       str += day.getSeconds() + '秒'
+      // 更新运行时间响应式变量
       websiteCreateTime.value = str
+      // 更新访问量响应式变量（从应用状态获取）
       viewCount.value = appStore.viewCount
     }
+
+    // 暴露数据和方法供模板使用
     return {
-      websiteCreateTime,
-      viewCount,
-      t
+      websiteCreateTime, // 网站运行时间
+      viewCount, // 网站访问量
+      t // 国际化翻译函数
     }
   }
 })
-</script>
+</script>