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

UI系统改进:
- 添加 IMEHelper 支持中文/日文/韩文输入法
- UIInputFieldComponent 添加组合输入状态管理
- UIInputSystem 添加 IME 事件处理
- UIInputFieldRenderSystem 优化渲染逻辑
- UIRenderCollector 增强纹理处理

引擎改进:
- EngineBridge 添加新的渲染接口
- EngineRenderSystem 优化渲染流程
- Rust 引擎添加新的渲染功能

编辑器改进:
- 新增模块化 Inspector 组件架构
- EntityRefField 增强实体引用选择
- 优化 FlexLayoutDock 和 SceneHierarchy 样式
- 添加国际化文本

packages/engine/src/core/engine.rs

@@ -253,6 +253,18 @@ impl Engine {
         Ok(())
     }
 
+    /// Set scissor rect for clipping (screen coordinates, Y-down).
+    /// 设置裁剪矩形（屏幕坐标，Y 轴向下）。
+    pub fn set_scissor_rect(&mut self, x: f32, y: f32, width: f32, height: f32) {
+        self.renderer.set_scissor_rect(x, y, width, height);
+    }
+
+    /// Clear scissor rect (disable clipping).
+    /// 清除裁剪矩形（禁用裁剪）。
+    pub fn clear_scissor_rect(&mut self) {
+        self.renderer.clear_scissor_rect();
+    }
+
     /// Add a rectangle gizmo.
     /// 添加矩形Gizmo。
     pub fn add_gizmo_rect(

packages/engine/src/lib.rs

@@ -177,6 +177,29 @@ impl GameEngine {
             .map_err(|e| JsValue::from_str(&e.to_string()))
     }
 
+    /// Set scissor rect for clipping (screen coordinates, Y-down).
+    /// 设置裁剪矩形（屏幕坐标，Y 轴向下）。
+    ///
+    /// Content outside this rect will be clipped.
+    /// 此矩形外的内容将被裁剪。
+    ///
+    /// # Arguments | 参数
+    /// * `x` - Left edge in screen coordinates | 屏幕坐标中的左边缘
+    /// * `y` - Top edge in screen coordinates (Y-down) | 屏幕坐标中的上边缘（Y 向下）
+    /// * `width` - Rect width | 矩形宽度
+    /// * `height` - Rect height | 矩形高度
+    #[wasm_bindgen(js_name = setScissorRect)]
+    pub fn set_scissor_rect(&mut self, x: f32, y: f32, width: f32, height: f32) {
+        self.engine.set_scissor_rect(x, y, width, height);
+    }
+
+    /// Clear scissor rect (disable clipping).
+    /// 清除裁剪矩形（禁用裁剪）。
+    #[wasm_bindgen(js_name = clearScissorRect)]
+    pub fn clear_scissor_rect(&mut self) {
+        self.engine.clear_scissor_rect();
+    }
+
     /// Load a texture from URL.
     /// 从URL加载纹理。
     ///

packages/engine/src/renderer/renderer2d.rs

@@ -46,6 +46,15 @@ pub struct Renderer2D {
     /// 当前激活的材质ID。
     #[allow(dead_code)]
     current_material_id: u32,
+
+    /// Current scissor rect (x, y, width, height) in screen coordinates.
+    /// None means scissor test is disabled.
+    /// 当前裁剪矩形（屏幕坐标）。None 表示禁用裁剪测试。
+    scissor_rect: Option<[f32; 4]>,
+
+    /// Viewport height for scissor coordinate conversion.
+    /// 视口高度，用于裁剪坐标转换。
+    viewport_height: f32,
 }
 
 impl Renderer2D {
@@ -81,6 +90,8 @@ impl Renderer2D {
             clear_color: [0.1, 0.1, 0.12, 1.0],
             current_shader_id: 0,
             current_material_id: 0,
+            scissor_rect: None,
+            viewport_height: canvas.1,
         })
     }
 
@@ -120,6 +131,10 @@ impl Renderer2D {
             return Ok(());
         }
 
+        // Apply scissor test if enabled
+        // 如果启用，应用裁剪测试
+        self.apply_scissor(gl);
+
         // Track current state to minimize state changes | 跟踪当前状态以最小化状态切换
         let mut current_material_id: u32 = u32::MAX;
         let mut current_texture_id: u32 = u32::MAX;
@@ -209,6 +224,47 @@ impl Renderer2D {
     /// 更新相机视口大小。
     pub fn resize(&mut self, width: f32, height: f32) {
         self.camera.set_viewport(width, height);
+        self.viewport_height = height;
+    }
+
+    // ============= Scissor Test =============
+    // ============= 裁剪测试 =============
+
+    /// Set scissor rect for clipping (screen coordinates, Y-down).
+    /// 设置裁剪矩形（屏幕坐标，Y 轴向下）。
+    ///
+    /// Content outside this rect will be clipped.
+    /// 此矩形外的内容将被裁剪。
+    ///
+    /// # Arguments | 参数
+    /// * `x` - Left edge in screen coordinates | 屏幕坐标中的左边缘
+    /// * `y` - Top edge in screen coordinates (Y-down) | 屏幕坐标中的上边缘（Y 向下）
+    /// * `width` - Rect width | 矩形宽度
+    /// * `height` - Rect height | 矩形高度
+    pub fn set_scissor_rect(&mut self, x: f32, y: f32, width: f32, height: f32) {
+        self.scissor_rect = Some([x, y, width, height]);
+    }
+
+    /// Clear scissor rect (disable clipping).
+    /// 清除裁剪矩形（禁用裁剪）。
+    pub fn clear_scissor_rect(&mut self) {
+        self.scissor_rect = None;
+    }
+
+    /// Apply current scissor state to GL context.
+    /// 应用当前裁剪状态到 GL 上下文。
+    fn apply_scissor(&self, gl: &WebGl2RenderingContext) {
+        if let Some([x, y, width, height]) = self.scissor_rect {
+            gl.enable(WebGl2RenderingContext::SCISSOR_TEST);
+            // WebGL scissor uses bottom-left origin with Y-up
+            // Convert from screen coordinates (top-left origin, Y-down)
+            // WebGL scissor 使用左下角原点，Y 轴向上
+            // 从屏幕坐标转换（左上角原点，Y 轴向下）
+            let gl_y = self.viewport_height - y - height;
+            gl.scissor(x as i32, gl_y as i32, width as i32, height as i32);
+        } else {
+            gl.disable(WebGl2RenderingContext::SCISSOR_TEST);
+        }
     }
 
     // ============= Shader Management =============