# AI生成功能页面设计说明

## 设计概述

基于提供的UI界面参考，我们重新设计了AI生成功能页面，采用现代化的四栏布局设计，提供专业的AI内容生成体验。

## 页面布局

### 1. 顶部标题栏
- **标题**: "AI生成"
- **副标题**: "选择素材和模板，使用ComfyUI一键生成营销内容"
- **生成按钮**: 位于右上角，显示已选择项目数量，采用渐变紫色设计

### 2. 四栏布局设计

#### 第一栏：选择原图
- **图标**: 相机图标
- **功能**: 选择原始图片作为AI处理的基础
- **显示**: 已选择数量徽章
- **空状态**: 显示"暂无原图，请先到素材库上传"

#### 第二栏：选择IP形象
- **图标**: 用户图标
- **功能**: 选择IP角色形象用于AI换脸
- **显示**: 已选择数量徽章
- **示例数据**: 
  - sample_image (女性肖像)
  - 眼睛男 (戴眼镜男性)

#### 第三栏：选择服装
- **图标**: 衬衫图标
- **功能**: 选择服装素材用于AI换衣
- **显示**: 已选择数量徽章
- **示例数据**: 白色天丝裙

#### 第四栏：生成配置
- **图标**: 设置图标
- **功能**: 配置AI生成参数和模板

### 3. 生成配置详细功能

#### 任务命名
- 输入框带文件图标
- 占位符文本："输入任务名称..."

#### 任务类型
- 复选框形式
- 选项：换脸、换衣、换背景
- 显示已选择处理类型数量

#### 每组生成数量
- 数字输入框
- 默认值：1
- 范围：1-10

#### 场景模板
- 滚动区域设计
- 标签显示
- 示例：
  - 铃兰花场景 (fashion)
  - 海边风景 (fashion)
  - 城市街拍 (fashion)

#### 文案模板
- 滚动区域设计
- 标签显示
- 示例：
  - 户外穿搭基础模... (outdoor_out...)
  - 产品对比测... (product_comp...)
  - 生活方式分享模板 (lifestyle)

## 交互特性

### 1. 素材选择
- **悬停效果**: 卡片轻微放大
- **选中状态**: 蓝色边框和阴影
- **选中指示**: 右上角蓝色圆形勾选图标

### 2. 模板选择
- **悬停效果**: 轻微放大
- **选中状态**: 蓝色边框和背景
- **选中指示**: 右侧勾选图标

### 3. 生成控制
- **按钮状态**: 根据选择状态启用/禁用
- **进度显示**: 实时显示生成进度
- **任务状态**: 显示当前处理任务

## 技术实现

### 1. 组件架构
- **MaterialCard**: 素材选择卡片组件
- **TemplateItem**: 模板选择组件
- **响应式设计**: 支持桌面和移动端

### 2. 状态管理
- 使用React Hooks管理组件状态
- 分离不同类型的选择状态
- 实时计算选择数量

### 3. 样式系统
- 基于Tailwind CSS
- 使用shadcn/ui组件库
- 渐变色彩设计
- 现代化图标系统

## 用户体验优化

### 1. 视觉反馈
- 悬停和选中状态的视觉反馈
- 加载状态的动画效果
- 进度条实时更新

### 2. 信息层次
- 清晰的信息架构
- 合理的视觉层次
- 直观的操作流程

### 3. 响应式设计
- 桌面端四栏布局
- 移动端单栏堆叠
- 自适应组件尺寸

## 数据流

### 1. 素材数据
```javascript
{
  id: 'unique_id',
  name: '素材名称',
  file_url: '图片URL',
  created_date: '创建时间'
}
```

### 2. 模板数据
```javascript
{
  id: 'template_id',
  name: '模板名称',
  tag: '标签',
  created_date: '创建时间'
}
```

### 3. 生成配置
```javascript
{
  taskName: '任务名称',
  selectedTaskTypes: ['换脸', '换衣', '换背景'],
  quantityPerGroup: 1,
  selectedSceneTemplates: [],
  selectedCopyTemplates: []
}
```

## 扩展性

### 1. 组件复用
- MaterialCard可在其他页面复用
- TemplateItem支持不同类型的模板
- 配置组件可独立使用

### 2. 数据接口
- 支持API数据加载
- 支持本地存储
- 支持实时更新

### 3. 功能扩展
- 支持更多素材类型
- 支持更多模板类型
- 支持自定义配置

## 性能优化

### 1. 组件优化
- 使用React.memo优化渲染
- 合理使用useMemo和useCallback
- 虚拟滚动支持大量数据

### 2. 图片优化
- 懒加载图片
- 压缩图片尺寸
- 缓存机制

### 3. 状态优化
- 避免不必要的重渲染
- 合理的状态分离
- 高效的更新机制

## 开发指南

### 1. 添加新素材类型
1. 在loadMaterials函数中添加新数据
2. 创建对应的状态管理
3. 添加选择逻辑
4. 更新UI显示

### 2. 添加新模板类型
1. 在loadTemplates函数中添加新数据
2. 创建对应的状态管理
3. 添加选择逻辑
4. 更新UI显示

### 3. 自定义样式
1. 修改Tailwind CSS类名
2. 调整组件样式
3. 更新主题色彩
4. 优化响应式布局

## 测试建议

### 1. 功能测试
- 素材选择功能
- 模板选择功能
- 生成配置功能
- 生成流程测试

### 2. 界面测试
- 响应式布局测试
- 交互效果测试
- 视觉一致性测试
- 可访问性测试

### 3. 性能测试
- 大量数据加载测试
- 内存使用测试
- 渲染性能测试
- 网络请求测试