docs(components): 补充 ArticleCard 和 PeriodInput 组件文档

- 新增 ArticleCard 组件文档（文章卡片）
- 新增 PeriodInput 组件文档（提取期自定义输入）
- 更新组件索引表格，添加缺失的组件条目

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@@ -51,6 +51,7 @@ import TabBar from '@/components/navigation/TabBar.vue'
 |------|------|-------|
 | [`MaterialCard`](#materialcardvue) | 资料/文档卡片 | title, icon, learners, docType, collected |
 | [`ProductCard`](#productcardvue) | 产品卡片 | name, type, tags, collected |
+| [`ArticleCard`](#articlecardvue) | 文章卡片 | id, title, excerpt, coverUrl, date, learners, readPeoplePercent, collected, showCover |
 
 **使用示例**：
 ```vue
@@ -187,6 +188,7 @@ const htmlContent = '<p>HTML 内容</p>'
 | [`SelectPickerGlobal`](#selectpickerglobalvue) | 选项选择器 |
 | [`AmountKeyboard`](#amountkeyboardvue) | 金额键盘 |
 | [`PaymentPeriodRadio`](#paymentperiodradiovue) | 缴费年期单选 |
+| [`PeriodInput`](#periodinputvue) | 提取期自定义输入 |
 | [`RadioGroup`](#radiogroupvue) | 单选分组 |
 
 #### 模板 (PlanTemplates/)
@@ -322,6 +324,54 @@ emit('change', newValue)
 
 ---
 
+### ArticleCard.vue
+
+文章卡片，展示文章标题、简介、封面图、日期和操作按钮。
+
+**Props**：
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| id | Number/String | - | 文章 ID |
+| title | String | - | 文章标题 |
+| excerpt | String | '' | 文章简介 |
+| coverUrl | String | '' | 封面图 URL |
+| date | String | '' | 发布日期（格式：YYYY-MM-DD HH:mm:ss） |
+| learners | String/Number | '' | 学习人数 |
+| readPeoplePercent | Number | null | 学习人数百分比（热度） |
+| collected | Boolean | false | 是否已收藏 |
+| showCover | Boolean | false | 是否显示封面图 |
+
+**Events**：
+| Event | 说明 | 参数 |
+|-------|------|------|
+| viewed | 查看文章时触发 | { id } |
+| collectChanged | 收藏状态改变时触发 | { id, title, excerpt, coverUrl, date, collected } |
+
+**使用示例**：
+```vue
+<template>
+  <ArticleCard
+    :id="article.id"
+    :title="article.title"
+    :excerpt="article.excerpt"
+    :cover-url="article.coverUrl"
+    :date="article.createdAt"
+    :learners="article.learners"
+    :read-people-percent="article.readPeoplePercent"
+    :collected="article.collected"
+    :show-cover="true"
+    @viewed="handleViewed"
+    @collect-changed="handleCollectChanged"
+  />
+</template>
+
+<script setup>
+import ArticleCard from '@/components/cards/ArticleCard.vue'
+</script>
+```
+
+---
+
 ### MaterialCard.vue
 
 资料/文档卡片，展示资料信息和操作按钮。
@@ -441,6 +491,71 @@ const handleFileClick = ({ url, fileName }) => {
 
 ---
 
+### PeriodInput.vue
+
+提取期自定义输入组件，支持整数年期和快捷选项（终身、一笔过）。
+
+**Props**：
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | Boolean | false | 弹窗显示状态（v-model:visible） |
+| modelValue | String | '' | 绑定的值（v-model） |
+| label | String | '' | 标签文本 |
+| required | Boolean | false | 是否必填 |
+| placeholder | String | '请选择或输入提取期' | 占位符文本 |
+| inputLabel | String | '请输入提取期' | 弹窗内输入提示文本 |
+| inputPlaceholder | String | '请输入年数' | 输入框占位符 |
+| validationRules | Object | { min: 1, max: 100, ... } | 验证规则 |
+| hideTrigger | Boolean | false | 是否隐藏触发区域 |
+
+**Events**：
+| Event | 说明 | 参数 |
+|-------|------|------|
+| update:visible | 更新弹窗显示状态 | boolean |
+| update:modelValue | 更新绑定值 | string |
+| confirm | 确认输入 | string（确认的提取期值） |
+| cancel | 取消输入 | - |
+
+**功能特性**：
+- 整数年期约束（1-100年）
+- 快捷选项：终身、一笔过
+- 实时验证输入格式
+- 可扩展的验证器接口
+- 支持全局弹窗管理
+
+**使用示例**：
+```vue
+<template>
+  <PeriodInput
+    v-model:visible="showPeriodInput"
+    v-model="periodValue"
+    label="提取期"
+    input-label="请输入提取期"
+    :validation-rules="{ min: 1, max: 100 }"
+    @confirm="handlePeriodConfirm"
+    @cancel="handleCancel"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import PeriodInput from '@/components/plan/PlanFields/PeriodInput.vue'
+
+const showPeriodInput = ref(false)
+const periodValue = ref('')
+
+const handlePeriodConfirm = (value) => {
+  console.log('确认提取期:', value)
+}
+
+const handleCancel = () => {
+  console.log('取消输入')
+}
+</script>
+```
+
+---
+
 ## 📖 最佳实践
 
 ### 组件抽取原则