diff --git a/css/history_detail/02-layout/immersive.css b/css/history_detail/02-layout/immersive.css index 561a075..5f8c40e 100644 --- a/css/history_detail/02-layout/immersive.css +++ b/css/history_detail/02-layout/immersive.css @@ -674,10 +674,7 @@ body.immersive-active #immersive-main-content-area .container { flex-direction: column !important; } -/* 沉浸模式下显示 PDF 对照按钮(用户要求在沉浸模式中也能使用) */ -body.immersive-active #tab-pdf-compare { - display: flex !important; -} +/* PDF 对照按钮已隐藏(用户要求页面始终沉浸模式,无需此功能) */ /* Modal 和右键菜单的 z-index 提升 */ body.immersive-active .modal-overlay { diff --git a/js/ui/immersive_layout_logic.js b/js/ui/immersive_layout_logic.js index 28fc894..bc22c41 100644 --- a/js/ui/immersive_layout_logic.js +++ b/js/ui/immersive_layout_logic.js @@ -431,127 +431,10 @@ localStorage.setItem(LS_IMMERSIVE_KEY, 'true'); document.dispatchEvent(new CustomEvent('immersiveModeEntered')); } + // 禁用退出沉浸模式功能 - 页面始终保持在沉浸式布局 function exitImmersiveMode() { - reQueryDynamicElements(); - isImmersiveActive = false; - - // 添加退出动画 - document.body.classList.add('immersive-exiting'); - if (immersiveContainer) { - immersiveContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; - immersiveContainer.style.opacity = '0'; - immersiveContainer.style.transform = 'scale(0.98)'; - } - - setTimeout(() => { - destroyTocDockResizer(); - - // Remove the TOC vs Dock resize handle - if (tocVsDockResizeHandle && tocVsDockResizeHandle.parentNode === immersiveTocArea) { - immersiveTocArea.removeChild(tocVsDockResizeHandle); - } - - // 恢复元素位置的逻辑保持不变... - if (originalTocPopupParent && tocPopupElement && tocPopupElement.parentNode === immersiveTocArea) { - originalTocPopupParent.insertBefore(tocPopupElement, originalTocPopupNextSibling); - } else if (tocPopupElement && immersiveTocArea.contains(tocPopupElement)) { - immersiveTocArea.removeChild(tocPopupElement); - if (originalTocPopupParent) { - originalTocPopupParent.insertBefore(tocPopupElement, originalTocPopupNextSibling); - } - } - - if (originalMainContainerParent && mainPageContainer && mainPageContainer.parentNode === immersiveMainArea) { - originalMainContainerParent.insertBefore(mainPageContainer, originalMainContainerNextSibling); - } else if (mainPageContainer && immersiveMainArea.contains(mainPageContainer)) { - immersiveMainArea.removeChild(mainPageContainer); - if (originalMainContainerParent) { - originalMainContainerParent.insertBefore(mainPageContainer, originalMainContainerNextSibling); - } - } - - if (chatbotModalElement && originalChatbotModalParent && chatbotModalElement.parentNode === immersiveChatbotArea) { - originalChatbotModalParent.insertBefore(chatbotModalElement, originalChatbotModalNextSibling); - } else if (chatbotModalElement && immersiveChatbotArea.contains(chatbotModalElement)) { - immersiveChatbotArea.removeChild(chatbotModalElement); - if (originalChatbotModalParent) { - originalChatbotModalParent.insertBefore(chatbotModalElement, originalChatbotModalNextSibling); - } - } else if (!chatbotModalElement && originalChatbotModalParent) { - immersiveChatbotArea.innerHTML = ''; - } - - if (dockElement && originalDockElementParent) { - if (immersiveDockPlaceholderElement && immersiveDockPlaceholderElement.contains(dockElement)) { - immersiveDockPlaceholderElement.removeChild(dockElement); - } - originalDockElementParent.insertBefore(dockElement, originalDockElementNextSibling); - } else if (dockElement && immersiveDockPlaceholderElement && immersiveDockPlaceholderElement.contains(dockElement)){ - immersiveDockPlaceholderElement.removeChild(dockElement); - } - - document.body.classList.remove('immersive-active', 'no-scroll', 'immersive-exiting'); - if (immersiveContainer) { - immersiveContainer.style.display = 'none'; - immersiveContainer.style.transition = ''; - immersiveContainer.style.opacity = ''; - immersiveContainer.style.transform = ''; - } - - // 清理滚动容器标记 class - if (mainPageContainer) { - const tabContent = mainPageContainer.querySelector('.tab-content'); - if (tabContent) { - tabContent.classList.remove('js-scroll-container'); - console.log("[ImmersiveLayout] 已移除 tab-content 的 js-scroll-container 标记"); - } - } - - if (toggleBtn) { - toggleBtn.innerHTML = ''; - toggleBtn.classList.remove('immersive-exit-btn-active'); - toggleBtn.title = '进入沉浸式布局'; - } - - // 其他退出逻辑保持不变... - if (typeof window.refreshTocList === 'function') { - window.refreshTocList(); - } - - if (typeof window.docIdForLocalStorage !== 'undefined' && window.docIdForLocalStorage) { - const savedChatbotOpenState = localStorage.getItem(`chatbotOpenState_${window.docIdForLocalStorage}`); - if (savedChatbotOpenState === 'true') { - window.isChatbotOpen = true; - } else if (savedChatbotOpenState === 'false') { - window.isChatbotOpen = false; - } - } - - if (window.ChatbotUI && typeof window.ChatbotUI.updateChatbotUI === 'function') { - window.ChatbotUI.updateChatbotUI(); - } - - if (window.DockLogic && typeof window.DockLogic.updateStats === 'function' && window.data && window.currentVisibleTabId) { - dockElement.style.display = ''; - window.DockLogic.updateStats(window.data, window.currentVisibleTabId); - } - - setTimeout(() => { - if (window.DockLogic) { - if (typeof window.DockLogic.unbindScrollForCurrentScrollable === 'function') { - console.log("[ImmersiveLayout] 退出沉浸模式前,先解绑旧的滚动事件"); - window.DockLogic.unbindScrollForCurrentScrollable(); - } - if (typeof window.DockLogic.forceUpdateReadingProgress === 'function') { - console.log("[ImmersiveLayout] 退出沉浸模式后,延迟调用 forceUpdateReadingProgress"); - window.DockLogic.forceUpdateReadingProgress(); - } - } - }, 300); - - localStorage.setItem(LS_IMMERSIVE_KEY, 'false'); - document.dispatchEvent(new CustomEvent('immersiveModeExited')); - }, 300); + // 已禁用:页面始终保持在沉浸式布局 + console.log('[ImmersiveLayout] 退出沉浸模式功能已禁用'); } function initResizeHandles() { @@ -637,228 +520,39 @@ reQueryDynamicElements(); - // 标准沉浸模式切换按钮 - const standardToggleBtn = document.getElementById('toggle-immersive-btn'); - // 简单沉浸模式切换按钮 - const simpleToggleBtn = document.getElementById('toggle-simple-immersive-btn'); - - // 标准沉浸模式功能 - if (standardToggleBtn) { - standardToggleBtn.addEventListener('click', () => { - // 检查是否为移动端设备(屏幕宽度小于等于700px) - if (window.innerWidth <= 700) { - console.warn('沉浸式布局在移动端(≤700px)不可用'); - // 可选:显示提示消息 - if (window.showToast) { - window.showToast('沉浸式布局在手机端不可用', 'warning'); - } else { - alert('沉浸式布局在手机端不可用,请在更大的屏幕上使用'); - } - return; - } - - if (isImmersiveActive) { - exitImmersiveMode(); - } else { - enterImmersiveMode(); - } - }); - } - - // 简单沉浸模式功能 - if (simpleToggleBtn) { - simpleToggleBtn.addEventListener('click', () => { - isSimpleImmersiveActive = !isSimpleImmersiveActive; - - // 检查是否在"原始文件"标签页(PDF查看器) - const isOriginalFileTab = window.currentVisibleTabId === 'original-file'; - const pdfIframeWrapper = document.getElementById('pdf-iframe-wrapper'); - const pdfIframe = document.getElementById('pdf-viewer-iframe'); - const mainContainer = document.querySelector('.container'); - - if (isSimpleImmersiveActive) { - // 如果是PDF查看器标签页,进行特殊处理 - if (isOriginalFileTab && pdfIframeWrapper && mainContainer) { - // 添加特殊类用于PDF全屏模式 - document.body.classList.add('simple-immersive-pdf-mode'); - - // 移除container的padding - mainContainer.dataset.originalPadding = mainContainer.style.padding || ''; - mainContainer.style.padding = '0 !important'; - - // 让iframe wrapper充满container(接近全屏) - pdfIframeWrapper.style.cssText = ` - width: 100%; - height: calc(100vh - 20px); - min-height: calc(100vh - 20px); - position: relative; - background: #525659; - `; - - if (pdfIframe) { - pdfIframe.style.cssText = ` - width: 100%; - height: 100%; - border: none; - `; - } - - // 隐藏其他UI元素 - const elementsToHide = [ - { selector: '.tabs-container', el: document.querySelector('.tabs-container') }, - { selector: '.history-export-controls', el: document.querySelector('.history-export-controls') }, - { selector: '#bottom-left-dock', el: document.getElementById('bottom-left-dock') }, - { selector: '#toc-popup', el: document.getElementById('toc-popup') }, - { selector: '#fileName', el: document.getElementById('fileName') }, - { selector: '#fileMeta', el: document.getElementById('fileMeta') } - ]; - - elementsToHide.forEach(item => { - if (item.el) { - item.el.dataset.originalDisplay = item.el.style.display || ''; - item.el.style.display = 'none'; - } - }); - - // 隐藏loading指示器 - const loading = document.getElementById('pdf-viewer-loading'); - if (loading) loading.style.display = 'none'; - - // 确保iframe显示 - if (pdfIframe) pdfIframe.style.display = 'block'; - } else { - // 非PDF查看器标签页,使用原有的简单沉浸模式 - document.body.classList.add('simple-immersive-pdf-mode'); - } - - simpleToggleBtn.innerHTML = ''; - simpleToggleBtn.title = '退出简单沉浸模式'; - localStorage.setItem(LS_SIMPLE_IMMERSIVE_KEY, 'true'); - - // 自动进入全屏 - document.documentElement.requestFullscreen().catch(err => { - console.warn('无法进入全屏模式:', err); - }); - } else { - // 退出简单沉浸模式 - document.body.classList.remove('simple-immersive-pdf-mode'); - document.body.classList.remove('simple-immersive-pdf-mode'); - - // 如果在全屏状态,退出全屏 - if (document.fullscreenElement) { - document.exitFullscreen(); - } - - // 恢复container的padding - if (mainContainer && mainContainer.dataset.originalPadding !== undefined) { - mainContainer.style.padding = mainContainer.dataset.originalPadding; - delete mainContainer.dataset.originalPadding; - } - - // 恢复所有被隐藏的元素 - const elementsToRestore = [ - { selector: '.tabs-container', el: document.querySelector('.tabs-container') }, - { selector: '.history-export-controls', el: document.querySelector('.history-export-controls') }, - { selector: '#bottom-left-dock', el: document.getElementById('bottom-left-dock') }, - { selector: '#toc-popup', el: document.getElementById('toc-popup') }, - { selector: '#fileName', el: document.getElementById('fileName') }, - { selector: '#fileMeta', el: document.getElementById('fileMeta') } - ]; - - elementsToRestore.forEach(item => { - if (item.el && item.el.dataset.originalDisplay !== undefined) { - item.el.style.display = item.el.dataset.originalDisplay; - delete item.el.dataset.originalDisplay; - } - }); - - // 恢复iframe wrapper的原始样式 - if (pdfIframeWrapper) { - pdfIframeWrapper.style.cssText = ` - width: 100%; - height: 100%; - min-height: 500px; - position: relative; - background: #525659; - `; - } - - simpleToggleBtn.innerHTML = ''; - simpleToggleBtn.title = '进入简单沉浸模式'; - localStorage.setItem(LS_SIMPLE_IMMERSIVE_KEY, 'false'); - } - }); - } + // 按钮已隐藏,退出功能已禁用,页面始终处于沉浸模式 + // 不再需要按钮事件监听器 initResizeHandles(); - // 监听窗口大小变化,如果变成移动端尺寸则自动退出沉浸模式 - function handleWindowResize() { - if (window.innerWidth <= 700 && isImmersiveActive) { - console.log('检测到屏幕缩小到移动端尺寸,自动退出沉浸式布局'); - exitImmersiveMode(); - } - } + // 禁用:窗口大小变化时不再自动退出沉浸模式 + // function handleWindowResize() { + // if (window.innerWidth <= 700 && isImmersiveActive) { + // console.log('检测到屏幕缩小到移动端尺寸,自动退出沉浸式布局'); + // exitImmersiveMode(); + // } + // } + // window.addEventListener('resize', handleWindowResize); - // 添加窗口大小变化监听器 - window.addEventListener('resize', handleWindowResize); + // 强制始终进入沉浸模式(忽略 localStorage 状态) + // 页面默认沉浸式布局,且无法退出 + const shouldEnterImmersive = true; - // Restore immersive state from localStorage - const savedImmersiveState = localStorage.getItem(LS_IMMERSIVE_KEY); + console.log('[ImmersiveLayout] 强制进入沉浸模式'); - // 历史详情页默认进入沉浸模式,只有用户明确退出过才不进入 - // 注意:null 表示首次访问,'true' 表示用户之前处于沉浸模式 - // 只有 'false' 才表示用户主动退出过沉浸模式 - const shouldEnterImmersive = savedImmersiveState !== 'false'; - - console.log('[ImmersiveLayout] savedImmersiveState:', savedImmersiveState, 'shouldEnterImmersive:', shouldEnterImmersive); - - if (shouldEnterImmersive) { - // 检查是否为移动端,如果是则不恢复沉浸模式 - if (window.innerWidth <= 700) { - console.log('检测到移动端设备,不进入沉浸式布局'); - localStorage.setItem(LS_IMMERSIVE_KEY, 'false'); - // 显示页面 - document.documentElement.classList.remove('immersive-pending'); - document.documentElement.classList.add('immersive-ready'); - document.body.classList.remove('immersive-pending'); - document.body.classList.add('immersive-ready'); - } else { - // 立即进入沉浸模式(静默模式,无动画) - console.log('[ImmersiveLayout] 准备进入沉浸模式, isImmersiveActive:', isImmersiveActive); - enterImmersiveMode({ silent: true }); - console.log('[ImmersiveLayout] enterImmersiveMode 调用完成, isImmersiveActive:', isImmersiveActive); - } - } else { - // 不需要沉浸模式,直接显示页面 + // 检查是否为移动端,如果是则不进入沉浸模式 + if (window.innerWidth <= 700) { + console.log('检测到移动端设备,不进入沉浸式布局'); + // 显示页面 document.documentElement.classList.remove('immersive-pending'); document.documentElement.classList.add('immersive-ready'); document.body.classList.remove('immersive-pending'); document.body.classList.add('immersive-ready'); - } - - // Restore simple immersive state from localStorage - const savedSimpleImmersiveState = localStorage.getItem(LS_SIMPLE_IMMERSIVE_KEY); - if (savedSimpleImmersiveState === 'true') { - // 检查是否为移动端,如果是则不启用简单沉浸模式 - if (window.innerWidth <= 700) { - console.log('检测到移动端设备,不启用简单沉浸式布局状态'); - localStorage.setItem(LS_SIMPLE_IMMERSIVE_KEY, 'false'); // 清除保存的状态 - } else { - // 如果不在标准沉浸模式下,才启用简单沉浸模式 - if (!isImmersiveActive) { - setTimeout(() => { - if (!isSimpleImmersiveActive) { - document.body.classList.add('simple-immersive-pdf-mode'); - isSimpleImmersiveActive = true; - if (toggleBtn) { - toggleBtn.innerHTML = ''; - toggleBtn.title = '退出简单沉浸模式'; - } - } - }, 200); - } - } + } else { + // 立即进入沉浸模式(静默模式,无动画) + console.log('[ImmersiveLayout] 准备进入沉浸模式, isImmersiveActive:', isImmersiveActive); + enterImmersiveMode({ silent: true }); + console.log('[ImmersiveLayout] enterImmersiveMode 调用完成, isImmersiveActive:', isImmersiveActive); } console.log('Immersive layout logic initialized.'); diff --git a/views/history/history_detail.html b/views/history/history_detail.html index 79f186c..962dcf0 100644 --- a/views/history/history_detail.html +++ b/views/history/history_detail.html @@ -111,7 +111,7 @@ -