fix: soften the transition above the chat composer
Add a theme-aware 16px fade above the composer to soften the clipped message edge without changing layout or pointer interactions. Document the treatment in the UI design system. Release note: 聊天输入区顶部增加淡渐变,让消息与输入框之间的衔接更自然,并适配浅色和深色主题。
This commit is contained in:
@@ -163,6 +163,7 @@
|
|||||||
- 页面顶部和底部内边距默认为 `32px`。
|
- 页面顶部和底部内边距默认为 `32px`。
|
||||||
- `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。
|
- `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。
|
||||||
- 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。
|
- 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。
|
||||||
|
- 输入区顶部向消息区延伸 `--space-4`(16px)的透明到 `--surface-raised` 渐变,柔化消息裁切边缘;渐变不占布局空间、不拦截鼠标事件,并随主题切换。
|
||||||
- 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。
|
- 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。
|
||||||
|
|
||||||
## 5. 信息层级
|
## 5. 信息层级
|
||||||
|
|||||||
@@ -7785,6 +7785,7 @@ button > svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.composer-wrap {
|
.composer-wrap {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -7795,6 +7796,17 @@ button > svg {
|
|||||||
background: var(--surface-raised);
|
background: var(--surface-raised);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.composer-wrap::before {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 0;
|
||||||
|
height: var(--space-4);
|
||||||
|
background: linear-gradient(to bottom, transparent, var(--surface-raised));
|
||||||
|
content: "";
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.composer {
|
.composer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user