refactor: 移除个人形象图片收藏功能
- 移除ModelImageGallery组件中的收藏按钮和心形图标 - 移除ModelImagePreviewModal组件中的收藏功能 - 移除ModelDetail页面中的handleTogglePhotoFavorite函数 - 简化照片管理界面,专注于基本的上传、删除、预览功能 - 移除Heart图标导入和onToggleFavorite相关属性 优化目标: - 界面更加简洁清爽 - 减少不必要的功能复杂度 - 提升用户体验的专注度
This commit is contained in:
parent
abe9cfac94
commit
e4c49126f5
|
|
@ -2,7 +2,6 @@ import React, { useState, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Eye,
|
Eye,
|
||||||
Trash2,
|
Trash2,
|
||||||
Heart,
|
|
||||||
Plus,
|
Plus,
|
||||||
Grid3X3,
|
Grid3X3,
|
||||||
List,
|
List,
|
||||||
|
|
@ -18,7 +17,6 @@ interface ModelImageGalleryProps {
|
||||||
photos: ModelPhoto[];
|
photos: ModelPhoto[];
|
||||||
onUpload: (imagePaths: string[], photoType: PhotoType) => Promise<void>;
|
onUpload: (imagePaths: string[], photoType: PhotoType) => Promise<void>;
|
||||||
onDelete: (photo: ModelPhoto) => Promise<void>;
|
onDelete: (photo: ModelPhoto) => Promise<void>;
|
||||||
onToggleFavorite?: (photo: ModelPhoto) => Promise<void>;
|
|
||||||
isUploading?: boolean;
|
isUploading?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
@ -34,7 +32,6 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
photos,
|
photos,
|
||||||
onUpload,
|
onUpload,
|
||||||
onDelete,
|
onDelete,
|
||||||
onToggleFavorite,
|
|
||||||
isUploading = false,
|
isUploading = false,
|
||||||
className = ''
|
className = ''
|
||||||
}) => {
|
}) => {
|
||||||
|
|
@ -295,19 +292,7 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
>
|
>
|
||||||
<Eye className="w-4 h-4" />
|
<Eye className="w-4 h-4" />
|
||||||
</button>
|
</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
|
<button
|
||||||
onClick={() => handleDeleteClick(photo)}
|
onClick={() => handleDeleteClick(photo)}
|
||||||
className="p-2 bg-white text-red-600 rounded-full hover:bg-red-50 transition-colors"
|
className="p-2 bg-white text-red-600 rounded-full hover:bg-red-50 transition-colors"
|
||||||
|
|
@ -324,9 +309,6 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
<span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
|
<span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
|
||||||
{getPhotoTypeLabel(photo.photo_type)}
|
{getPhotoTypeLabel(photo.photo_type)}
|
||||||
</span>
|
</span>
|
||||||
{photo.is_cover && (
|
|
||||||
<Heart className="w-4 h-4 text-red-500 fill-current" />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm font-medium text-gray-900 truncate" title={photo.file_name}>
|
<p className="text-sm font-medium text-gray-900 truncate" title={photo.file_name}>
|
||||||
{photo.file_name}
|
{photo.file_name}
|
||||||
|
|
@ -363,9 +345,6 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
<span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
|
<span className={`px-2 py-1 text-xs rounded-full ${getPhotoTypeColor(photo.photo_type)}`}>
|
||||||
{getPhotoTypeLabel(photo.photo_type)}
|
{getPhotoTypeLabel(photo.photo_type)}
|
||||||
</span>
|
</span>
|
||||||
{photo.is_cover && (
|
|
||||||
<Heart className="w-4 h-4 text-red-500 fill-current" />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
{formatFileSize(photo.file_size)} • {new Date(photo.created_at).toLocaleDateString()}
|
{formatFileSize(photo.file_size)} • {new Date(photo.created_at).toLocaleDateString()}
|
||||||
|
|
@ -386,19 +365,7 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
>
|
>
|
||||||
<Eye className="w-4 h-4" />
|
<Eye className="w-4 h-4" />
|
||||||
</button>
|
</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
|
<button
|
||||||
onClick={() => handleDeleteClick(photo)}
|
onClick={() => handleDeleteClick(photo)}
|
||||||
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
|
|
@ -421,7 +388,6 @@ export const ModelImageGallery: React.FC<ModelImageGalleryProps> = ({
|
||||||
isOpen={previewModal.isOpen}
|
isOpen={previewModal.isOpen}
|
||||||
onClose={closePreview}
|
onClose={closePreview}
|
||||||
onDelete={handleDeleteClick}
|
onDelete={handleDeleteClick}
|
||||||
onToggleFavorite={onToggleFavorite}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 删除确认对话框 */}
|
{/* 删除确认对话框 */}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ import {
|
||||||
Maximize2,
|
Maximize2,
|
||||||
Minimize2,
|
Minimize2,
|
||||||
Trash2,
|
Trash2,
|
||||||
Heart,
|
|
||||||
Info,
|
Info,
|
||||||
Calendar,
|
Calendar,
|
||||||
FileImage,
|
FileImage,
|
||||||
|
|
@ -25,7 +24,6 @@ interface ModelImagePreviewModalProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onDelete?: (photo: ModelPhoto) => void;
|
onDelete?: (photo: ModelPhoto) => void;
|
||||||
onToggleFavorite?: (photo: ModelPhoto) => void;
|
|
||||||
title?: string;
|
title?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,7 +37,6 @@ export const ModelImagePreviewModal: React.FC<ModelImagePreviewModalProps> = ({
|
||||||
isOpen,
|
isOpen,
|
||||||
onClose,
|
onClose,
|
||||||
onDelete,
|
onDelete,
|
||||||
onToggleFavorite,
|
|
||||||
title = "图片预览"
|
title = "图片预览"
|
||||||
}) => {
|
}) => {
|
||||||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||||||
|
|
@ -144,11 +141,7 @@ export const ModelImagePreviewModal: React.FC<ModelImagePreviewModalProps> = ({
|
||||||
}
|
}
|
||||||
}, [currentPhoto, onDelete]);
|
}, [currentPhoto, onDelete]);
|
||||||
|
|
||||||
const handleToggleFavorite = useCallback(() => {
|
|
||||||
if (currentPhoto && onToggleFavorite) {
|
|
||||||
onToggleFavorite(currentPhoto);
|
|
||||||
}
|
|
||||||
}, [currentPhoto, onToggleFavorite]);
|
|
||||||
|
|
||||||
const getPhotoTypeLabel = (photoType: PhotoType): string => {
|
const getPhotoTypeLabel = (photoType: PhotoType): string => {
|
||||||
switch (photoType) {
|
switch (photoType) {
|
||||||
|
|
@ -222,18 +215,7 @@ export const ModelImagePreviewModal: React.FC<ModelImagePreviewModalProps> = ({
|
||||||
<Info className="w-5 h-5" />
|
<Info className="w-5 h-5" />
|
||||||
</button>
|
</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
|
<button
|
||||||
|
|
|
||||||
|
|
@ -160,28 +160,7 @@ const ModelDetail: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 切换照片收藏状态(新的图片画廊组件使用)
|
|
||||||
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 () => {
|
const loadOutfitRecords = async () => {
|
||||||
|
|
@ -495,7 +474,6 @@ const ModelDetail: React.FC = () => {
|
||||||
photos={model.photos}
|
photos={model.photos}
|
||||||
onUpload={handleBatchUploadPhotos}
|
onUpload={handleBatchUploadPhotos}
|
||||||
onDelete={handleDeletePhoto}
|
onDelete={handleDeletePhoto}
|
||||||
onToggleFavorite={handleTogglePhotoFavorite}
|
|
||||||
isUploading={uploadingPhotos}
|
isUploading={uploadingPhotos}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue