菜单栏

2025-10-15 18:24:13 +08:00
parent 956ccf9195
commit f4ea077114
5 changed files with 392 additions and 134 deletions
--- a/packages/editor-app/src/components/MenuBar.tsx
+++ b/packages/editor-app/src/components/MenuBar.tsx
@@ -0,0 +1,193 @@
+import { useState, useRef, useEffect } from 'react';
+import '../styles/MenuBar.css';
+
+interface MenuItem {
+  label: string;
+  shortcut?: string;
+  disabled?: boolean;
+  separator?: boolean;
+  submenu?: MenuItem[];
+  onClick?: () => void;
+}
+
+interface MenuBarProps {
+  locale?: string;
+  onNewScene?: () => void;
+  onOpenScene?: () => void;
+  onSaveScene?: () => void;
+  onSaveSceneAs?: () => void;
+  onOpenProject?: () => void;
+  onCloseProject?: () => void;
+  onExit?: () => void;
+}
+
+export function MenuBar({
+  locale = 'en',
+  onNewScene,
+  onOpenScene,
+  onSaveScene,
+  onSaveSceneAs,
+  onOpenProject,
+  onCloseProject,
+  onExit
+}: MenuBarProps) {
+  const [openMenu, setOpenMenu] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const t = (key: string) => {
+    const translations: Record<string, Record<string, string>> = {
+      en: {
+        file: 'File',
+        newScene: 'New Scene',
+        openScene: 'Open Scene',
+        saveScene: 'Save Scene',
+        saveSceneAs: 'Save Scene As...',
+        openProject: 'Open Project',
+        closeProject: 'Close Project',
+        exit: 'Exit',
+        edit: 'Edit',
+        undo: 'Undo',
+        redo: 'Redo',
+        cut: 'Cut',
+        copy: 'Copy',
+        paste: 'Paste',
+        delete: 'Delete',
+        selectAll: 'Select All',
+        window: 'Window',
+        sceneHierarchy: 'Scene Hierarchy',
+        inspector: 'Inspector',
+        assets: 'Assets',
+        console: 'Console',
+        viewport: 'Viewport',
+        help: 'Help',
+        documentation: 'Documentation',
+        about: 'About'
+      },
+      zh: {
+        file: '文件',
+        newScene: '新建场景',
+        openScene: '打开场景',
+        saveScene: '保存场景',
+        saveSceneAs: '场景另存为...',
+        openProject: '打开项目',
+        closeProject: '关闭项目',
+        exit: '退出',
+        edit: '编辑',
+        undo: '撤销',
+        redo: '重做',
+        cut: '剪切',
+        copy: '复制',
+        paste: '粘贴',
+        delete: '删除',
+        selectAll: '全选',
+        window: '窗口',
+        sceneHierarchy: '场景层级',
+        inspector: '检视器',
+        assets: '资产',
+        console: '控制台',
+        viewport: '视口',
+        help: '帮助',
+        documentation: '文档',
+        about: '关于'
+      }
+    };
+    return translations[locale]?.[key] || key;
+  };
+
+  const menus: Record<string, MenuItem[]> = {
+    file: [
+      { label: t('newScene'), shortcut: 'Ctrl+N', onClick: onNewScene },
+      { label: t('openScene'), shortcut: 'Ctrl+O', onClick: onOpenScene },
+      { separator: true },
+      { label: t('saveScene'), shortcut: 'Ctrl+S', onClick: onSaveScene },
+      { label: t('saveSceneAs'), shortcut: 'Ctrl+Shift+S', onClick: onSaveSceneAs },
+      { separator: true },
+      { label: t('openProject'), onClick: onOpenProject },
+      { label: t('closeProject'), onClick: onCloseProject },
+      { separator: true },
+      { label: t('exit'), onClick: onExit }
+    ],
+    edit: [
+      { label: t('undo'), shortcut: 'Ctrl+Z', disabled: true },
+      { label: t('redo'), shortcut: 'Ctrl+Y', disabled: true },
+      { separator: true },
+      { label: t('cut'), shortcut: 'Ctrl+X', disabled: true },
+      { label: t('copy'), shortcut: 'Ctrl+C', disabled: true },
+      { label: t('paste'), shortcut: 'Ctrl+V', disabled: true },
+      { label: t('delete'), shortcut: 'Delete', disabled: true },
+      { separator: true },
+      { label: t('selectAll'), shortcut: 'Ctrl+A', disabled: true }
+    ],
+    window: [
+      { label: t('sceneHierarchy'), disabled: true },
+      { label: t('inspector'), disabled: true },
+      { label: t('assets'), disabled: true },
+      { label: t('console'), disabled: true },
+      { label: t('viewport'), disabled: true }
+    ],
+    help: [
+      { label: t('documentation'), disabled: true },
+      { separator: true },
+      { label: t('about'), disabled: true }
+    ]
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpenMenu(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleMenuClick = (menuKey: string) => {
+    setOpenMenu(openMenu === menuKey ? null : menuKey);
+  };
+
+  const handleMenuItemClick = (item: MenuItem) => {
+    if (!item.disabled && !item.separator && item.onClick) {
+      item.onClick();
+      setOpenMenu(null);
+    }
+  };
+
+  return (
+    <div className="menu-bar" ref={menuRef}>
+      {Object.keys(menus).map(menuKey => (
+        <div key={menuKey} className="menu-item">
+          <button
+            className={`menu-button ${openMenu === menuKey ? 'active' : ''}`}
+            onClick={() => handleMenuClick(menuKey)}
+          >
+            {t(menuKey)}
+          </button>
+          {openMenu === menuKey && (
+            <div className="menu-dropdown">
+              {menus[menuKey].map((item, index) => {
+                if (item.separator) {
+                  return <div key={index} className="menu-separator" />;
+                }
+                return (
+                  <button
+                    key={index}
+                    className={`menu-dropdown-item ${item.disabled ? 'disabled' : ''}`}
+                    onClick={() => handleMenuItemClick(item)}
+                    disabled={item.disabled}
+                  >
+                    <span>{item.label}</span>
+                    {item.shortcut && <span className="menu-shortcut">{item.shortcut}</span>}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}