修复侧边栏滚动容器结构:防止状态栏被挤掉并显示滚动条

- 采用与主文件网格相同的滚动容器模式:外层relative overflow-hidden + 内层absolute inset-0
- 修复侧边栏内容过多时挤压底部状态栏的问题
- 确保thin-scrollbar样式正确应用并显示滚动条
- 保持UI布局一致性,侧边栏现在有固定的滚动区域限制

结构改进:
- 外层:flex-1 relative overflow-hidden(定义滚动区域边界)
- 内层:absolute inset-0 overflow-y-auto thin-scrollbar(实际滚动容器)
- 这样可以确保侧边栏内容不会超出分配的空间,底部状态栏始终可见
This commit is contained in:
ZacharyZcR
2025-09-17 10:18:40 +08:00
parent 42c6f1e2d0
commit 91462021b5

View File

@@ -291,7 +291,8 @@ export function FileManagerSidebar({
return (
<div className="h-full flex flex-col bg-dark-bg border-r border-dark-border">
<div className="flex-1 overflow-y-auto thin-scrollbar p-2 space-y-4">
<div className="flex-1 relative overflow-hidden">
<div className="absolute inset-0 overflow-y-auto thin-scrollbar p-2 space-y-4">
{/* 快捷功能区域 */}
{renderSection(t("fileManager.recent"), <Clock className="w-3 h-3" />, recentItems)}
{renderSection(t("fileManager.pinned"), <Star className="w-3 h-3" />, pinnedItems)}
@@ -307,6 +308,7 @@ export function FileManagerSidebar({
{directoryTree.map((item) => renderSidebarItem(item))}
</div>
</div>
</div>
</div>
</div>
);