组件注册与添加

packages/editor-app/src/components/EntityInspector.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
-import { Entity } from '@esengine/ecs-framework';
-import { EntityStoreService, MessageHub } from '@esengine/editor-core';
+import { Entity, Core } from '@esengine/ecs-framework';
+import { EntityStoreService, MessageHub, ComponentRegistry } from '@esengine/editor-core';
+import { AddComponent } from './AddComponent';
 import '../styles/EntityInspector.css';
 
 interface EntityInspectorProps {
@@ -10,10 +11,12 @@ interface EntityInspectorProps {
 
 export function EntityInspector({ entityStore, messageHub }: EntityInspectorProps) {
   const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
+  const [showAddComponent, setShowAddComponent] = useState(false);
 
   useEffect(() => {
     const handleSelection = (data: { entity: Entity | null }) => {
       setSelectedEntity(data.entity);
+      setShowAddComponent(false);
     };
 
     const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
@@ -23,6 +26,32 @@ export function EntityInspector({ entityStore, messageHub }: EntityInspectorProp
     };
   }, [messageHub]);
 
+  const handleAddComponent = (componentName: string) => {
+    if (!selectedEntity) return;
+
+    const componentRegistry = Core.services.resolve(ComponentRegistry);
+    if (!componentRegistry) {
+      console.error('ComponentRegistry not found');
+      return;
+    }
+
+    const component = componentRegistry.createInstance(componentName);
+    if (component) {
+      selectedEntity.addComponent(component);
+      messageHub.publish('component:added', { entity: selectedEntity, component });
+      setShowAddComponent(false);
+    }
+  };
+
+  const handleRemoveComponent = (index: number) => {
+    if (!selectedEntity) return;
+    const component = selectedEntity.components[index];
+    if (component) {
+      selectedEntity.removeComponent(component);
+      messageHub.publish('component:removed', { entity: selectedEntity, component });
+    }
+  };
+
   if (!selectedEntity) {
     return (
       <div className="entity-inspector">
@@ -63,7 +92,16 @@ export function EntityInspector({ entityStore, messageHub }: EntityInspectorProp
         </div>
 
         <div className="inspector-section">
-          <div className="section-header">Components ({components.length})</div>
+          <div className="section-header">
+            <span>Components ({components.length})</span>
+            <button
+              className="add-component-btn"
+              onClick={() => setShowAddComponent(true)}
+              title="Add Component"
+            >
+              +
+            </button>
+          </div>
           <div className="section-content">
             {components.length === 0 ? (
               <div className="empty-state">No components</div>
@@ -73,6 +111,13 @@ export function EntityInspector({ entityStore, messageHub }: EntityInspectorProp
                   <li key={index} className="component-item">
                     <span className="component-icon">🔧</span>
                     <span className="component-name">{component.constructor.name}</span>
+                    <button
+                      className="remove-component-btn"
+                      onClick={() => handleRemoveComponent(index)}
+                      title="Remove Component"
+                    >
+                      ×
+                    </button>
                   </li>
                 ))}
               </ul>
@@ -80,6 +125,15 @@ export function EntityInspector({ entityStore, messageHub }: EntityInspectorProp
           </div>
         </div>
       </div>
+
+      {showAddComponent && selectedEntity && (
+        <AddComponent
+          entity={selectedEntity}
+          componentRegistry={Core.services.resolve(ComponentRegistry)}
+          onAdd={handleAddComponent}
+          onCancel={() => setShowAddComponent(false)}
+        />
+      )}
     </div>
   );
 }