92 lines
4.2 KiB
Markdown
92 lines
4.2 KiB
Markdown
# 组件清单
|
||
|
||
## UI基础组件 (`components/ui/`)
|
||
|
||
| 组件 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| Button | `button.tsx` | 按钮组件 |
|
||
| Card | `card.tsx` | 卡片组件 |
|
||
| Input | `input.tsx` | 输入框组件 |
|
||
| Label | `label.tsx` | 标签组件 |
|
||
| Textarea | `textarea.tsx` | 多行文本框 |
|
||
| Switch | `switch.tsx` | 开关组件 |
|
||
| Tabs | `tabs.tsx` | 标签页组件 |
|
||
|
||
## 业务模块组件 (`components/modules/`)
|
||
|
||
### 认证模块 (`auth/`)
|
||
| 组件 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| AuthModal | `auth-modal.tsx` | 登录/注册弹窗 |
|
||
|
||
### 分销模块 (`referral/`)
|
||
| 组件 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| PosterModal | `poster-modal.tsx` | 推广海报弹窗 |
|
||
| WithdrawalModal | `withdrawal-modal.tsx` | 提现弹窗 |
|
||
|
||
### 分销管理模块 (`distribution/`)
|
||
| 组件 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| AutoWithdrawModal | `auto-withdraw-modal.tsx` | 自动提现设置弹窗 |
|
||
| RealtimeNotification | `realtime-notification.tsx` | 实时通知组件 |
|
||
|
||
## 页面级组件
|
||
|
||
### 支付弹窗
|
||
```
|
||
components/payment-modal.tsx
|
||
```
|
||
功能：
|
||
- 选择支付方式（微信为主）
|
||
- 生成支付二维码
|
||
- 轮询支付状态
|
||
- 支付成功回调
|
||
|
||
### 章节内容
|
||
```
|
||
components/chapter-content.tsx
|
||
```
|
||
功能：
|
||
- Markdown内容渲染
|
||
- 付费墙显示
|
||
- 上下篇导航
|
||
- 分享功能
|
||
|
||
## 组件依赖图
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 页面组件 │
|
||
├─────────────────────────────────────────────────────┤
|
||
│ page.tsx chapters/page.tsx read/[id]/page.tsx │
|
||
│ match/page.tsx my/page.tsx my/referral/page.tsx │
|
||
└───────────────────────┬─────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 业务模块组件 │
|
||
├─────────────────────────────────────────────────────┤
|
||
│ AuthModal PaymentModal PosterModal │
|
||
│ WithdrawalModal AutoWithdrawModal ChapterContent │
|
||
└───────────────────────┬─────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ UI基础组件 │
|
||
├─────────────────────────────────────────────────────┤
|
||
│ Button Card Input Label Switch Tabs │
|
||
└───────────────────────┬─────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 状态管理 & 工具 │
|
||
├─────────────────────────────────────────────────────┤
|
||
│ lib/store.ts (Zustand) lib/book-data.ts │
|
||
│ lib/utils.ts lib/db.ts │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
*文档版本：v2.0 | 更新日期：2026-01-18*
|