JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(frontend): 输入栏现代化重设计 + 配套高度/配色修复

Browse Source 
- 输入栏由体育场形改为圆角矩形，输入区与按钮行分离
- +/发送按钮移至底部行（左下/右下），缩小尺寸、圆角 hover、同心圆角对齐
- 发送按钮去光晕：浅色黑底白三角、深色白底黑三角，仅留浅阴影
- logo 旁思考模式按钮去除扩散光晕，focus 仅留描边环
- 对话区预留高度基准 80→90 适配更高输入栏，欢迎语 padding 同步加大
- /菜单命令名配色：经典 accent 橙、浅/深色保留 state-info 蓝
- /菜单及深色 + 菜单 hover 统一为侧边栏同款 --theme-tab-active（修复深色全黑）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
JOJO 2026-06-06 18:25:20 +08:00
parent b4030c386e
commit 05e8ea5e40
6 changed files with 86 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/src/app/computed.ts
View File

@ -139,7 +139,7 @@ export const computed = {
return !this.isMobileViewport && this.chatDisplayMode === 'chat'; return !this.isMobileViewport && this.chatDisplayMode === 'chat';
}, },
chatContainerStyle() { chatContainerStyle() {
const minHeight = 80; const minHeight = 90;
const raw = Number(this.composerReservedHeight || 0); const raw = Number(this.composerReservedHeight || 0);
const height = Number.isFinite(raw) ? Math.max(minHeight, Math.round(raw)) : minHeight; const height = Number.isFinite(raw) ? Math.max(minHeight, Math.round(raw)) : minHeight;
const growth = Math.max(0, height - minHeight); const growth = Math.max(0, height - minHeight);

22
static/src/components/input/InputComposer.vue
View File

@ -185,15 +185,6 @@
</div> </div>
</div> </div>
<div class="input-row"> <div class="input-row">
<button
type="button"
class="stadium-btn add-btn"
data-tutorial="quick-menu-open"
@click.stop="$emit('toggle-quick-menu')"
:disabled="!isConnected"
>
+
</button>
<div class="stadium-input-rich"> <div class="stadium-input-rich">
<EditorContent <EditorContent
:editor="editor" :editor="editor"
@ -203,6 +194,17 @@
@focusout="onInputBlur" @focusout="onInputBlur"
/> />
</div> </div>
</div>
<div class="input-actions">
<button
type="button"
class="stadium-btn add-btn"
data-tutorial="quick-menu-open"
@click.stop="$emit('toggle-quick-menu')"
:disabled="!isConnected"
>
+
</button>
<button <button
type="button" type="button"
class="stadium-btn send-btn" class="stadium-btn send-btn"
@ -1513,7 +1515,7 @@ const emitComposerHeight = () => {
} }
const baseline = baselineComposerVisualHeight.value || visualHeight; const baseline = baselineComposerVisualHeight.value || visualHeight;
const growth = Math.max(0, visualHeight - baseline); const growth = Math.max(0, visualHeight - baseline);
const baseReservedHeight = 80; const baseReservedHeight = 90;
const reservedHeight = Math.ceil(baseReservedHeight + growth); const reservedHeight = Math.ceil(baseReservedHeight + growth);
emit('composer-height-change', { emit('composer-height-change', {
reservedHeight, reservedHeight,

4
static/src/styles/components/chat/_chat-area.scss
View File

@ -1,7 +1,7 @@
/* 聊天容器整体布局，保证聊天区可见并支持上下滚动 */ /* 聊天容器整体布局，保证聊天区可见并支持上下滚动 */
.chat-container { .chat-container {
--chat-surface-color: var(--surface-panel); --chat-surface-color: var(--surface-panel);
--composer-base-height: calc(80px + var(--app-bottom-inset)); --composer-base-height: calc(90px + var(--app-bottom-inset));
--composer-reserved-height: var(--composer-base-height); --composer-reserved-height: var(--composer-base-height);
--composer-growth-height: 0px; --composer-growth-height: 0px;
flex: 1; flex: 1;
@ -175,7 +175,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.chat-container { .chat-container {
--composer-base-height: calc(80px + var(--app-bottom-inset)); --composer-base-height: calc(90px + var(--app-bottom-inset));
--composer-reserved-height: var(--composer-base-height); --composer-reserved-height: var(--composer-base-height);
} }

77
static/src/styles/components/input/_composer.scss
View File

@ -227,7 +227,7 @@
.skill-slash-item:hover, .skill-slash-item:hover,
.skill-slash-item--active { .skill-slash-item--active {
background: var(--chip-bg); background: var(--hover-bg);
box-shadow: 0 1px 2px var(--shadow-color); box-shadow: 0 1px 2px var(--shadow-color);
} }
@ -246,7 +246,7 @@
.skill-slash-item__name { .skill-slash-item__name {
flex: 0 0 auto; flex: 0 0 auto;
max-width: 210px; max-width: 210px;
color: var(--state-info); color: var(--accent);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
@ -314,6 +314,17 @@ body[data-theme='dark'] {
} }
} }
body[data-theme='light'] {
.skill-slash-item__name {
color: var(--state-info);
}
.stadium-input-editor .skill-md-link,
.stadium-input-highlight .skill-md-link {
color: var(--state-info);
}
}
.permission-switcher { .permission-switcher {
position: absolute; position: absolute;
left: 20px; left: 20px;
@ -540,12 +551,11 @@ body[data-theme='dark'] {
} }
.stadium-shell { .stadium-shell {
--stadium-radius: 24px; --stadium-radius: 18px;
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
min-height: calc(var(--stadium-radius) * 2.1); padding: 10px;
padding: 12px 18px;
border-radius: var(--stadium-radius); border-radius: var(--stadium-radius);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
background: var(--surface-raised); background: var(--surface-raised);
@ -558,9 +568,6 @@ body[data-theme='dark'] {
} }
.stadium-shell.is-multiline { .stadium-shell.is-multiline {
padding-top: 16px;
padding-bottom: 16px;
min-height: calc(var(--stadium-radius) * 2.7);
border-color: var(--border-strong); border-color: var(--border-strong);
box-shadow: none; box-shadow: none;
} }
@ -586,16 +593,24 @@ body[data-theme='dark'] {
.input-row { .input-row {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
} }
.input-actions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.stadium-input-rich { .stadium-input-rich {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0; min-width: 0;
display: grid; display: grid;
padding: 2px 0 0 8px;
} }
.stadium-input-rich .stadium-input { .stadium-input-rich .stadium-input {
@ -603,7 +618,7 @@ body[data-theme='dark'] {
} }
.stadium-input-editor .skill-md-link { .stadium-input-editor .skill-md-link {
color: var(--state-info); color: var(--accent);
font-weight: inherit; font-weight: inherit;
border-radius: 4px; border-radius: 4px;
padding: 0 1px; padding: 0 1px;
@ -713,19 +728,19 @@ body[data-theme='dark'] {
} }
.stadium-btn { .stadium-btn {
flex: 0 0 36px; flex: 0 0 28px;
width: 36px; width: 28px;
height: 36px; height: 28px;
border: none; border: none;
border-radius: 50%; border-radius: 7px;
background: transparent; background: transparent;
color: var(--claude-text); color: var(--claude-text);
font-size: 18px; font-size: 16px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background 0.2s ease, transform 0.2s ease, margin-top 0.2s ease; transition: background 140ms ease, color 140ms ease;
} }
.stadium-btn:disabled { .stadium-btn:disabled {
@ -738,17 +753,16 @@ body[data-theme='dark'] {
} }
.add-btn { .add-btn {
font-size: 22px; font-size: 20px;
} }
.stadium-btn.send-btn { .stadium-btn.send-btn {
background: var(--claude-accent); background: var(--claude-accent);
color: var(--on-accent); color: var(--on-accent);
box-shadow: 0 10px 20px var(--shadow-color); box-shadow: none;
} }
.stadium-btn.send-btn:hover:not(:disabled) { .stadium-btn.send-btn:hover:not(:disabled) {
transform: translateY(-1px);
background: var(--claude-button-hover); background: var(--claude-button-hover);
} }
@ -765,15 +779,15 @@ body[data-theme='dark'] {
.stadium-btn.send-btn .send-icon { .stadium-btn.send-btn .send-icon {
width: 0; width: 0;
height: 0; height: 0;
border-top: 6px solid transparent; border-top: 5px solid transparent;
border-bottom: 6px solid transparent; border-bottom: 5px solid transparent;
border-left: 10px solid var(--on-accent); border-left: 9px solid var(--on-accent);
margin-left: 5px; margin-left: 4px;
} }
.stadium-btn.send-btn .stop-icon { .stadium-btn.send-btn .stop-icon {
width: 12px; width: 11px;
height: 12px; height: 11px;
border-radius: 2px; border-radius: 2px;
background-color: var(--on-accent); background-color: var(--on-accent);
display: block; display: block;
@ -787,11 +801,6 @@ body[data-theme='dark'] {
background-color: color-mix(in srgb, var(--on-accent) 40%, transparent); background-color: color-mix(in srgb, var(--on-accent) 40%, transparent);
} }
.stadium-shell.is-multiline .stadium-btn {
align-self: flex-end;
margin-top: 0;
}
.file-input-hidden { .file-input-hidden {
display: none; display: none;
} }
@ -898,7 +907,7 @@ body[data-theme='dark'] {
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
gap: 10px; gap: 10px;
padding-bottom: 140px; padding-bottom: 160px;
} }
.blank-hero-text { .blank-hero-text {
@ -919,8 +928,8 @@ body[data-theme='dark'] {
.composer-container { .composer-container {
position: relative; position: relative;
height: var(--composer-base-height, calc(80px + var(--app-bottom-inset))); height: var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
flex: 0 0 var(--composer-base-height, calc(80px + var(--app-bottom-inset))); flex: 0 0 var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
transition: transform 0.3s ease; transition: transform 0.3s ease;
z-index: 2; z-index: 2;
} }
@ -944,7 +953,7 @@ body[data-theme='dark'] {
transform: translateY(calc(-32vh + var(--composer-growth-height, 0px))); transform: translateY(calc(-32vh + var(--composer-growth-height, 0px)));
} }
.blank-hero-overlay { .blank-hero-overlay {
padding-bottom: 120px; padding-bottom: 136px;
} }
} }

54
static/src/styles/components/overlays/_overlays.scss
View File

@ -2860,23 +2860,24 @@ body[data-theme='light'] {
box-shadow: none; box-shadow: none;
} }
/* 按钮背景色 - 使用浅灰色 */ /* 发送按钮 - 黑底白三角，浅阴影做层次 */
.stadium-btn.send-btn { .stadium-btn.send-btn {
background: var(--surface-muted); background: var(--text-primary);
color: var(--text-primary); color: var(--surface-raised);
box-shadow: 0 1px 2px var(--shadow-color); box-shadow: 0 1px 3px var(--shadow-color);
} }
.stadium-btn.send-btn:hover:not(:disabled) { .stadium-btn.send-btn:hover:not(:disabled) {
background: var(--border-strong); background: var(--text-primary);
box-shadow: 0 1px 3px var(--shadow-color);
} }
.stadium-btn.send-btn .send-icon { .stadium-btn.send-btn .send-icon {
border-left-color: var(--text-primary); border-left-color: var(--surface-raised);
} }
.stadium-btn.send-btn .stop-icon { .stadium-btn.send-btn .stop-icon {
background-color: var(--text-primary); background-color: var(--surface-raised);
} }
.menu-entry:hover:not(:disabled) { .menu-entry:hover:not(:disabled) {
@ -2896,18 +2897,16 @@ body[data-theme='light'] {
.mode-indicator { .mode-indicator {
background: var(--surface-muted) !important; background: var(--surface-muted) !important;
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 1px 2px var(--border-default); box-shadow: none;
} }
.mode-indicator:hover { .mode-indicator:hover {
background: var(--border-strong) !important; background: var(--border-strong) !important;
box-shadow: 0 2px 4px var(--border-strong); box-shadow: none;
} }
.mode-indicator:focus-visible { .mode-indicator:focus-visible {
box-shadow: box-shadow: 0 0 0 2px var(--border-default);
0 0 0 2px var(--border-default),
0 2px 4px var(--border-strong);
} }
.mode-indicator .icon { .mode-indicator .icon {
@ -3038,23 +3037,24 @@ body[data-theme='dark'] {
color: var(--text-tertiary); color: var(--text-tertiary);
} }
/* 按钮背景色 - 使用浅一些的灰色 */ /* 发送按钮 - 白底黑三角，浅阴影做层次 */
.stadium-btn.send-btn { .stadium-btn.send-btn {
background: var(--surface-muted); background: var(--text-primary);
color: var(--text-primary); color: var(--surface-raised);
box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent); box-shadow: 0 1px 3px var(--shadow-color);
} }
.stadium-btn.send-btn:hover:not(:disabled) { .stadium-btn.send-btn:hover:not(:disabled) {
background: var(--surface-muted); background: var(--text-primary);
box-shadow: 0 1px 3px var(--shadow-color);
} }
.stadium-btn.send-btn .send-icon { .stadium-btn.send-btn .send-icon {
border-left-color: var(--text-primary); border-left-color: var(--surface-raised);
} }
.stadium-btn.send-btn .stop-icon { .stadium-btn.send-btn .stop-icon {
background-color: var(--text-primary); background-color: var(--surface-raised);
} }
/* 快捷菜单 - 改为灰黑色 */ /* 快捷菜单 - 改为灰黑色 */
@ -3069,11 +3069,11 @@ body[data-theme='dark'] {
} }
.menu-entry:hover:not(:disabled) { .menu-entry:hover:not(:disabled) {
background: var(--surface-muted); background: var(--theme-tab-active);
} }
.menu-entry.active { .menu-entry.active {
background: var(--surface-muted); background: var(--theme-tab-active);
} }
/* 机器人图标保持白色 */ /* 机器人图标保持白色 */
@ -3085,18 +3085,16 @@ body[data-theme='dark'] {
.mode-indicator { .mode-indicator {
background: var(--badge-bg) !important; background: var(--badge-bg) !important;
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent); box-shadow: none;
} }
.mode-indicator:hover { .mode-indicator:hover {
background: var(--surface-muted) !important; background: var(--surface-muted) !important;
box-shadow: 0 3px 6px var(--shadow-color); box-shadow: none;
} }
.mode-indicator:focus-visible { .mode-indicator:focus-visible {
box-shadow: box-shadow: 0 0 0 2px var(--border-card-strong);
0 0 0 2px var(--border-card-strong),
0 3px 6px var(--shadow-color);
} }
.mode-indicator .icon { .mode-indicator .icon {
@ -3362,11 +3360,11 @@ body[data-theme='dark'] {
} }
.menu-entry:hover:not(:disabled) { .menu-entry:hover:not(:disabled) {
background: var(--surface-muted) !important; background: var(--theme-tab-active) !important;
} }
.menu-entry.active { .menu-entry.active {
background: var(--surface-muted) !important; background: var(--theme-tab-active) !important;
} }
.menu-entry .entry-arrow { .menu-entry .entry-arrow {

10
static/src/styles/components/panels/_left-panel.scss
View File

@ -139,7 +139,6 @@
.mode-indicator { .mode-indicator {
--mode-indicator-color-1: var(--claude-accent); --mode-indicator-color-1: var(--claude-accent);
--mode-indicator-color-2: var(--claude-accent-strong); --mode-indicator-color-2: var(--claude-accent-strong);
--mode-indicator-shadow: rgba(189, 93, 58, 0.25);
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -152,7 +151,7 @@
justify-content: center; justify-content: center;
background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2)); background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2));
color: var(--on-accent); color: var(--on-accent);
box-shadow: 0 8px 20px var(--mode-indicator-shadow); box-shadow: none;
transition: transition:
background 0.35s ease, background 0.35s ease,
box-shadow 0.35s ease, box-shadow 0.35s ease,
@ -164,27 +163,22 @@
} }
.mode-indicator:focus-visible { .mode-indicator:focus-visible {
box-shadow: box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-accent) 80%, transparent);
0 0 0 2px color-mix(in srgb, var(--on-accent) 80%, transparent),
0 8px 20px var(--mode-indicator-shadow);
} }
.mode-indicator.fast { .mode-indicator.fast {
--mode-indicator-color-1: var(--accent-deep); --mode-indicator-color-1: var(--accent-deep);
--mode-indicator-color-2: var(--accent-deep-strong); --mode-indicator-color-2: var(--accent-deep-strong);
--mode-indicator-shadow: color-mix(in srgb, var(--accent-deep) 35%, transparent);
} }
.mode-indicator.thinking { .mode-indicator.thinking {
--mode-indicator-color-1: var(--claude-accent); --mode-indicator-color-1: var(--claude-accent);
--mode-indicator-color-2: var(--claude-accent-strong); --mode-indicator-color-2: var(--claude-accent-strong);
--mode-indicator-shadow: rgba(189, 93, 58, 0.3);
} }
.mode-indicator.deep { .mode-indicator.deep {
--mode-indicator-color-1: var(--claude-deep); --mode-indicator-color-1: var(--claude-deep);
--mode-indicator-color-2: var(--claude-deep-strong); --mode-indicator-color-2: var(--claude-deep-strong);
--mode-indicator-shadow: rgba(208, 122, 20, 0.35);
} }
.mode-indicator .icon { .mode-indicator .icon {