代码修改
This commit is contained in:
fengxiangdebaozi committed
1 parent
8f5af46ec2
commit
8f75e12871
168 files changed
+76575
No files matched your search
@@ -0,0 +1,546 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
import {
|
||||
FileBox,
|
||||
Search,
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Download,
|
||||
Upload,
|
||||
Filter,
|
||||
Grid3X3,
|
||||
List,
|
||||
MoreVertical,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Image,
|
||||
Film,
|
||||
Music,
|
||||
Archive,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
Share2,
|
||||
} from 'lucide-react';
|
||||
import { PageType } from '../components/Sidebar';
|
||||
|
||||
interface ZZResource {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'document' | 'image' | 'video' | 'audio' | 'archive' | 'other';
|
||||
size: string;
|
||||
category: string;
|
||||
tags: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
author: string;
|
||||
status: 'active' | 'archived' | 'draft';
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface ZZResourceManagementProps {
|
||||
onNavigate: (page: PageType) => void;
|
||||
}
|
||||
|
||||
const mockResources: ZZResource[] = [
|
||||
{
|
||||
id: 'zz-001',
|
||||
name: '品牌视觉规范手册',
|
||||
type: 'document',
|
||||
size: '15.2 MB',
|
||||
category: '品牌资产',
|
||||
tags: ['品牌', 'VI', '规范'],
|
||||
createdAt: '2024-01-15',
|
||||
updatedAt: '2024-03-10',
|
||||
author: '张三',
|
||||
status: 'active',
|
||||
description: '公司品牌视觉识别系统标准手册，包含LOGO、色彩、字体等规范'
|
||||
},
|
||||
{
|
||||
id: 'zz-002',
|
||||
name: '产品宣传视频素材',
|
||||
type: 'video',
|
||||
size: '256 MB',
|
||||
category: '营销素材',
|
||||
tags: ['视频', '宣传', '产品'],
|
||||
createdAt: '2024-02-20',
|
||||
updatedAt: '2024-03-08',
|
||||
author: '李四',
|
||||
status: 'active',
|
||||
description: '2024年第一季度产品宣传视频原始素材'
|
||||
},
|
||||
{
|
||||
id: 'zz-003',
|
||||
name: '活动背景音乐库',
|
||||
type: 'audio',
|
||||
size: '1.2 GB',
|
||||
category: '音频素材',
|
||||
tags: ['音乐', '背景', '活动'],
|
||||
createdAt: '2024-01-08',
|
||||
updatedAt: '2024-02-28',
|
||||
author: '王五',
|
||||
status: 'active',
|
||||
description: '各类活动背景音乐合集，包含不同风格和时长'
|
||||
},
|
||||
{
|
||||
id: 'zz-004',
|
||||
name: '图标矢量素材包',
|
||||
type: 'image',
|
||||
size: '45 MB',
|
||||
category: '设计素材',
|
||||
tags: ['图标', '矢量', 'UI'],
|
||||
createdAt: '2024-03-01',
|
||||
updatedAt: '2024-03-15',
|
||||
author: '赵六',
|
||||
status: 'active',
|
||||
description: '500+高质量矢量图标素材，适用于各类项目'
|
||||
},
|
||||
{
|
||||
id: 'zz-005',
|
||||
name: '历史项目归档',
|
||||
type: 'archive',
|
||||
size: '2.5 GB',
|
||||
category: '归档文件',
|
||||
tags: ['归档', '历史', '项目'],
|
||||
createdAt: '2023-12-01',
|
||||
updatedAt: '2024-01-20',
|
||||
author: '系统',
|
||||
status: 'archived',
|
||||
description: '2023年度已完成项目文件归档'
|
||||
},
|
||||
{
|
||||
id: 'zz-006',
|
||||
name: 'PPT模板套装',
|
||||
type: 'document',
|
||||
size: '88 MB',
|
||||
category: '模板素材',
|
||||
tags: ['PPT', '模板', '演示'],
|
||||
createdAt: '2024-02-10',
|
||||
updatedAt: '2024-03-12',
|
||||
author: '钱七',
|
||||
status: 'draft',
|
||||
description: '商务演示PPT模板，包含多种风格和场景'
|
||||
},
|
||||
];
|
||||
|
||||
const typeIcons: Record<ZZResource['type'], React.ReactNode> = {
|
||||
document: <FileText className="w-5 h-5" />,
|
||||
image: <Image className="w-5 h-5" />,
|
||||
video: <Film className="w-5 h-5" />,
|
||||
audio: <Music className="w-5 h-5" />,
|
||||
archive: <Archive className="w-5 h-5" />,
|
||||
other: <FileBox className="w-5 h-5" />,
|
||||
};
|
||||
|
||||
const typeColors: Record<ZZResource['type'], string> = {
|
||||
document: 'bg-blue-500/20 text-blue-400',
|
||||
image: 'bg-green-500/20 text-green-400',
|
||||
video: 'bg-purple-500/20 text-purple-400',
|
||||
audio: 'bg-orange-500/20 text-orange-400',
|
||||
archive: 'bg-gray-500/20 text-gray-400',
|
||||
other: 'bg-slate-500/20 text-slate-400',
|
||||
};
|
||||
|
||||
const statusColors: Record<ZZResource['status'], { bg: string; text: string; label: string }> = {
|
||||
active: { bg: 'bg-green-500/20', text: 'text-green-400', label: '使用中' },
|
||||
archived: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: '已归档' },
|
||||
draft: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: '草稿' },
|
||||
};
|
||||
|
||||
const categories = ['全部', '品牌资产', '营销素材', '音频素材', '设计素材', '模板素材', '归档文件'];
|
||||
|
||||
const ZZResourceManagement: React.FC<ZZResourceManagementProps> = ({ onNavigate }) => {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [selectedStatus, setSelectedStatus] = useState<string>('all');
|
||||
const [selectedResource, setSelectedResource] = useState<ZZResource | null>(null);
|
||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||
|
||||
const filteredResources = mockResources.filter(resource => {
|
||||
const matchesSearch = resource.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
resource.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
resource.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
const matchesCategory = selectedCategory === '全部' || resource.category === selectedCategory;
|
||||
const matchesStatus = selectedStatus === 'all' || resource.status === selectedStatus;
|
||||
return matchesSearch && matchesCategory && matchesStatus;
|
||||
});
|
||||
|
||||
const stats = {
|
||||
total: mockResources.length,
|
||||
active: mockResources.filter(r => r.status === 'active').length,
|
||||
archived: mockResources.filter(r => r.status === 'archived').length,
|
||||
draft: mockResources.filter(r => r.status === 'draft').length,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'}`}>
|
||||
<FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||||
ZZ资源管理
|
||||
</h1>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
管理各类制作资源和素材文件
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
|
||||
isDark
|
||||
? 'bg-blue-600 hover:bg-blue-500 text-white'
|
||||
: 'bg-red-500 hover:bg-red-600 text-white'
|
||||
}`}
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
上传资源
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源总数</p>
|
||||
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.total}</p>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-50'}`}>
|
||||
<FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>使用中</p>
|
||||
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.active}</p>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg bg-green-500/20`}>
|
||||
<FileText className="w-6 h-6 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已归档</p>
|
||||
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.archived}</p>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg bg-gray-500/20`}>
|
||||
<Archive className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-yellow-800/30' : 'border-yellow-100'}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>草稿</p>
|
||||
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.draft}</p>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg bg-yellow-500/20`}>
|
||||
<Edit className="w-6 h-6 text-yellow-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 筛选和搜索 */}
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
{/* 搜索框 */}
|
||||
<div className="flex-1 min-w-[200px] relative">
|
||||
<Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索资源名称、描述或标签..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-all ${
|
||||
isDark
|
||||
? 'bg-slate-900/50 border-slate-700 text-white placeholder-slate-500 focus:border-blue-500'
|
||||
: 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-red-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分类筛选 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className={`px-3 py-2 rounded-lg border transition-all ${
|
||||
isDark
|
||||
? 'bg-slate-900/50 border-slate-700 text-white'
|
||||
: 'bg-gray-50 border-gray-200 text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{categories.map(cat => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 状态筛选 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={selectedStatus}
|
||||
onChange={(e) => setSelectedStatus(e.target.value)}
|
||||
className={`px-3 py-2 rounded-lg border transition-all ${
|
||||
isDark
|
||||
? 'bg-slate-900/50 border-slate-700 text-white'
|
||||
: 'bg-gray-50 border-gray-200 text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="active">使用中</option>
|
||||
<option value="archived">已归档</option>
|
||||
<option value="draft">草稿</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 视图切换 */}
|
||||
<div className={`flex items-center rounded-lg p-1 ${isDark ? 'bg-slate-900/50' : 'bg-gray-100'}`}>
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded-md transition-all ${
|
||||
viewMode === 'grid'
|
||||
? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
|
||||
: isDark ? 'text-slate-400' : 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<Grid3X3 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded-md transition-all ${
|
||||
viewMode === 'list'
|
||||
? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
|
||||
: isDark ? 'text-slate-400' : 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<List className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 资源列表 */}
|
||||
{viewMode === 'grid' ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{filteredResources.map(resource => (
|
||||
<div
|
||||
key={resource.id}
|
||||
className={`p-4 rounded-xl cursor-pointer transition-all hover:scale-[1.02] ${
|
||||
isDark ? 'bg-slate-800/50 hover:bg-slate-800' : 'bg-white hover:bg-gray-50'
|
||||
} border ${isDark ? 'border-blue-800/30' : 'border-red-100'} hover:border-blue-500/50`}
|
||||
onClick={() => setSelectedResource(resource)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className={`p-3 rounded-lg ${typeColors[resource.type]}`}>
|
||||
{typeIcons[resource.type]}
|
||||
</div>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
|
||||
{statusColors[resource.status].label}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className={`font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||||
{resource.name}
|
||||
</h3>
|
||||
<p className={`text-sm mb-3 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
{resource.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{resource.tags.slice(0, 2).map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className={`px-2 py-0.5 rounded text-xs ${
|
||||
isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
|
||||
{resource.size}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-blue-800/30' : 'bg-white border-red-100'}`}>
|
||||
<table className="w-full">
|
||||
<thead className={isDark ? 'bg-slate-900/50' : 'bg-gray-50'}>
|
||||
<tr>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源名称</th>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>类型</th>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分类</th>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>大小</th>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>状态</th>
|
||||
<th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>更新日期</th>
|
||||
<th className={`px-4 py-3 text-right text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-slate-700">
|
||||
{filteredResources.map(resource => (
|
||||
<tr
|
||||
key={resource.id}
|
||||
className={`cursor-pointer transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'}`}
|
||||
onClick={() => setSelectedResource(resource)}
|
||||
>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${typeColors[resource.type]}`}>
|
||||
{typeIcons[resource.type]}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{resource.name}</p>
|
||||
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.author}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
|
||||
{resource.type === 'document' ? '文档' :
|
||||
resource.type === 'image' ? '图片' :
|
||||
resource.type === 'video' ? '视频' :
|
||||
resource.type === 'audio' ? '音频' :
|
||||
resource.type === 'archive' ? '归档' : '其他'}
|
||||
</td>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.category}</td>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.size}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
|
||||
{statusColors[resource.status].label}
|
||||
</span>
|
||||
</td>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.updatedAt}</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-end gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-50 text-red-500'}`}>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 资源详情弹窗 */}
|
||||
{selectedResource && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedResource(null)}>
|
||||
<div
|
||||
className={`w-full max-w-2xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-6 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-3 rounded-lg ${typeColors[selectedResource.type]}`}>
|
||||
{typeIcons[selectedResource.type]}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||||
{selectedResource.name}
|
||||
</h2>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
{selectedResource.category} · {selectedResource.size}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedResource(null)}
|
||||
className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>描述</p>
|
||||
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.description}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建者</p>
|
||||
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.author}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建时间</p>
|
||||
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.createdAt}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新时间</p>
|
||||
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.updatedAt}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>状态</p>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[selectedResource.status].bg} ${statusColors[selectedResource.status].text}`}>
|
||||
{statusColors[selectedResource.status].label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedResource.tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className={`px-3 py-1 rounded-full text-sm ${
|
||||
isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-6 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} flex justify-end gap-3`}>
|
||||
<button
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<Download className="w-4 h-4 inline mr-2" />
|
||||
下载
|
||||
</button>
|
||||
<button
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
|
||||
}`}
|
||||
>
|
||||
<Edit className="w-4 h-4 inline mr-2" />
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZZResourceManagement;
|
||||
Reference in new issue
Block a user