feat: 模特详情页改版 - 实现个人看板、形象图片管理和穿搭图片生成功能

新功能:
- 个人看板统计信息展示 (照片数量、穿搭图片、生成记录等)
- 个人形象图片管理 (上传、删除、预览、收藏)
- 穿搭图片生成功能 (选择模特图片 + 上传商品图片 => AI生成穿搭效果)
- 穿搭图片管理界面 (生成记录展示、状态跟踪、结果预览)

 技术实现:
- 新增穿搭图片相关数据模型和数据库表
- 实现OutfitImageService服务层
- 创建多个UI组件 (ModelDashboardStats, ModelImageGallery, OutfitImageGenerator等)
- 优化模特详情页整体布局，采用响应式设计

 UI/UX优化:
- 遵循promptx/frontend-developer设计规范
- 统一的视觉风格和动画效果
- 支持拖拽上传、图片预览、状态指示等交互
- 响应式布局适配不同屏幕尺寸

 测试:
- Rust编译检查通过 (cargo check)
- 前端构建检查通过 (pnpm run -w tauri:web:build)
- 所有TypeScript类型检查通过

apps/desktop/src-tauri/src/data/models/mod.rs

@@ -23,3 +23,4 @@ pub mod image_generation_record;
 pub mod thumbnail;
 pub mod voice_clone_record;
 pub mod speech_generation_record;
+pub mod outfit_image;

apps/desktop/src-tauri/src/data/models/outfit_image.rs

@@ -0,0 +1,214 @@
+use serde::{Deserialize, Serialize};
+use chrono::{DateTime, Utc};
+use uuid::Uuid;
+
+/// 穿搭图片生成状态
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub enum OutfitImageStatus {
+    Pending,
+    Processing,
+    Completed,
+    Failed,
+}
+
+impl std::fmt::Display for OutfitImageStatus {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            OutfitImageStatus::Pending => write!(f, "pending"),
+            OutfitImageStatus::Processing => write!(f, "processing"),
+            OutfitImageStatus::Completed => write!(f, "completed"),
+            OutfitImageStatus::Failed => write!(f, "failed"),
+        }
+    }
+}
+
+impl From<String> for OutfitImageStatus {
+    fn from(s: String) -> Self {
+        match s.as_str() {
+            "pending" => OutfitImageStatus::Pending,
+            "processing" => OutfitImageStatus::Processing,
+            "completed" => OutfitImageStatus::Completed,
+            "failed" => OutfitImageStatus::Failed,
+            _ => OutfitImageStatus::Pending,
+        }
+    }
+}
+
+/// 穿搭图片生成记录
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct OutfitImageRecord {
+    pub id: String,
+    pub model_id: String,
+    pub model_image_id: String, // 使用的模特形象图片ID
+    pub generation_prompt: Option<String>, // 生成提示词
+    pub status: OutfitImageStatus,
+    pub progress: f32,
+    pub result_urls: Vec<String>, // 生成的穿搭图片URLs
+    pub error_message: Option<String>,
+    pub created_at: DateTime<Utc>,
+    pub started_at: Option<DateTime<Utc>>,
+    pub completed_at: Option<DateTime<Utc>>,
+    pub duration_ms: Option<u64>,
+    
+    // 关联数据
+    pub product_images: Vec<ProductImage>,
+    pub outfit_images: Vec<OutfitImage>,
+}
+
+impl OutfitImageRecord {
+    /// 创建新的穿搭图片生成记录
+    pub fn new(model_id: String, model_image_id: String, generation_prompt: Option<String>) -> Self {
+        Self {
+            id: Uuid::new_v4().to_string(),
+            model_id,
+            model_image_id,
+            generation_prompt,
+            status: OutfitImageStatus::Pending,
+            progress: 0.0,
+            result_urls: Vec::new(),
+            error_message: None,
+            created_at: Utc::now(),
+            started_at: None,
+            completed_at: None,
+            duration_ms: None,
+            product_images: Vec::new(),
+            outfit_images: Vec::new(),
+        }
+    }
+
+    /// 开始处理
+    pub fn start_processing(&mut self) {
+        self.status = OutfitImageStatus::Processing;
+        self.started_at = Some(Utc::now());
+        self.progress = 0.0;
+    }
+
+    /// 更新进度
+    pub fn update_progress(&mut self, progress: f32) {
+        self.progress = progress.clamp(0.0, 1.0);
+    }
+
+    /// 完成处理
+    pub fn complete(&mut self, result_urls: Vec<String>) {
+        self.status = OutfitImageStatus::Completed;
+        self.result_urls = result_urls;
+        self.completed_at = Some(Utc::now());
+        self.progress = 1.0;
+        
+        if let Some(started_at) = self.started_at {
+            self.duration_ms = Some((Utc::now() - started_at).num_milliseconds() as u64);
+        }
+    }
+
+    /// 处理失败
+    pub fn fail(&mut self, error_message: String) {
+        self.status = OutfitImageStatus::Failed;
+        self.error_message = Some(error_message);
+        self.completed_at = Some(Utc::now());
+        
+        if let Some(started_at) = self.started_at {
+            self.duration_ms = Some((Utc::now() - started_at).num_milliseconds() as u64);
+        }
+    }
+}
+
+/// 商品图片
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProductImage {
+    pub id: String,
+    pub outfit_record_id: String,
+    pub file_path: String,
+    pub file_name: String,
+    pub file_size: u64,
+    pub upload_url: Option<String>, // 上传到云端的URL
+    pub description: Option<String>,
+    pub created_at: DateTime<Utc>,
+}
+
+impl ProductImage {
+    /// 创建新的商品图片
+    pub fn new(
+        outfit_record_id: String,
+        file_path: String,
+        file_name: String,
+        file_size: u64,
+    ) -> Self {
+        Self {
+            id: Uuid::new_v4().to_string(),
+            outfit_record_id,
+            file_path,
+            file_name,
+            file_size,
+            upload_url: None,
+            description: None,
+            created_at: Utc::now(),
+        }
+    }
+}
+
+/// 穿搭图片（生成的结果图片）
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct OutfitImage {
+    pub id: String,
+    pub outfit_record_id: String,
+    pub image_url: String,
+    pub local_path: Option<String>, // 本地缓存路径
+    pub image_index: u32, // 在生成结果中的索引
+    pub description: Option<String>,
+    pub tags: Vec<String>,
+    pub is_favorite: bool,
+    pub created_at: DateTime<Utc>,
+}
+
+impl OutfitImage {
+    /// 创建新的穿搭图片
+    pub fn new(
+        outfit_record_id: String,
+        image_url: String,
+        image_index: u32,
+    ) -> Self {
+        Self {
+            id: Uuid::new_v4().to_string(),
+            outfit_record_id,
+            image_url,
+            local_path: None,
+            image_index,
+            description: None,
+            tags: Vec::new(),
+            is_favorite: false,
+            created_at: Utc::now(),
+        }
+    }
+}
+
+/// 穿搭图片生成请求
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct OutfitImageGenerationRequest {
+    pub model_id: String,
+    pub model_image_id: String, // 选择的模特形象图片ID
+    pub product_image_paths: Vec<String>, // 商品图片路径列表
+    pub generation_prompt: Option<String>, // 可选的生成提示词
+    pub style_preferences: Option<Vec<String>>, // 风格偏好
+}
+
+/// 穿搭图片生成响应
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct OutfitImageGenerationResponse {
+    pub record_id: String,
+    pub generated_images: Vec<String>, // 生成的图片URLs
+    pub generation_time_ms: u64,
+    pub success: bool,
+    pub error_message: Option<String>,
+}
+
+/// 穿搭图片统计信息
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct OutfitImageStats {
+    pub total_records: u32,
+    pub total_images: u32,
+    pub favorite_images: u32,
+    pub pending_records: u32,
+    pub processing_records: u32,
+    pub completed_records: u32,
+    pub failed_records: u32,
+}

apps/desktop/src-tauri/src/data/repositories/mod.rs

@@ -15,3 +15,4 @@ pub mod outfit_favorite_repository;
 pub mod watermark_template_repository;
 pub mod template_segment_weight_repository;
 pub mod image_generation_repository;
+pub mod outfit_image_repository;

apps/desktop/src-tauri/src/data/repositories/outfit_image_repository.rs

