feat(界面设计): 合并图片操作按钮，适配窄屏两排

assets/webui/index.html

@@ -354,9 +354,11 @@
 					<label for="createName">名称</label>
 					<input id="createName" type="text" value="未命名" required autofocus>
 				</div>
-				<div id="createImagesRow" class="form-row" hidden><span>图片</span><div class="create-image-actions"><button id="createImageAdd" class="button" type="button">添加</button><span id="createImageCount">0</span><input id="createImages" type="file" accept=".png,.jpg,.jpeg,.bmp,.tif,.tiff,.jb2,.jbig2" multiple hidden disabled></div></div>
+				<div id="createImagesRow" class="create-images-row" hidden>
+					<div class="create-image-actions"><button id="createImageAdd" class="button" type="button">添加图片</button><div id="createImageOrder" class="form-options" hidden><label><input type="radio" name="imageOrder" value="name-asc" checked><span>名称升序</span></label><label><input type="radio" name="imageOrder" value="name-desc"><span>名称降序</span></label><label><input type="radio" name="imageOrder" value="time-asc"><span>时间升序</span></label><label><input type="radio" name="imageOrder" value="time-desc"><span>时间降序</span></label><label><input type="radio" name="imageOrder" value="added"><span>添加顺序</span></label></div></div>
+					<span id="createImageCount">0</span><input id="createImages" type="file" accept=".png,.jpg,.jpeg,.bmp,.tif,.tiff,.jb2,.jbig2" multiple hidden disabled>
+				</div>
 				<div id="createImageQueue" hidden>
-					<div class="form-row"><span>排序</span><div id="createImageOrder" class="form-options"><label><input type="radio" name="imageOrder" value="name-asc" checked><span>名称升序</span></label><label><input type="radio" name="imageOrder" value="name-desc"><span>名称降序</span></label><label><input type="radio" name="imageOrder" value="time-asc"><span>时间升序</span></label><label><input type="radio" name="imageOrder" value="time-desc"><span>时间降序</span></label><label><input type="radio" name="imageOrder" value="added"><span>添加顺序</span></label></div></div>
 					<div id="createImageList" class="create-image-list"></div>
 				</div>
 				<div id="createSizeRow" class="form-row"><label for="createSize">纸张</label><select id="createSize"><option value="image" hidden disabled>随图</option><option value="a4" selected>A4</option><option value="a3">A3</option><option value="a5">A5</option><option value="custom">自定</option></select></div>

assets/webui/ofdgo.css

@@ -1665,14 +1665,29 @@ button:not(:disabled):hover {
 	width: 600px;
 }
 
-.create-image-actions {
+.create-images-row {
-	display: flex;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
 	align-items: center;
-	gap: 8px;
+	gap: 4px;
+	margin-bottom: 12px;
+}
+
+.create-image-actions {
+	display: grid;
+	grid-template-columns: repeat(6, minmax(0, 1fr));
+	gap: 4px;
+}
+
+@media (max-width: 600px) {
+	.create-image-actions {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
 }
 
 #createImageCount {
-	margin-left: auto;
+	align-self: start;
+	line-height: var(--control-height);
 	color: var(--text-muted);
 }
 
@@ -1847,9 +1862,7 @@ button:not(:disabled):hover {
 }
 
 #createImageOrder {
-	display: grid;
+	display: contents;
-	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
-	gap: 4px;
 }
 
 #createImageOrder span {
@@ -3427,6 +3440,8 @@ button.outline-link:hover {
 .navigation-tabs[hidden],
 .page-selection-tools[hidden],
 .form-row[hidden],
+.create-images-row[hidden],
+#createImageOrder[hidden],
 .form-pair[hidden],
 .form-actions > [hidden],
 .document-actions > [hidden],

assets/webui/ofdgo.js

@@ -3854,6 +3854,7 @@ function updateCreateOptions() {
 	el.createSize.querySelector('[value="image"]').hidden = !images;
 	el.createSize.querySelector('[value="image"]').disabled = !images;
 	el.createImageQueue.hidden = !images || !state.createImageQueue?.entries.length;
+	el.createImageOrder.hidden = el.createImageQueue.hidden;
 	el.createPanel.classList.toggle("create-images", images);
 	el.createImageAdd.disabled = busy;
 	for (const input of el.createImageOrder.querySelectorAll("input")) input.disabled = busy;