diff --git a/apps/web/src/components/terminal/OmniTerminal.tsx b/apps/web/src/components/terminal/OmniTerminal.tsx index cf53bf8d9..943626a15 100644 --- a/apps/web/src/components/terminal/OmniTerminal.tsx +++ b/apps/web/src/components/terminal/OmniTerminal.tsx @@ -22,6 +22,7 @@ */ import React, { useEffect, useRef, useState } from 'react' +import { useTranslations } from 'next-intl' import { useTerminalStore, useIsConnected, @@ -34,6 +35,7 @@ import { Z_INDEX } from '@/lib/constants/z-index' import { SHORTCUTS, matchShortcut } from '@/lib/constants/shortcuts' export const OmniTerminal = () => { + const t = useTranslations('omniTerminal') // Use optimized selectors for better re-render performance const isOpen = useIsTerminalOpen() const messages = useTerminalMessages() @@ -44,16 +46,24 @@ export const OmniTerminal = () => { const inputRef = useRef(null) const scrollRef = useRef(null) - // CMD+J 快捷鍵 (Phase 19 - 避免 CMD+K 瀏覽器衝突) + // 快捷鍵處理 (Phase 19 - 完整鍵盤支援) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { - // CMD+J: Toggle Terminal + // CMD+J: Toggle Terminal (全局) if (matchShortcut(e, SHORTCUTS.TOGGLE_TERMINAL)) { e.preventDefault() toggleTerminal() return } - // '/': Quick open (非輸入框時) + + // Escape: 關閉 Terminal (當 Terminal 開啟時) + if (e.key === 'Escape' && isOpen) { + e.preventDefault() + toggleTerminal() + return + } + + // '/': Quick open (非輸入框時,Terminal 關閉時) if (e.key === '/' && !isOpen && document.activeElement?.tagName !== 'INPUT') { e.preventDefault() openTerminal() @@ -162,26 +172,30 @@ export const OmniTerminal = () => { } return ( -
- {/* Responsive container: - - Mobile: Full screen - - Tablet: 90% width - - Desktop: max-w-4xl centered */} + <> + {/* Backdrop overlay for mobile - 點擊可關閉 */} + ) }