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);
- }
}
// 工作空间展开按钮