From f31783f68261c3ed0331f7041b82358c2cb54b3d Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Wed, 30 Jul 2025 18:42:06 +0800
Subject: [PATCH] =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E7=A9=BF=E6=90=AD?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E8=AE=B0=E5=BD=95=E5=88=97=E8=A1=A8=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 功能改进：
- 在模特详情页的穿搭生成标签页中添加记录列表展示
- 使用 OutfitImageGallery 组件展示所有穿搭生成记录
- 添加统计信息展示（总记录数、成功数、处理中/失败数）
- 添加删除穿搭记录功能

 修改内容：
- ModelDetail.tsx: 重构穿搭生成标签页布局
- 添加 OutfitImageGallery 组件导入和使用
- 添加 handleDeleteOutfitRecord 删除处理函数
- 修复统计字段名称（使用 outfit_stats 嵌套结构）

 UI优化：
- 头部操作区域：显示生成按钮和统计信息
- 记录列表区域：完整展示所有穿搭生成记录
- 支持网格/列表视图切换、搜索过滤等功能

现在用户可以在穿搭生成标签页中查看所有5条记录了！
---
 apps/desktop/src/pages/ModelDetail.tsx | 93 +++++++++++++++++++-------
 1 file changed, 70 insertions(+), 23 deletions(-)

diff --git a/apps/desktop/src/pages/ModelDetail.tsx b/apps/desktop/src/pages/ModelDetail.tsx
index 0a509cc..faaaad0 100644
--- a/apps/desktop/src/pages/ModelDetail.tsx
+++ b/apps/desktop/src/pages/ModelDetail.tsx
@@ -16,6 +16,7 @@ import { ModelDashboardStats, OutfitImageRecord, OutfitImageGenerationRequest }
 import { ModelImageGallery } from '../components/ModelImageGallery';
 import { OutfitImageGenerationModal } from '../components/OutfitImageGenerationModal';
 import { ModelImageUploadModal } from '../components/ModelImageUploadModal';
+import { OutfitImageGallery } from '../components/OutfitImageGallery';
 import { ModelDetailHeader } from '../components/model-detail/ModelDetailHeader';
 import { ModelDetailTabs, TabId } from '../components/model-detail/ModelDetailTabs';
 import { ModelOverviewTab } from '../components/model-detail/ModelOverviewTab';
@@ -314,6 +315,19 @@ const ModelDetail: React.FC = () => {
     }
   };
 
+  // 删除穿搭图片记录
+  const handleDeleteOutfitRecord = async (record: OutfitImageRecord) => {
+    try {
+      await OutfitImageService.deleteOutfitImageRecord(record.id);
+      // 重新加载记录和统计信息
+      await loadOutfitRecords();
+      await loadDashboardStats();
+    } catch (err) {
+      console.error('删除穿搭记录失败:', err);
+      setError(`删除穿搭记录失败: ${err}`);
+    }
+  };
+
   // 初始化
   useEffect(() => {
     loadModelDetail();
@@ -460,31 +474,64 @@ const ModelDetail: React.FC = () => {
 
           {/* 穿搭生成选项卡 */}
           {activeTab === 'outfits' && (
-            <div className="animate-fade-in">
-              <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
-                <div className="text-center">
-                  <div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
-                    <span className="text-3xl">👗</span>
-                  </div>
-
-                  <h3 className="text-2xl font-bold text-gray-900 mb-4">AI穿搭图片生成</h3>
-                  <p className="text-gray-600 mb-8 max-w-md mx-auto">
-                    为 {model.name} 生成专业的AI穿搭效果图，支持多种风格和商品搭配
-                  </p>
-
-                  <div className="space-y-4">
-                    <button
-                      onClick={() => setShowOutfitModal(true)}
-                      className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-pink-600 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
-                    >
-                      <span className="text-xl mr-3">✨</span>
-                      开始生成穿搭图片
-                    </button>
-
-                    <div className="text-sm text-gray-500">
-                      已有 {outfitRecords.length} 条生成记录
+            <div className="animate-fade-in space-y-6">
+              {/* 头部操作区域 */}
+              <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
+                      <span className="text-xl">👗</span>
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-bold text-gray-900">AI穿搭图片生成</h3>
+                      <p className="text-gray-600">
+                        为 {model.name} 生成专业的AI穿搭效果图
+                      </p>
                     </div>
                   </div>
+
+                  <button
+                    onClick={() => setShowOutfitModal(true)}
+                    className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-pink-600 transition-all duration-200 shadow-lg hover:shadow-xl"
+                  >
+                    <span className="text-lg mr-2">✨</span>
+                    生成穿搭图片
+                  </button>
+                </div>
+
+                {/* 统计信息 */}
+                {dashboardStats && (
+                  <div className="flex gap-6 mt-6 pt-6 border-t border-gray-100">
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-gray-900">{dashboardStats.outfit_stats.total_records}</div>
+                      <div className="text-sm text-gray-600">生成记录</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-green-600">{dashboardStats.outfit_stats.completed_records}</div>
+                      <div className="text-sm text-gray-600">成功生成</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-orange-600">{dashboardStats.outfit_stats.total_records - dashboardStats.outfit_stats.completed_records}</div>
+                      <div className="text-sm text-gray-600">处理中/失败</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* 穿搭生成记录列表 */}
+              <div className="bg-white rounded-2xl shadow-sm border border-gray-200">
+                <div className="p-6 border-b border-gray-200">
+                  <h4 className="text-lg font-semibold text-gray-900">生成记录</h4>
+                  <p className="text-sm text-gray-600 mt-1">查看所有穿搭图片生成记录和结果</p>
+                </div>
+
+                <div className="p-6">
+                  <OutfitImageGallery
+                    records={outfitRecords}
+                    onDelete={handleDeleteOutfitRecord}
+                    onRefresh={loadOutfitRecords}
+                    loading={false}
+                  />
                 </div>
               </div>
             </div>