diff --git a/apps/desktop/src/components/ProjectList.tsx b/apps/desktop/src/components/ProjectList.tsx index 04f89e6..124c242 100644 --- a/apps/desktop/src/components/ProjectList.tsx +++ b/apps/desktop/src/components/ProjectList.tsx @@ -7,6 +7,7 @@ import { ProjectCard } from './ProjectCard'; import { EmptyState } from './EmptyState'; import { LoadingSpinner } from './LoadingSpinner'; import { ErrorMessage } from './ErrorMessage'; +import { DeleteConfirmDialog } from './DeleteConfirmDialog'; import { Plus, Trash2 } from 'lucide-react'; /** @@ -31,6 +32,9 @@ export const ProjectList: React.FC = () => { } = useUIStore(); const [isCleaningUp, setIsCleaningUp] = useState(false); + const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); + const [projectToDelete, setProjectToDelete] = useState(null); + const [deleting, setDeleting] = useState(false); // 清理无效项目记录 const handleCleanupInvalidProjects = async () => { @@ -66,16 +70,33 @@ export const ProjectList: React.FC = () => { }; // 处理项目删除 - const handleProjectDelete = async (id: string) => { - if (window.confirm('确定要删除这个项目吗？此操作不可撤销。')) { - try { - await deleteProject(id); - } catch (error) { - console.error('删除项目失败:', error); - } + const handleProjectDelete = (id: string) => { + setProjectToDelete(id); + setShowDeleteConfirm(true); + }; + + // 确认删除项目 + const confirmDeleteProject = async () => { + if (!projectToDelete) return; + + try { + setDeleting(true); + await deleteProject(projectToDelete); + setShowDeleteConfirm(false); + setProjectToDelete(null); + } catch (error) { + console.error('删除项目失败:', error); + } finally { + setDeleting(false); } }; + // 取消删除 + const cancelDeleteProject = () => { + setShowDeleteConfirm(false); + setProjectToDelete(null); + }; + // 错误状态 if (error) { return ( @@ -101,7 +122,7 @@ export const ProjectList: React.FC = () => { {isCleaningUp ? '清理中...' : '清理'} {errors.file_path && ( @@ -220,20 +201,6 @@ export const ImportTemplateModal: React.FC = ({ )} - {/* 关联项目 */} -
- - setFormData(prev => ({ ...prev, project_id: value }))} - options={projectOptions} - placeholder="选择项目（可选）" - className="w-full" - /> -
- {/* 自动上传选项 */}
+ + ); }; diff --git a/apps/desktop/src/pages/TemplateManagement.tsx b/apps/desktop/src/pages/TemplateManagement.tsx index cf6a1b4..0c8fa6c 100644 --- a/apps/desktop/src/pages/TemplateManagement.tsx +++ b/apps/desktop/src/pages/TemplateManagement.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Plus, Upload, Search, Filter, FileText, Clock, CheckCircle, XCircle, AlertCircle, Activity } from 'lucide-react'; +import { Plus, Upload, Search, Filter, FileText, Clock, CheckCircle, XCircle, AlertCircle } from 'lucide-react'; import { Template, ImportStatus } from '../types/template'; import { TemplateCard } from '../components/template/TemplateCard'; import { ImportTemplateModal } from '../components/template/ImportTemplateModal'; @@ -7,8 +7,8 @@ import { BatchImportModal } from '../components/template/BatchImportModal'; import { TemplateDetailModal } from '../components/template/TemplateDetailModal'; import { ImportProgressModal } from '../components/template/ImportProgressModal'; import { BatchImportProgressModal } from '../components/template/BatchImportProgressModal'; -import { PerformanceMonitor } from '../components/template/PerformanceMonitor'; import { CustomSelect } from '../components/CustomSelect'; +import { DeleteConfirmDialog } from '../components/DeleteConfirmDialog'; import { useTemplateStore } from '../stores/templateStore'; const TemplateManagement: React.FC = () => { @@ -22,9 +22,11 @@ const TemplateManagement: React.FC = () => { const [showImportProgress, setShowImportProgress] = useState(false); const [showBatchProgress, setShowBatchProgress] = useState(false); const [currentImportId, setCurrentImportId] = useState(null); - const [showPerformanceMonitor, setShowPerformanceMonitor] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(1); + const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); + const [templateToDelete, setTemplateToDelete] = useState(null); + const [deleting, setDeleting] = useState(false); const pageSize = 12; const { @@ -97,9 +99,9 @@ const TemplateManagement: React.FC = () => { // 处理导入完成 const handleImportComplete = () => { - setShowImportProgress(false); - setCurrentImportId(null); + // 立即刷新模板列表，显示新导入的模板 loadTemplates(); + // 注意：不在这里关闭弹窗，弹窗会自动关闭 }; // 处理批量导入完成 @@ -109,17 +111,34 @@ const TemplateManagement: React.FC = () => { }; // 处理删除模板 - const handleDeleteTemplate = async (templateId: string) => { - if (window.confirm('确定要删除这个模板吗？')) { - try { - await deleteTemplate(templateId); - loadTemplates(); - } catch (error) { - console.error('删除模板失败:', error); - } + const handleDeleteTemplate = (templateId: string) => { + setTemplateToDelete(templateId); + setShowDeleteConfirm(true); + }; + + // 确认删除模板 + const confirmDeleteTemplate = async () => { + if (!templateToDelete) return; + + try { + setDeleting(true); + await deleteTemplate(templateToDelete); + loadTemplates(); + setShowDeleteConfirm(false); + setTemplateToDelete(null); + } catch (error) { + console.error('删除模板失败:', error); + } finally { + setDeleting(false); } }; + // 取消删除 + const cancelDeleteTemplate = () => { + setShowDeleteConfirm(false); + setTemplateToDelete(null); + }; + // 获取状态图标 const getStatusIcon = (status: ImportStatus) => { switch (status) { @@ -178,7 +197,7 @@ const TemplateManagement: React.FC = () => {
- -
@@ -211,7 +222,7 @@ const TemplateManagement: React.FC = () => { placeholder="搜索模板名称..." value={searchKeyword} onChange={(e) => handleSearch(e.target.value)} - className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + className="w-full pl-10 pr-3 py-2 border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 text-sm text-gray-900 hover:border-gray-300" /> @@ -241,7 +252,7 @@ const TemplateManagement: React.FC = () => {

开始导入您的第一个剪映模板