feat(前端界面): 右侧栏分为文档与字体两页

assets/webui/index.html

@@ -802,140 +802,147 @@
 			</section>
 
 			<aside class="meta-panel">
-				<div class="panel-row">
-					<div class="panel-title compact">文档</div>
-					<div class="panel-actions">
-						<button id="resourceManageButton" class="small-button" type="button" disabled>资源</button>
-						<button id="settingsButton" class="small-button" type="button" disabled>配置</button>
-						<button id="invoiceButton" class="small-button" type="button" hidden disabled>发票</button>
-						<button id="documentManageButton" class="small-button" type="button" hidden>管理</button>
-						<button id="versionManageButton" class="small-button" type="button" hidden>版本</button>
+				<div id="metaTabs" class="navigation-tabs">
+					<button id="documentMetaTab" type="button" data-selected="true">文档</button>
+					<button id="fontsMetaTab" type="button" data-selected="false" tabindex="-1">字体</button>
+				</div>
+				<div id="metaContent" class="meta-content">
+					<div id="metaDocumentPanel">
+						<div class="panel-actions meta-document-actions">
+							<button id="resourceManageButton" class="small-button" type="button" disabled>资源</button>
+							<button id="settingsButton" class="small-button" type="button" disabled>配置</button>
+							<button id="invoiceButton" class="small-button" type="button" hidden disabled>发票</button>
+							<button id="documentManageButton" class="small-button" type="button" hidden>管理</button>
+							<button id="versionManageButton" class="small-button" type="button" hidden>版本</button>
+						</div>
+						<div id="editNotice" class="font-permission-hint" hidden></div>
+						<div id="documentRow" class="document-row" hidden>
+							<select id="documentSelect" class="document-select" title="切换文档"></select>
+						</div>
+						<div class="document-info">
+							<dl class="meta-list">
+								<div>
+									<dt>文件</dt>
+									<dd id="metaFile">-</dd>
+								</div>
+								<div>
+									<dt>标题</dt>
+									<dd id="metaTitle">-</dd>
+								</div>
+								<div>
+									<dt>作者</dt>
+									<dd id="metaAuthor">-</dd>
+								</div>
+								<div hidden>
+									<dt>主题</dt>
+									<dd id="metaSubject"></dd>
+								</div>
+								<div hidden>
+									<dt>摘要</dt>
+									<dd id="metaAbstract"></dd>
+								</div>
+								<div hidden>
+									<dt>关键词</dt>
+									<dd id="metaKeywords"></dd>
+								</div>
+							</dl>
+							<details><summary>文档属性</summary>
+								<dl class="meta-list">
+									<div hidden>
+										<dt>标识</dt>
+										<dd id="metaDocId"></dd>
+									</div>
+									<div hidden>
+										<dt>用途</dt>
+										<dd id="metaDocUsage"></dd>
+									</div>
+									<div hidden>
+										<dt>封面</dt>
+										<dd id="metaCover"></dd>
+									</div>
+									<div hidden>
+										<dt>创建</dt>
+										<dd id="metaCreationDate"></dd>
+									</div>
+									<div hidden>
+										<dt>修改</dt>
+										<dd id="metaModDate"></dd>
+									</div>
+									<div hidden>
+										<dt>软件</dt>
+										<dd id="metaCreator"></dd>
+									</div>
+									<div hidden>
+										<dt>版本</dt>
+										<dd id="metaCreatorVersion"></dd>
+									</div>
+								</dl>
+							</details>
+							<details><summary>扩展字段</summary><dl id="metaCustomData" class="meta-list" hidden></dl></details>
+							<details><summary>格式信息</summary>
+								<dl class="meta-list">
+									<div>
+										<dt>类型</dt>
+										<dd id="metaType">-</dd>
+									</div>
+									<div>
+										<dt>版本</dt>
+										<dd id="metaVersion">-</dd>
+									</div>
+									<div>
+										<dt>签名</dt>
+										<dd id="metaSignatures">0</dd>
+									</div>
+									<div>
+										<dt>字体</dt>
+										<dd id="metaFonts">0</dd>
+									</div>
+								</dl>
+							</details>
+						</div>
+						<details id="conversionNotice" class="conversion-notice" hidden>
+							<summary>提示</summary>
+							<div id="conversionWarnings" class="panel-detail"></div>
+						</details>
+						<section id="securityPanel" class="security-panel" hidden>
+							<div class="panel-row"><div id="securityPanelTitle" class="panel-title compact">安全</div><div class="panel-actions"><button id="encryptSaveButton" class="small-button" type="button" disabled>加密</button><button id="signButton" class="small-button" type="button" disabled>签章</button><button id="verifyButton" class="small-button" type="button" disabled>验签</button></div></div>
+							<dl class="meta-list"><div><dt>加密</dt><dd id="securityEncryption">未加密</dd></div><div id="securitySchemeRow" hidden><dt>方式</dt><dd id="securityScheme"></dd></div><div id="securityMethodRow" hidden><dt>算法</dt><dd id="securityMethod"></dd></div></dl>
+						</section>
+						<section id="signaturePanel" class="signature-panel" hidden>
+							<div class="panel-row">
+								<div id="signaturePanelTitle" class="panel-title compact">签名</div>
+								<span id="signatureSummary" class="count-pill">0</span>
+							</div>
+							<div id="signatureList" class="signature-list"></div>
+						</section>
+						<section id="structurePanel" class="structure-panel" hidden>
+							<div class="panel-row"><div id="structurePanelTitle" class="panel-title compact">结构</div><div class="panel-actions"><span id="structureSummary" class="count-pill">0</span><button id="structureManage" class="small-button" type="button" hidden>管理</button></div></div>
+							<div id="structureList" class="structure-list"></div>
+						</section>
+					</div>
+					<div id="metaFontsPanel" hidden>
+						<section class="doc-font-panel">
+							<div class="panel-row">
+								<div id="docFontPanelTitle" class="panel-title compact">文档字体</div>
+								<span id="docFontSummary" class="count-pill">0</span>
+							</div>
+							<div id="docFontList" class="doc-font-list"></div>
+						</section>
+						<section class="font-panel">
+							<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>
+									<button id="fontDirectoryButton" class="small-button" type="button">目录</button>
+								</div>
+							</div>
+							<div id="fontPermissionHint" class="font-permission-hint" hidden>系统字体未授权</div>
+							<div id="fontList" class="font-list"></div>
+						</section>
 					</div>
 				</div>
