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

* feat(editor): 优化编辑器UI和改进核心功能 * feat(editor): 优化编辑器UI和改进核心功能
2025-11-23 21:45:10 +08:00
parent 4d95a7f044
commit 32460ac133
38 changed files with 2201 additions and 485 deletions
--- a/packages/editor-app/src/App.tsx
+++ b/packages/editor-app/src/App.tsx
@@ -21,6 +21,7 @@ import type { IDialogExtended } from './services/TauriDialogService';
 import { GlobalBlackboardService } from '@esengine/behavior-tree';
 import { ServiceRegistry, PluginInstaller, useDialogStore } from './app/managers';
 import { StartupPage } from './components/StartupPage';
+import { ProjectCreationWizard } from './components/ProjectCreationWizard';
 import { SceneHierarchy } from './components/SceneHierarchy';
 import { Inspector } from './components/inspectors/Inspector';
 import { AssetBrowser } from './components/AssetBrowser';
@@ -49,7 +50,8 @@ import { CompilerConfigDialog } from './components/CompilerConfigDialog';
 import { checkForUpdatesOnStartup } from './utils/updater';
 import { useLocale } from './hooks/useLocale';
 import { en, zh } from './locales';
-import { Loader2, Globe } from 'lucide-react';
+import type { Locale } from '@esengine/editor-core';
+import { Loader2, Globe, ChevronDown } from 'lucide-react';
 import './styles/App.css';

 const coreInstance = Core.create({ debug: true });
@@ -98,6 +100,7 @@ function App() {
    const [pluginUpdateTrigger, setPluginUpdateTrigger] = useState(0);
    const [isRemoteConnected, setIsRemoteConnected] = useState(false);
    const [isProfilerMode, setIsProfilerMode] = useState(false);
+    const [showProjectWizard, setShowProjectWizard] = useState(false);

    const {
        showPluginManager, setShowPluginManager,
@@ -120,6 +123,8 @@ function App() {
        compilerId: string;
        currentFileName?: string;
    }>({ isOpen: false, compilerId: '' });
+    const [showLocaleMemu, setShowLocaleMenu] = useState(false);
+    const localeMenuRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        // 禁用默认右键菜单
@@ -127,22 +132,56 @@ function App() {
            e.preventDefault();
        };

-        // 添加快捷键监听（Ctrl+R 重新加载插件）
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
-                e.preventDefault();
-                handleReloadPlugins();
-            }
-        };
-
        document.addEventListener('contextmenu', handleContextMenu);
-        document.addEventListener('keydown', handleKeyDown);

        return () => {
            document.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, []);
