禁用默认右键

packages/editor-app/src-tauri/src/main.rs

@@ -155,6 +155,28 @@ fn set_project_base_path(
     Ok(())
 }
 
+#[tauri::command]
+fn toggle_devtools(app: AppHandle) -> Result<(), String> {
+    #[cfg(debug_assertions)]
+    {
+        if let Some(window) = app.get_webview_window("main") {
+            if window.is_devtools_open() {
+                window.close_devtools();
+            } else {
+                window.open_devtools();
+            }
+            Ok(())
+        } else {
+            Err("Window not found".to_string())
+        }
+    }
+
+    #[cfg(not(debug_assertions))]
+    {
+        Err("DevTools are only available in debug mode".to_string())
+    }
+}
+
 fn main() {
     let project_paths: Arc<Mutex<HashMap<String, String>>> = Arc::new(Mutex::new(HashMap::new()));
     let project_paths_clone = Arc::clone(&project_paths);
@@ -209,12 +231,6 @@ fn main() {
             }
         })
         .setup(move |app| {
-            #[cfg(debug_assertions)]
-            {
-                let window = app.get_webview_window("main").unwrap();
-                window.open_devtools();
-            }
-
             app.manage(project_paths);
             Ok(())
         })
@@ -227,7 +243,8 @@ fn main() {
             scan_directory,
             read_file_content,
             list_directory,
-            set_project_base_path
+            set_project_base_path,
+            toggle_devtools
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

packages/editor-app/src/App.tsx

@@ -39,6 +39,19 @@ function App() {
   const [panels, setPanels] = useState<DockablePanel[]>([]);
   const [showPluginManager, setShowPluginManager] = useState(false);
 
+  useEffect(() => {
+    // 禁用默认右键菜单
+    const handleContextMenu = (e: MouseEvent) => {
+      e.preventDefault();
+    };
+
+    document.addEventListener('contextmenu', handleContextMenu);
+
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu);
+    };
+  }, []);
+
   useEffect(() => {
     const initializeEditor = async () => {
       try {
@@ -190,6 +203,14 @@ function App() {
     changeLocale(newLocale);
   };
 
+  const handleToggleDevtools = async () => {
+    try {
+      await TauriAPI.toggleDevtools();
+    } catch (error) {
+      console.error('Failed to toggle devtools:', error);
+    }
+  };
+
   useEffect(() => {
     if (projectLoaded && entityStore && messageHub && logService) {
       setPanels([
@@ -283,6 +304,7 @@ function App() {
           onCloseProject={handleCloseProject}
           onExit={handleExit}
           onOpenPluginManager={() => setShowPluginManager(true)}
+          onToggleDevtools={handleToggleDevtools}
         />
         <div className="header-right">
           <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>

packages/editor-app/src/api/tauri.ts

@@ -63,6 +63,13 @@ export class TauriAPI {
   static async setProjectBasePath(path: string): Promise<void> {
     return await invoke<void>('set_project_base_path', { path });
   }
+
+  /**
+   * 切换开发者工具（仅在debug模式下可用）
+   */
+  static async toggleDevtools(): Promise<void> {
+    return await invoke<void>('toggle_devtools');
+  }
 }
 
 export interface DirectoryEntry {

packages/editor-app/src/components/MenuBar.tsx

@@ -20,6 +20,7 @@ interface MenuBarProps {
   onCloseProject?: () => void;
   onExit?: () => void;
   onOpenPluginManager?: () => void;
+  onToggleDevtools?: () => void;
 }
 
 export function MenuBar({
@@ -31,7 +32,8 @@ export function MenuBar({
   onOpenProject,
   onCloseProject,
   onExit,
-  onOpenPluginManager
+  onOpenPluginManager,
+  onToggleDevtools
 }: MenuBarProps) {
   const [openMenu, setOpenMenu] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -64,7 +66,8 @@ export function MenuBar({
         pluginManager: 'Plugin Manager',
         help: 'Help',
         documentation: 'Documentation',
-        about: 'About'
+        about: 'About',
+        devtools: 'Developer Tools'
       },
       zh: {
         file: '文件',
@@ -92,7 +95,8 @@ export function MenuBar({
         pluginManager: '插件管理器',
         help: '帮助',
         documentation: '文档',
-        about: '关于'
+        about: '关于',
+        devtools: '开发者工具'
       }
     };
     return translations[locale]?.[key] || key;
@@ -129,7 +133,9 @@ export function MenuBar({
       { label: t('console'), disabled: true },
       { label: t('viewport'), disabled: true },
       { separator: true },
-      { label: t('pluginManager'), onClick: onOpenPluginManager }
+      { label: t('pluginManager'), onClick: onOpenPluginManager },
+      { separator: true },
+      { label: t('devtools'), onClick: onToggleDevtools }
     ],
     help: [
       { label: t('documentation'), disabled: true },

packages/editor-app/src/components/Viewport.tsx

@@ -35,6 +35,9 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
+    // Set initial cursor style
+    canvas.style.cursor = 'grab';
+
     const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
     if (!gl) {
       console.error('WebGL not supported');
@@ -75,6 +78,7 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
         isDraggingRef.current = true;
         lastMousePosRef.current = { x: e.clientX, y: e.clientY };
         canvas.style.cursor = 'grabbing';
+        e.preventDefault();
       }
     };
 
@@ -100,8 +104,8 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
     };
 
     const handleMouseUp = () => {
-      isDraggingRef.current = false;
-      if (canvas) {
+      if (isDraggingRef.current) {
+        isDraggingRef.current = false;
         canvas.style.cursor = 'grab';
       }
     };
@@ -115,20 +119,21 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
       }
     };
 
+    // Register mousedown and wheel on canvas
     canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    canvas.addEventListener('mouseleave', handleMouseUp);
     canvas.addEventListener('wheel', handleWheel, { passive: false });
 
+    // Register mousemove and mouseup globally to handle dragging outside canvas
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
     return () => {
       window.removeEventListener('resize', resizeCanvas);
       resizeObserver.disconnect();
       canvas.removeEventListener('mousedown', handleMouseDown);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseup', handleMouseUp);
-      canvas.removeEventListener('mouseleave', handleMouseUp);
       canvas.removeEventListener('wheel', handleWheel);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
       if (animationFrameRef.current) {
         cancelAnimationFrame(animationFrameRef.current);
       }

packages/editor-app/src/styles/ConsolePanel.css

@@ -272,6 +272,24 @@
   transform: translateX(-50%) translateY(0);
 }
 
+/* Scrollbar */
+.console-content::-webkit-scrollbar {
+  width: 10px;
+}
+
+.console-content::-webkit-scrollbar-track {
+  background: var(--color-bg-elevated);
+}
+
+.console-content::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: 5px;
+}
+
+.console-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .console-btn,
   .console-filter-btn,