From 22c8a95e7c0cb0b572e3d9640c95f7146e41ec09 Mon Sep 17 00:00:00 2001
From: xiaoqidun <xiaoqidun@gmail.com>
Date: Sat, 31 Oct 2026 14:07:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2=E8=AE=BE=E8=AE=A1):=20?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=9B=BE=E7=89=87=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=EF=BC=8C=E9=80=82=E9=85=8D=E7=AA=84=E5=B1=8F=E4=B8=A4?=
 =?UTF-8?q?=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/webui/index.html |  6 ++++--
 assets/webui/ofdgo.css  | 29 ++++++++++++++++++++++-------
 assets/webui/ofdgo.js   |  1 +
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/assets/webui/index.html b/assets/webui/index.html
index 2208ec5..0430910 100644
--- a/assets/webui/index.html
+++ b/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>
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index 13a6b01..5ec234e 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -1665,14 +1665,29 @@ button:not(:disabled):hover {
 	width: 600px;
 }
 
-.create-image-actions {
-	display: flex;
+.create-images-row {
+	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;
-	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
-	gap: 4px;
+	display: contents;
 }
 
 #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],
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index e459624..dd7b0f6 100644
--- a/assets/webui/ofdgo.js
+++ b/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;