xiaoqidun/ofdgo
1
0
Fork 0
mirror of https://github.com/xiaoqidun/ofdgo.git synced 2026-08-30 12:12:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(前端界面): 优化OFDGo WebUI适宽适高
build.yaml / build (push) Successful in 37s
Details

Browse Source
This commit is contained in:
xiaoqidun
2026-07-07 14:07:30 +08:00
parent f1d1f5ed2d
commit 749c71502e
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/webui/ofdgo.css
+3 -6
View File
@@ -16,6 +16,7 @@
--bar-height: 40px; --bar-height: 40px;
--bar-pad: 5px 10px; --bar-pad: 5px 10px;
--control-height: 28px; --control-height: 28px;
--page-space: clamp(14px, 2.5vw, 28px);
--shadow-soft: 0 10px 28px rgba(31, 36, 40, 0.12); --shadow-soft: 0 10px 28px rgba(31, 36, 40, 0.12);
--shadow-page: 0 14px 30px rgba(31, 36, 40, 0.16); --shadow-page: 0 14px 30px rgba(31, 36, 40, 0.16);
} }
@@ -465,13 +466,13 @@ body[data-hide-meta] .meta-panel {
.page-frame { .page-frame {
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
padding: 34px 28px; padding: var(--page-space);
} }
.svg-host { .svg-host {
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: 28px; gap: var(--page-space);
width: max-content; width: max-content;
margin: 0 auto; margin: 0 auto;
} }
@@ -922,10 +923,6 @@ body[data-hide-meta] .meta-panel {
width: 38px; width: 38px;
} }
.page-frame {
padding: 22px 14px;
}
.zoom-label { .zoom-label {
min-width: 34px; min-width: 34px;
} }
assets/webui/ofdgo.js
+10 -5
View File
@@ -17,8 +17,6 @@ const COMMON_FONT_NAMES = [
"Times New Roman", "Times New Roman",
]; ];
const LOCAL_FONT_LOAD_LIMIT = 16; const LOCAL_FONT_LOAD_LIMIT = 16;
const FIT_WIDTH_MARGIN = 72;
const FIT_HEIGHT_MARGIN = 86;
const COMPACT_LAYOUT = window.matchMedia("(max-width: 900px)"); const COMPACT_LAYOUT = window.matchMedia("(max-width: 900px)");
const STATUS = { const STATUS = {
ready: "选择 OFD 文件", ready: "选择 OFD 文件",
@@ -1127,7 +1125,7 @@ function pageShell(index) {
function scrollToPage(index) { function scrollToPage(index) {
const shell = pageShell(index); const shell = pageShell(index);
if (shell) { if (shell) {
shell.scrollIntoView({ block: "start", inline: "nearest" }); shell.scrollIntoView({ block: state.fitMode === "height" ? "center" : "start", inline: "nearest" });
} }
} }
@@ -1542,7 +1540,7 @@ function fitWidth(updateStatus = true) {
return; return;
} }
state.fitMode = "width"; state.fitMode = "width";
const available = Math.max(280, el.pageFrame.clientWidth - FIT_WIDTH_MARGIN); const available = Math.max(280, el.pageFrame.clientWidth - pageSpace() * 2);
const width = Math.max(1, page.width * MM_TO_PX); const width = Math.max(1, page.width * MM_TO_PX);
setScale(available / width, updateStatus, "width"); setScale(available / width, updateStatus, "width");
} }
@@ -1553,9 +1551,12 @@ function fitHeight(updateStatus = true) {
return; return;
} }
state.fitMode = "height"; state.fitMode = "height";
const available = Math.max(220, el.viewerPanel.clientHeight - FIT_HEIGHT_MARGIN); const available = Math.max(220, el.viewerPanel.clientHeight - pageSpace() * 2);
const height = Math.max(1, page.height * MM_TO_PX); const height = Math.max(1, page.height * MM_TO_PX);
setScale(available / height, updateStatus, "height"); setScale(available / height, updateStatus, "height");
if (updateStatus) {
scrollToPage(state.pageIndex);
}
} }
function applyFit(updateStatus = true) { function applyFit(updateStatus = true) {
@@ -1583,6 +1584,10 @@ function currentPageInfo() {
return state.doc?.pages?.[state.pageIndex] || null; return state.doc?.pages?.[state.pageIndex] || null;
} }
function pageSpace() {
return Number.parseFloat(getComputedStyle(el.pageFrame).paddingTop) || 0;
}
function updateControls() { function updateControls() {
const hasDoc = Boolean(state.doc); const hasDoc = Boolean(state.doc);
const pageCount = state.doc ? state.doc.pageCount : 0; const pageCount = state.doc ? state.doc.pageCount : 0;