From 032299577110fba7863239e4c88b46068c154deb Mon Sep 17 00:00:00 2001
From: xiaoqidun <xiaoqidun@gmail.com>
Date: Fri, 4 Sep 2026 13:48:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=89=8D=E7=AB=AF=E7=95=8C=E9=9D=A2):=20?=
 =?UTF-8?q?=E7=BB=A7=E7=BB=AD=E4=BC=98=E5=8C=96WebUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/webui/index.html | 10 +++++-----
 assets/webui/ofdgo.css  | 11 +++++++++++
 assets/webui/ofdgo.js   |  6 ++++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/assets/webui/index.html b/assets/webui/index.html
index 130602a..dbb78d4 100644
--- a/assets/webui/index.html
+++ b/assets/webui/index.html
@@ -12,7 +12,7 @@
 			<input id="ofdInput" class="file-input" type="file" accept=".ofd">
 			<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
 			<div class="tool-group">
-				<button id="ofdButton" class="button primary" type="button" data-short="打开">打开</button>
+				<button id="ofdButton" class="button primary" type="button" data-short="打开" aria-label="打开">打开</button>
 				<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" aria-label="页面栏" aria-pressed="true">&#9776;</button>
 				<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">&#9432;</button>
 			</div>
@@ -30,8 +30,8 @@
 				<button id="zoomOutButton" class="icon-button" type="button" title="缩小" disabled>-</button>
 				<span id="zoomLabel" class="zoom-label">100%</span>
 				<button id="zoomInButton" class="icon-button" type="button" title="放大" disabled>+</button>
-				<button id="fitButton" class="button" type="button" data-short="宽" disabled>适宽</button>
-				<button id="fitHeightButton" class="button" type="button" data-short="高" disabled>适高</button>
+				<button id="fitButton" class="button" type="button" data-short="宽" aria-label="适宽" disabled>适宽</button>
+				<button id="fitHeightButton" class="button" type="button" data-short="高" aria-label="适高" disabled>适高</button>
 				<button id="annotationButton" class="button" type="button" data-short="注" title="渲染注解" aria-label="渲染注解" aria-pressed="true">注解</button>
 			</div>
 			<div class="tool-group">
@@ -55,11 +55,11 @@
 
 			<section class="viewer-panel" tabindex="0">
 				<div id="emptyState" class="empty-state">选择 OFD 文件</div>
-				<div id="progressPanel" class="progress-panel" hidden>
+				<div id="progressPanel" class="progress-panel" role="status" aria-live="polite" hidden>
 					<div class="progress-spinner"></div>
 					<div id="progressLabel" class="progress-label">加载中</div>
 					<div class="progress-track">
-						<div id="progressBar" class="progress-bar"></div>
+						<div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
 					</div>
 				</div>
 				<div id="pageFrame" class="page-frame" hidden>
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 57e5d65..ce217b2 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -479,6 +479,17 @@ body[data-hide-meta] .meta-panel {
 	}
 }
 
+@media (prefers-reduced-motion: reduce) {
+	.progress-spinner,
+	.stamp-highlight {
+		animation: none;
+	}
+
+	.progress-bar {
+		transition: none;
+	}
+}
+
 .page-frame {
 	display: grid;
 	align-items: safe center;
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index 4966dfb..1b8432b 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -275,9 +275,10 @@ async function loadWASM() {
 		const response = await fetch("./ofdgo.wasm");
 		try {
 			setProgress("正在编译引擎", 35);
-			wasmModule = await WebAssembly.compileStreaming(response.clone());
+			wasmModule = await WebAssembly.compileStreaming(response);
 		} catch {
-			const bytes = await response.arrayBuffer();
+			const fallback = await fetch("./ofdgo.wasm");
+			const bytes = await fallback.arrayBuffer();
 			setProgress("正在编译引擎", 45);
 			wasmModule = await WebAssembly.compile(bytes);
 		}
@@ -2216,6 +2217,7 @@ function setProgress(text = "", percent = 0, status = "") {
 	}
 	const value = Math.max(0, Math.min(100, percent));
 	el.progressBar.style.width = `${value}%`;
+	el.progressBar.setAttribute("aria-valuenow", String(value));
 }
 
 function setStatus(text) {