feat(ui): Layout 新增 toolbar 插槽

页头与页身之间的一条真实占位带(搜索 / 筛选 / 操作),宽度跟随容器,
contained 时与侧栏 + 内容同宽,height=screen 下不参与内容区滚动。
用它替代「搜索框 fixed + contentOffset 让位」的写法。

- Layout.tsx / Layout.module.css:新增 toolbar prop 与样式
- 展示页 #layout 增加「页头下的工具条」示例
- COMPONENTS.md 补契约、与 contentOffset 的分工说明、changelog
This commit is contained in:
2026-11-01 15:15:14 +08:00
parent ebe4af3dab
commit 93bb5cbb28
5 changed files with 73 additions and 1 deletions
+13
View File
@@ -562,6 +562,19 @@ code {
gap: var(--su-space-1);
}
/* 工具条:页头与页身之间的一条搜索带(toolbar 插槽) */
.layout-toolbar {
display: flex;
align-items: center;
justify-content: center;
padding: var(--su-space-3) var(--su-space-5);
border-bottom: 1px solid var(--su-border);
}
.layout-toolbar > * {
width: min(360px, 100%);
}
.layout-side {
display: flex;
flex-direction: column;