feat: 禁用退出沉浸模式功能，页面始终保持在沉浸式布局
- 移除退出沉浸模式的所有逻辑代码（360 行→29 行） - 隐藏"简单沉浸模式"切换按钮 - 移除 PDF 对照按钮的显示样式 - 简化初始化逻辑，强制默认进入沉浸模式
This commit is contained in:
parent
fcd490b1f5
commit
96f136a9bc
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 = '<i class="fas fa-expand-alt"></i>';
|
||||
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 = '<i class="fas fa-eye-slash"></i>';
|
||||
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 = '<i class="fas fa-eye"></i>';
|
||||
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 = '<i class="fas fa-compress-alt"></i>';
|
||||
toggleBtn.title = '退出简单沉浸模式';
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 立即进入沉浸模式（静默模式，无动画）
|
||||
console.log('[ImmersiveLayout] 准备进入沉浸模式, isImmersiveActive:', isImmersiveActive);
|
||||
enterImmersiveMode({ silent: true });
|
||||
console.log('[ImmersiveLayout] enterImmersiveMode 调用完成, isImmersiveActive:', isImmersiveActive);
|
||||
}
|
||||
|
||||
console.log('Immersive layout logic initialized.');
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
</button>
|
||||
|
||||
<!-- Simple Immersive Mode Toggle Button -->
|
||||
<button id="toggle-simple-immersive-btn" class="tiny-round-btn" style="top: 70px !important;" title="进入简单沉浸模式">
|
||||
<button id="toggle-simple-immersive-btn" class="tiny-round-btn hidden" style="display: none;" title="进入简单沉浸模式">
|
||||
<i class="fas fa-eye"></i>
|
||||
<!-- Icon for simple immersive mode -->
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue