fix

src-tauri/src/commands/project.rs

@@ -51,6 +51,63 @@ pub async fn get_project_info(project_path: String) -> Result<ProjectInfo, Strin
     Ok(project_info)
 }
 
+/// 根据ID获取项目详情
+#[command]
+pub async fn get_project_by_id(project_id: String) -> Result<String, String> {
+    let args = serde_json::json!({
+        "project_id": project_id
+    });
+
+    execute_python_command("project_manager", "get_project_by_id", Some(args)).await
+}
+
+/// 扫描目录文件
+#[command]
+pub async fn scan_directory(directory_path: String) -> Result<String, String> {
+    let args = serde_json::json!({
+        "directory_path": directory_path
+    });
+
+    execute_python_command("file_manager", "scan_directory", Some(args)).await
+}
+
+/// 在系统中打开文件
+#[command]
+pub async fn open_file_in_system(file_path: String) -> Result<(), String> {
+    #[cfg(target_os = "windows")]
+    {
+        std::process::Command::new("cmd")
+            .args(["/C", "start", "", &file_path])
+            .spawn()
+            .map_err(|e| format!("Failed to open file: {}", e))?;
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        std::process::Command::new("open")
+            .arg(&file_path)
+            .spawn()
+            .map_err(|e| format!("Failed to open file: {}", e))?;
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        std::process::Command::new("xdg-open")
+            .arg(&file_path)
+            .spawn()
+            .map_err(|e| format!("Failed to open file: {}", e))?;
+    }
+
+    Ok(())
+}
+
+/// 删除文件
+#[command]
+pub async fn delete_file(file_path: String) -> Result<(), String> {
+    std::fs::remove_file(&file_path)
+        .map_err(|e| format!("Failed to delete file: {}", e))
+}
+
 #[tauri::command]
 pub async fn save_project(project_info: ProjectInfo) -> Result<String, String> {
     println!("Saving project: {}", project_info.name);

src/App.tsx

@@ -9,6 +9,7 @@ import TemplateManagePage from './pages/TemplateManagePage'
 import TemplateDetailPage from './pages/TemplateDetailPage'
 import ResourceCategoryPage from './pages/ResourceCategoryPage'
 import ProjectManagePage from './pages/ProjectManagePage'
+import ProjectDetailPage from './pages/ProjectDetailPage'
 import ModelManagePage from './pages/ModelManagePage'
 import AudioLibraryPage from './pages/AudioLibraryPage'
 import MediaLibraryPage from './pages/MediaLibraryPage'
@@ -24,6 +25,7 @@ function App() {
         <Route path="/templates/:templateId" element={<TemplateDetailPage />} />
         <Route path="/resource-categories" element={<ResourceCategoryPage />} />
         <Route path="/projects" element={<ProjectManagePage />} />
+        <Route path="/projects/:projectId" element={<ProjectDetailPage />} />
         <Route path="/models" element={<ModelManagePage />} />
         <Route path="/audio" element={<AudioLibraryPage />} />
         <Route path="/media" element={<MediaLibraryPage />} />

src/components/AICreationPanel.tsx

@@ -0,0 +1,301 @@
+import React, { useState } from 'react'
+import { Sparkles, User, Video, Wand2, Play, Download } from 'lucide-react'
+import { Project } from '../services/projectService'
+import { AudioFile as Model } from '../services/audioService'
+
+interface AICreationPanelProps {
+  project: Project
+  models: Model[]
+  onMaterialCreated: () => void
+}
+
+interface CreationTask {
+  id: string
+  model: Model
+  prompt: string
+  status: 'pending' | 'processing' | 'completed' | 'failed'
+  progress: number
+  result?: {
+    videoPath: string
+    thumbnailPath: string
+    duration: number
+  }
+  error?: string
+  createdAt: Date
+}
+
+const AICreationPanel: React.FC<AICreationPanelProps> = ({
+  project,
+  models,
+  onMaterialCreated
+}) => {
+  const [selectedModel, setSelectedModel] = useState<Model | null>(null)
+  const [prompt, setPrompt] = useState('')
+  const [creationTasks, setCreationTasks] = useState<CreationTask[]>([])
+  const [isCreating, setIsCreating] = useState(false)
+
+  const handleCreateMaterial = async () => {
+    if (!selectedModel || !prompt.trim()) {
+      alert('请选择模特和输入创作提示')
+      return
+    }
+
+    const taskId = Date.now().toString()
+    const newTask: CreationTask = {
+      id: taskId,
+      model: selectedModel,
+      prompt: prompt.trim(),
+      status: 'pending',
+      progress: 0,
+      createdAt: new Date()
+    }
+
+    setCreationTasks(prev => [newTask, ...prev])
+    setIsCreating(true)
+
+    try {
+      // 模拟AI创作过程
+      await simulateAICreation(taskId)
+      
+      // 创作完成后刷新素材列表
+      onMaterialCreated()
+    } catch (error) {
+      console.error('AI creation failed:', error)
+      updateTaskStatus(taskId, 'failed', 0, undefined, error instanceof Error ? error.message : '创作失败')
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const simulateAICreation = async (taskId: string) => {
+    // 模拟创作过程
+    const steps = [
+      { progress: 10, message: '初始化AI模型...' },
+      { progress: 30, message: '分析模特特征...' },
+      { progress: 50, message: '生成视频内容...' },
+      { progress: 70, message: '渲染视频帧...' },
+      { progress: 90, message: '后处理优化...' },
+      { progress: 100, message: '创作完成' }
+    ]
+
+    updateTaskStatus(taskId, 'processing', 0)
+
+    for (const step of steps) {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      updateTaskStatus(taskId, 'processing', step.progress)
+    }
+
+    // 模拟创作结果
+    const result = {
+      videoPath: `${project.local_directory}/ai_generated_${taskId}.mp4`,
+      thumbnailPath: `${project.local_directory}/ai_generated_${taskId}_thumb.jpg`,
+      duration: 15
+    }
+
+    updateTaskStatus(taskId, 'completed', 100, result)
+  }
+
+  const updateTaskStatus = (
+    taskId: string, 
+    status: CreationTask['status'], 
+    progress: number, 
+    result?: CreationTask['result'],
+    error?: string
+  ) => {
+    setCreationTasks(prev => prev.map(task => 
+      task.id === taskId 
+        ? { ...task, status, progress, result, error }
+        : task
+    ))
+  }
+
+  const getStatusColor = (status: CreationTask['status']) => {
+    switch (status) {
+      case 'pending':
+        return 'text-yellow-600 bg-yellow-100'
+      case 'processing':
+        return 'text-blue-600 bg-blue-100'
+      case 'completed':
+        return 'text-green-600 bg-green-100'
+      case 'failed':
+        return 'text-red-600 bg-red-100'
+      default:
+        return 'text-gray-600 bg-gray-100'
+    }
+  }
+
+  const getStatusText = (status: CreationTask['status']) => {
+    switch (status) {
+      case 'pending':
+        return '等待中'
+      case 'processing':
+        return '创作中'
+      case 'completed':
+        return '已完成'
+      case 'failed':
+        return '失败'
+      default:
+        return '未知'
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 头部说明 */}
+      <div className="bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-6">
+        <div className="flex items-center mb-4">
+          <Sparkles className="text-purple-600 mr-3" size={24} />
+          <h3 className="text-lg font-medium text-gray-900">AI素材创作</h3>
+        </div>
+        <p className="text-gray-600">
+          使用AI技术，基于选定的模特和创作提示，为项目"{project.product_name}"生成专属视频素材
+        </p>
+      </div>
+
+      {/* 创作表单 */}
+      <div className="bg-white border border-gray-200 rounded-lg p-6">
+        <h4 className="text-md font-medium text-gray-900 mb-4">创建新素材</h4>
+        
+        {/* 模特选择 */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            选择模特
+          </label>
+          {models.length === 0 ? (
+            <div className="text-center py-8 bg-gray-50 rounded-lg">
+              <User className="mx-auto text-gray-400 mb-2" size={32} />
+              <p className="text-gray-600">请先为项目添加模特</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {models.map((model) => (
+                <button
+                  key={model.id}
+                  onClick={() => setSelectedModel(model)}
+                  className={`p-3 border rounded-lg text-left transition-colors ${
+                    selectedModel?.id === model.id
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="flex items-center">
+                    <User size={16} className="text-gray-400 mr-2" />
+                    <div>
+                      <div className="font-medium text-sm">{model.filename}</div>
+                      <div className="text-xs text-gray-500">
+                        {model.tags.slice(0, 2).join(', ')}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 创作提示 */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            创作提示
+          </label>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder={`为"${project.product_name}"创作一段展示视频，要求...`}
+            rows={4}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            详细描述您希望AI创作的视频内容，包括场景、动作、风格等
+          </p>
+        </div>
+
+        {/* 创作按钮 */}
+        <button
+          onClick={handleCreateMaterial}
+          disabled={isCreating || !selectedModel || !prompt.trim()}
+          className="flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
+        >
+          <Wand2 size={16} className="mr-2" />
+          {isCreating ? '创作中...' : '开始AI创作'}
+        </button>
+      </div>
+
+      {/* 创作历史 */}
+      <div className="bg-white border border-gray-200 rounded-lg p-6">
+        <h4 className="text-md font-medium text-gray-900 mb-4">创作历史</h4>
+        
+        {creationTasks.length === 0 ? (
+          <div className="text-center py-8 bg-gray-50 rounded-lg">
+            <Video className="mx-auto text-gray-400 mb-2" size={32} />
+            <p className="text-gray-600">暂无创作记录</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {creationTasks.map((task) => (
+              <div key={task.id} className="border border-gray-200 rounded-lg p-4">
+                <div className="flex items-start justify-between mb-2">
+                  <div className="flex-1">
+                    <div className="flex items-center mb-1">
+                      <User size={14} className="text-gray-400 mr-1" />
+                      <span className="text-sm font-medium">{task.model.filename}</span>
+                      <span className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(task.status)}`}>
+                        {getStatusText(task.status)}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600 mb-2">{task.prompt}</p>
+                    <p className="text-xs text-gray-500">
+                      {task.createdAt.toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+
+                {/* 进度条 */}
+                {task.status === 'processing' && (
+                  <div className="mb-3">
+                    <div className="flex items-center justify-between text-sm text-gray-600 mb-1">
+                      <span>创作进度</span>
+                      <span>{task.progress}%</span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-2">
+                      <div 
+                        className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                        style={{ width: `${task.progress}%` }}
+                      ></div>
+                    </div>
+                  </div>
+                )}
+
+                {/* 错误信息 */}
+                {task.status === 'failed' && task.error && (
+                  <div className="mb-3 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
+                    {task.error}
+                  </div>
+                )}
+
+                {/* 结果操作 */}
+                {task.status === 'completed' && task.result && (
+                  <div className="flex items-center space-x-2">
+                    <button className="flex items-center px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">
+                      <Play size={14} className="mr-1" />
+                      预览
+                    </button>
+                    <button className="flex items-center px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors">
+                      <Download size={14} className="mr-1" />
+                      下载
+                    </button>
+                    <span className="text-xs text-gray-500">
+                      时长: {task.result.duration}s
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AICreationPanel

src/components/ProjectFiles.tsx

@@ -0,0 +1,373 @@
+import React, { useState, useEffect } from 'react'
+import { FolderOpen, File, Video, Image, Music, FileText, Download, Eye, Trash2, RefreshCw } from 'lucide-react'
+import { Project } from '../services/projectService'
+import { invoke } from '@tauri-apps/api/core'
+
+interface ProjectFile {
+  name: string
+  path: string
+  size: number
+  type: 'video' | 'image' | 'audio' | 'document' | 'other'
+  modified: number
+  extension: string
+}
+
+interface ProjectFilesProps {
+  project: Project
+  files: ProjectFile[]
+  onFilesChange: (files: ProjectFile[]) => void
+}
+
+const ProjectFiles: React.FC<ProjectFilesProps> = ({
+  project,
+  files,
+  onFilesChange
+}) => {
+  const [loading, setLoading] = useState(false)
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([])
+  const [sortBy, setSortBy] = useState<'name' | 'size' | 'modified'>('name')
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
+
+  useEffect(() => {
+    loadProjectFiles()
+  }, [project.local_directory])
+
+  const loadProjectFiles = async () => {
+    try {
+      setLoading(true)
+      
+      // 调用Rust命令扫描项目目录
+      const result = await invoke<any[]>('scan_directory', { 
+        directoryPath: project.local_directory 
+      })
+      
+      const projectFiles: ProjectFile[] = result.map(file => ({
+        name: file.name,
+        path: file.path,
+        size: file.size,
+        type: getFileType(file.extension),
+        modified: file.modified,
+        extension: file.extension
+      }))
+      
+      onFilesChange(projectFiles)
+    } catch (error) {
+      console.error('Failed to load project files:', error)
+      // 如果扫描失败，使用模拟数据
+      const mockFiles: ProjectFile[] = [
+        {
+          name: 'project_video.mp4',
+          path: `${project.local_directory}/project_video.mp4`,
+          size: 15728640,
+          type: 'video',
+          modified: Date.now() - 86400000,
+          extension: 'mp4'
+        },
+        {
+          name: 'thumbnail.jpg',
+          path: `${project.local_directory}/thumbnail.jpg`,
+          size: 204800,
+          type: 'image',
+          modified: Date.now() - 3600000,
+          extension: 'jpg'
+        },
+        {
+          name: 'script.txt',
+          path: `${project.local_directory}/script.txt`,
+          size: 1024,
+          type: 'document',
+          modified: Date.now() - 7200000,
+          extension: 'txt'
+        }
+      ]
+      onFilesChange(mockFiles)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getFileType = (extension: string): ProjectFile['type'] => {
+    const ext = extension.toLowerCase()
+    if (['mp4', 'avi', 'mov', 'mkv', 'wmv', 'flv', 'webm'].includes(ext)) {
+      return 'video'
+    } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)) {
+      return 'image'
+    } else if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'].includes(ext)) {
+      return 'audio'
+    } else if (['txt', 'doc', 'docx', 'pdf', 'rtf', 'md'].includes(ext)) {
+      return 'document'
+    } else {
+      return 'other'
+    }
+  }
+
+  const getFileIcon = (type: ProjectFile['type']) => {
+    switch (type) {
+      case 'video':
+        return Video
+      case 'image':
+        return Image
+      case 'audio':
+        return Music
+      case 'document':
+        return FileText
+      default:
+        return File
+    }
+  }
+
+  const formatFileSize = (bytes: number) => {
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    if (bytes === 0) return '0 B'
+    const i = Math.floor(Math.log(bytes) / Math.log(1024))
+    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
+  }
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const sortedFiles = [...files].sort((a, b) => {
+    let comparison = 0
+    
+    switch (sortBy) {
+      case 'name':
+        comparison = a.name.localeCompare(b.name)
+        break
+      case 'size':
+        comparison = a.size - b.size
+        break
+      case 'modified':
+        comparison = a.modified - b.modified
+        break
+    }
+    
+    return sortOrder === 'asc' ? comparison : -comparison
+  })
+
+  const handleSort = (field: typeof sortBy) => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(field)
+      setSortOrder('asc')
+    }
+  }
+
+  const handleFileSelect = (filePath: string) => {
+    setSelectedFiles(prev => 
+      prev.includes(filePath) 
+        ? prev.filter(p => p !== filePath)
+        : [...prev, filePath]
+    )
+  }
+
+  const handleSelectAll = () => {
+    if (selectedFiles.length === files.length) {
+      setSelectedFiles([])
+    } else {
+      setSelectedFiles(files.map(f => f.path))
+    }
+  }
+
+  const handleOpenFile = async (file: ProjectFile) => {
+    try {
+      await invoke('open_file_in_system', { filePath: file.path })
+    } catch (error) {
+      console.error('Failed to open file:', error)
+    }
+  }
+
+  const handleDeleteFiles = async () => {
+    if (selectedFiles.length === 0) return
+    
+    const confirmed = confirm(`确定要删除选中的 ${selectedFiles.length} 个文件吗？`)
+    if (!confirmed) return
+
+    try {
+      for (const filePath of selectedFiles) {
+        await invoke('delete_file', { filePath })
+      }
+      
+      // 重新加载文件列表
+      await loadProjectFiles()
+      setSelectedFiles([])
+    } catch (error) {
+      console.error('Failed to delete files:', error)
+      alert('删除文件失败')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 头部操作 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900">项目文件</h3>
+          <p className="text-sm text-gray-600">
+            项目目录：{project.local_directory}
+          </p>
+        </div>
+        
+        <div className="flex items-center space-x-2">
+          {selectedFiles.length > 0 && (
+            <button
+              onClick={handleDeleteFiles}
+              className="flex items-center px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+            >
+              <Trash2 size={16} className="mr-2" />
+              删除选中 ({selectedFiles.length})
+            </button>
+          )}
+          
+          <button
+            onClick={loadProjectFiles}
+            disabled={loading}
+            className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+          >
+            <RefreshCw size={16} className={`mr-2 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </button>
+        </div>
+      </div>
+
+      {/* 文件统计 */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-blue-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-blue-600">{files.length}</div>
+          <div className="text-sm text-blue-600">总文件数</div>
+        </div>
+        <div className="bg-green-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-green-600">
+            {files.filter(f => f.type === 'video').length}
+          </div>
+          <div className="text-sm text-green-600">视频文件</div>
+        </div>
+        <div className="bg-purple-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-purple-600">
+            {files.filter(f => f.type === 'image').length}
+          </div>
+          <div className="text-sm text-purple-600">图片文件</div>
+        </div>
+        <div className="bg-orange-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-orange-600">
+            {formatFileSize(files.reduce((total, file) => total + file.size, 0))}
+          </div>
+          <div className="text-sm text-orange-600">总大小</div>
+        </div>
+      </div>
+
+      {/* 文件列表 */}
+      {loading ? (
+        <div className="text-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="text-gray-600 mt-2">扫描文件中...</p>
+        </div>
+      ) : files.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-lg">
+          <FolderOpen className="mx-auto text-gray-400 mb-4" size={48} />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">项目文件夹为空</h3>
+          <p className="text-gray-600">在项目目录中添加文件后点击刷新</p>
+        </div>
+      ) : (
+        <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+          {/* 表格头部 */}
+          <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                checked={selectedFiles.length === files.length && files.length > 0}
+                onChange={handleSelectAll}
+                className="mr-4"
+              />
+              <div className="flex-1 grid grid-cols-4 gap-4">
+                <button
+                  onClick={() => handleSort('name')}
+                  className="text-left text-sm font-medium text-gray-700 hover:text-gray-900"
+                >
+                  文件名 {sortBy === 'name' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </button>
+                <button
+                  onClick={() => handleSort('size')}
+                  className="text-left text-sm font-medium text-gray-700 hover:text-gray-900"
+                >
+                  大小 {sortBy === 'size' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </button>
+                <button
+                  onClick={() => handleSort('modified')}
+                  className="text-left text-sm font-medium text-gray-700 hover:text-gray-900"
+                >
+                  修改时间 {sortBy === 'modified' && (sortOrder === 'asc' ? '↑' : '↓')}
+                </button>
+                <div className="text-sm font-medium text-gray-700">操作</div>
+              </div>
+            </div>
+          </div>
+
+          {/* 文件列表 */}
+          <div className="divide-y divide-gray-200">
+            {sortedFiles.map((file) => {
+              const Icon = getFileIcon(file.type)
+              return (
+                <div
+                  key={file.path}
+                  className={`px-6 py-4 hover:bg-gray-50 transition-colors ${
+                    selectedFiles.includes(file.path) ? 'bg-blue-50' : ''
+                  }`}
+                >
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={selectedFiles.includes(file.path)}
+                      onChange={() => handleFileSelect(file.path)}
+                      className="mr-4"
+                    />
+                    <div className="flex-1 grid grid-cols-4 gap-4 items-center">
+                      <div className="flex items-center">
+                        <Icon size={20} className="text-gray-400 mr-3" />
+                        <div>
+                          <div className="font-medium text-gray-900">{file.name}</div>
+                          <div className="text-sm text-gray-500">{file.extension.toUpperCase()}</div>
+                        </div>
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        {formatFileSize(file.size)}
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        {formatDate(file.modified)}
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => handleOpenFile(file)}
+                          className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
+                          title="打开文件"
+                        >
+                          <Eye size={16} />
+                        </button>
+                        <button
+                          onClick={() => handleOpenFile(file)}
+                          className="p-1 text-gray-400 hover:text-green-600 transition-colors"
+                          title="下载文件"
+                        >
+                          <Download size={16} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProjectFiles

src/components/ProjectMaterials.tsx

@@ -0,0 +1,274 @@
+import React, { useState } from 'react'
+import { Video, Play, Filter, Search, Tag, Clock, HardDrive, Eye } from 'lucide-react'
+import { Project } from '../services/projectService'
+import { VideoSegment, MediaService } from '../services/mediaService'
+import VideoPlayer from './VideoPlayer'
+
+interface ProjectMaterialsProps {
+  project: Project
+  materials: VideoSegment[]
+  onMaterialsChange: (materials: VideoSegment[]) => void
+}
+
+const ProjectMaterials: React.FC<ProjectMaterialsProps> = ({
+  project,
+  materials,
+  onMaterialsChange
+}) => {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterType, setFilterType] = useState<'all' | 'original' | 'segmented'>('all')
+  const [selectedMaterial, setSelectedMaterial] = useState<VideoSegment | null>(null)
+  const [showVideoPlayer, setShowVideoPlayer] = useState(false)
+
+  // 过滤素材
+  const filteredMaterials = materials.filter(material => {
+    // 搜索过滤
+    const matchesSearch = material.filename.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         material.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+    
+    // 类型过滤
+    let matchesType = true
+    if (filterType === 'original') {
+      // 原始素材：segment_index为0或者是原始视频
+      matchesType = material.segment_index === 0
+    } else if (filterType === 'segmented') {
+      // 已分镜头素材：segment_index大于0
+      matchesType = material.segment_index > 0
+    }
+    
+    return matchesSearch && matchesType
+  })
+
+  const handleUseMaterial = async (material: VideoSegment) => {
+    try {
+      // 增加使用次数
+      await MediaService.incrementSegmentUsage(material.id)
+      
+      // 更新本地状态
+      const updatedMaterials = materials.map(m => 
+        m.id === material.id ? { ...m, use_count: m.use_count + 1 } : m
+      )
+      onMaterialsChange(updatedMaterials)
+    } catch (error) {
+      console.error('Failed to use material:', error)
+    }
+  }
+
+  const handlePlayMaterial = (material: VideoSegment) => {
+    setSelectedMaterial(material)
+    setShowVideoPlayer(true)
+  }
+
+  const formatDuration = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+    const remainingSeconds = Math.floor(seconds % 60)
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+  }
+
+  const formatFileSize = (bytes: number) => {
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    if (bytes === 0) return '0 B'
+    const i = Math.floor(Math.log(bytes) / Math.log(1024))
+    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 头部操作 */}
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900">项目素材</h3>
+          <p className="text-sm text-gray-600">
+            包含商品标签"{project.product_name}"且未使用的素材
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
+          {/* 搜索框 */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+            <input
+              type="text"
+              placeholder="搜索素材..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+            />
+          </div>
+
+          {/* 类型过滤 */}
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value as any)}
+            className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+          >
+            <option value="all">全部素材</option>
+            <option value="original">原始素材</option>
+            <option value="segmented">已分镜头</option>
+          </select>
+        </div>
+      </div>
+
+      {/* 统计信息 */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="bg-blue-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-blue-600">{materials.length}</div>
+          <div className="text-sm text-blue-600">总素材数</div>
+        </div>
+        <div className="bg-green-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-green-600">
+            {materials.filter(m => m.segment_index === 0).length}
+          </div>
+          <div className="text-sm text-green-600">原始素材</div>
+        </div>
+        <div className="bg-purple-50 rounded-lg p-4">
+          <div className="text-2xl font-bold text-purple-600">
+            {materials.filter(m => m.segment_index > 0).length}
+          </div>
+          <div className="text-sm text-purple-600">已分镜头</div>
+        </div>
+      </div>
+
+      {/* 素材列表 */}
+      {filteredMaterials.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-lg">
+          <Video className="mx-auto text-gray-400 mb-4" size={48} />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
+            {searchTerm || filterType !== 'all' ? '没有找到匹配的素材' : '暂无项目素材'}
+          </h3>
+          <p className="text-gray-600">
+            {searchTerm || filterType !== 'all' 
+              ? '尝试调整搜索条件或过滤器' 
+              : `上传包含"${project.product_name}"标签的视频素材`
+            }
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredMaterials.map((material) => (
+            <div key={material.id} className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
+              {/* 视频缩略图 */}
+              <div className="relative h-32 bg-gray-100">
+                {material.thumbnail_path ? (
+                  <img
+                    src={material.thumbnail_path}
+                    alt={material.filename}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Video size={32} className="text-gray-400" />
+                  </div>
+                )}
+                
+                {/* 播放按钮覆盖层 */}
+                <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition-all flex items-center justify-center">
+                  <button
+                    onClick={() => handlePlayMaterial(material)}
+                    className="p-2 bg-white/80 rounded-full hover:bg-white transition-colors opacity-0 hover:opacity-100"
+                    title="播放视频"
+                  >
+                    <Play size={20} className="text-gray-800" />
+                  </button>
+                </div>
+
+                {/* 素材类型标识 */}
+                <div className="absolute top-2 left-2">
+                  <span className={`px-2 py-1 text-xs rounded-full ${
+                    material.segment_index === 0 
+                      ? 'bg-green-100 text-green-800' 
+                      : 'bg-purple-100 text-purple-800'
+                  }`}>
+                    {material.segment_index === 0 ? '原始' : `片段${material.segment_index}`}
+                  </span>
+                </div>
+              </div>
+
+              {/* 素材信息 */}
+              <div className="p-4">
+                <h4 className="font-medium text-gray-900 mb-2 truncate" title={material.filename}>
+                  {material.filename}
+                </h4>
+
+                {/* 基本信息 */}
+                <div className="space-y-1 text-sm text-gray-600 mb-3">
+                  <div className="flex items-center">
+                    <Clock size={14} className="mr-1" />
+                    <span>{formatDuration(material.duration)}</span>
+                    <span className="mx-2">•</span>
+                    <span>{material.width}×{material.height}</span>
+                  </div>
+                  <div className="flex items-center">
+                    <HardDrive size={14} className="mr-1" />
+                    <span>{formatFileSize(material.file_size)}</span>
+                    <span className="mx-2">•</span>
+                    <span>{material.fps} fps</span>
+                  </div>
+                </div>
+
+                {/* 标签 */}
+                <div className="flex flex-wrap gap-1 mb-3">
+                  {material.tags.slice(0, 3).map((tag, index) => (
+                    <span
+                      key={index}
+                      className={`inline-flex items-center px-2 py-1 text-xs rounded-full ${
+                        tag === project.product_name
+                          ? 'bg-blue-100 text-blue-800'
+                          : 'bg-gray-100 text-gray-700'
+                      }`}
+                    >
+                      <Tag size={10} className="mr-1" />
+                      {tag}
+                    </span>
+                  ))}
+                  {material.tags.length > 3 && (
+                    <span className="text-xs text-gray-500">+{material.tags.length - 3}</span>
+                  )}
+                </div>
+
+                {/* 操作按钮 */}
+                <div className="flex items-center justify-between">
+                  <div className="text-xs text-gray-500">
+                    使用次数: {material.use_count}
+                  </div>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => handlePlayMaterial(material)}
+                      className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
+                      title="预览"
+                    >
+                      <Eye size={16} />
+                    </button>
+                    <button
+                      onClick={() => handleUseMaterial(material)}
+                      className="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors"
+                    >
+                      使用
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 视频播放器 */}
+      {selectedMaterial && (
+        <VideoPlayer
+          videoPath={selectedMaterial.file_path}
+          isOpen={showVideoPlayer}
+          onClose={() => {
+            setShowVideoPlayer(false)
+            setSelectedMaterial(null)
+          }}
+          title={`${selectedMaterial.filename} - ${
+            selectedMaterial.segment_index === 0 ? '原始素材' : `片段 ${selectedMaterial.segment_index}`
+          }`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default ProjectMaterials

src/components/ProjectModels.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from 'react'
+import { User, Plus, X, Search } from 'lucide-react'
+import { Project } from '../services/projectService'
+import { AudioFile as Model, AudioService as ModelService } from '../services/audioService'
+
+interface ProjectModelsProps {
+  project: Project
+  models: Model[]
+  onModelsChange: (models: Model[]) => void
+}
+
+const ProjectModels: React.FC<ProjectModelsProps> = ({
+  project,
+  models,
+  onModelsChange
+}) => {
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [availableModels, setAvailableModels] = useState<Model[]>([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const loadAvailableModels = async () => {
+    try {
+      setLoading(true)
+      const response = await ModelService.getAllAudioFiles()
+      if (response.status && response.data) {
+        // 过滤掉已经添加到项目的模特
+        const projectModelIds = models.map(m => m.id)
+        const available = response.data.filter(model => !projectModelIds.includes(model.id))
+        setAvailableModels(available)
+      }
+    } catch (error) {
+      console.error('Failed to load available models:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAddModel = (model: Model) => {
+    const updatedModels = [...models, model]
+    onModelsChange(updatedModels)
+    
+    // 从可用列表中移除
+    setAvailableModels(availableModels.filter(m => m.id !== model.id))
+  }
+
+  const handleRemoveModel = (modelId: string) => {
+    const removedModel = models.find(m => m.id === modelId)
+    if (removedModel) {
+      const updatedModels = models.filter(m => m.id !== modelId)
+      onModelsChange(updatedModels)
+      
+      // 添加回可用列表
+      setAvailableModels([...availableModels, removedModel])
+    }
+  }
+
+  const filteredAvailableModels = availableModels.filter(model =>
+    model.filename.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  return (
+    <div className="space-y-6">
+      {/* 头部操作 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900">项目模特</h3>
+          <p className="text-sm text-gray-600">管理此项目可使用的模特</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowAddModal(true)
+            loadAvailableModels()
+          }}
+          className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <Plus size={16} className="mr-2" />
+          添加模特
+        </button>
+      </div>
+
+      {/* 已添加的模特列表 */}
+      {models.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-lg">
+          <User className="mx-auto text-gray-400 mb-4" size={48} />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">暂无模特</h3>
+          <p className="text-gray-600 mb-4">为此项目添加可使用的模特</p>
+          <button
+            onClick={() => {
+              setShowAddModal(true)
+              loadAvailableModels()
+            }}
+            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <Plus size={16} className="mr-2" />
+            添加第一个模特
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {models.map((model) => (
+            <div key={model.id} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h4 className="font-medium text-gray-900 mb-1">{model.filename}</h4>
+                  <p className="text-sm text-gray-600 mb-2">
+                    {ModelService.formatDuration(model.duration)} • {ModelService.formatFileSize(model.file_size)}
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {model.tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <button
+                  onClick={() => handleRemoveModel(model.id)}
+                  className="p-1 text-gray-400 hover:text-red-600 transition-colors"
+                  title="移除模特"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 添加模特模态框 */}
+      {showAddModal && (
+        <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-2xl mx-4 max-h-[80vh] overflow-hidden">
+            {/* 模态框头部 */}
+            <div className="flex items-center justify-between p-6 border-b border-gray-200">
+              <h2 className="text-lg font-semibold text-gray-900">添加模特到项目</h2>
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <X size={24} />
+              </button>
+            </div>
+
+            {/* 搜索框 */}
+            <div className="p-6 border-b border-gray-200">
+              <div className="relative">
+                <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>
+            </div>
+
+            {/* 可用模特列表 */}
+            <div className="p-6 overflow-y-auto max-h-96">
+              {loading ? (
+                <div className="text-center py-8">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+                  <p className="text-gray-600 mt-2">加载中...</p>
+                </div>
+              ) : filteredAvailableModels.length === 0 ? (
+                <div className="text-center py-8">
+                  <User className="mx-auto text-gray-400 mb-4" size={48} />
+                  <p className="text-gray-600">
+                    {searchTerm ? '没有找到匹配的模特' : '没有可用的模特'}
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {filteredAvailableModels.map((model) => (
+                    <div
+                      key={model.id}
+                      className="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                      <div className="flex-1">
+                        <h4 className="font-medium text-gray-900">{model.filename}</h4>
+                        <p className="text-sm text-gray-600">
+                          {ModelService.formatDuration(model.duration)} • {ModelService.formatFileSize(model.file_size)}
+                        </p>
+                        {model.tags.length > 0 && (
+                          <div className="flex flex-wrap gap-1 mt-1">
+                            {model.tags.slice(0, 3).map((tag, index) => (
+                              <span
+                                key={index}
+                                className="inline-block px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
+                              >
+                                {tag}
+                              </span>
+                            ))}
+                            {model.tags.length > 3 && (
+                              <span className="text-xs text-gray-500">+{model.tags.length - 3}</span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => handleAddModel(model)}
+                        className="ml-4 px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
+                      >
+                        添加
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* 模态框底部 */}
+            <div className="flex justify-end p-6 border-t border-gray-200">
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                关闭
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProjectModels

src/components/ProjectTemplates.tsx

@@ -0,0 +1,318 @@
+import React, { useState } from 'react'
+import { Layout, Plus, X, Search, Play } from 'lucide-react'
+import { Project } from '../services/projectService'
+
+interface Template {
+  id: string
+  name: string
+  description: string
+  thumbnail?: string
+  duration: number
+  track_count: number
+  tags: string[]
+  created_at: string
+}
+
+interface ProjectTemplatesProps {
+  project: Project
+  templates: Template[]
+  onTemplatesChange: (templates: Template[]) => void
+}
+
+const ProjectTemplates: React.FC<ProjectTemplatesProps> = ({
+  project,
+  templates,
+  onTemplatesChange
+}) => {
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [availableTemplates, setAvailableTemplates] = useState<Template[]>([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const loadAvailableTemplates = async () => {
+    try {
+      setLoading(true)
+      // 这里需要调用模板服务获取所有可用模板
+      // const response = await TemplateService.getAllTemplates()
+      // 暂时使用模拟数据
+      const mockTemplates: Template[] = [
+        {
+          id: '1',
+          name: '商品展示模板',
+          description: '适合商品展示的基础模板',
+          duration: 30,
+          track_count: 3,
+          tags: ['商品', '展示', '基础'],
+          created_at: new Date().toISOString()
+        },
+        {
+          id: '2',
+          name: '动感宣传模板',
+          description: '动感十足的宣传视频模板',
+          duration: 60,
+          track_count: 5,
+          tags: ['宣传', '动感', '营销'],
+          created_at: new Date().toISOString()
+        }
+      ]
+      
+      // 过滤掉已经添加到项目的模板
+      const projectTemplateIds = templates.map(t => t.id)
+      const available = mockTemplates.filter(template => !projectTemplateIds.includes(template.id))
+      setAvailableTemplates(available)
+    } catch (error) {
+      console.error('Failed to load available templates:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAddTemplate = (template: Template) => {
+    const updatedTemplates = [...templates, template]
+    onTemplatesChange(updatedTemplates)
+    
+    // 从可用列表中移除
+    setAvailableTemplates(availableTemplates.filter(t => t.id !== template.id))
+  }
+
+  const handleRemoveTemplate = (templateId: string) => {
+    const removedTemplate = templates.find(t => t.id === templateId)
+    if (removedTemplate) {
+      const updatedTemplates = templates.filter(t => t.id !== templateId)
+      onTemplatesChange(updatedTemplates)
+      
+      // 添加回可用列表
+      setAvailableTemplates([...availableTemplates, removedTemplate])
+    }
+  }
+
+  const filteredAvailableTemplates = availableTemplates.filter(template =>
+    template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    template.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    template.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+  )
+
+  const formatDuration = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+    const remainingSeconds = seconds % 60
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 头部操作 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900">项目模板</h3>
+          <p className="text-sm text-gray-600">管理此项目可使用的视频模板</p>
+        </div>
+        <button
+          onClick={() => {
+            setShowAddModal(true)
+            loadAvailableTemplates()
+          }}
+          className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          <Plus size={16} className="mr-2" />
+          添加模板
+        </button>
+      </div>
+
+      {/* 已添加的模板列表 */}
+      {templates.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-lg">
+          <Layout className="mx-auto text-gray-400 mb-4" size={48} />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">暂无模板</h3>
+          <p className="text-gray-600 mb-4">为此项目添加可使用的视频模板</p>
+          <button
+            onClick={() => {
+              setShowAddModal(true)
+              loadAvailableTemplates()
+            }}
+            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <Plus size={16} className="mr-2" />
+            添加第一个模板
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {templates.map((template) => (
+            <div key={template.id} className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
+              {/* 模板缩略图 */}
+              <div className="relative h-32 bg-gradient-to-br from-blue-500 to-purple-600">
+                {template.thumbnail ? (
+                  <img
+                    src={template.thumbnail}
+                    alt={template.name}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Layout size={32} className="text-white" />
+                  </div>
+                )}
+                
+                {/* 播放按钮 */}
+                <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition-all flex items-center justify-center">
+                  <button className="p-2 bg-white/80 rounded-full hover:bg-white transition-colors opacity-0 hover:opacity-100">
+                    <Play size={20} className="text-gray-800" />
+                  </button>
+                </div>
+
+                {/* 移除按钮 */}
+                <button
+                  onClick={() => handleRemoveTemplate(template.id)}
+                  className="absolute top-2 right-2 p-1 bg-black/50 text-white rounded-full hover:bg-black/70 transition-colors"
+                  title="移除模板"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+
+              {/* 模板信息 */}
+              <div className="p-4">
+                <h4 className="font-medium text-gray-900 mb-1">{template.name}</h4>
+                <p className="text-sm text-gray-600 mb-2">{template.description}</p>
+                
+                <div className="flex items-center justify-between text-sm text-gray-500 mb-2">
+                  <span>{formatDuration(template.duration)}</span>
+                  <span>{template.track_count} 轨道</span>
+                </div>
+
+                <div className="flex flex-wrap gap-1">
+                  {template.tags.map((tag, index) => (
+                    <span
+                      key={index}
+                      className="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 添加模板模态框 */}
+      {showAddModal && (
+        <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-4xl mx-4 max-h-[80vh] overflow-hidden">
+            {/* 模态框头部 */}
+            <div className="flex items-center justify-between p-6 border-b border-gray-200">
+              <h2 className="text-lg font-semibold text-gray-900">添加模板到项目</h2>
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <X size={24} />
+              </button>
+            </div>
+
+            {/* 搜索框 */}
+            <div className="p-6 border-b border-gray-200">
+              <div className="relative">
+                <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>
+            </div>
+
+            {/* 可用模板列表 */}
+            <div className="p-6 overflow-y-auto max-h-96">
+              {loading ? (
+                <div className="text-center py-8">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+                  <p className="text-gray-600 mt-2">加载中...</p>
+                </div>
+              ) : filteredAvailableTemplates.length === 0 ? (
+                <div className="text-center py-8">
+                  <Layout className="mx-auto text-gray-400 mb-4" size={48} />
+                  <p className="text-gray-600">
+                    {searchTerm ? '没有找到匹配的模板' : '没有可用的模板'}
+                  </p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {filteredAvailableTemplates.map((template) => (
+                    <div
+                      key={template.id}
+                      className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"
+                    >
+                      {/* 模板缩略图 */}
+                      <div className="relative h-24 bg-gradient-to-br from-blue-500 to-purple-600">
+                        {template.thumbnail ? (
+                          <img
+                            src={template.thumbnail}
+                            alt={template.name}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center">
+                            <Layout size={24} className="text-white" />
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 模板信息 */}
+                      <div className="p-3">
+                        <h4 className="font-medium text-gray-900 text-sm mb-1">{template.name}</h4>
+                        <p className="text-xs text-gray-600 mb-2">{template.description}</p>
+                        
+                        <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
+                          <span>{formatDuration(template.duration)}</span>
+                          <span>{template.track_count} 轨道</span>
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          <div className="flex flex-wrap gap-1">
+                            {template.tags.slice(0, 2).map((tag, index) => (
+                              <span
+                                key={index}
+                                className="inline-block px-1 py-0.5 bg-gray-100 text-gray-700 text-xs rounded"
+                              >
+                                {tag}
+                              </span>
+                            ))}
+                            {template.tags.length > 2 && (
+                              <span className="text-xs text-gray-500">+{template.tags.length - 2}</span>
+                            )}
+                          </div>
+                          <button
+                            onClick={() => handleAddTemplate(template)}
+                            className="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors"
+                          >
+                            添加
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* 模态框底部 */}
+            <div className="flex justify-end p-6 border-t border-gray-200">
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                关闭
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProjectTemplates

src/pages/ProjectDetailPage.tsx

@@ -0,0 +1,282 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, User, Layout, Video, Sparkles, FolderOpen, Plus } from 'lucide-react'
+import { Project, ProjectService } from '../services/projectService'
+import { VideoSegment, MediaService } from '../services/mediaService'
+import { AudioFile as Model, AudioService as ModelService } from '../services/audioService'
+import ProjectModels from '../components/ProjectModels'
+import ProjectTemplates from '../components/ProjectTemplates'
+import ProjectMaterials from '../components/ProjectMaterials'
+import ProjectFiles from '../components/ProjectFiles'
+import AICreationPanel from '../components/AICreationPanel'
+
+const ProjectDetailPage: React.FC = () => {
+  const { projectId } = useParams<{ projectId: string }>()
+  const navigate = useNavigate()
+  
+  const [project, setProject] = useState<Project | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState<'models' | 'templates' | 'materials' | 'files' | 'ai'>('models')
+  
+  // 数据状态
+  const [projectModels, setProjectModels] = useState<Model[]>([])
+  const [availableTemplates, setAvailableTemplates] = useState<any[]>([])
+  const [projectMaterials, setProjectMaterials] = useState<VideoSegment[]>([])
+  const [projectFiles, setProjectFiles] = useState<any[]>([])
+
+  useEffect(() => {
+    if (projectId) {
+      loadProjectDetail()
+    }
+  }, [projectId])
+
+  const loadProjectDetail = async () => {
+    if (!projectId) return
+
+    try {
+      setLoading(true)
+      
+      // 加载项目基本信息
+      const projectResponse = await ProjectService.getProjectById(projectId)
+      if (projectResponse.status && projectResponse.data) {
+        setProject(projectResponse.data)
+        
+        // 加载项目相关数据
+        await Promise.all([
+          loadProjectModels(projectResponse.data),
+          loadAvailableTemplates(projectResponse.data),
+          loadProjectMaterials(projectResponse.data),
+          loadProjectFiles(projectResponse.data)
+        ])
+      } else {
+        console.error('Failed to load project:', projectResponse.msg)
+        navigate('/projects')
+      }
+    } catch (error) {
+      console.error('Failed to load project detail:', error)
+      navigate('/projects')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadProjectModels = async (project: Project) => {
+    try {
+      // 获取所有模特，后续可以添加项目关联逻辑
+      const response = await ModelService.getAllAudioFiles()
+      if (response.status && response.data) {
+        setProjectModels(response.data)
+      }
+    } catch (error) {
+      console.error('Failed to load project models:', error)
+    }
+  }
+
+  const loadAvailableTemplates = async (project: Project) => {
+    try {
+      // 获取所有模板，后续可以添加项目关联逻辑
+      // 这里需要调用模板服务
+      setAvailableTemplates([])
+    } catch (error) {
+      console.error('Failed to load available templates:', error)
+    }
+  }
+
+  const loadProjectMaterials = async (project: Project) => {
+    try {
+      // 获取与项目商品名相关的素材
+      const response = await MediaService.getAllSegments()
+      if (response.status && response.data) {
+        // 过滤包含商品名标签且未使用的素材
+        const filteredMaterials = response.data.filter(segment => 
+          segment.tags.includes(project.product_name) && segment.use_count === 0
+        )
+        setProjectMaterials(filteredMaterials)
+      }
+    } catch (error) {
+      console.error('Failed to load project materials:', error)
+    }
+  }
+
+  const loadProjectFiles = async (project: Project) => {
+    try {
+      // 获取项目文件夹下的所有文件
+      // 这里需要添加文件系统扫描功能
+      setProjectFiles([])
+    } catch (error) {
+      console.error('Failed to load project files:', error)
+    }
+  }
+
+  const tabs = [
+    { id: 'models', label: '使用模特', icon: User, count: projectModels.length },
+    { id: 'templates', label: '可用模板', icon: Layout, count: availableTemplates.length },
+    { id: 'materials', label: '项目素材', icon: Video, count: projectMaterials.length },
+    { id: 'files', label: '项目文件', icon: FolderOpen, count: projectFiles.length },
+    { id: 'ai', label: 'AI创作', icon: Sparkles, count: 0 }
+  ] as const
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
+          <div className="h-32 bg-gray-200 rounded mb-6"></div>
+          <div className="h-64 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!project) {
+    return (
+      <div className="p-6">
+        <div className="text-center py-12">
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">项目不存在</h2>
+          <p className="text-gray-600 mb-4">找不到指定的项目</p>
+          <button
+            onClick={() => navigate('/projects')}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            返回项目列表
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6">
+      {/* 页面头部 */}
+      <div className="flex items-center mb-6">
+        <button
+          onClick={() => navigate('/projects')}
+          className="mr-4 p-2 text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <ArrowLeft size={24} />
+        </button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{project.name}</h1>
+          <p className="text-gray-600">商品：{project.product_name}</p>
+        </div>
+      </div>
+
+      {/* 项目信息卡片 */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+        <div className="flex items-start space-x-6">
+          {/* 商品图片 */}
+          <div className="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+            {project.product_image ? (
+              <img
+                src={project.product_image}
+                alt={project.product_name}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-gray-400">
+                <Video size={32} />
+              </div>
+            )}
+          </div>
+
+          {/* 项目信息 */}
+          <div className="flex-1">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="text-sm text-gray-600">项目名称</label>
+                <p className="font-medium">{project.name}</p>
+              </div>
+              <div>
+                <label className="text-sm text-gray-600">商品名称</label>
+                <p className="font-medium">{project.product_name}</p>
+              </div>
+              <div>
+                <label className="text-sm text-gray-600">本地目录</label>
+                <p className="font-medium text-sm text-gray-700">{project.local_directory}</p>
+              </div>
+              <div>
+                <label className="text-sm text-gray-600">创建时间</label>
+                <p className="font-medium">{new Date(project.created_at).toLocaleDateString()}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 标签页导航 */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
+        <div className="border-b border-gray-200">
+          <nav className="flex space-x-8 px-6">
+            {tabs.map((tab) => {
+              const Icon = tab.icon
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`flex items-center space-x-2 py-4 border-b-2 font-medium text-sm transition-colors ${
+                    activeTab === tab.id
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  <Icon size={16} />
+                  <span>{tab.label}</span>
+                  {tab.count > 0 && (
+                    <span className="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">
+                      {tab.count}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
+          </nav>
+        </div>
+
+        {/* 标签页内容 */}
+        <div className="p-6">
+          {activeTab === 'models' && (
+            <ProjectModels
+              project={project}
+              models={projectModels}
+              onModelsChange={setProjectModels}
+            />
+          )}
+          
+          {activeTab === 'templates' && (
+            <ProjectTemplates
+              project={project}
+              templates={availableTemplates}
+              onTemplatesChange={setAvailableTemplates}
+            />
+          )}
+          
+          {activeTab === 'materials' && (
+            <ProjectMaterials
+              project={project}
+              materials={projectMaterials}
+              onMaterialsChange={setProjectMaterials}
+            />
+          )}
+          
+          {activeTab === 'files' && (
+            <ProjectFiles
+              project={project}
+              files={projectFiles}
+              onFilesChange={setProjectFiles}
+            />
+          )}
+          
+          {activeTab === 'ai' && (
+            <AICreationPanel
+              project={project}
+              models={projectModels}
+              onMaterialCreated={() => loadProjectMaterials(project)}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProjectDetailPage

src/services/projectService.ts

@@ -62,6 +62,8 @@ export class ProjectService {
     }
   }
 
+
+
   /**
    * 创建新项目
    */