fix
This commit is contained in:
root
@@ -1,426 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { ProjectService, Project } from '../services/projectService'
|
||||
import ProjectSearchBar from '../components/ProjectSearchBar'
|
||||
import ProjectList from '../components/ProjectList'
|
||||
import ProjectForm from '../components/ProjectForm'
|
||||
|
||||
interface FormData {
|
||||
name: string
|
||||
local_directory: string
|
||||
product_name: string
|
||||
product_image: string
|
||||
}
|
||||
|
||||
const ProjectManagePage: React.FC = () => {
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [editingProject, setEditingProject] = useState<Project | null>(null)
|
||||
const [showCreateForm, setShowCreateForm] = useState(false)
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: '',
|
||||
local_directory: '',
|
||||
product_name: '',
|
||||
product_image: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
loadProjects()
|
||||
}, [])
|
||||
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await ProjectService.getAllProjects()
|
||||
console.log(`loadProjects`, response)
|
||||
if (response.status && response.data) {
|
||||
setProjects(response.data)
|
||||
} else {
|
||||
console.error('Failed to load projects:', response.msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load projects:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateProject = async () => {
|
||||
try {
|
||||
const response = await ProjectService.createProject(formData)
|
||||
console.log(`handleCreateProject`, response)
|
||||
if (response.status && response.data) {
|
||||
setProjects([...projects, response.data])
|
||||
setShowCreateForm(false)
|
||||
setFormData({ name: '', local_directory: '', product_name: '', product_image: '' })
|
||||
} else {
|
||||
console.error('创建失败:', response.msg || '未知错误')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create project:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateProject = async () => {
|
||||
if (!editingProject) return
|
||||
|
||||
try {
|
||||
const response = await ProjectService.updateProject(editingProject.id, formData)
|
||||
if (response.status && response.data) {
|
||||
const updatedProjects = projects.map(proj =>
|
||||
proj.id === editingProject.id ? response.data! : proj
|
||||
)
|
||||
setProjects(updatedProjects)
|
||||
setEditingProject(null)
|
||||
setFormData({ name: '', local_directory: '', product_name: '', product_image: '' })
|
||||
} else {
|
||||
console.error('更新失败:', response.msg || '未知错误')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update project:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteProject = async (projectId: string) => {
|
||||
if (!confirm('确定要删除这个项目吗？')) return
|
||||
|
||||
try {
|
||||
const response = await ProjectService.deleteProject(projectId)
|
||||
if (response.status) {
|
||||
setProjects(projects.filter(proj => proj.id !== projectId))
|
||||
} else {
|
||||
console.error('删除失败:', response.msg || '未知错误')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete project:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenDirectory = async (projectId: string) => {
|
||||
try {
|
||||
const response = await ProjectService.openProjectDirectory(projectId)
|
||||
if (!response.status) {
|
||||
console.error('打开目录失败:', response.msg || '未知错误')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to open directory:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const selectDirectory = async () => {
|
||||
try {
|
||||
const directory = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
title: '选择项目目录'
|
||||
})
|
||||
|
||||
if (directory && typeof directory === 'string') {
|
||||
setFormData({ ...formData, local_directory: directory })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to select directory:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const selectImage = async () => {
|
||||
try {
|
||||
const imagePath = await open({
|
||||
multiple: false,
|
||||
title: '选择商品图片',
|
||||
filters: [
|
||||
{
|
||||
name: '图片文件',
|
||||
extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
if (imagePath && typeof imagePath === 'string') {
|
||||
setFormData({ ...formData, product_image: imagePath })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to select image:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const startEdit = (project: Project) => {
|
||||
setEditingProject(project)
|
||||
setFormData({
|
||||
name: project.name,
|
||||
local_directory: project.local_directory,
|
||||
product_name: project.product_name,
|
||||
product_image: project.product_image
|
||||
})
|
||||
setShowCreateForm(false)
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingProject(null)
|
||||
setShowCreateForm(false)
|
||||
setFormData({ name: '', local_directory: '', product_name: '', product_image: '' })
|
||||
}
|
||||
|
||||
const filteredProjects = projects.filter(project =>
|
||||
project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
project.product_name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">加载中...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">项目管理</h1>
|
||||
<p className="text-gray-600 mt-2">管理项目信息，包括项目目录、商品信息等</p>
|
||||
</div>
|
||||
|
||||
{/* 搜索和创建按钮 */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索项目..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowCreateForm(true)
|
||||
setEditingProject(null)
|
||||
setFormData({ name: '', local_directory: '', product_name: '', product_image: '' })
|
||||
}}
|
||||
className="ml-4 flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus size={20} className="mr-2" />
|
||||
新建项目
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 项目列表 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredProjects.map((project) => (
|
||||
<div key={project.id} className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
{/* 商品图片 */}
|
||||
<div className="h-32 bg-gray-100 overflow-hidden">
|
||||
<ImageComponent
|
||||
imagePath={project.product_image}
|
||||
alt={project.product_name || project.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{/* 项目标题 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{project.name}</h3>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => handleOpenDirectory(project.id)}
|
||||
className="p-2 text-gray-400 hover:text-green-600 transition-colors"
|
||||
title="打开目录"
|
||||
>
|
||||
<FolderOpen size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => startEdit(project)}
|
||||
className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteProject(project.id)}
|
||||
className="p-2 text-gray-400 hover:text-red-600 transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 项目信息 */}
|
||||
<div className="space-y-3">
|
||||
{/* 商品信息 */}
|
||||
{project.product_name && (
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">商品名:</p>
|
||||
<p className="text-sm text-gray-900">{project.product_name}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 创建时间 */}
|
||||
<div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
|
||||
创建于 {new Date(project.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 空状态 */}
|
||||
{filteredProjects.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
{searchTerm ? '没有找到匹配的项目' : '暂无项目'}
|
||||
</div>
|
||||
{!searchTerm && (
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
创建第一个项目
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 创建/编辑表单弹窗 */}
|
||||
{(showCreateForm || editingProject) && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||
{/* 表单标题 */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
{editingProject ? '编辑项目' : '新建项目'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={cancelEdit}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 表单内容 */}
|
||||
<div className="p-6 space-y-4">
|
||||
{/* 项目名 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
项目名 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入项目名称"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 本地目录 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
本地目录 *
|
||||
</label>
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.local_directory}
|
||||
onChange={(e) => setFormData({ ...formData, local_directory: e.target.value })}
|
||||
placeholder="请选择项目目录路径"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={selectDirectory}
|
||||
className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors flex items-center space-x-1"
|
||||
title="选择目录"
|
||||
>
|
||||
<FolderOpen size={16} />
|
||||
<span className="text-sm">选择</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 商品名 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
商品名
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.product_name}
|
||||
onChange={(e) => setFormData({ ...formData, product_name: e.target.value })}
|
||||
placeholder="请输入商品名称"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 商品图片 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
商品图片
|
||||
</label>
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.product_image}
|
||||
onChange={(e) => setFormData({ ...formData, product_image: e.target.value })}
|
||||
placeholder="请选择商品图片文件"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
onClick={selectImage}
|
||||
className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors flex items-center space-x-1"
|
||||
title="选择图片"
|
||||
>
|
||||
<Package size={16} />
|
||||
<span className="text-sm">选择</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* 图片预览 */}
|
||||
{formData.product_image && (
|
||||
<div className="mt-2">
|
||||
<p className="text-xs text-gray-500 mb-1">预览:</p>
|
||||
<div className="w-20 h-20 border border-gray-200 rounded-lg overflow-hidden">
|
||||
<ImageComponent
|
||||
imagePath={formData.product_image}
|
||||
alt="商品图片预览"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 表单按钮 */}
|
||||
<div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200">
|
||||
<button
|
||||
onClick={cancelEdit}
|
||||
className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={editingProject ? handleUpdateProject : handleCreateProject}
|
||||
disabled={!formData.name.trim() || !formData.local_directory.trim()}
|
||||
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<Save size={16} className="mr-2" />
|
||||
{editingProject ? '保存' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectManagePage
|
||||
Reference in New Issue
Block a user