吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Feature/src/FeatureList.vue

@@ -1,25 +1,48 @@
 <template>
+  <!-- 特色内容列表容器
+    - 应用网格布局、内边距、间距和盒模型样式
+  -->
   <div class="inverted-main-grid py-8 gap-8 box-border">
+    <!-- 特色内容标题区域
+      - 相对定位、溢出隐藏、固定高度（响应式调整）、圆角和阴影样式
+    -->
     <div class="relative overflow-hidden h-56 lg:h-auto rounded-2xl bg-ob-deep-800 shadow-lg">
+      <!-- 标题渐变遮罩层
+        - 应用渐变背景、透明度、定位、内边距和阴影样式
+        - 内容水平左对齐、垂直底部对齐
+      -->
       <div
-        class="ob-gradient-plate opacity-90 relative z-10 bg-ob-deep-900 rounded-2xl flex justify-start items-end px-8 pb-10 shadow-md">
+          class="ob-gradient-plate opacity-90 relative z-10 bg-ob-deep-900 rounded-2xl flex justify-start items-end px-8 pb-10 shadow-md">
         <h2 class="text-3xl pb-8 lg:pb-16">
+          <!-- 编辑精选文字，应用渐变文本样式 -->
           <p :style="gradientText">EDITOR'S SELECTION</p>
+          <!-- 推荐内容标题
+            - 包含热门图标和国际化文本
+          -->
           <span class="relative text-2xl text-ob-bright font-semibold">
             <svg-icon class="inline-block" icon-class="hot" />
             {{ t('home.recommended') }}
           </span>
         </h2>
       </div>
+      <!-- 背景渐变层
+        - 绝对定位，覆盖整个容器，应用主题渐变背景
+      -->
       <span class="absolute top-0 w-full h-full z-0" :style="gradientBackground" />
     </div>
 
+    <!-- 特色文章列表
+      - 网格布局（大屏幕下2列），设置间距
+    -->
     <ul class="grid lg:grid-cols-2 gap-8">
+      <!-- 有特色文章时渲染 -->
       <template v-if="featuredArticles.length > 0">
         <li v-for="article in featuredArticles" :key="article.id">
+          <!-- 文章卡片组件，应用特色文章样式 -->
           <ArticleCard class="home-featured-article" :data="article" />
         </li>
       </template>
+      <!-- 无特色文章时显示2个空卡片占位 -->
       <template v-else>
         <li v-for="n in 2" :key="n">
           <ArticleCard :data="{}" />
@@ -30,28 +53,42 @@
 </template>
 
 <script lang="ts">
-// @ts-nocheck
+// @ts-nocheck 忽略TypeScript类型检查
+// 导入应用状态管理
 import { useAppStore } from '@/stores/app'
+// 导入文章状态管理
 import { useArticleStore } from '@/stores/article'
+// 导入国际化工具
 import { useI18n } from 'vue-i18n'
+// 导入Vue相关API
 import { computed, defineComponent, toRef } from 'vue'
+// 导入文章卡片组件
 import { ArticleCard } from '@/components/ArticleCard'
 
+// 定义FeatureList组件
 export default defineComponent({
-  name: 'FeatureList',
+  name: 'FeatureList', // 组件名称
   components: {
-    ArticleCard
+    ArticleCard // 注册文章卡片子组件
   },
   setup() {
+    // 获取应用状态实例
     const appStore = useAppStore()
+    // 获取文章状态实例
     const articleStore = useArticleStore()
+    // 获取国际化翻译函数
     const { t } = useI18n()
+
     return {
+      // 计算属性：背景渐变样式（从应用配置中获取）
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.header_gradient_css }
       }),
+      // 文本渐变样式（从应用配置中获取）
       gradientText: appStore.themeConfig.background_gradient_style,
+      // 特色文章列表（响应式引用文章状态中的数据）
       featuredArticles: toRef(articleStore.$state, 'featuredArticles'),
+      // 国际化翻译函数
       t
     }
   }
@@ -59,9 +96,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+// 特色文章卡片样式定制
 .home-featured-article {
   .article-content {
     p {
+      // 文本溢出处理：超出4行显示省略号
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
@@ -69,8 +108,9 @@ export default defineComponent({
       -webkit-box-orient: vertical;
     }
     .article-footer {
+      // 调整文章底部区域边距
       margin-top: 13px;
     }
   }
 }
-</style>
+</style>