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>