refactor(chat): align chat header and input bar with Dart source

This commit is contained in:
2026-06-10 11:59:53 +08:00
parent 1e5b7420d3
commit 1db3e3ae31
17 changed files with 183 additions and 688 deletions
@@ -1,35 +1,32 @@
/* ChatInputBar 输入栏容器样式 */
/* ChatInputBar 输入栏容器样式(与 Dart chat_input_bar.dart 对齐) */
/* 外层:focused 时加 padding-top + 粉色背景 + 阴影 */
.bar {
flex: 0 0 auto;
padding: var(--spacing-3, 12px) var(--spacing-5, 20px) var(--spacing-5, 20px);
background: var(--color-input-bar-background, rgba(0, 0, 0, 0.4));
backdrop-filter: blur(8px);
border-top: 1px solid var(--color-chat-input-border, rgba(255, 255, 255, 0.12));
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
padding: 0 var(--spacing-lg, 16px) var(--spacing-lg, 16px);
background: transparent;
transition: padding-top 0.2s ease, background-color 0.2s ease,
box-shadow 0.2s ease;
}
.barFocused {
padding-top: var(--spacing-md, 12px);
background: #feeff2;
box-shadow: 0 4px 12px var(--color-input-box-shadow, rgba(0, 0, 0, 0.1));
}
/* 内层:白底 + 大圆角(Dart AppRadius.radius32+ focused 时 accent 边框 */
.row {
display: flex;
align-items: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
background: var(--color-bubble-background, #fff);
border-radius: 9999px;
border: 1px solid var(--color-chat-input-border, rgba(255, 255, 255, 0.2));
transition: border-color 0.2s, box-shadow 0.2s;
gap: var(--spacing-sm, 8px);
padding: var(--spacing-sm, 8px);
background: #fff;
border-radius: 32px;
border: 1px solid transparent;
transition: border-color 0.2s ease;
}
.rowFocused {
border-color: var(--color-accent, #f84d96);
box-shadow: 0 4px 12px var(--color-input-shadow, rgba(0, 0, 0, 0.1));
}
.textFieldWrap {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}