# 素材库功能说明

## 概述

素材库是一个专业的图片素材管理页面，完全按照设计图实现，支持上传、浏览、编辑和删除素材。

## 功能特性

### 1. 页面布局
- **页面标题**: "素材库" - 上传、浏览和管理所有基础图片素材
- **导航标签**: 三个主要分类
  - IP素材 (人脸) - 管理人脸图片素材
  - 产品素材 (服装) - 管理服装产品素材  
  - 上传原图 - 通用上传功能

### 2. 上传功能
- **拖拽上传**: 支持拖拽文件到上传区域
- **点击上传**: 点击上传区域或"浏览文件"按钮选择文件
- **文件限制**: 
  - 支持格式: PNG, JPG, JPEG
  - 文件大小: 不超过200MB
- **批量上传**: 支持同时选择多个文件上传

### 3. 素材管理
- **素材展示**: 网格布局展示所有上传的素材
- **素材信息**: 显示素材名称、类型、上传时间
- **编辑功能**: 点击编辑按钮可以修改素材名称
- **删除功能**: 悬停显示删除按钮，支持删除素材
- **AI标签**: 人脸素材显示"AI生成"标签

### 4. 后端集成
- **API接口**: 完全集成后端user_material_api.py
- **认证支持**: 支持用户认证和权限验证
- **实时同步**: 上传、编辑、删除操作实时同步到后端

## 技术实现

### 前端技术栈
- **React 18**: 使用函数式组件和Hooks
- **Tailwind CSS**: 响应式设计和现代UI
- **Radix UI**: 高质量UI组件库
- **Lucide React**: 图标库
- **Sonner**: 现代化Toast通知

### 后端API
- **FastAPI**: 高性能Python Web框架
- **SQLAlchemy**: ORM数据库操作
- **文件存储**: 本地文件系统存储
- **权限验证**: 用户认证和授权

### 核心组件

#### MaterialLibrary.jsx
主页面组件，包含：
- 页面布局和导航
- 文件上传处理
- 素材数据管理
- 与后端API交互

#### MaterialCard.jsx
素材卡片组件，包含：
- 图片展示
- 编辑名称功能
- 删除功能
- AI生成标签

#### materials.js
API接口封装，包含：
- 上传素材接口
- 获取素材列表
- 删除素材
- 更新素材信息

## 使用流程

### 1. 访问素材库
- 登录系统后，点击侧边栏"素材库"菜单
- 页面将显示当前用户的素材列表

### 2. 上传素材
- 选择对应的素材类型标签（人脸/产品）
- 拖拽文件到上传区域或点击"浏览文件"
- 选择支持格式的图片文件
- 等待上传完成，素材将显示在列表中

### 3. 管理素材
- **查看素材**: 素材以网格形式展示
- **编辑名称**: 点击素材下方的编辑按钮修改名称
- **删除素材**: 悬停在素材上显示删除按钮
- **切换类型**: 点击不同标签查看对应类型的素材

### 4. 素材分类
- **IP素材 (人脸)**: 管理人脸图片，用于AI换脸
- **产品素材 (服装)**: 管理服装图片，用于AI换装
- **上传原图**: 通用上传功能

## API接口说明

### 上传素材
```
POST /api/v1/users/{user_id}/materials
Content-Type: multipart/form-data

参数:
- file: 图片文件
- image_type: 素材类型 (face/cloth)
- original_filename: 原始文件名
```

### 获取素材列表
```
GET /api/v1/users/{user_id}/materials?material_type={type}&page={page}&page_size={size}
```

### 删除素材
```
DELETE /api/v1/users/{user_id}/materials/{material_id}
```

### 更新素材
```
PUT /api/v1/users/{user_id}/materials/{material_id}
Content-Type: application/json

参数:
- original_filename: 新的文件名
```

## 开发说明

### 环境要求
- Node.js 18+
- Python 3.8+
- FastAPI
- SQLAlchemy

### 启动开发环境
```bash
# 启动后端服务
cd backend
python -m uvicorn backend.api.ai_swap_api:app --reload --host 0.0.0.0 --port 8000

# 启动前端服务
cd frontend
npm run dev
```

### 访问地址
- 前端: http://localhost:5173
- 后端API: http://localhost:8000
- API文档: http://localhost:8000/docs

## 注意事项

1. **文件大小限制**: 单个文件不能超过200MB
2. **文件格式**: 仅支持PNG、JPG、JPEG格式
3. **用户权限**: 只能管理自己的素材
4. **网络连接**: 上传大文件需要稳定的网络连接
5. **存储空间**: 注意服务器存储空间的使用

## 故障排除

### 常见问题

1. **上传失败**
   - 检查文件格式是否正确
   - 检查文件大小是否超限
   - 检查网络连接是否正常

2. **图片无法显示**
   - 检查图片文件是否完整
   - 检查服务器存储路径是否正确

3. **编辑失败**
   - 检查用户权限是否正确
   - 检查素材ID是否存在

4. **删除失败**
   - 检查素材是否被其他功能使用
   - 检查用户权限是否正确

### 日志查看
- 前端控制台: 浏览器开发者工具
- 后端日志: backend/logs/ 目录
- API日志: 查看FastAPI启动时的日志输出