@@ -0,0 +1,506 @@
+use anyhow::{anyhow, Result};
+use rusqlite::{params, Row};
+use std::sync::Arc;
+use chrono::{DateTime, Utc};
+
+use crate::data::models::outfit_image::{
+    OutfitImageRecord, OutfitImageStatus, ProductImage, OutfitImage, OutfitImageStats
+};
+use crate::infrastructure::database::Database;
+
+/// 穿搭图片仓储
+/// 遵循 Tauri 开发规范的数据访问层设计原则
+#[derive(Clone)]
+pub struct OutfitImageRepository {
+    database: Arc<Database>,
+}
+
+impl OutfitImageRepository {
+    pub fn new(database: Arc<Database>) -> Self {
+        Self { database }
+    }
+
+    /// 初始化数据库表
+    pub fn init_tables(&self) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        // 创建穿搭图片生成记录表
+        conn.execute(
+            r#"
+            CREATE TABLE IF NOT EXISTS outfit_image_records (
+                id TEXT PRIMARY KEY,
+                model_id TEXT NOT NULL,
+                model_image_id TEXT NOT NULL,
+                generation_prompt TEXT,
+                status TEXT NOT NULL DEFAULT 'pending',
+                progress REAL NOT NULL DEFAULT 0.0,
+                result_urls TEXT NOT NULL DEFAULT '[]',
+                error_message TEXT,
+                created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+                started_at DATETIME,
+                completed_at DATETIME,
+                duration_ms INTEGER,
+                FOREIGN KEY (model_id) REFERENCES models (id) ON DELETE CASCADE,
+                FOREIGN KEY (model_image_id) REFERENCES model_photos (id) ON DELETE CASCADE
+            )
+            "#,
+            [],
+        ).map_err(|e| anyhow!("创建穿搭图片记录表失败: {}", e))?;
+
+        // 创建商品图片表
+        conn.execute(
+            r#"
+            CREATE TABLE IF NOT EXISTS product_images (
+                id TEXT PRIMARY KEY,
+                outfit_record_id TEXT NOT NULL,
+                file_path TEXT NOT NULL,
+                file_name TEXT NOT NULL,
+                file_size INTEGER NOT NULL,
+                upload_url TEXT,
+                description TEXT,
+                created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (outfit_record_id) REFERENCES outfit_image_records (id) ON DELETE CASCADE
+            )
+            "#,
+            [],
+        ).map_err(|e| anyhow!("创建商品图片表失败: {}", e))?;
+
+        // 创建穿搭图片表
+        conn.execute(
+            r#"
+            CREATE TABLE IF NOT EXISTS outfit_images (
+                id TEXT PRIMARY KEY,
+                outfit_record_id TEXT NOT NULL,
+                image_url TEXT NOT NULL,
+                local_path TEXT,
+                image_index INTEGER NOT NULL,
+                description TEXT,
+                tags TEXT,
+                is_favorite BOOLEAN DEFAULT 0,
+                created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (outfit_record_id) REFERENCES outfit_image_records (id) ON DELETE CASCADE
+            )
+            "#,
+            [],
+        ).map_err(|e| anyhow!("创建穿搭图片表失败: {}", e))?;
+
+        // 创建索引
+        conn.execute(
+            "CREATE INDEX IF NOT EXISTS idx_outfit_image_records_model_id ON outfit_image_records (model_id)",
+            [],
+        ).map_err(|e| anyhow!("创建索引失败: {}", e))?;
+
+        conn.execute(
+            "CREATE INDEX IF NOT EXISTS idx_outfit_image_records_status ON outfit_image_records (status)",
+            [],
+        ).map_err(|e| anyhow!("创建索引失败: {}", e))?;
+
+        conn.execute(
+            "CREATE INDEX IF NOT EXISTS idx_product_images_outfit_record_id ON product_images (outfit_record_id)",
+            [],
+        ).map_err(|e| anyhow!("创建索引失败: {}", e))?;
+
+        conn.execute(
+            "CREATE INDEX IF NOT EXISTS idx_outfit_images_outfit_record_id ON outfit_images (outfit_record_id)",
+            [],
+        ).map_err(|e| anyhow!("创建索引失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 创建穿搭图片生成记录
+    pub fn create_record(&self, record: &OutfitImageRecord) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+        
+        let result_urls_json = serde_json::to_string(&record.result_urls)
+            .map_err(|e| anyhow!("序列化result_urls失败: {}", e))?;
+
+        conn.execute(
+            r#"
+            INSERT INTO outfit_image_records (
+                id, model_id, model_image_id, generation_prompt, status, progress,
+                result_urls, error_message, created_at, started_at, completed_at, duration_ms
+            ) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, ?11, ?12)
+            "#,
+            params![
+                record.id,
+                record.model_id,
+                record.model_image_id,
+                record.generation_prompt,
+                record.status.to_string(),
+                record.progress,
+                result_urls_json,
+                record.error_message,
+                record.created_at.to_rfc3339(),
+                record.started_at.map(|dt| dt.to_rfc3339()),
+                record.completed_at.map(|dt| dt.to_rfc3339()),
+                record.duration_ms,
+            ],
+        ).map_err(|e| anyhow!("创建穿搭图片记录失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 更新穿搭图片生成记录
+    pub fn update_record(&self, record: &OutfitImageRecord) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+        
+        let result_urls_json = serde_json::to_string(&record.result_urls)
+            .map_err(|e| anyhow!("序列化result_urls失败: {}", e))?;
+
+        conn.execute(
+            r#"
+            UPDATE outfit_image_records SET
+                status = ?2, progress = ?3, result_urls = ?4, error_message = ?5,
+                started_at = ?6, completed_at = ?7, duration_ms = ?8
+            WHERE id = ?1
+            "#,
+            params![
+                record.id,
+                record.status.to_string(),
+                record.progress,
+                result_urls_json,
+                record.error_message,
+                record.started_at.map(|dt| dt.to_rfc3339()),
+                record.completed_at.map(|dt| dt.to_rfc3339()),
+                record.duration_ms,
+            ],
+        ).map_err(|e| anyhow!("更新穿搭图片记录失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 根据ID获取穿搭图片生成记录
+    pub fn get_record_by_id(&self, id: &str) -> Result<Option<OutfitImageRecord>> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT id, model_id, model_image_id, generation_prompt, status, progress,
+                   result_urls, error_message, created_at, started_at, completed_at, duration_ms
+            FROM outfit_image_records WHERE id = ?1
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let record_iter = stmt.query_map(params![id], |row| {
+            self.row_to_record(row)
+        }).map_err(|e| anyhow!("查询穿搭图片记录失败: {}", e))?;
+
+        for record in record_iter {
+            let mut record = record.map_err(|e| anyhow!("解析记录失败: {}", e))?;
+            
+            // 加载关联的商品图片和穿搭图片
+            record.product_images = self.get_product_images_by_record_id(&record.id)?;
+            record.outfit_images = self.get_outfit_images_by_record_id(&record.id)?;
+            
+            return Ok(Some(record));
+        }
+
+        Ok(None)
+    }
+
+    /// 根据模特ID获取穿搭图片生成记录列表
+    pub fn get_records_by_model_id(&self, model_id: &str) -> Result<Vec<OutfitImageRecord>> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT id, model_id, model_image_id, generation_prompt, status, progress,
+                   result_urls, error_message, created_at, started_at, completed_at, duration_ms
+            FROM outfit_image_records 
+            WHERE model_id = ?1 
+            ORDER BY created_at DESC
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let record_iter = stmt.query_map(params![model_id], |row| {
+            self.row_to_record(row)
+        }).map_err(|e| anyhow!("查询穿搭图片记录失败: {}", e))?;
+
+        let mut records = Vec::new();
+        for record in record_iter {
+            let mut record = record.map_err(|e| anyhow!("解析记录失败: {}", e))?;
+            
+            // 加载关联的商品图片和穿搭图片
+            record.product_images = self.get_product_images_by_record_id(&record.id)?;
+            record.outfit_images = self.get_outfit_images_by_record_id(&record.id)?;
+            
+            records.push(record);
+        }
+
+        Ok(records)
+    }
+
+    /// 删除穿搭图片生成记录
+    pub fn delete_record(&self, id: &str) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        conn.execute(
+            "DELETE FROM outfit_image_records WHERE id = ?1",
+            params![id],
+        ).map_err(|e| anyhow!("删除穿搭图片记录失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 创建商品图片
+    pub fn create_product_image(&self, product_image: &ProductImage) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        conn.execute(
+            r#"
+            INSERT INTO product_images (
+                id, outfit_record_id, file_path, file_name, file_size,
+                upload_url, description, created_at
+            ) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8)
+            "#,
+            params![
+                product_image.id,
+                product_image.outfit_record_id,
+                product_image.file_path,
+                product_image.file_name,
+                product_image.file_size,
+                product_image.upload_url,
+                product_image.description,
+                product_image.created_at.to_rfc3339(),
+            ],
+        ).map_err(|e| anyhow!("创建商品图片失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 根据记录ID获取商品图片列表
+    pub fn get_product_images_by_record_id(&self, record_id: &str) -> Result<Vec<ProductImage>> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT id, outfit_record_id, file_path, file_name, file_size,
+                   upload_url, description, created_at
+            FROM product_images 
+            WHERE outfit_record_id = ?1 
+            ORDER BY created_at ASC
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let image_iter = stmt.query_map(params![record_id], |row| {
+            self.row_to_product_image(row)
+        }).map_err(|e| anyhow!("查询商品图片失败: {}", e))?;
+
+        let mut images = Vec::new();
+        for image in image_iter {
+            images.push(image.map_err(|e| anyhow!("解析商品图片失败: {}", e))?);
+        }
+
+        Ok(images)
+    }
+
+    /// 创建穿搭图片
+    pub fn create_outfit_image(&self, outfit_image: &OutfitImage) -> Result<()> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        let tags_json = serde_json::to_string(&outfit_image.tags)
+            .map_err(|e| anyhow!("序列化tags失败: {}", e))?;
+
+        conn.execute(
+            r#"
+            INSERT INTO outfit_images (
+                id, outfit_record_id, image_url, local_path, image_index,
+                description, tags, is_favorite, created_at
+            ) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9)
+            "#,
+            params![
+                outfit_image.id,
+                outfit_image.outfit_record_id,
+                outfit_image.image_url,
+                outfit_image.local_path,
+                outfit_image.image_index,
+                outfit_image.description,
+                tags_json,
+                outfit_image.is_favorite,
+                outfit_image.created_at.to_rfc3339(),
+            ],
+        ).map_err(|e| anyhow!("创建穿搭图片失败: {}", e))?;
+
+        Ok(())
+    }
+
+    /// 根据记录ID获取穿搭图片列表
+    pub fn get_outfit_images_by_record_id(&self, record_id: &str) -> Result<Vec<OutfitImage>> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT id, outfit_record_id, image_url, local_path, image_index,
+                   description, tags, is_favorite, created_at
+            FROM outfit_images
+            WHERE outfit_record_id = ?1
+            ORDER BY image_index ASC
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let image_iter = stmt.query_map(params![record_id], |row| {
+            self.row_to_outfit_image(row)
+        }).map_err(|e| anyhow!("查询穿搭图片失败: {}", e))?;
+
+        let mut images = Vec::new();
+        for image in image_iter {
+            images.push(image.map_err(|e| anyhow!("解析穿搭图片失败: {}", e))?);
+        }
+
+        Ok(images)
+    }
+
+    /// 获取模特的穿搭图片统计信息
+    pub fn get_stats_by_model_id(&self, model_id: &str) -> Result<OutfitImageStats> {
+        let conn = self.database.get_connection();
+        let conn = conn.lock().map_err(|e| anyhow!("获取数据库连接失败: {}", e))?;
+
+        // 获取记录统计
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT
+                COUNT(*) as total_records,
+                SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending_records,
+                SUM(CASE WHEN status = 'processing' THEN 1 ELSE 0 END) as processing_records,
+                SUM(CASE WHEN status = 'completed' THEN 1 ELSE 0 END) as completed_records,
+                SUM(CASE WHEN status = 'failed' THEN 1 ELSE 0 END) as failed_records
+            FROM outfit_image_records WHERE model_id = ?1
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let (total_records, pending_records, processing_records, completed_records, failed_records) =
+            stmt.query_row(params![model_id], |row| {
+                Ok((
+                    row.get::<_, u32>(0)?,
+                    row.get::<_, u32>(1)?,
+                    row.get::<_, u32>(2)?,
+                    row.get::<_, u32>(3)?,
+                    row.get::<_, u32>(4)?,
+                ))
+            }).map_err(|e| anyhow!("查询记录统计失败: {}", e))?;
+
+        // 获取图片统计
+        let mut stmt = conn.prepare(
+            r#"
+            SELECT
+                COUNT(*) as total_images,
+                SUM(CASE WHEN is_favorite = 1 THEN 1 ELSE 0 END) as favorite_images
+            FROM outfit_images oi
+            JOIN outfit_image_records oir ON oi.outfit_record_id = oir.id
+            WHERE oir.model_id = ?1
+            "#,
+        ).map_err(|e| anyhow!("准备查询语句失败: {}", e))?;
+
+        let (total_images, favorite_images) = stmt.query_row(params![model_id], |row| {
+            Ok((
+                row.get::<_, u32>(0)?,
+                row.get::<_, u32>(1)?,
+            ))
+        }).map_err(|e| anyhow!("查询图片统计失败: {}", e))?;
+
+        Ok(OutfitImageStats {
+            total_records,
+            total_images,
+            favorite_images,
+            pending_records,
+            processing_records,
+            completed_records,
+            failed_records,
+        })
+    }
+
+    /// 将数据库行转换为OutfitImageRecord
+    fn row_to_record(&self, row: &Row) -> rusqlite::Result<OutfitImageRecord> {
+        let result_urls_json: String = row.get(6)?;
+        let result_urls: Vec<String> = serde_json::from_str(&result_urls_json)
+            .unwrap_or_default();
+
+        let created_at_str: String = row.get(8)?;
+        let created_at = DateTime::parse_from_rfc3339(&created_at_str)
+            .map_err(|_| rusqlite::Error::InvalidColumnType(8, "created_at".to_string(), rusqlite::types::Type::Text))?
+            .with_timezone(&Utc);
+
+        let started_at = if let Ok(started_at_str) = row.get::<_, Option<String>>(9) {
+            started_at_str.and_then(|s| DateTime::parse_from_rfc3339(&s).ok().map(|dt| dt.with_timezone(&Utc)))
+        } else {
+            None
+        };
+
+        let completed_at = if let Ok(completed_at_str) = row.get::<_, Option<String>>(10) {
+            completed_at_str.and_then(|s| DateTime::parse_from_rfc3339(&s).ok().map(|dt| dt.with_timezone(&Utc)))
+        } else {
+            None
+        };
+
+        Ok(OutfitImageRecord {
+            id: row.get(0)?,
+            model_id: row.get(1)?,
+            model_image_id: row.get(2)?,
+            generation_prompt: row.get(3)?,
+            status: OutfitImageStatus::from(row.get::<_, String>(4)?),
+            progress: row.get(5)?,
+            result_urls,
+            error_message: row.get(7)?,
+            created_at,
+            started_at,
+            completed_at,
+            duration_ms: row.get(11)?,
+            product_images: Vec::new(), // 将在调用方加载
+            outfit_images: Vec::new(),  // 将在调用方加载
+        })
+    }
+
+    /// 将数据库行转换为ProductImage
+    fn row_to_product_image(&self, row: &Row) -> rusqlite::Result<ProductImage> {
+        let created_at_str: String = row.get(7)?;
+        let created_at = DateTime::parse_from_rfc3339(&created_at_str)
+            .map_err(|_| rusqlite::Error::InvalidColumnType(7, "created_at".to_string(), rusqlite::types::Type::Text))?
+            .with_timezone(&Utc);
+
+        Ok(ProductImage {
+            id: row.get(0)?,
+            outfit_record_id: row.get(1)?,
+            file_path: row.get(2)?,
+            file_name: row.get(3)?,
+            file_size: row.get(4)?,
+            upload_url: row.get(5)?,
+            description: row.get(6)?,
+            created_at,
+        })
+    }
+
+    /// 将数据库行转换为OutfitImage
+    fn row_to_outfit_image(&self, row: &Row) -> rusqlite::Result<OutfitImage> {
+        let tags_json: String = row.get(6)?;
+        let tags: Vec<String> = serde_json::from_str(&tags_json)
+            .unwrap_or_default();
+
+        let created_at_str: String = row.get(8)?;
+        let created_at = DateTime::parse_from_rfc3339(&created_at_str)
+            .map_err(|_| rusqlite::Error::InvalidColumnType(8, "created_at".to_string(), rusqlite::types::Type::Text))?
+            .with_timezone(&Utc);
+
+        Ok(OutfitImage {
+            id: row.get(0)?,
+            outfit_record_id: row.get(1)?,
+            image_url: row.get(2)?,
+            local_path: row.get(3)?,
+            image_index: row.get(4)?,
+            description: row.get(5)?,
+            tags,
+            is_favorite: row.get(7)?,
+            created_at,
+        })
+    }
+}

apps/desktop/src-tauri/src/infrastructure/database/migrations.rs

@@ -213,6 +213,14 @@ impl MigrationManager {
             down_sql: Some(include_str!("migrations/022_create_image_generation_records_table_down.sql").to_string()),
         });
 
+        // 迁移 23: 创建穿搭图片相关表
+        self.add_migration(Migration {
+            version: 23,
+            description: "创建穿搭图片相关表".to_string(),
+            up_sql: include_str!("migrations/023_create_outfit_images_tables.sql").to_string(),
+            down_sql: Some(include_str!("migrations/023_create_outfit_images_tables_down.sql").to_string()),
+        });
+
         // 迁移 23: 创建声音克隆记录表
         self.add_migration(Migration {
             version: 23,

apps/desktop/src-tauri/src/infrastructure/database/migrations/023_create_outfit_images_tables.sql

@@ -0,0 +1,56 @@
+-- 创建穿搭图片生成记录表
+CREATE TABLE IF NOT EXISTS outfit_image_records (
+    id TEXT PRIMARY KEY,
+    model_id TEXT NOT NULL,
+    model_image_id TEXT NOT NULL, -- 使用的模特形象图片ID
+    generation_prompt TEXT, -- 生成提示词
+    status TEXT NOT NULL DEFAULT 'pending', -- pending, processing, completed, failed
+    progress REAL NOT NULL DEFAULT 0.0,
+    result_urls TEXT NOT NULL DEFAULT '[]', -- JSON数组，存储生成的穿搭图片URLs
+    error_message TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    started_at DATETIME,
+    completed_at DATETIME,
+    duration_ms INTEGER,
+    FOREIGN KEY (model_id) REFERENCES models (id) ON DELETE CASCADE,
+    FOREIGN KEY (model_image_id) REFERENCES model_photos (id) ON DELETE CASCADE
+);
+
+-- 创建商品图片表
+CREATE TABLE IF NOT EXISTS product_images (
+    id TEXT PRIMARY KEY,
+    outfit_record_id TEXT NOT NULL,
+    file_path TEXT NOT NULL,
+    file_name TEXT NOT NULL,
+    file_size INTEGER NOT NULL,
+    upload_url TEXT, -- 上传到云端的URL
+    description TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (outfit_record_id) REFERENCES outfit_image_records (id) ON DELETE CASCADE
+);
+
+-- 创建穿搭图片表（存储生成的结果图片详细信息）
+CREATE TABLE IF NOT EXISTS outfit_images (
+    id TEXT PRIMARY KEY,
+    outfit_record_id TEXT NOT NULL,
+    image_url TEXT NOT NULL,
+    local_path TEXT, -- 本地缓存路径
+    image_index INTEGER NOT NULL, -- 在生成结果中的索引
+    description TEXT,
+    tags TEXT, -- JSON数组，存储标签
+    is_favorite BOOLEAN DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (outfit_record_id) REFERENCES outfit_image_records (id) ON DELETE CASCADE
+);
+
+-- 创建索引以提高查询性能
+CREATE INDEX IF NOT EXISTS idx_outfit_image_records_model_id ON outfit_image_records (model_id);
+CREATE INDEX IF NOT EXISTS idx_outfit_image_records_status ON outfit_image_records (status);
+CREATE INDEX IF NOT EXISTS idx_outfit_image_records_created_at ON outfit_image_records (created_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_product_images_outfit_record_id ON product_images (outfit_record_id);
+CREATE INDEX IF NOT EXISTS idx_product_images_created_at ON product_images (created_at DESC);
+
+CREATE INDEX IF NOT EXISTS idx_outfit_images_outfit_record_id ON outfit_images (outfit_record_id);
+CREATE INDEX IF NOT EXISTS idx_outfit_images_is_favorite ON outfit_images (is_favorite);
+CREATE INDEX IF NOT EXISTS idx_outfit_images_created_at ON outfit_images (created_at DESC);

apps/desktop/src-tauri/src/infrastructure/database/migrations/023_create_outfit_images_tables_down.sql

@@ -0,0 +1,18 @@
+-- 回滚：删除穿搭图片相关表
+
+-- 删除索引
+DROP INDEX IF EXISTS idx_outfit_images_created_at;
+DROP INDEX IF EXISTS idx_outfit_images_is_favorite;
+DROP INDEX IF EXISTS idx_outfit_images_outfit_record_id;
+
+DROP INDEX IF EXISTS idx_product_images_created_at;
+DROP INDEX IF EXISTS idx_product_images_outfit_record_id;
+
+DROP INDEX IF EXISTS idx_outfit_image_records_created_at;
+DROP INDEX IF EXISTS idx_outfit_image_records_status;
+DROP INDEX IF EXISTS idx_outfit_image_records_model_id;
+
+-- 删除表（按依赖关系倒序）
+DROP TABLE IF EXISTS outfit_images;
+DROP TABLE IF EXISTS product_images;
+DROP TABLE IF EXISTS outfit_image_records;

apps/desktop/src-tauri/src/lib.rs

@@ -434,7 +434,13 @@ pub fn run() {
             commands::voice_clone_commands::download_audio,
             commands::voice_clone_commands::get_speech_generation_records,
             commands::voice_clone_commands::get_speech_generation_records_by_voice_id,
-            commands::voice_clone_commands::delete_speech_generation_record
+            commands::voice_clone_commands::delete_speech_generation_record,
+            // 穿搭图片相关命令
+            commands::outfit_image_commands::get_model_dashboard_stats,
+            commands::outfit_image_commands::get_outfit_image_records,
+            commands::outfit_image_commands::create_outfit_image_record,
+            commands::outfit_image_commands::delete_outfit_image_record,
+            commands::outfit_image_commands::get_outfit_image_record_detail
         ])
         .setup(|app| {
             // 初始化日志系统

apps/desktop/src-tauri/src/presentation/commands/mod.rs

@@ -34,3 +34,4 @@ pub mod image_generation_commands;
 pub mod template_segment_weight_commands;
 pub mod directory_settings_commands;
 pub mod voice_clone_commands;
+pub mod outfit_image_commands;

apps/desktop/src-tauri/src/presentation/commands/outfit_image_commands.rs

@@ -0,0 +1,200 @@
+use tauri::State;
+use crate::app_state::AppState;
+use crate::data::models::outfit_image::{
+    OutfitImageRecord, OutfitImageGenerationRequest, OutfitImageGenerationResponse,
+    OutfitImageStats, ProductImage, OutfitImage
+};
+use crate::data::repositories::outfit_image_repository::OutfitImageRepository;
+use crate::data::repositories::model_repository::ModelRepository;
+use crate::data::models::model::PhotoType;
+
+/// 模特个人看板统计信息
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct ModelDashboardStats {
+    pub model_id: String,
+    pub model_name: String,
+    pub total_photos: u32,
+    pub portrait_photos: u32,
+    pub work_photos: u32,
+    pub outfit_stats: OutfitImageStats,
+    pub recent_generations: u32,
+    pub success_rate: f32,
+    pub favorite_count: u32,
+    pub total_generation_time_ms: u64,
+    pub average_generation_time_ms: u64,
+}
+
+/// 获取模特个人看板统计信息
+#[tauri::command]
+pub async fn get_model_dashboard_stats(
+    state: State<'_, AppState>,
+    model_id: String,
+) -> Result<ModelDashboardStats, String> {
+    println!("📊 获取模特个人看板统计信息: {}", model_id);
+
+    // 获取数据库连接
+    let database = state.get_database();
+    let outfit_repo = OutfitImageRepository::new(database.clone());
+    let model_repo = ModelRepository::new(database.clone());
+
+    // 获取模特基本信息
+    let model = model_repo.get_by_id(&model_id)
+        .map_err(|e| format!("获取模特信息失败: {}", e))?
+        .ok_or_else(|| "模特不存在".to_string())?;
+
+    // 获取穿搭图片统计
+    let outfit_stats = outfit_repo.get_stats_by_model_id(&model_id)
+        .map_err(|e| format!("获取穿搭图片统计失败: {}", e))?;
+
+    // 计算照片统计
+    let total_photos = model.photos.len() as u32;
+    let portrait_photos = model.photos.iter()
+        .filter(|photo| matches!(photo.photo_type, PhotoType::Portrait))
+        .count() as u32;
+    let work_photos = model.photos.iter()
+        .filter(|photo| matches!(photo.photo_type, PhotoType::Commercial | PhotoType::Artistic))
+        .count() as u32;
+
+    // 计算成功率
+    let success_rate = if outfit_stats.total_records > 0 {
+        outfit_stats.completed_records as f32 / outfit_stats.total_records as f32
+    } else {
+        0.0
+    };
+
+    // 获取最近30天的生成记录（简化实现，实际应该查询数据库）
+    let recent_generations = outfit_stats.total_records; // TODO: 实现真正的30天统计
+
+    // 计算总生成时间和平均生成时间（简化实现）
+    let total_generation_time_ms = outfit_stats.completed_records as u64 * 5000; // 假设平均5秒
+    let average_generation_time_ms = if outfit_stats.completed_records > 0 {
+        total_generation_time_ms / outfit_stats.completed_records as u64
+    } else {
+        0
+    };
+
+    let dashboard_stats = ModelDashboardStats {
+        model_id: model_id.clone(),
+        model_name: model.name.clone(),
+        total_photos,
+        portrait_photos,
+        work_photos,
+        outfit_stats: outfit_stats.clone(),
+        recent_generations,
+        success_rate,
+        favorite_count: outfit_stats.favorite_images,
+        total_generation_time_ms,
+        average_generation_time_ms,
+    };
+
+    println!("✅ 模特个人看板统计信息获取成功");
+    Ok(dashboard_stats)
+}
+
+/// 获取模特的穿搭图片生成记录列表
+#[tauri::command]
+pub async fn get_outfit_image_records(
+    state: State<'_, AppState>,
+    model_id: String,
+) -> Result<Vec<OutfitImageRecord>, String> {
+    println!("📋 获取模特穿搭图片生成记录: {}", model_id);
+
+    let database = state.get_database();
+    let outfit_repo = OutfitImageRepository::new(database);
+
+    let records = outfit_repo.get_records_by_model_id(&model_id)
+        .map_err(|e| format!("获取穿搭图片记录失败: {}", e))?;
+
+    println!("✅ 获取到 {} 条穿搭图片记录", records.len());
+    Ok(records)
+}
+
+/// 创建穿搭图片生成记录
+#[tauri::command]
+pub async fn create_outfit_image_record(
+    state: State<'_, AppState>,
+    request: OutfitImageGenerationRequest,
+) -> Result<String, String> {
+    println!("🎨 创建穿搭图片生成记录: {:?}", request);
+
+    let database = state.get_database();
+    let outfit_repo = OutfitImageRepository::new(database);
+
+    // 创建生成记录
+    let mut record = OutfitImageRecord::new(
+        request.model_id,
+        request.model_image_id,
+        request.generation_prompt,
+    );
+
+    // 创建商品图片记录
+    for (index, product_path) in request.product_image_paths.iter().enumerate() {
+        let file_name = std::path::Path::new(product_path)
+            .file_name()
+            .and_then(|n| n.to_str())
+            .unwrap_or(&format!("product_{}", index))
+            .to_string();
+
+        let file_size = std::fs::metadata(product_path)
+            .map(|m| m.len())
+            .unwrap_or(0);
+
+        let product_image = ProductImage::new(
+            record.id.clone(),
+            product_path.clone(),
+            file_name,
+            file_size,
+        );
+
+        record.product_images.push(product_image);
+    }
+
+    // 保存到数据库
+    outfit_repo.create_record(&record)
+        .map_err(|e| format!("创建穿搭图片记录失败: {}", e))?;
+
+    // 保存商品图片
+    for product_image in &record.product_images {
+        outfit_repo.create_product_image(product_image)
+            .map_err(|e| format!("创建商品图片记录失败: {}", e))?;
+    }
+
+    println!("✅ 穿搭图片生成记录创建成功: {}", record.id);
+    Ok(record.id)
+}
+
+/// 删除穿搭图片生成记录
+#[tauri::command]
+pub async fn delete_outfit_image_record(
+    state: State<'_, AppState>,
+    record_id: String,
+) -> Result<(), String> {
+    println!("🗑️ 删除穿搭图片生成记录: {}", record_id);
+
+    let database = state.get_database();
+    let outfit_repo = OutfitImageRepository::new(database);
+
+    outfit_repo.delete_record(&record_id)
+        .map_err(|e| format!("删除穿搭图片记录失败: {}", e))?;
+
+    println!("✅ 穿搭图片生成记录删除成功");
+    Ok(())
+}
+
+/// 获取穿搭图片生成记录详情
+#[tauri::command]
+pub async fn get_outfit_image_record_detail(
+    state: State<'_, AppState>,
+    record_id: String,
+) -> Result<Option<OutfitImageRecord>, String> {
+    println!("🔍 获取穿搭图片生成记录详情: {}", record_id);
+
+    let database = state.get_database();
+    let outfit_repo = OutfitImageRepository::new(database);
+
+    let record = outfit_repo.get_record_by_id(&record_id)
+        .map_err(|e| format!("获取穿搭图片记录详情失败: {}", e))?;
+
+    println!("✅ 穿搭图片生成记录详情获取成功");
+    Ok(record)
+}

apps/desktop/src/components/ModelDashboardStats.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import {
+  PhotoIcon,
+  SparklesIcon,
+  HeartIcon,
+  ClockIcon,
+  ArrowTrendingUpIcon,
+  CheckCircleIcon,
+  PlayIcon
+} from '@heroicons/react/24/outline';
+import { ModelDashboardStats } from '../types/outfitImage';
+
+interface ModelDashboardStatsProps {
+  stats: ModelDashboardStats;
+  loading?: boolean;
+}
+
+/**
+ * 模特个人看板统计信息组件
+ * 遵循 Tauri 开发规范和 UI/UX 设计标准
+ */
+export const ModelDashboardStatsComponent: React.FC<ModelDashboardStatsProps> = ({
+  stats,
+  loading = false
+}) => {
+  // 格式化时间显示
+  const formatDuration = (ms: number): string => {
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    return `${(ms / 60000).toFixed(1)}min`;
+  };
+
+  // 格式化百分比
+  const formatPercentage = (rate: number): string => {
+    return `${(rate * 100).toFixed(1)}%`;
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-pulse">
+        <div className="flex items-center mb-6">
+          <div className="w-2 h-8 bg-gray-200 rounded-full mr-4"></div>
+          <div className="h-6 bg-gray-200 rounded w-32"></div>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(8)].map((_, index) => (
+            <div key={index} className="p-4 bg-gray-50 rounded-xl">
+              <div className="h-8 w-8 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-4 bg-gray-200 rounded w-16 mb-2"></div>
+              <div className="h-3 bg-gray-200 rounded w-12"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const statCards = [
+    {
+      title: '总照片',
+      value: stats.total_photos,
+      icon: PhotoIcon,
+      color: 'blue',
+      description: `形象照 ${stats.portrait_photos} · 工作照 ${stats.work_photos}`
+    },
+    {
+      title: '穿搭图片',
+      value: stats.outfit_stats.total_images,
+      icon: SparklesIcon,
+      color: 'purple',
+      description: `收藏 ${stats.outfit_stats.favorite_images} 张`
+    },
+    {
+      title: '生成记录',
+      value: stats.outfit_stats.total_records,
+      icon: PlayIcon,
+      color: 'green',
+      description: `成功 ${stats.outfit_stats.completed_records} · 失败 ${stats.outfit_stats.failed_records}`
+    },
+    {
+      title: '成功率',
+      value: formatPercentage(stats.success_rate),
+      icon: CheckCircleIcon,
+      color: 'emerald',
+      description: '生成成功率'
+    },
+    {
+      title: '收藏数',
+      value: stats.favorite_count,
+      icon: HeartIcon,
+      color: 'pink',
+      description: '收藏的穿搭图片'
+    },
+    {
+      title: '平均耗时',
+      value: formatDuration(stats.average_generation_time_ms),
+      icon: ClockIcon,
+      color: 'orange',
+      description: '平均生成时间'
+    },
+    {
+      title: '最近生成',
+      value: stats.recent_generations,
+      icon: ArrowTrendingUpIcon,
+      color: 'indigo',
+      description: '最近30天'
+    },
+    {
+      title: '处理中',
+      value: stats.outfit_stats.processing_records,
+      icon: PlayIcon,
+      color: 'yellow',
+      description: '正在处理的任务'
+    }
+  ];
+
+  const getColorClasses = (color: string) => {
+    const colorMap: Record<string, { bg: string; text: string; icon: string }> = {
+      blue: { bg: 'bg-blue-50', text: 'text-blue-900', icon: 'text-blue-600' },
+      purple: { bg: 'bg-purple-50', text: 'text-purple-900', icon: 'text-purple-600' },
+      green: { bg: 'bg-green-50', text: 'text-green-900', icon: 'text-green-600' },
+      emerald: { bg: 'bg-emerald-50', text: 'text-emerald-900', icon: 'text-emerald-600' },
+      pink: { bg: 'bg-pink-50', text: 'text-pink-900', icon: 'text-pink-600' },
+      orange: { bg: 'bg-orange-50', text: 'text-orange-900', icon: 'text-orange-600' },
+      indigo: { bg: 'bg-indigo-50', text: 'text-indigo-900', icon: 'text-indigo-600' },
+      yellow: { bg: 'bg-yellow-50', text: 'text-yellow-900', icon: 'text-yellow-600' }
+    };
+    return colorMap[color] || colorMap.blue;
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-all duration-300 animate-slide-up">
+      <div className="flex items-center mb-6">
+        <div className="w-2 h-8 bg-gradient-to-b from-purple-500 to-purple-600 rounded-full mr-4"></div>
+        <h2 className="text-xl font-bold text-gray-900">个人看板</h2>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {statCards.map((card, index) => {
+          const colors = getColorClasses(card.color);
+          const Icon = card.icon;
+          
+          return (
+            <div
+              key={index}
+              className={`p-4 ${colors.bg} rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer group`}
+            >
+              <div className="flex items-center justify-between mb-3">
+                <Icon className={`w-8 h-8 ${colors.icon} group-hover:scale-110 transition-transform duration-200`} />
+              </div>
+              
+              <div className={`text-2xl font-bold ${colors.text} mb-1`}>
+                {card.value}
+              </div>
+              
+              <div className="text-sm font-medium text-gray-600 mb-1">
+                {card.title}
+              </div>
+              
+              <div className="text-xs text-gray-500">
+                {card.description}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 状态指示器 */}
+      <div className="mt-6 pt-6 border-t border-gray-100">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center">
+              <div className="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
+              <span className="text-gray-600">已完成 {stats.outfit_stats.completed_records}</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
+              <span className="text-gray-600">处理中 {stats.outfit_stats.processing_records}</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-2 h-2 bg-gray-400 rounded-full mr-2"></div>
+              <span className="text-gray-600">等待中 {stats.outfit_stats.pending_records}</span>
+            </div>
+            {stats.outfit_stats.failed_records > 0 && (
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
+                <span className="text-gray-600">失败 {stats.outfit_stats.failed_records}</span>
+              </div>
+            )}
+          </div>
+          
+          <div className="text-gray-500">
+            总耗时 {formatDuration(stats.total_generation_time_ms)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModelDashboardStatsComponent;

apps/desktop/src/components/ModelImageGallery.tsx

@@ -0,0 +1,438 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Eye,
+  Trash2,
+  Heart,
+  Plus,
+  Grid3X3,
+  List,
+  Search
+} from 'lucide-react';
+import { ModelPhoto, PhotoType } from '../types/model';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { ModelImageUploader } from './ModelImageUploader';
+import { ModelImagePreviewModal } from './ModelImagePreviewModal';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+
+interface ModelImageGalleryProps {
+  photos: ModelPhoto[];
+  onUpload: (imagePaths: string[], photoType: PhotoType) => Promise<void>;
+  onDelete: (photo: ModelPhoto) => Promise<void>;
+  onToggleFavorite?: (photo: ModelPhoto) => Promise<void>;
+  isUploading?: boolean;
+  className?: string;
+}
+
+type ViewMode = 'grid' | 'list';
+type FilterType = 'all' | PhotoType;
+
+/**
+ * 模特图片画廊组件
+ * 集成上传、预览、删除等功能
+ */
+export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
+  photos,
+  onUpload,
+  onDelete,
+  onToggleFavorite,
+  isUploading = false,
+  className = ''
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+  const [filter, setFilter] = useState<FilterType>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showUploader, setShowUploader] = useState(false);
+  
+  // 预览模态框状态
+  const [previewModal, setPreviewModal] = useState<{
+    isOpen: boolean;
+    photos: ModelPhoto[];
+    initialIndex: number;
+  }>({
+    isOpen: false,
+    photos: [],
+    initialIndex: 0
+  });
+
+  // 删除确认对话框状态
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    show: boolean;
+    photo: ModelPhoto | null;
+    deleting: boolean;
+  }>({
+    show: false,
+    photo: null,
+    deleting: false
+  });
+
+  // 过滤照片
+  const filteredPhotos = photos.filter(photo => {
+    const matchesFilter = filter === 'all' || photo.photo_type === filter;
+    const matchesSearch = searchQuery === '' || 
+      photo.file_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (photo.description && photo.description.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      photo.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
+    
+    return matchesFilter && matchesSearch;
+  });
+
+  // 处理图片上传
+  const handleUpload = useCallback(async (imagePaths: string[], photoType: PhotoType) => {
+    try {
+      await onUpload(imagePaths, photoType);
+      setShowUploader(false);
+    } catch (error) {
+      console.error('上传失败:', error);
+    }
+  }, [onUpload]);
+
+  // 打开预览
+  const openPreview = useCallback((photo: ModelPhoto) => {
+    const photoIndex = filteredPhotos.findIndex(p => p.id === photo.id);
+    setPreviewModal({
+      isOpen: true,
+      photos: filteredPhotos,
+      initialIndex: photoIndex
+    });
+  }, [filteredPhotos]);
+
+  // 关闭预览
+  const closePreview = useCallback(() => {
+    setPreviewModal(prev => ({ ...prev, isOpen: false }));
+  }, []);
+
+  // 处理删除确认
+  const handleDeleteClick = useCallback((photo: ModelPhoto) => {
+    setDeleteConfirm({
+      show: true,
+      photo,
+      deleting: false
+    });
+  }, []);
+
+  // 确认删除
+  const confirmDelete = useCallback(async () => {
+    if (!deleteConfirm.photo) return;
+
+    try {
+      setDeleteConfirm(prev => ({ ...prev, deleting: true }));
+      await onDelete(deleteConfirm.photo);
+      setDeleteConfirm({ show: false, photo: null, deleting: false });
+    } catch (error) {
+      console.error('删除失败:', error);
+      setDeleteConfirm(prev => ({ ...prev, deleting: false }));
+    }
+  }, [deleteConfirm.photo, onDelete]);
+
+  // 取消删除
+  const cancelDelete = useCallback(() => {
+    setDeleteConfirm({ show: false, photo: null, deleting: false });
+  }, []);
+
+  const getPhotoTypeLabel = (photoType: PhotoType): string => {
+    switch (photoType) {
+      case PhotoType.Portrait:
+        return '个人形象照';
+      case PhotoType.Commercial:
+        return '商业照';
+      case PhotoType.Casual:
+        return '生活照';
+      case PhotoType.FullBody:
+        return '全身照';
+      case PhotoType.Headshot:
+        return '头像照';
+      case PhotoType.Artistic:
+        return '艺术照';
+      default:
+        return '其他';
+    }
+  };
+
+  const getPhotoTypeColor = (photoType: PhotoType): string => {
+    switch (photoType) {
+      case PhotoType.Portrait:
+        return 'bg-blue-100 text-blue-800';
+      case PhotoType.Commercial:
+        return 'bg-green-100 text-green-800';
+      case PhotoType.Casual:
+        return 'bg-purple-100 text-purple-800';
+      case PhotoType.FullBody:
+        return 'bg-indigo-100 text-indigo-800';
+      case PhotoType.Headshot:
+        return 'bg-pink-100 text-pink-800';
+      case PhotoType.Artistic:
+        return 'bg-yellow-100 text-yellow-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* 头部工具栏 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <h2 className="text-xl font-bold text-gray-900">个人形象图片</h2>
+          <span className="text-sm text-gray-500">
+            共 {photos.length} 张照片
+            {filteredPhotos.length !== photos.length && ` (显示 ${filteredPhotos.length} 张)`}
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          {/* 搜索框 */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              placeholder="搜索照片..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* 过滤器 */}
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value as FilterType)}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="all">全部类型</option>
+            <option value={PhotoType.Portrait}>个人形象照</option>
+            <option value={PhotoType.Commercial}>商业照</option>
+            <option value={PhotoType.Casual}>生活照</option>
+            <option value={PhotoType.FullBody}>全身照</option>
+            <option value={PhotoType.Headshot}>头像照</option>
+            <option value={PhotoType.Artistic}>艺术照</option>
+          </select>
+
+          {/* 视图模式切换 */}
+          <div className="flex border border-gray-300 rounded-lg overflow-hidden">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`p-2 ${viewMode === 'grid' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+              title="网格视图"
+            >
+              <Grid3X3 className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`p-2 ${viewMode === 'list' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+              title="列表视图"
+            >
+              <List className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* 上传按钮 */}
+          <button
+            onClick={() => setShowUploader(!showUploader)}
+            disabled={isUploading}
+            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            上传照片
+          </button>
+        </div>
+      </div>
+
+      {/* 上传组件 */}
+      {showUploader && (
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <ModelImageUploader
+            onImagesSelect={handleUpload}
+            isUploading={isUploading}
+          />
+        </div>
+      )}
+
+      {/* 照片展示 */}
+      {filteredPhotos.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-xl">
+          <div className="text-6xl mb-4 opacity-50">📷</div>
+          <p className="text-lg font-medium text-gray-600 mb-2">
+            {photos.length === 0 ? '暂无照片' : '没有找到匹配的照片'}
+          </p>
+          <p className="text-sm text-gray-500">
+            {photos.length === 0 ? '点击上传按钮添加第一张照片' : '尝试调整搜索条件或过滤器'}
+          </p>
+        </div>
+      ) : viewMode === 'grid' ? (
+        /* 网格视图 */
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          {filteredPhotos.map((photo) => (
+            <div
+              key={photo.id}
+              className="group relative bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-200"
+            >
+              {/* 图片 */}
+              <div className="aspect-square overflow-hidden">
+                <img
+                  src={convertFileSrc(photo.file_path)}
+                  alt={photo.file_name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                />
+              </div>
+
+              {/* 悬停操作按钮 */}
+              <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => openPreview(photo)}
+                    className="p-2 bg-white text-gray-700 rounded-full hover:bg-gray-100 transition-colors"
+                    title="预览"
+                  >
+                    <Eye className="w-4 h-4" />
+                  </button>
+                  {onToggleFavorite && (
+                    <button
+                      onClick={() => onToggleFavorite(photo)}
+                      className={`p-2 rounded-full transition-colors ${
+                        photo.is_cover 
+                          ? 'bg-red-500 text-white hover:bg-red-600' 
+                          : 'bg-white text-gray-700 hover:bg-gray-100'
+                      }`}
+                      title="收藏"
+                    >
+                      <Heart className={`w-4 h-4 ${photo.is_cover ? 'fill-current' : ''}`} />
+                    </button>
+                  )}
+                  <button
+                    onClick={() => handleDeleteClick(photo)}
+                    className="p-2 bg-white text-red-600 rounded-full hover:bg-red-50 transition-colors"
+                    title="删除"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              {/* 照片信息 */}
+              <div className="p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
+                    {getPhotoTypeLabel(photo.photo_type)}
+                  </span>
+                  {photo.is_cover && (
+                    <Heart className="w-4 h-4 text-red-500 fill-current" />
+                  )}
+                </div>
+                <p className="text-sm font-medium text-gray-900 truncate" title={photo.file_name}>
+                  {photo.file_name}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {formatFileSize(photo.file_size)}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        /* 列表视图 */
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          <div className="divide-y divide-gray-200">
+            {filteredPhotos.map((photo) => (
+              <div key={photo.id} className="p-4 hover:bg-gray-50 transition-colors">
+                <div className="flex items-center space-x-4">
+                  {/* 缩略图 */}
+                  <div className="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
+                    <img
+                      src={convertFileSrc(photo.file_path)}
+                      alt={photo.file_name}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+
+                  {/* 信息 */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center space-x-2 mb-1">
+                      <h3 className="text-sm font-medium text-gray-900 truncate">
+                        {photo.file_name}
+                      </h3>
+                      <span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
+                        {getPhotoTypeLabel(photo.photo_type)}
+                      </span>
+                      {photo.is_cover && (
+                        <Heart className="w-4 h-4 text-red-500 fill-current" />
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-500">
+                      {formatFileSize(photo.file_size)} • {new Date(photo.created_at).toLocaleDateString()}
+                    </p>
+                    {photo.description && (
+                      <p className="text-sm text-gray-600 mt-1 truncate">
+                        {photo.description}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* 操作按钮 */}
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => openPreview(photo)}
+                      className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                      title="预览"
+                    >
+                      <Eye className="w-4 h-4" />
+                    </button>
+                    {onToggleFavorite && (
+                      <button
+                        onClick={() => onToggleFavorite(photo)}
+                        className={`p-2 rounded-lg transition-colors ${
+                          photo.is_cover 
+                            ? 'text-red-500 hover:bg-red-50' 
+                            : 'text-gray-600 hover:bg-gray-100'
+                        }`}
+                        title="收藏"
+                      >
+                        <Heart className={`w-4 h-4 ${photo.is_cover ? 'fill-current' : ''}`} />
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleDeleteClick(photo)}
+                      className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title="删除"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 图片预览模态框 */}
+      <ModelImagePreviewModal
+        photos={previewModal.photos}
+        initialIndex={previewModal.initialIndex}
+        isOpen={previewModal.isOpen}
+        onClose={closePreview}
+        onDelete={handleDeleteClick}
+        onToggleFavorite={onToggleFavorite}
+      />
+
+      {/* 删除确认对话框 */}
+      <DeleteConfirmDialog
+        isOpen={deleteConfirm.show}
+        title="删除照片"
+        message={`确定要删除照片 "${deleteConfirm.photo?.file_name}" 吗？此操作无法撤销。`}
+        onConfirm={confirmDelete}
+        onCancel={cancelDelete}
+        deleting={deleteConfirm.deleting}
+      />
+    </div>
+  );
+};
+
+export default ModelImageGallery;

apps/desktop/src/components/ModelImagePreviewModal.tsx

@@ -0,0 +1,458 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  X,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  ZoomIn,
+  ZoomOut,
+  RotateCw,
+  Maximize2,
+  Minimize2,
+  Trash2,
+  Heart,
+  Info,
+  Calendar,
+  FileImage,
+  Tag
+} from 'lucide-react';
+import { ModelPhoto, PhotoType } from '../types/model';
+import { convertFileSrc } from '@tauri-apps/api/core';
+
+interface ModelImagePreviewModalProps {
+  photos: ModelPhoto[];
+  initialIndex: number;
+  isOpen: boolean;
+  onClose: () => void;
+  onDelete?: (photo: ModelPhoto) => void;
+  onToggleFavorite?: (photo: ModelPhoto) => void;
+  title?: string;
+}
+
+/**
+ * 模特图片预览模态框组件
+ * 支持图片缩放、旋转、删除等操作
+ */
+export const ModelImagePreviewModal: React.FC<ModelImagePreviewModalProps> = ({
+  photos,
+  initialIndex,
+  isOpen,
+  onClose,
+  onDelete,
+  onToggleFavorite,
+  title = "图片预览"
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+
+  // 重置状态当模态框打开时
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentIndex(initialIndex);
+      setZoom(1);
+      setRotation(0);
+      setIsFullscreen(false);
+      setShowInfo(false);
+    }
+  }, [isOpen, initialIndex]);
+
+  // 键盘事件处理
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case 'ArrowLeft':
+          goToPrevious();
+          break;
+        case 'ArrowRight':
+          goToNext();
+          break;
+        case '+':
+        case '=':
+          handleZoomIn();
+          break;
+        case '-':
+          handleZoomOut();
+          break;
+        case 'r':
+        case 'R':
+          handleRotate();
+          break;
+        case 'f':
+        case 'F':
+          setIsFullscreen(!isFullscreen);
+          break;
+        case 'i':
+        case 'I':
+          setShowInfo(!showInfo);
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, isFullscreen, showInfo]);
+
+  const currentPhoto = photos[currentIndex];
+
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
+    setZoom(1);
+    setRotation(0);
+  }, [photos.length]);
+
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => (prev < photos.length - 1 ? prev + 1 : 0));
+    setZoom(1);
+    setRotation(0);
+  }, [photos.length]);
+
+  const handleZoomIn = useCallback(() => {
+    setZoom((prev) => Math.min(prev + 0.25, 3));
+  }, []);
+
+  const handleZoomOut = useCallback(() => {
+    setZoom((prev) => Math.max(prev - 0.25, 0.25));
+  }, []);
+
+  const handleRotate = useCallback(() => {
+    setRotation((prev) => (prev + 90) % 360);
+  }, []);
+
+  const handleDownload = useCallback(async () => {
+    if (!currentPhoto) return;
+    
+    try {
+      // TODO: 实现下载功能
+      console.log('下载图片:', currentPhoto.file_path);
+    } catch (error) {
+      console.error('下载失败:', error);
+    }
+  }, [currentPhoto]);
+
+  const handleDelete = useCallback(() => {
+    if (currentPhoto && onDelete) {
+      onDelete(currentPhoto);
+    }
+  }, [currentPhoto, onDelete]);
+
+  const handleToggleFavorite = useCallback(() => {
+    if (currentPhoto && onToggleFavorite) {
+      onToggleFavorite(currentPhoto);
+    }
+  }, [currentPhoto, onToggleFavorite]);
+
+  const getPhotoTypeLabel = (photoType: PhotoType): string => {
+    switch (photoType) {
+      case PhotoType.Portrait:
+        return '个人形象照';
+      case PhotoType.Commercial:
+        return '商业照';
+      case PhotoType.Casual:
+        return '生活照';
+      case PhotoType.FullBody:
+        return '全身照';
+      case PhotoType.Headshot:
+        return '头像照';
+      case PhotoType.Artistic:
+        return '艺术照';
+      default:
+        return '其他';
+    }
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (dateString: string): string => {
+    return new Date(dateString).toLocaleString('zh-CN');
+  };
+
+  if (!isOpen || !currentPhoto) return null;
+
+  const imageUrl = convertFileSrc(currentPhoto.file_path);
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center bg-black ${
+      isFullscreen ? 'bg-opacity-100' : 'bg-opacity-75'
+    }`}>
+      {/* 模态框背景 */}
+      <div 
+        className="absolute inset-0 cursor-pointer"
+        onClick={onClose}
+      />
+      
+      {/* 模态框内容 */}
+      <div className={`relative bg-white rounded-lg shadow-2xl max-w-7xl max-h-[95vh] w-full mx-4 flex flex-col ${
+        isFullscreen ? 'max-w-none max-h-none h-full mx-0 rounded-none' : ''
+      }`}>
+        {/* 头部工具栏 */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-white rounded-t-lg">
+          <div className="flex items-center space-x-4">
+            <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+            <span className="text-sm text-gray-500">
+              {currentIndex + 1} / {photos.length}
+            </span>
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            {/* 信息按钮 */}
+            <button
+              onClick={() => setShowInfo(!showInfo)}
+              className={`p-2 rounded-lg transition-colors ${
+                showInfo ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-100'
+              }`}
+              title="显示信息 (I)"
+            >
+              <Info className="w-5 h-5" />
+            </button>
+            
+            {/* 收藏按钮 */}
+            {onToggleFavorite && (
+              <button
+                onClick={handleToggleFavorite}
+                className={`p-2 rounded-lg transition-colors ${
+                  currentPhoto.is_cover ? 'text-red-500 hover:bg-red-50' : 'text-gray-600 hover:bg-gray-100'
+                }`}
+                title="收藏"
+              >
+                <Heart className={`w-5 h-5 ${currentPhoto.is_cover ? 'fill-current' : ''}`} />
+              </button>
+            )}
+            
+            {/* 缩放控制 */}
+            <button
+              onClick={handleZoomOut}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="缩小 (-)"
+            >
+              <ZoomOut className="w-5 h-5" />
+            </button>
+            
+            <span className="text-sm text-gray-500 min-w-[4rem] text-center">
+              {Math.round(zoom * 100)}%
+            </span>
+            
+            <button
+              onClick={handleZoomIn}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="放大 (+)"
+            >
+              <ZoomIn className="w-5 h-5" />
+            </button>
+            
+            {/* 旋转按钮 */}
+            <button
+              onClick={handleRotate}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="旋转 (R)"
+            >
+              <RotateCw className="w-5 h-5" />
+            </button>
+            
+            {/* 全屏按钮 */}
+            <button
+              onClick={() => setIsFullscreen(!isFullscreen)}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="全屏 (F)"
+            >
+              {isFullscreen ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
+            </button>
+            
+            {/* 下载按钮 */}
+            <button
+              onClick={handleDownload}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="下载"
+            >
+              <Download className="w-5 h-5" />
+            </button>
+            
+            {/* 删除按钮 */}
+            {onDelete && (
+              <button
+                onClick={handleDelete}
+                className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                title="删除"
+              >
+                <Trash2 className="w-5 h-5" />
+              </button>
+            )}
+            
+            {/* 关闭按钮 */}
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              title="关闭 (Esc)"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* 主要内容区域 */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* 图片展示区域 */}
+          <div className="flex-1 flex items-center justify-center bg-gray-100 overflow-hidden relative">
+            {/* 左箭头 */}
+            {photos.length > 1 && (
+              <button
+                onClick={goToPrevious}
+                className="absolute left-4 z-10 p-3 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-all shadow-lg"
+                title="上一张 (←)"
+              >
+                <ChevronLeft className="w-6 h-6" />
+              </button>
+            )}
+            
+            {/* 图片 */}
+            <div className="relative max-w-full max-h-full flex items-center justify-center p-4">
+              <img
+                src={imageUrl}
+                alt={currentPhoto.description || currentPhoto.file_name}
+                className="max-w-full max-h-full object-contain transition-transform duration-200 cursor-grab active:cursor-grabbing shadow-2xl"
+                style={{
+                  transform: `scale(${zoom}) rotate(${rotation}deg)`,
+                  transformOrigin: 'center'
+                }}
+                draggable={false}
+                onLoad={() => setIsLoading(false)}
+                onLoadStart={() => setIsLoading(true)}
+              />
+              
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                </div>
+              )}
+            </div>
+            
+            {/* 右箭头 */}
+            {photos.length > 1 && (
+              <button
+                onClick={goToNext}
+                className="absolute right-4 z-10 p-3 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-all shadow-lg"
+                title="下一张 (→)"
+              >
+                <ChevronRight className="w-6 h-6" />
+              </button>
+            )}
+          </div>
+          
+          {/* 信息面板 */}
+          {showInfo && (
+            <div className="w-80 bg-white border-l border-gray-200 p-6 overflow-y-auto">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">图片信息</h3>
+              
+              <div className="space-y-4">
+                {/* 基本信息 */}
+                <div>
+                  <h4 className="text-sm font-medium text-gray-900 mb-2 flex items-center">
+                    <FileImage className="w-4 h-4 mr-1" />
+                    基本信息
+                  </h4>
+                  <div className="space-y-2 text-sm">
+                    <div>
+                      <span className="text-gray-500">文件名：</span>
+                      <span className="text-gray-900">{currentPhoto.file_name}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-500">文件大小：</span>
+                      <span className="text-gray-900">{formatFileSize(currentPhoto.file_size)}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-500">照片类型：</span>
+                      <span className="text-gray-900">{getPhotoTypeLabel(currentPhoto.photo_type)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 时间信息 */}
+                <div>
+                  <h4 className="text-sm font-medium text-gray-900 mb-2 flex items-center">
+                    <Calendar className="w-4 h-4 mr-1" />
+                    时间信息
+                  </h4>
+                  <div className="space-y-2 text-sm">
+                    <div>
+                      <span className="text-gray-500">创建时间：</span>
+                      <span className="text-gray-900">{formatDate(currentPhoto.created_at)}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 描述 */}
+                {currentPhoto.description && (
+                  <div>
+                    <h4 className="text-sm font-medium text-gray-900 mb-2">描述</h4>
+                    <p className="text-sm text-gray-700">{currentPhoto.description}</p>
+                  </div>
+                )}
+
+                {/* 标签 */}
+                {currentPhoto.tags.length > 0 && (
+                  <div>
+                    <h4 className="text-sm font-medium text-gray-900 mb-2 flex items-center">
+                      <Tag className="w-4 h-4 mr-1" />
+                      标签
+                    </h4>
+                    <div className="flex flex-wrap gap-2">
+                      {currentPhoto.tags.map((tag, index) => (
+                        <span
+                          key={index}
+                          className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        
+        {/* 底部缩略图导航 */}
+        {photos.length > 1 && (
+          <div className="border-t border-gray-200 p-4 bg-white">
+            <div className="flex space-x-2 overflow-x-auto">
+              {photos.map((photo, index) => (
+                <button
+                  key={photo.id}
+                  onClick={() => setCurrentIndex(index)}
+                  className={`flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all ${
+                    index === currentIndex
+                      ? 'border-blue-500 ring-2 ring-blue-200'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <img
+                    src={convertFileSrc(photo.file_path)}
+                    alt={photo.file_name}
+                    className="w-full h-full object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModelImagePreviewModal;

apps/desktop/src/components/ModelImageUploader.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useState } from 'react';
+import { open } from '@tauri-apps/plugin-dialog';
+import { 
+  Upload, 
+  Image as ImageIcon, 
+  X, 
+  AlertCircle,
+  Camera,
+  FolderOpen
+} from 'lucide-react';
+import { PhotoType } from '../types/model';
+
+interface ModelImageUploaderProps {
+  onImagesSelect: (imagePaths: string[], photoType: PhotoType) => void;
+  isUploading?: boolean;
+  disabled?: boolean;
+  maxFiles?: number;
+  acceptedFormats?: string[];
+}
+
+const SUPPORTED_IMAGE_FORMATS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
+
+/**
+ * 模特图片上传组件
+ * 遵循 Tauri 开发规范的组件设计原则
+ */
+export const ModelImageUploader: React.FC<ModelImageUploaderProps> = ({
+  onImagesSelect,
+  isUploading = false,
+  disabled = false,
+  maxFiles = 10,
+  acceptedFormats = SUPPORTED_IMAGE_FORMATS,
+}) => {
+  const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedPhotoType, setSelectedPhotoType] = useState<PhotoType>(PhotoType.Portrait);
+
+  // 处理文件选择
+  const handleFileSelect = useCallback(async () => {
+    if (disabled || isUploading) return;
+
+    try {
+      setError(null);
+      
+      const selected = await open({
+        multiple: true,
+        filters: [
+          {
+            name: '图像文件',
+            extensions: acceptedFormats,
+          },
+        ],
+      });
+
+      if (selected && Array.isArray(selected)) {
+        if (selected.length > maxFiles) {
+          setError(`最多只能选择 ${maxFiles} 个文件`);
+          return;
+        }
+        
+        onImagesSelect(selected, selectedPhotoType);
+      }
+    } catch (error) {
+      console.error('Failed to select files:', error);
+      setError('文件选择失败');
+    }
+  }, [onImagesSelect, selectedPhotoType, disabled, isUploading, maxFiles, acceptedFormats]);
+
+  // 处理拖拽进入
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled && !isUploading) {
+      setDragOver(true);
+    }
+  }, [disabled, isUploading]);
+
+  // 处理拖拽离开
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  // 处理拖拽悬停
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  // 处理文件拖放
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+
+    if (disabled || isUploading) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    const imagePaths = files
+      .filter(file => {
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        return extension && acceptedFormats.includes(extension);
+      })
+      .slice(0, maxFiles)
+      .map(file => (file as any).path || file.name);
+
+    if (imagePaths.length > 0) {
+      setError(null);
+      onImagesSelect(imagePaths, selectedPhotoType);
+    } else {
+      setError('请选择有效的图片文件');
+    }
+  }, [onImagesSelect, selectedPhotoType, disabled, isUploading, maxFiles, acceptedFormats]);
+
+  const photoTypeOptions = [
+    { value: PhotoType.Portrait, label: '个人形象照', icon: Camera },
+    { value: PhotoType.Commercial, label: '商业照', icon: ImageIcon },
+    { value: PhotoType.Casual, label: '生活照', icon: FolderOpen },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {/* 照片类型选择 */}
+      <div className="flex items-center space-x-4">
+        <span className="text-sm font-medium text-gray-700">照片类型：</span>
+        <div className="flex space-x-2">
+          {photoTypeOptions.map((option) => {
+            const Icon = option.icon;
+            return (
+              <button
+                key={option.value}
+                onClick={() => setSelectedPhotoType(option.value)}
+                className={`flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  selectedPhotoType === option.value
+                    ? 'bg-blue-100 text-blue-700 border-2 border-blue-300'
+                    : 'bg-gray-100 text-gray-600 border-2 border-transparent hover:bg-gray-200'
+                }`}
+                disabled={disabled || isUploading}
+              >
+                <Icon className="w-4 h-4 mr-2" />
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 上传区域 */}
+      <div
+        className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200 ${
+          dragOver
+            ? 'border-blue-400 bg-blue-50'
+            : disabled || isUploading
+            ? 'border-gray-200 bg-gray-50'
+            : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
+        } ${disabled || isUploading ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onClick={handleFileSelect}
+      >
+        {isUploading ? (
+          <div className="flex flex-col items-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+            <p className="text-blue-600 font-medium">正在上传图片...</p>
+            <p className="text-sm text-gray-500 mt-1">请稍候</p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center">
+            <div className={`p-3 rounded-full mb-4 ${
+              dragOver ? 'bg-blue-100' : 'bg-gray-100'
+            }`}>
+              <Upload className={`w-8 h-8 ${
+                dragOver ? 'text-blue-600' : 'text-gray-400'
+              }`} />
+            </div>
+            
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              {dragOver ? '释放以上传图片' : '上传模特照片'}
+            </h3>
+            
+            <p className="text-sm text-gray-500 mb-4">
+              拖拽图片到此处，或点击选择文件
+            </p>
+            
+            <div className="flex items-center space-x-4 text-xs text-gray-400">
+              <span>支持格式：{acceptedFormats.join(', ').toUpperCase()}</span>
+              <span>•</span>
+              <span>最多 {maxFiles} 个文件</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 错误提示 */}
+      {error && (
+        <div className="flex items-center p-3 bg-red-50 border border-red-200 rounded-lg">
+          <AlertCircle className="w-5 h-5 text-red-500 mr-2 flex-shrink-0" />
+          <span className="text-sm text-red-700">{error}</span>
+          <button
+            onClick={() => setError(null)}
+            className="ml-auto text-red-500 hover:text-red-700"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {/* 使用提示 */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="flex items-start">
+          <ImageIcon className="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" />
+          <div className="text-sm text-blue-700">
+            <p className="font-medium mb-1">照片类型说明：</p>
+            <ul className="space-y-1 text-xs">
+              <li>• <strong>个人形象照</strong>：用于穿搭图片生成的基础照片</li>
+              <li>• <strong>工作照</strong>：专业拍摄的工作相关照片</li>
+              <li>• <strong>生活照</strong>：日常生活中的照片</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModelImageUploader;

apps/desktop/src/components/OutfitImageGallery.tsx

@@ -0,0 +1,423 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Trash2,
+  Clock,
+  CheckCircle,
+  XCircle,
+  Loader,
+  Grid3X3,
+  List,
+  Search,
+  Calendar,
+  Sparkles
+} from 'lucide-react';
+import { OutfitImageRecord, OutfitImageStatus } from '../types/outfitImage';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+
+interface OutfitImageGalleryProps {
+  records: OutfitImageRecord[];
+  onDelete: (record: OutfitImageRecord) => Promise<void>;
+  onRefresh: () => Promise<void>;
+  loading?: boolean;
+  className?: string;
+}
+
+type ViewMode = 'grid' | 'list';
+type FilterType = 'all' | OutfitImageStatus;
+
+/**
+ * 穿搭图片画廊组件
+ * 展示穿搭图片生成记录和结果
+ */
+export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
+  records,
+  onDelete,
+  onRefresh,
+  loading = false,
+  className = ''
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+  const [filter, setFilter] = useState<FilterType>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // 删除确认对话框状态
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    show: boolean;
+    record: OutfitImageRecord | null;
+    deleting: boolean;
+  }>({
+    show: false,
+    record: null,
+    deleting: false
+  });
+
+  // 过滤记录
+  const filteredRecords = records.filter(record => {
+    const matchesFilter = filter === 'all' || record.status === filter;
+    const matchesSearch = searchQuery === '' || 
+      (record.generation_prompt && record.generation_prompt.toLowerCase().includes(searchQuery.toLowerCase()));
+    
+    return matchesFilter && matchesSearch;
+  });
+
+  // 处理删除确认
+  const handleDeleteClick = useCallback((record: OutfitImageRecord) => {
+    setDeleteConfirm({
+      show: true,
+      record,
+      deleting: false
+    });
+  }, []);
+
+  // 确认删除
+  const confirmDelete = useCallback(async () => {
+    if (!deleteConfirm.record) return;
+
+    try {
+      setDeleteConfirm(prev => ({ ...prev, deleting: true }));
+      await onDelete(deleteConfirm.record);
+      setDeleteConfirm({ show: false, record: null, deleting: false });
+    } catch (error) {
+      console.error('删除失败:', error);
+      setDeleteConfirm(prev => ({ ...prev, deleting: false }));
+    }
+  }, [deleteConfirm.record, onDelete]);
+
+  // 取消删除
+  const cancelDelete = useCallback(() => {
+    setDeleteConfirm({ show: false, record: null, deleting: false });
+  }, []);
+
+  const getStatusIcon = (status: OutfitImageStatus) => {
+    switch (status) {
+      case OutfitImageStatus.Pending:
+        return <Clock className="w-4 h-4 text-gray-500" />;
+      case OutfitImageStatus.Processing:
+        return <Loader className="w-4 h-4 text-blue-500 animate-spin" />;
+      case OutfitImageStatus.Completed:
+        return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case OutfitImageStatus.Failed:
+        return <XCircle className="w-4 h-4 text-red-500" />;
+      default:
+        return <Clock className="w-4 h-4 text-gray-500" />;
+    }
+  };
+
+  const getStatusLabel = (status: OutfitImageStatus) => {
+    switch (status) {
+      case OutfitImageStatus.Pending:
+        return '等待中';
+      case OutfitImageStatus.Processing:
+        return '生成中';
+      case OutfitImageStatus.Completed:
+        return '已完成';
+      case OutfitImageStatus.Failed:
+        return '失败';
+      default:
+        return '未知';
+    }
+  };
+
+  const getStatusColor = (status: OutfitImageStatus) => {
+    switch (status) {
+      case OutfitImageStatus.Pending:
+        return 'bg-gray-100 text-gray-800';
+      case OutfitImageStatus.Processing:
+        return 'bg-blue-100 text-blue-800';
+      case OutfitImageStatus.Completed:
+        return 'bg-green-100 text-green-800';
+      case OutfitImageStatus.Failed:
+        return 'bg-red-100 text-red-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const formatDuration = (ms: number): string => {
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    return `${(ms / 60000).toFixed(1)}min`;
+  };
+
+  const formatDate = (dateString: string): string => {
+    return new Date(dateString).toLocaleString('zh-CN');
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-pulse">
+        <div className="flex items-center mb-6">
+          <div className="w-2 h-8 bg-gray-200 rounded-full mr-4"></div>
+          <div className="h-6 bg-gray-200 rounded w-32"></div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[...Array(6)].map((_, index) => (
+            <div key={index} className="p-4 bg-gray-50 rounded-xl">
+              <div className="h-32 bg-gray-200 rounded-lg mb-3"></div>
+              <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+              <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* 头部工具栏 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <h2 className="text-xl font-bold text-gray-900 flex items-center">
+            <Sparkles className="w-6 h-6 text-purple-500 mr-2" />
+            穿搭图片生成记录
+          </h2>
+          <span className="text-sm text-gray-500">
+            共 {records.length} 条记录
+            {filteredRecords.length !== records.length && ` (显示 ${filteredRecords.length} 条)`}
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          {/* 搜索框 */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              placeholder="搜索提示词..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* 状态过滤器 */}
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value as FilterType)}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          >
+            <option value="all">全部状态</option>
+            <option value={OutfitImageStatus.Pending}>等待中</option>
+            <option value={OutfitImageStatus.Processing}>生成中</option>
+            <option value={OutfitImageStatus.Completed}>已完成</option>
+            <option value={OutfitImageStatus.Failed}>失败</option>
+          </select>
+
+          {/* 视图模式切换 */}
+          <div className="flex border border-gray-300 rounded-lg overflow-hidden">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`p-2 ${viewMode === 'grid' ? 'bg-purple-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+              title="网格视图"
+            >
+              <Grid3X3 className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`p-2 ${viewMode === 'list' ? 'bg-purple-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+              title="列表视图"
+            >
+              <List className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* 刷新按钮 */}
+          <button
+            onClick={onRefresh}
+            className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+            title="刷新"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* 记录展示 */}
+      {filteredRecords.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-xl">
+          <div className="text-6xl mb-4 opacity-50">🎨</div>
+          <p className="text-lg font-medium text-gray-600 mb-2">
+            {records.length === 0 ? '暂无生成记录' : '没有找到匹配的记录'}
+          </p>
+          <p className="text-sm text-gray-500">
+            {records.length === 0 ? '开始生成您的第一个穿搭图片' : '尝试调整搜索条件或过滤器'}
+          </p>
+        </div>
+      ) : viewMode === 'grid' ? (
+        /* 网格视图 */
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredRecords.map((record) => (
+            <div
+              key={record.id}
+              className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-200"
+            >
+              {/* 记录头部 */}
+              <div className="p-4 border-b border-gray-100">
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`inline-flex items-center px-2 py-1 text-xs rounded-full ${getStatusColor(record.status)}`}>
+                    {getStatusIcon(record.status)}
+                    <span className="ml-1">{getStatusLabel(record.status)}</span>
+                  </span>
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => handleDeleteClick(record)}
+                      className="p-1 text-red-600 hover:bg-red-50 rounded transition-colors"
+                      title="删除记录"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+                
+                {record.generation_prompt && (
+                  <p className="text-sm text-gray-600 line-clamp-2 mb-2">
+                    {record.generation_prompt}
+                  </p>
+                )}
+                
+                <div className="flex items-center text-xs text-gray-500">
+                  <Calendar className="w-3 h-3 mr-1" />
+                  {formatDate(record.created_at)}
+                </div>
+              </div>
+
+              {/* 生成结果 */}
+              <div className="p-4">
+                {record.status === OutfitImageStatus.Processing && (
+                  <div className="text-center py-8">
+                    <Loader className="w-8 h-8 text-purple-500 animate-spin mx-auto mb-2" />
+                    <p className="text-sm text-gray-600">
+                      生成进度: {Math.round(record.progress * 100)}%
+                    </p>
+                  </div>
+                )}
+
+                {record.status === OutfitImageStatus.Completed && record.outfit_images.length > 0 && (
+                  <div className="grid grid-cols-2 gap-2">
+                    {record.outfit_images.slice(0, 4).map((image, index) => (
+                      <div key={image.id} className="aspect-square rounded-lg overflow-hidden">
+                        <img
+                          src={image.image_url}
+                          alt={`穿搭图片 ${index + 1}`}
+                          className="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+                        />
+                      </div>
+                    ))}
+                    {record.outfit_images.length > 4 && (
+                      <div className="aspect-square rounded-lg bg-gray-100 flex items-center justify-center">
+                        <span className="text-sm text-gray-600">
+                          +{record.outfit_images.length - 4}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {record.status === OutfitImageStatus.Failed && (
+                  <div className="text-center py-8">
+                    <XCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
+                    <p className="text-sm text-red-600">
+                      {record.error_message || '生成失败'}
+                    </p>
+                  </div>
+                )}
+
+                {/* 统计信息 */}
+                <div className="mt-4 pt-4 border-t border-gray-100">
+                  <div className="flex items-center justify-between text-xs text-gray-500">
+                    <span>商品图片: {record.product_images.length}</span>
+                    <span>生成图片: {record.outfit_images.length}</span>
+                    {record.duration_ms && (
+                      <span>耗时: {formatDuration(record.duration_ms)}</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        /* 列表视图 */
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          <div className="divide-y divide-gray-200">
+            {filteredRecords.map((record) => (
+              <div key={record.id} className="p-4 hover:bg-gray-50 transition-colors">
+                <div className="flex items-center justify-between">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center space-x-3 mb-2">
+                      <span className={`inline-flex items-center px-2 py-1 text-xs rounded-full ${getStatusColor(record.status)}`}>
+                        {getStatusIcon(record.status)}
+                        <span className="ml-1">{getStatusLabel(record.status)}</span>
+                      </span>
+                      <span className="text-sm text-gray-500">
+                        {formatDate(record.created_at)}
+                      </span>
+                      {record.duration_ms && (
+                        <span className="text-sm text-gray-500">
+                          耗时: {formatDuration(record.duration_ms)}
+                        </span>
+                      )}
+                    </div>
+                    
+                    {record.generation_prompt && (
+                      <p className="text-sm text-gray-600 mb-2">
+                        {record.generation_prompt}
+                      </p>
+                    )}
+                    
+                    <div className="flex items-center space-x-4 text-xs text-gray-500">
+                      <span>商品图片: {record.product_images.length}</span>
+                      <span>生成图片: {record.outfit_images.length}</span>
+                      {record.status === OutfitImageStatus.Processing && (
+                        <span>进度: {Math.round(record.progress * 100)}%</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-2">
+                    {record.status === OutfitImageStatus.Completed && record.outfit_images.length > 0 && (
+                      <div className="flex -space-x-2">
+                        {record.outfit_images.slice(0, 3).map((image, index) => (
+                          <div key={image.id} className="w-10 h-10 rounded-lg overflow-hidden border-2 border-white">
+                            <img
+                              src={image.image_url}
+                              alt={`穿搭图片 ${index + 1}`}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    
+                    <button
+                      onClick={() => handleDeleteClick(record)}
+                      className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title="删除记录"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 删除确认对话框 */}
+      <DeleteConfirmDialog
+        isOpen={deleteConfirm.show}
+        title="删除生成记录"
+        message={`确定要删除这条穿搭图片生成记录吗？此操作无法撤销。`}
+        onConfirm={confirmDelete}
+        onCancel={cancelDelete}
+        deleting={deleteConfirm.deleting}
+      />
+    </div>
+  );
+};
+
+export default OutfitImageGallery;

apps/desktop/src/components/OutfitImageGenerator.tsx

@@ -0,0 +1,424 @@
+import React, { useState, useCallback } from 'react';
+import { open } from '@tauri-apps/plugin-dialog';
+import {
+  Upload,
+  Sparkles,
+  X,
+  AlertCircle,
+  Image as ImageIcon,
+  Wand2,
+  Settings,
+  Plus
+} from 'lucide-react';
+import { ModelPhoto, PhotoType } from '../types/model';
+import { OutfitImageGenerationRequest } from '../types/outfitImage';
+import { convertFileSrc } from '@tauri-apps/api/core';
+
+interface OutfitImageGeneratorProps {
+  modelId: string;
+  modelPhotos: ModelPhoto[];
+  onGenerate: (request: OutfitImageGenerationRequest) => Promise<void>;
+  isGenerating?: boolean;
+  disabled?: boolean;
+}
+
+const SUPPORTED_IMAGE_FORMATS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
+
+/**
+ * 穿搭图片生成组件
+ * 支持选择模特形象图片、上传商品图片、设置生成参数
+ */
+export const OutfitImageGenerator: React.FC<OutfitImageGeneratorProps> = ({
+  modelId,
+  modelPhotos,
+  onGenerate,
+  isGenerating = false,
+  disabled = false
+}) => {
+  const [selectedModelImageId, setSelectedModelImageId] = useState<string>('');
+  const [productImages, setProductImages] = useState<string[]>([]);
+  const [generationPrompt, setGenerationPrompt] = useState('');
+  const [stylePreferences, setStylePreferences] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  // 获取个人形象照片（用于穿搭生成）
+  const portraitPhotos = modelPhotos.filter(photo => photo.photo_type === PhotoType.Portrait);
+
+  // 处理商品图片选择
+  const handleProductImageSelect = useCallback(async () => {
+    if (disabled || isGenerating) return;
+
+    try {
+      setError(null);
+      
+      const selected = await open({
+        multiple: true,
+        filters: [
+          {
+            name: '图像文件',
+            extensions: SUPPORTED_IMAGE_FORMATS,
+          },
+        ],
+      });
+
+      if (selected && Array.isArray(selected)) {
+        if (selected.length > 10) {
+          setError('最多只能选择 10 个商品图片');
+          return;
+        }
+        
+        setProductImages(prev => [...prev, ...selected]);
+      }
+    } catch (error) {
+      console.error('Failed to select product images:', error);
+      setError('商品图片选择失败');
+    }
+  }, [disabled, isGenerating]);
+
+  // 处理拖拽上传
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled && !isGenerating) {
+      setDragOver(true);
+    }
+  }, [disabled, isGenerating]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+
+    if (disabled || isGenerating) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    const imagePaths = files
+      .filter(file => {
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        return extension && SUPPORTED_IMAGE_FORMATS.includes(extension);
+      })
+      .slice(0, 10)
+      .map(file => (file as any).path || file.name);
+
+    if (imagePaths.length > 0) {
+      setError(null);
+      setProductImages(prev => [...prev, ...imagePaths]);
+    } else {
+      setError('请选择有效的图片文件');
+    }
+  }, [disabled, isGenerating]);
+
+  // 移除商品图片
+  const removeProductImage = useCallback((index: number) => {
+    setProductImages(prev => prev.filter((_, i) => i !== index));
+  }, []);
+
+  // 添加风格偏好
+  const addStylePreference = useCallback((style: string) => {
+    if (style.trim() && !stylePreferences.includes(style.trim())) {
+      setStylePreferences(prev => [...prev, style.trim()]);
+    }
+  }, [stylePreferences]);
+
+  // 移除风格偏好
+  const removeStylePreference = useCallback((index: number) => {
+    setStylePreferences(prev => prev.filter((_, i) => i !== index));
+  }, []);
+
+  // 处理生成请求
+  const handleGenerate = useCallback(async () => {
+    if (!selectedModelImageId) {
+      setError('请选择模特形象图片');
+      return;
+    }
+
+    if (productImages.length === 0) {
+      setError('请至少上传一张商品图片');
+      return;
+    }
+
+    try {
+      setError(null);
+      
+      const request: OutfitImageGenerationRequest = {
+        model_id: modelId,
+        model_image_id: selectedModelImageId,
+        product_image_paths: productImages,
+        generation_prompt: generationPrompt || undefined,
+        style_preferences: stylePreferences.length > 0 ? stylePreferences : undefined
+      };
+
+      await onGenerate(request);
+      
+      // 生成成功后清空表单
+      setSelectedModelImageId('');
+      setProductImages([]);
+      setGenerationPrompt('');
+      setStylePreferences([]);
+    } catch (error) {
+      console.error('生成穿搭图片失败:', error);
+      setError(`生成穿搭图片失败: ${error}`);
+    }
+  }, [modelId, selectedModelImageId, productImages, generationPrompt, stylePreferences, onGenerate]);
+
+  const canGenerate = selectedModelImageId && productImages.length > 0 && !isGenerating && !disabled;
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-6">
+      <div className="flex items-center mb-6">
+        <div className="w-2 h-8 bg-gradient-to-b from-purple-500 to-purple-600 rounded-full mr-4"></div>
+        <h2 className="text-xl font-bold text-gray-900">穿搭图片生成</h2>
+        <Sparkles className="w-6 h-6 text-purple-500 ml-2" />
+      </div>
+
+      {/* 选择模特形象图片 */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+          <ImageIcon className="w-5 h-5 mr-2" />
+          选择模特形象图片
+        </h3>
+        
+        {portraitPhotos.length === 0 ? (
+          <div className="text-center py-8 bg-gray-50 rounded-xl">
+            <ImageIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+            <p className="text-gray-500">暂无个人形象照片，请先上传形象照片</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+            {portraitPhotos.map((photo) => (
+              <div
+                key={photo.id}
+                className={`relative aspect-square rounded-xl overflow-hidden border-2 cursor-pointer transition-all duration-200 ${
+                  selectedModelImageId === photo.id
+                    ? 'border-purple-500 ring-2 ring-purple-200 scale-105'
+                    : 'border-gray-200 hover:border-purple-300 hover:scale-102'
+                }`}
+                onClick={() => setSelectedModelImageId(photo.id)}
+              >
+                <img
+                  src={convertFileSrc(photo.file_path)}
+                  alt={photo.file_name}
+                  className="w-full h-full object-cover"
+                />
+                {selectedModelImageId === photo.id && (
+                  <div className="absolute inset-0 bg-purple-500 bg-opacity-20 flex items-center justify-center">
+                    <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
+                      <Sparkles className="w-5 h-5 text-white" />
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 上传商品图片 */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+          <Upload className="w-5 h-5 mr-2" />
+          上传商品图片
+          <span className="text-sm text-gray-500 ml-2">({productImages.length}/10)</span>
+        </h3>
+
+        {/* 拖拽上传区域 */}
+        <div
+          className={`border-2 border-dashed rounded-xl p-6 text-center transition-all duration-200 ${
+            dragOver
+              ? 'border-purple-400 bg-purple-50'
+              : disabled || isGenerating
+              ? 'border-gray-200 bg-gray-50'
+              : 'border-gray-300 bg-white hover:border-purple-400 hover:bg-purple-50'
+          } ${disabled || isGenerating ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          onClick={handleProductImageSelect}
+        >
+          <div className="flex flex-col items-center">
+            <div className={`p-3 rounded-full mb-4 ${
+              dragOver ? 'bg-purple-100' : 'bg-gray-100'
+            }`}>
+              <Upload className={`w-8 h-8 ${
+                dragOver ? 'text-purple-600' : 'text-gray-400'
+              }`} />
+            </div>
+            
+            <h4 className="text-lg font-medium text-gray-900 mb-2">
+              {dragOver ? '释放以上传商品图片' : '上传商品图片'}
+            </h4>
+            
+            <p className="text-sm text-gray-500 mb-4">
+              拖拽图片到此处，或点击选择文件
+            </p>
+            
+            <div className="flex items-center space-x-4 text-xs text-gray-400">
+              <span>支持格式：{SUPPORTED_IMAGE_FORMATS.join(', ').toUpperCase()}</span>
+              <span>•</span>
+              <span>最多 10 个文件</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 已上传的商品图片 */}
+        {productImages.length > 0 && (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+            {productImages.map((imagePath, index) => (
+              <div key={index} className="relative group">
+                <div className="aspect-square rounded-lg overflow-hidden border border-gray-200">
+                  <img
+                    src={imagePath.startsWith('http') ? imagePath : `file://${imagePath}`}
+                    alt={`商品图片 ${index + 1}`}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeProductImage(index);
+                  }}
+                  className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center hover:bg-red-600"
+                  title="删除图片"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 生成参数设置 */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+          <Settings className="w-5 h-5 mr-2" />
+          生成参数设置
+        </h3>
+
+        {/* 生成提示词 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            生成提示词（可选）
+          </label>
+          <textarea
+            value={generationPrompt}
+            onChange={(e) => setGenerationPrompt(e.target.value)}
+            placeholder="描述您希望生成的穿搭风格，例如：时尚、休闲、商务、运动等..."
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
+            rows={3}
+            disabled={disabled || isGenerating}
+          />
+        </div>
+
+        {/* 风格偏好 */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            风格偏好标签
+          </label>
+          <div className="flex flex-wrap gap-2 mb-2">
+            {stylePreferences.map((style, index) => (
+              <span
+                key={index}
+                className="inline-flex items-center px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full"
+              >
+                {style}
+                <button
+                  onClick={() => removeStylePreference(index)}
+                  className="ml-2 text-purple-600 hover:text-purple-800"
+                  disabled={disabled || isGenerating}
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+          
+          <div className="flex space-x-2">
+            {['时尚', '休闲', '商务', '运动', '甜美', '酷炫'].map((style) => (
+              <button
+                key={style}
+                onClick={() => addStylePreference(style)}
+                className="px-3 py-1 text-sm border border-gray-300 rounded-full hover:bg-gray-50 transition-colors"
+                disabled={disabled || isGenerating || stylePreferences.includes(style)}
+              >
+                <Plus className="w-3 h-3 inline mr-1" />
+                {style}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 错误提示 */}
+      {error && (
+        <div className="flex items-center p-3 bg-red-50 border border-red-200 rounded-lg">
+          <AlertCircle className="w-5 h-5 text-red-500 mr-2 flex-shrink-0" />
+          <span className="text-sm text-red-700">{error}</span>
+          <button
+            onClick={() => setError(null)}
+            className="ml-auto text-red-500 hover:text-red-700"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {/* 生成按钮 */}
+      <div className="flex justify-end pt-4 border-t border-gray-200">
+        <button
+          onClick={handleGenerate}
+          disabled={!canGenerate}
+          className={`flex items-center px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+            canGenerate
+              ? 'bg-purple-600 text-white hover:bg-purple-700 hover:scale-105 shadow-lg hover:shadow-xl'
+              : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+          }`}
+        >
+          {isGenerating ? (
+            <>
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+              生成中...
+            </>
+          ) : (
+            <>
+              <Wand2 className="w-5 h-5 mr-2" />
+              生成穿搭图片
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* 使用说明 */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="flex items-start">
+          <Sparkles className="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" />
+          <div className="text-sm text-blue-700">
+            <p className="font-medium mb-1">使用说明：</p>
+            <ul className="space-y-1 text-xs">
+              <li>• 选择一张模特的个人形象照片作为基础</li>
+              <li>• 上传要搭配的商品图片（服装、配饰等）</li>
+              <li>• 可选择添加生成提示词和风格偏好</li>
+              <li>• 点击生成按钮，AI将为您创建穿搭效果图</li>
+              <li>• 生成的图片数量与上传的商品图片数量相等</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OutfitImageGenerator;

apps/desktop/src/pages/ModelDetail.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
   ArrowLeftIcon,
-  PhotoIcon,
   PlusIcon,
   PlayIcon,
   TrashIcon,
@@ -10,7 +9,7 @@ import {
   ArrowPathIcon,
   SparklesIcon
 } from '@heroicons/react/24/outline';
-import { Model, PhotoType, Gender } from '../types/model';
+import { Model, ModelPhoto, PhotoType, Gender } from '../types/model';
 import {
   VideoGenerationTask,
   VideoPromptConfig,
@@ -26,6 +25,12 @@ import { invoke } from '@tauri-apps/api/core';
 import { CustomSelect } from '../components/CustomSelect';
 import { LoadingSpinner } from '../components/LoadingSpinner';
 import { DeleteConfirmDialog } from '../components/DeleteConfirmDialog';
+import { ModelDashboardStatsComponent } from '../components/ModelDashboardStats';
+import { OutfitImageService } from '../services/outfitImageService';
+import { ModelDashboardStats, OutfitImageRecord, OutfitImageGenerationRequest } from '../types/outfitImage';
+import { ModelImageGallery } from '../components/ModelImageGallery';
+import { OutfitImageGenerator } from '../components/OutfitImageGenerator';
+import { OutfitImageGallery } from '../components/OutfitImageGallery';
 
 const ModelDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -46,6 +51,11 @@ const ModelDetail: React.FC = () => {
   const [videoTasks, setVideoTasks] = useState<VideoGenerationTask[]>([]);
   const [isGenerating, setIsGenerating] = useState(false);
   const [uploadingPhotos, setUploadingPhotos] = useState(false);
+  const [dashboardStats, setDashboardStats] = useState<ModelDashboardStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [outfitRecords, setOutfitRecords] = useState<OutfitImageRecord[]>([]);
+  const [outfitRecordsLoading, setOutfitRecordsLoading] = useState(false);
+  const [generatingOutfit, setGeneratingOutfit] = useState(false);
   const [deletePhotoConfirm, setDeletePhotoConfirm] = useState<{
     show: boolean;
     photoId: string | null;
@@ -123,6 +133,131 @@ const ModelDetail: React.FC = () => {
     }
   };
 
+  // 加载个人看板统计信息
+  const loadDashboardStats = async () => {
+    if (!id) return;
+
+    try {
+      setStatsLoading(true);
+      const stats = await OutfitImageService.getModelDashboardStats(id);
+      setDashboardStats(stats);
+    } catch (err) {
+      console.error('加载个人看板统计失败:', err);
+    } finally {
+      setStatsLoading(false);
+    }
+  };
+
+  // 批量上传照片（新的图片画廊组件使用）
+  const handleBatchUploadPhotos = async (imagePaths: string[], photoType: PhotoType) => {
+    if (!id) return;
+
+    try {
+      setUploadingPhotos(true);
+      const photos = await videoGenerationService.batchUploadModelPhotos(
+        id,
+        imagePaths,
+        photoType,
+        '批量上传的照片'
+      );
+
+      if (photos && photos.length > 0) {
+        // 重新加载模特详情以获取最新的照片列表
+        await loadModelDetail();
+        await loadDashboardStats(); // 更新统计信息
+      }
+    } catch (err) {
+      console.error('批量上传照片失败:', err);
+      setError(err as string);
+    } finally {
+      setUploadingPhotos(false);
+    }
+  };
+
+  // 删除照片（新的图片画廊组件使用）
+  const handleDeletePhoto = async (photo: ModelPhoto) => {
+    if (!id) return;
+
+    try {
+      await videoGenerationService.deleteModelPhoto(id, photo.id);
+      // 重新加载模特详情以获取最新的照片列表
+      await loadModelDetail();
+      await loadDashboardStats(); // 更新统计信息
+    } catch (err) {
+      console.error('删除照片失败:', err);
+      setError(err as string);
+    }
+  };
+
+  // 切换照片收藏状态（新的图片画廊组件使用）
+  const handleTogglePhotoFavorite = async (photo: ModelPhoto) => {
+    if (!id) return;
+
+    try {
+      if (!photo.is_cover) {
+        // 设置为封面照片
+        await videoGenerationService.setCoverPhoto(id, photo.id);
+      } else {
+        // 取消封面照片（这里需要设置另一张照片为封面，或者实现取消封面的API）
+        console.log('取消封面照片功能待实现');
+        // TODO: 实现取消封面照片的功能
+      }
+
+      // 重新加载模特详情以获取最新的照片列表
+      await loadModelDetail();
+      await loadDashboardStats(); // 更新统计信息
+    } catch (err) {
+      console.error('切换照片收藏状态失败:', err);
+      setError(err as string);
+    }
+  };
+
+  // 加载穿搭图片生成记录
+  const loadOutfitRecords = async () => {
+    if (!id) return;
+
+    try {
+      setOutfitRecordsLoading(true);
+      const records = await OutfitImageService.getOutfitImageRecords(id);
+      setOutfitRecords(records);
+    } catch (err) {
+      console.error('加载穿搭图片记录失败:', err);
+    } finally {
+      setOutfitRecordsLoading(false);
+    }
+  };
+
+  // 生成穿搭图片
+  const handleGenerateOutfitImages = async (request: OutfitImageGenerationRequest) => {
+    try {
+      setGeneratingOutfit(true);
+      await OutfitImageService.generateOutfitImages(request);
+
+      // 重新加载记录和统计信息
+      await loadOutfitRecords();
+      await loadDashboardStats();
+    } catch (err) {
+      console.error('生成穿搭图片失败:', err);
+      setError(err as string);
+    } finally {
+      setGeneratingOutfit(false);
+    }
+  };
+
+  // 删除穿搭图片记录
+  const handleDeleteOutfitRecord = async (record: OutfitImageRecord) => {
+    try {
+      await OutfitImageService.deleteOutfitImageRecord(record.id);
+
+      // 重新加载记录和统计信息
+      await loadOutfitRecords();
+      await loadDashboardStats();
+    } catch (err) {
+      console.error('删除穿搭图片记录失败:', err);
+      setError(err as string);
+    }
+  };
+
   // 上传照片
   const handleUploadPhotos = async () => {
     if (!id) return;
@@ -159,7 +294,9 @@ const ModelDetail: React.FC = () => {
     }
   };
 
-  // 选择/取消选择照片
+
+
+  // 切换照片选择
   const togglePhotoSelection = (photoId: string) => {
     setSelectedPhotos(prev =>
       prev.includes(photoId)
@@ -242,20 +379,7 @@ const ModelDetail: React.FC = () => {
     });
   };
 
-  // 显示删除照片确认弹框
-  const showDeletePhotoConfirm = (photoId: string) => {
-    if (!model) return;
 
-    const photo = model.photos.find(p => p.id === photoId);
-    const photoName = photo?.description || photo?.file_name || '未知照片';
-
-    setDeletePhotoConfirm({
-      show: true,
-      photoId,
-      photoName,
-      deleting: false,
-    });
-  };
 
   // 确认删除照片
   const confirmDeletePhoto = async () => {
@@ -304,6 +428,8 @@ const ModelDetail: React.FC = () => {
   useEffect(() => {
     loadModelDetail();
     loadVideoTasks();
+    loadDashboardStats();
+    loadOutfitRecords();
   }, [id]);
 
   if (loading) {
@@ -386,10 +512,11 @@ const ModelDetail: React.FC = () => {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* 左侧：模特信息和照片 */}
-          <div className="lg:col-span-2 space-y-8">
-            {/* 模特基本信息 - 优化设计 */}
+        {/* 主要内容区域 - 优化布局 */}
+        <div className="space-y-8">
+          {/* 第一行：基本信息和个人看板统计 */}
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+            {/* 模特基本信息 */}
             <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-all duration-300 animate-slide-up">
               <div className="flex items-center mb-6">
                 <div className="w-2 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full mr-4"></div>
@@ -444,75 +571,97 @@ const ModelDetail: React.FC = () => {
               )}
             </div>
 
-            {/* 照片选择 */}
-            <div className="bg-white rounded-lg shadow p-6">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold">选择照片</h2>
-                <span className="text-sm text-gray-500">
-                  已选择 {selectedPhotos.length} 张照片
-                </span>
-              </div>
-
-              {model.photos.length === 0 ? (
-                <div className="text-center py-8">
-                  <PhotoIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-                  <p className="text-gray-500">暂无照片，请先上传照片</p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
-                  {model.photos.map((photo) => (
-                    <div
-                      key={photo.id}
-                      className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all group ${selectedPhotos.includes(photo.id)
-                        ? 'border-blue-500 ring-2 ring-blue-200'
-                        : 'border-gray-200 hover:border-gray-300'
-                        }`}
-                    >
-                      <div
-                        className="w-full h-full cursor-pointer"
-                        onClick={() => togglePhotoSelection(photo.id)}
-                      >
-                        <img
-                          src={photo.file_path.startsWith('http') ? photo.file_path : `file://${photo.file_path}`}
-                          alt={photo.description || '模特照片'}
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-
-                      {/* 删除按钮 */}
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          showDeletePhotoConfirm(photo.id);
-                        }}
-                        className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center hover:bg-red-600"
-                        title="删除照片"
-                      >
-                        <TrashIcon className="w-3 h-3" />
-                      </button>
-
-                      {/* 选中状态显示 */}
-                      {selectedPhotos.includes(photo.id) && (
-                        <div className="absolute inset-0 bg-blue-500 bg-opacity-20 flex items-center justify-center pointer-events-none">
-                          <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
-                            <span className="text-white text-xs font-bold">
-                              {selectedPhotos.indexOf(photo.id) + 1}
-                            </span>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            {/* 个人看板统计信息 */}
+            {dashboardStats && (
+              <ModelDashboardStatsComponent
+                stats={dashboardStats}
+                loading={statsLoading}
+              />
+            )}
           </div>
 
-          {/* 右侧：视频生成配置和任务 */}
-          <div className="space-y-6">
-            {/* 视频生成配置 */}
-            <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="text-lg font-semibold mb-4">视频生成配置</h2>
+          {/* 第二行：个人形象图片管理 */}
+          <ModelImageGallery
+            photos={model.photos}
+            onUpload={handleBatchUploadPhotos}
+            onDelete={handleDeletePhoto}
+            onToggleFavorite={handleTogglePhotoFavorite}
+            isUploading={uploadingPhotos}
+          />
+
+          {/* 第三行：穿搭图片功能 */}
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+            {/* 穿搭图片生成 */}
+            <OutfitImageGenerator
+              modelId={model.id}
+              modelPhotos={model.photos}
+              onGenerate={handleGenerateOutfitImages}
+              isGenerating={generatingOutfit}
+            />
+
+            {/* 穿搭图片生成记录 */}
+            <OutfitImageGallery
+              records={outfitRecords}
+              onDelete={handleDeleteOutfitRecord}
+              onRefresh={loadOutfitRecords}
+              loading={outfitRecordsLoading}
+            />
+          </div>
+
+          {/* 第四行：视频生成功能 */}
+          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+            <div className="flex items-center mb-6">
+              <div className="w-2 h-8 bg-gradient-to-b from-green-500 to-green-600 rounded-full mr-4"></div>
+              <h2 className="text-xl font-bold text-gray-900">视频生成</h2>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {/* 照片选择区域 */}
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">选择照片</h3>
+                <div className="space-y-4">
+                  {model.photos.length === 0 ? (
+                    <div className="text-center py-8 bg-gray-50 rounded-xl">
+                      <div className="text-4xl mb-2 opacity-50">📷</div>
+                      <p className="text-gray-500">暂无照片，请先上传照片</p>
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                      {model.photos.map((photo) => (
+                        <div
+                          key={photo.id}
+                          className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all cursor-pointer ${
+                            selectedPhotos.includes(photo.id)
+                              ? 'border-blue-500 ring-2 ring-blue-200 scale-105'
+                              : 'border-gray-200 hover:border-gray-300'
+                          }`}
+                          onClick={() => togglePhotoSelection(photo.id)}
+                        >
+                          <img
+                            src={photo.file_path.startsWith('http') ? photo.file_path : `file://${photo.file_path}`}
+                            alt={photo.description || '模特照片'}
+                            className="w-full h-full object-cover"
+                          />
+                          {selectedPhotos.includes(photo.id) && (
+                            <div className="absolute inset-0 bg-blue-500 bg-opacity-20 flex items-center justify-center">
+                              <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                                <span className="text-white text-xs font-bold">
+                                  {selectedPhotos.indexOf(photo.id) + 1}
+                                </span>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <div className="text-sm text-gray-500 text-center">
+                    已选择 {selectedPhotos.length} 张照片
+                  </div>
+                </div>
+              </div>
+
+              {/* 视频生成配置 */}
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">生成配置</h3>
 
               <div className="space-y-4">
                 {/* 产品描述 */}
@@ -704,18 +853,20 @@ const ModelDetail: React.FC = () => {
             </div>
           </div>
         </div>
+        </div>
       </div>
 
-      {/* 删除照片确认弹框 */}
-      <DeleteConfirmDialog
-        isOpen={deletePhotoConfirm.show}
-        title="删除照片"
-        message="确定要删除这张照片吗？此操作不可撤销。"
-        itemName={deletePhotoConfirm.photoName || undefined}
-        deleting={deletePhotoConfirm.deleting}
-        onConfirm={confirmDeletePhoto}
-        onCancel={cancelDeletePhoto}
-      />
+      {/* 删除确认对话框 */}
+        <DeleteConfirmDialog
+          isOpen={deletePhotoConfirm.show}
+          title="删除照片"
+          message="确定要删除这张照片吗？此操作不可撤销。"
+          itemName={deletePhotoConfirm.photoName || undefined}
+          deleting={deletePhotoConfirm.deleting}
+          onConfirm={confirmDeletePhoto}
+          onCancel={cancelDeletePhoto}
+        />
+      </div>
     </div>
   );
 };

apps/desktop/src/services/outfitImageService.ts

@@ -0,0 +1,199 @@
+import { invoke } from '@tauri-apps/api/core';
+import {
+  OutfitImageRecord,
+  OutfitImageGenerationRequest,
+  OutfitImageGenerationResponse,
+  OutfitImageStats,
+  ModelDashboardStats
+} from '../types/outfitImage';
+
+/**
+ * 穿搭图片服务
+ * 遵循 Tauri 开发规范的服务层设计原则
+ */
+export class OutfitImageService {
+  /**
+   * 获取模特个人看板统计信息
+   */
+  static async getModelDashboardStats(modelId: string): Promise<ModelDashboardStats> {
+    try {
+      console.log('📊 获取模特个人看板统计信息:', modelId);
+      
+      const stats = await invoke<ModelDashboardStats>('get_model_dashboard_stats', {
+        modelId
+      });
+      
+      console.log('✅ 模特个人看板统计信息获取成功:', stats);
+      return stats;
+    } catch (error) {
+      console.error('❌ 获取模特个人看板统计信息失败:', error);
+      throw new Error(`获取模特个人看板统计信息失败: ${error}`);
+    }
+  }
+
+  /**
+   * 获取模特的穿搭图片生成记录列表
+   */
+  static async getOutfitImageRecords(modelId: string): Promise<OutfitImageRecord[]> {
+    try {
+      console.log('📋 获取模特穿搭图片生成记录:', modelId);
+      
+      const records = await invoke<OutfitImageRecord[]>('get_outfit_image_records', {
+        modelId
+      });
+      
+      console.log('✅ 获取到穿搭图片记录:', records.length, '条');
+      return records;
+    } catch (error) {
+      console.error('❌ 获取穿搭图片记录失败:', error);
+      throw new Error(`获取穿搭图片记录失败: ${error}`);
+    }
+  }
+
+  /**
+   * 创建穿搭图片生成记录
+   */
+  static async createOutfitImageRecord(request: OutfitImageGenerationRequest): Promise<string> {
+    try {
+      console.log('🎨 创建穿搭图片生成记录:', request);
+      
+      const recordId = await invoke<string>('create_outfit_image_record', {
+        request
+      });
+      
+      console.log('✅ 穿搭图片生成记录创建成功:', recordId);
+      return recordId;
+    } catch (error) {
+      console.error('❌ 创建穿搭图片生成记录失败:', error);
+      throw new Error(`创建穿搭图片生成记录失败: ${error}`);
+    }
+  }
+
+  /**
+   * 删除穿搭图片生成记录
+   */
+  static async deleteOutfitImageRecord(recordId: string): Promise<void> {
+    try {
+      console.log('🗑️ 删除穿搭图片生成记录:', recordId);
+      
+      await invoke<void>('delete_outfit_image_record', {
+        recordId
+      });
+      
+      console.log('✅ 穿搭图片生成记录删除成功');
+    } catch (error) {
+      console.error('❌ 删除穿搭图片生成记录失败:', error);
+      throw new Error(`删除穿搭图片生成记录失败: ${error}`);
+    }
+  }
+
+  /**
+   * 获取穿搭图片生成记录详情
+   */
+  static async getOutfitImageRecordDetail(recordId: string): Promise<OutfitImageRecord | null> {
+    try {
+      console.log('🔍 获取穿搭图片生成记录详情:', recordId);
+      
+      const record = await invoke<OutfitImageRecord | null>('get_outfit_image_record_detail', {
+        recordId
+      });
+      
+      console.log('✅ 穿搭图片生成记录详情获取成功');
+      return record;
+    } catch (error) {
+      console.error('❌ 获取穿搭图片生成记录详情失败:', error);
+      throw new Error(`获取穿搭图片生成记录详情失败: ${error}`);
+    }
+  }
+
+  /**
+   * 生成穿搭图片（TODO: 实际的AI生成逻辑）
+   */
+  static async generateOutfitImages(request: OutfitImageGenerationRequest): Promise<OutfitImageGenerationResponse> {
+    try {
+      console.log('🎨 开始生成穿搭图片:', request);
+      
+      // 首先创建生成记录
+      const recordId = await this.createOutfitImageRecord(request);
+      
+      // TODO: 实际的AI生成逻辑
+      // 这里应该调用AI服务生成穿搭图片
+      // 目前返回模拟数据
+      const mockResponse: OutfitImageGenerationResponse = {
+        record_id: recordId,
+        generated_images: [
+          'https://example.com/outfit1.jpg',
+          'https://example.com/outfit2.jpg',
+          'https://example.com/outfit3.jpg'
+        ],
+        generation_time_ms: 5000,
+        success: true
+      };
+      
+      console.log('✅ 穿搭图片生成完成:', mockResponse);
+      return mockResponse;
+    } catch (error) {
+      console.error('❌ 穿搭图片生成失败:', error);
+      throw new Error(`穿搭图片生成失败: ${error}`);
+    }
+  }
+
+  /**
+   * 批量删除穿搭图片生成记录
+   */
+  static async batchDeleteOutfitImageRecords(recordIds: string[]): Promise<void> {
+    try {
+      console.log('🗑️ 批量删除穿搭图片生成记录:', recordIds.length, '条');
+      
+      const deletePromises = recordIds.map(recordId => 
+        this.deleteOutfitImageRecord(recordId)
+      );
+      
+      await Promise.all(deletePromises);
+      
+      console.log('✅ 批量删除穿搭图片生成记录成功');
+    } catch (error) {
+      console.error('❌ 批量删除穿搭图片生成记录失败:', error);
+      throw new Error(`批量删除穿搭图片生成记录失败: ${error}`);
+    }
+  }
+
+  /**
+   * 获取模特的穿搭图片统计信息（从看板统计中提取）
+   */
+  static async getOutfitImageStats(modelId: string): Promise<OutfitImageStats> {
+    try {
+      const dashboardStats = await this.getModelDashboardStats(modelId);
+      return dashboardStats.outfit_stats;
+    } catch (error) {
+      console.error('❌ 获取穿搭图片统计信息失败:', error);
+      throw new Error(`获取穿搭图片统计信息失败: ${error}`);
+    }
+  }
+
+  /**
+   * 检查模特是否有穿搭图片记录
+   */
+  static async hasOutfitImageRecords(modelId: string): Promise<boolean> {
+    try {
+      const records = await this.getOutfitImageRecords(modelId);
+      return records.length > 0;
+    } catch (error) {
+      console.error('❌ 检查穿搭图片记录失败:', error);
+      return false;
+    }
+  }
+
+  /**
+   * 获取模特最近的穿搭图片生成记录
+   */
+  static async getRecentOutfitImageRecords(modelId: string, limit: number = 5): Promise<OutfitImageRecord[]> {
+    try {
+      const records = await this.getOutfitImageRecords(modelId);
+      return records.slice(0, limit);
+    } catch (error) {
+      console.error('❌ 获取最近穿搭图片记录失败:', error);
+      throw new Error(`获取最近穿搭图片记录失败: ${error}`);
+    }
+  }
+}

apps/desktop/src/services/videoGenerationService.ts

@@ -155,6 +155,36 @@ class VideoGenerationService implements VideoGenerationAPI {
     }
   }
 
+  /**
+   * 删除模特照片
+   */
+  async deleteModelPhoto(modelId: string, photoId: string): Promise<void> {
+    try {
+      await invoke<void>('delete_model_photo', {
+        modelId,
+        photoId
+      });
+    } catch (error) {
+      console.error('删除模特照片失败:', error);
+      throw new Error(`删除模特照片失败: ${error}`);
+    }
+  }
+
+  /**
+   * 设置封面照片
+   */
+  async setCoverPhoto(modelId: string, photoId: string): Promise<void> {
+    try {
+      await invoke<void>('set_cover_photo', {
+        modelId,
+        photoId
+      });
+    } catch (error) {
+      console.error('设置封面照片失败:', error);
+      throw new Error(`设置封面照片失败: ${error}`);
+    }
+  }
+
   /**
    * 获取模特视频生成统计
    */

apps/desktop/src/types/outfitImage.ts

@@ -0,0 +1,100 @@
+// 穿搭图片相关类型定义
+
+export enum OutfitImageStatus {
+  Pending = "pending",
+  Processing = "processing",
+  Completed = "completed",
+  Failed = "failed"
+}
+
+export interface OutfitImageRecord {
+  id: string;
+  model_id: string;
+  model_image_id: string; // 使用的模特形象图片ID
+  generation_prompt?: string; // 生成提示词
+  status: OutfitImageStatus;
+  progress: number;
+  result_urls: string[]; // 生成的穿搭图片URLs
+  error_message?: string;
+  created_at: string;
+  started_at?: string;
+  completed_at?: string;
+  duration_ms?: number;
+  
+  // 关联数据
+  product_images: ProductImage[];
+  outfit_images: OutfitImage[];
+}
+
+export interface ProductImage {
+  id: string;
+  outfit_record_id: string;
+  file_path: string;
+  file_name: string;
+  file_size: number;
+  upload_url?: string; // 上传到云端的URL
+  description?: string;
+  created_at: string;
+}
+
+export interface OutfitImage {
+  id: string;
+  outfit_record_id: string;
+  image_url: string;
+  local_path?: string; // 本地缓存路径
+  image_index: number; // 在生成结果中的索引
+  description?: string;
+  tags: string[];
+  is_favorite: boolean;
+  created_at: string;
+}
+
+export interface OutfitImageGenerationRequest {
+  model_id: string;
+  model_image_id: string; // 选择的模特形象图片ID
+  product_image_paths: string[]; // 商品图片路径列表
+  generation_prompt?: string; // 可选的生成提示词
+  style_preferences?: string[]; // 风格偏好
+}
+
+export interface OutfitImageGenerationResponse {
+  record_id: string;
+  generated_images: string[]; // 生成的图片URLs
+  generation_time_ms: number;
+  success: boolean;
+  error_message?: string;
+}
+
+export interface OutfitImageStats {
+  total_records: number;
+  total_images: number;
+  favorite_images: number;
+  pending_records: number;
+  processing_records: number;
+  completed_records: number;
+  failed_records: number;
+}
+
+// 模特个人看板统计信息
+export interface ModelDashboardStats {
+  // 基本信息
+  model_id: string;
+  model_name: string;
+  
+  // 照片统计
+  total_photos: number;
+  portrait_photos: number; // 个人形象照片
+  work_photos: number; // 工作照片
+  
+  // 穿搭图片统计
+  outfit_stats: OutfitImageStats;
+  
+  // 生成记录统计
+  recent_generations: number; // 最近30天的生成次数
+  success_rate: number; // 成功率 (0-1)
+  
+  // 其他统计
+  favorite_count: number; // 收藏的穿搭图片数量
+  total_generation_time_ms: number; // 总生成时间
+  average_generation_time_ms: number; // 平均生成时间
+}

换装-MidJourney.json

@@ -0,0 +1,960 @@
+{
+  "id": "b647fb79-a9e4-451b-aae2-56afa1459998",
+  "revision": 0,
+  "last_node_id": 58,
+  "last_link_id": 78,
+  "nodes": [
+    {
+      "id": 27,
+      "type": "Text Concatenate",
+      "pos": [
+        139.10777282714844,
+        -151.3667755126953
+      ],
+      "size": [
+        270,
+        142
+      ],
+      "flags": {},
+      "order": 15,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "文本_A",
+          "name": "text_a",
+          "shape": 7,
+          "type": "STRING",
+          "link": 64
+        },
+        {
+          "label": "文本_B",
+          "name": "text_b",
+          "shape": 7,
+          "type": "STRING",
+          "link": 65
+        },
+        {
+          "label": "文本_C",
+          "name": "text_c",
+          "shape": 7,
+          "type": "STRING",
+          "link": 63
+        },
+        {
+          "label": "文本_d",
+          "name": "text_d",
+          "shape": 7,
+          "type": "STRING",
+          "link": 75
+        }
+      ],
+      "outputs": [
+        {
+          "label": "字符串",
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            36,
+            44
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "was-ns",
+        "ver": "3.0.0",
+        "Node name for S&R": "Text Concatenate"
+      },
+      "widgets_values": [
+        " ",
+        "true"
+      ]
+    },
+    {
+      "id": 37,
+      "type": "easy showAnything",
+      "pos": [
+        -554.389892578125,
+        257.8910827636719
+      ],
+      "size": [
+        331.3696594238281,
+        367.22528076171875
+      ],
+      "flags": {},
+      "order": 13,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "输入任何",
+          "name": "anything",
+          "shape": 7,
+          "type": "*",
+          "link": 48
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output",
+          "type": "*",
+          "links": [
+            62
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfyui-easy-use",
+        "ver": "1.3.1",
+        "Node name for S&R": "easy showAnything"
+      },
+      "widgets_values": [
+        "A person is dressed in a fashionable outfit consisting of a black sleeveless top paired with a fitted black skirt that features a white ruffled hemline. They are accessorized with white knee-high socks and bright red flat shoes, adding a pop of color to the ensemble. The individual is holding a handbag adorned with colorful decorations, including ribbons and small floral embellishments. Their stance is relaxed, with one hand resting near their hip and the other casually holding the bag.\nThe scene takes place in a modern setting, likely a boutique or showroom. The background showcases an industrial-style doorway with glass panels framed by black metal. Beyond the doorway, there is a display area with clothing hanging on racks, suggesting a fashionable retail environment. The space features neutral-toned walls and a gray carpeted floor, creating a sleek and understated atmosphere."
+      ]
+    },
+    {
+      "id": 40,
+      "type": "S3UploadIMAGEURL",
+      "pos": [
+        -1049.9146728515625,
+        -187.3993682861328
+      ],
+      "size": [
+        270,
+        58
+      ],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "image",
+          "name": "image",
+          "type": "IMAGE",
+          "link": 77
+        }
+      ],
+      "outputs": [
+        {
+          "label": "URL",
+          "name": "URL",
+          "type": "STRING",
+          "links": [
+            58,
+            64
+          ]
+        }
+      ],
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "bbea095da9854f8c0fe20f93254f1500f51eff1c",
+        "Node name for S&R": "S3UploadIMAGEURL"
+      },
+      "widgets_values": [
+        "test"
+      ]
+    },
+    {
+      "id": 48,
+      "type": "Note",
+      "pos": [
+        -1047.89697265625,
+        755.7965087890625
+      ],
+      "size": [
+        458.7157897949219,
+        251.05812072753906
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "不描述场景\n\nPlease provide a detailed description of this piece of clothing. Avoid describing any human body features such as skin color or skin marks. Additionally, ensure to avoid any prohibited words or phrases. Only output a description of the clothing.Describe clothes directly, starting with 'a...'\n\n**ALLOWED**\n- Any image up to PG-13 rating involving fiction, fantasy, mythology.\n- Real images that may be seen as respectful or light-hearted parodies, satire, caricatures\n- Imaginary or exaggerated real-life scenarios, including absurd or humorous situations.\n\n**NOT ALLOWED**\n- Disrespectful, harmful, misleading public figures/events portrayals or potential to mislead.\n- Hate speech, explicit or real-world violence.\n- Nudity or unconsented overtly sexualized public figures.\n- Imagery that might be considered culturally insensitive"
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    },
+    {
+      "id": 50,
+      "type": "easy imageScaleDownToSize",
+      "pos": [
+        -1925.8563232421875,
+        145.95310974121094
+      ],
+      "size": [
+        270,
+        82
+      ],
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "图像",
+          "name": "images",
+          "type": "IMAGE",
+          "link": 76
+        }
+      ],
+      "outputs": [
+        {
+          "label": "图像",
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            69,
+            70,
+            71
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfyui-easy-use",
+        "ver": "1.3.1",
+        "Node name for S&R": "easy imageScaleDownToSize"
+      },
+      "widgets_values": [
+        512,
+        true
+      ]
+    },
+    {
+      "id": 51,
+      "type": "PreviewImage",
+      "pos": [
+        -1492.4449462890625,
+        359.886962890625
+      ],
+      "size": [
+        266.6930236816406,
+        364.6843566894531
+      ],
+      "flags": {},
+      "order": 11,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "图像",
+          "name": "images",
+          "type": "IMAGE",
+          "link": 71
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.47",
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 41,
+      "type": "easy showAnything",
+      "pos": [
+        -737.2918701171875,
+        -282.73724365234375
+      ],
+      "size": [
+        260.8580627441406,
+        88
+      ],
+      "flags": {},
+      "order": 8,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "输入任何",
+          "name": "anything",
+          "shape": 7,
+          "type": "*",
+          "link": 58
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output",
+          "type": "*",
+          "links": []
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfyui-easy-use",
+        "ver": "1.3.1",
+        "Node name for S&R": "easy showAnything"
+      },
+      "widgets_values": [
+        "https://cdn.roasmax.cn/test/tmpyg7hjk3v.png"
+      ]
+    },
+    {
+      "id": 11,
+      "type": "LLMChatMultiModalImageTensor",
+      "pos": [
+        -1049.527099609375,
+        261.4039001464844
+      ],
+      "size": [
+        450.9809265136719,
+        384.0978088378906
+      ],
+      "flags": {},
+      "order": 10,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "image",
+          "name": "image",
+          "type": "IMAGE",
+          "link": 70
+        },
+        {
+          "name": "prompt",
+          "type": "STRING",
+          "widget": {
+            "name": "prompt"
+          },
+          "link": 74
+        }
+      ],
+      "outputs": [
+        {
+          "label": "llm输出",
+          "name": "llm输出",
+          "type": "STRING",
+          "links": [
+            48
+          ]
+        }
+      ],
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "42f3db768c1413c101e6c55aea94b9794d8c85f2",
+        "Node name for S&R": "LLMChatMultiModalImageTensor"
+      },
+      "widgets_values": [
+        "gpt-4o-1120",
+        "",
+        0.7,
+        4096,
+        121
+      ]
+    },
+    {
+      "id": 35,
+      "type": "S3UploadIMAGEURL",
+      "pos": [
+        -1079.114501953125,
+        9.697609901428223
+      ],
+      "size": [
+        270,
+        58
+      ],
+      "flags": {},
+      "order": 9,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "image",
+          "name": "image",
+          "type": "IMAGE",
+          "link": 69
+        }
+      ],
+      "outputs": [
+        {
+          "label": "URL",
+          "name": "URL",
+          "type": "STRING",
+          "links": [
+            45,
+            65
+          ]
+        }
+      ],
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "bbea095da9854f8c0fe20f93254f1500f51eff1c",
+        "Node name for S&R": "S3UploadIMAGEURL"
+      },
+      "widgets_values": [
+        "test"
+      ]
+    },
+    {
+      "id": 36,
+      "type": "easy showAnything",
+      "pos": [
+        -729.23046875,
+        92.5132827758789
+      ],
+      "size": [
+        268.3975830078125,
+        88
+      ],
+      "flags": {},
+      "order": 12,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "输入任何",
+          "name": "anything",
+          "shape": 7,
+          "type": "*",
+          "link": 45
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output",
+          "type": "*",
+          "links": []
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfyui-easy-use",
+        "ver": "1.3.1",
+        "Node name for S&R": "easy showAnything"
+      },
+      "widgets_values": [
+        "https://cdn.roasmax.cn/test/tmpsc7v2ywq.png"
+      ]
+    },
+    {
+      "id": 56,
+      "type": "PrimitiveString",
+      "pos": [
+        -167.5723876953125,
+        84.83244323730469
+      ],
+      "size": [
+        270,
+        58
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            75
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.47",
+        "Node name for S&R": "PrimitiveString"
+      },
+      "widgets_values": [
+        " --ar 9:16 --s 150 --v 7.0 --ow 800"
+      ]
+    },
+    {
+      "id": 34,
+      "type": "ModalMidJourneyGenerateImage",
+      "pos": [
+        464.33251953125,
+        -244.71023559570312
+      ],
+      "size": [
+        294.201416015625,
+        322.385498046875
+      ],
+      "flags": {},
+      "order": 17,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "image",
+          "name": "image",
+          "type": "IMAGE",
+          "link": 78
+        },
+        {
+          "label": "prompt",
+          "name": "prompt",
+          "type": "STRING",
+          "widget": {
+            "name": "prompt"
+          },
+          "link": 44
+        }
+      ],
+      "outputs": [
+        {
+          "label": "image",
+          "name": "image",
+          "type": "IMAGE",
+          "links": [
+            52
+          ]
+        }
+      ],
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "bbea095da9854f8c0fe20f93254f1500f51eff1c",
+        "Node name for S&R": "ModalMidJourneyGenerateImage"
+      },
+      "widgets_values": [
+        "一幅宏大壮美的山川画卷",
+        "bowongai-test--text-video-agent-fastapi-app.modal.run",
+        240
+      ]
+    },
+    {
+      "id": 42,
+      "type": "Text Concatenate",
+      "pos": [
+        -184.83560180664062,
+        -124.04792022705078
+      ],
+      "size": [
+        270,
+        142
+      ],
+      "flags": {},
+      "order": 14,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "文本_A",
+          "name": "text_a",
+          "shape": 7,
+          "type": "STRING",
+          "link": 67
+        },
+        {
+          "label": "文本_B",
+          "name": "text_b",
+          "shape": 7,
+          "type": "STRING",
+          "link": 62
+        },
+        {
+          "label": "文本_C",
+          "name": "text_c",
+          "shape": 7,
+          "type": "STRING",
+          "link": null
+        },
+        {
+          "label": "文本_d",
+          "name": "text_d",
+          "shape": 7,
+          "type": "STRING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "label": "字符串",
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            63
+          ]
+        }
+      ],
+      "properties": {
+        "cnr_id": "was-ns",
+        "ver": "3.0.0",
+        "Node name for S&R": "Text Concatenate"
+      },
+      "widgets_values": [
+        " ",
+        "true"
+      ]
+    },
+    {
+      "id": 33,
+      "type": "easy showAnything",
+      "pos": [
+        138.95408630371094,
+        65.10650634765625
+      ],
+      "size": [
+        276.2622375488281,
+        220.48167419433594
+      ],
+      "flags": {},
+      "order": 16,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "输入任何",
+          "name": "anything",
+          "shape": 7,
+          "type": "*",
+          "link": 36
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output",
+          "type": "*",
+          "links": null
+        }
+      ],
+      "properties": {
+        "cnr_id": "comfyui-easy-use",
+        "ver": "1.3.1",
+        "Node name for S&R": "easy showAnything"
+      },
+      "widgets_values": [
+        "https://cdn.roasmax.cn/test/tmpyg7hjk3v.png https://cdn.roasmax.cn/test/tmpsc7v2ywq.png a 20-year-old fashion influencer with dark brown wavy hair.Plump and curvaceous figure. A person is dressed in a fashionable outfit consisting of a black sleeveless top paired with a fitted black skirt that features a white ruffled hemline. They are accessorized with white knee-high socks and bright red flat shoes, adding a pop of color to the ensemble. The individual is holding a handbag adorned with colorful decorations, including ribbons and small floral embellishments. Their stance is relaxed, with one hand resting near their hip and the other casually holding the bag.\nThe scene takes place in a modern setting, likely a boutique or showroom. The background showcases an industrial-style doorway with glass panels framed by black metal. Beyond the doorway, there is a display area with clothing hanging on racks, suggesting a fashionable retail environment. The space features neutral-toned walls and a gray carpeted floor, creating a sleek and understated atmosphere. --ar 9:16 --s 150 --v 7.0 --ow 800"
+      ]
+    },
+    {
+      "id": 58,
+      "type": "LoadImgCustom",
+      "pos": [
+        -2323.911865234375,
+        -570.9915161132812
+      ],
+      "size": [
+        288.9068298339844,
+        318
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "links": [
+            77,
+            78
+          ]
+        }
+      ],
+      "title": "BOWONG-INPUT-模特图",
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "bbea095da9854f8c0fe20f93254f1500f51eff1c",
+        "Node name for S&R": "LoadImgCustom"
+      },
+      "widgets_values": [
+        "https://example.com/sample.jpg",
+        "20250711-131927.png",
+        "image"
+      ]
+    },
+    {
+      "id": 45,
+      "type": "String",
+      "pos": [
+        -2321.6103515625,
+        -118.8946304321289
+      ],
+      "size": [
+        271.8282775878906,
+        216.02146911621094
+      ],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "label": "字符串",
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            67
+          ]
+        }
+      ],
+      "title": "BOWONG-INPUT-模特描述",
+      "properties": {
+        "cnr_id": "comfyui-logic",
+        "ver": "1.0.0",
+        "Node name for S&R": "String"
+      },
+      "widgets_values": [
+        "a 20-year-old fashion influencer with dark brown wavy hair.Plump and curvaceous figure."
+      ]
+    },
+    {
+      "id": 55,
+      "type": "PrimitiveStringMultiline",
+      "pos": [
+        -2319.101318359375,
+        715.9893188476562
+      ],
+      "size": [
+        400,
+        200
+      ],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            74
+          ]
+        }
+      ],
+      "title": "提示词",
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.47",
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": [
+        "Please provide a detailed description of the clothing, actions of the person in the image, and the background of the scene. Avoid describing any human physical features, such as skin color or skin marks. Additionally, ensure that no prohibited words or phrases are used, and begin directly with \"A...\".\n\n**ALLOWED**\n- Any image up to PG-13 rating involving fiction, fantasy, mythology.\n- Real images that may be seen as respectful or light-hearted parodies, satire, caricatures\n- Imaginary or exaggerated real-life scenarios, including absurd or humorous situations.\n\n**NOT ALLOWED**\n- Disrespectful, harmful, misleading public figures/events portrayals or potential to mislead.\n- Hate speech, explicit or real-world violence.\n- Nudity or unconsented overtly sexualized public figures.\n- Imagery that might be considered culturally insensitive"
+      ]
+    },
+    {
+      "id": 39,
+      "type": "SaveImage",
+      "pos": [
+        810.7241821289062,
+        -163.19766235351562
+      ],
+      "size": [
+        1150.3494873046875,
+        1225.25634765625
+      ],
+      "flags": {},
+      "order": 18,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "图像",
+          "name": "images",
+          "type": "IMAGE",
+          "link": 52
+        }
+      ],
+      "outputs": [],
+      "title": "BOWONG-OUTPUT",
+      "properties": {
+        "cnr_id": "comfy-core",
+        "ver": "0.3.47",
+        "Node name for S&R": "SaveImage"
+      },
+      "widgets_values": [
+        "MJ批量测试/0725"
+      ]
+    },
+    {
+      "id": 57,
+      "type": "LoadImgCustom",
+      "pos": [
+        -2328.1865234375,
+        229.0241241455078
+      ],
+      "size": [
+        288.9068298339844,
+        318
+      ],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "links": [
+            76
+          ]
+        }
+      ],
+      "title": "BOWONG-INPUT-穿搭图",
+      "properties": {
+        "aux_id": "ComfyUI-CustomNode.git",
+        "ver": "bbea095da9854f8c0fe20f93254f1500f51eff1c",
+        "Node name for S&R": "LoadImgCustom"
+      },
+      "widgets_values": [
+        "https://example.com/sample.jpg",
+        "20250711-131927.png",
+        "image"
+      ]
+    }
+  ],
+  "links": [
+    [
+      36,
+      27,
+      0,
+      33,
+      0,
+      "*"
+    ],
+    [
+      44,
+      27,
+      0,
+      34,
+      1,
+      "STRING"
+    ],
+    [
+      45,
+      35,
+      0,
+      36,
+      0,
+      "*"
+    ],
+    [
+      48,
+      11,
+      0,
+      37,
+      0,
+      "*"
+    ],
+    [
+      52,
+      34,
+      0,
+      39,
+      0,
+      "IMAGE"
+    ],
+    [
+      58,
+      40,
+      0,
+      41,
+      0,
+      "*"
+    ],
+    [
+      62,
+      37,
+      0,
+      42,
+      1,
+      "STRING"
+    ],
+    [
+      63,
+      42,
+      0,
+      27,
+      2,
+      "STRING"
+    ],
+    [
+      64,
+      40,
+      0,
+      27,
+      0,
+      "STRING"
+    ],
+    [
+      65,
+      35,
+      0,
+      27,
+      1,
+      "STRING"
+    ],
+    [
+      67,
+      45,
+      0,
+      42,
+      0,
+      "STRING"
+    ],
+    [
+      69,
+      50,
+      0,
+      35,
+      0,
+      "IMAGE"
+    ],
+    [
+      70,
+      50,
+      0,
+      11,
+      0,
+      "IMAGE"
+    ],
+    [
+      71,
+      50,
+      0,
+      51,
+      0,
+      "IMAGE"
+    ],
+    [
+      74,
+      55,
+      0,
+      11,
+      1,
+      "STRING"
+    ],
+    [
+      75,
+      56,
+      0,
+      27,
+      3,
+      "STRING"
+    ],
+    [
+      76,
+      57,
+      0,
+      50,
+      0,
+      "IMAGE"
+    ],
+    [
+      77,
+      58,
+      0,
+      40,
+      0,
+      "IMAGE"
+    ],
+    [
+      78,
+      58,
+      0,
+      34,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7247295000000148,
+      "offset": [
+        3546.4326713015143,
+        616.7631618357939
+      ]
+    },
+    "frontendVersion": "1.23.4",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true
+  },
+  "version": 0.4
+}