Merge remote-tracking branch 'origin/dev' into dev

components/ui/character-tab-content.tsx

@@ -15,18 +15,17 @@ interface Role {
 
 interface CharacterTabContentProps {
   taskSketch: any[];
-  currentSketchIndex: number;
+  currentRoleIndex: number;
   onSketchSelect: (index: number) => void;
   roles: Role[];
 }
 
 export function CharacterTabContent({ 
   taskSketch,
-  currentSketchIndex,
+  currentRoleIndex,
   onSketchSelect,
   roles = []
 }: CharacterTabContentProps) {
-  const [selectedCharacterIndex, setSelectedCharacterIndex] = useState(0);
   const [isReplaceModalOpen, setIsReplaceModalOpen] = useState(false);
   const [activeReplaceMethod, setActiveReplaceMethod] = useState('upload');
   const [isPlaying, setIsPlaying] = useState(false);
@@ -80,7 +79,7 @@ export function CharacterTabContent({
   };
 
   // 获取当前选中的角色
-  const currentRole = roles[selectedCharacterIndex];
+  const currentRole = roles[currentRoleIndex];
 
   return (
     <div className="flex flex-col gap-6">
@@ -98,9 +97,9 @@ export function CharacterTabContent({
                 className={cn(
                   'relative flex-shrink-0 w-24 rounded-lg overflow-hidden cursor-pointer',
                   'aspect-[9/16]',
-                  selectedCharacterIndex === index ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
+                  currentRoleIndex === index ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
                 )}
-                onClick={() => setSelectedCharacterIndex(index)}
+                onClick={() => onSketchSelect(index)}
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >

components/ui/edit-modal.tsx

@@ -46,6 +46,7 @@ export function EditModal({
 }: EditModalProps) {
   const [activeTab, setActiveTab] = useState(activeEditTab);
   const [currentIndex, setCurrentIndex] = useState(currentSketchIndex);
+  const [currentRoleIndex, setCurrentRoleIndex] = useState(0);
 
   // 当 activeEditTab 改变时更新 activeTab
   useEffect(() => {
@@ -61,6 +62,14 @@ export function EditModal({
     return parseInt(tabId) > parseInt(taskStatus);
   };
 
+  const hanldeChangeSelect = (index: number) => {
+    if (activeTab === '2') {
+      setCurrentRoleIndex(index);
+    } else {
+      setCurrentIndex(index);
+    }
+  }
+
   const renderTabContent = () => {
     switch (activeTab) {
       case '1':
@@ -68,15 +77,15 @@ export function EditModal({
           <ScriptTabContent
             taskSketch={taskSketch}
             currentSketchIndex={currentIndex}
-            onSketchSelect={onSketchSelect}
+            onSketchSelect={hanldeChangeSelect}
           />
         );
       case '2':
         return (
           <CharacterTabContent
             taskSketch={taskSketch}
-            currentSketchIndex={currentIndex}
+            currentRoleIndex={currentRoleIndex}
-            onSketchSelect={onSketchSelect}
+            onSketchSelect={hanldeChangeSelect}
             roles={roles}
           />
         );
@@ -85,7 +94,7 @@ export function EditModal({
           <VideoTabContent
             taskSketch={sketchVideo}
             currentSketchIndex={currentIndex}
-            onSketchSelect={onSketchSelect}
+            onSketchSelect={hanldeChangeSelect}
             isPlaying={false}
           />
         );

components/ui/video-tab-content.tsx

@@ -324,62 +324,14 @@ export function VideoTabContent({
               src={sketches[currentSketchIndex]?.url}
               className="w-full h-full object-cover"
               loop
-              autoPlay
+              autoPlay={false}
               playsInline
+              controls
               muted={isMuted}
               onTimeUpdate={handleTimeUpdate}
             />
             
-            {/* 视频控制层 */}
+
-            <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
-              <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
-                {/* 进度条 */}
-                <div className="w-full h-1 bg-white/20 rounded-full mb-4 cursor-pointer"
-                  onClick={(e) => {
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    const x = e.clientX - rect.left;
-                    const percentage = (x / rect.width) * 100;
-                    if (videoPlayerRef.current) {
-                      videoPlayerRef.current.currentTime = (percentage / 100) * videoPlayerRef.current.duration;
-                    }
-                  }}
-                >
-                  <motion.div 
-                    className="h-full bg-blue-500 rounded-full"
-                    style={{ width: `${progress}%` }}
-                  />
-                </div>
-                
-                {/* 控制按钮 */}
-                <div className="flex items-center gap-4">
-                  <motion.button
-                    className="p-2 rounded-full hover:bg-white/10"
-                    onClick={() => setIsPlaying(!isPlaying)}
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.9 }}
-                  >
-                    {isPlaying ? (
-                      <Pause className="w-5 h-5" />
-                    ) : (
-                      <Play className="w-5 h-5" />
-                    )}
-                  </motion.button>
-                  
-                  <motion.button
-                    className="p-2 rounded-full hover:bg-white/10"
-                    onClick={() => setIsMuted(!isMuted)}
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.9 }}
-                  >
-                    {isMuted ? (
-                      <VolumeX className="w-5 h-5" />
-                    ) : (
-                      <Volume2 className="w-5 h-5" />
-                    )}
-                  </motion.button>
-                </div>
-              </div>
-            </div>
           </motion.div>
 
           {/* 操作按钮 */}