replace the monochrome theme with the CYBER neon-cyan skin

The project shipped a black-and-white theme that was only half converted: the login page looked right, the message page was halfway, and the settings page had not been started. This finishes the move to the CYBER reference in prototype_reference/. Colors now come from a single token source (styles/variables.scss), where every semantic color is declared twice: once as OKLCH for the CSS, and once as an RGB triple so translucent variants can be built as rgba(var(--*-rgb), alpha). Cyan is the system itself, amber means the user has to intervene, green means the machine is working, and red only ever means something broke. The RGB triples are derived from the OKLCH values so the two declarations cannot drift apart. Pages adopt the .cy-* shell classes from the reference (view, panel, kpis, tabs, grid, table, field) instead of ad-hoc markup, which is what makes 19 of 26 views consistent. The remaining seven are deliberately bespoke: chat streams, the kanban board, the workflow canvas, the terminal, and the missing-agent screen. The chart palette and the kanban column colors move into single-source modules so they cannot drift either. A new guard test rejects raw hex colors, named colors, and literal RGB triples anywhere in the client source, with an explicit exemption list for the places that genuinely cannot read a CSS variable. The existing chat semantics spec keeps the chat chain honest. No behavior changes: no logic, no i18n keys, no data structures, and the /chat-run event contract is untouched.
2026-10-20 11:17:46 +08:00
parent a1fff482bf
commit 5e1003ceb7
121 changed files with 13340 additions and 3364 deletions
@@ -25,15 +25,24 @@ async function handleRetry() {
 <template>
  <div class="hermes-missing-view">
    <div class="hermes-missing-card">
-      <h1 class="hermes-missing-title">{{ t("hermesMissing.title") }}</h1>
-      <p class="hermes-missing-desc">{{ t("hermesMissing.intro") }}</p>
-      <code class="hermes-missing-code">{{ t("hermesMissing.installCmd") }}</code>
-      <p class="hermes-missing-desc">{{ t("hermesMissing.envIntro") }}</p>
-      <code class="hermes-missing-code">{{ t("hermesMissing.envCmd") }}</code>
-      <p class="hermes-missing-hint">{{ t("hermesMissing.restartHint") }}</p>
-      <button class="hermes-missing-btn" :disabled="rechecking" @click="handleRetry">
-        {{ rechecking ? "..." : t("hermesMissing.retry") }}
-      </button>
+      <header class="hermes-missing-hd">
+        <div class="hermes-missing-mark" aria-hidden="true">⚠</div>
+        <h1 class="hermes-missing-title">{{ t("hermesMissing.title") }}</h1>
+        <p class="hermes-missing-desc">{{ t("hermesMissing.intro") }}</p>
+      </header>
+
+      <div class="hermes-missing-bd">
+        <pre class="hermes-missing-term"><code>{{ t("hermesMissing.installCmd") }}</code></pre>
+
+        <p class="hermes-missing-desc">{{ t("hermesMissing.envIntro") }}</p>
+        <pre class="hermes-missing-term"><code>{{ t("hermesMissing.envCmd") }}</code></pre>
+
+        <p class="hermes-missing-hint">{{ t("hermesMissing.restartHint") }}</p>
+
+        <button class="hermes-missing-btn" :disabled="rechecking" @click="handleRetry">
+          {{ rechecking ? "..." : t("hermesMissing.retry") }}
+        </button>
+      </div>
    </div>
  </div>
 </template>
@@ -47,70 +56,115 @@ async function handleRetry() {
  align-items: center;
  justify-content: center;
  background: $bg-primary;
+  padding: 20px;
 }

 .hermes-missing-card {
-  width: 520px;
+  width: 560px;
  max-width: calc(100vw - 32px);
-  padding: 48px 56px;
  border: 1px solid $border-color;
  border-radius: $radius-lg;
  background: $bg-card;
-  text-align: center;
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+}

-  @media (max-width: $breakpoint-mobile) {
-    padding: 32px 24px;
-  }
+.hermes-missing-hd {
+  padding: 26px 26px 18px;
+  text-align: center;
+}
+
+// 缺失态用琥珀橙：需要人介入装 CLI，不是系统自己在动
+.hermes-missing-mark {
+  width: 46px;
+  height: 46px;
+  margin: 0 auto 14px;
+  border: 1px solid $warning;
+  border-radius: $radius-lg;
+  display: grid;
+  place-items: center;
+  color: $warning;
+  font-family: $font-code;
+  font-size: 20px;
+  line-height: 1;
+  box-shadow:
+    0 0 0 1px rgba(var(--warning-rgb), 0.2),
+    0 0 26px rgba(var(--warning-rgb), 0.16) inset;
 }

 .hermes-missing-title {
-  font-size: 24px;
+  margin: 0;
+  font-family: $font-code;
+  font-size: 16px;
  font-weight: 600;
+  line-height: 1.3;
  color: $text-primary;
-  margin: 0 0 16px;
 }

 .hermes-missing-desc {
-  font-size: 14px;
-  color: $text-muted;
-  margin: 0 0 10px;
+  margin: 9px 0 0;
+  font-size: 12.5px;
  line-height: 1.6;
+  color: $text-muted;
 }

-.hermes-missing-code {
-  display: block;
-  padding: 10px 12px;
-  margin: 0 0 16px;
+.hermes-missing-bd {
+  padding: 0 30px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .hermes-missing-desc {
+    margin: 0;
+  }
+}
+
+// 终端块：原型 .term —— 深底 + 等宽，命令直接照抄
+.hermes-missing-term {
+  margin: 0;
+  padding: 12px 14px;
  border: 1px solid $border-color;
  border-radius: $radius-sm;
-  background: $bg-input;
-  color: $text-primary;
+  background: $code-bg;
  font-family: $font-code;
-  font-size: 13px;
+  font-size: 12px;
+  line-height: 1.65;
+  color: $text-secondary;
+  white-space: pre-wrap;
  word-break: break-all;
-  text-align: left;
+  overflow: auto;
+
+  code {
+    font-family: inherit;
+    color: $accent-primary;
+  }
 }

 .hermes-missing-hint {
-  font-size: 13px;
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.6;
  color: $text-secondary;
-  margin: 0 0 24px;
 }

+// 主按钮：原型 .btn.pri
 .hermes-missing-btn {
  width: 100%;
-  padding: 14px;
-  border: none;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid $accent-primary;
  border-radius: $radius-sm;
-  background: $text-primary;
+  background: $accent-primary;
  color: var(--text-on-accent);
-  font-size: 15px;
-  font-weight: 500;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
  cursor: pointer;
-  transition: opacity $transition-fast;
+  transition: box-shadow $transition-fast, opacity $transition-fast;

-  &:hover {
-    opacity: 0.85;
+  &:hover:not(:disabled) {
+    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.4);
  }

  &:disabled {
@@ -118,4 +172,14 @@ async function handleRetry() {
    cursor: not-allowed;
  }
 }
+
+@media (max-width: $breakpoint-mobile) {
+  .hermes-missing-hd {
+    padding: 24px 22px 16px;
+  }
+
+  .hermes-missing-bd {
+    padding: 0 22px 22px;
+  }
+}
 </style>