优化后端和前端逻辑

apps/web-console/self-extension.css

@@ -1,11 +1,11 @@
 /* Self-extension workspace ------------------------------------------------- */
 
-[data-extension-type="light"] { --extension-card-color: #eab858; }
-[data-extension-type="sound"] { --extension-card-color: #658bd5; }
-[data-extension-type="action"] { --extension-card-color: #db7468; }
-[data-extension-type="doll"] { --extension-card-color: #cb86a4; }
-[data-extension-type="mechanical"] { --extension-card-color: #758e94; }
-[data-extension-type="other"] { --extension-card-color: #579a88; }
+[data-extension-type="light"] { --extension-card-color: var(--chart-1); }
+[data-extension-type="sound"] { --extension-card-color: var(--chart-2); }
+[data-extension-type="action"] { --extension-card-color: var(--destructive); }
+[data-extension-type="doll"] { --extension-card-color: var(--chart-3); }
+[data-extension-type="mechanical"] { --extension-card-color: var(--chart-4); }
+[data-extension-type="other"] { --extension-card-color: var(--chart-5); }
 
 .console-v2 .v2-extension-sidebar,
 .console-v2 .v2-extension-footer,
@@ -62,7 +62,7 @@
   z-index: 24;
   display: block;
   transform: translate3d(var(--pet-x), var(--pet-y), 0);
-  filter: drop-shadow(0 12px 14px rgba(9, 66, 63, 0.18));
+  filter: drop-shadow(0 12px 14px color-mix(in oklch, var(--primary) 18%, transparent));
   touch-action: none;
   user-select: none;
 }
@@ -75,11 +75,11 @@
   max-width: calc(100vw - 24px);
   box-sizing: border-box;
   padding: 10px 12px;
-  color: #285153;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(14, 119, 115, 0.18);
+  color: var(--popover-foreground);
+  background: color-mix(in oklch, var(--popover) 94%, transparent);
+  border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
   border-radius: 11px 11px 2px 11px;
-  box-shadow: 0 9px 24px rgba(22, 72, 70, 0.12);
+  box-shadow: 0 9px 24px oklch(0.145 0.008 326 / 12%);
   font-size: 13px;
   font-weight: 800;
   line-height: 1.5;
@@ -3543,3 +3543,353 @@ form > .v2-extension-primary {
     display: none;
   }
 }
+
+/* Final semantic theme layer for extension surfaces and nested dialogs --- */
+.console-v2 #v2ExtensionPanel .v2-extension-sync-mount,
+.console-v2 #v2ExtensionPanel .v2-extension-gateway,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline,
+.console-v2 #v2ExtensionPanel .v2-extension-empty {
+  color: var(--card-foreground);
+  background: color-mix(in oklch, var(--card) 86%, transparent);
+  border-color: var(--border);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-sync-mount {
+  background:
+    radial-gradient(circle at 84% 8%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 18rem),
+    var(--card);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-sync-heading h3,
+.console-v2 #v2ExtensionPanel .v2-extension-gateway strong,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device header strong,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline strong,
+.console-v2 #v2ExtensionPanel .v2-extension-empty strong,
+.console-v2 #v2ExtensionPanel .v2-extension-linkage strong {
+  color: var(--foreground);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-sync-heading small,
+.console-v2 #v2ExtensionPanel .v2-extension-gateway small,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device header small,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device header b,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline p,
+.console-v2 #v2ExtensionPanel .v2-extension-empty,
+.console-v2 #v2ExtensionPanel .v2-extension-linkage small {
+  color: var(--muted-foreground);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-gateway > span,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device header > span,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline-icon {
+  color: var(--primary);
+  background: var(--accent);
+  border-color: color-mix(in oklch, var(--primary) 18%, var(--border));
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-gateway > b,
+.console-v2 #v2ExtensionPanel .v2-extension-synced-device > div span,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline small,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline > div > div i,
+.console-v2 #v2ExtensionPanel .v2-extension-linkage > span,
+.console-v2 #v2ExtensionPanel .v2-extension-linkage > svg {
+  color: var(--primary);
+  background: var(--accent);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-linkage {
+  border-top-color: var(--border);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-nfc-launch,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline > button {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-nfc-launch:hover,
+.console-v2 #v2ExtensionPanel .v2-nfc-inline > button:hover {
+  color: var(--primary-foreground);
+  background: color-mix(in oklch, var(--primary) 86%, var(--foreground));
+  border-color: var(--primary);
+}
+
+.v2-extension-dialog,
+.v2-nfc-dialog {
+  color: var(--popover-foreground);
+  background: var(--popover);
+  border: 1px solid var(--border);
+  box-shadow: 0 30px 90px color-mix(in oklch, var(--foreground) 24%, transparent);
+}
+
+.v2-extension-dialog::backdrop {
+  background: color-mix(in oklch, var(--foreground) 50%, transparent);
+}
+
+.v2-extension-dialog > header,
+.v2-extension-dialog form > header,
+.v2-nfc-dialog > header {
+  color: var(--foreground);
+  background: color-mix(in oklch, var(--popover) 94%, transparent);
+  border-bottom-color: var(--border);
+}
+
+.v2-extension-dialog header p,
+.v2-extension-dialog form > label,
+.v2-extension-reset-dialog > label,
+.v2-extension-type-chooser small,
+.v2-extension-preset-preview > span,
+.v2-extension-learn-steps,
+.v2-extension-learn-fields label,
+.v2-extension-learning-page p,
+.v2-extension-test-page p,
+.v2-gscu-status small,
+.v2-gscu-status > b,
+.v2-gscu-config-form > label,
+.v2-gscu-actions label,
+.v2-gscu-config-form label small,
+.v2-gscu-actions > header small,
+.v2-gscu-command-catalog > header small,
+#extensionGscuNamedCommands article > header span,
+#extensionGscuNamedCommands article label span,
+.v2-nfc-waiting p,
+.v2-nfc-detected-heading p,
+.v2-nfc-recognized-heading p,
+.v2-nfc-create-grid label > span,
+.v2-nfc-existing > span,
+.v2-nfc-capability-primary small,
+.v2-nfc-recognized-actions > span,
+.v2-nfc-footnote {
+  color: var(--muted-foreground);
+}
+
+.v2-extension-dialog header > button,
+.v2-extension-dialog input,
+.v2-extension-dialog select,
+.v2-extension-dialog textarea,
+.v2-extension-type-chooser > button,
+.v2-extension-dialog-actions button,
+.v2-gscu-action-grid button,
+.v2-gscu-advanced button,
+#extensionGscuNamedCommands button,
+#extensionGscuNamedCommands input,
+.v2-nfc-create-grid input,
+.v2-nfc-create-grid select,
+.v2-nfc-existing select {
+  color: var(--foreground);
+  background: var(--background);
+  border-color: var(--input);
+}
+
+.v2-extension-dialog header > button:hover,
+.v2-extension-dialog header > button:focus-visible,
+.v2-gscu-action-grid button:hover,
+.v2-gscu-advanced button:hover,
+#extensionGscuNamedCommands button:hover {
+  color: var(--accent-foreground);
+  background: var(--accent);
+  border-color: var(--ring);
+}
+
+.v2-extension-dialog input:focus,
+.v2-extension-dialog select:focus,
+.v2-extension-dialog textarea:focus,
+#extensionGscuNamedCommands input:focus,
+.v2-nfc-create-grid input:focus,
+.v2-nfc-create-grid select:focus,
+.v2-nfc-existing select:focus {
+  border-color: var(--ring);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 20%, transparent);
+}
+
+.v2-extension-primary,
+.v2-extension-dialog-actions .v2-extension-primary,
+.v2-nfc-primary-actions button,
+.v2-nfc-recognized-actions button:not(.v2-extension-danger) {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.v2-extension-danger,
+.v2-gscu-advanced button.danger,
+#extensionGscuNamedCommands button.danger {
+  color: var(--primary-foreground);
+  background: var(--destructive);
+  border-color: var(--destructive);
+}
+
+.v2-extension-type-chooser > button.active {
+  color: var(--primary);
+  background: color-mix(in oklch, var(--primary) 9%, var(--card));
+  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent);
+}
+
+.v2-extension-type-chooser > button > span,
+.v2-extension-learn-target > span,
+.v2-extension-learn-animation,
+.v2-extension-preset-preview i,
+.v2-extension-learn-steps b,
+.v2-nfc-reader-visual,
+.v2-nfc-detected-heading > span,
+.v2-nfc-recognized-heading > span {
+  color: var(--primary);
+  background: var(--accent);
+  border-color: color-mix(in oklch, var(--primary) 20%, var(--border));
+}
+
+.v2-extension-preset-preview,
+.v2-extension-learn-target,
+.v2-gscu-status,
+.v2-gscu-actions,
+.v2-gscu-device-group,
+.v2-gscu-device-command-grid > article,
+.v2-gscu-result,
+#extensionGscuNamedCommands > p,
+.v2-nfc-stage,
+.v2-nfc-detected-heading,
+.v2-nfc-recognized-heading,
+.v2-nfc-capability-card {
+  color: var(--card-foreground);
+  background: var(--card);
+  border-color: var(--border);
+}
+
+.v2-extension-learn-steps > i,
+.v2-gscu-advanced,
+.v2-gscu-command-catalog,
+.v2-gscu-result[open] summary,
+.v2-nfc-relearn {
+  border-color: var(--border);
+}
+
+.v2-extension-learn-steps span.active,
+.v2-extension-learn-target small,
+.v2-extension-learning-page > strong,
+.v2-gscu-status[data-state="online"] > svg,
+.v2-gscu-status[data-state="online"] > b,
+.v2-gscu-status[data-state="listening"] > svg,
+.v2-gscu-status[data-state="listening"] > b,
+.v2-gscu-device-group > header small,
+.v2-gscu-device-group > header > b,
+#extensionGscuNamedCommands b,
+.v2-nfc-waiting small,
+.v2-nfc-detected-heading small,
+.v2-nfc-recognized-heading small,
+.v2-nfc-capability-heading small,
+.v2-nfc-capability-primary svg,
+.v2-nfc-footnote svg {
+  color: var(--primary);
+}
+
+.v2-extension-learn-steps span.active b,
+.v2-extension-learn-animation > span,
+.v2-extension-test-page > span {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  box-shadow: 0 0 0 12px color-mix(in oklch, var(--primary) 10%, transparent);
+}
+
+.v2-gscu-status[data-state="online"] {
+  background: color-mix(in oklch, var(--primary) 8%, var(--card));
+  border-color: color-mix(in oklch, var(--primary) 24%, var(--border));
+}
+
+.v2-gscu-status[data-state="listening"] {
+  background: color-mix(in oklch, var(--chart-2) 8%, var(--card));
+  border-color: color-mix(in oklch, var(--chart-2) 24%, var(--border));
+}
+
+.v2-gscu-device-group > header strong,
+.v2-gscu-device-group > header span,
+.v2-gscu-result summary,
+.v2-nfc-waiting strong,
+.v2-nfc-detected-heading strong,
+.v2-nfc-recognized-heading strong,
+.v2-nfc-capability-primary span {
+  color: var(--foreground);
+}
+
+#extensionGscuTcpResult {
+  color: var(--primary-foreground);
+  background: color-mix(in oklch, var(--foreground) 90%, var(--background));
+}
+
+.v2-nfc-stage > header {
+  color: var(--primary-foreground);
+  background: var(--primary);
+}
+
+.v2-nfc-stage > header > span,
+.v2-nfc-stage > header small,
+.v2-nfc-stage > header h3,
+.v2-nfc-stage > header p,
+.v2-nfc-stage > header > b,
+.v2-nfc-stage > header > b[data-state="online"] {
+  color: var(--primary-foreground);
+}
+
+.v2-nfc-stage > header > span,
+.v2-nfc-stage > header > b,
+.v2-nfc-stage > header > b[data-state="online"] {
+  background: color-mix(in oklch, var(--primary-foreground) 12%, transparent);
+  border-color: color-mix(in oklch, var(--primary-foreground) 20%, transparent);
+}
+
+.v2-nfc-inline[data-state="recognized"],
+.v2-nfc-capability-card.learned {
+  background: color-mix(in oklch, var(--chart-1) 12%, var(--card));
+  border-color: color-mix(in oklch, var(--chart-3) 26%, var(--border));
+}
+
+.v2-nfc-inline[data-state="new-card"],
+.v2-nfc-capability-card.pending {
+  background: color-mix(in oklch, var(--chart-2) 10%, var(--card));
+  border-color: color-mix(in oklch, var(--chart-2) 24%, var(--border));
+}
+
+.v2-nfc-relearn {
+  color: var(--primary);
+  background: var(--accent);
+}
+
+.v2-nfc-relearn:hover {
+  color: var(--primary-foreground);
+  background: var(--primary);
+}
+
+.v2-extension-toast {
+  color: var(--popover-foreground);
+  background: var(--popover);
+  border: 1px solid var(--border);
+  box-shadow: 0 14px 36px color-mix(in oklch, var(--foreground) 18%, transparent);
+}
+
+.v2-extension-toast.success {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.v2-extension-toast.error {
+  color: var(--primary-foreground);
+  background: var(--destructive);
+  border-color: var(--destructive);
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-gateway > button {
+  color: var(--primary);
+  background: var(--accent);
+  border-color: color-mix(in oklch, var(--primary) 22%, var(--border));
+}
+
+.console-v2 #v2ExtensionPanel .v2-extension-gateway > button:hover,
+.console-v2 #v2ExtensionPanel .v2-extension-gateway > button:focus-visible {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
+}