添加入口
This commit is contained in:
parent
346762499e
commit
870c3c9944
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Edit, Trash2, FolderOpen } from 'lucide-react'
|
import { Edit, Trash2, FolderOpen, Settings, ArrowRight } from 'lucide-react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { Project } from '../services/projectService'
|
import { Project } from '../services/projectService'
|
||||||
import ProjectImage from './ProjectImage'
|
import ProjectImage from './ProjectImage'
|
||||||
|
|
||||||
|
|
@ -16,15 +17,31 @@ const ProjectManageCard: React.FC<ProjectManageCardProps> = ({
|
||||||
onDelete,
|
onDelete,
|
||||||
onOpenDirectory
|
onOpenDirectory
|
||||||
}) => {
|
}) => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleEnterProject = () => {
|
||||||
|
navigate(`/projects/${project.id}`)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
|
||||||
{/* 商品图片 */}
|
{/* 商品图片 */}
|
||||||
<div className="h-32 bg-gray-100 overflow-hidden">
|
<div
|
||||||
|
className="h-32 bg-gray-100 overflow-hidden cursor-pointer relative group"
|
||||||
|
onClick={handleEnterProject}
|
||||||
|
>
|
||||||
<ProjectImage
|
<ProjectImage
|
||||||
imagePath={project.product_image}
|
imagePath={project.product_image}
|
||||||
alt={project.product_name || project.name}
|
alt={project.product_name || project.name}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
|
{/* 悬停时显示进入提示 */}
|
||||||
|
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all flex items-center justify-center">
|
||||||
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<div className="bg-white/90 rounded-full p-2">
|
||||||
|
<ArrowRight size={20} className="text-gray-800" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
|
|
@ -33,6 +50,13 @@ const ProjectManageCard: React.FC<ProjectManageCardProps> = ({
|
||||||
<h3 className="text-lg font-semibold text-gray-900">{project.name}</h3>
|
<h3 className="text-lg font-semibold text-gray-900">{project.name}</h3>
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
|
<button
|
||||||
|
onClick={handleEnterProject}
|
||||||
|
className="p-2 text-gray-400 hover:text-purple-600 transition-colors"
|
||||||
|
title="管理项目"
|
||||||
|
>
|
||||||
|
<Settings size={16} />
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => onOpenDirectory(project.id)}
|
onClick={() => onOpenDirectory(project.id)}
|
||||||
className="p-2 text-gray-400 hover:text-green-600 transition-colors"
|
className="p-2 text-gray-400 hover:text-green-600 transition-colors"
|
||||||
|
|
@ -67,6 +91,16 @@ const ProjectManageCard: React.FC<ProjectManageCardProps> = ({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 进入项目按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={handleEnterProject}
|
||||||
|
className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2"
|
||||||
|
>
|
||||||
|
<Settings size={16} />
|
||||||
|
<span>管理项目</span>
|
||||||
|
<ArrowRight size={16} />
|
||||||
|
</button>
|
||||||
|
|
||||||
{/* 创建时间 */}
|
{/* 创建时间 */}
|
||||||
<div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
|
<div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
|
||||||
创建于 {new Date(project.created_at).toLocaleDateString()}
|
创建于 {new Date(project.created_at).toLocaleDateString()}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue