Files
mixvideo-v2/apps/desktop/src/App.tsx
imeepos 730402aba0 feat: 实现项目-模板绑定和素材-模特绑定管理功能
新功能:
- 项目-模板绑定管理系统
  - 支持主要/次要模板绑定类型
  - 绑定优先级和状态管理
  - 批量绑定操作
  - 绑定关系的CRUD操作

- 素材-模特绑定管理系统
  - 素材与模特的关联管理
  - 批量绑定/解绑操作
  - 绑定统计和分析
  - 素材编辑对话框

 架构改进:
- 新增项目-模板绑定数据模型和仓库层
- 新增素材-模特绑定业务服务层
- 完善的API命令层实现
- 响应式前端界面设计

 用户体验优化:
- 统一的通知系统
- 增强的加载状态组件
- 流畅的交互动画
- 优雅的确认对话框

 测试覆盖:
- 单元测试和集成测试
- 业务逻辑验证
- API接口测试

 技术栈:
- 后端: Rust + Tauri + SQLite
- 前端: React + TypeScript + TailwindCSS
- 状态管理: Zustand
- 测试: Vitest + Rust测试框架

 配置更新:
- 更新数据库迁移脚本
- 完善测试配置
- 优化构建流程
2025-07-15 12:50:30 +08:00

112 lines
3.7 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 AiClassificationSettings from './pages/AiClassificationSettings';
import TemplateManagement from './pages/TemplateManagement';
import { MaterialModelBinding } from './pages/MaterialModelBinding';
import Navigation from './components/Navigation';
import { NotificationSystem, useNotifications } from './components/NotificationSystem';
import { useProjectStore } from './store/projectStore';
import { useUIStore } from './store/uiStore';
import { CreateProjectRequest, UpdateProjectRequest } from './types/project';
import "./App.css";
import './styles/design-system.css';
import './styles/animations.css';
/**
* 主应用组件
* 遵循 Tauri 开发规范的应用架构设计
*/
function App() {
const { createProject, updateProject } = useProjectStore();
const {
showCreateProjectModal,
showEditProjectModal,
editingProject,
closeCreateProjectModal,
closeEditProjectModal
} = useUIStore();
// 通知系统
const { notifications, removeNotification, success, error } = useNotifications();
// 处理创建项目
const handleCreateProject = async (data: CreateProjectRequest) => {
try {
await createProject(data);
success('项目创建成功', `项目"${data.name}"已创建`);
closeCreateProjectModal();
} catch (err) {
const errorMessage = err instanceof Error ? err.message : '未知错误';
error('项目创建失败', errorMessage);
throw err;
}
};
// 处理更新项目
const handleUpdateProject = async (data: UpdateProjectRequest) => {
if (!editingProject) return;
try {
await updateProject(editingProject.id, data);
success('项目更新成功', `项目"${data.name}"已更新`);
closeEditProjectModal();
} catch (err) {
const errorMessage = err instanceof Error ? err.message : '未知错误';
error('项目更新失败', errorMessage);
throw err;
}
};
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 />} />
<Route path="/ai-classification-settings" element={<AiClassificationSettings />} />
<Route path="/templates" element={<TemplateManagement />} />
<Route path="/material-model-binding" element={<MaterialModelBinding />} />
</Routes>
</main>
{/* 创建项目模态框 */}
{showCreateProjectModal && (
<ProjectForm
onSubmit={handleCreateProject}
onCancel={closeCreateProjectModal}
/>
)}
{/* 编辑项目模态框 */}
{showEditProjectModal && editingProject && (
<ProjectForm
initialData={editingProject}
onSubmit={handleUpdateProject}
onCancel={closeEditProjectModal}
isEdit={true}
/>
)}
{/* 通知系统 */}
<NotificationSystem
notifications={notifications}
onRemove={removeNotification}
position="top-right"
maxNotifications={5}
/>
</div>
</Router>
);
}
export default App;