+
+    // 语言菜单点击外部关闭
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (localeMenuRef.current && !localeMenuRef.current.contains(e.target as Node)) {
+                setShowLocaleMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    // 快捷键监听
+    useEffect(() => {
+        const handleKeyDown = async (e: KeyboardEvent) => {
+            if (e.ctrlKey || e.metaKey) {
+                switch (e.key.toLowerCase()) {
+                    case 's':
+                        e.preventDefault();
+                        if (sceneManager) {
+                            try {
+                                await sceneManager.saveScene();
+                                const sceneState = sceneManager.getSceneState();
+                                showToast(locale === 'zh' ? `已保存场景: ${sceneState.sceneName}` : `Scene saved: ${sceneState.sceneName}`, 'success');
+                            } catch (error) {
+                                console.error('Failed to save scene:', error);
+                                showToast(locale === 'zh' ? '保存场景失败' : 'Failed to save scene', 'error');
+                            }
+                        }
+                        break;
+                    case 'r':
+                        e.preventDefault();
+                        handleReloadPlugins();
+                        break;
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
-    }, [currentProjectPath, pluginManager, locale]);
+    }, [sceneManager, locale, currentProjectPath, pluginManager]);

    useEffect(() => {
        if (messageHub) {
@@ -396,13 +435,14 @@ function App() {
        }
    };

-    const handleCreateProject = async () => {
-        let selectedProjectPath: string | null = null;
+    const handleCreateProject = () => {
+        setShowProjectWizard(true);
+    };
+
+    const handleCreateProjectFromWizard = async (projectName: string, projectPath: string, _templateId: string) => {
+        const fullProjectPath = `${projectPath}\\${projectName}`;

        try {
-            selectedProjectPath = await TauriAPI.openProjectDialog();
-            if (!selectedProjectPath) return;
-
            setIsLoading(true);
            setLoadingMessage(locale === 'zh' ? '正在创建项目...' : 'Creating project...');

@@ -417,19 +457,18 @@ function App() {
                return;
            }

-            await projectService.createProject(selectedProjectPath);
+            await projectService.createProject(fullProjectPath);

            setLoadingMessage(locale === 'zh' ? '项目创建成功，正在打开...' : 'Project created, opening...');

-            await handleOpenRecentProject(selectedProjectPath);
+            await handleOpenRecentProject(fullProjectPath);
        } catch (error) {
            console.error('Failed to create project:', error);
            setIsLoading(false);

            const errorMessage = error instanceof Error ? error.message : String(error);
-            const pathToOpen = selectedProjectPath;

-            if (errorMessage.includes('already exists') && pathToOpen) {
+            if (errorMessage.includes('already exists')) {
                setConfirmDialog({
                    title: locale === 'zh' ? '项目已存在' : 'Project Already Exists',
                    message: locale === 'zh'
@@ -441,7 +480,7 @@ function App() {
                        setConfirmDialog(null);
                        setIsLoading(true);
                        setLoadingMessage(locale === 'zh' ? '正在打开项目...' : 'Opening project...');
-                        handleOpenRecentProject(pathToOpen).catch((err) => {
+                        handleOpenRecentProject(fullProjectPath).catch((err) => {
                            console.error('Failed to open project:', err);
                            setIsLoading(false);
                            setErrorDialog({
@@ -465,8 +504,19 @@ function App() {
        }
    };

+    const handleBrowseProjectPath = async (): Promise<string | null> => {
+        try {
+            const path = await TauriAPI.openProjectDialog();
+            return path || null;
+        } catch (error) {
+            console.error('Failed to browse path:', error);
+            return null;
+        }
+    };
+
    const handleProfilerMode = async () => {
        setIsProfilerMode(true);
+        setIsRemoteConnected(true);
        setProjectLoaded(true);
        setStatus(t('header.status.profilerMode') || 'Profiler Mode - Waiting for connection...');
    };
@@ -571,8 +621,7 @@ function App() {
        window.close();
    };

-    const handleLocaleChange = () => {
-        const newLocale = locale === 'en' ? 'zh' : 'en';
+    const handleLocaleChange = (newLocale: Locale) => {
        changeLocale(newLocale);

        // 通知所有已加载的插件更新语言
@@ -650,7 +699,7 @@ function App() {
                    {
                        id: 'scene-hierarchy',
                        title: locale === 'zh' ? '场景层级' : 'Scene Hierarchy',
-                        content: <SceneHierarchy entityStore={entityStore} messageHub={messageHub} commandManager={commandManager} />,
+                        content: <SceneHierarchy entityStore={entityStore} messageHub={messageHub} commandManager={commandManager} isProfilerMode={true} />,
                        closable: false
                    },
                    {
@@ -777,9 +826,17 @@ function App() {
                    onCreateProject={handleCreateProject}
                    onOpenRecentProject={handleOpenRecentProject}
                    onProfilerMode={handleProfilerMode}
+                    onLocaleChange={handleLocaleChange}
                    recentProjects={recentProjects}
                    locale={locale}
                />
+                <ProjectCreationWizard
+                    isOpen={showProjectWizard}
+                    onClose={() => setShowProjectWizard(false)}
+                    onCreateProject={handleCreateProjectFromWizard}
+                    onBrowsePath={handleBrowseProjectPath}
+                    locale={locale}
+                />
                {isLoading && (
                    <div className="loading-overlay">
                        <div className="loading-content">
@@ -817,11 +874,18 @@ function App() {
        );
    }

+    const projectName = currentProjectPath ? currentProjectPath.split(/[\\/]/).pop() : 'Untitled';
+
    return (
        <div className="editor-container">
            {!isEditorFullscreen && (
-                <div className={`editor-header ${isRemoteConnected ? 'remote-connected' : ''}`}>
-                    <MenuBar
+                <>
+                    <div className="editor-titlebar" data-tauri-drag-region>
+                        <span className="titlebar-project-name">{projectName}</span>
+                        <span className="titlebar-app-name">ECS Framework Editor</span>
+                    </div>
+                    <div className={`editor-header ${isRemoteConnected ? 'remote-connected' : ''}`}>
+                        <MenuBar
                        locale={locale}
                        uiRegistry={uiRegistry || undefined}
                        messageHub={messageHub || undefined}
@@ -849,12 +913,42 @@ function App() {
                            onOpenDashboard={() => setShowDashboard(true)}
                            locale={locale}
                        />
-                        <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
-                            <Globe size={14} />
-                        </button>
+                        <div className="locale-dropdown" ref={localeMenuRef}>
+                            <button
+                                className="toolbar-btn locale-btn"
+                                onClick={() => setShowLocaleMenu(!showLocaleMemu)}
+                            >
+                                <Globe size={14} />
+                                <span className="locale-label">{locale === 'en' ? 'EN' : '中'}</span>
+                                <ChevronDown size={10} />
+                            </button>
+                            {showLocaleMemu && (
+                                <div className="locale-menu">
+                                    <button
+                                        className={`locale-menu-item ${locale === 'en' ? 'active' : ''}`}
+                                        onClick={() => {
+                                            handleLocaleChange('en');
+                                            setShowLocaleMenu(false);
+                                        }}
+                                    >
+                                        English
+                                    </button>
+                                    <button
+                                        className={`locale-menu-item ${locale === 'zh' ? 'active' : ''}`}
+                                        onClick={() => {
+                                            handleLocaleChange('zh');
+                                            setShowLocaleMenu(false);
+                                        }}
+                                    >
+                                        中文
+                                    </button>
+                                </div>
+                            )}
+                        </div>
                        <span className="status">{status}</span>
                    </div>
-                </div>
+                    </div>
+                </>
            )}

            {showLoginDialog && (
--- a/packages/editor-app/src/app/managers/ServiceRegistry.ts
+++ b/packages/editor-app/src/app/managers/ServiceRegistry.ts
@@ -126,7 +126,7 @@ export class ServiceRegistry {
        const propertyMetadata = new PropertyMetadataService();
        const logService = new LogService();
        const settingsRegistry = new SettingsRegistry();
-        const sceneManager = new SceneManagerService(messageHub, fileAPI, projectService);
+        const sceneManager = new SceneManagerService(messageHub, fileAPI, projectService, entityStore);
        const fileActionRegistry = new FileActionRegistry();

        Core.services.registerInstance(UIRegistry, uiRegistry);
--- a/packages/editor-app/src/components/AssetBrowser.tsx
+++ b/packages/editor-app/src/components/AssetBrowser.tsx
@@ -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>
                )}
--- a/packages/editor-app/src/components/ConsolePanel.tsx
+++ b/packages/editor-app/src/components/ConsolePanel.tsx
@@ -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}
                        />
--- a/packages/editor-app/src/components/FileTree.tsx
+++ b/packages/editor-app/src/components/FileTree.tsx
@@ -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) {
--- a/packages/editor-app/src/components/ProjectCreationWizard.tsx
+++ b/packages/editor-app/src/components/ProjectCreationWizard.tsx
@@ -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>
+    );
+}
--- a/packages/editor-app/src/components/SceneHierarchy.tsx
+++ b/packages/editor-app/src/components/SceneHierarchy.tsx
@@ -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);
--- a/packages/editor-app/src/components/StartupPage.tsx
+++ b/packages/editor-app/src/components/StartupPage.tsx
@@ -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>
    );
--- a/packages/editor-app/src/components/Viewport.tsx
+++ b/packages/editor-app/src/components/Viewport.tsx
@@ -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>
--- a/packages/editor-app/src/components/inspectors/common/CodePreview.tsx
+++ b/packages/editor-app/src/components/inspectors/common/CodePreview.tsx
@@ -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>
+    );
+}
--- a/packages/editor-app/src/components/inspectors/common/index.ts
+++ b/packages/editor-app/src/components/inspectors/common/index.ts
@@ -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';
--- a/packages/editor-app/src/components/inspectors/fields/AssetField.css
+++ b/packages/editor-app/src/components/inspectors/fields/AssetField.css
@@ -1,4 +1,4 @@
-/* 虚幻引擎风格的资产选择框 */
+/* 资产选择框 */
 .asset-field {
    margin-bottom: 6px;
 }
--- a/packages/editor-app/src/components/inspectors/views/AssetFileInspector.tsx
+++ b/packages/editor-app/src/components/inspectors/views/AssetFileInspector.tsx
@@ -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>
                )}

--- a/packages/editor-app/src/components/inspectors/views/EntityInspector.tsx
+++ b/packages/editor-app/src/components/inspectors/views/EntityInspector.tsx
@@ -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];
--- a/packages/editor-app/src/services/RuntimeResolver.ts
+++ b/packages/editor-app/src/services/RuntimeResolver.ts
@@ -61,6 +61,13 @@ export class RuntimeResolver {
    async initialize(): Promise<void> {
        // Load runtime configuration
        const response = await fetch('/runtime.config.json');
+        if (!response.ok) {
+            throw new Error(`Failed to load runtime configuration: ${response.status} ${response.statusText}`);
+        }
+        const contentType = response.headers.get('content-type');
+        if (!contentType || !contentType.includes('application/json')) {
+            throw new Error(`Invalid runtime configuration response type: ${contentType}. Expected JSON but received ${await response.text().then(t => t.substring(0, 100))}`);
+        }
        this.config = await response.json();

        // Determine base directory based on environment
--- a/packages/editor-app/src/styles/App.css
+++ b/packages/editor-app/src/styles/App.css
@@ -24,50 +24,57 @@
  color: var(--color-text-primary);
 }

+.editor-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  background: linear-gradient(to bottom, #3a3a3f, #2a2a2f);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+  position: relative;
+  -webkit-app-region: drag;
+}
+
+.titlebar-project-name {
+  position: absolute;
+  left: 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.titlebar-app-name {
+  font-size: 11px;
+  color: #888;
+}
+
 .editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  height: var(--layout-header-height);
-  padding: 0 var(--spacing-lg);
-  background-color: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border-default);
+  height: 28px;
+  padding: 0 8px;
+  background-color: #1a1a1f;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 100;
  position: relative;
 }

-.editor-header.remote-connected {
-  background-color: rgba(16, 185, 129, 0.15);
-  border-bottom-color: rgba(16, 185, 129, 0.5);
-}
-
 .editor-header.remote-connected .status {
-  color: rgb(16, 185, 129);
-  font-weight: 600;
+  color: #4ade80;
 }

 .editor-header.remote-connected .status::before {
-  background-color: rgb(16, 185, 129);
-  animation: pulse-green 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse-green {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.6;
-    transform: scale(1.2);
-  }
+  background-color: #4ade80;
 }

 .header-right {
  display: flex;
  align-items: center;
-  gap: var(--spacing-md);
+  gap: 6px;
  margin-left: auto;
 }

@@ -119,35 +126,94 @@
 }

 .locale-btn {
-  width: var(--size-button-sm);
-  height: var(--size-button-sm);
+  width: 22px;
+  height: 22px;
  padding: 0;
  background-color: transparent;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
+  color: #888;
+  border: none;
+  border-radius: 2px;
 }

 .locale-btn:hover:not(:disabled) {
-  background-color: var(--color-bg-hover);
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #ccc;
+  border-color: transparent;
+  transform: none;
+  box-shadow: none;
+}
+
+.locale-dropdown {
+  position: relative;
+}
+
+.locale-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: auto;
+  padding: 0 6px;
+}
+
+.locale-label {
+  font-size: 10px;
+}
+
+.locale-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  min-width: 100px;
+  background: #252529;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
+  padding: 4px 0;
+  z-index: 1000;
+}
+
+.locale-menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  background: transparent;
+  border: none;
+  color: #ccc;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.locale-menu-item:hover {
+  background: #3b82f6;
+  color: #fff;
+}
+
+.locale-menu-item.active {
+  color: #3b82f6;
+}
+
+.locale-menu-item.active:hover {
+  color: #fff;
 }

 .editor-header .status {
  display: flex;
  align-items: center;
-  gap: var(--spacing-xs);
-  font-size: var(--font-size-sm);
-  color: var(--color-success);
+  gap: 4px;
+  font-size: 10px;
+  color: #4ade80;
  white-space: nowrap;
 }

 .editor-header .status::before {
  content: '';
-  width: 6px;
-  height: 6px;
-  background-color: var(--color-success);
-  border-radius: var(--radius-full);
+  width: 5px;
+  height: 5px;
+  background-color: #4ade80;
+  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
 }

--- a/packages/editor-app/src/styles/EntityInspector.css
+++ b/packages/editor-app/src/styles/EntityInspector.css
@@ -2,7 +2,7 @@
  display: flex;
  flex-direction: column;
  height: 100%;
-  background-color: var(--color-bg-base);
+  background-color: #1a1a1f;
  color: var(--color-text-primary);
  position: relative;
 }
@@ -10,11 +10,11 @@
 .inspector-header {
  display: flex;
  align-items: center;
-  gap: var(--spacing-sm);
-  height: var(--layout-panel-header);
-  padding: 0 var(--spacing-md);
-  border-bottom: 1px solid var(--color-border-default);
-  background-color: var(--color-bg-elevated);
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: #252529;
  flex-shrink: 0;
 }

@@ -34,9 +34,11 @@

 .inspector-content {
  flex: 1;
+  display: flex;
+  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
-  padding: var(--spacing-md);
+  padding: 8px;
  min-height: 0;
 }

@@ -63,10 +65,10 @@
 }

 .inspector-section {
-  margin-bottom: 20px;
-  padding: 12px;
-  background-color: rgba(255, 255, 255, 0.02);
-  border-radius: 6px;
+  margin-bottom: 8px;
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
 }

 .inspector-section:last-child {
@@ -306,32 +308,34 @@
 }

 .entity-name {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 500;
  color: var(--color-text-primary);
 }

 .section-title {
-  font-size: 11px;
+  font-size: 10px;
  font-weight: 600;
-  color: var(--color-text-secondary);
+  color: #888;
  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin: -4px -4px 12px -4px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--color-border-subtle);
+  letter-spacing: 0.08em;
+  margin: 0 0 6px 0;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
 }

 .property-field {
  display: flex;
  justify-content: space-between;
-  align-items: flex-start;
-  padding: 8px 6px;
-  font-size: 12px;
-  gap: 16px;
-  background-color: rgba(255, 255, 255, 0.01);
-  border-radius: 4px;
-  margin-bottom: 4px;
+  align-items: center;
+  padding: 4px 8px;
+  font-size: 11px;
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 0;
+  margin-bottom: 1px;
+  min-height: 24px;
 }

 .property-field:last-child {
@@ -343,19 +347,20 @@
 }

 .property-label {
-  color: var(--color-text-secondary);
-  font-weight: 500;
+  color: #888;
+  font-weight: 400;
  flex-shrink: 0;
-  min-width: 80px;
-  font-size: 12px;
+  min-width: 70px;
+  font-size: 11px;
 }

 .property-value-text {
-  color: var(--color-text-primary);
+  color: #ccc;
  text-align: right;
  word-break: break-word;
-  font-size: 12px;
+  font-size: 11px;
  flex: 1;
+  font-family: var(--font-family-mono);
 }

 .component-remove-btn {
@@ -480,26 +485,24 @@
 .add-component-trigger {
  display: flex;
  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background: var(--color-primary);
+  gap: 3px;
+  padding: 3px 6px;
+  background: #3b82f6;
  border: none;
-  border-radius: 4px;
-  color: var(--color-text-inverse);
+  border-radius: 2px;
+  color: #fff;
  cursor: pointer;
-  font-size: 11px;
+  font-size: 10px;
  font-weight: 500;
-  transition: all 0.15s ease;
+  transition: all 0.1s ease;
 }

 .add-component-trigger:hover {
-  background: var(--color-primary-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+  background: #2563eb;
 }

 .add-component-trigger:active {
-  transform: translateY(0);
+  background: #1d4ed8;
 }

 .component-dropdown-overlay {
@@ -630,55 +633,73 @@

 /* 组件列表项样式 */
 .component-item-card {
-  margin-bottom: 4px;
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border-default);
-  border-radius: 6px;
+  margin-bottom: 2px;
+  background: #2a2a2f;
+  border: none;
+  border-radius: 0;
  overflow: hidden;
-  transition: all 0.15s ease;
+  transition: none;
+  border-left: 3px solid #4a4a50;
 }

 .component-item-card:hover {
-  border-color: var(--color-border-strong);
+  background: #2e2e33;
 }

 .component-item-card.expanded {
-  border-color: var(--color-primary);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
+  border-left-color: #3b82f6;
+  background: #252529;
 }

 .component-item-header {
  display: flex;
  align-items: center;
-  padding: 8px 10px;
-  background: var(--color-bg-base);
+  padding: 6px 8px;
+  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
+  min-height: 28px;
 }

 .component-item-header:hover {
-  background: var(--color-bg-hover);
+  background: rgba(255, 255, 255, 0.03);
 }

 .component-expand-icon {
  display: flex;
  align-items: center;
-  color: var(--color-text-tertiary);
+  color: #666;
  transition: color 0.1s ease;
+  width: 14px;
 }

 .component-item-card:hover .component-expand-icon,
 .component-item-card.expanded .component-expand-icon {
-  color: var(--color-primary);
+  color: #3b82f6;
+}
+
+.component-icon {
+  display: flex;
+  align-items: center;
+  color: #666;
+  margin-left: 4px;
+  margin-right: 6px;
+}
+
+.component-item-card.expanded .component-icon {
+  color: #3b82f6;
 }

 .component-item-name {
  flex: 1;
-  margin-left: 6px;
-  font-size: 12px;
+  font-size: 11px;
  font-weight: 500;
-  color: var(--color-text-primary);
+  color: #ccc;
+}
+
+.component-item-card.expanded .component-item-name {
+  color: #fff;
 }

 .component-item-card .component-remove-btn {
@@ -687,10 +708,10 @@
  justify-content: center;
  background: transparent;
  border: none;
-  color: var(--color-text-tertiary);
+  color: #555;
  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 3px;
+  border-radius: 2px;
  opacity: 0;
  transition: all 0.1s ease;
 }
@@ -700,14 +721,55 @@
 }

 .component-item-card .component-remove-btn:hover {
-  background: var(--color-error);
-  color: var(--color-text-inverse);
+  background: #ef4444;
+  color: #fff;
 }

 .component-item-content {
-  padding: 8px 10px;
-  border-top: 1px solid var(--color-border-default);
-  background: var(--color-bg-base);
+  padding: 6px 8px 8px 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: #1e1e23;
  overflow: hidden;
  min-width: 0;
 }
+
+/* Property rows inside component */
+.component-item-content .property-row {
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 2px 0;
+}
+
+.component-item-content .property-row:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* Code Preview */
+.code-preview-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+}
+
+.code-preview-section .code-preview-container {
+  flex: 1;
+  min-height: 0;
+}
+
+.code-preview-container {
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  height: 100%;
+}
+
+.code-preview-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #888;
+  font-size: 12px;
+}
--- a/packages/editor-app/src/styles/MenuBar.css
+++ b/packages/editor-app/src/styles/MenuBar.css
@@ -1,7 +1,7 @@
 .menu-bar {
  display: flex;
  align-items: center;
-  gap: 2px;
+  gap: 0;
  height: 100%;
  user-select: none;
 }
@@ -11,37 +11,39 @@
 }

 .menu-button {
-  height: 32px;
-  padding: 0 12px;
+  height: 100%;
+  padding: 0 10px;
  background: transparent;
  border: none;
-  color: var(--color-text-primary, #cccccc);
-  font-size: 13px;
+  color: #999;
+  font-size: 12px;
  cursor: pointer;
-  transition: background-color 0.15s;
-  border-radius: 3px;
+  transition: all 0.1s;
+  border-radius: 0;
 }

 .menu-button:hover {
-  background-color: var(--color-bg-hover, rgba(255, 255, 255, 0.1));
+  background-color: rgba(255, 255, 255, 0.06);
+  color: #ccc;
 }

 .menu-button.active {
-  background-color: var(--color-bg-active, rgba(255, 255, 255, 0.15));
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
 }

 .menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
-  min-width: 200px;
-  background: var(--color-bg-elevated, #252526);
-  border: 1px solid var(--color-border-default, #3e3e42);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  min-width: 180px;
+  background: #252529;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  padding: 4px 0;
  z-index: 1000;
-  margin-top: 2px;
+  margin-top: 0;
 }

 .menu-dropdown-item {
@@ -49,22 +51,23 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 6px 16px;
+  padding: 5px 12px;
  background: transparent;
  border: none;
-  color: var(--color-text-primary, #cccccc);
-  font-size: 13px;
+  color: #ccc;
+  font-size: 11px;
  cursor: pointer;
  text-align: left;
-  transition: background-color 0.15s;
+  transition: background-color 0.1s;
 }

 .menu-dropdown-item:hover:not(.disabled) {
-  background-color: var(--color-bg-hover, rgba(255, 255, 255, 0.1));
+  background-color: #3b82f6;
+  color: #fff;
 }

 .menu-dropdown-item.disabled {
-  color: var(--color-text-disabled, #6e6e6e);
+  color: #555;
  cursor: not-allowed;
  opacity: 0.5;
 }
@@ -72,17 +75,23 @@
 .menu-item-content {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 6px;
+}
+
+.menu-item-content svg {
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
 }

 .menu-shortcut {
-  margin-left: 24px;
-  color: var(--color-text-secondary, #858585);
-  font-size: 12px;
+  margin-left: 16px;
+  color: #666;
+  font-size: 10px;
 }

 .menu-separator {
  height: 1px;
-  background-color: var(--color-border-default, #3e3e42);
+  background-color: rgba(255, 255, 255, 0.08);
  margin: 4px 8px;
 }
--- a/packages/editor-app/src/styles/ProjectCreationWizard.css
+++ b/packages/editor-app/src/styles/ProjectCreationWizard.css
@@ -0,0 +1,333 @@
+.project-wizard-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    backdrop-filter: blur(4px);
+}
+
+.project-wizard {
+    width: 1000px;
+    max-width: 90vw;
+    height: 650px;
+    max-height: 85vh;
+    background: #1e1e23;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+
+.wizard-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: #252529;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.wizard-header h1 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+    margin: 0;
+}
+
+.wizard-close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: #888;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.wizard-close-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.wizard-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+/* Templates grid */
+.wizard-templates {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    background: #1a1a1f;
+    display: flex;
+    flex-direction: column;
+}
+
+.templates-header {
+    margin-bottom: 16px;
+}
+
+.templates-header h3 {
+    font-size: 12px;
+    font-weight: 600;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 0;
+}
+
+.templates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 12px;
+}
+
+.template-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    background: #252529;
+    border: 2px solid transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.template-card:hover {
+    background: #2a2a2f;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.template-card.selected {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.template-preview {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    color: #666;
+    margin-bottom: 8px;
+}
+
+.template-card.selected .template-preview {
+    color: #3b82f6;
+}
+
+.template-name {
+    font-size: 11px;
+    color: #ccc;
+    text-align: center;
+    word-break: break-word;
+}
+
+.template-card.selected .template-name {
+    color: #fff;
+}
+
+/* Details panel */
+.wizard-details {
+    width: 280px;
+    background: #252529;
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.details-preview {
+    padding: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.preview-placeholder {
+    width: 100%;
+    height: 140px;
+    background: #1a1a1f;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #444;
+}
+
+.details-info {
+    padding: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.details-info h2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    margin: 0 0 8px 0;
+}
+
+.details-info p {
+    font-size: 12px;
+    color: #888;
+    margin: 0;
+    line-height: 1.5;
+}
+
+.details-settings {
+    padding: 16px;
+    flex: 1;
+}
+
+.details-settings h3 {
+    font-size: 11px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 0 0 12px 0;
+}
+
+.setting-field {
+    margin-bottom: 12px;
+}
+
+.setting-field label {
+    display: block;
+    font-size: 11px;
+    color: #888;
+    margin-bottom: 6px;
+}
+
+.setting-field input {
+    width: 100%;
+    padding: 8px 10px;
+    background: #1a1a1f;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    color: #fff;
+    font-size: 12px;
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+.setting-field input:focus {
+    border-color: #3b82f6;
+}
+
+.setting-field input::placeholder {
+    color: #555;
+}
+
+.path-input-group {
+    display: flex;
+    gap: 4px;
+}
+
+.path-input-group input {
+    flex: 1;
+}
+
+.browse-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    background: #3b82f6;
+    border: none;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.browse-btn:hover {
+    background: #2563eb;
+}
+
+/* Footer */
+.wizard-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    background: #252529;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.wizard-btn {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.wizard-btn.secondary {
+    background: transparent;
+    color: #888;
+}
+
+.wizard-btn.secondary:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: #ccc;
+}
+
+.wizard-btn.primary {
+    background: #3b82f6;
+    color: #fff;
+}
+
+.wizard-btn.primary:hover {
+    background: #2563eb;
+}
+
+.wizard-btn.primary:disabled {
+    background: #3b3b3f;
+    color: #666;
+    cursor: not-allowed;
+}
+
+/* Scrollbar */
+.wizard-sidebar::-webkit-scrollbar,
+.wizard-templates::-webkit-scrollbar,
+.wizard-details::-webkit-scrollbar {
+    width: 6px;
+}
+
+.wizard-sidebar::-webkit-scrollbar-track,
+.wizard-templates::-webkit-scrollbar-track,
+.wizard-details::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.wizard-sidebar::-webkit-scrollbar-thumb,
+.wizard-templates::-webkit-scrollbar-thumb,
+.wizard-details::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+
+.wizard-sidebar::-webkit-scrollbar-thumb:hover,
+.wizard-templates::-webkit-scrollbar-thumb:hover,
+.wizard-details::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
--- a/packages/editor-app/src/styles/SceneHierarchy.css
+++ b/packages/editor-app/src/styles/SceneHierarchy.css
@@ -39,13 +39,14 @@
 .scene-name-container {
  display: flex;
  align-items: center;
-  padding: 2px 8px;
+  padding: 1px 6px;
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  margin-left: auto;
  margin-right: var(--spacing-sm);
  transition: all var(--transition-fast);
+  height: 20px;
 }

 .scene-name-container.clickable {
@@ -61,6 +62,32 @@
  color: var(--color-primary);
 }

+.scene-name-container.modified {
+  background-color: rgba(251, 191, 36, 0.25);
+  border-color: rgb(251, 191, 36);
+}
+
+.scene-name-container.modified .scene-name {
+  color: rgb(251, 191, 36);
+  font-weight: 600;
+}
+
+.modified-indicator {
+  color: rgb(251, 191, 36);
+  font-size: 8px;
+  margin-left: 4px;
+  animation: pulse-modified 2s ease-in-out infinite;
+}
+
+@keyframes pulse-modified {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
 .scene-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
@@ -355,6 +382,14 @@
  color: var(--color-text-tertiary);
 }

+.entity-item.dragging {
+  opacity: 0.5;
+}
+
+.entity-item.drop-target {
+  border-top: 2px solid var(--color-primary);
+}
+
 .entity-tag {
  display: flex;
  align-items: center;
--- a/packages/editor-app/src/styles/StartupPage.css
+++ b/packages/editor-app/src/styles/StartupPage.css
@@ -175,11 +175,78 @@
 }

 .startup-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  padding: 20px 40px;
-  border-top: 1px solid #1e1e1e;
+  border-top: 1px solid #2a2a2f;
 }

 .startup-version {
  font-size: 11px;
  color: #6e6e6e;
 }
+
+.startup-locale-dropdown {
+  position: relative;
+}
+
+.startup-locale-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid #3e3e42;
+  border-radius: 3px;
+  color: #888;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.startup-locale-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: #555;
+  color: #ccc;
+}
+
+.startup-locale-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  min-width: 120px;
+  background: #252529;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
+  padding: 4px 0;
+  z-index: 1000;
+}
+
+.startup-locale-item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  background: transparent;
+  border: none;
+  color: #ccc;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.startup-locale-item:hover {
+  background: #3b82f6;
+  color: #fff;
+}
+
+.startup-locale-item.active {
+  color: #3b82f6;
+}
+
+.startup-locale-item.active:hover {
+  color: #fff;
+}
--- a/packages/editor-app/src/styles/UserProfile.css
+++ b/packages/editor-app/src/styles/UserProfile.css
@@ -7,20 +7,21 @@
 .login-button {
    display: flex;
    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: var(--color-accent, #0e639c);
+    gap: 4px;
+    padding: 3px 8px;
+    background: transparent;
    border: none;
-    border-radius: 6px;
-    color: white;
-    font-size: 13px;
+    border-radius: 2px;
+    color: #888;
+    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.1s;
 }

 .login-button:hover:not(:disabled) {
-    background: var(--color-accent-hover, #1177bb);
+    background: rgba(255, 255, 255, 0.08);
+    color: #ccc;
 }

 .login-button:disabled {
@@ -44,46 +45,46 @@
 .user-avatar-button {
    display: flex;
    align-items: center;
-    gap: 8px;
-    padding: 4px 12px 4px 4px;
-    background: var(--color-bg-secondary, #252526);
-    border: 1px solid var(--color-border, #333);
-    border-radius: 20px;
-    color: var(--color-text-primary, #cccccc);
-    font-size: 13px;
+    gap: 4px;
+    padding: 2px 6px 2px 2px;
+    background: transparent;
+    border: none;
+    border-radius: 2px;
+    color: #888;
+    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.1s;
 }

 .user-avatar-button:hover {
-    background: var(--color-bg-hover, #2d2d30);
-    border-color: var(--color-accent, #0e639c);
+    background: rgba(255, 255, 255, 0.08);
+    color: #ccc;
 }

 .user-avatar,
 .user-avatar-placeholder {
-    width: 28px;
-    height: 28px;
+    width: 16px;
+    height: 16px;
    border-radius: 50%;
 }

 .user-avatar {
    object-fit: cover;
-    border: 2px solid var(--color-accent, #0e639c);
+    border: none;
 }

 .user-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
-    background: var(--color-accent-bg, rgba(14, 99, 156, 0.2));
-    color: var(--color-accent, #0e639c);
-    border: 2px solid var(--color-accent, #0e639c);
+    background: rgba(255, 255, 255, 0.1);
+    color: #888;
+    border: none;
 }

 .user-name {
-    max-width: 120px;
+    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
--- a/packages/editor-app/src/styles/Viewport.css
+++ b/packages/editor-app/src/styles/Viewport.css
@@ -12,66 +12,125 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 6px 8px;
+  padding: 4px 6px;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
-  gap: 8px;
+  gap: 4px;
  z-index: 10;
+  height: 36px;
 }

 .viewport-toolbar-left {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: 2px;
+}
+
+.viewport-toolbar-center {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }

 .viewport-toolbar-right {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: 2px;
 }

 .viewport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 26px;
+  height: 26px;
  background: transparent;
  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: 3px;
  color: var(--color-text-secondary);
  cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: all 0.1s ease;
  padding: 0;
 }

 .viewport-btn:hover {
-  background: var(--color-bg-hover);
+  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
-  border-color: var(--color-border-hover);
 }

 .viewport-btn.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
-  border-color: var(--color-primary);
 }

 .viewport-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.96);
 }

 .viewport-btn:disabled {
-  opacity: 0.4;
+  opacity: 0.35;
  cursor: not-allowed;
 }

 .viewport-btn:disabled:hover {
  background: transparent;
  color: var(--color-text-secondary);
-  border-color: transparent;
+}
+
+/* Button group styling */
+.viewport-btn-group {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 2px;
+  gap: 1px;
+}
+
+.viewport-btn-group .viewport-btn {
+  border-radius: 2px;
+}
+
+/* Playback controls special styling */
+.viewport-playback {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  padding: 2px 4px;
+  gap: 2px;
+}
+
+.viewport-playback .viewport-btn {
+  width: 28px;
+  height: 28px;
+}
+
+.viewport-playback .viewport-btn.play-btn {
+  color: #4ade80;
+}
+
+.viewport-playback .viewport-btn.play-btn:hover {
+  background: rgba(74, 222, 128, 0.15);
+}
+
+.viewport-playback .viewport-btn.play-btn.active {
+  background: #4ade80;
+  color: #000;
+}
+
+.viewport-playback .viewport-btn.pause-btn.active {
+  background: #fbbf24;
+  color: #000;
+}
+
+.viewport-playback .viewport-btn.stop-btn:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
 }

 /* Dropdown */
@@ -119,9 +178,43 @@

 .viewport-divider {
  width: 1px;
-  height: 24px;
-  background: var(--color-border-default);
-  margin: 0 4px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 0 6px;
+}
+
+/* Coordinate system indicator */
+.viewport-coord-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.viewport-coord-indicator.world {
+  color: #60a5fa;
+}
+
+.viewport-coord-indicator.local {
+  color: #fbbf24;
+}
+
+/* Zoom indicator */
+.viewport-zoom {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
 }

 .viewport-canvas {