组件库参考文档
本文档列出项目中所有组件的详细说明。
导航与布局组件
TabBar.vue - 底部导航栏
位置：src/components/TabBar.vue
功能：固定底部导航栏，自动适配安全区域
关键特性：
- 支持图标 + 文字布局
- 激活状态高亮
使用页面：首页、我的、家办、知识库、签单页面
NavHeader.vue - 自定义导航头
位置：src/components/NavHeader.vue
功能：带返回按钮的自定义导航头
关键特性：
- 透明/背景变体
- 刘海屏设备的安全区域内边距
indexNav.vue - 首页网格导航
位置：src/components/indexNav.vue
功能：首页网格导航
图标与媒体组件
IconFont.vue - 图标字体包装器
位置：src/components/IconFont.vue
功能：自定义图标的图标字体包装器
⚠️ 注意：动态切换时需添加 :key="name"
<IconFont :name="iconName" :key="iconName" />
qrCode.vue - 二维码显示
位置：src/components/qrCode.vue
功能：二维码显示
qrCodeSearch.vue - 二维码扫描
位置：src/components/qrCodeSearch.vue
功能：二维码扫描
列表与展示组件
SectionCard.vue - 分组卡片
位置：src/components/SectionCard.vue
功能：分组卡片组件
SectionItem.vue - 分组列表项
位置：src/components/SectionItem.vue
功能：分组列表项组件
ListItemActions/ - 列表项操作按钮
位置：src/components/list/ListItemActions/
功能：列表项操作按钮组
关键特性：
- 权限检查
- 自动埋点上报
- 查看按钮、收藏按钮等
MaterialCard.vue - 资料卡片（可复用）
位置：src/components/MaterialCard.vue
功能：资料展示卡片
关键特性：
- 自包含业务逻辑：查看、收藏
- 支持动态标签
- 文件大小格式化
- 学习人数显示
- 支持图片文件预览（使用 Taro.previewImage）
使用页面：首页、搜索页、周热门资料页
使用的 Composable：
- useCollectOperation
- useListItemClick
ProductCard.vue - 产品卡片（可复用）
位置：src/components/ProductCard.vue
功能：产品展示卡片
关键特性：
- 自定义样式：动态标签、封面图
- 支持产品详情查看
- 支持计划书功能
使用页面：首页、搜索页、产品中心页
表单与输入组件
FilterTabs.vue - 过滤标签
位置：src/components/FilterTabs.vue
功能：过滤标签组件
SearchBar.vue - 搜索栏
位置：src/components/SearchBar.vue
功能：搜索栏组件
文档预览组件
DocumentPreview/ - 文档预览
位置：src/components/DocumentPreview/
功能：文档预览组件
PdfPreview.vue - PDF 预览
位置：src/components/PdfPreview.vue
功能：PDF 文件预览
OfficeViewer.vue - Office 文档查看器
位置：src/components/OfficeViewer.vue
功能：Office 文档查看
业务组件
PlanSchemes/ - 计划方案
位置：src/components/plan/PlanSchemes/
功能：计划方案组件（SchemeA, SchemeB）
PlanPopup/ - 计划弹窗
位置：src/components/plan/PlanPopup/
功能：计划弹窗组件
关键特性：
- 使用 provide/inject 模式实现父子弹窗通信
- 子弹窗打开时自动隐藏父级 footer
- 支持 AgePicker、DatePicker、SelectPicker 等字段组件
PlanFields/ - 计划书表单字段
位置：src/components/plan/PlanFields/
功能：计划书表单字段组件集
子组件：
-
AgePicker.vue- 年龄选择器 -
AmountInput.vue- 金额输入框 -
DatePicker.vue- 日期选择器 -
SelectPicker.vue- 下拉选择器 -
RadioGroup.vue- 单选按钮组
PlanTemplates/ - 计划模板
位置：src/components/plan/PlanTemplates/
功能：计划模板组件
工具组件
PosterBuilder/ - 海报生成器
位置：src/components/PosterBuilder/
功能：海报生成
time-picker-data/ - 时间选择器数据
位置：src/components/time-picker-data/
功能：时间选择器数据配置
可选功能组件
以下组件如果不需要，可以移除：
-
微信支付：
src/utils/wechatPay.js、src/api/wx/pay.js -
二维码：
src/components/qrCode.vue、src/components/qrCodeSearch.vue -
海报生成器：
src/components/PosterBuilder/ -
时间选择器：
src/components/time-picker-data/
组件使用原则
第 3 次出现原则
当相同代码模式出现 3 次时，必须抽取为组件。
组件自包含原则
对于重复的UI结构，抽取为可复用组件（如 MaterialCard、ProductCard）：
- 组件应该自包含业务逻辑（查看、收藏等）
- 通过事件与父组件通信
- 避免在父组件中重复编写相同的逻辑代码
相关文档
- Composables 参考 - 可复用逻辑