feat(前端界面): 完善文档信息文案与界面布局

assets/webui/index.html

@@ -490,20 +490,20 @@
 			<form id="infoForm">
 				<h2 id="infoPanelTitle" class="form-title">文档信息</h2>
 				<label class="form-row"><span>标题</span><textarea id="infoTitle" rows="1" autofocus></textarea></label>
-				<label class="form-row"><span>主题</span><textarea id="infoSubject" rows="1"></textarea></label>
 				<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>关键词</summary><div id="infoKeywordRows" class="info-rows"></div><button id="infoKeywordAdd" class="icon-button" type="button" title="添加词条">+</button></details>
+				<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>更多信息</summary>
+				<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="infoDocId" type="text"></label>
-					<label class="form-row"><span>用途</span><input id="infoDocUsage" 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>
 					<label class="form-row"><span>创建日期</span><input id="infoCreationDate" type="text"></label>
 					<label class="form-row"><span>修改日期</span><input id="infoModDate" type="text"></label>
 					<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>自定义</summary><div id="infoCustomRows" class="info-rows"></div><button id="infoCustomAdd" class="icon-button" type="button" title="添加字段">+</button></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>
 				<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>
@@ -818,21 +818,21 @@
 				</div>
 				<dl class="meta-list">
 					<div>
-						<dt>文件</dt>
+						<dt>文件名称</dt>
 						<dd id="metaFile">-</dd>
 					</div>
 					<div>
 						<dt>标题</dt>
 						<dd id="metaTitle">-</dd>
 					</div>
-					<div hidden>
-						<dt>主题</dt>
-						<dd id="metaSubject"></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>
@@ -842,11 +842,11 @@
 						<dd id="metaKeywords"></dd>
 					</div>
 					<div hidden>
-						<dt>标识</dt>
+						<dt>文档标识</dt>
 						<dd id="metaDocId"></dd>
 					</div>
 					<div hidden>
-						<dt>用途</dt>
+						<dt>文档用途</dt>
 						<dd id="metaDocUsage"></dd>
 					</div>
 					<div hidden>
@@ -869,8 +869,11 @@
 						<dt>软件版本</dt>
 						<dd id="metaCreatorVersion"></dd>
 					</div>
+				</dl>
+				<dl id="metaCustomData" class="meta-list" hidden></dl>
+				<dl class="meta-list">
 					<div>
-						<dt>类型</dt>
+						<dt>文档类型</dt>
 						<dd id="metaType">-</dd>
 					</div>
 					<div>
@@ -878,15 +881,14 @@
 						<dd id="metaVersion">-</dd>
 					</div>
 					<div>
-						<dt>签名</dt>
+						<dt>签名数量</dt>
 						<dd id="metaSignatures">0</dd>
 					</div>
 					<div>
-						<dt>字体</dt>
+						<dt>字体数量</dt>
 						<dd id="metaFonts">0</dd>
 					</div>
 				</dl>
-				<dl id="metaCustomData" class="meta-list" hidden></dl>
 				<details id="conversionNotice" class="conversion-notice" hidden>
 					<summary>提示</summary>
 					<div id="conversionWarnings" class="panel-detail"></div>

assets/webui/ofdgo.css

@@ -1530,8 +1530,7 @@ button:not(:disabled):hover {
 .form-row input[type="number"],
 .form-row input[type="file"],
 .form-row select,
-.form-row textarea,
+.form-row textarea {
-.info-rows textarea {
 	width: 100%;
 	min-width: 0;
 	height: var(--control-height);
@@ -1572,15 +1571,53 @@ button:not(:disabled):hover {
 	width: 480px;
 }
 
-#infoPanel .form-row {
+#infoPanel .form-row,
+#infoPanel summary {
 	grid-template-columns: 4em minmax(0, 1fr);
 }
 
-#infoPanel .form-row > span {
+#infoPanel .form-row > span,
+#infoPanel summary > span {
 	text-align-last: justify;
 	white-space: nowrap;
 }
 
+#infoPanel summary {
+	display: grid;
+	align-items: center;
+	gap: 12px;
+	min-height: var(--control-height);
+}
+
+#infoPanel summary::after {
+	content: "▸";
+	justify-self: end;
+}
+
+#infoPanel details[open] > summary::after {
+	content: "▾";
+}
+
+#infoPanel details > .form-row:last-child {
+	margin-bottom: 0;
+}
+
+#infoPanel textarea {
+	height: auto;
+	min-height: var(--control-height);
+	padding: 3px 6px;
+	line-height: calc(var(--control-height) - 8px);
+	resize: vertical;
+}
+
+#infoPanel .form-actions {
+	grid-template-columns: minmax(0, 1fr) repeat(2, 4em);
+}
+
+.info-fields {
+	margin-left: calc(4em + 12px);
+}
+
 .info-rows {
 	max-height: 240px;
 	overflow-y: auto;
@@ -1589,7 +1626,7 @@ button:not(:disabled):hover {
 .info-custom-row,
 .info-keyword-row {
 	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) var(--control-height);
+	grid-template-columns: repeat(2, minmax(0, 1fr)) var(--control-height);
 	gap: 8px;
 	margin: 8px 0;
 }
@@ -3792,7 +3829,7 @@ audio.page-media {
 	white-space: pre-wrap;
 }
 
-#metaCustomData:not([hidden]) {
+.meta-list + .meta-list:not([hidden]) {
 	margin-top: 12px;
 }