From 8d60b1c45b5d558da0d1c2e3105ba16339ba4b5d Mon Sep 17 00:00:00 2001
From: xiaoqidun <xiaoqidun@gmail.com>
Date: Sat, 31 Oct 2026 14:00:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2=E8=AE=BE=E8=AE=A1):=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=8E=92=E5=BA=8F=E6=94=B9=E4=B8=BA=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=88=86=E6=AE=B5=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/webui/index.html |  2 +-
 assets/webui/ofdgo.css  | 20 ++++++++++++++++++++
 assets/webui/ofdgo.js   |  7 ++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/assets/webui/index.html b/assets/webui/index.html
index 407fb54..2208ec5 100644
--- a/assets/webui/index.html
+++ b/assets/webui/index.html
@@ -356,7 +356,7 @@
 				</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="createImageQueue" hidden>
-					<div class="form-row"><label for="createImageOrder">排序</label><select id="createImageOrder"><option value="name-asc">名称升序</option><option value="name-desc">名称降序</option><option value="time-asc">时间升序</option><option value="time-desc">时间降序</option><option value="added">添加顺序</option><option value="custom">自定顺序</option></select></div>
+					<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 9d1e126..13a6b01 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -1846,6 +1846,26 @@ button:not(:disabled):hover {
 	outline-offset: 2px;
 }
 
+#createImageOrder {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+	gap: 4px;
+}
+
+#createImageOrder span {
+	border-left: 1px solid var(--line);
+	border-radius: var(--radius-control);
+	white-space: nowrap;
+}
+
+#createImageOrder input:not(:disabled):not(:checked) + span:hover {
+	background: var(--hover-fill);
+}
+
+#createImageOrder input:disabled + span {
+	opacity: 0.48;
+}
+
 .info-rows textarea,
 .gradient-stop-row input[type="number"],
 .structure-attribute > input,
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index 8570a33..e459624 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -1691,7 +1691,7 @@ el.createImageAdd.addEventListener("click", () => {
 });
 el.createImages.addEventListener("change", addCreateImages);
 el.createImages.addEventListener("cancel", () => { createImagePicker = null; });
-el.createImageOrder.addEventListener("change", () => { state.createImageQueue.order = el.createImageOrder.value; sortCreateImages(); });
+el.createImageOrder.addEventListener("change", event => { state.createImageQueue.order = event.target.value; sortCreateImages(); });
 el.createImageList.addEventListener("click", event => {
 	const row = event.target.closest("[data-image-id]");
 	if (!row || state.imageImporting) return;
@@ -3855,7 +3855,8 @@ function updateCreateOptions() {
 	el.createSize.querySelector('[value="image"]').disabled = !images;
 	el.createImageQueue.hidden = !images || !state.createImageQueue?.entries.length;
 	el.createPanel.classList.toggle("create-images", images);
-	el.createImageAdd.disabled = el.createImageOrder.disabled = busy;
+	el.createImageAdd.disabled = busy;
+	for (const input of el.createImageOrder.querySelectorAll("input")) input.disabled = busy;
 	const dimensions = !images || el.createSize.value !== "image";
 	toggle("createDimensions", dimensions);
 	toggle("createDirectionRow", dimensions);
@@ -3960,7 +3961,7 @@ function renderCreateImages() {
 	const top = el.createImageList.scrollTop;
 	const focused = el.createImageList.contains(document.activeElement);
 	el.createImageList.replaceChildren();
-	el.createImageOrder.value = queue.order;
+	for (const input of el.createImageOrder.querySelectorAll("input")) input.checked = input.value === queue.order;
 	el.createImageCount.textContent = String(queue.entries.length);
 	if (!queue.entries.some(entry => entry.id === queue.selected)) queue.selected = queue.entries[0]?.id ?? null;
 	queue.observer = new IntersectionObserver(items => {