feat: UI输入框IME支持和编辑器Inspector重构 (#310)

UI系统改进: - 添加 IMEHelper 支持中文/日文/韩文输入法 - UIInputFieldComponent 添加组合输入状态管理 - UIInputSystem 添加 IME 事件处理 - UIInputFieldRenderSystem 优化渲染逻辑 - UIRenderCollector 增强纹理处理引擎改进: - EngineBridge 添加新的渲染接口 - EngineRenderSystem 优化渲染流程 - Rust 引擎添加新的渲染功能编辑器改进: - 新增模块化 Inspector 组件架构 - EntityRefField 增强实体引用选择 - 优化 FlexLayoutDock 和 SceneHierarchy 样式 - 添加国际化文本
2025-12-19 15:45:14 +08:00
parent 536c4c5593
commit ecdb8f2021
46 changed files with 5825 additions and 257 deletions
--- a/packages/editor-app/src/components/inspectors/Inspector.tsx
+++ b/packages/editor-app/src/components/inspectors/Inspector.tsx
@@ -15,9 +15,9 @@ import {
    ExtensionInspector,
    AssetFileInspector,
    RemoteEntityInspector,
-    EntityInspector,
    PrefabInspector
 } from './views';
+import { EntityInspectorPanel } from '../inspector';

 export function Inspector({ entityStore: _entityStore, messageHub, inspectorRegistry, projectPath, commandManager }: InspectorProps) {
    // ===== 从 InspectorStore 获取状态 | Get state from InspectorStore =====
@@ -101,7 +101,7 @@ export function Inspector({ entityStore: _entityStore, messageHub, inspectorRegi

    if (target.type === 'entity') {
        return (
-            <EntityInspector
+            <EntityInspectorPanel
                entity={target.data}
                messageHub={messageHub}
                commandManager={commandManager}
--- a/packages/editor-app/src/components/inspectors/fields/EntityRefField.css
+++ b/packages/editor-app/src/components/inspectors/fields/EntityRefField.css
@@ -6,32 +6,65 @@
 * 使用 PropertyInspector.css 中的 property-field 和 property-label 以保持一致性。
 */

-/* Input container - matches property-input styling */
+/* Input container - matches property-asset-drop styling */
 .entity-ref-field__input {
    flex: 1;
    display: flex;
    align-items: center;
-    min-height: 22px;
+    height: 22px;
    padding: 0 8px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 2px;
-    gap: 4px;
+    gap: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
+    min-width: 0;
+    cursor: pointer;
+    /* Ensure element can receive drag events | 确保元素可以接收拖拽事件 */
+    pointer-events: auto;
 }

 .entity-ref-field__input:hover:not(.readonly) {
    border-color: #4a4a4a;
+    background: #1e1e1e;
 }

+.entity-ref-field__input:focus-within {
+    border-color: #d4a029;
+    background: #1e1e1e;
+}
+
+/* Drag over state - enhanced visual feedback */
 .entity-ref-field__input.drag-over {
-    border-color: var(--accent-color, #4a9eff);
-    background: rgba(74, 158, 255, 0.1);
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
 }

 .entity-ref-field__input.readonly {
-    opacity: 0.7;
+    opacity: 0.6;
    cursor: not-allowed;
+    background: #1a1a1a;
+}
+
+/* Drop icon indicator */
+.entity-ref-field__drop-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #555;
+    flex-shrink: 0;
+    transition: color 0.15s ease;
+}
+
+.entity-ref-field__input.drag-over .entity-ref-field__drop-icon {
+    color: #3b82f6;
+}
+
+.entity-ref-field__input.has-value .entity-ref-field__drop-icon {
+    color: #666;
 }

 /* Entity name - clickable to navigate */
@@ -42,6 +75,7 @@
    color: #ddd;
    cursor: pointer;
    padding: 2px 4px;
+    margin: -2px -4px;
    border-radius: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
    overflow: hidden;
@@ -50,11 +84,11 @@
 }

 .entity-ref-field__name:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--accent-color, #4a9eff);
+    background: rgba(255, 255, 255, 0.08);
+    color: #3b82f6;
 }

-/* Clear button */
+/* Clear button - hidden by default, show on hover */
 .entity-ref-field__clear {
    display: flex;
    align-items: center;
@@ -65,23 +99,42 @@
    background: transparent;
    border: none;
    border-radius: 2px;
-    color: #999;
-    font-size: 12px;
+    color: #666;
+    font-size: 14px;
    line-height: 1;
    cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition: all 0.15s ease;
    flex-shrink: 0;
+    opacity: 0;
+}
+
+.entity-ref-field__input:hover .entity-ref-field__clear {
+    opacity: 1;
 }

 .entity-ref-field__clear:hover {
-    background: rgba(255, 100, 100, 0.2);
-    color: #ff6464;
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
 }

 /* Placeholder text */
 .entity-ref-field__placeholder {
+    flex: 1;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #666;
    font-style: italic;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .entity-ref-field__input,
+    .entity-ref-field__name,
+    .entity-ref-field__clear,
+    .entity-ref-field__drop-icon {
+        transition: none;
+    }
 }
--- a/packages/editor-app/src/components/inspectors/fields/EntityRefField.tsx
+++ b/packages/editor-app/src/components/inspectors/fields/EntityRefField.tsx
@@ -6,8 +6,9 @@
 * 支持从场景层级面板拖拽实体。
 */

-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { Core } from '@esengine/ecs-framework';
+import { Box, X } from 'lucide-react';
 import { useHierarchyStore } from '../../../stores';
 import './EntityRefField.css';

@@ -28,7 +29,7 @@ export const EntityRefField: React.FC<EntityRefFieldProps> = ({
    label,
    value,
    onChange,
-    placeholder = '拖拽实体到此处 / Drop entity here',
+    placeholder = '拖拽实体到此处',
    readonly = false
 }) => {
    const [isDragOver, setIsDragOver] = useState(false);
@@ -44,39 +45,77 @@ export const EntityRefField: React.FC<EntityRefFieldProps> = ({
    }, [value]);

    const entityName = getEntityName();
+    const hasValue = !!entityName;
+
+    const handleDragEnter = useCallback((e: React.DragEvent) => {
+        if (readonly) return;
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('[EntityRefField] DragEnter, types:', Array.from(e.dataTransfer.types));
+        setIsDragOver(true);
+    }, [readonly]);

    const handleDragOver = useCallback((e: React.DragEvent) => {
        if (readonly) return;
-
-        // Check if dragging an entity
-        // 检查是否拖拽实体
-        if (e.dataTransfer.types.includes('entity-id')) {
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'link';
+        // Always accept drag over - validate on drop
+        // 始终接受拖拽悬停 - 在放置时验证
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'link';
+        if (!isDragOver) {
            setIsDragOver(true);
        }
-    }, [readonly]);
+    }, [readonly, isDragOver]);

-    const handleDragLeave = useCallback(() => {
-        setIsDragOver(false);
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Only set drag over false if leaving the element entirely
+        // 只有完全离开元素时才取消拖拽状态
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX;
+        const y = e.clientY;
+
+        if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
+            setIsDragOver(false);
+        }
    }, []);

    const handleDrop = useCallback((e: React.DragEvent) => {
        if (readonly) return;

        e.preventDefault();
+        e.stopPropagation();
        setIsDragOver(false);

-        const entityIdStr = e.dataTransfer.getData('entity-id');
+        // Debug: log all available types and data
+        // 调试：记录所有可用的类型和数据
+        const types = Array.from(e.dataTransfer.types);
+        console.log('[EntityRefField] Drop - types:', types);
+        types.forEach(type => {
+            console.log(`[EntityRefField] Drop - ${type}:`, e.dataTransfer.getData(type));
+        });
+
+        // Try entity-id first, then fall back to text/plain
+        // 优先尝试 entity-id，然后回退到 text/plain
+        let entityIdStr = e.dataTransfer.getData('entity-id');
+        if (!entityIdStr) {
+            entityIdStr = e.dataTransfer.getData('text/plain');
+        }
+
+        console.log('[EntityRefField] Drop received, entityIdStr:', entityIdStr);
+
        if (entityIdStr) {
            const entityId = parseInt(entityIdStr, 10);
            if (!isNaN(entityId) && entityId > 0) {
+                console.log('[EntityRefField] Calling onChange with entityId:', entityId);
                onChange(entityId);
            }
        }
    }, [readonly, onChange]);

-    const handleClear = useCallback(() => {
+    const handleClear = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
        if (readonly) return;
        onChange(0);
    }, [readonly, onChange]);
@@ -90,15 +129,29 @@ export const EntityRefField: React.FC<EntityRefFieldProps> = ({
        setSelectedIds(new Set([value]));
    }, [value]);

+    const inputClassName = [
+        'entity-ref-field__input',
+        isDragOver && 'drag-over',
+        readonly && 'readonly',
+        hasValue && 'has-value'
+    ].filter(Boolean).join(' ');
+
    return (
        <div className="property-field entity-ref-field">
            <label className="property-label">{label}</label>
            <div
-                className={`entity-ref-field__input ${isDragOver ? 'drag-over' : ''} ${readonly ? 'readonly' : ''}`}
+                className={inputClassName}
+                onDragEnter={handleDragEnter}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
+                onDropCapture={handleDrop}
            >
+                {/* Drop icon */}
+                <span className="entity-ref-field__drop-icon">
+                    <Box size={14} />
+                </span>
+
                {entityName ? (
                    <>
                        <span
@@ -114,7 +167,7 @@ export const EntityRefField: React.FC<EntityRefFieldProps> = ({
                                onClick={handleClear}
                                title="清除引用 / Clear reference"
                            >
-                                ×
+                                <X size={12} />
                            </button>
                        )}
                    </>