feat(前端界面): 优化属性文案与列表对齐

feat(前端界面): 优化文档属性文案与标签对齐
feat(前端界面): 恢复签名信息标签对齐
2026-10-29 14:53:44 +08:00 · 2026-10-25 21:42:30 +08:00 · 2026-10-25 21:37:19 +08:00 · 2026-10-25 21:33:22 +08:00 · 2026-10-25 21:28:12 +08:00 · 2026-10-25 21:22:30 +08:00
3 changed files with 148 additions and 43 deletions
@@ -493,8 +493,8 @@
 				<label class="form-row"><span>作者</span><textarea id="infoAuthor" rows="1"></textarea></label>
 				<label class="form-row"><span>主题</span><textarea id="infoSubject" rows="1"></textarea></label>
 				<label class="form-row"><span>摘要</span><textarea id="infoAbstract" rows="2"></textarea></label>
-				<details><summary><span>关键词</span></summary><div class="info-fields"><div id="infoKeywordRows" class="info-rows"></div><button id="infoKeywordAdd" class="icon-button" type="button" title="添加词条">+</button></div></details>
-				<details><summary><span>其他属性</span></summary>
+				<details><summary><span>关键词</span></summary><div id="infoKeywordRows" class="info-rows"></div><button id="infoKeywordAdd" class="icon-button" type="button" title="添加词条">+</button></details>
+				<details><summary><span>文档属性</span></summary>
 					<label class="form-row"><span>文档标识</span><input id="infoDocId" type="text"></label>
 					<label class="form-row"><span>文档用途</span><input id="infoDocUsage" type="text"></label>
 					<label class="form-row"><span>封面路径</span><input id="infoCover" type="text"></label>
@@ -503,7 +503,7 @@
 					<label class="form-row"><span>制作软件</span><input id="infoCreator" type="text"></label>
 					<label class="form-row"><span>软件版本</span><input id="infoCreatorVersion" type="text"></label>
 				</details>
-				<details><summary><span>扩展字段</span></summary><div class="info-fields"><div id="infoCustomRows" class="info-rows"></div><button id="infoCustomAdd" class="icon-button" type="button" title="添加字段">+</button></div></details>
+				<details><summary><span>扩展属性</span></summary><div id="infoCustomRows" class="info-rows"></div><button id="infoCustomAdd" class="icon-button" type="button" title="添加属性">+</button></details>
 				<div class="form-actions"><div id="infoStatus" class="form-status"></div><button id="infoCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
 			</form>
 		</dialog>
@@ -802,23 +802,28 @@
 			</section>

 			<aside class="meta-panel">
-				<div class="panel-row">
-					<div class="panel-title compact">文档</div>
-					<div class="panel-actions">
+				<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>
+					<button id="securityMetaTab" 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>
 						<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>
+									<dt>文件名</dt>
 									<dd id="metaFile">-</dd>
 								</div>
 								<div>
@@ -841,6 +846,9 @@
 									<dt>关键词</dt>
 									<dd id="metaKeywords"></dd>
 								</div>
+							</dl>
+							<details><summary>文档属性</summary>
+								<dl class="meta-list">
 									<div hidden>
 										<dt>文档标识</dt>
 										<dd id="metaDocId"></dd>
@@ -870,7 +878,9 @@
 										<dd id="metaCreatorVersion"></dd>
 									</div>
 								</dl>
-				<dl id="metaCustomData" class="meta-list" hidden></dl>
+							</details>
+							<details><summary>扩展属性</summary><dl id="metaCustomData" class="meta-list" hidden></dl></details>
+							<details><summary>格式信息</summary>
 								<dl class="meta-list">
 									<div>
 										<dt>文档类型</dt>
@@ -889,25 +899,18 @@
 										<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="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 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>
+					<div id="metaFontsPanel" hidden>
 						<section class="doc-font-panel">
 							<div class="panel-row">
 								<div id="docFontPanelTitle" class="panel-title compact">文档字体</div>
