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';
},
chatContainerStyle() {
const minHeight = 80;
const minHeight = 90;
const raw = Number(this.composerReservedHeight || 0);
const height = Number.isFinite(raw) ? Math.max(minHeight, Math.round(raw)) : minHeight;
const growth = Math.max(0, height - minHeight);

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

@ -185,15 +185,6 @@
</div>
</div>
<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">
<EditorContent
:editor="editor"
@ -203,6 +194,17 @@
@focusout="onInputBlur"
/>
</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
type="button"
class="stadium-btn send-btn"
@ -1513,7 +1515,7 @@ const emitComposerHeight = () => {
}
const baseline = baselineComposerVisualHeight.value || visualHeight;
const growth = Math.max(0, visualHeight - baseline);
const baseReservedHeight = 80;
const baseReservedHeight = 90;
const reservedHeight = Math.ceil(baseReservedHeight + growth);
emit('composer-height-change', {
reservedHeight,

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

@ -1,7 +1,7 @@
/* 聊天容器整体布局，保证聊天区可见并支持上下滚动 */
.chat-container {
--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-growth-height: 0px;
flex: 1;
@ -175,7 +175,7 @@
@media (max-width: 768px) {
.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);
}

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

@ -227,7 +227,7 @@
.skill-slash-item:hover,
.skill-slash-item--active {
background: var(--chip-bg);
background: var(--hover-bg);
box-shadow: 0 1px 2px var(--shadow-color);
}
@ -246,7 +246,7 @@
.skill-slash-item__name {
flex: 0 0 auto;
max-width: 210px;
color: var(--state-info);
color: var(--accent);
font-size: 13px;
font-weight: 600;
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 {
position: absolute;
left: 20px;
@ -540,12 +551,11 @@ body[data-theme='dark'] {
}
.stadium-shell {
--stadium-radius: 24px;
--stadium-radius: 18px;
position: relative;
z-index: 2;
width: 100%;
min-height: calc(var(--stadium-radius) * 2.1);
padding: 12px 18px;
padding: 10px;
border-radius: var(--stadium-radius);
border: 1px solid var(--border-default);
background: var(--surface-raised);
@ -558,9 +568,6 @@ body[data-theme='dark'] {
}
.stadium-shell.is-multiline {
padding-top: 16px;
padding-bottom: 16px;
min-height: calc(var(--stadium-radius) * 2.7);
border-color: var(--border-strong);
box-shadow: none;
}
@ -586,16 +593,24 @@ body[data-theme='dark'] {
.input-row {
display: flex;
align-items: center;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.input-actions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.stadium-input-rich {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: grid;
padding: 2px 0 0 8px;
}
.stadium-input-rich .stadium-input {
@ -603,7 +618,7 @@ body[data-theme='dark'] {
}
.stadium-input-editor .skill-md-link {
color: var(--state-info);
color: var(--accent);
font-weight: inherit;
border-radius: 4px;
padding: 0 1px;
@ -713,19 +728,19 @@ body[data-theme='dark'] {
}
.stadium-btn {
flex: 0 0 36px;
width: 36px;
height: 36px;
flex: 0 0 28px;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
border-radius: 7px;
background: transparent;
color: var(--claude-text);
font-size: 18px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: 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 {
@ -738,17 +753,16 @@ body[data-theme='dark'] {
}
.add-btn {
font-size: 22px;
font-size: 20px;
}
.stadium-btn.send-btn {
background: var(--claude-accent);
color: var(--on-accent);
box-shadow: 0 10px 20px var(--shadow-color);
box-shadow: none;
}
.stadium-btn.send-btn:hover:not(:disabled) {
transform: translateY(-1px);
background: var(--claude-button-hover);
}
@ -765,15 +779,15 @@ body[data-theme='dark'] {
.stadium-btn.send-btn .send-icon {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid var(--on-accent);
margin-left: 5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 9px solid var(--on-accent);
margin-left: 4px;
}
.stadium-btn.send-btn .stop-icon {
width: 12px;
height: 12px;
width: 11px;
height: 11px;
border-radius: 2px;
background-color: var(--on-accent);
display: block;
@ -787,11 +801,6 @@ body[data-theme='dark'] {
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 {
display: none;
}
@ -898,7 +907,7 @@ body[data-theme='dark'] {
pointer-events: none;
z-index: 1;
gap: 10px;
padding-bottom: 140px;
padding-bottom: 160px;
}
.blank-hero-text {
@ -919,8 +928,8 @@ body[data-theme='dark'] {
.composer-container {
position: relative;
height: var(--composer-base-height, calc(80px + var(--app-bottom-inset)));
flex: 0 0 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(90px + var(--app-bottom-inset)));
transition: transform 0.3s ease;
z-index: 2;
}
@ -944,7 +953,7 @@ body[data-theme='dark'] {
transform: translateY(calc(-32vh + var(--composer-growth-height, 0px)));
}
.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;
}
/* 按钮背景色 - 使用浅灰色 */
/* 发送按钮 - 黑底白三角，浅阴影做层次 */
.stadium-btn.send-btn {
background: var(--surface-muted);
color: var(--text-primary);
box-shadow: 0 1px 2px var(--shadow-color);
background: var(--text-primary);
color: var(--surface-raised);
box-shadow: 0 1px 3px var(--shadow-color);
}
.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 {
border-left-color: var(--text-primary);
border-left-color: var(--surface-raised);
}
.stadium-btn.send-btn .stop-icon {
background-color: var(--text-primary);
background-color: var(--surface-raised);
}
.menu-entry:hover:not(:disabled) {
@ -2896,18 +2897,16 @@ body[data-theme='light'] {
.mode-indicator {
background: var(--surface-muted) !important;
color: var(--text-primary);
box-shadow: 0 1px 2px var(--border-default);
box-shadow: none;
}
.mode-indicator:hover {
background: var(--border-strong) !important;
box-shadow: 0 2px 4px var(--border-strong);
box-shadow: none;
}
.mode-indicator:focus-visible {
box-shadow:
0 0 0 2px var(--border-default),
0 2px 4px var(--border-strong);
box-shadow: 0 0 0 2px var(--border-default);
}
.mode-indicator .icon {
@ -3038,23 +3037,24 @@ body[data-theme='dark'] {
color: var(--text-tertiary);
}
/* 按钮背景色 - 使用浅一些的灰色 */
/* 发送按钮 - 白底黑三角，浅阴影做层次 */
.stadium-btn.send-btn {
background: var(--surface-muted);
color: var(--text-primary);
box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent);
background: var(--text-primary);
color: var(--surface-raised);
box-shadow: 0 1px 3px var(--shadow-color);
}
.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 {
border-left-color: var(--text-primary);
border-left-color: var(--surface-raised);
}
.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) {
background: var(--surface-muted);
background: var(--theme-tab-active);
}
.menu-entry.active {
background: var(--surface-muted);
background: var(--theme-tab-active);
}
/* 机器人图标保持白色 */
@ -3085,18 +3085,16 @@ body[data-theme='dark'] {
.mode-indicator {
background: var(--badge-bg) !important;
color: var(--text-primary);
box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent);
box-shadow: none;
}
.mode-indicator:hover {
background: var(--surface-muted) !important;
box-shadow: 0 3px 6px var(--shadow-color);
box-shadow: none;
}
.mode-indicator:focus-visible {
box-shadow:
0 0 0 2px var(--border-card-strong),
0 3px 6px var(--shadow-color);
box-shadow: 0 0 0 2px var(--border-card-strong);
}
.mode-indicator .icon {
@ -3362,11 +3360,11 @@ body[data-theme='dark'] {
}
.menu-entry:hover:not(:disabled) {
background: var(--surface-muted) !important;
background: var(--theme-tab-active) !important;
}
.menu-entry.active {
background: var(--surface-muted) !important;
background: var(--theme-tab-active) !important;
}
.menu-entry .entry-arrow {

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

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