fix(composer): blend the message fade into the composer outline
Extend the composer fade down to the input card's top edge and layer it beneath the card, so scrolling messages fade straight into the composer outline. Remove the full-width composer-wrap background that produced a hard horizontal band, and soften the focus ring. Keep the dark theme fade on the canvas color. Release note: 优化聊天输入框上方的渐变过渡,消息自然淡出到输入框边缘,不再出现横向色带。
This commit is contained in:
+1
-1
@@ -163,7 +163,7 @@
|
|||||||
- 页面顶部和底部内边距默认为 `32px`。
|
- 页面顶部和底部内边距默认为 `32px`。
|
||||||
- `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。
|
- `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。
|
||||||
- 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。
|
- 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。
|
||||||
- 输入区顶部向消息区延伸 `--space-4`(16px)的透明到 `--surface-raised` 渐变,柔化消息裁切边缘;渐变不占布局空间、不拦截鼠标事件,并随主题切换。
|
- 输入区外层不铺整块背景、不画横向分隔线。输入框上方保留 `--space-6`(24px)的透明到页面底色渐变,渐变终点对齐输入框上缘,让滚动的消息在输入框轮廓前自然淡出;渐变位于输入框之下、不拦截鼠标事件,并随主题切换。输入框上缘只保留自身 1px 描边,不加向上的阴影,避免与渐变终点叠成粗边界。
|
||||||
- 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。
|
- 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。
|
||||||
|
|
||||||
## 5. 信息层级
|
## 5. 信息层级
|
||||||
|
|||||||
@@ -364,7 +364,7 @@ describe('WorkspacePrimitives', () => {
|
|||||||
|
|
||||||
it('wraps native client and compaction actions without overlapping composer metadata', () => {
|
it('wraps native client and compaction actions without overlapping composer metadata', () => {
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*background:\s*var\(--surface-raised\);/u
|
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*\}/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.composer-meta\s*\{[^}]*position:\s*relative;[^}]*min-height:\s*26px;[^}]*margin:\s*var\(--space-1\) 0 0;/u
|
/\.composer-meta\s*\{[^}]*position:\s*relative;[^}]*min-height:\s*26px;[^}]*margin:\s*var\(--space-1\) 0 0;/u
|
||||||
|
|||||||
@@ -7907,7 +7907,9 @@ button > svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.composer-wrap {
|
.composer-wrap {
|
||||||
|
--composer-fade-color: var(--surface-raised);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -7915,16 +7917,21 @@ button > svg {
|
|||||||
var(--space-3)
|
var(--space-3)
|
||||||
var(--chat-inline-padding)
|
var(--chat-inline-padding)
|
||||||
var(--space-2);
|
var(--space-2);
|
||||||
background: var(--surface-raised);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer-wrap::before {
|
.composer-wrap::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 100%;
|
bottom: calc(100% - var(--space-3));
|
||||||
left: 0;
|
left: 0;
|
||||||
height: var(--space-4);
|
z-index: -1;
|
||||||
background: linear-gradient(to bottom, transparent, var(--surface-raised));
|
height: var(--space-6);
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent,
|
||||||
|
color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
|
||||||
|
var(--composer-fade-color)
|
||||||
|
);
|
||||||
content: "";
|
content: "";
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -8400,7 +8407,7 @@ button > svg {
|
|||||||
.composer:focus-within {
|
.composer:focus-within {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
|
0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
|
||||||
var(--shadow-card);
|
var(--shadow-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -17772,6 +17779,10 @@ textarea.field-control {
|
|||||||
background: var(--surface-canvas);
|
background: var(--surface-canvas);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root[data-theme='dark'] .composer-wrap {
|
||||||
|
--composer-fade-color: var(--surface-canvas);
|
||||||
|
}
|
||||||
|
|
||||||
:root[data-theme='dark'] :where(
|
:root[data-theme='dark'] :where(
|
||||||
.sidebar,
|
.sidebar,
|
||||||
.topbar,
|
.topbar,
|
||||||
|
|||||||
Reference in New Issue
Block a user