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:
@@ -3,8 +3,7 @@
|
||||
* 包含命令行和文件两个 Tab
|
||||
*/
|
||||
|
||||
import { logInfo, logError, logDebug, logWarn } from '../services/log-service.js';
|
||||
import type { WorkspaceFileEntry } from '../types.js';
|
||||
import { logInfo, logError, logDebug } from '../services/log-service.js';
|
||||
|
||||
// ── 状态 ──
|
||||
interface TerminalSession {
|
||||
@@ -473,8 +472,12 @@ export function renderPanel(): void {
|
||||
const termTab = document.querySelector('#wsTabTerminal') as HTMLElement;
|
||||
const filesTab = document.querySelector('#wsTabFiles') as HTMLElement;
|
||||
|
||||
if (termTab) termTab.classList.toggle('active', activeTab === 'terminal');
|
||||
if (filesTab) filesTab.classList.toggle('active', activeTab === 'files');
|
||||
if (termTab) {
|
||||
termTab.classList.toggle('active', activeTab === 'terminal');
|
||||
}
|
||||
if (filesTab) {
|
||||
filesTab.classList.toggle('active', activeTab === 'files');
|
||||
}
|
||||
|
||||
const termContent = document.querySelector('#wsTerminalContent') as HTMLElement;
|
||||
const filesContent = document.querySelector('#wsFilesContent') as HTMLElement;
|
||||
|
||||
@@ -175,12 +175,12 @@
|
||||
|
||||
<!-- ═══════════════ 工作空间面板(右侧)═══════════════ -->
|
||||
<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">
|
||||
<span class="ws-title">🖥️ 工作空间</span>
|
||||
<div class="ws-tabs">
|
||||
<button class="ws-tab active" id="wsTabTerminal">💻 命令行</button>
|
||||
<button class="ws-tab" id="wsTabFiles">📁 文件</button>
|
||||
<button class="ws-header-tab active" id="wsTabTerminal">💻 命令行</button>
|
||||
<button class="ws-header-tab" id="wsTabFiles">📁 文件</button>
|
||||
</div>
|
||||
<button class="icon-btn ws-toggle-btn" id="btnWorkspaceClose" title="收起面板">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
|
||||
@@ -2715,7 +2715,7 @@ html, body {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ws-tab {
|
||||
.ws-header-tab {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary, #999);
|
||||
@@ -2727,12 +2727,12 @@ html, body {
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.ws-tab:hover {
|
||||
.ws-header-tab:hover {
|
||||
background: var(--bg-card-hover, #323232);
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
|
||||
.ws-tab.active {
|
||||
.ws-header-tab.active {
|
||||
background: var(--bg-layer, #383838);
|
||||
color: var(--accent, #60CDFF);
|
||||
border-color: var(--border-strong, rgba(255,255,255,0.12));
|
||||
@@ -2763,18 +2763,30 @@ html, body {
|
||||
}
|
||||
|
||||
.ws-term-tab-bar .ws-tab {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-secondary, #999);
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
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 {
|
||||
background: var(--bg-solid, #202020);
|
||||
color: var(--accent, #60CDFF);
|
||||
border-color: var(--border-default, rgba(255,255,255,0.08));
|
||||
border-bottom: 1px solid var(--bg-solid, #202020);
|
||||
}
|
||||
@@ -2914,6 +2926,11 @@ html, body {
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.08));
|
||||
background: var(--bg-layer-alt, #2a2a2a);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.ws-file-toolbar .ws-toolbar-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ws-file-path {
|
||||
|
||||
Reference in New Issue
Block a user