diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx index a0c9ea4..6b3756e 100644 --- a/src/components/ui/icons.tsx +++ b/src/components/ui/icons.tsx @@ -182,6 +182,28 @@ export function IconTrash2({ size = 20, ...props }: IconProps) { ); } +export function IconMaximize2({ size = 20, ...props }: IconProps) { + return ( + + + + + + + ); +} + +export function IconMinimize2({ size = 20, ...props }: IconProps) { + return ( + + + + + + + ); +} + export function IconPlus({ size = 20, ...props }: IconProps) { return ( diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 26a493b..579b6e1 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -736,6 +736,8 @@ "runtime_home": "Current runtime: Home", "refresh_button": "Refresh Logs", "clear_button": "Clear Logs", + "fullscreen_button": "Full Screen", + "exit_fullscreen_button": "Exit Full Screen", "download_button": "Download Logs", "error_log_button": "Select Error Log", "error_logs_modal_title": "Error Request Logs", diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index b575ff7..bbdc885 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -733,6 +733,8 @@ "runtime_home": "Текущий режим: Home", "refresh_button": "Обновить журналы", "clear_button": "Очистить журналы", + "fullscreen_button": "На весь экран", + "exit_fullscreen_button": "Выйти из полноэкранного режима", "download_button": "Скачать журналы", "error_log_button": "Выбрать журнал ошибок", "error_logs_modal_title": "Журналы ошибок запросов", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index a96bf2e..07f8cd5 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -736,6 +736,8 @@ "runtime_home": "当前运行端:Home", "refresh_button": "刷新日志", "clear_button": "清空日志", + "fullscreen_button": "全屏显示", + "exit_fullscreen_button": "退出全屏", "download_button": "下载日志", "error_log_button": "选择错误日志", "error_logs_modal_title": "错误请求日志", diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json index 28e075b..7a06656 100644 --- a/src/i18n/locales/zh-TW.json +++ b/src/i18n/locales/zh-TW.json @@ -762,6 +762,8 @@ "runtime_home": "目前執行端:Home", "refresh_button": "重新整理記錄", "clear_button": "清空記錄", + "fullscreen_button": "全螢幕顯示", + "exit_fullscreen_button": "退出全螢幕", "download_button": "下載記錄", "error_log_button": "選擇錯誤記錄", "error_logs_modal_title": "錯誤請求記錄", diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss index 6454f90..e14a0bb 100644 --- a/src/pages/LogsPage.module.scss +++ b/src/pages/LogsPage.module.scss @@ -547,8 +547,9 @@ } .requestIdBadge { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', - 'Courier New', monospace; + font-family: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; font-size: 11px; color: #0891b2; background: rgba(8, 145, 178, 0.1); @@ -753,3 +754,47 @@ height: 280px; } } + +.logCardFullscreen { + position: fixed; + inset: 0; + z-index: $z-modal - 1; + min-height: 0; + width: 100vw; + height: 100vh; + padding: $spacing-lg; + border-radius: 0; + border: none; + overflow: hidden; + background: var(--bg-primary); + + @include mobile { + padding: $spacing-md; + min-height: 0; + overflow: hidden; + } +} + +:global(body.logs-fullscreen-active) :global(.page-transition__layer) { + transform: none !important; +} + +.logPanelFullscreen { + flex: 1 1 auto; + min-height: 0; + height: auto; + max-height: none; + resize: none; + + @include tablet { + min-height: 0; + max-height: none; + } + + @include mobile { + flex: 1 1 auto; + min-height: 0; + height: auto; + max-height: none; + } +} diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx index 2b4b908..8898189 100644 --- a/src/pages/LogsPage.tsx +++ b/src/pages/LogsPage.tsx @@ -7,12 +7,15 @@ import { EmptyState } from '@/components/ui/EmptyState'; import { Input } from '@/components/ui/Input'; import { Modal } from '@/components/ui/Modal'; import { ToggleSwitch } from '@/components/ui/ToggleSwitch'; +import { lockScroll, unlockScroll } from '@/components/ui/scrollLock'; import { IconChevronDown, IconChevronUp, IconCode, IconDownload, IconEyeOff, + IconMaximize2, + IconMinimize2, IconRefreshCw, IconSearch, IconSlidersHorizontal, @@ -148,6 +151,7 @@ export function LogsPage() { const [errorLogsError, setErrorLogsError] = useState(''); const [requestLogId, setRequestLogId] = useState(null); const [requestLogDownloading, setRequestLogDownloading] = useState(false); + const [fullscreenLogs, setFullscreenLogs] = useState(false); const logScrollerRef = useRef | null>(null); const requestLogHomeIpByIdRef = useRef>({}); @@ -585,6 +589,27 @@ export function LogsPage() { }; }, []); + useEffect(() => { + if (!fullscreenLogs) return; + + document.body.classList.add('logs-fullscreen-active'); + lockScroll(); + + const handleEscape = (event: KeyboardEvent) => { + if (event.key !== 'Escape') return; + if (document.querySelector('.modal-overlay')) return; + setFullscreenLogs(false); + }; + + document.addEventListener('keydown', handleEscape); + + return () => { + document.removeEventListener('keydown', handleEscape); + document.body.classList.remove('logs-fullscreen-active'); + unlockScroll(); + }; + }, [fullscreenLogs]); + return (
@@ -603,7 +628,10 @@ export function LogsPage() { @@ -611,7 +639,11 @@ export function LogsPage() {
{activeTab === 'logs' && ( - + {showFileLoggingRequired && (
{t( @@ -624,63 +656,67 @@ export function LogsPage() { {error &&
{error}
}
-
- setSearchQuery(e.target.value)} - placeholder={t('logs.search_placeholder')} - className={styles.searchInput} - rightElement={ - searchQuery ? ( - - ) : ( - - ) - } - /> -
+ {!fullscreenLogs && ( + <> +
+ setSearchQuery(e.target.value)} + placeholder={t('logs.search_placeholder')} + className={styles.searchInput} + rightElement={ + searchQuery ? ( + + ) : ( + + ) + } + /> +
-
- -
+ +
+ + )} - {structuredFiltersExpanded && ( + {!fullscreenLogs && structuredFiltersExpanded && (
{t('logs.filter_method')} @@ -837,6 +873,23 @@ export function LogsPage() { {t('logs.clear_button')} +
@@ -845,7 +898,9 @@ export function LogsPage() { ) : logState.buffer.length > 0 && filteredLines.length > 0 ? (
{scroller.canLoadMore && (