diff --git a/src/components/workspace/WorkspaceSidebar.jsx b/src/components/workspace/WorkspaceSidebar.jsx index 9b28638..6abd949 100644 --- a/src/components/workspace/WorkspaceSidebar.jsx +++ b/src/components/workspace/WorkspaceSidebar.jsx @@ -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 */}
{/* 分隔线(可拖动调整) */} -
+ {previewFile && ( +
+ )} {/* Preview Panel */} {previewFile && ( @@ -397,13 +405,7 @@ function WorkspaceSidebar({ isOpen, onClose }) {
-
-
-
-
-
-
+ />
{/* 右键菜单 */} diff --git a/src/styles/components/workspace/_index.scss b/src/styles/components/workspace/_index.scss index d68d135..c4a3874 100644 --- a/src/styles/components/workspace/_index.scss +++ b/src/styles/components/workspace/_index.scss @@ -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); - } } // 工作空间展开按钮