2026-04-29-21-27-10 - 组件目录扁平化重构

src/components/VideoWorkspace.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { CanvasArea } from './CanvasArea';
+import { ToolsPalette } from './ToolsPalette';
+import { OntologyInspector } from './OntologyInspector';
+import { FrameTimeline } from './FrameTimeline';
+
+export function VideoWorkspace({ onNavigateToAI }: { onNavigateToAI?: () => void }) {
+  const [activeTool, setActiveTool] = useState<string>('move');
+
+  return (
+    <div className="w-full h-full flex flex-col bg-[#0a0a0a]">
+      {/* Top Header / Status bar */}
+      <div className="h-14 border-b border-white/5 bg-[#111] flex items-center justify-between px-6 shrink-0">
+        <div className="flex items-center gap-4">
+          <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400">核心分割工作区</h2>
+          <div className="h-4 w-px bg-white/10"></div>
+          <span className="text-sm text-white font-mono">Autonomous_Nav_Cam_Left.mp4</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-[10px] uppercase font-medium">
+            <span className="px-2 py-0.5 rounded bg-green-500/10 text-green-400 border border-green-500/20">SAM 3 部署就绪</span>
+          </div>
+          <button className="px-4 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-md text-xs transition-colors text-white">
+            导出 JSON 标注集
+          </button>
+          <button className="px-4 py-1.5 bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium rounded-md transition-shadow shadow-lg shadow-cyan-900/20">
+            结构化归档保存
+          </button>
+        </div>
+      </div>
+
+      {/* Main Workspace Area */}
+      <div className="flex-1 flex overflow-hidden">
+        <ToolsPalette activeTool={activeTool} setActiveTool={setActiveTool} onTriggerAI={onNavigateToAI} />
+        
+        <div className="flex-1 relative flex items-center justify-center p-8 bg-[#151515] overflow-hidden">
+          <div className="relative w-full h-full bg-[#1e1e1e] border border-white/5 shadow-2xl rounded-sm">
+            <CanvasArea activeTool={activeTool} />
+          </div>
+        </div>
+        
+        <OntologyInspector />
+      </div>
+
+      {/* Bottom Timeline */}
+      <FrameTimeline />
+    </div>
+  );
+}