fix(web): 限定非 Workbench 控制台视觉规则

web/hwlab-cloud-web/src/styles/console-r2.css

@@ -15,14 +15,6 @@
   --console-topbar-height: 46px;
 }
 
-body {
-  background:
-    linear-gradient(rgb(17 25 28 / 3%) 1px, transparent 1px),
-    linear-gradient(90deg, rgb(17 25 28 / 3%) 1px, transparent 1px),
-    var(--console-canvas);
-  background-size: 24px 24px;
-}
-
 .platform-shell {
   grid-template-columns: var(--console-sidebar-width) minmax(0, 1fr);
   background: transparent;
@@ -191,6 +183,11 @@ body {
 }
 
 .platform-content {
+  background:
+    linear-gradient(rgb(17 25 28 / 3%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(17 25 28 / 3%) 1px, transparent 1px),
+    var(--console-canvas);
+  background-size: 24px 24px;
   padding: 14px clamp(12px, 1.5vw, 24px) 24px;
   scrollbar-gutter: stable;
 }
@@ -200,7 +197,7 @@ body {
   gap: 12px;
 }
 
-.page-command-bar {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar {
   position: relative;
   min-height: 76px;
   align-items: center;
@@ -213,7 +210,7 @@ body {
   box-shadow: var(--console-shadow-sm);
 }
 
-.page-command-bar::before {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar::before {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -224,41 +221,41 @@ body {
   content: "";
 }
 
-.page-command-bar[data-sticky="true"] {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar[data-sticky="true"] {
   top: 8px;
   border-bottom: 1px solid var(--console-border);
   background: rgb(251 252 248 / 96%);
 }
 
-.page-command-copy {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-copy {
   gap: 2px;
 }
 
-.page-command-eyebrow {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-eyebrow {
   color: var(--console-cyan-700);
   font-size: 9px;
   letter-spacing: 0;
 }
 
-.page-command-title {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-title {
   font-size: 24px;
   font-weight: 720;
   letter-spacing: 0;
 }
 
-.page-command-description {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-description {
   color: var(--console-graphite-600);
   font-size: 12px;
 }
 
-.console-status-strip {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-strip {
   gap: 0;
   border-radius: 5px;
   background: var(--console-surface-raised);
   box-shadow: var(--console-shadow-sm);
 }
 
-.console-status-item {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item {
   position: relative;
   min-width: 132px;
   min-height: 46px;
@@ -267,11 +264,11 @@ body {
   padding: 7px 10px 7px 15px;
 }
 
-.console-status-item:last-child {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item:last-child {
   border-right: 0;
 }
 
-.console-status-item::before {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item::before {
   position: absolute;
   top: 10px;
   bottom: 10px;
@@ -281,63 +278,63 @@ body {
   border-radius: 0;
 }
 
-.console-status-item dt {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item dt {
   font-size: 9px;
 }
 
-.console-status-item dd {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item dd {
   font-family: var(--console-font-mono);
   font-size: 12px;
 }
 
-.data-panel,
-.table-page-layout,
-.console-section-frame,
-.operations-workspace,
-.bounded-workspace,
-.entity-index,
-.operations-inspector-panel,
-.metric-card,
-.empty-state {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-panel,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-layout,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-section-frame,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-workspace,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .bounded-workspace,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-index,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-panel,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .metric-card,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .empty-state {
   border-color: var(--console-border);
   border-radius: 6px;
   background: var(--console-surface-raised);
   box-shadow: var(--console-shadow-sm);
 }
 
-.data-panel,
-.table-page-layout,
-.admin-crud-panel {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-panel,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-layout,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .admin-crud-panel {
   padding: 12px;
 }
 
-.panel-header,
-.table-page-header,
-.operations-inspector-header,
-.entity-index-toolbar {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .panel-header,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-header,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-header,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-index-toolbar {
   border-bottom-color: var(--console-border);
 }
 
-.panel-header h2,
-.table-page-header h2,
-.operations-inspector-header h2 {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .panel-header h2,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-header h2,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-header h2 {
   color: var(--console-graphite-900);
   font-size: 13px;
   font-weight: 760;
 }
 
-.segmented-control,
-.view-mode-switch,
-.console-tabs {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .segmented-control,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .view-mode-switch,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-tabs {
   border-radius: 4px;
 }
 
-.btn,
-.icon-button,
-.table-action,
-.segmented-control button,
-.view-mode-switch button,
-.console-tabs button {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .btn,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .icon-button,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .segmented-control button,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .view-mode-switch button,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-tabs button {
   border: 1px solid var(--console-border-strong);
   border-radius: 4px;
   background: var(--console-surface-raised);
@@ -347,55 +344,59 @@ body {
   letter-spacing: 0;
 }
 
-.btn-primary,
-.table-action.primary {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .btn-primary,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action.primary {
   border-color: #006b70;
   background: #007b80;
   color: #fff;
 }
 
-.btn-primary:hover,
-.table-action.primary:hover:not(:disabled) {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .btn-primary:hover,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action.primary:hover:not(:disabled) {
   background: #00666b;
 }
 
-.input,
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
+:where(.route-stack, .hwpod-console, .mdtodo-page) :is(
+  .input,
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea
+) {
   border-color: var(--console-border-strong);
   border-radius: 4px;
   background: #fff;
 }
 
-.input:focus,
-input:focus,
-select:focus,
-textarea:focus,
-button:focus-visible,
-[tabindex]:focus-visible {
+:where(.route-stack, .hwpod-console, .mdtodo-page) :is(
+  .input:focus,
+  input:focus,
+  select:focus,
+  textarea:focus,
+  button:focus-visible,
+  [tabindex]:focus-visible
+) {
   outline: 2px solid color-mix(in srgb, var(--console-focus) 55%, transparent);
   outline-offset: 2px;
 }
 
-.console-data-grid-wrap,
-.data-table-wrap {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid-wrap,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table-wrap {
   border-color: var(--console-border);
   border-radius: 4px;
 }
 
-.console-data-grid,
-.data-table {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table {
   font-size: 11px;
 }
 
-.console-data-grid thead,
-.data-table thead {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid thead,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table thead {
   background: #e5eae7;
 }
 
-.console-data-grid th,
-.data-table th {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid th,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table th {
   color: var(--console-graphite-700);
   font-family: var(--console-font-mono);
   font-size: 9px;
@@ -404,35 +405,35 @@ button:focus-visible,
   text-transform: uppercase;
 }
 
-.console-data-grid td,
-.console-data-grid th,
-.data-table td,
-.data-table th {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid td,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid th,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table td,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table th {
   border-color: #d5dcda;
 }
 
-.console-data-grid tbody tr:nth-child(even),
-.data-table tbody tr:nth-child(even) {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid tbody tr:nth-child(even),
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table tbody tr:nth-child(even) {
   background: #f5f7f4;
 }
 
-.console-data-grid tbody tr:hover,
-.data-table tbody tr:hover {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid tbody tr:hover,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table tbody tr:hover {
   background: var(--console-cyan-100);
 }
 
-.resource-collection-items[data-view="cards"] {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-items[data-view="cards"] {
   grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
 }
 
-.entity-card-heading {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-heading {
   display: flex;
   min-width: 0;
   align-items: flex-start;
   gap: 9px;
 }
 
-.entity-card-icon {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-icon {
   display: inline-grid;
   width: 32px;
   height: 32px;
@@ -444,7 +445,7 @@ button:focus-visible,
   color: #146866;
 }
 
-.entity-card-meta {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-meta {
   display: flex;
   min-width: 0;
   flex-wrap: wrap;
@@ -454,52 +455,52 @@ button:focus-visible,
   font-size: 9px;
 }
 
-.industrial-fact-row {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 7px;
   margin: 0;
 }
 
-.industrial-fact-row div {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row div {
   min-width: 0;
   border-top: 1px solid #dce3e1;
   padding-top: 7px;
 }
 
-.industrial-fact-row dt {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row dt {
   color: var(--console-graphite-600);
   font-family: var(--console-font-mono);
   font-size: 9px;
   text-transform: uppercase;
 }
 
-.industrial-fact-row dd {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row dd {
   overflow: hidden;
   margin: 3px 0 0;
   text-overflow: ellipsis;
 }
 
-.industrial-card-link {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-card-link {
   display: block;
   height: 100%;
   color: inherit;
   text-decoration: none;
 }
 
-.resource-collection-virtual {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-virtual {
   border: 1px solid var(--console-border);
   border-radius: 4px;
   background: var(--console-surface-raised);
 }
 
-.resource-collection-item--virtual {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-item--virtual {
   height: 100%;
   border-bottom: 1px solid #d8dfdd;
   padding: 4px;
 }
 
-.resource-collection-item--virtual .entity-card {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-item--virtual .entity-card {
   height: 100%;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
@@ -509,9 +510,9 @@ button:focus-visible,
   padding: 6px 9px;
 }
 
-.entity-card,
-.pcb-card,
-.node-card {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-card,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .node-card {
   border-color: var(--console-border);
   border-radius: 5px;
   background:
@@ -520,13 +521,13 @@ button:focus-visible,
   box-shadow: var(--console-shadow-sm);
 }
 
-.entity-card[data-interactive="true"]:hover {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card[data-interactive="true"]:hover {
   border-color: var(--console-cyan-600);
   box-shadow: 0 8px 22px rgb(11 31 33 / 11%);
   transform: translateY(-1px);
 }
 
-.empty-state-mark {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .empty-state-mark {
   display: inline-grid;
   width: 36px;
   height: 36px;
@@ -538,48 +539,40 @@ button:focus-visible,
   font-size: 0;
 }
 
-.status-pill,
-.status-badge,
-.pm-status,
-.task-state,
-.stage-status {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .status-pill,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .status-badge,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .pm-status,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .task-state,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .stage-status {
   border-radius: 3px;
   font-family: var(--console-font-mono);
   font-size: 9px;
   letter-spacing: 0;
 }
 
-.mini-log,
-.json-panel,
-.content-viewer pre,
-.source-output,
-.report-markdown {
-  border-color: #334649;
+:where(.route-stack, .hwpod-console, .mdtodo-page) :is(
+  .mini-log,
+  .json-panel,
+  .content-viewer pre,
+  .source-output,
+  .report-markdown
+) {
+  min-width: 0;
+  max-width: 100%;
+  overflow: auto;
+  border-color: #c4cfcc;
   border-radius: 4px;
-  background: #111b1e;
-  color: #d9e7e4;
+  background: #f7f9f8;
+  color: #243532;
   font-family: var(--console-font-mono);
 }
 
-.hwpod-workspace {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .hwpod-workspace {
   min-height: min(72vh, 760px);
 }
 
-.pcb-card::after {
-  position: absolute;
-  right: -30px;
-  bottom: -34px;
-  width: 130px;
-  height: 100px;
-  border: 1px solid rgb(0 131 138 / 18%);
-  border-radius: 50%;
-  box-shadow: 0 0 0 16px rgb(0 131 138 / 4%), 0 0 0 32px rgb(0 131 138 / 3%);
-  content: "";
-  pointer-events: none;
-}
-
-.pcb-trace,
-.pcb-grid-line {
+:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-trace,
+:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-grid-line {
   color: var(--console-cyan-600);
 }
 
@@ -592,15 +585,15 @@ button:focus-visible,
     padding: 10px;
   }
 
-  .page-command-bar {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .page-command-actions {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions {
     justify-content: flex-start;
   }
 
-  .overview-grid {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .overview-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -624,34 +617,34 @@ button:focus-visible,
     padding: 8px;
   }
 
-  .page-command-bar {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar {
     min-height: 0;
     padding: 10px 10px 10px 15px;
   }
 
-  .page-command-title {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-title {
     font-size: 19px;
   }
 
-  .page-command-description {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-description {
     font-size: 11px;
   }
 
-  .console-status-item {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item {
     min-width: 118px;
   }
 
-  .overview-grid,
-  .field-grid,
-  .form-grid {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .overview-grid,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .field-grid,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .form-grid {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .resource-collection-items[data-view="cards"] {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-items[data-view="cards"] {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .hwpod-workspace {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .hwpod-workspace {
     min-height: 0;
   }
 }
@@ -666,32 +659,32 @@ button:focus-visible,
     padding: 0 8px;
   }
 
-  .page-command-actions,
-  .page-command-filters,
-  .table-page-actions,
-  .table-actions-inline {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-filters,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-actions,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .table-actions-inline {
     align-items: stretch;
   }
 
-  .page-command-actions > *,
-  .page-command-filters > * {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions > *,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-filters > * {
     max-width: 100%;
   }
 
-  .console-status-strip {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-strip {
     scroll-snap-type: x proximity;
   }
 
-  .console-status-item {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item {
     flex-basis: 136px;
     scroll-snap-align: start;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .entity-card,
-  .pcb-card,
-  .node-card {
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-card,
+  :where(.route-stack, .hwpod-console, .mdtodo-page) .node-card {
     transform: none !important;
   }
 }