fix: 修复工作空间面板协调性问题

- 头部 Tab 改用 ws-header-tab class,与终端 Tab 的 ws-tab 解除冲突
- 终端 Tab bar 补充完整基础样式(background、border、cursor、transition)
- 补充 .ws-file-toolbar 的 min-height 和按钮 flex-shrink
- 移除未使用的 WorkspaceFileEntry、logWarn import
- resizer 添加 title 提示
This commit is contained in:
thzxx
2026-04-07 18:35:26 +08:00
parent 0e1f216aa4
commit 46c9595f26
3 changed files with 30 additions and 10 deletions
+7 -4
View File
@@ -3,8 +3,7 @@
* 包含命令行和文件两个 Tab * 包含命令行和文件两个 Tab
*/ */
import { logInfo, logError, logDebug, logWarn } from '../services/log-service.js'; import { logInfo, logError, logDebug } from '../services/log-service.js';
import type { WorkspaceFileEntry } from '../types.js';
// ── 状态 ── // ── 状态 ──
interface TerminalSession { interface TerminalSession {
@@ -473,8 +472,12 @@ export function renderPanel(): void {
const termTab = document.querySelector('#wsTabTerminal') as HTMLElement; const termTab = document.querySelector('#wsTabTerminal') as HTMLElement;
const filesTab = document.querySelector('#wsTabFiles') as HTMLElement; const filesTab = document.querySelector('#wsTabFiles') as HTMLElement;
if (termTab) termTab.classList.toggle('active', activeTab === 'terminal'); if (termTab) {
if (filesTab) filesTab.classList.toggle('active', activeTab === 'files'); termTab.classList.toggle('active', activeTab === 'terminal');
}
if (filesTab) {
filesTab.classList.toggle('active', activeTab === 'files');
}
const termContent = document.querySelector('#wsTerminalContent') as HTMLElement; const termContent = document.querySelector('#wsTerminalContent') as HTMLElement;
const filesContent = document.querySelector('#wsFilesContent') as HTMLElement; const filesContent = document.querySelector('#wsFilesContent') as HTMLElement;
+3 -3
View File
@@ -175,12 +175,12 @@
<!-- ═══════════════ 工作空间面板(右侧)═══════════════ --> <!-- ═══════════════ 工作空间面板(右侧)═══════════════ -->
<aside class="workspace-panel" id="workspacePanel" style="display:none;"> <aside class="workspace-panel" id="workspacePanel" style="display:none;">
<div class="ws-resizer" id="wsResizer"></div> <div class="ws-resizer" id="wsResizer" title="拖拽调整宽度"></div>
<div class="ws-header"> <div class="ws-header">
<span class="ws-title">🖥️ 工作空间</span> <span class="ws-title">🖥️ 工作空间</span>
<div class="ws-tabs"> <div class="ws-tabs">
<button class="ws-tab active" id="wsTabTerminal">💻 命令行</button> <button class="ws-header-tab active" id="wsTabTerminal">💻 命令行</button>
<button class="ws-tab" id="wsTabFiles">📁 文件</button> <button class="ws-header-tab" id="wsTabFiles">📁 文件</button>
</div> </div>
<button class="icon-btn ws-toggle-btn" id="btnWorkspaceClose" title="收起面板"> <button class="icon-btn ws-toggle-btn" id="btnWorkspaceClose" title="收起面板">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+20 -3
View File
@@ -2715,7 +2715,7 @@ html, body {
margin-left: auto; margin-left: auto;
} }
.ws-tab { .ws-header-tab {
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
color: var(--text-secondary, #999); color: var(--text-secondary, #999);
@@ -2727,12 +2727,12 @@ html, body {
transition: all 0.15s; transition: all 0.15s;
} }
.ws-tab:hover { .ws-header-tab:hover {
background: var(--bg-card-hover, #323232); background: var(--bg-card-hover, #323232);
color: var(--text-primary, #fff); color: var(--text-primary, #fff);
} }
.ws-tab.active { .ws-header-tab.active {
background: var(--bg-layer, #383838); background: var(--bg-layer, #383838);
color: var(--accent, #60CDFF); color: var(--accent, #60CDFF);
border-color: var(--border-strong, rgba(255,255,255,0.12)); border-color: var(--border-strong, rgba(255,255,255,0.12));
@@ -2763,18 +2763,30 @@ html, body {
} }
.ws-term-tab-bar .ws-tab { .ws-term-tab-bar .ws-tab {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary, #999);
font-size: 11px; font-size: 11px;
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
border-bottom: none; border-bottom: none;
cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.15s;
font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}
.ws-term-tab-bar .ws-tab:hover {
background: var(--bg-card-hover, #323232);
color: var(--text-primary, #fff);
} }
.ws-term-tab-bar .ws-tab.active { .ws-term-tab-bar .ws-tab.active {
background: var(--bg-solid, #202020); background: var(--bg-solid, #202020);
color: var(--accent, #60CDFF);
border-color: var(--border-default, rgba(255,255,255,0.08)); border-color: var(--border-default, rgba(255,255,255,0.08));
border-bottom: 1px solid var(--bg-solid, #202020); border-bottom: 1px solid var(--bg-solid, #202020);
} }
@@ -2914,6 +2926,11 @@ html, body {
padding: 6px 8px; padding: 6px 8px;
border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08)); border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08));
background: var(--bg-layer-alt, #2a2a2a); background: var(--bg-layer-alt, #2a2a2a);
min-height: 36px;
}
.ws-file-toolbar .ws-toolbar-btn {
flex-shrink: 0;
} }
.ws-file-path { .ws-file-path {