diff --git a/packages/client/src/components/hermes/chat/ChatPanel.vue b/packages/client/src/components/hermes/chat/ChatPanel.vue index 5380ad1..af75cda 100644 --- a/packages/client/src/components/hermes/chat/ChatPanel.vue +++ b/packages/client/src/components/hermes/chat/ChatPanel.vue @@ -2011,7 +2011,7 @@ async function handleSessionModelCustomSubmit() { .page-sidebar-top { flex-shrink: 0; padding: 12px; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-light); } .page-sidebar-tabs { diff --git a/packages/client/src/components/layout/AppSidebar.vue b/packages/client/src/components/layout/AppSidebar.vue index dec85b4..a3e05f2 100644 --- a/packages/client/src/components/layout/AppSidebar.vue +++ b/packages/client/src/components/layout/AppSidebar.vue @@ -427,6 +427,17 @@ function handleUpdateClick() { padding: 8px 12px 20px; flex-shrink: 0; transition: width $transition-normal; + + // 顶部一层极淡的青色辉光,让侧栏不是一块死板的深色。 + &::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + background: radial-gradient(120% 60% at 50% 0%, + rgba(var(--accent-primary-rgb), 0.05), + transparent 62%); + } } .sidebar-nav { @@ -452,7 +463,7 @@ function handleUpdateClick() { &.nav-group-bottom { margin-top: auto; padding-top: 8px; - border-top: 1px solid $border-color; + border-top: 1px solid var(--border-light); } } @@ -462,13 +473,15 @@ function handleUpdateClick() { gap: 2px; } +// 分组标签用等宽小字 + 宽字距,是 CYBER 的坐标感来源。 .nav-group-label { + font-family: $font-code; font-size: 10px; font-weight: 600; - color: $text-muted; + color: var(--text-faint); text-transform: uppercase; - letter-spacing: 0.8px; - padding: 8px 12px 4px; + letter-spacing: 0.14em; + padding: 10px 12px 4px; display: flex; align-items: center; justify-content: space-between; @@ -478,7 +491,7 @@ function handleUpdateClick() { transition: color $transition-fast; &:hover { - color: $text-secondary; + color: $accent-primary; } .nav-group:first-child & { @@ -496,35 +509,56 @@ function handleUpdateClick() { } .nav-item { + position: relative; display: flex; align-items: center; - gap: 10px; - padding: 12px; - border: none; + gap: 9px; + padding: 7px 10px; + border: 1px solid transparent; background: none; appearance: none; text-decoration: none; - color: $text-secondary; - font-size: 14px; + color: $text-muted; + font-size: 13px; border-radius: $radius-sm; cursor: pointer; - transition: all $transition-fast; + transition: background-color $transition-fast, color $transition-fast, + border-color $transition-fast; width: 100%; text-align: left; + svg { + flex: 0 0 auto; + } + &:hover { - background-color: rgba(var(--accent-primary-rgb), 0.06); + background-color: $bg-card; color: $text-primary; } + // 选中态:淡青底 + 青色描边 + 左侧 2px 发光指示条。 &.active { - background-color: rgba(var(--accent-primary-rgb), 0.12); + background-color: rgba(var(--accent-primary-rgb), 0.11); + border-color: rgba(var(--accent-primary-rgb), 0.28); color: $accent-primary; + + &::before { + content: ''; + position: absolute; + left: -10px; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 16px; + border-radius: 2px; + background: $accent-primary; + box-shadow: 0 0 8px $accent-primary; + } } .beta-tag { font-size: 10px; - color: $text-muted; + color: var(--text-faint); margin-left: 2px; } } @@ -547,7 +581,7 @@ function handleUpdateClick() { .sidebar-footer { padding-top: 10px; - border-top: 1px solid $border-color; + border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 4px; @@ -621,8 +655,9 @@ function handleUpdateClick() { .version-info { padding: 2px 0 8px 12px; + font-family: $font-code; font-size: 11px; - color: $text-muted; + color: var(--text-faint); display: flex; align-items: center; justify-content: space-between; @@ -766,6 +801,12 @@ function handleUpdateClick() { padding: 10px 4px; gap: 0; + // 图标态的指示条要贴到 8px 内边距的边缘,不能沿用展开态的 -10px。 + &.active::before { + left: -6px; + height: 18px; + } + span { display: none; } diff --git a/packages/client/src/components/layout/PageSidebarNav.vue b/packages/client/src/components/layout/PageSidebarNav.vue index 5af4f96..0a865d3 100644 --- a/packages/client/src/components/layout/PageSidebarNav.vue +++ b/packages/client/src/components/layout/PageSidebarNav.vue @@ -193,13 +193,14 @@ function openWorkflow() { } .page-sidebar-tab { + position: relative; width: 100%; min-width: 0; height: 34px; - border: none; + border: 1px solid transparent; border-radius: $radius-sm; background: transparent; - color: $text-secondary; + color: $text-muted; display: inline-flex; flex-direction: row; align-items: center; @@ -209,7 +210,8 @@ function openWorkflow() { cursor: pointer; transition: background-color $transition-fast, - color $transition-fast; + color $transition-fast, + border-color $transition-fast; svg { flex-shrink: 0; @@ -224,11 +226,30 @@ function openWorkflow() { line-height: 18px; } - &:hover, - &.active { - background: rgba(var(--accent-primary-rgb), 0.06); + &:hover { + background: $bg-card; color: $text-primary; } + + // 选中态与 AppSidebar 保持一致:淡青底 + 描边 + 左侧发光条。 + &.active { + background: rgba(var(--accent-primary-rgb), 0.11); + border-color: rgba(var(--accent-primary-rgb), 0.28); + color: $accent-primary; + + &::before { + content: ''; + position: absolute; + left: -10px; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 16px; + border-radius: 2px; + background: $accent-primary; + box-shadow: 0 0 8px $accent-primary; + } + } } .conversation-switch { diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss index 1c4003f..9414088 100644 --- a/packages/client/src/styles/global.scss +++ b/packages/client/src/styles/global.scss @@ -580,6 +580,8 @@ a { } // Shared page header +// 页面顶栏:发丝线分隔 + 极淡的青色底,标题用等宽字体带字距。 +// 高度保持 64px(ui-baseline 契约,测试有断言)。 .page-header { display: flex; align-items: center; @@ -587,15 +589,20 @@ a { gap: 12px; min-height: 64px; padding: 14px 20px; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-light); flex-shrink: 0; + background: linear-gradient(180deg, + rgba(var(--accent-primary-rgb), 0.035), + transparent 70%); } .header-title { margin: 0; - font-size: 16px; + font-family: $font-code; + font-size: 15px; font-weight: 600; line-height: 1.4; + letter-spacing: 0.04em; color: $text-primary; }