feat(前端界面): 精简渲染设置，统一DPI控制，优化工具栏宽窄屏布局

assets/webui/index.html

@@ -43,14 +43,18 @@
 				<button id="continuousButton" class="button" type="button" data-short="连" title="连续显示" aria-label="连续显示" aria-pressed="false" disabled>连续</button>
 				<button id="annotationButton" class="button" type="button" data-short="注" title="隐藏注解" aria-label="隐藏注解" aria-pressed="true">注解</button>
 			</div>
+			<div class="tool-group" role="group" aria-label="显示">
+				<button id="renderVectorButton" class="button" type="button" data-short="矢" aria-label="矢量显示" aria-pressed="true" title="矢量显示" disabled>矢量</button>
+				<button id="renderRasterButton" class="button" type="button" data-short="位" aria-label="位图显示" aria-pressed="false" title="位图显示" disabled>位图</button>
+			</div>
 			<div class="tool-group" role="group" aria-label="导出">
-				<select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select>
+				<label class="toolbar-select"><select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select><span id="formatValue" aria-hidden="true"></span></label>
-				<select id="imageDPI" class="format-select dpi-select" title="导出DPI（仅PNG/JPG）" aria-label="导出DPI" disabled>
+				<label class="toolbar-select"><select id="imageDPI" class="format-select" title="DPI" aria-label="DPI" disabled>
 					<option value="96">96 dpi</option>
 					<option value="150">150 dpi</option>
 					<option value="300" selected>300 dpi</option>
 					<option value="600">600 dpi</option>
-				</select>
+				</select><span id="dpiValue" aria-hidden="true">300</span></label>
 				<button id="exportPageButton" class="button" type="button" data-short="单" title="导出单页" aria-label="导出单页" disabled>单页</button>
 				<button id="exportButton" class="button" type="button" data-short="多" title="导出文档" aria-label="导出文档" aria-haspopup="dialog" aria-controls="exportPanel" disabled>文档</button>
 			</div>
@@ -486,28 +490,6 @@
 						</div>
 					</div>
 				</section>
-				<section id="renderPanel" class="render-panel" aria-label="渲染">
-					<div class="panel-row">
-						<label class="panel-title compact" for="renderBackend">渲染</label>
-						<div class="render-controls">
-							<select id="renderBackend" title="渲染后端" disabled></select>
-						</div>
-					</div>
-					<div class="render-mode-row">
-						<span id="renderModeLabel">预览</span>
-						<div class="render-controls">
-							<div class="render-modes" role="group" aria-labelledby="renderModeLabel">
-								<button id="renderVectorButton" class="small-button" type="button" aria-pressed="true" title="矢量显示" disabled>矢量</button>
-								<button id="renderRasterButton" class="small-button" type="button" aria-pressed="false" title="位图显示" disabled>位图</button>
-							</div>
-							<select id="renderDPI" aria-label="预览DPI" title="预览DPI（仅位图）" disabled><option value="96">96 dpi</option><option value="150" selected>150 dpi</option><option value="300">300 dpi</option><option value="600">600 dpi</option></select>
-						</div>
-					</div>
-					<details class="render-support">
-						<summary>详情</summary>
-						<dl><div><dt>显示</dt><dd id="renderDisplay">SVG</dd></div><div><dt>编辑</dt><dd>SVG</dd></div><div><dt>字体</dt><dd id="renderFonts"></dd></div><div><dt>几何</dt><dd id="renderGeometry"></dd></div><div><dt>编译</dt><dd id="renderCompiler"></dd></div><div><dt>图片</dt><dd id="renderImages"></dd></div><div><dt>SVG</dt><dd id="renderSVG"></dd></div><div><dt>PDF</dt><dd id="renderPDF"></dd></div><div><dt>EPS</dt><dd id="renderEPS"></dd></div></dl>
-					</details>
-				</section>
 				<div class="panel-row">
 					<div class="panel-title compact">文档</div>
 					<button id="infoButton" class="small-button" type="button" aria-label="修改文档信息" aria-haspopup="dialog" aria-controls="infoPanel" hidden>修改</button>

assets/webui/ofdgo.css

@@ -607,8 +607,7 @@ button:not(:disabled):hover {
 }
 
 .format-select,