-				<div id="editNotice" class="font-permission-hint" hidden></div>
-				<div id="documentRow" class="document-row" hidden>
-					<select id="documentSelect" class="document-select" title="切换文档"></select>
-				</div>
-				<div class="document-info">
-					<dl class="meta-list">
-						<div>
-							<dt>文件</dt>
-							<dd id="metaFile">-</dd>
-						</div>
-						<div>
-							<dt>标题</dt>
-							<dd id="metaTitle">-</dd>
-						</div>
-						<div>
-							<dt>作者</dt>
-							<dd id="metaAuthor">-</dd>
-						</div>
-						<div hidden>
-							<dt>主题</dt>
-							<dd id="metaSubject"></dd>
-						</div>
-						<div hidden>
-							<dt>摘要</dt>
-							<dd id="metaAbstract"></dd>
-						</div>
-						<div hidden>
-							<dt>关键词</dt>
-							<dd id="metaKeywords"></dd>
-						</div>
-					</dl>
-					<details><summary>文档属性</summary>
-						<dl class="meta-list">
-							<div hidden>
-								<dt>标识</dt>
-								<dd id="metaDocId"></dd>
-							</div>
-							<div hidden>
-								<dt>用途</dt>
-								<dd id="metaDocUsage"></dd>
-							</div>
-							<div hidden>
-								<dt>封面</dt>
-								<dd id="metaCover"></dd>
-							</div>
-							<div hidden>
-								<dt>创建</dt>
-								<dd id="metaCreationDate"></dd>
-							</div>
-							<div hidden>
-								<dt>修改</dt>
-								<dd id="metaModDate"></dd>
-							</div>
-							<div hidden>
-								<dt>软件</dt>
-								<dd id="metaCreator"></dd>
-							</div>
-							<div hidden>
-								<dt>版本</dt>
-								<dd id="metaCreatorVersion"></dd>
-							</div>
-						</dl>
-					</details>
-					<details><summary>扩展字段</summary><dl id="metaCustomData" class="meta-list" hidden></dl></details>
-					<details><summary>格式信息</summary>
-						<dl class="meta-list">
-							<div>
-								<dt>类型</dt>
-								<dd id="metaType">-</dd>
-							</div>
-							<div>
-								<dt>版本</dt>
-								<dd id="metaVersion">-</dd>
-							</div>
-							<div>
-								<dt>签名</dt>
-								<dd id="metaSignatures">0</dd>
-							</div>
-							<div>
-								<dt>字体</dt>
-								<dd id="metaFonts">0</dd>
-							</div>
-						</dl>
-					</details>
-				</div>
-				<details id="conversionNotice" class="conversion-notice" hidden>
-					<summary>提示</summary>
-					<div id="conversionWarnings" class="panel-detail"></div>
-				</details>
-				<section id="securityPanel" class="security-panel" hidden>
-					<div class="panel-row"><div id="securityPanelTitle" class="panel-title compact">安全</div><div class="panel-actions"><button id="encryptSaveButton" class="small-button" type="button" disabled>加密</button><button id="signButton" class="small-button" type="button" disabled>签章</button><button id="verifyButton" class="small-button" type="button" disabled>验签</button></div></div>
-					<dl class="meta-list"><div><dt>加密</dt><dd id="securityEncryption">未加密</dd></div><div id="securitySchemeRow" hidden><dt>方式</dt><dd id="securityScheme"></dd></div><div id="securityMethodRow" hidden><dt>算法</dt><dd id="securityMethod"></dd></div></dl>
-				</section>
-				<section id="signaturePanel" class="signature-panel" hidden>
-					<div class="panel-row">
-						<div id="signaturePanelTitle" class="panel-title compact">签名</div>
-						<span id="signatureSummary" class="count-pill">0</span>
-					</div>
-					<div id="signatureList" class="signature-list"></div>
-				</section>
-				<section id="structurePanel" class="structure-panel" hidden>
-					<div class="panel-row"><div id="structurePanelTitle" class="panel-title compact">结构</div><div class="panel-actions"><span id="structureSummary" class="count-pill">0</span><button id="structureManage" class="small-button" type="button" hidden>管理</button></div></div>
-					<div id="structureList" class="structure-list"></div>
-				</section>
-				<section class="doc-font-panel">
-					<div class="panel-row">
-						<div id="docFontPanelTitle" class="panel-title compact">文档字体</div>
-						<span id="docFontSummary" class="count-pill">0</span>
-					</div>
-					<div id="docFontList" class="doc-font-list"></div>
-				</section>
-				<section class="font-panel">
-					<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>
-							<button id="fontDirectoryButton" class="small-button" type="button">目录</button>
-						</div>
-					</div>
-						<div id="fontPermissionHint" class="font-permission-hint" hidden>系统字体未授权</div>
-					<div id="fontList" class="font-list"></div>
-				</section>
 			</aside>
 		</main>
 

