feat: Complete UI/UX optimization v0.1.21 - Final enhancements
- Enhanced TemplateManagement page with beautiful header and improved layout - Optimized TemplateCard with gradient backgrounds and refined visual effects - Improved empty state design with elegant icons and better messaging - Enhanced pagination component with modern styling - Added comprehensive responsive design optimizations for mobile and tablet - Implemented touch-friendly interactions for mobile devices - Added support for different screen orientations and pointer types - Enhanced animations with device-specific optimizations - Improved accessibility with proper touch target sizes - Added dark mode support and high-resolution display optimizations - Completed comprehensive design system with reusable components - All pages now follow consistent visual design language
This commit is contained in:
imeepos
@@ -72,49 +72,58 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
|
||||
const materialStats = getMaterialStats();
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200">
|
||||
{/* 卡片头部 */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="group bg-gradient-to-br from-white to-gray-50/30 rounded-xl shadow-sm border border-gray-200/50 hover:shadow-lg hover:border-indigo-200 hover:-translate-y-1 transition-all duration-300 overflow-hidden relative">
|
||||
{/* 装饰性背景 */}
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-indigo-100/20 to-purple-100/20 rounded-full -translate-y-10 translate-x-10 opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
|
||||
|
||||
{/* 美观的卡片头部 */}
|
||||
<div className="p-5 border-b border-gray-100/50 relative z-10">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900 truncate" title={template.name}>
|
||||
{template.name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
|
||||
<FileText className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 truncate" title={template.name}>
|
||||
{template.name}
|
||||
</h3>
|
||||
</div>
|
||||
{template.description && (
|
||||
<p className="text-sm text-gray-600 mt-1 line-clamp-2" title={template.description}>
|
||||
<p className="text-sm text-gray-600 mt-1 line-clamp-2 leading-relaxed" title={template.description}>
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative ml-2">
|
||||
<div className="relative ml-3 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
className="p-1 rounded-full hover:bg-gray-100 transition-colors"
|
||||
className="p-2 rounded-lg hover:bg-white hover:shadow-sm transition-all duration-200 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<MoreVertical className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
|
||||
|
||||
{showMenu && (
|
||||
<div className="absolute right-0 top-8 w-32 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
|
||||
<div className="absolute right-0 top-10 w-36 bg-white border border-gray-200/50 rounded-xl shadow-lg z-20 overflow-hidden">
|
||||
<button
|
||||
onClick={() => {
|
||||
onView();
|
||||
setShowMenu(false);
|
||||
}}
|
||||
className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center"
|
||||
className="w-full px-4 py-3 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<Eye className="w-3 h-3 mr-2" />
|
||||
<Eye className="w-4 h-4" />
|
||||
查看详情
|
||||
</button>
|
||||
<div className="border-t border-gray-100"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
onDelete();
|
||||
setShowMenu(false);
|
||||
}}
|
||||
className="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center"
|
||||
className="w-full px-4 py-3 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 mr-2" />
|
||||
<Trash2 className="w-4 h-4" />
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
@@ -124,51 +133,53 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
|
||||
|
||||
{/* 状态指示器 */}
|
||||
<div className="flex items-center mt-3">
|
||||
{getStatusIcon(template.import_status)}
|
||||
<span className="ml-2 text-sm text-gray-600">
|
||||
{getStatusText(template.import_status)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-lg">
|
||||
{getStatusIcon(template.import_status)}
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{getStatusText(template.import_status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 卡片内容 */}
|
||||
<div className="p-4">
|
||||
{/* 美观的卡片内容 */}
|
||||
<div className="p-5 relative z-10">
|
||||
{/* 基本信息 */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-semibold text-gray-900">
|
||||
<div className="text-center p-3 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg">
|
||||
<div className="text-lg font-bold text-gray-900">
|
||||
{template.canvas_config.width}×{template.canvas_config.height}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">分辨率</div>
|
||||
<div className="text-xs text-gray-500 font-medium">分辨率</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-semibold text-gray-900">
|
||||
<div className="text-center p-3 bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg">
|
||||
<div className="text-lg font-bold text-primary-700">
|
||||
{formatDuration(template.duration)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">时长</div>
|
||||
<div className="text-xs text-primary-600 font-medium">时长</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 素材统计 */}
|
||||
{/* 美观的素材统计 */}
|
||||
<div className="mb-4">
|
||||
<div className="text-xs text-gray-500 mb-2">素材统计</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="text-sm font-medium text-gray-700 mb-3">素材统计</div>
|
||||
<div className="flex items-center justify-center gap-3 text-xs">
|
||||
{materialStats.video > 0 && (
|
||||
<div className="flex items-center text-blue-600">
|
||||
<Video className="w-3 h-3 mr-1" />
|
||||
{materialStats.video}
|
||||
<div className="flex items-center gap-1 px-2.5 py-1.5 bg-blue-50 text-blue-700 rounded-lg border border-blue-200">
|
||||
<Video className="w-3 h-3" />
|
||||
<span className="font-medium">{materialStats.video}</span>
|
||||
</div>
|
||||
)}
|
||||
{materialStats.audio > 0 && (
|
||||
<div className="flex items-center text-green-600">
|
||||
<Music className="w-3 h-3 mr-1" />
|
||||
{materialStats.audio}
|
||||
<div className="flex items-center gap-1 px-2.5 py-1.5 bg-green-50 text-green-700 rounded-lg border border-green-200">
|
||||
<Music className="w-3 h-3" />
|
||||
<span className="font-medium">{materialStats.audio}</span>
|
||||
</div>
|
||||
)}
|
||||
{materialStats.image > 0 && (
|
||||
<div className="flex items-center text-purple-600">
|
||||
<Image className="w-3 h-3 mr-1" />
|
||||
{materialStats.image}
|
||||
<div className="flex items-center gap-1 px-2.5 py-1.5 bg-purple-50 text-purple-700 rounded-lg border border-purple-200">
|
||||
<Image className="w-3 h-3" />
|
||||
<span className="font-medium">{materialStats.image}</span>
|
||||
</div>
|
||||
)}
|
||||
{materialStats.text > 0 && (
|
||||
|
||||
Reference in New Issue
Block a user