CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): 添加插件多语言支持

Browse Source
This commit is contained in:
YHH
2025-10-28 17:19:28 +08:00
parent fb4316aeb9
commit fc042bb7d9
9 changed files with 441 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/editor-app/src/App.tsx
View File

@@ -513,6 +513,21 @@ function App() {
const handleLocaleChange = () => {
const newLocale = locale === 'en' ? 'zh' : 'en';
changeLocale(newLocale);
// 通知所有已加载的插件更新语言
if (pluginManager) {
const allPlugins = pluginManager.getAllEditorPlugins();
allPlugins.forEach(plugin => {
if (plugin.setLocale) {
plugin.setLocale(newLocale);
}
});
// 通过 MessageHub 通知需要重新获取节点模板
if (messageHub) {
messageHub.publish('locale:changed', { locale: newLocale });
}
}
};
const handleToggleDevtools = async () => {
@@ -716,6 +731,21 @@ function App() {
<PluginManagerWindow
pluginManager={pluginManager}
onClose={() => setShowPluginManager(false)}
locale={locale}
onOpen={() => {
// 同步所有插件的语言状态
const allPlugins = pluginManager.getAllEditorPlugins();
allPlugins.forEach(plugin => {
if (plugin.setLocale) {
plugin.setLocale(locale);
}
});
}}
onRefresh={async () => {
if (currentProjectPath && pluginManager) {
await pluginLoaderRef.current.loadProjectPlugins(currentProjectPath, pluginManager);
}
}}
/>
)}
@@ -752,6 +782,11 @@ function App() {
onClose={() => setShowPluginGenerator(false)}
projectPath={currentProjectPath}
locale={locale}
onSuccess={async () => {
if (currentProjectPath && pluginManager) {
await pluginLoaderRef.current.loadProjectPlugins(currentProjectPath, pluginManager);
}
}}
/>
)}

69
packages/editor-app/src/components/BehaviorTreeNodePalette.tsx
View File