assets/webui/ofdgo.css

@@ -1843,7 +1843,7 @@ body[data-hide-meta] .meta-panel {
 .search-results,
 .editor-toolbar,
 .document-list,
-.meta-panel {
+.meta-content {
 	scrollbar-width: thin;
 	scrollbar-color: var(--line-strong) transparent;
 }
@@ -1859,13 +1859,15 @@ body[data-hide-meta] .meta-panel {
 	line-height: 1.5;
 }
 
-.page-list-panel {
+.page-list-panel,
+.meta-panel {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
 }
 
-.navigation-content {
+.navigation-content,
+.meta-content {
 	flex: 1;
 	min-height: 0;
 	overflow: auto;
@@ -1889,6 +1891,17 @@ body[data-hide-meta] .meta-panel {
 	border-left: 1px solid var(--line);
 }
 
+.meta-document-actions {
+	justify-content: flex-start;
+	margin-bottom: 12px;
+}
+
+#metaFontsPanel > .doc-font-panel {
+	margin-top: 0;
+	padding-top: 0;
+	border-top: 0;
+}
+
 .meta-panel .panel-row {
 	display: grid;
 	grid-template-columns: auto minmax(0, 1fr);
@@ -4568,7 +4581,7 @@ audio.page-media {
 	}
 
 	body[data-hide-meta] .meta-panel {
-		display: block;
+		display: flex;
 	}
 
 	body[data-hide-pages] .page-list-panel {

assets/webui/ofdgo.js

@@ -183,6 +183,8 @@ function createDocumentState() {
 		encryptionChanged: false,
 		showPages: !COMPACT_LAYOUT.matches,
 		showMeta: !COMPACT_LAYOUT.matches,
+		metaTab: "document",
+		metaScroll: {document: 0, fonts: 0},
 	};
 }
 
@@ -592,6 +594,12 @@ const el = {
 	searchNext: document.querySelector("#searchNext"),
 	searchResults: document.querySelector("#searchResults"),
 	metaPanel: document.querySelector(".meta-panel"),
+	metaTabs: document.querySelector("#metaTabs"),
+	metaContent: document.querySelector("#metaContent"),
+	documentMetaTab: document.querySelector("#documentMetaTab"),
+	fontsMetaTab: document.querySelector("#fontsMetaTab"),
+	metaDocumentPanel: document.querySelector("#metaDocumentPanel"),
+	metaFontsPanel: document.querySelector("#metaFontsPanel"),
 	renderVectorButton: document.querySelector("#renderVectorButton"),
 	renderRasterButton: document.querySelector("#renderRasterButton"),
 	refreshAppButton: document.querySelector("#refreshAppButton"),
@@ -1735,17 +1743,22 @@ document.querySelector("#objectActionsButton").addEventListener("click", async (
 });
 el.outlinesTab.addEventListener("click", () => showNavigation(el.outlinesTab));
 el.searchTab.addEventListener("click", focusSearch);
-el.navigationTabs.addEventListener("keydown", (event) => {
+el.documentMetaTab.addEventListener("click", () => showMetaSection(el.documentMetaTab));
+el.fontsMetaTab.addEventListener("click", () => showMetaSection(el.fontsMetaTab));
+for (const [container, buttons, show] of [
+	[el.navigationTabs, [el.pagesTab, el.outlinesTab, el.annotationsTab, el.searchTab], showNavigation],
+	[el.metaTabs, [el.documentMetaTab, el.fontsMetaTab], showMetaSection],
+]) container.addEventListener("keydown", (event) => {
 	if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
 		return;
 	}
 	if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
 		event.preventDefault();
-		const tabs = [el.pagesTab, el.outlinesTab, el.annotationsTab, el.searchTab].filter((tab) => !tab.hidden);
+		const tabs = buttons.filter((tab) => !tab.hidden);
 		const current = tabs.indexOf(event.target);
 		const index = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1
 			: (current + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
-		showNavigation(tabs[index]);
+		show(tabs[index]);
 		tabs[index].focus({ preventScroll: true });
 	}
 });
@@ -2781,8 +2794,9 @@ function detachDocumentView() {
 	window.clearTimeout(wasmRecoveryTimer);
 	wasmRecoveryTimer = 0;
 	const selection = canvasEditor.selected;
+	state.metaScroll[state.metaTab] = el.metaContent.scrollTop;
 	tab.view = { anchor: state.doc ? scaleAnchor() : null, navigation: el.navigationTabs.querySelector('[data-selected="true"]'),
-		navigationTop: el.navigationContent.scrollTop, metaTop: el.metaPanel.scrollTop, tool: canvasEditor.tool,
+		navigationTop: el.navigationContent.scrollTop, tool: canvasEditor.tool,
 		selection: selection ? {index: selection.index, ids: (selection.items || [selection]).map(item => item.id)} : canvasEditor.pendingSelection,
 		richClipboard: canvasEditor.richClipboard, search: el.searchInput.value };
 	tab.view.searchStatus = state.searchRunning ? "搜索已暂停" : el.searchStatus.textContent;
@@ -2943,7 +2957,6 @@ async function mountDocumentTab(tab) {
 		if (view?.anchor) restoreScaleAnchor(view.anchor);
 		showNavigation(view?.navigation || el.pagesTab);
 		el.navigationContent.scrollTop = view?.navigationTop || 0;
-		el.metaPanel.scrollTop = view?.metaTop || 0;
 		canvasEditor.setTool(view?.tool || "");
 	} else {
 		renderPageList();
@@ -2954,6 +2967,7 @@ async function mountDocumentTab(tab) {
 	}
 	renderFontList();
 	updateFontSummary();
+	renderMetaSections();
 	updateControls();
 	tab.controlsPending = false;
 	setStatus(tab.status);
@@ -6517,8 +6531,10 @@ async function openDocument(options = {}) {
 			el.viewerPanel.scrollTop = 0;
 			el.navigationContent.scrollLeft = 0;
 			el.navigationContent.scrollTop = 0;
-			el.metaPanel.scrollLeft = 0;
-			el.metaPanel.scrollTop = 0;
+			state.metaTab = "document";
+			state.metaScroll = {document: 0, fonts: 0};
+			el.metaContent.scrollLeft = 0;
+			renderMetaSections();
 		}
 		applyFit(false);
 		if (options.keepPreview) {
@@ -11618,6 +11634,22 @@ function focusSearch() {
 	el.searchInput.select();
 }
 
+function showMetaSection(selected) {
+	state.metaScroll[state.metaTab] = el.metaContent.scrollTop;
+	state.metaTab = selected === el.fontsMetaTab ? "fonts" : "document";
+	renderMetaSections();
+}
+
+function renderMetaSections() {
+	for (const [tab, panel, name] of [[el.documentMetaTab, el.metaDocumentPanel, "document"], [el.fontsMetaTab, el.metaFontsPanel, "fonts"]]) {
+		const active = name === state.metaTab;
+		panel.hidden = !active;
+		tab.setAttribute("data-selected", String(active));
+		tab.tabIndex = active ? 0 : -1;
+	}
+	el.metaContent.scrollTop = state.metaScroll[state.metaTab];
+}
+
 function showNavigation(selected) {
 	const scrollTop = el.navigationContent.scrollTop;
 	for (const [tab, panel] of [[el.pagesTab, el.pageList], [el.outlinesTab, el.outlineList], [el.annotationsTab, el.annotationsPanel], [el.searchTab, el.searchPanel]]) {