style(theme): 明亮/经典主题视觉层次修正

- light 主题:摘要行降为三级文字色与正文拉开层级(含 running 动画变体)
- light 主题:代码块头部浅灰、代码区与对话底同色;表格白体+浅灰表头+可见边框
- light 主题:输入栏壳体改浅灰浮起,发送按钮柔化为 78% 黑、hover 加深
- classic 主题:git 状态栏及子菜单背景与输入栏壳体对齐为纯白
- 顺带修正:思考模式 slash 菜单描述去掉已下线的 deep
This commit is contained in:
JOJO 2026-08-23 17:13:16 +08:00
parent 9d3784bd90
commit c6c8bf2d0c
4 changed files with 80 additions and 3 deletions

View File

@ -1257,6 +1257,29 @@ onBeforeUnmount(() => {
}
}
/* ===== 明亮主题摘要行降为三级文字色与正文text-primary拉开层级 ===== */
/* hover 反馈不做特化:与经典/深色保持一致(基础 hover 底色在三主题下均等于底色,均无可见反馈) */
body[data-theme='light'] .summary-content-wrapper,
body[data-theme='light'] .summary-tool-reel-item {
color: var(--text-tertiary);
}
body[data-theme='light'] .summary-line-text.running .summary-char {
color: var(--text-tertiary);
animation-name: summaryPassLight;
}
@keyframes summaryPassLight {
0%,
100% {
color: var(--text-tertiary);
}
50% {
color: var(--accent);
}
}
/* 步骤容器 */
.steps-container {
display: grid;

View File

@ -1597,7 +1597,7 @@ const rootSlashMenuItems = computed<SlashMenuItem[]>(() => {
{
id: 'run-mode',
label: '思考模式',
description: '切换 fast / thinking / deep',
description: '切换 fast / thinking',
disabled: !props.isConnected || props.streamingMessage,
mode: 'run-mode'
},
@ -3841,6 +3841,15 @@ onBeforeUnmount(() => {
box-shadow: 0 1px 2px var(--shadow-color);
}
/* git --surface-raised
基础 --theme-surface-soft 在经典为米色 #f5f0e8与白色输入栏不一致 */
:global(html[data-theme='classic'] .floating-project-status),
:global(body[data-theme='classic'] .floating-project-status),
:global(html[data-theme='classic'] .floating-project-status__submenu),
:global(body[data-theme='classic'] .floating-project-status__submenu) {
background: var(--surface-raised);
}
.floating-status-motion-enter-active,
.floating-status-motion-leave-active {
transition:

View File

@ -2523,3 +2523,41 @@ body[data-theme='dark'] {
background: var(--surface-muted) !important;
}
}
/* ========== 明亮主题变体(对话区组件) ========== */
/* 背景浅色主题表面 token 阶梯近乎纯平base/card/raised 全为 #ffffff
基础样式中代码块白底落白底表格 #f9f9f9 落白底均不可见
参照上方深色覆盖块的做法按用户确认的方向做组件级补偿
代码块仅头部着色代码区与对话底保持同色表格白体+浅灰表头+可见边框 */
body[data-theme='light'] {
/* 代码块 - 头部浅灰、代码区与对话底同为白色,外框加强到可见 */
.code-block-wrapper {
border-color: var(--border-strong);
}
.code-block-header {
background: var(--surface-muted);
border-bottom-color: var(--border-strong);
}
/* 表格 - 白体 + 浅灰表头 + 可见边框 */
.text-output .text-content table {
background: var(--surface-raised);
}
.text-output .text-content thead {
background: var(--surface-muted);
}
.text-output .text-content th,
.text-output .text-content td {
border-color: var(--border-strong);
}
.text-output .text-content .md-table-scroll,
.text-output .text-content [data-md-table-scroll='1'] {
border-color: var(--border-strong);
background: var(--surface-raised);
}
}

View File

@ -396,9 +396,16 @@ body[data-theme='light'] {
color: var(--state-info);
}
/* 发送按钮 - 黑底白三角,浅阴影做层次 */
/* 输入栏壳体 - 与 git 状态栏同色的浅灰(基础 --surface-raised 在本主题为纯白,与对话底同色无层次;无法比白更浅,反向用略浅灰让壳体浮起) */
.stadium-shell,
.stadium-shell.is-focused,
.stadium-shell.has-text {
background: var(--surface-soft);
}
/* 发送按钮 - 柔化黑底白三角78% 黑hover 加深为实黑,浅阴影做层次 */
.stadium-btn.send-btn {
background: var(--text-primary);
background: color-mix(in srgb, var(--text-primary) 78%, transparent);
color: var(--surface-raised);
box-shadow: 0 1px 3px var(--shadow-color);
}