From d610b6058e7b568c54f4fbf4f1daa7edae19c57f Mon Sep 17 00:00:00 2001
From: wyt <1955803161@qq.com>
Date: Thu, 30 Oct 2025 08:50:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E9=9B=A8=E7=9E=B3=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=86=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Title/src/SubTitle.vue     | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/aurora-vue/aurora-blog/src/components/Title/src/SubTitle.vue b/aurora-vue/aurora-blog/src/components/Title/src/SubTitle.vue
index 251bc35..155df2b 100644
--- a/aurora-vue/aurora-blog/src/components/Title/src/SubTitle.vue
+++ b/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>
\ No newline at end of file