可动态识别属性

packages/editor-app/src/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Core, Scene } from '@esengine/ecs-framework';
-import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, PropertyMetadataService, ProjectService, ComponentDiscoveryService, ComponentLoaderService } from '@esengine/editor-core';
+import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, ComponentLoaderService, PropertyMetadataService } from '@esengine/editor-core';
 import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
 import { StartupPage } from './components/StartupPage';
 import { SceneHierarchy } from './components/SceneHierarchy';
@@ -8,11 +8,9 @@ import { EntityInspector } from './components/EntityInspector';
 import { AssetBrowser } from './components/AssetBrowser';
 import { DockContainer, DockablePanel } from './components/DockContainer';
 import { TauriAPI } from './api/tauri';
-import { TransformComponent } from './example-components/TransformComponent';
-import { SpriteComponent } from './example-components/SpriteComponent';
-import { RigidBodyComponent } from './example-components/RigidBodyComponent';
 import { useLocale } from './hooks/useLocale';
 import { en, zh } from './locales';
+import { Plus, Trash2, Loader2, Globe } from 'lucide-react';
 import './styles/App.css';
 
 const coreInstance = Core.create({ debug: true });
@@ -22,36 +20,6 @@ localeService.registerTranslations('en', en);
 localeService.registerTranslations('zh', zh);
 Core.services.registerInstance(LocaleService, localeService);
 
-const propertyMetadata = new PropertyMetadataService();
-Core.services.registerInstance(PropertyMetadataService, propertyMetadata);
-
-propertyMetadata.register(TransformComponent, {
-  properties: {
-    x: { type: 'number', label: 'X Position' },
-    y: { type: 'number', label: 'Y Position' },
-    rotation: { type: 'number', label: 'Rotation', min: 0, max: 360 },
-    scaleX: { type: 'number', label: 'Scale X', min: 0, step: 0.1 },
-    scaleY: { type: 'number', label: 'Scale Y', min: 0, step: 0.1 }
-  }
-});
-
-propertyMetadata.register(SpriteComponent, {
-  properties: {
-    texturePath: { type: 'string', label: 'Texture Path' },
-    color: { type: 'color', label: 'Tint Color' },
-    visible: { type: 'boolean', label: 'Visible' }
-  }
-});
-
-propertyMetadata.register(RigidBodyComponent, {
-  properties: {
-    mass: { type: 'number', label: 'Mass', min: 0, step: 0.1 },
-    friction: { type: 'number', label: 'Friction', min: 0, max: 1, step: 0.01 },
-    restitution: { type: 'number', label: 'Restitution', min: 0, max: 1, step: 0.01 },
-    isDynamic: { type: 'boolean', label: 'Dynamic' }
-  }
-});
-
 function App() {
   const [initialized, setInitialized] = useState(false);
   const [projectLoaded, setProjectLoaded] = useState(false);
@@ -66,6 +34,8 @@ function App() {
   useEffect(() => {
     const initializeEditor = async () => {
       try {
+        (window as any).__ECS_FRAMEWORK__ = await import('@esengine/ecs-framework');
+
         const editorScene = new Scene();
         Core.setScene(editorScene);
 
@@ -77,27 +47,7 @@ function App() {
         const projectService = new ProjectService(messageHub);
         const componentDiscovery = new ComponentDiscoveryService(messageHub);
         const componentLoader = new ComponentLoaderService(messageHub, componentRegistry);
-
-        componentRegistry.register({
-          name: 'Transform',
-          type: TransformComponent,
-          category: 'Transform',
-          description: 'Position, rotation and scale'
-        });
-
-        componentRegistry.register({
-          name: 'Sprite',
-          type: SpriteComponent,
-          category: 'Rendering',
-          description: 'Sprite renderer'
-        });
-
-        componentRegistry.register({
-          name: 'RigidBody',
-          type: RigidBodyComponent,
-          category: 'Physics',
-          description: 'Physics body'
-        });
+        const propertyMetadata = new PropertyMetadataService();
 
         Core.services.registerInstance(UIRegistry, uiRegistry);
         Core.services.registerInstance(MessageHub, messageHub);
@@ -107,6 +57,7 @@ function App() {
         Core.services.registerInstance(ProjectService, projectService);
         Core.services.registerInstance(ComponentDiscoveryService, componentDiscovery);
         Core.services.registerInstance(ComponentLoaderService, componentLoader);
+        Core.services.registerInstance(PropertyMetadataService, propertyMetadata);
 
         const pluginMgr = new EditorPluginManager();
         pluginMgr.initialize(coreInstance, Core.services);
@@ -145,6 +96,13 @@ function App() {
       }
 
       await projectService.openProject(projectPath);
+
+      await fetch('/@user-project-set-path', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: projectPath })
+      });
+
       setStatus('Scanning components...');
 
       const componentsPath = projectService.getComponentsPath();
@@ -158,9 +116,14 @@ function App() {
 
         setStatus(`Loading ${componentInfos.length} components...`);
 
-        await loaderService.loadComponents(componentInfos);
+        const modulePathTransform = (filePath: string) => {
+          const relativePath = filePath.replace(projectPath, '').replace(/\\/g, '/');
+          return `/@user-project${relativePath}`;
+        };
 
-        setStatus(t('header.status.projectOpened') + ` (${componentInfos.length} components loaded)`);
+        await loaderService.loadComponents(componentInfos, modulePathTransform);
+
+        setStatus(t('header.status.projectOpened') + ` (${componentInfos.length} components registered)`);
       } else {
         setStatus(t('header.status.projectOpened'));
       }
@@ -202,7 +165,7 @@ function App() {
 
   useEffect(() => {
     if (projectLoaded && entityStore && messageHub) {
-      const defaultPanels: DockablePanel[] = [
+      setPanels([
         {
           id: 'scene-hierarchy',
           title: locale === 'zh' ? '场景层级' : 'Scene Hierarchy',
@@ -252,14 +215,22 @@ function App() {
           ),
           closable: false
         }
-      ];
-      setPanels(defaultPanels);
+      ]);
     }
   }, [projectLoaded, entityStore, messageHub, locale, currentProjectPath, t]);
 
+  const handlePanelMove = (panelId: string, newPosition: any) => {
+    setPanels(prevPanels =>
+      prevPanels.map(panel =>
+        panel.id === panelId ? { ...panel, position: newPosition } : panel
+      )
+    );
+  };
+
   if (!initialized) {
     return (
       <div className="editor-loading">
+        <Loader2 size={32} className="animate-spin" />
         <h2>Loading Editor...</h2>
       </div>
     );
@@ -282,20 +253,22 @@ function App() {
         <h1>{t('app.title')}</h1>
         <div className="header-toolbar">
           <button onClick={handleCreateEntity} disabled={!initialized} className="toolbar-btn">
+            <Plus size={14} />
             {t('header.toolbar.createEntity')}
           </button>
           <button onClick={handleDeleteEntity} disabled={!entityStore?.getSelectedEntity()} className="toolbar-btn">
+            <Trash2 size={14} />
             {t('header.toolbar.deleteEntity')}
           </button>
           <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
-            {locale === 'en' ? '中' : 'EN'}
+            <Globe size={14} />
           </button>
         </div>
         <span className="status">{status}</span>
       </div>
 
       <div className="editor-content">
-        <DockContainer panels={panels} />
+        <DockContainer panels={panels} onPanelMove={handlePanelMove} />
       </div>
 
       <div className="editor-footer">