feat(前端界面): 优化OFDGo WebUI适宽适高

assets/webui/ofdgo.css

@@ -16,6 +16,7 @@
 	--bar-height: 40px;
 	--bar-pad: 5px 10px;
 	--control-height: 28px;
+	--page-space: clamp(14px, 2.5vw, 28px);
 	--shadow-soft: 0 10px 28px rgba(31, 36, 40, 0.12);
 	--shadow-page: 0 14px 30px rgba(31, 36, 40, 0.16);
 }
@@ -465,13 +466,13 @@ body[data-hide-meta] .meta-panel {
 .page-frame {
 	min-width: 100%;
 	min-height: 100%;
-	padding: 34px 28px;
+	padding: var(--page-space);
 }
 
 .svg-host {
 	display: grid;
 	justify-items: center;
-	gap: 28px;
+	gap: var(--page-space);
 	width: max-content;
 	margin: 0 auto;
 }
@@ -922,10 +923,6 @@ body[data-hide-meta] .meta-panel {
 		width: 38px;
 	}
 
-	.page-frame {
-		padding: 22px 14px;
-	}
-
 	.zoom-label {
 		min-width: 34px;
 	}

assets/webui/ofdgo.js

@@ -17,8 +17,6 @@ const COMMON_FONT_NAMES = [
 	"Times New Roman",
 ];
 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 STATUS = {
 	ready: "选择 OFD 文件",
@@ -1127,7 +1125,7 @@ function pageShell(index) {
 function scrollToPage(index) {
 	const shell = pageShell(index);
 	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;
 	}
 	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);
 	setScale(available / width, updateStatus, "width");
 }
@@ -1553,9 +1551,12 @@ function fitHeight(updateStatus = true) {
 		return;
 	}
 	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);
 	setScale(available / height, updateStatus, "height");
+	if (updateStatus) {
+		scrollToPage(state.pageIndex);
+	}
 }
 
 function applyFit(updateStatus = true) {
@@ -1583,6 +1584,10 @@ function currentPageInfo() {
 	return state.doc?.pages?.[state.pageIndex] || null;
 }
 
+function pageSpace() {
+	return Number.parseFloat(getComputedStyle(el.pageFrame).paddingTop) || 0;
+}
+
 function updateControls() {
 	const hasDoc = Boolean(state.doc);
 	const pageCount = state.doc ? state.doc.pageCount : 0;