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
|
* 包含命令行和文件两个 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;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user