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

src/components/OntologyInspector.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Layers, ChevronDown, Tag, Eye } from 'lucide-react';
+
+export function OntologyInspector() {
+  const ontology = [
+    { id: '1', label: 'vehicle_four_wheels', color: 'bg-cyan-500', count: 4, zIndex: 60 },
+    { id: '2', label: 'pedestrian', color: 'bg-purple-500', count: 2, zIndex: 70 },
+    { id: '3', label: 'road_surface', color: 'bg-gray-500', count: 1, zIndex: 10 },
+    { id: '4', label: 'traffic_sign', color: 'bg-green-500', count: 3, zIndex: 50 },
+  ];
+
+  return (
+    <div className="w-60 bg-[#0d0d0d] flex flex-col border-l border-white/5 shrink-0 z-10 overflow-hidden">
+      <div className="h-14 border-b border-white/5 flex items-center px-4 shrink-0 font-medium text-[10px] uppercase tracking-widest text-gray-500">
+        <Layers size={14} className="mr-2 text-gray-400" />
+        本体论与属性分类管理树
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
+        {/* Frame Metadata */}
+        <div>
+          <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">局部帧元数据</h3>
+          <div className="bg-white/5 rounded p-2 text-[11px] space-y-2 font-mono text-gray-300">
+            <div className="flex justify-between">
+               <span className="text-gray-500">物理分辨率:</span> <span>1920x1080</span>
+            </div>
+            <div className="flex justify-between">
+               <span className="text-gray-500">绝对时间码:</span> <span>00:01:24.16</span>
+            </div>
+            <div className="flex justify-between">
+               <span className="text-gray-500">涵盖实体:</span> <span>10 个已实例化</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Global Priority Classes */}
+        <div>
+           <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3 flex justify-between items-center">
+             <span>语义分类树 (高度/Z-Index)</span>
+             <button className="text-cyan-400 hover:text-cyan-300"><ChevronDown size={14} /></button>
+           </h3>
+           <div className="space-y-2">
+             {ontology.sort((a,b) => b.zIndex - a.zIndex).map(cls => (
+               <div key={cls.id} className="flex flex-col gap-1">
+                 <div className="flex items-center justify-between p-2 rounded bg-white/5 hover:bg-white/10 cursor-pointer group transition-colors">
+                   <div className="flex items-center gap-2">
+                     <span className={`w-2.5 h-2.5 rounded-sm ${cls.color}`} />
+                     <span className="text-xs font-medium text-gray-200">{cls.label}</span>
+                   </div>
+                   <div className="flex items-center gap-3">
+                     <span className="text-[10px] text-gray-500 font-mono">z:{cls.zIndex}</span>
+                     <Eye size={14} className="text-gray-500 group-hover:text-gray-300" />
+                   </div>
+                 </div>
+               </div>
+             ))}
+           </div>
+        </div>
+
+        {/* Current Active Object Properties */}
+        <div className="mt-4 pt-4 border-t border-[#222]">
+           <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">特定目标实例属性追踪</h3>
+           <div className="bg-white/5 rounded-lg p-3">
+             <div className="flex items-center gap-2 mb-3">
+               <Tag size={12} className="text-cyan-400" />
+               <span className="text-xs font-semibold text-gray-200">vehicle_four_wheels</span>
+             </div>
+             <div className="space-y-3">
+               <div className="space-y-1">
+                 <label className="text-[10px] text-gray-500 uppercase">感知算法置信度</label>
+                 <div className="h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
+                    <div className="h-full bg-green-500 w-[94%]" />
+                 </div>
+                 <div className="text-[10px] font-mono text-green-500 text-right">0.9412</div>
+               </div>
+               <div className="flex items-center justify-between">
+                 <span className="text-[10px] text-gray-500 uppercase">降维点拓扑锚点:</span>
+                 <span className="text-xs font-mono text-gray-300">12 节点</span>
+               </div>
+               <button className="w-full mt-2 bg-white/5 hover:bg-white/10 border border-white/10 text-xs text-gray-300 py-1.5 rounded transition-colors">
+                 重新提取内侧中轴树骨架
+               </button>
+             </div>
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+}