diff --git a/UI-DESIGN.md b/UI-DESIGN.md index 6dc560e3..09fe1231 100644 --- a/UI-DESIGN.md +++ b/UI-DESIGN.md @@ -163,6 +163,7 @@ - 页面顶部和底部内边距默认为 `32px`。 - `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。 - 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。 +- 输入区顶部向消息区延伸 `--space-4`(16px)的透明到 `--surface-raised` 渐变,柔化消息裁切边缘;渐变不占布局空间、不拦截鼠标事件,并随主题切换。 - 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。 ## 5. 信息层级 diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css index f36e7363..b128aadd 100644 --- a/src/renderer/src/styles.css +++ b/src/renderer/src/styles.css @@ -7785,6 +7785,7 @@ button > svg { } .composer-wrap { + position: relative; width: 100%; max-width: 100%; min-width: 0; @@ -7795,6 +7796,17 @@ button > svg { 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 { width: 100%; max-width: 100%;