feat(界面设计): 统一主题与材质选择样式

assets/webui/index.html

@@ -455,12 +455,18 @@
 					</nav>
 					<div class="appearance-content">
 						<section data-appearance-page="theme">
-							<div class="appearance-themes">
+							<div class="appearance-choices">
 								<button type="button" data-theme-choice="system"><span class="theme-system-icon"></span><span>系统</span></button>
 								<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>
+							<div class="appearance-material" hidden>
+								<div class="appearance-choices">
+									<button type="button" data-material-choice="solid"><span class="material-solid-icon"></span><span>纯色</span></button>
+									<button type="button" data-material-choice="acrylic"><span class="material-acrylic-icon"></span><span>亚克力</span></button>
+									<button type="button" data-material-choice="mica"><span class="material-mica-icon"></span><span>云母</span></button>
+								</div>
+							</div>
 						</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,7 +1685,6 @@ 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"],
@@ -3220,6 +3219,7 @@ button.outline-link:hover {
 	text-align: center;
 }
 
+.appearance-choices > [hidden],
 .empty-state[hidden],
 .editor-group > [hidden],
 .panel-row > [hidden],
@@ -4849,7 +4849,10 @@ audio.page-media {
 .settings-icon,
 .theme-system-icon,
 .theme-light-icon,
-.theme-dark-icon {
+.theme-dark-icon,
+.material-solid-icon,
+.material-mica-icon,
+.material-acrylic-icon {
 	display: inline-block;
 	width: 18px;
 	height: 18px;
@@ -4873,6 +4876,18 @@ audio.page-media {
 	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M20 15.5A9 9 0 0 1 8.5 4a9 9 0 1 0 11.5 11.5z'/%3E%3C/svg%3E");
 }
 
+.material-solid-icon {
+	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M6 6h12v12H6z' fill='black' fill-opacity='.25' stroke='none'/%3E%3C/svg%3E");
+}
+
+.material-mica-icon {
+	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 13c6-7 12 7 18-2M3 18c6-7 12 7 18-2'/%3E%3C/svg%3E");
+}
+
+.material-acrylic-icon {
+	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21H3V8'/%3E%3Crect x='7' y='3' width='14' height='14' rx='1'/%3E%3Cpath d='m10 11 5-5m-2 8 5-5'/%3E%3C/svg%3E");
+}
+
 .appearance-dialog {
 	width: 680px;
 	height: 440px;
@@ -4947,19 +4962,11 @@ audio.page-media {
 	}
 }
 
-.appearance-material:not([hidden]) {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	margin-top: 16px;
+.appearance-material {
+	margin-top: 20px;
 }
 
-.appearance-material select {
-	width: 120px;
-}
-
-.appearance-themes {
+.appearance-choices {
 	display: flex;
 	gap: 3px;
 	padding: 3px;
@@ -4967,7 +4974,7 @@ audio.page-media {
 	background: var(--base);
 }
 
-.appearance-themes button {
+.appearance-choices button {
 	display: flex;
 	flex: 1;
 	flex-direction: column;
@@ -4982,21 +4989,21 @@ audio.page-media {
 	font-size: 12px;
 }
 
-.appearance-themes button::after {
+.appearance-choices button::after {
 	content: "";
 	width: 15px;
 	height: 2px;
 	border-radius: 2px;
 }
 
-.appearance-themes [data-pressed="true"] {
+.appearance-choices [data-pressed="true"] {
 	background: var(--input);
 	color: var(--accent);
 	border-color: var(--line);
 	box-shadow: 0 1px 4px #0001;
 }
 
-.appearance-themes [data-pressed="true"]::after {
+.appearance-choices [data-pressed="true"]::after {
 	background: var(--accent);
 }
 

assets/webui/ofdgo_theme.js

@@ -3,7 +3,7 @@
 	const preference = matchMedia("(prefers-color-scheme: dark)");
 	const key = "ofdgo.theme";
 	let mode = root.dataset.themeMode || "system";
-	let material = root.dataset.titlebarChoice || "mica";
+	let material = root.dataset.titlebarChoice || "acrylic";
 	let host = null, report = null, pending = Promise.resolve(), revision = 0, committed = null;
 	if (!root.dataset.themeMode) {
 		try { mode = localStorage.getItem(key) || "system"; } catch {}
@@ -14,8 +14,7 @@
 		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;
+		for (const button of document.querySelectorAll("[data-material-choice]")) button.dataset.pressed = String(button.dataset.materialChoice === material);
 	}
 	function sync() {
 		if (!host) return;
@@ -58,12 +57,13 @@
 	window.ofdgoTheme = {set, flush, 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(); });
+			document.querySelector(".appearance-material").hidden = false;
+			for (const button of document.querySelectorAll("[data-material-choice]")) {
+				button.hidden = !materials.includes(button.dataset.materialChoice);
+				button.addEventListener("click", () => { material = button.dataset.materialChoice; apply(); sync(); });
+			}
 		}
 		apply();
 		sync();