feat: 历史细节界面现在被称为阅读界面;更改阅读界面的部分样式。新增按沉浸模式按钮后直接F11全屏;

This commit is contained in:
肖应宇 2026-03-11 11:15:22 +08:00
parent 56cd3108ed
commit 67537d6995
7 changed files with 28 additions and 13 deletions

View File

@ -34,7 +34,7 @@ body {
display: flex; display: flex;
gap: 1.5rem; /* 大幅增加间距,更现代 */ gap: 1.5rem; /* 大幅增加间距,更现代 */
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
margin-bottom: 2.5rem; /* margin-bottom: 2.5rem; */
padding-bottom: 0; padding-bottom: 0;
} }

View File

@ -78,7 +78,7 @@ h2 {
.history-export-controls { .history-export-controls {
position: relative; position: relative;
margin-bottom: 16px; /* margin-bottom: 16px; */
} }
.export-panel-backdrop { .export-panel-backdrop {

View File

@ -1325,7 +1325,7 @@
<!-- 处理按钮 --> <!-- 处理按钮 -->
<div class="flex justify-center mt-8 mb-12"> <div class="flex justify-center mt-8 mb-12">
<button id="processBtn" class="btn-primary-large px-10 py-4 text-lg font-semibold text-white rounded-2xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-3 hover:scale-[1.02] active:scale-[0.98]" style="background: var(--color-primary);"> <button id="processBtn" class="btn-primary-large px-10 hidden py-4 text-lg font-semibold text-white rounded-2xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-3 hover:scale-[1.02] active:scale-[0.98]" style="background: var(--color-primary);">
<iconify-icon icon="carbon:rocket" width="24"></iconify-icon> <iconify-icon icon="carbon:rocket" width="24"></iconify-icon>
<span>开始处理</span> <span>开始处理</span>
</button> </button>

View File

@ -1222,7 +1222,7 @@ function initChatbotUI() {
</div> </div>
<!-- 标题栏 (可拖拽移动窗口) --> <!-- 标题栏 (可拖拽移动窗口) -->
<div id="chatbot-title-bar" class="chatbot-draggable-header" style="padding:12px 24px;display:flex;align-items:center;gap:8px;border-bottom:1px dashed rgba(0,0,0,0.1);flex-shrink:0;"> <div id="chatbot-title-bar" class="chatbot-draggable-header" style="padding:12px 24px;display:flex;align-items:center;gap:8px;border-bottom:1px dashed rgba(0,0,0,0.1);flex-shrink:0;">
<div style="width:32px;height:32px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;"> <div style="width:32px;height:32px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;display:none;">
<i class="fa-solid fa-robot" style="font-size: 14px; color: white;"></i> <i class="fa-solid fa-robot" style="font-size: 14px; color: white;"></i>
</div> </div>
<span style="font-weight:600;font-size:1.05em;color:#111;">AI 智能助手</span> <span style="font-weight:600;font-size:1.05em;color:#111;">AI 智能助手</span>

View File

@ -734,11 +734,21 @@
simpleToggleBtn.innerHTML = '<i class="fas fa-eye-slash"></i>'; simpleToggleBtn.innerHTML = '<i class="fas fa-eye-slash"></i>';
simpleToggleBtn.title = '退出简单沉浸模式'; simpleToggleBtn.title = '退出简单沉浸模式';
localStorage.setItem(LS_SIMPLE_IMMERSIVE_KEY, 'true'); localStorage.setItem(LS_SIMPLE_IMMERSIVE_KEY, 'true');
// 自动进入全屏
document.documentElement.requestFullscreen().catch(err => {
console.warn('无法进入全屏模式:', err);
});
} else { } else {
// 退出简单沉浸模式 // 退出简单沉浸模式
document.body.classList.remove('simple-immersive-pdf-mode'); document.body.classList.remove('simple-immersive-pdf-mode');
document.body.classList.remove('simple-immersive-pdf-mode'); document.body.classList.remove('simple-immersive-pdf-mode');
// 如果在全屏状态,退出全屏
if (document.fullscreenElement) {
document.exitFullscreen();
}
// 恢复container的padding // 恢复container的padding
if (mainContainer && mainContainer.dataset.originalPadding !== undefined) { if (mainContainer && mainContainer.dataset.originalPadding !== undefined) {
mainContainer.style.padding = mainContainer.dataset.originalPadding; mainContainer.style.padding = mainContainer.dataset.originalPadding;

View File

@ -2000,7 +2000,7 @@
--doorhanger-icon-opacity: 0.9; --doorhanger-icon-opacity: 0.9;
--main-color: rgba(12, 12, 13, 1); --main-color: rgba(12, 12, 13, 1);
--body-bg-color: rgba(212, 212, 215, 1); --body-bg-color: #f3f4f5;
--progressBar-color: rgba(10, 132, 255, 1); --progressBar-color: rgba(10, 132, 255, 1);
--progressBar-bg-color: rgba(221, 221, 222, 1); --progressBar-bg-color: rgba(221, 221, 222, 1);
--progressBar-blend-color: rgba(116, 177, 239, 1); --progressBar-blend-color: rgba(116, 177, 239, 1);
@ -2011,7 +2011,7 @@
--sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9); --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
--sidebar-toolbar-bg-color: rgba(245, 246, 247, 1); --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
--toolbar-bg-color: rgba(249, 249, 250, 1); --toolbar-bg-color: #ffffff;
--toolbar-border-color: rgba(184, 184, 184, 1); --toolbar-border-color: rgba(184, 184, 184, 1);
--toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color); --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom: none; --toolbar-border-bottom: none;
@ -2019,7 +2019,7 @@
rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25),
0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1); 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
--toolbarSidebar-border-bottom: none; --toolbarSidebar-border-bottom: none;
--button-hover-color: rgba(221, 222, 223, 1); --button-hover-color: #e6ecfb;
--toggled-btn-color: rgba(0, 0, 0, 1); --toggled-btn-color: rgba(0, 0, 0, 1);
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3); --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4); --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
@ -2308,6 +2308,7 @@ body {
z-index: 9999; z-index: 9999;
cursor: default; cursor: default;
font: message-box; font: message-box;
background-color: var(--toolbar-bg-color);
} }
:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer) :is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
@ -2345,7 +2346,7 @@ body {
position: relative; position: relative;
height: 32px; height: 32px;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
box-shadow: var(--toolbar-box-shadow); /* box-shadow: var(--toolbar-box-shadow); */
border-bottom: var(--toolbar-border-bottom); border-bottom: var(--toolbar-border-bottom);
} }
@ -3181,7 +3182,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
user-select: none; user-select: none;
} }
#thumbnailView { #thumbnailView {
width: calc(100% - 60px); width: 100%;
padding: 10px 30px 0; padding: 10px 30px 0;
} }

