give the pages the CYBER shell they were missing

The token swap made every control dark, but the pages themselves kept their Arco defaults — bare `padding: 20px` with components laid straight on the background. That is why the running app still read as "not the prototype" no matter how many variables were replaced: the prototype's page structure (panel / panel-h / panel-b / kv / tabs) was never built. Rather than restate that shell in each of the 25 views, it now lives in global.scss as .cy-view / .cy-panel / .cy-panel-h / .cy-panel-b / .cy-kv / .cy-tabs / .cy-tab / .cy-stack / .cy-sec-t, and the settings components share a global .settings-section + .section-title so all nine panes pick up the mono section headers at once. The per-component duplicates of those two rules were deleted. Settings is converted as the reference case: Arco's a-tabs/a-tab-pane became the underline tab strip, and the pane body sits in a panel. The URL-query sync moved to a watcher on activeTab so pane order and deep links still hold. Pane order is a contract, so it is asserted. Two tests lock the shell in place — one for the global classes and the cyan underline selected state, one for the settings structure and pane order. Without them the next edit easily slides back to bare Arco.
2026-10-19 15:23:01 +08:00
parent 3debe903f7
commit 993b6b968c
18 changed files with 346 additions and 95 deletions
@@ -392,10 +392,7 @@ onMounted(() => { loadLockedIps(); });
 }

 .section-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
-  margin: 0 0 16px;
+  margin: 0 0 12px;
 }

 .locked-list {
@@ -81,7 +81,4 @@ function debouncedSave(key: string, value: any) {
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
 </style>
@@ -99,8 +99,4 @@ function debouncedSave(key: string, value: any) {

 <style scoped lang="scss">
@use '@/styles/variables' as *;
-
-.settings-section {
-  margin-top: 16px;
-}
 </style>
@@ -128,10 +128,6 @@ async function testCompletionNotification() {
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
-
 .notify-controls {
  display: inline-flex;
  align-items: center;
@@ -137,20 +137,20 @@ function saveExclude(value: string[]) {
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
-
 .gateway-auto-start-settings {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
 }

 .section-title {
-  margin: 0 0 6px;
-  font-size: 15px;
+  margin: 0 0 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+  font-size: 12.5px;
  font-weight: 600;
-  color: var(--text-primary);
+  letter-spacing: 0.04em;
+  color: $text-primary;
 }

 .section-hint {
@@ -66,8 +66,4 @@ function debouncedSave(key: string, value: any) {

 <style scoped lang="scss">
@use '@/styles/variables' as *;
-
-.settings-section {
-  margin-top: 16px;
-}
 </style>
@@ -126,10 +126,6 @@ async function handleSaveCustom(providerKey: string) {
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
-
 .empty-hint {
  padding: 40px 0;
 }
@@ -500,10 +500,6 @@ watch(
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
-
 .weixin-qr-section {
  margin-top: 12px;
  margin-bottom: 12px;
@@ -29,7 +29,4 @@ async function save(values: Record<string, any>) {
 <style scoped lang="scss">
@use '@/styles/variables' as *;

-.settings-section {
-  margin-top: 16px;
-}
 </style>
@@ -75,14 +75,21 @@ async function save() {
 }

 .section-title {
-  margin: 0 0 6px;
-  font-size: 18px;
+  margin: 0 0 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid $border-light;
+  font-family: $font-code;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $text-primary;
 }

 .section-hint {
-  margin: 0 0 16px;
+  margin: 0 0 14px;
  color: $text-muted;
-  font-size: 13px;
+  font-size: 12.5px;
+  line-height: 1.6;
 }

 .input-lg {
@@ -145,7 +145,4 @@ async function toggleWriteApproval(section: "memory" | "skills", value: boolean)
 <style scoped lang="scss">
@use "@/styles/variables" as *;

-.settings-section {
-  margin-top: 16px;
-}
 </style>
@@ -20,37 +20,53 @@ defineProps<{
 <style scoped lang="scss">
@use '@/styles/variables' as *;

+// CYBER 的键值行：等宽键名 + 发丝线分隔，整行 hover 微微抬起。
+// 不是原型 .kv 的两列网格——设置项的 hint 文本较长，左列会被挤坏，
+// 所以保留「标签在上、控件在右」的结构，只换成 CYBER 的排版与线条。
 .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 10px 0;
+  gap: 16px;
+  padding: 11px 12px;
  border-bottom: 1px solid $border-light;
+  transition: background-color $transition-fast;

  &:last-child {
    border-bottom: none;
  }
+
+  &:hover {
+    background-color: rgba(var(--accent-primary-rgb), 0.035);
+  }
 }

 .setting-info {
  flex: 1;
-  margin-right: 16px;
+  min-width: 0;
 }

 .setting-label {
-  font-size: 13px;
+  font-family: $font-code;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
  color: $text-primary;
  display: block;
 }

 .setting-hint {
  font-size: 12px;
+  line-height: 1.5;
  color: $text-muted;
-  margin-top: 2px;
+  margin-top: 3px;
 }

 .setting-control {
  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }

@media (max-width: $breakpoint-mobile) {
@@ -60,10 +76,6 @@ defineProps<{
    gap: 8px;
  }

-  .setting-info {
-    margin-right: 0;
-  }
-
  .setting-control {
    width: 100%;
  }
@@ -309,9 +309,11 @@ onMounted(loadUsers)
 }

 .section-title {
-  margin: 0 0 6px;
-  font-size: 16px;
+  margin: 0 0 10px;
+  font-family: $font-code;
+  font-size: 12.5px;
  font-weight: 600;
+  letter-spacing: 0.04em;
  color: $text-primary;
 }