@@ -928,6 +931,21 @@
 							<div id="fontPermissionHint" class="font-permission-hint" hidden>系统字体未授权</div>
 							<div id="fontList" class="font-list"></div>
 						</section>
+					</div>
+					<div id="metaSecurityPanel" hidden>
+						<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>
+					</div>
+				</div>
 			</aside>
 		</main>

@@ -1614,10 +1614,6 @@ button:not(:disabled):hover {
 	grid-template-columns: minmax(0, 1fr) repeat(2, 4em);
 }

-.info-fields {
-	margin-left: calc(4em + 12px);
-}
-
 .info-rows {
 	max-height: 240px;
 	overflow-y: auto;
@@ -1843,7 +1839,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 +1855,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 +1887,45 @@ 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,
+#metaSecurityPanel > .security-panel {
+	margin-top: 0;
+	padding-top: 0;
+	border-top: 0;
+}
+
+.meta-panel .panel-row {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: start;
+	margin-bottom: 8px;
+}
+
+.meta-panel .panel-title {
+	display: flex;
+	align-items: center;
+	min-height: 26px;
+}
+
+.meta-panel .panel-actions {
+	min-width: 0;
+	justify-self: end;
+}
+
+.meta-panel .count-pill {
+	justify-self: end;
+	max-width: 100%;
+	min-height: 26px;
+	height: auto;
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
 .panel-title {
 	margin-bottom: 10px;
 	font-size: 12px;
@@ -3800,7 +3837,7 @@ audio.page-media {

 .meta-list {
 	display: grid;
-	gap: 7px;
+	gap: 8px;
 	margin: 0;
 	font-size: 12px;
 	line-height: 1.5;
@@ -3810,7 +3847,11 @@ audio.page-media {
 	display: grid;
 	grid-template-columns: 4em minmax(0, 1fr);
 	align-items: start;
-	gap: 7px;
+	gap: 8px;
+}
+
+.security-panel .meta-list > div {
+	grid-template-columns: 2em minmax(0, 1fr);
 }

 .meta-list dt {
@@ -3819,7 +3860,6 @@ audio.page-media {
 }

 .meta-list:not(#metaCustomData) dt {
-	text-align-last: justify;
 	white-space: nowrap;
 }

@@ -3829,8 +3869,16 @@ audio.page-media {
 	white-space: pre-wrap;
 }

-.meta-list + .meta-list:not([hidden]) {
-	margin-top: 12px;
+.document-info .meta-list:not(#metaCustomData) dt {
+	text-align-last: justify;
+}
+
+.document-info details:not(:has(.meta-list > div:not([hidden]))) {
+	display: none;
+}
+
+.document-info details[open] > .meta-list {
+	margin-top: 8px;
 }

 #metaKeywords > span {
@@ -3842,7 +3890,7 @@ audio.page-media {
 .signature-panel,
 .structure-panel,
 .security-panel {
-	margin-top: 18px;
+	margin-top: 12px;
 	padding-top: 12px;
 	border-top: 1px solid var(--line);
 }
@@ -3886,6 +3934,7 @@ audio.page-media {
 	gap: 8px;
 }

+.document-info,
 .doc-font-row,
 .signature-row {
 	display: grid;
@@ -4080,16 +4129,19 @@ audio.page-media {

 .meta-panel .info-line {
 	grid-template-columns: 4em minmax(0, 1fr);
+	gap: 8px;
 }

-.meta-panel .info-label {
+.signature-row .info-label {
 	text-align-last: justify;
 }

+.document-info details,
 .signature-row details {
 	font-size: 12px;
 }

+.document-info summary,
 .signature-row summary {
 	cursor: pointer;
 	color: var(--accent-strong);
@@ -4530,7 +4582,7 @@ audio.page-media {
 	}

 	body[data-hide-meta] .meta-panel {
-		display: block;
+		display: flex;
 	}

 	body[data-hide-pages] .page-list-panel {
@@ -183,6 +183,8 @@ function createDocumentState() {
 		encryptionChanged: false,
 		showPages: !COMPACT_LAYOUT.matches,
 		showMeta: !COMPACT_LAYOUT.matches,
+		metaTab: "document",
+		metaScroll: {document: 0, fonts: 0, security: 0},
 	};
 }

@@ -592,6 +594,14 @@ 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"),
+	securityMetaTab: document.querySelector("#securityMetaTab"),
+	metaDocumentPanel: document.querySelector("#metaDocumentPanel"),
+	metaFontsPanel: document.querySelector("#metaFontsPanel"),
+	metaSecurityPanel: document.querySelector("#metaSecurityPanel"),
 	renderVectorButton: document.querySelector("#renderVectorButton"),
 	renderRasterButton: document.querySelector("#renderRasterButton"),
 	refreshAppButton: document.querySelector("#refreshAppButton"),
@@ -1061,14 +1071,14 @@ function addInfoRow(container, values, sourceIndex) {
 		const input = document.createElement("textarea");
 		input.rows = 1;
 		setInfoInput(input, value);
-		input.placeholder = values.length === 1 ? "关键词" : index === 0 ? "名称" : "内容";
+		input.placeholder = values.length === 1 ? "关键词" : index === 0 ? "属性名" : "属性值";
 		row.append(input);
 	}
 	const remove = document.createElement("button");
 	remove.type = "button";
 	remove.className = "icon-button";
 	remove.textContent = "×";
-	remove.title = values.length === 1 ? "删除词条" : "删除字段";
+	remove.title = values.length === 1 ? "删除词条" : "删除属性";
 	remove.addEventListener("click", () => row.remove());
 	row.append(remove);
 	container.append(row);
@@ -1735,17 +1745,23 @@ 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));
+el.securityMetaTab.addEventListener("click", () => showMetaSection(el.securityMetaTab));
+for (const [container, buttons, show] of [
+	[el.navigationTabs, [el.pagesTab, el.outlinesTab, el.annotationsTab, el.searchTab], showNavigation],
+	[el.metaTabs, [el.documentMetaTab, el.fontsMetaTab, el.securityMetaTab], 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 +2797,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 +2960,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 +2970,7 @@ async function mountDocumentTab(tab) {
 	}
 	renderFontList();
 	updateFontSummary();
+	renderMetaSections();
 	updateControls();
 	tab.controlsPending = false;
 	setStatus(tab.status);
@@ -6517,8 +6534,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, security: 0};
+			el.metaContent.scrollLeft = 0;
+			renderMetaSections();
 		}
 		applyFit(false);
 		if (options.keepPreview) {
@@ -11618,6 +11637,22 @@ function focusSearch() {
 	el.searchInput.select();
 }

+function showMetaSection(selected) {
+	state.metaScroll[state.metaTab] = el.metaContent.scrollTop;
+	state.metaTab = selected === el.securityMetaTab ? "security" : selected === el.fontsMetaTab ? "fonts" : "document";
+	renderMetaSections();
+}
+
+function renderMetaSections() {
+	for (const [tab, panel, name] of [[el.documentMetaTab, el.metaDocumentPanel, "document"], [el.fontsMetaTab, el.metaFontsPanel, "fonts"], [el.securityMetaTab, el.metaSecurityPanel, "security"]]) {
+		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]]) {
Author	SHA1	Message	Date
xiaoqidun	3607c15162	feat(前端界面): 优化属性文案与列表对齐 build.yaml / build (push) Successful in 46s Details	2026-10-25 21:42:30 +08:00
xiaoqidun	8cbf0546ee	feat(前端界面): 优化文档属性文案与标签对齐	2026-10-25 21:37:19 +08:00
xiaoqidun	411171bc60	feat(前端界面): 恢复签名信息标签对齐	2026-10-25 21:33:22 +08:00
xiaoqidun	2eaf5366bf	feat(前端界面): 新增安全标签，集中加密与签名	2026-10-25 21:28:12 +08:00
xiaoqidun	17383adab6	feat(前端界面): 右侧栏分为文档与字体两页	2026-10-25 21:22:30 +08:00
xiaoqidun	f77899e576	feat(前端界面): 恢复简短标签并分组展示属性	2026-10-25 21:12:09 +08:00