吴雨瞳提交了注释

aurora-vue/aurora-blog/src/components/Title/src/SubTitle.vue

@@ -1,61 +1,79 @@
 <template>
+  <!-- 子标题容器：相对定位，flex布局，垂直居中，设置内边距、外边距、字体大小和颜色等样式 -->
   <p class="relative flex items-center pb-2 mb-4 text-xl text-ob-bright uppercase">
+    <!-- 左侧图标：当设置了图标且位置在左侧时显示，使用SVG图标组件 -->
     <svg-icon v-if="icon && side === 'left'" :icon-class="icon" class="inline-block mr-2" />
+    <!-- 标题文本：应用计算出的标题类名，显示国际化后的标题内容 -->
     <span :class="titleClass">{{ t(titleStr) }}</span>
+    <!-- 右侧图标：当设置了图标且位置在右侧时显示，使用SVG图标组件 -->
     <svg-icon v-if="icon && side === 'right'" :icon-class="icon" class="inline-block ml-2" />
+    <!-- 标题下划线：应用计算出的线条类名和渐变背景样式 -->
     <span :class="lineClass" :style="gradientBackground" />
   </p>
 </template>
 
 <script lang="ts">
+// 导入应用状态存储
 import { useAppStore } from '@/stores/app'
+// 导入Vue相关工具：计算属性、组件定义、响应式属性转换
 import { computed, defineComponent, toRefs } from 'vue'
+// 导入国际化工具
 import { useI18n } from 'vue-i18n'
 
+// 定义子标题组件
 export default defineComponent({
   name: 'SubTitle',
+  // 组件接收的属性
   props: {
+    // 标题文本（国际化键名），必填
     title: {
       type: String,
       default: '',
-      requried: true
+      required: true
     },
+    // 图标位置，默认左侧
     side: {
       type: String,
       default: 'left'
     },
+    // 图标类名（可选）
     icon: String
   },
   setup(props) {
+    // 获取应用状态实例
     const appStore = useAppStore()
+    // 获取国际化翻译函数
     const { t } = useI18n()
-    const titleStr = toRefs(props).title
-    const side = toRefs(props).side
+    // 将props中的title和side转换为响应式引用
+    const { title: titleStr, side } = toRefs(props)
 
     return {
+      // 计算属性：标题下划线的渐变背景样式（从应用配置中获取）
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.header_gradient_css }
       }),
+      // 计算属性：标题文本的类名（根据位置设置对齐方式）
       titleClass: computed(() => {
         return {
-          'w-full': true,
-          block: true,
-          'text-right': side.value === 'right' ? true : false
+          'w-full': true, // 宽度占满
+          block: true, // 块级元素
+          'text-right': side.value === 'right' ? true : false // 右侧图标时标题右对齐
         }
       }),
+      // 计算属性：标题下划线的类名（根据位置设置定位）
       lineClass: computed(() => {
         return {
-          absolute: true,
-          'bottom-0': true,
-          'h-1': true,
-          'w-14': true,
-          'rounded-full': true,
-          'right-0': side.value === 'right' ? true : false
+          absolute: true, // 绝对定位
+          'bottom-0': true, // 定位到底部
+          'h-1': true, // 高度1px
+          'w-14': true, // 宽度14rem
+          'rounded-full': true, // 圆角
+          'right-0': side.value === 'right' ? true : false // 右侧图标时下划线居右
         }
       }),
-      titleStr,
-      t
+      titleStr, // 响应式标题文本
+      t // 国际化翻译函数
     }
   }
 })
-</script>
+</script>