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:
@@ -2,6 +2,7 @@ import { React, useRef, useEffect, useState, useMemo, Icons } from '@esengine/ed
|
||||
import type { LucideIcon } from '@esengine/editor-runtime';
|
||||
import type { NodeTemplate } from '@esengine/behavior-tree';
|
||||
import { NodeFactory } from '../../infrastructure/factories/NodeFactory';
|
||||
import { useBTLocale } from '../../hooks/useBTLocale';
|
||||
|
||||
const { Search, X, ChevronDown, ChevronRight } = Icons;
|
||||
|
||||
@@ -35,6 +36,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
onNodeSelect,
|
||||
onClose
|
||||
}) => {
|
||||
const { t } = useBTLocale();
|
||||
const selectedNodeRef = useRef<HTMLDivElement>(null);
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
|
||||
const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
|
||||
@@ -52,11 +54,12 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
})
|
||||
: allTemplates;
|
||||
|
||||
const uncategorizedLabel = t('quickCreate.uncategorized');
|
||||
const categoryGroups: CategoryGroup[] = React.useMemo(() => {
|
||||
const groups = new Map<string, NodeTemplate[]>();
|
||||
|
||||
filteredTemplates.forEach((template: NodeTemplate) => {
|
||||
const category = template.category || '未分类';
|
||||
const category = template.category || uncategorizedLabel;
|
||||
if (!groups.has(category)) {
|
||||
groups.set(category, []);
|
||||
}
|
||||
@@ -68,7 +71,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
templates,
|
||||
isExpanded: searchTextLower ? true : expandedCategories.has(category)
|
||||
})).sort((a, b) => a.category.localeCompare(b.category));
|
||||
}, [filteredTemplates, expandedCategories, searchTextLower]);
|
||||
}, [filteredTemplates, expandedCategories, searchTextLower, uncategorizedLabel]);
|
||||
|
||||
const flattenedTemplates = React.useMemo(() => {
|
||||
return categoryGroups.flatMap((group) =>
|
||||
@@ -90,10 +93,10 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (allTemplates.length > 0 && expandedCategories.size === 0) {
|
||||
const categories = new Set(allTemplates.map((t) => t.category || '未分类'));
|
||||
const categories = new Set(allTemplates.map((tmpl) => tmpl.category || uncategorizedLabel));
|
||||
setExpandedCategories(categories);
|
||||
}
|
||||
}, [allTemplates, expandedCategories.size]);
|
||||
}, [allTemplates, expandedCategories.size, uncategorizedLabel]);
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldAutoScroll && selectedNodeRef.current) {
|
||||
@@ -161,7 +164,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
<Search size={16} style={{ color: '#999', flexShrink: 0 }} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索节点..."
|
||||
placeholder={t('quickCreate.searchPlaceholder')}
|
||||
autoFocus
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
@@ -229,7 +232,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
|
||||
color: '#666',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
未找到匹配的节点
|
||||
{t('quickCreate.noMatchingNodes')}
|
||||
</div>
|
||||
) : (
|
||||
categoryGroups.map((group) => {
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
} from '@esengine/editor-runtime';
|
||||
import { useBehaviorTreeDataStore } from '../../stores';
|
||||
import { BehaviorTreeEditor } from '../BehaviorTreeEditor';
|
||||
import { BehaviorTreeService } from '../../services/BehaviorTreeService';
|
||||
import { BehaviorTreeServiceToken } from '../../tokens';
|
||||
import { showToast } from '../../services/NotificationService';
|
||||
import { Node as BehaviorTreeNode } from '../../domain/models/Node';
|
||||
import { BehaviorTree } from '../../domain/models/BehaviorTree';
|
||||
@@ -171,7 +171,7 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
|
||||
filePath = selected;
|
||||
}
|
||||
|
||||
const service = PluginAPI.resolve<BehaviorTreeService>(BehaviorTreeService);
|
||||
const service = PluginAPI.resolve(BehaviorTreeServiceToken);
|
||||
await service.saveToFile(filePath);
|
||||
|
||||
setCurrentFilePath(filePath);
|
||||
@@ -205,7 +205,7 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
|
||||
if (!selected) return;
|
||||
|
||||
const filePath = selected as string;
|
||||
const service = PluginAPI.resolve<BehaviorTreeService>(BehaviorTreeService);
|
||||
const service = PluginAPI.resolve(BehaviorTreeServiceToken);
|
||||
await service.loadFromFile(filePath);
|
||||
|
||||
setCurrentFilePath(filePath);
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { React, Icons } from '@esengine/editor-runtime';
|
||||
import { useBTLocale } from '../../hooks/useBTLocale';
|
||||
|
||||
const { Play, Pause, Square, SkipForward, Undo, Redo, ZoomIn, Save, FolderOpen, Download, Clipboard, Home } = Icons;
|
||||
|
||||
@@ -43,6 +44,8 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
onCopyToClipboard,
|
||||
onGoToRoot
|
||||
}) => {
|
||||
const { t } = useBTLocale();
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
@@ -81,7 +84,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="打开文件 (Ctrl+O)"
|
||||
title={t('toolbar.openFile')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#3c3c3c'}
|
||||
>
|
||||
@@ -104,7 +107,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title={`保存 (Ctrl+S)${hasUnsavedChanges ? ' - 有未保存的更改' : ''}`}
|
||||
title={hasUnsavedChanges ? t('toolbar.saveUnsaved') : t('toolbar.save')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = hasUnsavedChanges ? '#1d4ed8' : '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = hasUnsavedChanges ? '#2563eb' : '#3c3c3c'}
|
||||
>
|
||||
@@ -127,7 +130,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="导出运行时配置"
|
||||
title={t('toolbar.export')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#3c3c3c'}
|
||||
>
|
||||
@@ -150,7 +153,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="复制JSON到剪贴板"
|
||||
title={t('toolbar.copyToClipboard')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#3c3c3c'}
|
||||
>
|
||||
@@ -192,7 +195,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
gap: '4px',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="运行 (Play)"
|
||||
title={t('toolbar.run')}
|
||||
onMouseEnter={(e) => {
|
||||
if (executionMode !== 'running') {
|
||||
e.currentTarget.style.backgroundColor = '#15803d';
|
||||
@@ -223,7 +226,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title={executionMode === 'paused' ? '继续' : '暂停'}
|
||||
title={executionMode === 'paused' ? t('toolbar.resume') : t('toolbar.pause')}
|
||||
onMouseEnter={(e) => {
|
||||
if (executionMode !== 'idle') {
|
||||
e.currentTarget.style.backgroundColor = '#d97706';
|
||||
@@ -254,7 +257,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="停止"
|
||||
title={t('toolbar.stop')}
|
||||
onMouseEnter={(e) => {
|
||||
if (executionMode !== 'idle') {
|
||||
e.currentTarget.style.backgroundColor = '#b91c1c';
|
||||
@@ -285,7 +288,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="单步执行"
|
||||
title={t('toolbar.step')}
|
||||
onMouseEnter={(e) => {
|
||||
if (executionMode === 'idle' || executionMode === 'paused') {
|
||||
e.currentTarget.style.backgroundColor = '#2563eb';
|
||||
@@ -324,7 +327,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
gap: '4px',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="重置视图 (滚轮缩放, Alt+拖动平移)"
|
||||
title={t('toolbar.resetView')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#3c3c3c'}
|
||||
>
|
||||
@@ -362,7 +365,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="撤销 (Ctrl+Z)"
|
||||
title={t('toolbar.undo')}
|
||||
onMouseEnter={(e) => {
|
||||
if (canUndo) {
|
||||
e.currentTarget.style.backgroundColor = '#4a4a4a';
|
||||
@@ -392,7 +395,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
alignItems: 'center',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="重做 (Ctrl+Shift+Z / Ctrl+Y)"
|
||||
title={t('toolbar.redo')}
|
||||
onMouseEnter={(e) => {
|
||||
if (canRedo) {
|
||||
e.currentTarget.style.backgroundColor = '#4a4a4a';
|
||||
@@ -438,8 +441,8 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
color: executionMode === 'running' ? '#16a34a' :
|
||||
executionMode === 'paused' ? '#f59e0b' : '#888'
|
||||
}}>
|
||||
{executionMode === 'idle' ? 'Idle' :
|
||||
executionMode === 'running' ? 'Running' : 'Paused'}
|
||||
{executionMode === 'idle' ? t('execution.idle') :
|
||||
executionMode === 'running' ? t('execution.running') : t('execution.paused')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -465,7 +468,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
|
||||
gap: '4px',
|
||||
transition: 'all 0.15s'
|
||||
}}
|
||||
title="回到根节点"
|
||||
title={t('toolbar.goToRoot')}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#4a4a4a'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#3c3c3c'}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user