feat(前端界面): 继续优化WebUI
build.yaml / build (push) Successful in 39s

This commit is contained in:
xiaoqidun committed 2026-09-04 13:48:50 +08:00
1 parent 1d4a7f4d5a
commit 0322995771
3 files changed
+20 -7

No files matched your search

+5 -5
View File
@@ -12,7 +12,7 @@
<input id="ofdInput" class="file-input" type="file" accept=".ofd"> <input id="ofdInput" class="file-input" type="file" accept=".ofd">
<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple> <input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
<div class="tool-group"> <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="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> <button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">&#9432;</button>
</div> </div>
@@ -30,8 +30,8 @@
<button id="zoomOutButton" class="icon-button" type="button" title="缩小" disabled>-</button> <button id="zoomOutButton" class="icon-button" type="button" title="缩小" disabled>-</button>
<span id="zoomLabel" class="zoom-label">100%</span> <span id="zoomLabel" class="zoom-label">100%</span>
<button id="zoomInButton" class="icon-button" type="button" title="放大" disabled>+</button> <button id="zoomInButton" class="icon-button" type="button" title="放大" disabled>+</button>
<button id="fitButton" 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="高" 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> <button id="annotationButton" class="button" type="button" data-short="注" title="渲染注解" aria-label="渲染注解" aria-pressed="true">注解</button>
</div> </div>
<div class="tool-group"> <div class="tool-group">
@@ -55,11 +55,11 @@
<section class="viewer-panel" tabindex="0"> <section class="viewer-panel" tabindex="0">
<div id="emptyState" class="empty-state">选择 OFD 文件</div> <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 class="progress-spinner"></div>
<div id="progressLabel" class="progress-label">加载中</div> <div id="progressLabel" class="progress-label">加载中</div>
<div class="progress-track"> <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> </div>
<div id="pageFrame" class="page-frame" hidden> <div id="pageFrame" class="page-frame" hidden>
+11
View File
@@ -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 { .page-frame {
display: grid; display: grid;
align-items: safe center; align-items: safe center;
+4 -2
View File
@@ -275,9 +275,10 @@ async function loadWASM() {
const response = await fetch("./ofdgo.wasm"); const response = await fetch("./ofdgo.wasm");
try { try {
setProgress("正在编译引擎", 35); setProgress("正在编译引擎", 35);
wasmModule = await WebAssembly.compileStreaming(response.clone()); wasmModule = await WebAssembly.compileStreaming(response);
} catch { } catch {
const bytes = await response.arrayBuffer(); const fallback = await fetch("./ofdgo.wasm");
const bytes = await fallback.arrayBuffer();
setProgress("正在编译引擎", 45); setProgress("正在编译引擎", 45);
wasmModule = await WebAssembly.compile(bytes); wasmModule = await WebAssembly.compile(bytes);
} }
@@ -2216,6 +2217,7 @@ function setProgress(text = "", percent = 0, status = "") {
} }
const value = Math.max(0, Math.min(100, percent)); const value = Math.max(0, Math.min(100, percent));
el.progressBar.style.width = `${value}%`; el.progressBar.style.width = `${value}%`;
el.progressBar.setAttribute("aria-valuenow", String(value));
} }
function setStatus(text) { function setStatus(text) {