feat(i18n): 统一国际化系统架构,支持插件独立翻译 (#301)
* feat(i18n): 统一国际化系统架构,支持插件独立翻译 ## 主要改动 ### 核心架构 - 增强 LocaleService,支持插件命名空间翻译扩展 - 新增 editor-runtime/i18n 模块,提供 createPluginLocale/createPluginTranslator - 新增 editor-core/tokens.ts,定义 LocaleServiceToken 等服务令牌 - 改进 PluginAPI 类型安全,使用 ServiceToken<T> 替代 any ### 编辑器本地化 - 扩展 en.ts/zh.ts 翻译文件,覆盖所有 UI 组件 - 新增 es.ts 西班牙语支持 - 重构 40+ 组件使用 useLocale() hook ### 插件本地化系统 - behavior-tree-editor: 新增 locales/ 和 useBTLocale hook - material-editor: 新增 locales/ 和 useMaterialLocale hook - particle-editor: 新增 locales/ 和 useParticleLocale hook - tilemap-editor: 新增 locales/ 和 useTilemapLocale hook - ui-editor: 新增 locales/ 和 useUILocale hook ### 类型安全改进 - 修复 Debug 工具使用公共接口替代 as any - 修复 ChunkStreamingSystem 添加 forEachChunk 公共方法 - 修复 blueprint-editor 移除不必要的向后兼容代码 * fix(behavior-tree-editor): 使用 ServiceToken 模式修复服务解析 - 创建 BehaviorTreeServiceToken 遵循"谁定义接口,谁导出Token"原则 - 使用 ServiceToken.id (symbol) 注册服务到 ServiceContainer - 更新 PluginSDKRegistry.resolveService 支持 ServiceToken 检测 - BehaviorTreeEditorPanel 现在使用类型安全的 PluginAPI.resolve * fix(behavior-tree-editor): 使用 ServiceContainer.resolve 获取类注册的服务 * fix: 修复多个包的依赖和类型问题 - core: EntityDataCollector.getEntityDetails 使用 HierarchySystem 获取父实体 - ui-editor: 添加 @esengine/editor-runtime 依赖 - tilemap-editor: 添加 @esengine/editor-runtime 依赖 - particle-editor: 添加 @esengine/editor-runtime 依赖
This commit is contained in:
@@ -1,7 +1,36 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Core } from '@esengine/ecs-framework';
|
||||
import { LocaleService, type Locale } from '@esengine/editor-core';
|
||||
import { LocaleService, type TranslationParams, type LocaleInfo, type Locale } from '@esengine/editor-core';
|
||||
|
||||
// Re-export Locale type for convenience | 重新导出 Locale 类型以便使用
|
||||
export type { Locale } from '@esengine/editor-core';
|
||||
|
||||
/**
|
||||
* React Hook for internationalization
|
||||
* React 国际化 Hook
|
||||
*
|
||||
* 提供翻译函数、语言切换和语言变化监听。
|
||||
* Provides translation function, locale switching and locale change listening.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* function MyComponent() {
|
||||
* const { t, locale, changeLocale, supportedLocales } = useLocale();
|
||||
*
|
||||
* return (
|
||||
* <div>
|
||||
* <h1>{t('app.title')}</h1>
|
||||
* <p>{t('scene.savedSuccess', { name: 'MyScene' })}</p>
|
||||
* <select value={locale} onChange={(e) => changeLocale(e.target.value as Locale)}>
|
||||
* {supportedLocales.map((loc) => (
|
||||
* <option key={loc.code} value={loc.code}>{loc.nativeName}</option>
|
||||
* ))}
|
||||
* </select>
|
||||
* </div>
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function useLocale() {
|
||||
const localeService = useMemo(() => Core.services.resolve(LocaleService), []);
|
||||
const [locale, setLocale] = useState<Locale>(() => localeService.getCurrentLocale());
|
||||
@@ -14,17 +43,44 @@ export function useLocale() {
|
||||
return unsubscribe;
|
||||
}, [localeService]);
|
||||
|
||||
const t = useCallback((key: string, fallback?: string) => {
|
||||
return localeService.t(key, fallback);
|
||||
}, [localeService]);
|
||||
/**
|
||||
* 翻译函数
|
||||
* Translation function
|
||||
*
|
||||
* @param key - 翻译键 | Translation key
|
||||
* @param params - 可选参数,用于替换 {{key}} | Optional params for {{key}} substitution
|
||||
* @param fallback - 回退文本 | Fallback text
|
||||
*/
|
||||
const t = useCallback(
|
||||
(key: string, params?: TranslationParams, fallback?: string) => {
|
||||
return localeService.t(key, params, fallback);
|
||||
},
|
||||
[localeService]
|
||||
);
|
||||
|
||||
const changeLocale = useCallback((newLocale: Locale) => {
|
||||
localeService.setLocale(newLocale);
|
||||
/**
|
||||
* 切换语言
|
||||
* Change locale
|
||||
*/
|
||||
const changeLocale = useCallback(
|
||||
(newLocale: Locale) => {
|
||||
localeService.setLocale(newLocale);
|
||||
},
|
||||
[localeService]
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取支持的语言列表
|
||||
* Get supported locales
|
||||
*/
|
||||
const supportedLocales: readonly LocaleInfo[] = useMemo(() => {
|
||||
return localeService.getSupportedLocales();
|
||||
}, [localeService]);
|
||||
|
||||
return {
|
||||
locale,
|
||||
t,
|
||||
changeLocale
|
||||
changeLocale,
|
||||
supportedLocales
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user