@@ -1,5 +1,7 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { NodeTemplates, NodeTemplate } from '@esengine/behavior-tree';
import { Core } from '@esengine/ecs-framework';
import { EditorPluginManager, MessageHub } from '@esengine/editor-core';
import { NodeIcon } from './NodeIcon';
interface BehaviorTreeNodePaletteProps {
@@ -15,7 +17,70 @@ export const BehaviorTreeNodePalette: React.FC<BehaviorTreeNodePaletteProps> = (
onNodeSelect
}) => {
const [selectedCategory, setSelectedCategory] = useState<string>('all');
const allTemplates = NodeTemplates.getAllTemplates();
const [allTemplates, setAllTemplates] = useState<NodeTemplate[]>([]);
// 获取所有节点模板（包括插件提供的）
const loadAllTemplates = () => {
console.log('[BehaviorTreeNodePalette] 开始加载节点模板');
try {
const pluginManager = Core.services.resolve(EditorPluginManager);
const allPlugins = pluginManager.getAllEditorPlugins();
console.log('[BehaviorTreeNodePalette] 找到插件数量:', allPlugins.length);
// 合并所有插件的节点模板
const templates: NodeTemplate[] = [];
for (const plugin of allPlugins) {
if (plugin.getNodeTemplates) {
console.log('[BehaviorTreeNodePalette] 从插件获取模板:', plugin.name);
const pluginTemplates = plugin.getNodeTemplates();
console.log('[BehaviorTreeNodePalette] 插件提供的模板数量:', pluginTemplates.length);
if (pluginTemplates.length > 0) {
console.log('[BehaviorTreeNodePalette] 第一个模板:', pluginTemplates[0].displayName);
}
templates.push(...pluginTemplates);
}
}
// 如果没有插件提供模板，回退到装饰器注册的模板
if (templates.length === 0) {
console.log('[BehaviorTreeNodePalette] 没有插件提供模板，使用默认模板');
templates.push(...NodeTemplates.getAllTemplates());
}
console.log('[BehaviorTreeNodePalette] 总共加载了', templates.length, '个模板');
setAllTemplates(templates);
} catch (error) {
console.error('[BehaviorTreeNodePalette] 加载模板失败:', error);
// 如果无法访问插件管理器，使用默认模板
setAllTemplates(NodeTemplates.getAllTemplates());
}
};
// 初始加载
useEffect(() => {
loadAllTemplates();
}, []);
// 监听语言变化事件
useEffect(() => {
try {
const messageHub = Core.services.resolve(MessageHub);
console.log('[BehaviorTreeNodePalette] 订阅 locale:changed 事件');
const unsubscribe = messageHub.subscribe('locale:changed', (data: any) => {
console.log('[BehaviorTreeNodePalette] 收到 locale:changed 事件:', data);
// 语言变化时重新加载模板
loadAllTemplates();
});
return () => {
console.log('[BehaviorTreeNodePalette] 取消订阅 locale:changed 事件');
unsubscribe();
};
} catch (error) {
console.error('[BehaviorTreeNodePalette] 订阅事件失败:', error);
// 如果无法访问 MessageHub，忽略
}
}, []);
// 按类别分组（排除根节点类别）
const categories = ['all', ...new Set(allTemplates

21
packages/editor-app/src/components/PluginGeneratorWindow.tsx
View File

@@ -7,9 +7,10 @@ interface PluginGeneratorWindowProps {
onClose: () => void;
projectPath: string | null;
locale: string;
onSuccess?: () => Promise<void>;
}
export function PluginGeneratorWindow({ onClose, projectPath, locale }: PluginGeneratorWindowProps) {
export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess }: PluginGeneratorWindowProps) {
const [pluginName, setPluginName] = useState('');
const [pluginVersion, setPluginVersion] = useState('1.0.0');
const [outputPath, setOutputPath] = useState(projectPath ? `${projectPath}/plugins` : '');
@@ -107,10 +108,22 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale }: PluginGe
});
if (!response.ok) {
throw new Error('Failed to generate plugin');
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to generate plugin');
}
const result = await response.json();
alert(t('success'));
if (result.path) {
await TauriAPI.showInFolder(result.path);
}
if (onSuccess) {
await onSuccess();
}
onClose();
} catch (error) {
console.error('Failed to generate plugin:', error);
@@ -121,8 +134,8 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale }: PluginGe
};
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content plugin-generator-window" onClick={e => e.stopPropagation()}>
<div className="modal-overlay">
<div className="modal-content plugin-generator-window">
<div className="modal-header">
<h2>{t('title')}</h2>
<button className="close-btn" onClick={onClose}>

164
packages/editor-app/src/components/PluginManagerWindow.tsx
View File

