427 lines
15 KiB
TypeScript
427 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Model, ModelStatus, Gender, ModelViewMode, ModelSortBy, SortOrder } from '../types/model';
|
|
import { modelService } from '../services/modelService';
|
|
import ModelCard from './ModelCard';
|
|
import ModelForm from './ModelForm';
|
|
import ModelSearch from './ModelSearch';
|
|
import {
|
|
PlusIcon,
|
|
Squares2X2Icon,
|
|
ListBulletIcon,
|
|
FunnelIcon,
|
|
MagnifyingGlassIcon,
|
|
SparklesIcon,
|
|
HeartIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import '../styles/design-system.css';
|
|
|
|
interface ModelListProps {
|
|
onModelSelect?: (model: Model) => void;
|
|
}
|
|
|
|
const ModelList: React.FC<ModelListProps> = ({ onModelSelect }) => {
|
|
const [models, setModels] = useState<Model[]>([]);
|
|
const [filteredModels, setFilteredModels] = useState<Model[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
const [editingModel, setEditingModel] = useState<Model | null>(null);
|
|
const [viewMode, setViewMode] = useState<ModelViewMode>(ModelViewMode.Grid);
|
|
const [sortBy, setSortBy] = useState<ModelSortBy>(ModelSortBy.CreatedAt);
|
|
const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.Desc);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<ModelStatus | 'all'>('all');
|
|
const [genderFilter, setGenderFilter] = useState<Gender | 'all'>('all');
|
|
const [favorites, setFavorites] = useState<Set<string>>(new Set());
|
|
const [showFilters, setShowFilters] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadModels();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
filterAndSortModels();
|
|
}, [models, searchQuery, statusFilter, genderFilter, sortBy, sortOrder]);
|
|
|
|
const loadModels = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
console.log('开始加载模特列表...');
|
|
const modelList = await modelService.getAllModels();
|
|
console.log('模特列表加载成功:', modelList);
|
|
setModels(modelList);
|
|
} catch (err) {
|
|
console.error('加载模特列表失败:', err);
|
|
setError(err instanceof Error ? err.message : '加载模特列表失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filterAndSortModels = () => {
|
|
let filtered = [...models];
|
|
|
|
// 搜索过滤
|
|
if (searchQuery.trim()) {
|
|
const query = searchQuery.toLowerCase();
|
|
filtered = filtered.filter(model =>
|
|
model.name.toLowerCase().includes(query) ||
|
|
(model.stage_name && model.stage_name.toLowerCase().includes(query)) ||
|
|
model.tags.some(tag => tag.toLowerCase().includes(query))
|
|
);
|
|
}
|
|
|
|
// 状态过滤
|
|
if (statusFilter !== 'all') {
|
|
filtered = filtered.filter(model => model.status === statusFilter);
|
|
}
|
|
|
|
// 性别过滤
|
|
if (genderFilter !== 'all') {
|
|
filtered = filtered.filter(model => model.gender === genderFilter);
|
|
}
|
|
|
|
// 排序
|
|
filtered.sort((a, b) => {
|
|
let aValue: any, bValue: any;
|
|
|
|
switch (sortBy) {
|
|
case ModelSortBy.Name:
|
|
aValue = a.name.toLowerCase();
|
|
bValue = b.name.toLowerCase();
|
|
break;
|
|
case ModelSortBy.CreatedAt:
|
|
aValue = new Date(a.created_at);
|
|
bValue = new Date(b.created_at);
|
|
break;
|
|
case ModelSortBy.UpdatedAt:
|
|
aValue = new Date(a.updated_at);
|
|
bValue = new Date(b.updated_at);
|
|
break;
|
|
case ModelSortBy.Rating:
|
|
aValue = a.rating || 0;
|
|
bValue = b.rating || 0;
|
|
break;
|
|
case ModelSortBy.Age:
|
|
aValue = a.age || 0;
|
|
bValue = b.age || 0;
|
|
break;
|
|
case ModelSortBy.Height:
|
|
aValue = a.height || 0;
|
|
bValue = b.height || 0;
|
|
break;
|
|
default:
|
|
return 0;
|
|
}
|
|
|
|
if (aValue < bValue) return sortOrder === SortOrder.Asc ? -1 : 1;
|
|
if (aValue > bValue) return sortOrder === SortOrder.Asc ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
setFilteredModels(filtered);
|
|
};
|
|
|
|
const handleCreateModel = async (modelData: any) => {
|
|
try {
|
|
await modelService.createModel(modelData);
|
|
setShowCreateModal(false);
|
|
await loadModels();
|
|
} catch (err) {
|
|
console.error('创建模特失败:', err);
|
|
}
|
|
};
|
|
|
|
const handleUpdateModel = async (modelData: any) => {
|
|
if (!editingModel) return;
|
|
|
|
try {
|
|
await modelService.updateModel(editingModel.id, modelData);
|
|
setEditingModel(null);
|
|
await loadModels();
|
|
} catch (err) {
|
|
console.error('更新模特失败:', err);
|
|
}
|
|
};
|
|
|
|
const handleDeleteModel = async (modelId: string) => {
|
|
if (!confirm('确定要删除这个模特吗？')) return;
|
|
|
|
try {
|
|
await modelService.deleteModel(modelId);
|
|
await loadModels();
|
|
} catch (err) {
|
|
console.error('删除模特失败:', err);
|
|
}
|
|
};
|
|
|
|
const handleFavorite = (modelId: string) => {
|
|
setFavorites(prev => {
|
|
const newFavorites = new Set(prev);
|
|
if (newFavorites.has(modelId)) {
|
|
newFavorites.delete(modelId);
|
|
} else {
|
|
newFavorites.add(modelId);
|
|
}
|
|
// 保存到本地存储
|
|
localStorage.setItem('model-favorites', JSON.stringify([...newFavorites]));
|
|
return newFavorites;
|
|
});
|
|
};
|
|
|
|
// 从本地存储加载收藏
|
|
useEffect(() => {
|
|
const savedFavorites = localStorage.getItem('model-favorites');
|
|
if (savedFavorites) {
|
|
try {
|
|
const favoriteIds = JSON.parse(savedFavorites);
|
|
setFavorites(new Set(favoriteIds));
|
|
} catch (error) {
|
|
console.error('加载收藏列表失败:', error);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
|
|
|
|
// 骨架屏组件
|
|
const ModelCardSkeleton = () => (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden animate-pulse">
|
|
<div className="aspect-[3/4] bg-gray-200 loading-shimmer" />
|
|
<div className="p-5 space-y-3">
|
|
<div className="h-6 bg-gray-200 rounded loading-shimmer" />
|
|
<div className="h-4 bg-gray-200 rounded w-3/4 loading-shimmer" />
|
|
<div className="h-4 bg-gray-200 rounded w-1/2 loading-shimmer" />
|
|
<div className="flex gap-2 pt-2">
|
|
<div className="flex-1 h-10 bg-gray-200 rounded-xl loading-shimmer" />
|
|
<div className="w-10 h-10 bg-gray-200 rounded-xl loading-shimmer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="space-y-6 animate-fade-in">
|
|
{/* 头部骨架 */}
|
|
<div className="flex justify-between items-center">
|
|
<div className="space-y-2">
|
|
<div className="h-8 w-32 bg-gray-200 rounded loading-shimmer" />
|
|
<div className="h-4 w-24 bg-gray-200 rounded loading-shimmer" />
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<div className="h-10 w-20 bg-gray-200 rounded-lg loading-shimmer" />
|
|
<div className="h-10 w-32 bg-gray-200 rounded-lg loading-shimmer" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 搜索栏骨架 */}
|
|
<div className="h-12 bg-gray-200 rounded-xl loading-shimmer" />
|
|
|
|
{/* 模特卡片骨架 */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{[...Array(8)].map((_, i) => (
|
|
<ModelCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="text-center py-16 animate-fade-in">
|
|
<div className="max-w-md mx-auto">
|
|
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<SparklesIcon className="h-8 w-8 text-red-500" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">加载失败</h3>
|
|
<p className="text-gray-600 mb-6">{error}</p>
|
|
<button
|
|
onClick={loadModels}
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-sm hover:shadow-md font-medium"
|
|
>
|
|
重新加载
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8 animate-fade-in">
|
|
{/* 头部工具栏 */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
|
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
|
|
<SparklesIcon className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-900 mb-0.5">模特管理</h1>
|
|
<p className="text-sm text-gray-500 flex items-center gap-2">
|
|
<span>共 {filteredModels.length} 个模特</span>
|
|
{favorites.size > 0 && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="flex items-center gap-1">
|
|
<HeartIcon className="h-3.5 w-3.5 text-red-500" />
|
|
{favorites.size} 个收藏
|
|
</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* 过滤器切换 */}
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-200 text-sm font-medium ${
|
|
showFilters
|
|
? 'bg-primary-100 text-primary-700 border border-primary-200'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
title={showFilters ? '隐藏筛选器' : '显示筛选器'}
|
|
>
|
|
<FunnelIcon className={`h-3.5 w-3.5 transition-transform duration-200 ${
|
|
showFilters ? 'rotate-0' : 'rotate-180'
|
|
}`} />
|
|
{showFilters ? '隐藏筛选' : '显示筛选'}
|
|
</button>
|
|
|
|
{/* 视图模式切换 */}
|
|
<div className="flex rounded-lg border border-gray-200 bg-gray-50 p-0.5">
|
|
<button
|
|
onClick={() => setViewMode(ModelViewMode.Grid)}
|
|
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-all duration-200 text-sm font-medium ${
|
|
viewMode === ModelViewMode.Grid
|
|
? 'bg-white text-primary-600 shadow-sm'
|
|
: 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<Squares2X2Icon className="h-3.5 w-3.5" />
|
|
网格
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode(ModelViewMode.List)}
|
|
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md transition-all duration-200 text-sm font-medium ${
|
|
viewMode === ModelViewMode.List
|
|
? 'bg-white text-primary-600 shadow-sm'
|
|
: 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<ListBulletIcon className="h-3.5 w-3.5" />
|
|
列表
|
|
</button>
|
|
</div>
|
|
|
|
{/* 创建模特按钮 */}
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md text-sm font-medium"
|
|
>
|
|
<PlusIcon className="h-4 w-4" />
|
|
添加模特
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 搜索和过滤 */}
|
|
<div className={`transition-all duration-300 ease-in-out overflow-hidden ${
|
|
showFilters
|
|
? 'max-h-96 opacity-100'
|
|
: 'max-h-0 opacity-0'
|
|
}`}>
|
|
<ModelSearch
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
statusFilter={statusFilter}
|
|
onStatusFilterChange={setStatusFilter}
|
|
genderFilter={genderFilter}
|
|
onGenderFilterChange={setGenderFilter}
|
|
sortBy={sortBy}
|
|
onSortByChange={setSortBy}
|
|
sortOrder={sortOrder}
|
|
onSortOrderChange={setSortOrder}
|
|
/>
|
|
</div>
|
|
|
|
{/* 模特列表 */}
|
|
{filteredModels.length === 0 ? (
|
|
<div className="text-center py-16 animate-fade-in">
|
|
<div className="max-w-md mx-auto">
|
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<MagnifyingGlassIcon className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
{models.length === 0 ? '还没有模特' : '没有找到匹配的模特'}
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
{models.length === 0
|
|
? '开始添加您的第一个模特，建立您的模特库'
|
|
: '尝试调整搜索条件或筛选器'
|
|
}
|
|
</p>
|
|
{models.length === 0 && (
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md text-sm font-medium"
|
|
>
|
|
添加第一个模特
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className={`animate-fade-in ${
|
|
viewMode === ModelViewMode.Grid
|
|
? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'
|
|
: 'space-y-3'
|
|
}`}>
|
|
{filteredModels.map((model, index) => (
|
|
<div
|
|
key={model.id}
|
|
className="animate-scale-in"
|
|
style={{ animationDelay: `${index * 50}ms` }}
|
|
>
|
|
<ModelCard
|
|
model={model}
|
|
viewMode={viewMode}
|
|
onEdit={() => setEditingModel(model)}
|
|
onDelete={() => handleDeleteModel(model.id)}
|
|
onSelect={() => onModelSelect?.(model)}
|
|
onFavorite={handleFavorite}
|
|
isFavorite={favorites.has(model.id)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 创建模特模态框 */}
|
|
{showCreateModal && (
|
|
<ModelForm
|
|
onSubmit={handleCreateModel}
|
|
onCancel={() => setShowCreateModal(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* 编辑模特模态框 */}
|
|
{editingModel && (
|
|
<ModelForm
|
|
initialData={editingModel}
|
|
onSubmit={handleUpdateModel}
|
|
onCancel={() => setEditingModel(null)}
|
|
isEdit={true}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModelList;
|