-.order-select,
+.order-select {
-.render-panel select {
 	width: 58px;
 	height: var(--control-height);
 	min-width: 0;
@@ -619,8 +618,46 @@ button:not(:disabled):hover {
 	color: #1f2428;
 }
 
-.dpi-select {
+.toolbar-select {
-	width: 79px;
+	position: relative;
+	display: inline-flex;
+}
+
+.toolbar-select .format-select {
+	width: calc(2em + 22px);
+	border-color: var(--line-strong);
+	appearance: none;
+	color: transparent;
+}
+
+.toolbar-select option {
+	color: #1f2428;
+}
+
+.toolbar-select > span {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-right: 12px;
+	pointer-events: none;
+}
+
+.toolbar-select::after {
+	position: absolute;
+	right: 7px;
+	top: calc(50% - 2px);
+	border: 4px solid transparent;
+	border-bottom: 0;
+	border-top-color: currentColor;
+	pointer-events: none;
+	content: "";
+}
+
+.toolbar-select select:disabled + span,
+.toolbar-select:has(select:disabled)::after {
+	opacity: 0.48;
 }
 
 .form-dialog {
@@ -1014,99 +1051,6 @@ body[data-hide-meta] .meta-panel {
 	font-size: 12px;
 }
 
-.render-panel {
-	--render-controls-width: 166px;
-	--render-modes-width: 79px;
-	position: relative;
-	margin-bottom: 12px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid var(--line);
-}
-
-.render-panel select {
-	width: 100%;
-	height: 28px;
-	font-size: 12px;
-}
-
-.render-mode-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	font-size: 12px;
-}
-
-.render-panel .panel-row {
-	flex-wrap: nowrap;
-	margin-bottom: 6px;
-}
-
-.render-controls {
-	display: grid;
-	grid-template-columns: var(--render-modes-width) minmax(0, 1fr);
-	align-items: center;
-	width: var(--render-controls-width);
-	gap: 8px;
-}
-
-.render-modes {
-	display: flex;
-	flex: none;
-}
-
-.render-modes .small-button {
-	width: 40px;
-	height: 28px;
-	padding: 0;
-}
-
-.render-modes .small-button + .small-button {
-	margin-left: -1px;
-}
-
-.render-modes .small-button[aria-pressed="true"] {
-	position: relative;
-	border-color: var(--accent);
-	background: var(--accent-soft);
-	color: var(--accent-strong);
-}
-
-.render-support {
-	font-size: 12px;
-	color: var(--text-muted);
-}
-
-.render-support summary {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: calc(var(--render-controls-width) - var(--render-modes-width) - 8px);
-	text-align: center;
-	line-height: 28px;
-	cursor: pointer;
-	color: var(--accent-strong);
-}
-
-.render-support dl {
-	margin: 8px 0 0;
-}
-
-.render-support dl > div {
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	margin-top: 6px;
-}
-
-.render-support dd {
-	min-width: 0;
-	margin: 0;
-	text-align: right;
-	overflow-wrap: anywhere;
-	color: #1f2428;
-}
-
 .app-refresh {
 	width: 26px;
 	padding: 0;
@@ -2660,12 +2604,17 @@ button.outline-link:hover {
 		min-width: 34px;
 	}
 
-	.format-select {
+	.toolbar-select .format-select {
-		width: 52px;
+		width: var(--control-height);
-		padding: 0 3px;
+		padding: 0;
 	}
 
-	.dpi-select {
+	.toolbar-select::after {
-		width: 79px;
+		display: none;
+	}
+
+	.toolbar-select > span {
+		padding: 0;
+		font-size: 11px;
 	}
 }

assets/webui/ofdgo.js

@@ -88,8 +88,7 @@ const state = {
 	renderAnnotations: true,
 	renderBackend: "canvas",
 	renderMode: "svg",
-	renderBackends: {},
+	renderDPI: DEFAULT_IMAGE_DPI,
-	renderDPI: 150,
 	pageCache: new Map(),
 	svgFonts: new Map(),
 	svgImages: new Map(),
@@ -353,6 +352,8 @@ const el = {
 	continuousButton: document.querySelector("#continuousButton"),
 	annotationButton: document.querySelector("#annotationButton"),
 	imageDPI: document.querySelector("#imageDPI"),
+	dpiValue: document.querySelector("#dpiValue"),
+	formatValue: document.querySelector("#formatValue"),
 	exportFormat: document.querySelector("#exportFormat"),
 	exportPageButton: document.querySelector("#exportPageButton"),
 	exportButton: document.querySelector("#exportButton"),
@@ -397,18 +398,8 @@ const el = {
 	searchResults: document.querySelector("#searchResults"),
 	metaPanel: document.querySelector(".meta-panel"),
 	appPanel: document.querySelector("#appPanel"),
-	renderBackend: document.querySelector("#renderBackend"),
-	renderDPI: document.querySelector("#renderDPI"),
 	renderVectorButton: document.querySelector("#renderVectorButton"),
 	renderRasterButton: document.querySelector("#renderRasterButton"),
-	renderDisplay: document.querySelector("#renderDisplay"),
-	renderImages: document.querySelector("#renderImages"),
-	renderSVG: document.querySelector("#renderSVG"),
-	renderPDF: document.querySelector("#renderPDF"),
-	renderEPS: document.querySelector("#renderEPS"),
-	renderCompiler: document.querySelector("#renderCompiler"),
-	renderFonts: document.querySelector("#renderFonts"),
-	renderGeometry: document.querySelector("#renderGeometry"),
 	offlineStatus: document.querySelector("#offlineStatus"),
 	refreshAppButton: document.querySelector("#refreshAppButton"),
 	metaFile: document.querySelector("#metaFile"),
@@ -1099,10 +1090,9 @@ el.ofdInput.addEventListener("change", () => openOFD(el.ofdInput.files[0]));
 el.fontInput.addEventListener("change", openSelectedFonts);
 el.fontDirectoryInput.addEventListener("change", openSelectedFonts);
 el.prevButton.addEventListener("click", () => renderPage(state.pageIndex - 1));
-el.renderBackend.addEventListener("change", () => changeRenderBackend());
+el.imageDPI.addEventListener("change", () => changeDisplayMode());
-el.renderDPI.addEventListener("change", () => changeRenderBackend());
+el.renderVectorButton.addEventListener("click", () => changeDisplayMode("svg"));
-el.renderVectorButton.addEventListener("click", () => changeRenderBackend("svg"));
+el.renderRasterButton.addEventListener("click", () => changeDisplayMode("raster"));
-el.renderRasterButton.addEventListener("click", () => changeRenderBackend("raster"));
 el.nextButton.addEventListener("click", () => renderPage(state.pageIndex + 1));
 el.zoomOutButton.addEventListener("click", () => setScale(state.scale - 0.1));
 el.zoomInButton.addEventListener("click", () => setScale(state.scale + 0.1));
@@ -1631,7 +1621,7 @@ async function toggleEditor() {
 		renderOutlines(false);
 		if (state.renderMode !== "svg") {
 			try {
-				await refreshRenderBackend(anchor);
+				await refreshPageDisplay(anchor);
 			} catch (err) {
 				state.editing = !state.editing;
 				updateControls();
@@ -2936,14 +2926,6 @@ async function loadWASM() {
 					if (data.phase === "commit") el.importCancel.disabled = el.cancelExportButton.disabled = true;
 				}
 			} else if (data.type === "ready") {
-				state.renderBackends = data.backends;
-				el.renderBackend.replaceChildren();
-				for (const name of Object.keys(data.backends)) {
-					const option = document.createElement("option");
-					option.value = name;
-					option.textContent = renderBackendLabel(name);
-					el.renderBackend.append(option);
-				}
 				state.ready = true;
 				resolve();
 			} else if (data.type === "exit") {
@@ -3338,34 +3320,17 @@ function displayMode() {
 	return state.editing ? "svg" : state.renderMode;
 }
 
-function renderBackendLabel(name) {
+function updateDisplayControls() {
-	return { svg: "SVG", canvas: "Canvas", ofd: "OFD" }[name] || name || "无";
+	const disabled = !state.ready || !state.doc || state.exporting || document.body.hasAttribute("aria-busy");
-}
-
-function updateRenderBackend() {
-	el.renderBackend.value = state.renderBackend;
-	el.renderDPI.value = String(state.renderDPI);
-	const disabled = !state.ready || state.exporting || document.body.hasAttribute("aria-busy");
-	el.renderBackend.disabled = disabled || Object.keys(state.renderBackends).length < 2;
-	el.renderDPI.disabled = disabled || displayMode() === "svg";
-	el.renderDPI.title = displayMode() === "svg" ? "矢量预览无需DPI" : "预览DPI（仅位图）";
 	el.renderVectorButton.disabled = el.renderRasterButton.disabled = disabled || state.editing;
 	el.renderVectorButton.setAttribute("aria-pressed", String(displayMode() === "svg"));
 	el.renderRasterButton.setAttribute("aria-pressed", String(displayMode() === "raster"));
 	el.renderVectorButton.title = state.editing ? "编辑使用矢量显示" : "矢量显示";
 	el.renderRasterButton.title = state.editing ? "阅读时可用" : "位图显示";
-	const backend = state.renderBackends[state.renderBackend];
+	updateDPIControl();
-	el.renderDisplay.textContent = displayMode() === "svg" ? "SVG" : renderBackendLabel(backend?.raster);
-	el.renderImages.textContent = renderBackendLabel(backend?.raster);
-	el.renderSVG.textContent = renderBackendLabel(backend?.svg);
-	el.renderPDF.textContent = renderBackendLabel(backend?.pdf);
-	el.renderEPS.textContent = renderBackendLabel(backend?.eps);
-	el.renderCompiler.textContent = renderBackendLabel(backend?.compiler);
-	el.renderFonts.textContent = renderBackendLabel(backend?.fonts);
-	el.renderGeometry.textContent = renderBackendLabel(backend?.geometry);
 }
 
-async function refreshRenderBackend(anchor = scaleAnchor(0)) {
+async function refreshPageDisplay(anchor = scaleAnchor(0)) {
 	const selection = state.editing ? { index: canvasEditor.selected?.index ?? state.pageIndex, ids: canvasEditor.items().map(item => item.id) } : null;
 	await openDocument({
 		pageIndex: state.pageIndex, fitMode: state.fitMode, scale: state.scale,
@@ -3374,29 +3339,29 @@ async function refreshRenderBackend(anchor = scaleAnchor(0)) {
 	});
 }
 
-async function changeRenderBackend(mode = state.renderMode) {
+async function changeDisplayMode(mode = state.renderMode) {
-	if (document.body.hasAttribute("aria-busy")) return;
+	if (document.body.hasAttribute("aria-busy")) {
-	const backend = el.renderBackend.value, dpi = Number(el.renderDPI.value);
+		el.imageDPI.value = String(state.renderDPI);
-	if (state.renderBackend === backend && state.renderDPI === dpi && state.renderMode === mode) return;
+		updateDPIControl();
-	if (state.editing && (!await canvasEditor.commitText() || !await canvasEditor.commitCrop())) {
-		updateRenderBackend();
 		return;
 	}
-	const previous = { backend: state.renderBackend, dpi: state.renderDPI, mode: state.renderMode };
+	if (state.editing) mode = state.renderMode;
-	state.renderBackend = backend;
+	const dpi = currentImageDPI();
+	if (state.renderDPI === dpi && state.renderMode === mode) return;
+	const previous = { dpi: state.renderDPI, mode: state.renderMode };
 	state.renderDPI = dpi;
 	state.renderMode = mode;
-	updateRenderBackend();
+	updateDisplayControls();
-	if (!state.doc) return;
+	if (!state.doc || state.editing || (previous.mode === mode && mode === "svg")) return;
 	try {
-		await refreshRenderBackend();
+		await refreshPageDisplay();
 	} catch (err) {
-		state.renderBackend = previous.backend;
 		state.renderDPI = previous.dpi;
 		state.renderMode = previous.mode;
+		el.imageDPI.value = String(previous.dpi);
 		resetPageLoading();
 		state.pageCache.clear();
-		updateRenderBackend();
+		updateDisplayControls();
 		showError(err, false);
 	}
 }
@@ -6814,7 +6779,7 @@ function updateFitSpace() {
 function updateControls() {
 	renderSecurity();
 	const hasDoc = Boolean(state.doc);
-	updateRenderBackend();
+	updateDisplayControls();
 	updateEditorTools();
 	const pageCount = state.doc ? state.doc.pageCount : 0;
 	el.prevButton.disabled = !hasDoc || state.pageIndex <= 0;
@@ -7008,7 +6973,7 @@ function showError(err, empty = !state.doc) {
 function setBusy(busy, text = "", percent = 0, status = "") {
 	document.body.toggleAttribute("aria-busy", busy);
 	renderSecurity();
-	updateRenderBackend();
+	updateDisplayControls();
 	el.editButton.disabled = busy || !state.doc || !state.ready || state.exporting;
 	el.createForm.inert = busy;
 	el.insertForm.inert = busy;
@@ -7107,8 +7072,12 @@ function exportFormatUsesDPI(value) {
 }
 
 function updateDPIControl() {
-	el.imageDPI.disabled = state.exporting || !state.doc || !exportFormatUsesDPI(el.exportFormat.value);
+	el.imageDPI.disabled = state.exporting || !state.doc || document.body.hasAttribute("aria-busy") || (displayMode() !== "raster" && !exportFormatUsesDPI(el.exportFormat.value));
-	el.imageDPI.title = exportFormatUsesDPI(el.exportFormat.value) ? "导出DPI（仅PNG/JPG）" : "当前格式无需DPI";
+	el.imageDPI.title = `DPI：${currentImageDPI()}`;
+	el.dpiValue.textContent = String(currentImageDPI());
+	const format = exportFormatInfo(el.exportFormat.value);
+	el.formatValue.textContent = format?.label || "";
+	el.exportFormat.title = format ? `导出格式：${format.label}` : "导出格式";
 }
 
 function currentImageDPI() {