国际化系统

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 } from '@esengine/editor-core';
+import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService } from '@esengine/editor-core';
 import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
 import { SceneHierarchy } from './components/SceneHierarchy';
 import { EntityInspector } from './components/EntityInspector';
@@ -8,20 +8,29 @@ 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 './styles/App.css';
 
+// 在 App 组件外部初始化 Core 和基础服务
+Core.create({ debug: true });
+
+const localeService = new LocaleService();
+localeService.registerTranslations('en', en);
+localeService.registerTranslations('zh', zh);
+Core.services.registerInstance(LocaleService, localeService);
+
 function App() {
   const [initialized, setInitialized] = useState(false);
   const [pluginManager, setPluginManager] = useState<EditorPluginManager | null>(null);
   const [entityStore, setEntityStore] = useState<EntityStoreService | null>(null);
   const [messageHub, setMessageHub] = useState<MessageHub | null>(null);
-  const [status, setStatus] = useState('Initializing...');
+  const { t, locale, changeLocale } = useLocale();
+  const [status, setStatus] = useState(t('header.status.initializing'));
 
   useEffect(() => {
     const initializeEditor = async () => {
       try {
-        const coreInstance = Core.create({ debug: true });
-
         const editorScene = new Scene();
         Core.setScene(editorScene);
 
@@ -59,7 +68,7 @@ function App() {
         Core.services.registerInstance(ComponentRegistry, componentRegistry);
 
         const pluginMgr = new EditorPluginManager();
-        pluginMgr.initialize(coreInstance, Core.services);
+        pluginMgr.initialize(Core, Core.services);
 
         await pluginMgr.installEditor(new SceneInspectorPlugin());
 
@@ -70,18 +79,14 @@ function App() {
         setPluginManager(pluginMgr);
         setEntityStore(entityStore);
         setMessageHub(messageHub);
-        setStatus('Editor Ready');
+        setStatus(t('header.status.ready'));
       } catch (error) {
         console.error('Failed to initialize editor:', error);
-        setStatus('Initialization Failed');
+        setStatus(t('header.status.failed'));
       }
     };
 
     initializeEditor();
-
-    return () => {
-      Core.destroy();
-    };
   }, []);
 
   const handleCreateEntity = () => {
@@ -102,16 +107,24 @@ function App() {
     }
   };
 
+  const handleLocaleChange = () => {
+    const newLocale = locale === 'en' ? 'zh' : 'en';
+    changeLocale(newLocale);
+  };
+
   return (
     <div className="editor-container">
       <div className="editor-header">
-        <h1>ECS Framework Editor</h1>
+        <h1>{t('app.title')}</h1>
         <div className="header-toolbar">
           <button onClick={handleCreateEntity} disabled={!initialized} className="toolbar-btn">
-            ➕ Create Entity
+            {t('header.toolbar.createEntity')}
           </button>
           <button onClick={handleDeleteEntity} disabled={!entityStore?.getSelectedEntity()} className="toolbar-btn">
-            🗑️ Delete Entity
+            {t('header.toolbar.deleteEntity')}
+          </button>
+          <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
+            {locale === 'en' ? '中' : 'EN'}
           </button>
         </div>
         <span className="status">{status}</span>
@@ -128,13 +141,13 @@ function App() {
 
         <div className="main-content">
           <div className="viewport">
-            <h3>Viewport</h3>
-            <p>Scene viewport will appear here</p>
+            <h3>{t('viewport.title')}</h3>
+            <p>{t('viewport.placeholder')}</p>
           </div>
 
           <div className="bottom-panel">
-            <h4>Console</h4>
-            <p>Console output will appear here</p>
+            <h4>{t('console.title')}</h4>
+            <p>{t('console.placeholder')}</p>
           </div>
         </div>
 
@@ -148,9 +161,9 @@ function App() {
       </div>
 
       <div className="editor-footer">
-        <span>Plugins: {pluginManager?.getAllEditorPlugins().length ?? 0}</span>
-        <span>Entities: {entityStore?.getAllEntities().length ?? 0}</span>
-        <span>Core: {initialized ? 'Active' : 'Inactive'}</span>
+        <span>{t('footer.plugins')}: {pluginManager?.getAllEditorPlugins().length ?? 0}</span>
+        <span>{t('footer.entities')}: {entityStore?.getAllEntities().length ?? 0}</span>
+        <span>{t('footer.core')}: {initialized ? t('footer.active') : t('footer.inactive')}</span>
       </div>
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Entity } from '@esengine/ecs-framework';
 import { EntityStoreService, MessageHub } from '@esengine/editor-core';
+import { useLocale } from '../hooks/useLocale';
 import '../styles/SceneHierarchy.css';
 
 interface SceneHierarchyProps {
@@ -11,6 +12,7 @@ interface SceneHierarchyProps {
 export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps) {
   const [entities, setEntities] = useState<Entity[]>([]);
   const [selectedId, setSelectedId] = useState<number | null>(null);
+  const { t } = useLocale();
 
   useEffect(() => {
     const updateEntities = () => {
@@ -43,11 +45,11 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
   return (
     <div className="scene-hierarchy">
       <div className="hierarchy-header">
-        <h3>Scene Hierarchy</h3>
+        <h3>{t('hierarchy.title')}</h3>
       </div>
       <div className="hierarchy-content">
         {entities.length === 0 ? (
-          <div className="empty-state">No entities in scene</div>
+          <div className="empty-state">{t('hierarchy.empty')}</div>
         ) : (
           <ul className="entity-list">
             {entities.map(entity => (

packages/editor-app/src/hooks/useLocale.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+import { Core } from '@esengine/ecs-framework';
+import { LocaleService, type Locale } from '@esengine/editor-core';
+
+export function useLocale() {
+  const localeService = Core.services.resolve(LocaleService);
+  const [locale, setLocale] = useState<Locale>(localeService.getCurrentLocale());
+
+  useEffect(() => {
+    const unsubscribe = localeService.onChange((newLocale) => {
+      setLocale(newLocale);
+    });
+
+    return unsubscribe;
+  }, [localeService]);
+
+  const t = (key: string, fallback?: string) => {
+    return localeService.t(key, fallback);
+  };
+
+  const changeLocale = (newLocale: Locale) => {
+    localeService.setLocale(newLocale);
+  };
+
+  return {
+    locale,
+    t,
+    changeLocale
+  };
+}

packages/editor-app/src/locales/en.ts

@@ -0,0 +1,63 @@
+import type { Translations } from '@esengine/editor-core';
+
+export const en: Translations = {
+    app: {
+        title: 'ECS Framework Editor'
+    },
+    header: {
+        toolbar: {
+            createEntity: 'Create Entity',
+            deleteEntity: 'Delete Entity'
+        },
+        status: {
+            initializing: 'Initializing...',
+            ready: 'Editor Ready',
+            failed: 'Initialization Failed'
+        }
+    },
+    hierarchy: {
+        title: 'Scene Hierarchy',
+        empty: 'No entities',
+        loading: 'Loading...'
+    },
+    inspector: {
+        title: 'Inspector',
+        empty: 'No entity selected',
+        entityInfo: {
+            title: 'Entity Info',
+            id: 'ID',
+            name: 'Name',
+            enabled: 'Enabled',
+            yes: 'Yes',
+            no: 'No'
+        },
+        components: {
+            title: 'Components',
+            empty: 'No components',
+            add: 'Add Component',
+            remove: 'Remove'
+        }
+    },
+    addComponent: {
+        title: 'Add Component',
+        search: 'Search components...',
+        empty: 'No available components',
+        cancel: 'Cancel',
+        add: 'Add Component'
+    },
+    viewport: {
+        title: 'Viewport',
+        placeholder: 'Scene viewport will appear here'
+    },
+    console: {
+        title: 'Console',
+        placeholder: 'Console output will appear here'
+    },
+    footer: {
+        plugins: 'Plugins',
+        entities: 'Entities',
+        core: 'Core',
+        active: 'Active',
+        inactive: 'Inactive'
+    }
+};

packages/editor-app/src/locales/index.ts

@@ -0,0 +1,2 @@
+export { en } from './en';
+export { zh } from './zh';

packages/editor-app/src/locales/zh.ts

@@ -0,0 +1,63 @@
+import type { Translations } from '@esengine/editor-core';
+
+export const zh: Translations = {
+    app: {
+        title: 'ECS 框架编辑器'
+    },
+    header: {
+        toolbar: {
+            createEntity: '创建实体',
+            deleteEntity: '删除实体'
+        },
+        status: {
+            initializing: '初始化中...',
+            ready: '编辑器就绪',
+            failed: '初始化失败'
+        }
+    },
+    hierarchy: {
+        title: '场景层级',
+        empty: '无实体',
+        loading: '加载中...'
+    },
+    inspector: {
+        title: '检查器',
+        empty: '未选择实体',
+        entityInfo: {
+            title: '实体信息',
+            id: 'ID',
+            name: '名称',
+            enabled: '启用',
+            yes: '是',
+            no: '否'
+        },
+        components: {
+            title: '组件',
+            empty: '无组件',
+            add: '添加组件',
+            remove: '移除'
+        }
+    },
+    addComponent: {
+        title: '添加组件',
+        search: '搜索组件...',
+        empty: '无可用组件',
+        cancel: '取消',
+        add: '添加组件'
+    },
+    viewport: {
+        title: '视口',
+        placeholder: '场景视口将显示在这里'
+    },
+    console: {
+        title: '控制台',
+        placeholder: '控制台输出将显示在这里'
+    },
+    footer: {
+        plugins: '插件',
+        entities: '实体',
+        core: '核心',
+        active: '活跃',
+        inactive: '未激活'
+    }
+};