video-flow-b/components/workflow/work-office/work-office.tsx

import React, { useState, useEffect } from 'react';
import { Heart, Camera, Film, Scissors } from 'lucide-react';
import { motion } from 'framer-motion';
import Scriptwriter from './scriptwriter';
import StoryboardArtist from './storyboard-artist';
import VisualDirector from './visual-director';
import Editor from './editor';
import { scriptwriterData, storyboardData, productionData, editorData } from './mock-data';

interface Stage {
  id: string;
  title: string;
  icon: React.ElementType;
  color: string;
  profession: string;
}

const stages: Stage[] = [
  {
    id: 'script',
    title: 'Scriptwriter',
    icon: Heart,
    color: '#8b5cf6',
    profession: 'Scriptwriter'
  },
  {
    id: 'storyboard',
    title: 'Storyboard artist',
    icon: Camera,
    color: '#06b6d4',
    profession: 'Storyboard artist'
  },
  {
    id: 'production',
    title: 'Visual director',
    icon: Film,
    color: '#10b981',
    profession: 'Visual director'
  },
  {
    id: 'editing',
    title: 'Editor',
    icon: Scissors,
    color: '#f59e0b',
    profession: 'Editor'
  }
];
const actionsText = [
  'is thinking...',
  'is drawing...',
  'is directing...',
  'is editing...'
]

// 思考指示器组件
const ThinkingDots = ({ show, text, color }: { show: boolean; text: string; color: string }) => {
  if (!show) return null;
  
  return (
    <div className="flex items-center space-x-2">
      <div className="flex space-x-1">
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            className="w-2 h-2 rounded-full"
            style={{ backgroundColor: color }}
            animate={{
              scale: [1, 1.2, 1],
              opacity: [0.5, 1, 0.5]
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              delay: i * 0.2
            }}
          />
        ))}
      </div>
      <span className="text-white text-sm">{text}</span>
    </div>
  );
};

interface WorkOfficeProps {
  initialStage?: number;
  roles: any[];
}

const WorkOffice: React.FC<WorkOfficeProps> = ({ initialStage = 0 }) => {
  const [currentStage, setCurrentStage] = useState(initialStage);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentContent, setCurrentContent] = useState<Record<string, any>>(scriptwriterData);
  const [thinkingText, setThinkingText] = useState(`${stages[0].profession} ${actionsText[0]}`);

  useEffect(() => {
    // currentStage 更新 重新渲染当前工作台组件
    setCurrentStage(initialStage);
  }, [initialStage]);

  // 根据当前阶段加载对应数据
  useEffect(() => {
    let data: Record<string, any> = {};
    switch (currentStage) {
      case 0:
        data = scriptwriterData;
        break;
      case 1:
        data = storyboardData;
        break;
      case 2:
        data = productionData;
        break;
      case 3:
        data = editorData;
        break;
    }
    
    setIsPlaying(true);
    setCurrentContent(data);
    setThinkingText(`${stages[currentStage].profession} ${actionsText[currentStage]}`);
    
  }, [currentStage]);

  // 渲染当前工作台组件
  const renderCurrentWorkstation = () => {
    switch (currentStage) {
      case 0:
        return <Scriptwriter currentContent={currentContent} isPlaying={isPlaying} />;
      case 1:
        return <StoryboardArtist currentContent={currentContent} isPlaying={isPlaying} />;
      case 2:
        return <VisualDirector currentContent={currentContent} isPlaying={isPlaying} />;
      case 3:
        return <Editor currentContent={currentContent} isPlaying={isPlaying} />;
      default:
        return null;
    }
  };

  return (
    <div className="h-full rounded-2xl overflow-hidden shadow-2xl relative">
      {/* 正在加载的部分 文字显示 */}
      <div className="absolute top-[0] left-1/2 -translate-x-1/2 z-10">
        <ThinkingDots 
          show={isPlaying} 
          text={thinkingText} 
          color={stages[currentStage].color}
        />
      </div>
      
      {/* 工作台内容区域 */}
      <div className="absolute left-0 right-0 top-[2rem] w-full aspect-video overflow-y-auto" style={{height: 'calc(100% - 7rem'}}>
        {renderCurrentWorkstation()}
      </div>
    </div>
  );
};

export default WorkOffice;