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

feat(editor): 优化编辑器UI和改进核心功能 (#234)

Browse Source 
* feat(editor): 优化编辑器UI和改进核心功能

* feat(editor): 优化编辑器UI和改进核心功能
This commit is contained in:
YHH
2025-11-23 21:45:10 +08:00
committed by GitHub
parent 4d95a7f044
commit 32460ac133
38 changed files with 2201 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor-app/src/components/AssetBrowser.tsx
+5 -1
View File
@@ -289,7 +289,9 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
setCurrentPath(asset.path);
loadAssets(asset.path);
} else if (asset.type === 'file') {
if (asset.extension === 'ecs' && onOpenScene) {
const ext = asset.extension?.toLowerCase();
if (ext === 'ecs' && onOpenScene) {
console.log('[AssetBrowser] Opening scene:', asset.path);
onOpenScene(asset.path);
return;
}
@@ -696,6 +698,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
messageHub={messageHub}
searchQuery={searchQuery}
showFiles={false}
onOpenScene={onOpenScene}
/>
</div>
}
@@ -817,6 +820,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
messageHub={messageHub}
searchQuery={searchQuery}
showFiles={true}
onOpenScene={onOpenScene}
/>
</div>
)}
packages/editor-app/src/components/ConsolePanel.tsx
+2 -2
View File
@@ -298,9 +298,9 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
<p>No logs to display</p>
</div>
) : (
filteredLogs.map((log) => (
filteredLogs.map((log, index) => (
<LogEntryItem
key={log.id}
key={`${log.id}-${index}`}
log={log}
onOpenJsonViewer={setJsonViewerData}
/>
packages/editor-app/src/components/FileTree.tsx
+10 -1
View File
@@ -28,6 +28,7 @@ interface FileTreeProps {
messageHub?: MessageHub;
searchQuery?: string;
showFiles?: boolean;
onOpenScene?: (scenePath: string) => void;
}
export interface FileTreeHandle {
@@ -36,7 +37,7 @@ export interface FileTreeHandle {
revealPath: (targetPath: string) => Promise<void>;
}
export const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(({ rootPath, onSelectFile, onSelectFiles, selectedPath, selectedPaths, messageHub, searchQuery, showFiles = true }, ref) => {
export const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(({ rootPath, onSelectFile, onSelectFiles, selectedPath, selectedPaths, messageHub, searchQuery, showFiles = true, onOpenScene }, ref) => {
const [tree, setTree] = useState<TreeNode[]>([]);
const [loading, setLoading] = useState(false);
const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
@@ -714,6 +715,14 @@ export const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(({ rootPath, o
const handleNodeDoubleClick = async (node: TreeNode) => {
if (node.type === 'file') {
// Handle .ecs scene files
const ext = node.name.split('.').pop()?.toLowerCase();
if (ext === 'ecs' && onOpenScene) {
console.log('[FileTree] Opening scene:', node.path);
onOpenScene(node.path);
return;
}
if (fileActionRegistry) {
const handled = await fileActionRegistry.handleDoubleClick(node.path);
if (handled) {
packages/editor-app/src/components/ProjectCreationWizard.tsx
+169
View File
@@ -0,0 +1,169 @@
import { useState } from 'react';
import { Folder, Sparkles, X } from 'lucide-react';
import '../styles/ProjectCreationWizard.css';
// 项目模板类型
interface ProjectTemplate {
id: string;
name: string;
nameZh: string;
description: string;
descriptionZh: string;
}
const templates: ProjectTemplate[] = [
{
id: 'blank',
name: 'Blank',
nameZh: '空白',
description: 'A blank project with no starter content. Perfect for starting from scratch.',
descriptionZh: '不包含任何启动内容的空白项目，适合从零开始创建。'
}
];
interface ProjectCreationWizardProps {
isOpen: boolean;
onClose: () => void;
onCreateProject: (projectName: string, projectPath: string, templateId: string) => void;
onBrowsePath: () => Promise<string | null>;
locale: string;
}
export function ProjectCreationWizard({
isOpen,
onClose,
onCreateProject,
onBrowsePath,
locale
}: ProjectCreationWizardProps) {
const [selectedTemplate, setSelectedTemplate] = useState<string>('blank');
const [projectName, setProjectName] = useState('MyProject');
const [projectPath, setProjectPath] = useState('');
const t = {
title: locale === 'zh' ? '项目浏览器' : 'Project Browser',
recentProjects: locale === 'zh' ? '最近打开的项目' : 'Recent Projects',
newProject: locale === 'zh' ? '新建项目' : 'New Project',
projectName: locale === 'zh' ? '项目名称' : 'Project Name',
projectLocation: locale === 'zh' ? '项目位置' : 'Project Location',
browse: locale === 'zh' ? '浏览...' : 'Browse...',
create: locale === 'zh' ? '创建' : 'Create',
cancel: locale === 'zh' ? '取消' : 'Cancel',
selectTemplate: locale === 'zh' ? '选择模板' : 'Select a Template',
projectSettings: locale === 'zh' ? '项目设置' : 'Project Settings',
blank: locale === 'zh' ? '空白' : 'Blank',
blankDesc: locale === 'zh' ? '不含任何代码的空白项目。' : 'A blank project with no code.'
};
if (!isOpen) return null;
const currentTemplate = templates.find(t => t.id === selectedTemplate);
const handleBrowse = async () => {
const path = await onBrowsePath();
if (path) {
setProjectPath(path);
}
};
const handleCreate = () => {
if (projectName && projectPath) {
onCreateProject(projectName, projectPath, selectedTemplate);
onClose();
}
};
return (
<div className="project-wizard-overlay">
<div className="project-wizard">
<div className="wizard-header">
<h1>{t.title}</h1>
<button className="wizard-close-btn" onClick={onClose}>
<X size={18} />
</button>
</div>
<div className="wizard-body">
{/* Templates grid */}
<div className="wizard-templates">
<div className="templates-header">
<h3>{t.selectTemplate}</h3>
</div>
<div className="templates-grid">
{templates.map(template => (
<button
key={template.id}
className={`template-card ${selectedTemplate === template.id ? 'selected' : ''}`}
onClick={() => setSelectedTemplate(template.id)}
>
<div className="template-preview">
<Sparkles size={32} />
</div>
<div className="template-name">
{locale === 'zh' ? template.nameZh : template.name}
</div>
</button>
))}
</div>
</div>
{/* Right - Preview and settings */}
<div className="wizard-details">
<div className="details-preview">
<div className="preview-placeholder">
<Sparkles size={48} />
</div>
</div>
<div className="details-info">
<h2>{locale === 'zh' ? currentTemplate?.nameZh : currentTemplate?.name}</h2>
<p>{locale === 'zh' ? currentTemplate?.descriptionZh : currentTemplate?.description}</p>
</div>
<div className="details-settings">
<h3>{t.projectSettings}</h3>
<div className="setting-field">
<label>{t.projectName}</label>
<input
type="text"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
placeholder="MyProject"
/>
</div>
<div className="setting-field">
<label>{t.projectLocation}</label>
<div className="path-input-group">
<input
type="text"
value={projectPath}
onChange={(e) => setProjectPath(e.target.value)}
placeholder="D:\Projects"
/>
<button className="browse-btn" onClick={handleBrowse}>
<Folder size={14} />
</button>
</div>
</div>
</div>
</div>
</div>
<div className="wizard-footer">
<button className="wizard-btn secondary" onClick={onClose}>
{t.cancel}
</button>
<button
className="wizard-btn primary"
onClick={handleCreate}
disabled={!projectName || !projectPath}
>
{t.create}
</button>
</div>
</div>
</div>
);
}
packages/editor-app/src/components/SceneHierarchy.tsx
+65 -12
View File
@@ -14,13 +14,14 @@ interface SceneHierarchyProps {
entityStore: EntityStoreService;
messageHub: MessageHub;
commandManager: CommandManager;
isProfilerMode?: boolean;
}
export function SceneHierarchy({ entityStore, messageHub, commandManager }: SceneHierarchyProps) {
export function SceneHierarchy({ entityStore, messageHub, commandManager, isProfilerMode = false }: SceneHierarchyProps) {
const [entities, setEntities] = useState<Entity[]>([]);
const [remoteEntities, setRemoteEntities] = useState<RemoteEntity[]>([]);
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
const [viewMode, setViewMode] = useState<ViewMode>('local');
const [viewMode, setViewMode] = useState<ViewMode>(isProfilerMode ? 'remote' : 'local');
const [selectedId, setSelectedId] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [sceneName, setSceneName] = useState<string>('Untitled');
@@ -28,6 +29,8 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
const [sceneFilePath, setSceneFilePath] = useState<string | null>(null);
const [isSceneModified, setIsSceneModified] = useState<boolean>(false);
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; entityId: number | null } | null>(null);
const [draggedEntityId, setDraggedEntityId] = useState<number | null>(null);
const [dropTargetIndex, setDropTargetIndex] = useState<number | null>(null);
const { t, locale } = useLocale();
const isShowingRemote = viewMode === 'remote' && isRemoteConnected;
@@ -41,6 +44,7 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
const state = sceneManager.getSceneState();
setSceneName(state.sceneName);
setIsSceneModified(state.isModified);
setSceneFilePath(state.currentScenePath || null);
}
};
@@ -61,9 +65,7 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
const unsubSaved = messageHub.subscribe('scene:saved', () => {
updateSceneInfo();
});
const unsubModified = messageHub.subscribe('scene:modified', () => {
updateSceneInfo();
});
const unsubModified = messageHub.subscribe('scene:modified', updateSceneInfo);
return () => {
unsubLoaded();
@@ -76,7 +78,7 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
// Subscribe to local entity changes
useEffect(() => {
const updateEntities = () => {
setEntities(entityStore.getRootEntities());
setEntities([...entityStore.getRootEntities()]);
};
const handleSelection = (data: { entity: Entity | null }) => {
@@ -89,12 +91,18 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
const unsubRemove = messageHub.subscribe('entity:removed', updateEntities);
const unsubClear = messageHub.subscribe('entities:cleared', updateEntities);
const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
const unsubSceneLoaded = messageHub.subscribe('scene:loaded', updateEntities);
const unsubSceneNew = messageHub.subscribe('scene:new', updateEntities);
const unsubReordered = messageHub.subscribe('entity:reordered', updateEntities);
return () => {
unsubAdd();
unsubRemove();
unsubClear();
unsubSelect();
unsubSceneLoaded();
unsubSceneNew();
unsubReordered();
};
}, [entityStore, messageHub]);
@@ -162,6 +170,36 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
entityStore.selectEntity(entity);
};
const handleDragStart = (e: React.DragEvent, entityId: number) => {
setDraggedEntityId(entityId);
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', entityId.toString());
};
const handleDragOver = (e: React.DragEvent, index: number) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setDropTargetIndex(index);
};
const handleDragLeave = () => {
setDropTargetIndex(null);
};
const handleDrop = (e: React.DragEvent, targetIndex: number) => {
e.preventDefault();
if (draggedEntityId !== null) {
entityStore.reorderEntity(draggedEntityId, targetIndex);
}
setDraggedEntityId(null);
setDropTargetIndex(null);
};
const handleDragEnd = () => {
setDraggedEntityId(null);
setDropTargetIndex(null);
};
const handleRemoteEntityClick = (entity: RemoteEntity) => {
setSelectedId(entity.id);
@@ -342,15 +380,24 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
<Layers size={16} className="hierarchy-header-icon" />
<h3>{t('hierarchy.title')}</h3>
<div
className={`scene-name-container ${!isRemoteConnected && sceneFilePath ? 'clickable' : ''}`}
className={[
'scene-name-container',
!isRemoteConnected && sceneFilePath && 'clickable',
isSceneModified && 'modified'
].filter(Boolean).join(' ')}
onClick={!isRemoteConnected ? handleSceneNameClick : undefined}
title={!isRemoteConnected && sceneFilePath ? `${displaySceneName} - 点击跳转到文件` : displaySceneName}
title={!isRemoteConnected && sceneFilePath
? `${displaySceneName}${isSceneModified ? (locale === 'zh' ? ' (未保存 - Ctrl+S 保存)' : ' (Unsaved - Ctrl+S to save)') : ''} - ${locale === 'zh' ? '点击跳转到文件' : 'Click to reveal file'}`
: displaySceneName}
>
<span className="scene-name">
{displaySceneName}{!isRemoteConnected && isSceneModified ? '*' : ''}
{displaySceneName}
</span>
{!isRemoteConnected && isSceneModified && (
<span className="modified-indicator">●</span>
)}
</div>
{isRemoteConnected && (
{isRemoteConnected && !isProfilerMode && (
<div className="view-mode-toggle">
<button
className={`mode-btn ${viewMode === 'local' ? 'active' : ''}`}
@@ -437,11 +484,17 @@ export function SceneHierarchy({ entityStore, messageHub, commandManager }: Scen
</ul>
) : (
<ul className="entity-list">
{entities.map((entity) => (
{entities.map((entity, index) => (
<li
key={entity.id}
className={`entity-item ${selectedId === entity.id ? 'selected' : ''}`}
className={`entity-item ${selectedId === entity.id ? 'selected' : ''} ${draggedEntityId === entity.id ? 'dragging' : ''} ${dropTargetIndex === index ? 'drop-target' : ''}`}
draggable
onClick={() => handleEntityClick(entity)}
onDragStart={(e) => handleDragStart(e, entity.id)}
onDragOver={(e) => handleDragOver(e, index)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, index)}
onDragEnd={handleDragEnd}
onContextMenu={(e) => {
e.stopPropagation();
handleEntityClick(entity);
packages/editor-app/src/components/StartupPage.tsx
+51 -2
View File
@@ -1,19 +1,40 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
import { getVersion } from '@tauri-apps/api/app';
import { Globe, ChevronDown } from 'lucide-react';
import '../styles/StartupPage.css';
type Locale = 'en' | 'zh';
interface StartupPageProps {
onOpenProject: () => void;
onCreateProject: () => void;
onOpenRecentProject?: (projectPath: string) => void;
onProfilerMode?: () => void;
onLocaleChange?: (locale: Locale) => void;
recentProjects?: string[];
locale: string;
}
export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProject, onProfilerMode, recentProjects = [], locale }: StartupPageProps) {
const LANGUAGES = [
{ code: 'en', name: 'English' },
{ code: 'zh', name: '中文' }
];
export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProject, onProfilerMode, onLocaleChange, recentProjects = [], locale }: StartupPageProps) {
const [hoveredProject, setHoveredProject] = useState<string | null>(null);
const [appVersion, setAppVersion] = useState<string>('');
const [showLangMenu, setShowLangMenu] = useState(false);
const langMenuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (langMenuRef.current && !langMenuRef.current.contains(e.target as Node)) {
setShowLangMenu(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
useEffect(() => {
getVersion().then(setAppVersion).catch(() => setAppVersion('1.0.0'));
@@ -107,6 +128,34 @@ export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProjec
<div className="startup-footer">
<span className="startup-version">{versionText}</span>
{onLocaleChange && (
<div className="startup-locale-dropdown" ref={langMenuRef}>
<button
className="startup-locale-btn"
onClick={() => setShowLangMenu(!showLangMenu)}
>
<Globe size={14} />
<span>{LANGUAGES.find(l => l.code === locale)?.name || 'English'}</span>
<ChevronDown size={12} />
</button>
{showLangMenu && (
<div className="startup-locale-menu">
{LANGUAGES.map(lang => (
<button
key={lang.code}
className={`startup-locale-item ${locale === lang.code ? 'active' : ''}`}
onClick={() => {
onLocaleChange(lang.code as Locale);
setShowLangMenu(false);
}}
>
{lang.name}
</button>
))}
</div>
)}
</div>
)}
</div>
</div>
);
packages/editor-app/src/components/Viewport.tsx
+87 -77
View File
@@ -748,61 +748,55 @@ export function Viewport({ locale = 'en', messageHub }: ViewportProps) {
<div className="viewport" ref={containerRef}>
<div className="viewport-toolbar">
<div className="viewport-toolbar-left">
{/* Transform tools */}
<button
className={`viewport-btn ${transformMode === 'select' ? 'active' : ''}`}
onClick={() => setTransformMode('select')}
title={locale === 'zh' ? '选择 (Q)' : 'Select (Q)'}
>
<MousePointer2 size={16} />
</button>
<button
className={`viewport-btn ${transformMode === 'move' ? 'active' : ''}`}
onClick={() => setTransformMode('move')}
title={locale === 'zh' ? '移动 (W)' : 'Move (W)'}
>
<Move size={16} />
</button>
<button
className={`viewport-btn ${transformMode === 'rotate' ? 'active' : ''}`}
onClick={() => setTransformMode('rotate')}
title={locale === 'zh' ? '旋转 (E)' : 'Rotate (E)'}
>
<RotateCw size={16} />
</button>
<button
className={`viewport-btn ${transformMode === 'scale' ? 'active' : ''}`}
onClick={() => setTransformMode('scale')}
title={locale === 'zh' ? '缩放 (R)' : 'Scale (R)'}
>
<Scaling size={16} />
</button>
{/* Transform tools group */}
<div className="viewport-btn-group">
<button
className={`viewport-btn ${transformMode === 'select' ? 'active' : ''}`}
onClick={() => setTransformMode('select')}
title={locale === 'zh' ? '选择 (Q)' : 'Select (Q)'}
>
<MousePointer2 size={14} />
</button>
<button
className={`viewport-btn ${transformMode === 'move' ? 'active' : ''}`}
onClick={() => setTransformMode('move')}
title={locale === 'zh' ? '移动 (W)' : 'Move (W)'}
>
<Move size={14} />
</button>
<button
className={`viewport-btn ${transformMode === 'rotate' ? 'active' : ''}`}
onClick={() => setTransformMode('rotate')}
title={locale === 'zh' ? '旋转 (E)' : 'Rotate (E)'}
>
<RotateCw size={14} />
</button>
<button
className={`viewport-btn ${transformMode === 'scale' ? 'active' : ''}`}
onClick={() => setTransformMode('scale')}
title={locale === 'zh' ? '缩放 (R)' : 'Scale (R)'}
>
<Scaling size={14} />
</button>
</div>
<div className="viewport-divider" />
{/* Playback controls */}
<button
className={`viewport-btn ${playState === 'playing' ? 'active' : ''}`}
onClick={handlePlay}
disabled={playState === 'playing'}
title={locale === 'zh' ? '播放' : 'Play'}
>
<Play size={16} />
</button>
<button
className={`viewport-btn ${playState === 'paused' ? 'active' : ''}`}
onClick={handlePause}
disabled={playState !== 'playing'}
title={locale === 'zh' ? '暂停' : 'Pause'}
>
<Pause size={16} />
</button>
<button
className="viewport-btn"
onClick={handleStop}
disabled={playState === 'stopped'}
title={locale === 'zh' ? '停止' : 'Stop'}
>
<Square size={16} />
</button>
{/* View options group */}
<div className="viewport-btn-group">
<button
className={`viewport-btn ${showGrid ? 'active' : ''}`}
onClick={() => setShowGrid(!showGrid)}
title={locale === 'zh' ? '显示网格' : 'Show Grid'}
>
<Grid3x3 size={14} />
</button>
<button
className={`viewport-btn ${showGizmos ? 'active' : ''}`}
onClick={() => setShowGizmos(!showGizmos)}
title={locale === 'zh' ? '显示辅助工具' : 'Show Gizmos'}
>
{showGizmos ? <Eye size={14} /> : <EyeOff size={14} />}
</button>
</div>
<div className="viewport-divider" />
{/* Run options dropdown */}
<div className="viewport-dropdown" ref={runMenuRef}>
@@ -811,8 +805,8 @@ export function Viewport({ locale = 'en', messageHub }: ViewportProps) {
onClick={() => setShowRunMenu(!showRunMenu)}
title={locale === 'zh' ? '运行选项' : 'Run Options'}
>
<Globe size={16} />
<ChevronDown size={12} />
<Globe size={14} />
<ChevronDown size={10} />
</button>
{showRunMenu && (
<div className="viewport-dropdown-menu">
@@ -827,43 +821,59 @@ export function Viewport({ locale = 'en', messageHub }: ViewportProps) {
</div>
)}
</div>
</div>
{/* Centered playback controls */}
<div className="viewport-toolbar-center">
<div className="viewport-playback">
<button
className={`viewport-btn play-btn ${playState === 'playing' ? 'active' : ''}`}
onClick={handlePlay}
disabled={playState === 'playing'}
title={locale === 'zh' ? '播放' : 'Play'}
>
<Play size={16} />
</button>
<button
className={`viewport-btn pause-btn ${playState === 'paused' ? 'active' : ''}`}
onClick={handlePause}
disabled={playState !== 'playing'}
title={locale === 'zh' ? '暂停' : 'Pause'}
>
<Pause size={16} />
</button>
<button
className="viewport-btn stop-btn"
onClick={handleStop}
disabled={playState === 'stopped'}
title={locale === 'zh' ? '停止' : 'Stop'}
>
<Square size={16} />
</button>
</div>
</div>
<div className="viewport-toolbar-right">
<span className="viewport-zoom">{Math.round(camera2DZoom * 100)}%</span>
<div className="viewport-divider" />
<button
className="viewport-btn"
onClick={handleReset}
title={locale === 'zh' ? '重置' : 'Reset'}
title={locale === 'zh' ? '重置视图' : 'Reset View'}
>
<RotateCcw size={16} />
<RotateCcw size={14} />
</button>
<div className="viewport-divider" />
<button
className={`viewport-btn ${showGrid ? 'active' : ''}`}
onClick={() => setShowGrid(!showGrid)}
title={locale === 'zh' ? '显示网格' : 'Show Grid'}
>
<Grid3x3 size={16} />
</button>
<button
className={`viewport-btn ${showGizmos ? 'active' : ''}`}
onClick={() => setShowGizmos(!showGizmos)}
title={locale === 'zh' ? '显示辅助工具' : 'Show Gizmos'}
>
{showGizmos ? <Eye size={16} /> : <EyeOff size={16} />}
</button>
</div>
<div className="viewport-toolbar-right">
<button
className={`viewport-btn ${showStats ? 'active' : ''}`}
onClick={() => setShowStats(!showStats)}
title={locale === 'zh' ? '显示统计信息' : 'Show Stats'}
>
<Activity size={16} />
<Activity size={14} />
</button>
<button
className="viewport-btn"
onClick={handleFullscreen}
title={locale === 'zh' ? '全屏' : 'Fullscreen'}
>
<Maximize2 size={16} />
<Maximize2 size={14} />
</button>
</div>
</div>
packages/editor-app/src/components/inspectors/common/CodePreview.tsx
+123
View File
@@ -0,0 +1,123 @@
import Editor from '@monaco-editor/react';
interface CodePreviewProps {
content: string;
language?: string;
height?: string | number;
}
// 根据文件扩展名获取语言
export function getLanguageFromExtension(extension?: string): string {
if (!extension) return 'plaintext';
const languageMap: Record<string, string> = {
// JavaScript/TypeScript
'js': 'javascript',
'jsx': 'javascript',
'ts': 'typescript',
'tsx': 'typescript',
'mjs': 'javascript',
'cjs': 'javascript',
// Web
'html': 'html',
'htm': 'html',
'css': 'css',
'scss': 'scss',
'less': 'less',
'vue': 'html',
'svelte': 'html',
// Data formats
'json': 'json',
'xml': 'xml',
'yaml': 'yaml',
'yml': 'yaml',
'toml': 'ini',
// Markdown
'md': 'markdown',
'mdx': 'markdown',
// Shell
'sh': 'shell',
'bash': 'shell',
'zsh': 'shell',
'ps1': 'powershell',
'bat': 'bat',
'cmd': 'bat',
// Other languages
'py': 'python',
'rs': 'rust',
'go': 'go',
'java': 'java',
'cpp': 'cpp',
'c': 'c',
'h': 'c',
'hpp': 'cpp',
'cs': 'csharp',
'rb': 'ruby',
'php': 'php',
'lua': 'lua',
'sql': 'sql',
'graphql': 'graphql',
'gql': 'graphql',
// Config files
'gitignore': 'ini',
'env': 'ini',
'ini': 'ini',
'conf': 'ini',
'properties': 'ini',
// ECS specific
'ecs': 'json',
'btree': 'json'
};
return languageMap[extension.toLowerCase()] || 'plaintext';
}
export function CodePreview({ content, language = 'plaintext', height = 300 }: CodePreviewProps) {
return (
<div className="code-preview-container">
<Editor
height={height}
language={language}
value={content}
theme="vs-dark"
options={{
readOnly: true,
minimap: { enabled: false },
scrollBeyondLastLine: false,
lineNumbers: 'on',
renderLineHighlight: 'none',
folding: true,
wordWrap: 'on',
fontSize: 12,
fontFamily: 'Consolas, Monaco, "Courier New", monospace',
padding: { top: 8, bottom: 8 },
scrollbar: {
vertical: 'auto',
horizontal: 'auto',
verticalScrollbarSize: 8,
horizontalScrollbarSize: 8
},
overviewRulerLanes: 0,
hideCursorInOverviewRuler: true,
overviewRulerBorder: false,
contextmenu: false,
selectionHighlight: false,
occurrencesHighlight: 'off',
renderValidationDecorations: 'off'
}}
loading={
<div className="code-preview-loading">
加载中...
</div>
}
/>
</div>
);
}
packages/editor-app/src/components/inspectors/common/index.ts
+1
View File
@@ -1,5 +1,6 @@
export { ComponentItem } from './ComponentItem';
export { ImagePreview } from './ImagePreview';
export { PropertyField } from './PropertyField';
export { CodePreview, getLanguageFromExtension } from './CodePreview';
export type { ComponentItemProps } from './ComponentItem';
export type { ImagePreviewProps } from './ImagePreview';
packages/editor-app/src/components/inspectors/fields/AssetField.css
+1 -1
View File
@@ -1,4 +1,4 @@
/* 虚幻引擎风格的资产选择框 */
/* 资产选择框 */
.asset-field {
margin-bottom: 6px;
}
packages/editor-app/src/components/inspectors/views/AssetFileInspector.tsx
+7 -3
View File
@@ -1,7 +1,7 @@
import { Folder, File as FileIcon, Image as ImageIcon, Clock, HardDrive } from 'lucide-react';
import { convertFileSrc } from '@tauri-apps/api/core';
import { AssetFileInfo } from '../types';
import { ImagePreview } from '../common';
import { ImagePreview, CodePreview, getLanguageFromExtension } from '../common';
import '../../../styles/EntityInspector.css';
interface AssetFileInspectorProps {
@@ -100,9 +100,13 @@ export function AssetFileInspector({ fileInfo, content, isImage }: AssetFileInsp
)}
{content && (
<div className="inspector-section">
<div className="inspector-section code-preview-section">
<div className="section-title">文件预览</div>
<div className="file-preview-content">{content}</div>
<CodePreview
content={content}
language={getLanguageFromExtension(fileInfo.extension)}
height="100%"
/>
</div>
)}
packages/editor-app/src/components/inspectors/views/EntityInspector.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Settings, ChevronDown, ChevronRight, X, Plus, Box } from 'lucide-react';
import { Entity, Component, Core, getComponentDependencies, getComponentTypeName } from '@esengine/ecs-framework';
import { Entity, Component, Core, getComponentDependencies, getComponentTypeName, getComponentInstanceTypeName } from '@esengine/ecs-framework';
import { MessageHub, CommandManager, ComponentRegistry } from '@esengine/editor-core';
import { PropertyInspector } from '../../PropertyInspector';
import { NotificationService } from '../../../services/NotificationService';
@@ -200,7 +200,7 @@ export function EntityInspector({ entity, messageHub, commandManager, componentV
) : (
entity.components.map((component: Component, index: number) => {
const isExpanded = expandedComponents.has(index);
const componentName = component.constructor?.name || 'Component';
const componentName = getComponentInstanceTypeName(component);
const componentInfo = componentRegistry?.getComponent(componentName);
const iconName = (componentInfo as { icon?: string } | undefined)?.icon;
const IconComponent = iconName && (LucideIcons as unknown as Record<string, React.ComponentType<{ size?: number }>>)[iconName];