feat(界面设计): 新增标题材质切换与保存

assets/webui/index.html

@@ -460,6 +460,7 @@
 								<button type="button" data-theme-choice="light"><span class="theme-light-icon"></span><span>浅色</span></button>
 								<button type="button" data-theme-choice="dark"><span class="theme-dark-icon"></span><span>深色</span></button>
 							</div>
+							<label class="appearance-material" hidden><span>标题材质</span><select id="titleBarMaterial"><option value="solid">纯色</option><option value="mica">云母</option><option value="acrylic">亚克力</option></select></label>
 						</section>
 						<section id="associationSection" data-appearance-page="association" hidden>
 							<div class="association-row" data-scope="user"><span>当前用户</span><span class="association-state"></span><div class="association-actions"><button class="small-button" type="button" data-action="register">注册</button><button class="small-button" type="button" data-action="remove">撤销</button></div></div>

assets/webui/ofdgo.css

@@ -1685,6 +1685,7 @@ button:not(:disabled):hover {
 .gradient-stop-row input[type="number"],
 .structure-attribute > input,
 .print-options select,
+.appearance-material select,
 .form-row input[type="text"],
 .form-row input[type="password"],
 .form-row input[type="number"],
@@ -4946,6 +4947,18 @@ audio.page-media {
 	}
 }
 
+.appearance-material:not([hidden]) {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	margin-top: 16px;
+}
+
+.appearance-material select {
+	width: 120px;
+}
+
 .appearance-themes {
 	display: flex;
 	gap: 3px;

assets/webui/ofdgo.js

@@ -2647,7 +2647,7 @@ function isForegroundDocument(tab) {
 function applyTitleBarInfo(info) {
 	if (!info || !info.height) return;
 	workspace.titleBarReady = true;
-	document.documentElement.toggleAttribute("data-titlebar-material", info.material === 1);
+	document.documentElement.toggleAttribute("data-titlebar-material", info.material === 1 || info.material === 2);
 	document.body.style.setProperty("--titlebar-height", `${info.height}px`);
 	el.documentTitleBar.style.setProperty("--titlebar-left", `${info.left}px`);
 	el.documentTitleBar.style.setProperty("--titlebar-right", `${info.right}px`);

assets/webui/ofdgo_theme.js

@@ -3,7 +3,8 @@
 	const preference = matchMedia("(prefers-color-scheme: dark)");
 	const key = "ofdgo.theme";
 	let mode = root.dataset.themeMode || "system";
-	let host = null, report = null, pending = Promise.resolve();
+	let material = root.dataset.titlebarChoice || "mica";
+	let host = null, report = null, pending = Promise.resolve(), revision = 0, committed = null;
 	if (!root.dataset.themeMode) {
 		try { mode = localStorage.getItem(key) || "system"; } catch {}
 	}
@@ -13,11 +14,21 @@
 		root.dataset.theme = mode === "system" ? preference.matches ? "dark" : "light" : mode;
 		document.querySelector('meta[name="theme-color"]').content = root.dataset.theme === "dark" ? "#272e33" : "#fafbfc";
 		for (const button of document.querySelectorAll("[data-theme-choice]")) button.dataset.pressed = String(button.dataset.themeChoice === mode);
+		const select = document.querySelector("#titleBarMaterial");
+		if (select) select.value = material;
 	}
 	function sync() {
 		if (!host) return;
-		const value = {mode, dark: root.dataset.theme === "dark"};
-		pending = pending.then(() => host.call("appearance", value)).catch(error => report(error));
+		const value = {mode, dark: root.dataset.theme === "dark", material};
+		const current = ++revision;
+		pending = pending.then(() => host.call("appearance", value)).then(() => { committed = value; }).catch(error => {
+			if (current === revision) {
+				mode = committed.mode;
+				material = committed.material;
+				apply();
+			}
+			report(error);
+		});
 	}
 	function set(value) {
 		mode = value;
@@ -37,6 +48,19 @@
 		mode = ["light", "dark"].includes(event.newValue) ? event.newValue : "system";
 		apply();
 	});
-	window.ofdgoTheme = {set, connect(value, onError) { host = value; report = onError; apply(); sync(); }};
+	window.ofdgoTheme = {set, connect(value, onError) {
+		host = value;
+		report = onError;
+		const select = document.querySelector("#titleBarMaterial");
+		const materials = (root.dataset.titlebarMaterials || "").split(",");
+		if (host && materials.length > 1) {
+			for (const option of [...select.options]) if (!materials.includes(option.value)) option.remove();
+			select.closest(".appearance-material").hidden = false;
+			select.addEventListener("change", () => { material = select.value; sync(); });
+		}
+		apply();
+		sync();
+	}};
 	apply();
+	committed = {mode, material};
 })();