# 上传组件测试页面

## 功能说明

这是一个完整的上传组件测试页面，用于演示和测试各种上传组件的功能。

## 包含的组件

### 1. 图片上传组件 (UploadComponent)

- 支持多图片上传
- 可设置最大上传数量
- 文件类型验证
- 文件大小限制 (5MB)
- 删除确认功能

### 2. 头像上传组件 (AvatarUpload)

- 圆形头像显示
- 支持尺寸调节
- 单张图片上传
- 悬停效果

### 3. 视频上传组件 (VideoUpload)

- 支持视频文件上传
- 文件大小限制 (50MB)
- 上传进度显示

## 测试功能

### 控制面板

- 图片上传数量限制调节 (1-20张)
- 头像尺寸调节 (60-200px)
- 各组件禁用状态切换

### 表单集成测试

- 模拟真实表单场景
- 包含文本输入、文本域、图片、头像、视频上传
- 展示组件在表单中的使用方式

### 操作功能

- 提交表单数据 (输出到控制台)
- 加载模拟数据
- 重置所有数据
- 页面刷新功能

### 数据展示

- 实时显示所有组件的当前状态
- JSON格式展示，便于调试

## 使用Layout组件

页面使用了Layout组件进行布局，包含：

1. **自定义头部**
   - 返回按钮
   - 页面标题和图标
   - 搜索功能
   - 刷新功能

2. **主要内容区域**
   - 响应式设计
   - 滚动支持
   - 加载状态显示

3. **样式特点**
   - 响应式设计
   - 暗色主题支持
   - 现代化UI设计

## 访问方式

访问路径：`/mobile/test/upload`

## 开发说明

### 文件结构

```
src/pages/mobile/test/
├── upload.tsx          # 主测试页面
├── upload.module.scss  # 样式文件
└── README.md          # 说明文档
```

### 依赖组件

- Layout: 页面布局组件
- PopupHeader: 头部搜索组件
- UploadComponent: 图片上传组件
- AvatarUpload: 头像上传组件
- VideoUpload: 视频上传组件

### 技术栈

- React 18
- TypeScript
- Antd Mobile
- SCSS Modules

## 注意事项

1. 上传功能需要配置正确的API地址
2. 文件上传需要有效的认证token
3. 测试数据使用外部图片服务，需要网络连接
4. 建议在移动端环境下测试以获得最佳体验
