mixvideo-v2/apps/desktop/src/App.tsx

89 lines
2.5 KiB
TypeScript

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ProjectList } from './components/ProjectList';
import { ProjectForm } from './components/ProjectForm';
import { ProjectDetails } from './pages/ProjectDetails';
import Models from './pages/Models';
import Navigation from './components/Navigation';
import { useProjectStore } from './store/projectStore';
import { useUIStore } from './store/uiStore';
import { CreateProjectRequest, UpdateProjectRequest } from './types/project';
import "./App.css";
/**
* 主应用组件
* 遵循 Tauri 开发规范的应用架构设计
*/
function App() {
const { createProject, updateProject } = useProjectStore();
const {
showCreateProjectModal,
showEditProjectModal,
editingProject,
closeCreateProjectModal,
closeEditProjectModal
} = useUIStore();
// 处理创建项目
const handleCreateProject = async (data: CreateProjectRequest) => {
try {
await createProject(data);
closeCreateProjectModal();
} catch (error) {
console.error('创建项目失败:', error);
throw error;
}
};
// 处理更新项目
const handleUpdateProject = async (data: UpdateProjectRequest) => {
if (!editingProject) return;
try {
await updateProject(editingProject.id, data);
closeEditProjectModal();
} catch (error) {
console.error('更新项目失败:', error);
throw error;
}
};
return (
<Router>
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
{/* 导航栏 */}
<Navigation />
{/* 主要内容区域 */}
<main className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 max-w-7xl">
<Routes>
<Route path="/" element={<ProjectList />} />
<Route path="/project/:id" element={<ProjectDetails />} />
<Route path="/models" element={<Models />} />
</Routes>
</main>
{/* 创建项目模态框 */}
{showCreateProjectModal && (
<ProjectForm
onSubmit={handleCreateProject}
onCancel={closeCreateProjectModal}
/>
)}
{/* 编辑项目模态框 */}
{showEditProjectModal && editingProject && (
<ProjectForm
initialData={editingProject}
onSubmit={handleUpdateProject}
onCancel={closeEditProjectModal}
isEdit={true}
/>
)}
</div>
</Router>
);
}
export default App;