diff --git a/src/renderer/css/app.css b/src/renderer/css/app.css index 9f758ce..b9857d9 100644 --- a/src/renderer/css/app.css +++ b/src/renderer/css/app.css @@ -45,9 +45,9 @@ body { .titlebar-left { display: flex; align-items: center; - gap: 8px; + gap: 6px; overflow: hidden; - -webkit-app-region: drag; /* 允许左侧空白和品牌区域拖拽 */ + -webkit-app-region: no-drag; /* 允许子元素正常响应鼠标交互 */ } .app-brand { @@ -61,6 +61,7 @@ body { letter-spacing: 0.5px; -webkit-app-region: drag; cursor: grab; + flex-shrink: 0; } .titlebar-drag-spacer { @@ -95,6 +96,8 @@ body { justify-content: center; cursor: pointer; transition: all 0.15s ease; + -webkit-app-region: no-drag !important; + flex-shrink: 0; } .btn-icon:hover { diff --git a/src/renderer/css/sidebar.css b/src/renderer/css/sidebar.css index 04ea2b0..61a6a6a 100644 --- a/src/renderer/css/sidebar.css +++ b/src/renderer/css/sidebar.css @@ -370,3 +370,59 @@ .btn-secondary:hover { background: var(--bg-tab-hover); } + +/* 顶部栏切换按钮高亮 */ +.btn-toggle-sidebar { + -webkit-app-region: no-drag !important; + flex-shrink: 0; + cursor: pointer; + position: relative; + z-index: 10; +} + +.btn-toggle-sidebar.active { + color: var(--accent-color); + background: var(--btn-hover, rgba(255, 255, 255, 0.08)); +} + +/* 侧边栏折叠时的浮动快捷呼出按钮 */ +.sidebar-floating-toggle { + display: none; + position: absolute; + top: 10px; + left: 10px; + z-index: 35; + background: var(--bg-titlebar); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-sm); + color: var(--text-muted); + font-size: 11px; + padding: 4px 10px; + cursor: pointer; + align-items: center; + gap: 5px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0; + pointer-events: none; + transform: translateX(-15px); +} + +.app-body.sidebar-collapsed .sidebar-floating-toggle, +.workspace-sidebar.collapsed ~ .sidebar-floating-toggle { + display: flex; + opacity: 0.9; + pointer-events: auto; + transform: translateX(0); +} + +.sidebar-floating-toggle:hover { + opacity: 1; + background: var(--bg-tab-hover); + color: var(--accent-color); + border-color: var(--border-active); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px var(--accent-glow); +} + diff --git a/src/renderer/index.html b/src/renderer/index.html index be9f2cf..ff7bf94 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -21,7 +21,7 @@
-
+ + +
diff --git a/src/renderer/js/workspace-manager.js b/src/renderer/js/workspace-manager.js index 89c3e7e..c032652 100644 --- a/src/renderer/js/workspace-manager.js +++ b/src/renderer/js/workspace-manager.js @@ -87,6 +87,15 @@ export class WorkspaceManager { this.initEventListeners(); this.renderSidebar(); + const toggleBtn = document.getElementById('btn-toggle-sidebar'); + if (toggleBtn) { + toggleBtn.classList.toggle('active', !this.isCollapsed); + } + const appBody = document.querySelector('.app-body'); + if (appBody && this.isCollapsed) { + appBody.classList.add('sidebar-collapsed'); + } + // 订阅标签页状态变更,以便实时刷新侧边栏标签列表 this.tabManager.onTabListChange = () => { this.renderSidebar(); @@ -135,14 +144,22 @@ export class WorkspaceManager { initEventListeners() { // 侧边栏折叠/展开按钮 - document.getElementById('btn-toggle-sidebar')?.addEventListener('click', () => { + document.getElementById('btn-toggle-sidebar')?.addEventListener('click', (e) => { + e.stopPropagation(); this.toggleSidebar(); }); - document.getElementById('btn-collapse-sidebar')?.addEventListener('click', () => { + document.getElementById('btn-collapse-sidebar')?.addEventListener('click', (e) => { + e.stopPropagation(); this.setCollapsed(true); }); + // 浮动快捷呼出按钮 + document.getElementById('sidebar-floating-toggle')?.addEventListener('click', (e) => { + e.stopPropagation(); + this.setCollapsed(false); + }); + // 新建工作区按钮 document.getElementById('btn-add-workspace')?.addEventListener('click', () => { this.openCreateModal(); @@ -181,6 +198,14 @@ export class WorkspaceManager { if (this.sidebar) { this.sidebar.classList.toggle('collapsed', collapsed); } + const appBody = document.querySelector('.app-body'); + if (appBody) { + appBody.classList.toggle('sidebar-collapsed', collapsed); + } + const toggleBtn = document.getElementById('btn-toggle-sidebar'); + if (toggleBtn) { + toggleBtn.classList.toggle('active', !collapsed); + } this.saveWorkspaces(); // 触发当前终端自适应尺寸