style: 将工作区操作移入标签页后缀并增强浅色分隔线

This commit is contained in:
GouJ
2026-09-02 09:49:22 +08:00
parent 2ddd9b8009
commit 4229426339
10 changed files with 112 additions and 44 deletions
+51 -15
View File
@@ -431,11 +431,6 @@ body {
.script-section > :first-child {
flex-shrink: 0;
}
.script-section > :first-child .n-tabs {
flex: 1;
min-width: 220px;
width: auto;
}
.script-section .content-with-history {
flex: 1;
height: auto;
@@ -724,20 +719,61 @@ body {
outline: 2px solid var(--app-accent);
outline-offset: -2px;
}
/* Tabs 的默认整行宽度限制在左侧网格内,导出按钮始终处于同一行右端。 */
.result-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
}
.result-toolbar > .n-tabs {
/* 标签与操作由同一 NTabs 导航行管理,suffix 共享底线及垂直中心。 */
.tabs-toolbar {
container: tabs-toolbar / inline-size;
width: 100%;
min-width: 0;
}
.result-toolbar > .n-button {
justify-self: end;
.workspace-tabs.n-tabs {
width: 100%;
min-width: 0;
}
.workspace-tabs > .n-tabs-nav {
align-items: stretch;
}
.workspace-tabs .n-tabs-tab {
min-height: 40px;
box-sizing: border-box;
}
.workspace-tabs .n-tabs-nav-scroll-wrapper {
min-width: 0;
}
.workspace-tabs .n-tabs-nav__suffix {
align-items: center;
flex-shrink: 0;
padding-left: 20px;
}
.tabs-toolbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 4px 14px;
min-height: 40px;
}
.tabs-toolbar-actions .n-button,
.tabs-toolbar-actions .text-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
white-space: nowrap;
}
/* 窄内容区允许 suffix 独占一行;Tabs 本身继续使用组件内置横向滚动。 */
@container tabs-toolbar (max-width: 600px) {
.workspace-tabs > .n-tabs-nav {
flex-wrap: wrap;
}
.workspace-tabs .n-tabs-nav-scroll-wrapper {
flex-basis: 100%;
}
.workspace-tabs .n-tabs-nav__suffix {
width: 100%;
justify-content: flex-end;
padding-left: 0;
}
}
.result-toolbar .n-tabs-tab__label {
display: inline-flex;
gap: 6px;