@nsnanocat/preference-panes 0.3.0 → 0.3.1

package/README.md

@@ -62,6 +62,8 @@ const panel = mountPreferencePanes({ element: document.querySelector("#preferenc
 
 每次进入主菜单仅并发 HEAD 各配置 Mock。打开、再次进入或刷新模块页，各 GET 一次 BoxJS 与设置子树；404 的设置子树按无覆盖值处理。保存/删除根据 HTTP 200 更新页面缓存并显示通知，不追加 GET。
 
+设置页使用分组行布局：单选为下拉框，开关为即时切换，多选显示摘要并进入可前进/后退的二级选项页。文本输入、下拉选择及勾选变化均立即串行 POST，无逐项保存或删除按钮；失败恢复当前项已保存值，较新的输入不会被较早请求覆盖。多选页返回时保留主列表滚动位置，不重新 GET 配置。单键 DELETE 能力保留在 API/客户端方法中，不作为逐项页面按钮展示。
+
 模块页底部提供查看/刷新 Caches、清空 Caches 和重置模块。查看缓存按需 GET；清空和重置经确认后 DELETE，成功只更新本页状态。重置后控件显示当前 BoxJS 默认值，再次进入页面才重新读取。模块选择、设置值校验和默认值处理都在前端完成。
 
 业务主菜单由调用项目维护，Biliverse 的入口和四个模块按钮归 Enhanced。未提供对应配置 Mock 的插件入口保持禁用。

package/dist/preference-panes.mjs

@@ -400,17 +400,19 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 	};
 	const shell = node("div", "pp-panel");
 	const header = node("header", "pp-header");
-	const back = node("button", "pp-back", "返回");
+	const back = node("button", "pp-back", "‹");
+	back.setAttribute("aria-label", "返回");
 	back.type = "button";
 	const heading = node("h1", "pp-title", title);
 	const viewport = node("div", "pp-viewport");
 	const toast = node("div", "pp-toast");
 	toast.setAttribute("role", "status");
 	toast.hidden = true;
-	header.append(back, heading);
+	header.append(back, heading, node("span", "pp-nav-spacer"));
 	shell.append(header, viewport, toast);
 	root.append(shell);
 	let timer,
+		secondaryRoute,
 		routedPath,
 		generation = 0,
 		active = null,
@@ -505,40 +507,68 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 		const view = node("section", "pp-fields");
 		/** @type {Array<() => void>} 挂载后执行的多行高度更新 / Textarea sizing callbacks run after mounting. */
 		const growingInputs = [];
+		const editors = new Map();
+		const summaries = [];
+		const groups = new Map();
+		const scrollPositions = new WeakMap();
+		let activeEditor;
+		let queue = Promise.resolve(),
+			pendingWrites = 0;
 		/**
-		 * 写入期间统一切换控件禁用状态。
-		 * Toggle all control disabled states during mutations.
-		 * @param {boolean} disabled 是否禁用 / Whether controls are disabled.
+		 * 根据 hash 切换多选页，保留上级 DOM 和滚动位置。
+		 * Switch multi-select views by hash while retaining parent DOM and scroll position.
 		 * @returns {void} 无返回值 / No return value.
 		 */
-		const disableControls = disabled => {
-			view.querySelectorAll("button,input,select,textarea").forEach(input => {
-				input.disabled = disabled;
-			});
+		const showEditor = () => {
+			let key;
+			try {
+				key = decodeURIComponent(window.location.hash.slice(1));
+			} catch {
+				key = "";
+			}
+			const editor = editors.get(key);
+			const previous = activeEditor?.node ?? view;
+			const next = editor?.node ?? view;
+			if (previous !== next) {
+				scrollPositions.set(previous, previous.scrollTop);
+				previous.remove();
+				viewport.append(next);
+				next.scrollTop = scrollPositions.get(next) ?? 0;
+				if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) next.animate([{ transform: `translateX(${editor ? 100 : -100}%)` }, { transform: "translateX(0)" }], { duration: 260, easing: "cubic-bezier(.22,.61,.36,1)" });
+			}
+			activeEditor = editor;
+			heading.textContent = editor?.title ?? definition.metadata?.name ?? active;
+			back.disabled = saving || (!editor && window.history.length <= 1);
 		};
+		secondaryRoute = showEditor;
 		/**
-		 * 执行页面操作，期间锁定控件，完成后处理延后的导航。
-		 * Run a page action with controls locked, then process deferred navigation.
+		 * 串行执行页面操作，输入可继续编辑，完成后处理延后导航。
+		 * Serialize page actions while inputs remain editable, then process deferred navigation.
 		 * @param {() => Promise<void>} action 请求或写入 / Request or mutation.
 		 * @param {() => void} success 成功后的局部更新 / Local update after success.
+		 * @param {() => void} [failure] 失败后恢复当前输入 / Restore the current input on failure.
 		 * @returns {Promise<void>} 操作完成 / Operation completion.
 		 */
-		async function perform(action, success) {
-			if (saving) return;
+		function perform(action, success, failure = () => {}) {
+			pendingWrites++;
 			saving = true;
 			back.disabled = true;
-			disableControls(true);
-			try {
-				await action();
-				if (!destroyed) success();
-			} catch {
-				/* 请求层已通知错误 / The request layer has already reported the error. */
-			} finally {
-				saving = false;
-				back.disabled = window.history.length <= 1;
-				disableControls(false);
-				if (!destroyed && pendingRoute) route();
-			}
+			return (queue = queue
+				.then(action)
+				.then(() => {
+					if (!destroyed) success();
+				})
+				.catch(() => {
+					/* 请求层已通知错误 / The request layer has already reported the error. */
+					if (!destroyed) failure();
+				})
+				.finally(() => {
+					pendingWrites--;
+					saving = pendingWrites > 0;
+					if (destroyed && !saving) client.leave(active);
+					back.disabled = saving || (!activeEditor && window.history.length <= 1);
+					if (!saving && !destroyed && pendingRoute) route();
+				}));
 		}
 		const metadata = definition.metadata;
 		if (metadata) {
@@ -575,14 +605,27 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 			view.append(info);
 		}
 		for (const field of definition.fields) {
-			const row = node("fieldset", "pp-field");
-			row.append(node("legend", "", field.name));
-			if (field.description) row.append(node("p", "pp-description", field.description));
+			const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
+			const group = match?.[1] ?? "通用";
+			if (!groups.has(group)) {
+				const section = node("section", "form-group");
+				const rows = node("div", "form-group__row");
+				section.append(node("h2", "form-group__title", group), rows);
+				groups.set(group, rows);
+				view.append(section);
+			}
+			const row = node("div", "form-row pp-field");
+			const label = node("div", "form-row__text");
+			label.append(node("span", "form-row__title", match?.[2] ?? field.name));
+			if (field.description) label.append(node("span", "form-row__subtitle", field.description));
+			row.append(label);
 			const value = values[field.key];
 			/** @type {() => unknown} 读取尚未保存的输入 / Read the unsaved input. */
 			let read;
 			/** @type {(value: unknown) => void} 更新当前控件 / Update the current control. */
 			let write;
+			let inputContainer = row;
+			let eventName = "change";
 			switch (true) {
 				case Boolean(field.options) && field.type !== "array": {
 					const select = node("select", "pp-input");
@@ -600,12 +643,42 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 					break;
 				}
 				case field.type === "array" && Boolean(field.options): {
+					const page = node("section", "pp-choice-page");
+					if (field.description) page.append(node("p", "pp-description", field.description));
+					const choices = node("div", "form-group__row");
+					page.append(choices);
+					inputContainer = choices;
+					editors.set(field.key, { node: page, title: match?.[2] ?? field.name });
+					const summary = node("span", "form-row__value pp-summary");
+					const link = node("button", "pp-choice-link");
+					link.type = "button";
+					link.setAttribute("aria-label", field.name);
+					link.append(summary, node("span", "pp-chevron", "›"));
+					row.append(link);
+					const refresh = () => {
+						const value = client.snapshot(active).values[field.key];
+						summary.textContent =
+							field.options
+								.filter(option => Array.isArray(value) && value.includes(option.key))
+								.map(option => option.label)
+								.join("、") || "未选择";
+					};
+					summaries.push(refresh);
+					refresh();
+					link.onclick = () => {
+						window.history.pushState({ ...window.history.state, preferencePane: active }, "", `#${encodeURIComponent(field.key)}`);
+						showEditor();
+					};
+					row.addEventListener("click", event => {
+						if (!link.contains(event.target)) link.click();
+					});
 					const inputs = field.options.map(option => {
-						const label = node("label", "pp-choice", option.label);
+						const label = node("label", "form-row pp-choice", option.label);
 						const input = node("input", "");
 						input.type = "checkbox";
-						label.prepend(input);
-						row.append(label);
+						input.setAttribute("aria-label", option.label);
+						label.append(input);
+						choices.append(label);
 						return { input, key: option.key };
 					});
 					read = () => inputs.filter(option => option.input.checked).map(option => option.key);
@@ -617,6 +690,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 				default: {
 					const multiline = field.control === "textarea" || field.type === "array";
 					const input = node(multiline ? "textarea" : "input", "pp-input");
+					if (multiline) row.classList.add("pp-multiline");
 					input.setAttribute("aria-label", field.name);
 					if (field.placeholder) input.placeholder = field.placeholder;
 					if (multiline && field.rows) input.rows = field.rows;
@@ -639,11 +713,14 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 					}
 					if (field.type === "boolean") {
 						input.type = "checkbox";
+						input.classList.add("pp-switch");
+						input.setAttribute("role", "switch");
 						write = value => {
 							input.checked = value === true;
 						};
 						read = () => input.checked;
 					} else {
+						eventName = "input";
 						if (!multiline) input.type = field.type === "number" ? "number" : "text";
 						write = value => {
 							input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
@@ -665,34 +742,31 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 				}
 			}
 			write(value);
-			const actions = node("div", "pp-actions");
-			for (const [operation, label] of [
-				["write", "保存"],
-				["delete", "删除覆盖值"],
-			]) {
-				const button = node("button", "", label);
-				button.type = "button";
-				button.onclick = () =>
-					perform(
-						async () => {
-							if (operation === "delete") await client.remove(active, field.key);
-							else {
-								let value;
-								try {
-									value = read();
-								} catch (error) {
-									notify({ kind: "error", message: error.message });
-									throw error;
-								}
-								await client.set(active, field.key, value);
-							}
-						},
-						() => write(client.snapshot(active).values[field.key]),
-					);
-				actions.append(button);
-			}
-			row.append(actions);
-			view.append(row);
+			let inputVersion = 0;
+			inputContainer.addEventListener(eventName, event => {
+				if (event.isComposing) return;
+				const version = ++inputVersion,
+					module = active;
+				let value;
+				try {
+					value = read();
+				} catch (error) {
+					notify({ kind: "error", message: error.message });
+					return;
+				}
+				const restore = () => {
+					if (version === inputVersion) write(client.snapshot(module).values[field.key]);
+				};
+				perform(
+					() => client.set(module, field.key, value),
+					() => {
+						for (const refresh of summaries) refresh();
+					},
+					restore,
+				);
+			});
+			if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
+			groups.get(group).append(row);
 		}
 		const maintenance = node("section", "pp-maintenance");
 		maintenance.append(node("h2", "pp-title", "模块数据"));
@@ -705,6 +779,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 		output.setAttribute("aria-label", "Caches 内容");
 		for (const button of [cacheView, cacheClear, reset]) button.type = "button";
 		cacheView.onclick = () => {
+			if (saving) return;
 			let value;
 			return perform(
 				async () => {
@@ -723,6 +798,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 			);
 		};
 		cacheClear.onclick = () => {
+			if (saving) return;
 			if (!window.confirm(`清空 ${active} 的全部 Caches？`)) return;
 			return perform(
 				() => client.clearCaches(active),
@@ -732,6 +808,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 			);
 		};
 		reset.onclick = () => {
+			if (saving) return;
 			if (!window.confirm(`重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) return;
 			return perform(() => client.reset(active), controls);
 		};
@@ -740,6 +817,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 		view.append(maintenance);
 		viewport.replaceChildren(view);
 		for (const grow of growingInputs) grow();
+		showEditor();
 	}
 	/**
 	 * 按页面 pathname 切换模块，写入尚未完成时延后导航。
@@ -752,6 +830,7 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 			return;
 		}
 		pendingRoute = false;
+		secondaryRoute = undefined;
 		if (active) client.leave(active);
 		routedPath = window.location.pathname;
 		const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(routedPath);
@@ -771,7 +850,9 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 	 */
 	const onPopState = () => {
 		if (window.location.pathname !== routedPath) route();
+		else secondaryRoute?.();
 	};
+	const onHashChange = () => secondaryRoute?.();
 	/**
 	 * 从浏览器往返缓存恢复时重新读取当前模块。
 	 * Reload the current module when restored from the browser back-forward cache.
@@ -782,10 +863,15 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 		if (event.persisted) route();
 	};
 	back.onclick = () => {
-		if (!saving) window.history.back();
+		if (saving) return;
+		if (window.location.hash && window.history.state?.preferencePane !== active) {
+			window.history.replaceState(window.history.state, "", window.location.pathname);
+			secondaryRoute?.();
+		} else window.history.back();
 	};
 	window.addEventListener("popstate", onPopState);
 	window.addEventListener("pageshow", onPageShow);
+	window.addEventListener("hashchange", onHashChange);
 	route();
 	return {
 		/**
@@ -797,8 +883,9 @@ function mountPreferencePanes({ element: root, fetch, title = "Preferences" }) {
 			destroyed = true;
 			window.removeEventListener("popstate", onPopState);
 			window.removeEventListener("pageshow", onPageShow);
+			window.removeEventListener("hashchange", onHashChange);
 			generation++;
-			if (active) client.leave(active);
+			if (active && !saving) client.leave(active);
 			clearTimeout(timer);
 			shell.remove();
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nsnanocat/preference-panes",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "Shared settings API runtime for JavaScript proxy modules",
 	"author": "VirgilClyne <Virgil@nanocat.me>",
 	"homepage": "https://NSNanoCat.github.io/preference-panes",

package/src/browser/index.d.ts

@@ -147,6 +147,8 @@ export function createPreferencesClient(options?: PreferencesClientOptions): Pre
 /**
  * 按 /settings/{module} 挂载动态面板，监听导航和页面恢复事件。
  * Mount a dynamic panel at /settings/{module} and observe navigation and page restoration.
+ * 控件变化即时串行写入；多选用二级页，返回不重新读取设置。
+ * Control changes save immediately in sequence; multi-select uses a secondary page without refetching on return.
  * @param options 挂载选项 / Mount options.
  * @returns 面板生命周期句柄 / Panel lifecycle handle.
  */

package/src/browser/panel.css

@@ -1,106 +1,274 @@
+/* 分组列表沿用 Bilibili 设置页的行结构，样式限定在面板内。
+ * Grouped rows follow the Bilibili settings layout, scoped to the panel. */
 .pp-panel {
+	--pp-text: #18191c;
+	--pp-background: #f6f7f8;
+	--pp-surface: #fff;
+	--pp-border: #e3e5e7;
+	--pp-muted: #9499a0;
+	--pp-accent: #fb7299;
 	font:
-		15px / 1.5 system-ui,
+		15px / 1.5 -apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
 		sans-serif;
-	color: var(--pp-text, #18191c);
-	background: var(--pp-background, #f6f7f8);
-	max-width: 760px;
-	margin: auto;
+	color: var(--pp-text);
+	background: var(--pp-background);
 	position: relative;
+	min-height: 100vh;
 }
 .pp-panel * {
 	box-sizing: border-box;
+	letter-spacing: 0;
 }
 .pp-header {
+	height: calc(52px + env(safe-area-inset-top));
+	padding: env(safe-area-inset-top) 12px 0;
 	display: flex;
 	align-items: center;
-	gap: 12px;
-	padding: 12px 16px;
-	background: var(--pp-surface, #fff);
+	background: var(--pp-surface);
+	border-bottom: 1px solid var(--pp-border);
+	position: relative;
 }
 .pp-title {
-	font-size: 18px;
+	font-size: 17px;
+	font-weight: 500;
 	margin: 0;
-	overflow-wrap: anywhere;
 	min-width: 0;
+	overflow-wrap: anywhere;
 }
-.pp-module-info {
-	display: flex;
-	gap: 12px;
-	margin-bottom: 16px;
+.pp-header .pp-title {
+	flex: 1;
+	text-align: center;
 }
-.pp-module-icon {
-	width: 48px;
-	height: 48px;
+.pp-nav-spacer {
+	width: 44px;
 	flex: none;
-	object-fit: contain;
-}
-.pp-module-details {
-	min-width: 0;
-	overflow-wrap: anywhere;
 }
-.pp-module-source {
+.pp-panel button {
+	font: inherit;
+	cursor: pointer;
+	border: 0;
+	background: none;
 	color: inherit;
-	text-decoration: underline;
+}
+.pp-panel .pp-back {
+	width: 44px;
+	height: 44px;
+	flex: none;
+	font-size: 34px;
+	line-height: 32px;
+	padding: 0;
+}
+.pp-panel button:disabled {
+	opacity: 0.5;
+	cursor: wait;
 }
 .pp-viewport {
-	max-height: 80vh;
+	position: relative;
+	height: calc(100vh - 52px - env(safe-area-inset-top));
+	overflow: hidden;
+}
+@supports (height: 100dvh) {
+	.pp-viewport {
+		height: calc(100dvh - 52px - env(safe-area-inset-top));
+	}
+}
+.pp-fields,
+.pp-choice-page {
+	position: absolute;
+	inset: 0;
 	overflow: auto;
-	padding: 16px;
+	padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
+	background: var(--pp-background);
 }
-.pp-panel button {
-	font: inherit;
-	cursor: pointer;
-	border: 1px solid var(--pp-border, #d8dce0);
+.pp-panel .form-group {
+	margin: 0 0 12px;
+}
+.pp-panel .form-group__title {
+	font-size: 12px;
+	line-height: 17px;
+	font-weight: 400;
+	color: var(--pp-muted);
+	padding-left: 12px;
+	margin: 12px 0 6px;
+}
+.pp-panel .form-group__row {
 	border-radius: 8px;
-	padding: 8px 12px;
-	color: inherit;
-	background: var(--pp-surface, #fff);
+	overflow: hidden;
+	background: var(--pp-surface);
 }
-.pp-panel button:disabled {
-	opacity: 0.45;
-	cursor: default;
-}
-.pp-field {
-	margin: 0 0 16px;
-	padding: 16px;
-	border: 1px solid var(--pp-border, #d8dce0);
-	border-radius: 10px;
-	background: var(--pp-surface, #fff);
+.pp-panel .form-row {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 46px;
+	padding: 12px;
+	border: 0;
+	border-bottom: 1px solid var(--pp-border);
+	background: var(--pp-surface);
+	gap: 12px;
+}
+.pp-panel .form-row:last-child {
+	border-bottom: 0;
+}
+.pp-panel .form-row__text {
+	flex: 1;
 	min-width: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
 }
-.pp-description {
+.pp-panel .form-row__title {
+	font-size: 15px;
+	line-height: 22px;
+	color: var(--pp-text);
+	text-align: left;
+}
+.pp-panel .form-row__subtitle {
+	font-size: 12px;
+	line-height: 18px;
+	color: var(--pp-muted);
+	overflow-wrap: anywhere;
+	margin-top: 2px;
+}
+.pp-choice-link {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+	max-width: 45%;
+	min-width: 44px;
+	min-height: 44px;
+	padding: 0;
+	text-align: right;
+	flex: 1;
+}
+.pp-summary {
+	color: var(--pp-muted);
 	font-size: 13px;
-	opacity: 0.7;
-	margin: 0 0 8px;
-	white-space: pre-wrap;
+	line-height: 18px;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 	overflow-wrap: anywhere;
 }
-.pp-input:not([type="checkbox"]) {
-	width: 100%;
+.pp-chevron {
+	color: var(--pp-muted);
+	font-size: 22px;
+	flex: none;
+}
+.pp-input {
 	font: inherit;
-	padding: 8px;
-	border: 1px solid var(--pp-border, #d8dce0);
+	color: var(--pp-text);
+	background: var(--pp-surface);
+	border: 1px solid var(--pp-border);
 	border-radius: 6px;
-	background: var(--pp-surface, #fff);
-	color: inherit;
+	padding: 8px;
+	min-width: 0;
+	max-width: 45%;
+	width: 45%;
 }
-.pp-choice {
+select.pp-input {
+	text-overflow: ellipsis;
+	font-size: 13px;
+}
+.pp-panel .pp-multiline {
 	display: block;
-	margin: 6px 0;
+}
+.pp-multiline .pp-input {
+	max-width: 100%;
+	width: 100%;
+	margin-top: 10px;
+}
+.pp-switch {
+	appearance: none;
+	-webkit-appearance: none;
+	position: relative;
+	flex: none;
+	width: 32px;
+	height: 20px;
+	max-width: none;
+	border: 0;
+	border-radius: 15px;
+	padding: 0;
+	background: #c9ccd0;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+.pp-switch::before {
+	content: "";
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: white;
+	transition: transform 0.2s;
+}
+.pp-switch:checked {
+	background: var(--pp-accent);
+}
+.pp-switch:checked::before {
+	transform: translateX(12px);
+}
+.pp-choice {
+	justify-content: space-between;
+	cursor: pointer;
 }
 .pp-choice input {
-	margin-right: 8px;
+	width: 20px;
+	height: 20px;
+	flex: none;
+	accent-color: var(--pp-accent);
+	margin: 0;
+}
+.pp-description {
+	font-size: 12px;
+	line-height: 1.6;
+	color: var(--pp-muted);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+.pp-module-info {
+	display: flex;
+	gap: 12px;
+	margin: 12px 0;
+}
+.pp-module-icon {
+	width: 48px;
+	height: 48px;
+	object-fit: contain;
+	flex: none;
+}
+.pp-module-details {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.pp-module-source {
+	color: inherit;
+	text-decoration: underline;
+}
+.pp-maintenance {
+	margin-top: 24px;
 }
 .pp-actions {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
-	margin-top: 12px;
 }
-.pp-maintenance {
-	border-top: 1px solid var(--pp-border, #d8dce0);
-	padding-top: 16px;
+.pp-actions button,
+.pp-error button {
+	min-height: 44px;
+	padding: 8px 12px;
+	border-radius: 6px;
+	background: var(--pp-surface);
+}
+.pp-panel .pp-danger {
+	color: #e45656;
 }
 .pp-cache {
 	max-height: 320px;
@@ -108,33 +276,50 @@
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
-.pp-panel .pp-danger {
-	color: #d34242;
-}
 .pp-toast {
+	pointer-events: none;
 	position: fixed;
-	bottom: 32px;
+	bottom: calc(30px + env(safe-area-inset-bottom));
 	left: 50%;
 	transform: translateX(-50%);
-	padding: 10px 18px;
-	border-radius: 10px;
-	background: #252525;
-	color: #fff;
 	max-width: 90vw;
-	z-index: 1000;
+	padding: 10px 16px;
+	border-radius: 8px;
+	background: #333e;
+	color: white;
+	font-size: 13px;
+	z-index: 20;
 }
 .pp-toast[data-kind="error"] {
 	background: #8d2424;
 }
 .pp-panel :focus-visible {
-	outline: 2px solid #008ac5;
-	outline-offset: 2px;
+	outline: 2px solid var(--pp-accent);
+	outline-offset: -2px;
 }
 @media (prefers-color-scheme: dark) {
 	.pp-panel {
-		--pp-text: #eee;
-		--pp-background: #18191c;
-		--pp-surface: #25262a;
-		--pp-border: #47494e;
+		--pp-text: #e3e5e7;
+		--pp-background: #17181a;
+		--pp-surface: #232427;
+		--pp-border: #343538;
+	}
+}
+:root[data-theme="dark"] .pp-panel {
+	--pp-text: #e3e5e7;
+	--pp-background: #17181a;
+	--pp-surface: #232427;
+	--pp-border: #343538;
+}
+:root[data-theme="light"] .pp-panel {
+	--pp-text: #18191c;
+	--pp-background: #f6f7f8;
+	--pp-surface: #fff;
+	--pp-border: #e3e5e7;
+}
+@media (prefers-reduced-motion: reduce) {
+	.pp-panel .pp-switch,
+	.pp-panel .pp-switch::before {
+		transition: none;
 	}
 }

package/src/browser/panel.mjs

@@ -26,17 +26,19 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 	};
 	const shell = node("div", "pp-panel");
 	const header = node("header", "pp-header");
-	const back = node("button", "pp-back", "返回");
+	const back = node("button", "pp-back", "‹");
+	back.setAttribute("aria-label", "返回");
 	back.type = "button";
 	const heading = node("h1", "pp-title", title);
 	const viewport = node("div", "pp-viewport");
 	const toast = node("div", "pp-toast");
 	toast.setAttribute("role", "status");
 	toast.hidden = true;
-	header.append(back, heading);
+	header.append(back, heading, node("span", "pp-nav-spacer"));
 	shell.append(header, viewport, toast);
 	root.append(shell);
 	let timer,
+		secondaryRoute,
 		routedPath,
 		generation = 0,
 		active = null,
@@ -131,40 +133,68 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 		const view = node("section", "pp-fields");
 		/** @type {Array<() => void>} 挂载后执行的多行高度更新 / Textarea sizing callbacks run after mounting. */
 		const growingInputs = [];
+		const editors = new Map();
+		const summaries = [];
+		const groups = new Map();
+		const scrollPositions = new WeakMap();
+		let activeEditor;
+		let queue = Promise.resolve(),
+			pendingWrites = 0;
 		/**
-		 * 写入期间统一切换控件禁用状态。
-		 * Toggle all control disabled states during mutations.
-		 * @param {boolean} disabled 是否禁用 / Whether controls are disabled.
+		 * 根据 hash 切换多选页，保留上级 DOM 和滚动位置。
+		 * Switch multi-select views by hash while retaining parent DOM and scroll position.
 		 * @returns {void} 无返回值 / No return value.
 		 */
-		const disableControls = disabled => {
-			view.querySelectorAll("button,input,select,textarea").forEach(input => {
-				input.disabled = disabled;
-			});
+		const showEditor = () => {
+			let key;
+			try {
+				key = decodeURIComponent(window.location.hash.slice(1));
+			} catch {
+				key = "";
+			}
+			const editor = editors.get(key);
+			const previous = activeEditor?.node ?? view;
+			const next = editor?.node ?? view;
+			if (previous !== next) {
+				scrollPositions.set(previous, previous.scrollTop);
+				previous.remove();
+				viewport.append(next);
+				next.scrollTop = scrollPositions.get(next) ?? 0;
+				if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) next.animate([{ transform: `translateX(${editor ? 100 : -100}%)` }, { transform: "translateX(0)" }], { duration: 260, easing: "cubic-bezier(.22,.61,.36,1)" });
+			}
+			activeEditor = editor;
+			heading.textContent = editor?.title ?? definition.metadata?.name ?? active;
+			back.disabled = saving || (!editor && window.history.length <= 1);
 		};
+		secondaryRoute = showEditor;
 		/**
-		 * 执行页面操作，期间锁定控件，完成后处理延后的导航。
-		 * Run a page action with controls locked, then process deferred navigation.
+		 * 串行执行页面操作，输入可继续编辑，完成后处理延后导航。
+		 * Serialize page actions while inputs remain editable, then process deferred navigation.
 		 * @param {() => Promise<void>} action 请求或写入 / Request or mutation.
 		 * @param {() => void} success 成功后的局部更新 / Local update after success.
+		 * @param {() => void} [failure] 失败后恢复当前输入 / Restore the current input on failure.
 		 * @returns {Promise<void>} 操作完成 / Operation completion.
 		 */
-		async function perform(action, success) {
-			if (saving) return;
+		function perform(action, success, failure = () => {}) {
+			pendingWrites++;
 			saving = true;
 			back.disabled = true;
-			disableControls(true);
-			try {
-				await action();
-				if (!destroyed) success();
-			} catch {
-				/* 请求层已通知错误 / The request layer has already reported the error. */
-			} finally {
-				saving = false;
-				back.disabled = window.history.length <= 1;
-				disableControls(false);
-				if (!destroyed && pendingRoute) route();
-			}
+			return (queue = queue
+				.then(action)
+				.then(() => {
+					if (!destroyed) success();
+				})
+				.catch(() => {
+					/* 请求层已通知错误 / The request layer has already reported the error. */
+					if (!destroyed) failure();
+				})
+				.finally(() => {
+					pendingWrites--;
+					saving = pendingWrites > 0;
+					if (destroyed && !saving) client.leave(active);
+					back.disabled = saving || (!activeEditor && window.history.length <= 1);
+					if (!saving && !destroyed && pendingRoute) route();
+				}));
 		}
 		const metadata = definition.metadata;
 		if (metadata) {
@@ -201,14 +231,27 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 			view.append(info);
 		}
 		for (const field of definition.fields) {
-			const row = node("fieldset", "pp-field");
-			row.append(node("legend", "", field.name));
-			if (field.description) row.append(node("p", "pp-description", field.description));
+			const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
+			const group = match?.[1] ?? "通用";
+			if (!groups.has(group)) {
+				const section = node("section", "form-group");
+				const rows = node("div", "form-group__row");
+				section.append(node("h2", "form-group__title", group), rows);
+				groups.set(group, rows);
+				view.append(section);
+			}
+			const row = node("div", "form-row pp-field");
+			const label = node("div", "form-row__text");
+			label.append(node("span", "form-row__title", match?.[2] ?? field.name));
+			if (field.description) label.append(node("span", "form-row__subtitle", field.description));
+			row.append(label);
 			const value = values[field.key];
 			/** @type {() => unknown} 读取尚未保存的输入 / Read the unsaved input. */
 			let read;
 			/** @type {(value: unknown) => void} 更新当前控件 / Update the current control. */
 			let write;
+			let inputContainer = row;
+			let eventName = "change";
 			switch (true) {
 				case Boolean(field.options) && field.type !== "array": {
 					const select = node("select", "pp-input");
@@ -226,12 +269,42 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 					break;
 				}
 				case field.type === "array" && Boolean(field.options): {
+					const page = node("section", "pp-choice-page");
+					if (field.description) page.append(node("p", "pp-description", field.description));
+					const choices = node("div", "form-group__row");
+					page.append(choices);
+					inputContainer = choices;
+					editors.set(field.key, { node: page, title: match?.[2] ?? field.name });
+					const summary = node("span", "form-row__value pp-summary");
+					const link = node("button", "pp-choice-link");
+					link.type = "button";
+					link.setAttribute("aria-label", field.name);
+					link.append(summary, node("span", "pp-chevron", "›"));
+					row.append(link);
+					const refresh = () => {
+						const value = client.snapshot(active).values[field.key];
+						summary.textContent =
+							field.options
+								.filter(option => Array.isArray(value) && value.includes(option.key))
+								.map(option => option.label)
+								.join("、") || "未选择";
+					};
+					summaries.push(refresh);
+					refresh();
+					link.onclick = () => {
+						window.history.pushState({ ...window.history.state, preferencePane: active }, "", `#${encodeURIComponent(field.key)}`);
+						showEditor();
+					};
+					row.addEventListener("click", event => {
+						if (!link.contains(event.target)) link.click();
+					});
 					const inputs = field.options.map(option => {
-						const label = node("label", "pp-choice", option.label);
+						const label = node("label", "form-row pp-choice", option.label);
 						const input = node("input", "");
 						input.type = "checkbox";
-						label.prepend(input);
-						row.append(label);
+						input.setAttribute("aria-label", option.label);
+						label.append(input);
+						choices.append(label);
 						return { input, key: option.key };
 					});
 					read = () => inputs.filter(option => option.input.checked).map(option => option.key);
@@ -243,6 +316,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 				default: {
 					const multiline = field.control === "textarea" || field.type === "array";
 					const input = node(multiline ? "textarea" : "input", "pp-input");
+					if (multiline) row.classList.add("pp-multiline");
 					input.setAttribute("aria-label", field.name);
 					if (field.placeholder) input.placeholder = field.placeholder;
 					if (multiline && field.rows) input.rows = field.rows;
@@ -265,11 +339,14 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 					}
 					if (field.type === "boolean") {
 						input.type = "checkbox";
+						input.classList.add("pp-switch");
+						input.setAttribute("role", "switch");
 						write = value => {
 							input.checked = value === true;
 						};
 						read = () => input.checked;
 					} else {
+						eventName = "input";
 						if (!multiline) input.type = field.type === "number" ? "number" : "text";
 						write = value => {
 							input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
@@ -291,34 +368,31 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 				}
 			}
 			write(value);
-			const actions = node("div", "pp-actions");
-			for (const [operation, label] of [
-				["write", "保存"],
-				["delete", "删除覆盖值"],
-			]) {
-				const button = node("button", "", label);
-				button.type = "button";
-				button.onclick = () =>
-					perform(
-						async () => {
-							if (operation === "delete") await client.remove(active, field.key);
-							else {
-								let value;
-								try {
-									value = read();
-								} catch (error) {
-									notify({ kind: "error", message: error.message });
-									throw error;
-								}
-								await client.set(active, field.key, value);
-							}
-						},
-						() => write(client.snapshot(active).values[field.key]),
-					);
-				actions.append(button);
-			}
-			row.append(actions);
-			view.append(row);
+			let inputVersion = 0;
+			inputContainer.addEventListener(eventName, event => {
+				if (event.isComposing) return;
+				const version = ++inputVersion,
+					module = active;
+				let value;
+				try {
+					value = read();
+				} catch (error) {
+					notify({ kind: "error", message: error.message });
+					return;
+				}
+				const restore = () => {
+					if (version === inputVersion) write(client.snapshot(module).values[field.key]);
+				};
+				perform(
+					() => client.set(module, field.key, value),
+					() => {
+						for (const refresh of summaries) refresh();
+					},
+					restore,
+				);
+			});
+			if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
+			groups.get(group).append(row);
 		}
 		const maintenance = node("section", "pp-maintenance");
 		maintenance.append(node("h2", "pp-title", "模块数据"));
@@ -331,6 +405,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 		output.setAttribute("aria-label", "Caches 内容");
 		for (const button of [cacheView, cacheClear, reset]) button.type = "button";
 		cacheView.onclick = () => {
+			if (saving) return;
 			let value;
 			return perform(
 				async () => {
@@ -349,6 +424,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 			);
 		};
 		cacheClear.onclick = () => {
+			if (saving) return;
 			if (!window.confirm(`清空 ${active} 的全部 Caches？`)) return;
 			return perform(
 				() => client.clearCaches(active),
@@ -358,6 +434,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 			);
 		};
 		reset.onclick = () => {
+			if (saving) return;
 			if (!window.confirm(`重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) return;
 			return perform(() => client.reset(active), controls);
 		};
@@ -366,6 +443,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 		view.append(maintenance);
 		viewport.replaceChildren(view);
 		for (const grow of growingInputs) grow();
+		showEditor();
 	}
 	/**
 	 * 按页面 pathname 切换模块，写入尚未完成时延后导航。
@@ -378,6 +456,7 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 			return;
 		}
 		pendingRoute = false;
+		secondaryRoute = undefined;
 		if (active) client.leave(active);
 		routedPath = window.location.pathname;
 		const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(routedPath);
@@ -397,7 +476,9 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 	 */
 	const onPopState = () => {
 		if (window.location.pathname !== routedPath) route();
+		else secondaryRoute?.();
 	};
+	const onHashChange = () => secondaryRoute?.();
 	/**
 	 * 从浏览器往返缓存恢复时重新读取当前模块。
 	 * Reload the current module when restored from the browser back-forward cache.
@@ -408,10 +489,15 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 		if (event.persisted) route();
 	};
 	back.onclick = () => {
-		if (!saving) window.history.back();
+		if (saving) return;
+		if (window.location.hash && window.history.state?.preferencePane !== active) {
+			window.history.replaceState(window.history.state, "", window.location.pathname);
+			secondaryRoute?.();
+		} else window.history.back();
 	};
 	window.addEventListener("popstate", onPopState);
 	window.addEventListener("pageshow", onPageShow);
+	window.addEventListener("hashchange", onHashChange);
 	route();
 	return {
 		/**
@@ -423,8 +509,9 @@ export function mountPreferencePanes({ element: root, fetch, title = "Preference
 			destroyed = true;
 			window.removeEventListener("popstate", onPopState);
 			window.removeEventListener("pageshow", onPageShow);
+			window.removeEventListener("hashchange", onHashChange);
 			generation++;
-			if (active) client.leave(active);
+			if (active && !saving) client.leave(active);
 			clearTimeout(timer);
 			shell.remove();
 		},