feat(界面设计): 系统设置改为分类对话框

assets/webui/ofdgo.css

@@ -1111,11 +1111,6 @@ button:not(:disabled):hover {
 	overflow-wrap: anywhere;
 }
 
-.appearance-associations {
-	padding: 12px;
-	border-top: 1px solid var(--line);
-}
-
 .association-row {
 	display: grid;
 	grid-template-columns: 4em minmax(0, 1fr) auto;
@@ -1139,8 +1134,8 @@ button:not(:disabled):hover {
 
 #associationMessage {
 	margin-top: 12px;
-	white-space: nowrap;
-	overflow-x: auto;
+	white-space: normal;
+	overflow-wrap: anywhere;
 }
 
 .form-title {
@@ -4839,27 +4834,85 @@ audio.page-media {
 }
 
 .appearance-dialog {
-	inset: var(--appearance-top, 40px) min(var(--appearance-right, 12px), max(12px, calc(100vw - 297px))) auto auto;
-	margin: 0;
-	width: 285px;
-	max-width: calc(100vw - 24px);
-	max-height: calc(100dvh - var(--appearance-top, 40px) - 12px);
+	width: 680px;
+	height: 440px;
+	overflow: hidden;
+}
+
+.appearance-dialog > form {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	height: 100%;
 	padding: 0;
-	border-radius: var(--radius-dialog);
-	background: var(--popup);
-	box-shadow: var(--shadow-flyout);
 }
 
 .appearance-dialog::backdrop {
-	background: transparent;
+	top: 0;
 }
 
 .appearance-heading {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	font-weight: 600;
-	margin-bottom: 12px;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--line);
+}
+
+.appearance-body {
+	display: grid;
+	grid-template-columns: 140px minmax(0, 1fr);
+	min-height: 0;
+}
+
+.appearance-navigation {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 12px 8px;
+	overflow-y: auto;
+	border-right: 1px solid var(--line);
+	background: var(--panel);
+}
+
+.appearance-navigation button {
+	flex: none;
+	min-height: 32px;
+	padding: 6px 12px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-control);
+	background: transparent;
+	text-align: left;
+}
+
+.appearance-navigation button[data-selected="true"] {
+	background: var(--selected);
+	color: var(--accent-strong);
+}
+
+.appearance-content {
+	min-width: 0;
+	padding: 20px;
+	overflow-y: auto;
+}
+
+@media (max-width: 600px) {
+	.appearance-body {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: auto minmax(0, 1fr);
+	}
+	.appearance-navigation {
+		flex-direction: row;
+		flex-wrap: wrap;
+		padding: 8px 12px;
+		border-right: 0;
+		border-bottom: 1px solid var(--line);
+	}
+	.appearance-content {
+		padding: 16px;
+	}
+	.appearance-dialog .association-row {
+		gap: 8px;
+	}
 }
 
 .appearance-label {