@@ -1,12 +1,15 @@
import { useState, useEffect } from 'react';
import { EditorPluginManager, IEditorPluginMetadata, EditorPluginCategory } from '@esengine/editor-core';
import * as LucideIcons from 'lucide-react';
import { Package, CheckCircle, XCircle, Search, Grid, List, ChevronDown, ChevronRight, X } from 'lucide-react';
import { Package, CheckCircle, XCircle, Search, Grid, List, ChevronDown, ChevronRight, X, RefreshCw } from 'lucide-react';
import '../styles/PluginManagerWindow.css';
interface PluginManagerWindowProps {
pluginManager: EditorPluginManager;
onClose: () => void;
onRefresh?: () => Promise<void>;
onOpen?: () => void;
locale: string;
}
const categoryIcons: Record<EditorPluginCategory, string> = {
@@ -17,31 +20,106 @@ const categoryIcons: Record<EditorPluginCategory, string> = {
[EditorPluginCategory.ImportExport]: 'Package'
};
const categoryNames: Record<EditorPluginCategory, string> = {
[EditorPluginCategory.Tool]: 'Tools',
[EditorPluginCategory.Window]: 'Windows',
[EditorPluginCategory.Inspector]: 'Inspectors',
[EditorPluginCategory.System]: 'System',
[EditorPluginCategory.ImportExport]: 'Import/Export'
};
export function PluginManagerWindow({ pluginManager, onClose, onRefresh, onOpen, locale }: PluginManagerWindowProps) {
const t = (key: string) => {
const translations: Record<string, Record<string, string>> = {
zh: {
title: '插件管理器',
searchPlaceholder: '搜索插件...',
enabled: '已启用',
disabled: '已禁用',
enable: '启用',
disable: '禁用',
enablePlugin: '启用插件',
disablePlugin: '禁用插件',
refresh: '刷新',
refreshPluginList: '刷新插件列表',
close: '关闭',
listView: '列表视图',
gridView: '网格视图',
noPlugins: '未安装插件',
installed: '安装于',
categoryTools: '工具',
categoryWindows: '窗口',
categoryInspectors: '检查器',
categorySystem: '系统',
categoryImportExport: '导入/导出'
},
en: {
title: 'Plugin Manager',
searchPlaceholder: 'Search plugins...',
enabled: 'Enabled',
disabled: 'Disabled',
enable: 'Enable',
disable: 'Disable',
enablePlugin: 'Enable plugin',
disablePlugin: 'Disable plugin',
refresh: 'Refresh',
refreshPluginList: 'Refresh plugin list',
close: 'Close',
listView: 'List view',
gridView: 'Grid view',
noPlugins: 'No plugins installed',
installed: 'Installed',
categoryTools: 'Tools',
categoryWindows: 'Windows',
categoryInspectors: 'Inspectors',
categorySystem: 'System',
categoryImportExport: 'Import/Export'
}
};
return translations[locale]?.[key] || translations.en?.[key] || key;
};
export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWindowProps) {
const getCategoryName = (category: EditorPluginCategory): string => {
const categoryKeys: Record<EditorPluginCategory, string> = {
[EditorPluginCategory.Tool]: 'categoryTools',
[EditorPluginCategory.Window]: 'categoryWindows',
[EditorPluginCategory.Inspector]: 'categoryInspectors',
[EditorPluginCategory.System]: 'categorySystem',
[EditorPluginCategory.ImportExport]: 'categoryImportExport'
};
return t(categoryKeys[category]);
};
const [plugins, setPlugins] = useState<IEditorPluginMetadata[]>([]);
const [filter, setFilter] = useState('');
const [viewMode, setViewMode] = useState<'grid' | 'list'>('list');
const [expandedCategories, setExpandedCategories] = useState<Set<EditorPluginCategory>>(
new Set(Object.values(EditorPluginCategory))
);
const [isRefreshing, setIsRefreshing] = useState(false);
const updatePluginList = () => {
const allPlugins = pluginManager.getAllPluginMetadata();
setPlugins(allPlugins);
};
useEffect(() => {
const updatePlugins = () => {
const allPlugins = pluginManager.getAllPluginMetadata();
setPlugins(allPlugins);
};
updatePlugins();
if (onOpen) {
onOpen();
}
updatePluginList();
}, [pluginManager]);
// 监听 locale 变化，重新获取插件列表（以刷新插件的 displayName 和 description）
useEffect(() => {
updatePluginList();
}, [locale]);
const handleRefresh = async () => {
if (!onRefresh || isRefreshing) return;
setIsRefreshing(true);
try {
await onRefresh();
updatePluginList();
} catch (error) {
console.error('Failed to refresh plugins:', error);
} finally {
setIsRefreshing(false);
}
};
const togglePlugin = async (name: string, enabled: boolean) => {
try {
if (enabled) {
@@ -102,7 +180,7 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
<button
className={`plugin-toggle ${plugin.enabled ? 'enabled' : 'disabled'}`}
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
title={plugin.enabled ? t('disablePlugin') : t('enablePlugin')}
>
{plugin.enabled ? <CheckCircle size={18} /> : <XCircle size={18} />}
</button>
@@ -116,11 +194,11 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
const CategoryIcon = (LucideIcons as any)[categoryIcons[plugin.category]];
return CategoryIcon ? <CategoryIcon size={14} style={{ marginRight: '4px' }} /> : null;
})()}
{categoryNames[plugin.category]}
{getCategoryName(plugin.category)}
</span>
{plugin.installedAt && (
<span className="plugin-card-installed">
Installed: {new Date(plugin.installedAt).toLocaleDateString()}
{t('installed')}: {new Date(plugin.installedAt).toLocaleDateString()}
</span>
)}
</div>
@@ -146,17 +224,17 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
</div>
<div className="plugin-list-status">
{plugin.enabled ? (
<span className="status-badge enabled">Enabled</span>
<span className="status-badge enabled">{t('enabled')}</span>
) : (
<span className="status-badge disabled">Disabled</span>
<span className="status-badge disabled">{t('disabled')}</span>
)}
</div>
<button
className="plugin-list-toggle"
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
title={plugin.enabled ? t('disablePlugin') : t('enablePlugin')}
>
{plugin.enabled ? 'Disable' : 'Enable'}
{plugin.enabled ? t('disable') : t('enable')}
</button>
</div>
);
@@ -168,9 +246,9 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
<div className="plugin-manager-header">
<div className="plugin-manager-title">
<Package size={20} />
<h2>Plugin Manager</h2>
<h2>{t('title')}</h2>
</div>
<button className="plugin-manager-close" onClick={onClose} title="Close">
<button className="plugin-manager-close" onClick={onClose} title={t('close')}>
<X size={20} />
</button>
</div>
@@ -181,7 +259,7 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
<Search size={14} />
<input
type="text"
placeholder="Search plugins..."
placeholder={t('searchPlaceholder')}
value={filter}
onChange={(e) => setFilter(e.target.value)}
/>
@@ -191,25 +269,49 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
<div className="plugin-stats">
<span className="stat-item enabled">
<CheckCircle size={14} />
{enabledCount} enabled
{enabledCount} {t('enabled')}
</span>
<span className="stat-item disabled">
<XCircle size={14} />
{disabledCount} disabled
{disabledCount} {t('disabled')}
</span>
</div>
{onRefresh && (
<button
className="plugin-refresh-btn"
onClick={handleRefresh}
disabled={isRefreshing}
title={t('refreshPluginList')}
style={{
padding: '6px 12px',
display: 'flex',
alignItems: 'center',
gap: '6px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '4px',
color: '#fff',
cursor: isRefreshing ? 'not-allowed' : 'pointer',
fontSize: '12px',
opacity: isRefreshing ? 0.6 : 1
}}
>
<RefreshCw size={14} className={isRefreshing ? 'spinning' : ''} />
{t('refresh')}
</button>
)}
<div className="plugin-view-mode">
<button
className={viewMode === 'list' ? 'active' : ''}
onClick={() => setViewMode('list')}
title="List view"
title={t('listView')}
>
<List size={14} />
</button>
<button
className={viewMode === 'grid' ? 'active' : ''}
onClick={() => setViewMode('grid')}
title="Grid view"
title={t('gridView')}
>
<Grid size={14} />
</button>
@@ -221,7 +323,7 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
{plugins.length === 0 ? (
<div className="plugin-empty">
<Package size={48} />
<p>No plugins installed</p>
<p>{t('noPlugins')}</p>
</div>
) : (
<div className="plugin-categories">
@@ -244,7 +346,7 @@ export function PluginManagerWindow({ pluginManager, onClose }: PluginManagerWin
return CategoryIcon ? <CategoryIcon size={16} /> : null;
})()}
</span>
<span className="plugin-category-name">{categoryNames[cat]}</span>
<span className="plugin-category-name">{getCategoryName(cat)}</span>
<span className="plugin-category-count">
{categoryPlugins.length}
</span>

12
packages/editor-app/src/services/PluginLoader.ts
View File

@@ -59,8 +59,12 @@ export class PluginLoader {
const packageJson: PluginPackageJson = JSON.parse(packageJsonContent);
if (this.loadedPluginNames.has(packageJson.name)) {
console.log(`[PluginLoader] Plugin ${packageJson.name} already loaded`);
return;
try {
await pluginManager.uninstallEditor(packageJson.name);
this.loadedPluginNames.delete(packageJson.name);
} catch (error) {
console.error(`[PluginLoader] Failed to uninstall existing plugin ${packageJson.name}:`, error);
}
}
let entryPoint = 'src/index.ts';
@@ -89,7 +93,9 @@ export class PluginLoader {
// 移除开头的 ./
entryPoint = entryPoint.replace(/^\.\//, '');
const moduleUrl = `/@user-project/plugins/${pluginDirName}/${entryPoint}`;
// 添加时间戳参数强制重新加载模块（避免缓存）
const timestamp = Date.now();
const moduleUrl = `/@user-project/plugins/${pluginDirName}/${entryPoint}?t=${timestamp}`;
console.log(`[PluginLoader] Loading plugin from: ${moduleUrl}`);