feat(界面设计): 图片排序改为自适应分段按钮

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>

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,

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 => {