🐛 fix(sidebar): 修复树节点左侧图标对齐

- 调整树节点内容区布局,固定展开符和图标宽度
- 保持树节点标题、展开符和图标左侧对齐稳定
- 补充侧边栏树横向滚动 CSS 回归测试
This commit is contained in:
Syngnat
2026-05-09 16:08:49 +08:00
parent 4ad074a90c
commit baed7a2721
2 changed files with 22 additions and 0 deletions

View File

@@ -63,6 +63,25 @@ body, #root {
.sidebar-tree-scroll-shell .ant-tree .ant-tree-node-content-wrapper {
width: auto !important;
min-width: 0;
display: flex !important;
align-items: center;
gap: 8px;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-switcher {
flex: 0 0 24px;
width: 24px;
min-width: 24px;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-iconEle {
flex: 0 0 16px;
width: 16px;
min-width: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-end: 0;
}
.sidebar-tree-scroll-shell .ant-tree .ant-tree-title {

View File

@@ -18,6 +18,9 @@ describe('sidebar tree horizontal scroll css', () => {
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-node-content-wrapper\s*\{[^}]*width:\s*auto\s*!important;[^}]*min-width:\s*0;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-node-content-wrapper\s*\{[^}]*max-content/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-switcher\s*\{[^}]*width:\s*24px;[^}]*min-width:\s*24px;/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-iconEle\s*\{[^}]*width:\s*16px;[^}]*min-width:\s*16px;/s);
expect(appCss).toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-title\s*\{[^}]*min-width:\s*0;[^}]*overflow:\s*visible;/s);
expect(appCss).not.toMatch(/\.sidebar-tree-scroll-shell\s+\.ant-tree\s+\.ant-tree-title\s*\{[^}]*max-content/s);
});