feat: 扩展工作空间侧边栏宽度约束并统一拖动手柄样式
- 侧边栏最大宽度从 800px 扩展至 1200px(含动态计算) - 文件树最小宽度从 180px 提升至 300px - 文件树最大宽度扩展为侧边栏宽度 - 预览关闭时文件树自动占满侧边栏,分隔线隐藏 - 外部拖动手柄改为与内部分隔线一致的样式(1px、hover 变色)
This commit is contained in:
@@ -82,7 +82,8 @@ function WorkspaceSidebar({ isOpen, onClose }) {
|
||||
if (isResizingSidebarRef.current) {
|
||||
setSidebarWidth(prev => {
|
||||
const newWidth = prev - deltaX; // 注意:向左拖动是负数
|
||||
return Math.max(400, Math.min(800, newWidth));
|
||||
const maxWidth = Math.min(1200, window.innerWidth - 480);
|
||||
return Math.max(400, Math.min(maxWidth, newWidth));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -90,7 +91,9 @@ function WorkspaceSidebar({ isOpen, onClose }) {
|
||||
if (isResizingTreeRef.current) {
|
||||
setFileTreeWidth(prev => {
|
||||
const newWidth = prev + deltaX;
|
||||
return Math.max(180, Math.min(300, newWidth));
|
||||
const minWidth = 300;
|
||||
const maxWidth = previewFile ? sidebarWidth - 32 : sidebarWidth;
|
||||
return Math.max(minWidth, Math.min(maxWidth, newWidth));
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -368,7 +371,10 @@ function WorkspaceSidebar({ isOpen, onClose }) {
|
||||
{/* FileTree */}
|
||||
<div
|
||||
className="workspace-sidebar__file-tree"
|
||||
style={{ width: `${fileTreeWidth}px` }}
|
||||
style={{
|
||||
width: previewFile ? `${fileTreeWidth}px` : 'auto',
|
||||
flex: previewFile ? 'none' : '1'
|
||||
}}
|
||||
>
|
||||
<FileTree
|
||||
onFileClick={handleFileClick}
|
||||
@@ -377,10 +383,12 @@ function WorkspaceSidebar({ isOpen, onClose }) {
|
||||
</div>
|
||||
|
||||
{/* 分隔线(可拖动调整) */}
|
||||
<div
|
||||
className="workspace-sidebar__divider"
|
||||
onMouseDown={handleDividerMouseDown}
|
||||
/>
|
||||
{previewFile && (
|
||||
<div
|
||||
className="workspace-sidebar__divider"
|
||||
onMouseDown={handleDividerMouseDown}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Preview Panel */}
|
||||
{previewFile && (
|
||||
@@ -397,13 +405,7 @@ function WorkspaceSidebar({ isOpen, onClose }) {
|
||||
<div
|
||||
className="workspace-sidebar__resize-handle"
|
||||
onMouseDown={handleSidebarMouseDown}
|
||||
>
|
||||
<div className="workspace-sidebar__resize-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 右键菜单 */}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
.workspace-sidebar {
|
||||
width: 500px;
|
||||
min-width: 400px;
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
background: var(--color-bg-2);
|
||||
border-left: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
@@ -131,8 +131,8 @@
|
||||
|
||||
// ========== FileTree ==========
|
||||
&__file-tree {
|
||||
min-width: 180px;
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
@@ -177,39 +177,28 @@
|
||||
&__resize-handle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--color-border-2);
|
||||
cursor: ew-resize;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
transition: background 0.2s;
|
||||
z-index: 10;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: 0;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&__resize-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
div {
|
||||
width: 4px;
|
||||
height: 2px;
|
||||
background: var(--color-text-3);
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__resize-handle:hover &__resize-lines div {
|
||||
background: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
|
||||
// 工作空间展开按钮
|
||||
|
||||
Reference in New Issue
Block a user