修复编译问题

components/pages/script-overview.tsx

@@ -2,7 +2,21 @@
 
 import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { DragDropContext, DropResult } from 'react-beautiful-dnd';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { DragEndEvent } from '@dnd-kit/core';
 import { ScriptMetaInfo } from '../script-overview/script-meta-info';
 import { SceneFilmstrip } from '../script-overview/scene-filmstrip';
 import { SceneCardList } from '../script-overview/scene-card-list';
@@ -30,6 +44,14 @@ export interface ScriptMeta {
 }
 
 export default function ScriptOverview() {
+  // Configure drag sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
   // Example Data
   const [scriptMeta] = useState<ScriptMeta>({
     title: "Lost Stars",
@@ -164,14 +186,21 @@ export default function ScriptOverview() {
   const [selectedSceneId, setSelectedSceneId] = useState<string>();
 
   // Handle scene drag and drop sorting
-  const handleDragEnd = (result: DropResult) => {
+  const handleDragEnd = (event: DragEndEvent) => {
-    if (!result.destination) return;
+    const { active, over } = event;
 
-    const items = Array.from(scenes);
+    if (active.id === over?.id) {
-    const [reorderedItem] = items.splice(result.source.index, 1);
+      return;
-    items.splice(result.destination.index, 0, reorderedItem);
+    }
 
-    setScenes(items);
+    const oldIndex = scenes.findIndex(scene => scene.id === active.id);
+    const newIndex = scenes.findIndex(scene => scene.id === over?.id);
+
+    if (oldIndex === -1 || newIndex === -1) {
+      return;
+    }
+
+    setScenes(arrayMove(scenes, oldIndex, newIndex));
   };
 
   // Handle scene updates
@@ -215,7 +244,15 @@ export default function ScriptOverview() {
         <div className="flex-grow min-w-0 h-full overflow-hidden flex flex-col">
           {/* Scene Card List */}
           <div className="flex-grow overflow-y-auto px-8">
-            <DragDropContext onDragEnd={handleDragEnd}>
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={scenes.map(scene => scene.id)}
+                strategy={verticalListSortingStrategy}
+              >
                 <SceneCardList
                   scenes={scenes}
                   selectedSceneId={selectedSceneId}
@@ -223,7 +260,8 @@ export default function ScriptOverview() {
                   onSceneDelete={handleSceneDelete}
                   onSceneDuplicate={handleSceneDuplicate}
                 />
-            </DragDropContext>
+              </SortableContext>
+            </DndContext>
           </div>
 
           {/* Filmstrip Preview */}

components/pages/storyboard-view.tsx

@@ -2,7 +2,21 @@
 
 import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { DragDropContext, DropResult } from 'react-beautiful-dnd';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { DragEndEvent } from '@dnd-kit/core';
 import { ScriptMetaInfo } from '../script-overview/script-meta-info';
 import { SceneFilmstrip } from '../script-overview/scene-filmstrip';
 import { StoryboardCardList } from '../storyboard/storyboard-card-list';
@@ -145,14 +159,21 @@ export default function StoryboardView() {
   const [selectedSceneId, setSelectedSceneId] = useState<string>();
 
   // 处理场景拖拽排序
-  const handleDragEnd = (result: DropResult) => {
+  const handleDragEnd = (event: DragEndEvent) => {
-    if (!result.destination) return;
+    const { active, over } = event;
 
-    const items = Array.from(scenes);
+    if (active.id === over?.id) {
-    const [reorderedItem] = items.splice(result.source.index, 1);
+      return;
-    items.splice(result.destination.index, 0, reorderedItem);
+    }
 
-    setScenes(items);
+    const oldIndex = scenes.findIndex(scene => scene.id === active.id);
+    const newIndex = scenes.findIndex(scene => scene.id === over?.id);
+
+    if (oldIndex === -1 || newIndex === -1) {
+      return;
+    }
+
+    setScenes(arrayMove(scenes, oldIndex, newIndex));
   };
 
   // 处理场景更新
@@ -209,7 +230,20 @@ export default function StoryboardView() {
         <div className="flex-grow min-w-0 h-full overflow-hidden flex flex-col">
           {/* Scene Card List */}
           <div className="flex-grow overflow-y-auto">
-            <DragDropContext onDragEnd={handleDragEnd}>
+            <DndContext
+              sensors={useSensors(
+                useSensor(PointerSensor),
+                useSensor(KeyboardSensor, {
+                  coordinateGetter: sortableKeyboardCoordinates,
+                })
+              )}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={scenes.map(scene => scene.id)}
+                strategy={verticalListSortingStrategy}
+              >
                 <StoryboardCardList
                   scenes={scenes}
                   selectedSceneId={selectedSceneId}
@@ -217,7 +251,8 @@ export default function StoryboardView() {
                   onSceneDelete={handleSceneDelete}
                   onSceneDuplicate={handleSceneDuplicate}
                 />
-            </DragDropContext>
+              </SortableContext>
+            </DndContext>
           </div>
 
           {/* Filmstrip Preview */}

components/script-overview/scene-card-list.tsx

@@ -1,4 +1,3 @@
-import { Droppable } from 'react-beautiful-dnd';
 import { Scene } from '../pages/script-overview';
 import { SceneCard } from './scene-card';
 
@@ -18,17 +17,7 @@ export function SceneCardList({
   onSceneDuplicate
 }: SceneCardListProps) {
   return (
-    <Droppable droppableId="scenes" direction="horizontal">
+    <div className="flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden transition-colors duration-300 rounded-xl p-2">
-      {(provided, snapshot) => (
-        <div
-          ref={provided.innerRef}
-          {...provided.droppableProps}
-          className={`
-            flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden
-            ${snapshot.isDraggingOver ? 'bg-white/5' : ''}
-            transition-colors duration-300 rounded-xl p-2
-          `}
-        >
       {scenes.map((scene, index) => (
         <SceneCard
           key={scene.id}
@@ -40,9 +29,6 @@ export function SceneCardList({
           onDuplicate={() => onSceneDuplicate(scene.id)}
         />
       ))}
-          {provided.placeholder}
     </div>
-      )}
-    </Droppable>
   );
 } 

components/script-overview/scene-card.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Draggable } from 'react-beautiful-dnd';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { Trash2, Copy, RefreshCw, GripVertical } from 'lucide-react';
 import { Scene } from '../pages/script-overview';
 import Image from 'next/image';
@@ -29,6 +30,20 @@ export function SceneCard({
   const cardRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout>();
 
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: scene.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
   // 处理自动保存
   const handleContentChange = (
     field: keyof Scene,
@@ -67,12 +82,10 @@ export function SceneCard({
   }, [isSelected]);
 
   return (
-    <Draggable draggableId={scene.id} index={index}>
-      {(provided, snapshot) => (
     <div
-          ref={provided.innerRef}
+      ref={setNodeRef}
-          {...provided.draggableProps}
+      style={style}
-          {...provided.dragHandleProps}
+      {...attributes}
     >
       <motion.div
         id={`scene-card-${scene.id}`}
@@ -80,9 +93,9 @@ export function SceneCard({
         animate={{ 
           opacity: 1, 
           scale: 1,
-              x: snapshot.isDragging ? 5 : 0,
+          x: isDragging ? 5 : 0,
-              y: snapshot.isDragging ? 5 : 0,
+          y: isDragging ? 5 : 0,
-              rotate: snapshot.isDragging ? 2 : 0
+          rotate: isDragging ? 2 : 0
         }}
         transition={{ 
           type: "spring",
@@ -92,7 +105,7 @@ export function SceneCard({
         className={`
           relative flex-shrink-0 w-[400px] bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden h-full
           flex flex-col group cursor-grab active:cursor-grabbing
-              ${snapshot.isDragging ? 'ring-2 ring-blue-500/50 shadow-lg z-50' : ''}
+          ${isDragging ? 'ring-2 ring-blue-500/50 shadow-lg z-50' : ''}
           ${isEditing ? 'ring-2 ring-yellow-500/50' : ''}
           ${isSelected ? 'ring-2 ring-purple-500/50' : ''}
           transition-all duration-300
@@ -103,6 +116,14 @@ export function SceneCard({
           setShowDeleteConfirm(false);
         }}
       >
+        {/* Drag Handle */}
+        <div
+          {...listeners}
+          className="absolute top-2 right-2 z-10 p-2 rounded-lg bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
+        >
+          <GripVertical className="w-4 h-4 text-white/60" />
+        </div>
+
             {/* Scene Image */}
             <div className="relative w-full h-[200px] flex-shrink-0">
               <Image
@@ -304,7 +325,5 @@ export function SceneCard({
             </motion.div>
           </motion.div>
         </div>
-      )}
-    </Draggable>
   );
 } 

components/storyboard/storyboard-card-list.tsx

@@ -1,4 +1,3 @@
-import { Droppable } from 'react-beautiful-dnd';
 import { StoryboardScene } from '../pages/storyboard-view';
 import { StoryboardCard } from './storyboard-card';
 
@@ -18,27 +17,18 @@ export function StoryboardCardList({
   onSceneDuplicate
 }: StoryboardCardListProps) {
   return (
-    <Droppable droppableId="storyboard-scenes">
+    <div className="flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden transition-colors duration-300 rounded-xl p-2">
-      {(provided) => (
-        <div
-          ref={provided.innerRef}
-          {...provided.droppableProps}
-          className="flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden p-8"
-        >
       {scenes.map((scene, index) => (
         <StoryboardCard
           key={scene.id}
           scene={scene}
           index={index}
-              isSelected={selectedSceneId === scene.id}
+          isSelected={scene.id === selectedSceneId}
           onUpdate={(updates) => onSceneUpdate(scene.id, updates)}
           onDelete={() => onSceneDelete(scene.id)}
           onDuplicate={() => onSceneDuplicate(scene.id)}
         />
       ))}
-          {provided.placeholder}
     </div>
-      )}
-    </Droppable>
   );
 } 

components/storyboard/storyboard-card.tsx

@@ -1,7 +1,8 @@
 import { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Draggable } from 'react-beautiful-dnd';
+import { useSortable } from '@dnd-kit/sortable';
-import { Trash2, Copy, RefreshCw } from 'lucide-react';
+import { CSS } from '@dnd-kit/utilities';
+import { Trash2, Copy, RefreshCw, GripVertical } from 'lucide-react';
 import { StoryboardScene } from '../pages/storyboard-view';
 import Image from 'next/image';
 
@@ -29,6 +30,20 @@ export function StoryboardCard({
   const cardRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout>();
 
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: scene.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
   // 处理自动保存
   const handleContentChange = (
     field: keyof StoryboardScene,
@@ -67,32 +82,13 @@ export function StoryboardCard({
   }, [isSelected]);
 
   return (
-    <Draggable draggableId={scene.id} index={index}>
-      {(provided, snapshot) => (
     <div
-          ref={provided.innerRef}
+      ref={setNodeRef}
-          {...provided.draggableProps}
+      style={style}
-          {...provided.dragHandleProps}
-        >
-          <motion.div
-            id={`scene-card-${scene.id}`}
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ 
-              opacity: 1, 
-              scale: 1,
-              x: snapshot.isDragging ? 5 : 0,
-              y: snapshot.isDragging ? 5 : 0,
-              rotate: snapshot.isDragging ? 2 : 0
-            }}
-            transition={{ 
-              type: "spring",
-              stiffness: 200,
-              damping: 20
-            }}
       className={`
         relative flex-shrink-0 w-[400px] bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden h-full
         flex flex-col group cursor-grab active:cursor-grabbing
-              ${snapshot.isDragging ? 'ring-2 ring-blue-500/50 shadow-lg z-50' : ''}
+        ${isDragging ? 'ring-2 ring-blue-500/50 shadow-lg z-50' : ''}
         ${isEditing ? 'ring-2 ring-yellow-500/50' : ''}
         ${isSelected ? 'ring-2 ring-purple-500/50' : ''}
         transition-all duration-300
@@ -103,6 +99,44 @@ export function StoryboardCard({
         setShowDeleteConfirm(false);
       }}
     >
+      <motion.div
+        id={`scene-card-${scene.id}`}
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ 
+          opacity: 1, 
+          scale: 1,
+          x: isDragging ? 5 : 0,
+          y: isDragging ? 5 : 0,
+          rotate: isDragging ? 2 : 0
+        }}
+        transition={{ 
+          type: "spring",
+          stiffness: 200,
+          damping: 20
+        }}
+        className={`
+          relative flex-shrink-0 w-[400px] bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden h-full
+          flex flex-col group cursor-grab active:cursor-grabbing
+          ${isDragging ? 'ring-2 ring-blue-500/50 shadow-lg z-50' : ''}
+          ${isEditing ? 'ring-2 ring-yellow-500/50' : ''}
+          ${isSelected ? 'ring-2 ring-purple-500/50' : ''}
+          transition-all duration-300
+        `}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => {
+          setIsHovered(false);
+          setShowDeleteConfirm(false);
+        }}
+      >
+        {/* Drag Handle */}
+        <div
+          {...listeners}
+          {...attributes}
+          className="absolute top-2 right-2 z-10 p-2 rounded-lg bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
+        >
+          <GripVertical className="w-4 h-4 text-white/60" />
+        </div>
+
         {/* Scene Image */}
         <div className="relative w-full h-[200px] flex-shrink-0">
           <Image
@@ -304,7 +338,5 @@ export function StoryboardCard({
         </motion.div>
       </motion.div>
     </div>
-      )}
-    </Draggable>
   );
 } 

components/work-flow/api.ts

@@ -6,12 +6,28 @@ import {
 } from './constants';
 
 // 当前选择的mock数据
-let selectedMockData = getRandomMockData();
+let selectedMockData: any = null;
+
+// 加载mock数据的辅助函数
+const loadMockData = async () => {
+  if (!selectedMockData) {
+    try {
+      selectedMockData = await getRandomMockData();
+    } catch (error) {
+      // 如果API失败，使用本地fallback数据
+      const { MOCK_DATA } = await import('./constants');
+      const randomIndex = Math.floor(Math.random() * MOCK_DATA.length);
+      selectedMockData = MOCK_DATA[randomIndex];
+      console.log('使用本地fallback数据:', selectedMockData);
+    }
+  }
+  return selectedMockData;
+};
 
 // 模拟接口请求 获取任务详情
 export const getTaskDetail = async (taskId: string): Promise<TaskObject> => {
-  // 每次获取任务详情时重新随机选择数据
+  // 确保已经加载了数据
-  selectedMockData = getRandomMockData();
+  await loadMockData();
   
   const data: TaskObject = {
     projectId: selectedMockData.detail.projectId,
@@ -32,6 +48,9 @@ export const getTaskSketch = async (
   taskId: string,
   onProgress: (sketch: SketchItem, index: number) => void
 ): Promise<void> => {
+  // 确保已经加载了数据
+  await loadMockData();
+  
   const sketchData = selectedMockData.sketch;
   const totalSketches = sketchData.length;
   
@@ -71,6 +90,9 @@ export const getTaskVideo = async (
   sketchCount: number,
   onProgress: (video: VideoItem, index: number) => void
 ): Promise<void> => {
+  // 确保已经加载了数据
+  await loadMockData();
+  
   const videoData = selectedMockData.video;
   const totalVideos = videoData.length;