feat(图形界面): 将OFDGo编译为WASM提供WebUI

2026-08-30 12:12:40 +08:00 · 2026-07-03 19:55:25 +08:00
parent 23b235ded2
commit 3f32c5e048
9 changed files with 3692 additions and 0 deletions
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>OFDGo WebUI</title>
+	<link rel="stylesheet" href="./ofdgo.css">
+</head>
+<body>
+	<div class="app">
+		<header class="toolbar app-bar">
+			<input id="ofdInput" class="file-input" type="file" accept=".ofd,application/ofd,application/zip">
+			<button id="ofdButton" class="button primary" type="button" data-short="打开">打开 OFD</button>
+			<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
+			<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 class="toolbar-space"></div>
+			<button id="prevButton" class="icon-button" type="button" title="上一页" disabled>&lsaquo;</button>
+			<label class="page-control">
+				<input id="pageInput" type="number" min="1" value="1" disabled>
+				<span>/</span>
+				<span id="pageTotal">0</span>
+			</label>
+			<button id="nextButton" class="icon-button" type="button" title="下一页" disabled>&rsaquo;</button>
+			<div class="divider"></div>
+			<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="exportButton" class="button" type="button" data-short="PDF" title="导出 PDF" aria-label="导出 PDF" disabled>PDF</button>
+		</header>
+
+		<main class="workspace">
+			<aside class="page-list-panel">
+				<div class="panel-title">页面</div>
+				<div id="pageList" class="page-list"></div>
+			</aside>
+
+			<section class="viewer-panel" tabindex="0">
+				<div id="emptyState" class="empty-state">选择 OFD 文件</div>
+				<div id="progressPanel" class="progress-panel" 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>
+				</div>
+				<div id="pageFrame" class="page-frame" hidden>
+					<div id="svgHost" class="svg-host"></div>
+				</div>
+			</section>
+
+			<aside class="meta-panel">
+				<div class="panel-title">文档</div>
+				<dl class="meta-list">
+					<div>
+						<dt>标题</dt>
+						<dd id="metaTitle">-</dd>
+					</div>
+					<div>
+						<dt>作者</dt>
+						<dd id="metaAuthor">-</dd>
+					</div>
+					<div>
+						<dt>版本</dt>
+						<dd id="metaVersion">-</dd>
+					</div>
+					<div>
+						<dt>类型</dt>
+						<dd id="metaType">-</dd>
+					</div>
+					<div>
+						<dt>字体</dt>
+						<dd id="metaFonts">0</dd>
+					</div>
+				</dl>
+				<section class="doc-font-panel" aria-labelledby="docFontPanelTitle">
+					<div class="panel-row">
+						<div id="docFontPanelTitle" class="panel-title compact">OFD 字体</div>
+						<span id="docFontSummary" class="count-pill">0</span>
+					</div>
+					<div id="docFontList" class="doc-font-list"></div>
+				</section>
+				<section class="font-panel" aria-labelledby="fontPanelTitle">
+					<div class="panel-row">
+						<div id="fontPanelTitle" class="panel-title compact">可用字体</div>
+						<div class="panel-actions">
+							<span id="availableFontSummary" class="count-pill">0</span>
+							<button id="localFontButton" class="small-button" type="button">系统字体</button>
+							<button id="fontAddButton" class="small-button" type="button">添加</button>
+						</div>
+					</div>
+					<div id="fontList" class="font-list"></div>
+				</section>
+			</aside>
+		</main>
+
+		<footer class="app-footer app-bar">
+			<a class="footer-brand" href="https://github.com/xiaoqidun/ofdgo" target="_blank" rel="noreferrer">OFDGo</a>
+			<div id="statusText" class="status-text">正在准备渲染引擎</div>
+			<nav class="footer-links" aria-label="相关链接">
+				<a href="https://aite.me/" target="_blank" rel="noreferrer">官方网站</a>
+			</nav>
+		</footer>
+	</div>
+
+	<script src="./wasm_exec.js"></script>
+	<script type="module" src="./ofdgo.js"></script>
+</body>
+</html>