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

123
packages/editor-app/src/components/inspectors/common/CodePreview.tsx Normal file
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>
);
}

1
packages/editor-app/src/components/inspectors/common/index.ts
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';

2
packages/editor-app/src/components/inspectors/fields/AssetField.css
View File

@@ -1,4 +1,4 @@
/* 虚幻引擎风格的资产选择框 */
/* 资产选择框 */
.asset-field {
margin-bottom: 6px;
}

10
packages/editor-app/src/components/inspectors/views/AssetFileInspector.tsx
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>
)}

4
packages/editor-app/src/components/inspectors/views/EntityInspector.tsx
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];