View File

@ -29,6 +29,9 @@ See https://github.com/adobe-type-tools/cmap-resources
<!-- This snippet is used in production (included from viewer.html) --> <!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="locale/locale.properties"> <link rel="resource" type="application/l10n" href="locale/locale.properties">
<!-- 引入tailwindcss -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="../build/pdf.js"></script> <script src="../build/pdf.js"></script>
<link rel="stylesheet" href="viewer.css"> <link rel="stylesheet" href="viewer.css">
@ -269,19 +272,20 @@ See https://github.com/adobe-type-tools/cmap-resources
<span id="numPages" class="toolbarLabel"></span> <span id="numPages" class="toolbarLabel"></span>
</div> </div>
<div id="toolbarViewerRight"> <div id="toolbarViewerRight">
<button id="openFile" class="toolbarButton hiddenLargeView" title="Open File" tabindex="31" data-l10n-id="open_file"> <!-- 直接注释会PDF加载失败 -->
<button id="openFile" class="toolbarButton hiddenLargeView hidden" title="Open File" tabindex="31" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span> <span data-l10n-id="open_file_label">Open</span>
</button> </button>
<button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="32" data-l10n-id="print"> <button id="print" class="toolbarButton hiddenMediumView hidden" title="Print" tabindex="32" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span> <span data-l10n-id="print_label">Print</span>
</button> </button>
<button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="33" data-l10n-id="save"> <button id="download" class="toolbarButton hiddenMediumView hidden" title="Save" tabindex="33" data-l10n-id="save">
<span data-l10n-id="save_label">Save</span> <span data-l10n-id="save_label">Save</span>
</button> </button>
<div class="verticalToolbarSeparator hiddenMediumView"></div> <div class="verticalToolbarSeparator hiddenMediumView hidden"></div>
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup"> <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="editor_free_text2"> <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="editor_free_text2">