# 组件清单

## 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*