feat(后端架构): 完善后端解耦

assets/webui/ofdgo.css

@@ -620,7 +620,12 @@ button:not(:disabled):hover {
 }
 
 .dpi-select {
-	width: 54px;
+	width: 79px;
+}
+
+.tool-label {
+	color: var(--text-muted);
+	white-space: nowrap;
 }
 
 .form-dialog {
@@ -985,6 +990,8 @@ body[data-hide-meta] .meta-panel {
 }
 
 .render-panel {
+	--render-controls-width: 166px;
+	--render-modes-width: 79px;
 	position: relative;
 	margin-bottom: 12px;
 	padding-bottom: 12px;
@@ -992,8 +999,7 @@ body[data-hide-meta] .meta-panel {
 }
 
 .render-panel select {
-	width: 180px;
-	max-width: calc(100% - 76px);
+	width: 100%;
 	height: 28px;
 	font-size: 12px;
 }
@@ -1012,10 +1018,10 @@ body[data-hide-meta] .meta-panel {
 }
 
 .render-controls {
-	display: flex;
+	display: grid;
+	grid-template-columns: var(--render-modes-width) minmax(0, 1fr);
 	align-items: center;
-	width: 180px;
-	max-width: calc(100% - 76px);
+	width: var(--render-controls-width);
 	gap: 8px;
 }
 
@@ -1025,7 +1031,7 @@ body[data-hide-meta] .meta-panel {
 }
 
 .render-modes .small-button {
-	width: 36px;
+	width: 40px;
 	height: 28px;
 	padding: 0;
 }
@@ -1041,13 +1047,6 @@ body[data-hide-meta] .meta-panel {
 	color: var(--accent-strong);
 }
 
-.render-controls select {
-	flex: 1;
-	width: 0;
-	min-width: 0;
-	max-width: 100%;
-}
-
 .render-support {
 	font-size: 12px;
 	color: var(--text-muted);
@@ -1056,8 +1055,9 @@ body[data-hide-meta] .meta-panel {
 .render-support summary {
 	position: absolute;
 	top: 0;
-	left: 32px;
-	width: fit-content;
+	right: 0;
+	width: calc(var(--render-controls-width) - var(--render-modes-width) - 8px);
+	text-align: center;
 	line-height: 28px;
 	cursor: pointer;
 	color: var(--accent-strong);
@@ -2579,6 +2579,6 @@ button.outline-link:hover {
 	}
 
 	.dpi-select {
-		width: 48px;
+		width: 79px;
 	}
 }