/* ============================================================ 功能表列 — 頂部應用程式選單（專案/編輯/檢視/Minecraft/匯出） 包含工作區切換器 ============================================================ */ function MenuBar({ view, onExport, onSave, onHome, onSwitchView, project, onResetLayout, onToggleTouchMode, touchMode, user, onLogin, onLogout }) { const [openMenu, setOpenMenu] = React.useState(null); const menus = { file: [ { label: '建立新專案...', shortcut: 'Ctrl+N', action: () => { setOpenMenu(null); onHome && onHome(); } }, { label: '開啟專案...', shortcut: 'Ctrl+O', action: () => { setOpenMenu(null); onHome && onHome(); } }, { separator: true }, { label: '儲存', shortcut: 'Ctrl+S', action: () => { setOpenMenu(null); onSave && onSave(); } }, { label: '另存新檔...', shortcut: 'Ctrl+Shift+S', action: () => { setOpenMenu(null); onSave && onSave(); } }, { separator: true }, { label: '匯入圖片轉像素...', shortcut: 'Ctrl+I', action: () => { setOpenMenu(null); window.openPixelConvert?.(); } }, { label: '匯入圖片...', action: () => { setOpenMenu(null); document.getElementById('file-import-input')?.click(); } }, { label: '匯出 PNG', shortcut: 'Ctrl+E', action: () => { setOpenMenu(null); onExport && onExport(); } }, { separator: true }, { label: '匯出資源包', action: () => { setOpenMenu(null); window.exportResourcePack?.(); } }, ], edit: [ { label: '復原', shortcut: 'Ctrl+Z', action: () => { setOpenMenu(null); undo(); } }, { label: '重做', shortcut: 'Ctrl+Shift+Z', action: () => { setOpenMenu(null); redo(); } }, { separator: true }, { label: '剪下', shortcut: 'Ctrl+X', action: () => {} }, { label: '複製', shortcut: 'Ctrl+C', action: () => {} }, { label: '貼上', shortcut: 'Ctrl+V', action: () => {} }, { separator: true }, { label: '全選', shortcut: 'Ctrl+A', action: () => {} }, { label: '取消選取', shortcut: 'Ctrl+D', action: () => {} }, ], view: [ { label: '放大', shortcut: 'Ctrl++', action: () => { setOpenMenu(null); window.zoomIn?.(); } }, { label: '縮小', shortcut: 'Ctrl+-', action: () => { setOpenMenu(null); window.zoomOut?.(); } }, { label: '符合畫面', shortcut: '0', action: () => { setOpenMenu(null); window.resetView?.(); } }, { label: '100%', shortcut: '1', action: () => {} }, { separator: true }, { label: '像素格線', action: () => { setOpenMenu(null); window.toggleGrid?.(); } }, { label: '透明棋盤格', action: () => {} }, { separator: true }, { label: '重置視圖', action: () => { setOpenMenu(null); window.resetView?.(); } }, { label: '重置布局', action: () => { setOpenMenu(null); onResetLayout && onResetLayout(); } }, ], minecraft: [ { label: '像素對稱 → 關閉', action: () => { setOpenMenu(null); window.setSymmetry?.('none'); } }, { label: '像素對稱 → 水平', action: () => { setOpenMenu(null); window.setSymmetry?.('horizontal'); } }, { label: '像素對稱 → 垂直', action: () => { setOpenMenu(null); window.setSymmetry?.('vertical'); } }, { label: '像素對稱 → 雙向', action: () => { setOpenMenu(null); window.setSymmetry?.('both'); } }, { separator: true }, { label: '像素外框 → 1px', action: () => {} }, { label: '陰影 → 高光', action: () => { setOpenMenu(null); window.applyShading?.('highlight'); } }, { label: '陰影 → 陰影', action: () => { setOpenMenu(null); window.applyShading?.('shadow'); } }, { separator: true }, { label: '像素雜訊...', action: () => { setOpenMenu(null); window.applyNoise?.(); } }, { label: '變體產生器...', action: () => {} }, { separator: true }, { label: '接縫檢查器', action: () => {} }, ], export: [ { label: '匯出 PNG...', shortcut: 'Ctrl+E', action: () => { setOpenMenu(null); onExport && onExport(); } }, { label: '匯出資源包 (ZIP)', action: () => { setOpenMenu(null); window.exportResourcePack?.(); } }, { separator: true }, { label: '匯出模型 JSON', action: () => { setOpenMenu(null); window.exportModelJSON?.(); } }, { label: '匯出材質貼圖集', action: () => { setOpenMenu(null); } }, ], }; const menuLabels = { file: '專案', edit: '編輯', view: '檢視', minecraft: 'Minecraft', export: '匯出', }; const workspaceOptions = [ { key: 'pixel', label: '2D 像素', icon: 'Pencil' }, { key: 'block', label: '3D 方塊', icon: 'Cube' }, { key: 'creature', label: '3D 生物', icon: 'Robot' }, ]; // Close menu on outside click React.useEffect(() => { const handler = () => setOpenMenu(null); document.addEventListener('click', handler); return () => document.removeEventListener('click', handler); }, []); return React.createElement('div', { className: 'menu-bar' }, React.createElement('div', { className: 'menu-bar__brand' }, React.createElement(SvgIcon, { name: 'Sparkles', size: 14, style: { color: 'var(--accent-green)' } }), React.createElement('span', { style: { marginLeft: 4, fontWeight: 600, letterSpacing: 0.5 } }, 'MC STUDIO'), ), // 工作區切換器 view !== 'home' && React.createElement('div', { className: 'workspace-switcher' }, workspaceOptions.map(opt => React.createElement('button', { key: opt.key, className: 'workspace-switcher__btn' + (view === opt.key ? ' active' : ''), onClick: () => onSwitchView && onSwitchView(opt.key), title: `切換到 ${opt.label}`, }, React.createElement(SvgIcon, { name: opt.icon, size: 12 }), React.createElement('span', null, opt.label), ) ), ), React.createElement('div', { className: 'menu-bar__menu-items', onClick: (e) => e.stopPropagation() }, Object.entries(menus).map(([key, items]) => React.createElement('div', { key: key, className: 'menu-item' + (openMenu === key ? ' active' : ''), onClick: (e) => { e.stopPropagation(); setOpenMenu(openMenu === key ? null : key); }, }, menuLabels[key] || key, openMenu === key && React.createElement('div', { className: 'menu-dropdown', onClick: (e) => e.stopPropagation(), }, items.map((item, i) => item.separator ? React.createElement('div', { key: i, className: 'menu-dropdown__separator' }) : React.createElement('div', { key: i, className: 'menu-dropdown__item' + (item.disabled ? ' disabled' : ''), onClick: item.action, }, React.createElement('span', null, item.label), item.shortcut && React.createElement('span', { className: 'menu-dropdown__shortcut' }, item.shortcut), ) ) ), ) ), ), React.createElement('div', { style: { flex: 1 } }), // 觸控模式開關 view !== 'home' && React.createElement('button', { className: 'reset-layout-btn', title: '觸控模式', onClick: () => onToggleTouchMode && onToggleTouchMode(), style: { marginRight: 8 }, }, React.createElement(SvgIcon, { name: 'Tablet', size: 12, style: { color: touchMode ? 'var(--accent-green)' : 'var(--text-tertiary)' } }), touchMode ? '觸控' : '桌面', ), // 重置布局按鈕 view !== 'home' && React.createElement('button', { className: 'reset-layout-btn', title: '重置布局', onClick: () => onResetLayout && onResetLayout(), }, React.createElement(SvgIcon, { name: 'Reset', size: 12 }), '重置', ), // 新手/進階切換 view !== 'home' && React.createElement('div', { className: 'mode-switch' }, React.createElement('span', { className: 'mode-switch__label' + (!AppState.beginnerMode ? ' active' : ''), onClick: () => setState(s => { s.beginnerMode = false; }), }, '進階'), React.createElement('span', { className: 'mode-switch__label' + (AppState.beginnerMode ? ' active' : ''), onClick: () => setState(s => { s.beginnerMode = true; }), }, '新手'), ), view !== 'home' && React.createElement('div', { style: { fontSize: '11px', color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)', marginRight: 8 } }, AppState.project?.name || '未命名專案' ), user ? React.createElement('div', { className: 'account-chip', title: '專案只存在這個帳號' }, React.createElement('span', null, user.username), React.createElement('button', { className: 'reset-layout-btn', onClick: () => onLogout && onLogout(), }, '登出'), ) : React.createElement('button', { className: 'reset-layout-btn', onClick: () => onLogin && onLogin(), }, '登入'), // 隱藏的檔案輸入框，用於匯入 React.createElement('input', { id: 'file-import-input', type: 'file', accept: 'image/png,image/jpeg,image/webp', style: { display: 'none' }, onChange: (e) => { const file = e.target.files?.[0]; if (file) { window.handleImageImport?.(file); } e.target.value = ''; }, }), ); } window.MenuBar = MenuBar;