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

2026-09-02 09:49:22 +08:00
parent 2ddd9b8009
commit 4229426339
10 changed files with 112 additions and 44 deletions
@@ -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;
@@ -86,9 +86,10 @@ describe('统一目录条目', () => {
        expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
    })

-    it('导出工具栏与筛选器使用受约束的网格，不让 Tabs 和 Select 默认宽度强制换行', () => {
+    it('Tabs 工具栏与筛选网格限制最小宽度，不让组件默认宽度挤压内容', () => {
        const css = readFileSync('src/admin.css', 'utf8')
-        expect(css).toMatch(/\.result-toolbar\s*\{[^}]*grid-template-columns:\s*minmax\(0, 1fr\) auto/)
+        expect(css).toMatch(/\.workspace-tabs\.n-tabs\s*\{[^}]*width:\s*100%;[^}]*min-width:\s*0/)
+        expect(css).toMatch(/\.workspace-tabs \.n-tabs-nav-scroll-wrapper\s*\{[^}]*min-width:\s*0/)
        expect(css).toMatch(
            /\.form-image-filters\s*\{[^}]*grid-template-columns:\s*minmax\(200px, 360px\) 152px minmax\(260px, 1fr\) auto/
        )
@@ -119,7 +119,7 @@ describe('全站平面主题', () => {
        expect(theme.common?.borderColor).not.toBe('transparent')
        expect(theme.Checkbox).not.toHaveProperty('border')
        expect(theme.Tabs?.barColor).toBe('#07c160')
-        expect(value('.n-tabs', '--n-tab-border-color')).toBe(dark ? '#333333' : '#e5e5e5')
+        expect(value('.n-tabs', '--n-tab-border-color')).toBe(dark ? '#333333' : '#bfbfbf')
    })

    it('单图标按钮以当前控件高度为边长，尺寸与内容按钮互不影响', () => {
@@ -22,6 +22,16 @@ afterEach(() => {
 })

 describe('管理后台组件边界', () => {
+    it('Tabs suffix 与标签共用导航行，窄屏换行但不产生外层滚动', () => {
+        // DOM 测试不计算坐标；保护对齐尺寸与容器断点，视觉验收仍需浏览器。
+        const css = readFileSync('src/admin.css', 'utf8')
+        expect(css).toMatch(/\.workspace-tabs > \.n-tabs-nav\s*\{[^}]*align-items:\s*stretch;/)
+        expect(css).toMatch(/\.workspace-tabs \.n-tabs-nav__suffix\s*\{[^}]*align-items:\s*center;/)
+        expect(css).toMatch(/\.tabs-toolbar-actions\s*\{[^}]*align-items:\s*center;[^}]*min-height:\s*40px;/)
+        expect(css).toContain('@container tabs-toolbar (max-width: 600px)')
+        expect(css).not.toContain('.result-toolbar > .n-button')
+    })
+
    it('滚动边界样式包含 document 锁定和工作区收缩约束', () => {
        // happy-dom 不计算视口几何；这里只保护 CSS 契约，真实滚动仍需浏览器验收。
        const adminCss = readFileSync('src/admin.css', 'utf8')
@@ -47,6 +47,15 @@ function contrast(foreground: string, background: string) {
 }

 describe('微信风格明暗主题', () => {
+    it('浅色 Tabs 分隔线与页面、内容表面保持可辨识的灰阶差异', () => {
+        const { overrides } = setup()
+        const color = overrides.value.Tabs!.tabBorderColor!
+        if (typeof color !== 'string') throw new Error('Tabs 分隔线颜色必须为字符串')
+        expect(color).toBe('#bfbfbf')
+        expect(contrast(color, '#ededed')).toBeGreaterThan(1.5)
+        expect(contrast(color, '#ffffff')).toBeGreaterThan(1.5)
+    })
+
    it('默认跟随系统并实时响应，销毁时移除监听', async () => {
        const state = setup()
        expect(state.preference.value).toBe('system')
@@ -216,7 +216,7 @@ export function useTheme() {
                tabTextColorHoverLine: accentText,
                barColor: primary,
                // Tabs 保留横向分隔线，明确导航与内容边界；选中下划线仍使用主绿色。
-                tabBorderColor: dark ? '#333333' : '#e5e5e5'
+                tabBorderColor: dark ? '#333333' : '#bfbfbf'
            },
            Tag: {
                textColorPrimary: accentText,
@@ -382,15 +382,20 @@ function exportResult() {
                </NAlert>
            </NScrollbar>
            <section class="breakdown-results-section">
-                <div class="result-toolbar">
-                    <NTabs v-model:value="tab" type="line" size="small" aria-label="拆解结果"
+                <div class="result-toolbar tabs-toolbar">
+                    <NTabs v-model:value="tab" class="workspace-tabs" type="line" size="small" aria-label="拆解结果"
                        ><NTab v-for="option in moduleOptions" :key="option.value" :name="option.value"
                            >{{ option.label
                            }}<span>{{ subjects.filter(item => item.module === option.value).length }}</span></NTab
-                        ><NTab name="storyboard">分镜</NTab><NTab name="tasks">任务明细</NTab></NTabs
-                    ><NButton :disabled="!snapshot" @click="exportResult" text size="small"
-                        ><Download :size="14" />导出 JSON
-                    </NButton>
+                        ><NTab name="storyboard">分镜</NTab><NTab name="tasks">任务明细</NTab>
+                        <template #suffix
+                            ><div class="tabs-toolbar-actions">
+                                <NButton :disabled="!snapshot" @click="exportResult" text size="small"
+                                    ><Download :size="14" />导出 JSON
+                                </NButton>
+                            </div></template
+                        >
+                    </NTabs>
                </div>
                <div class="content-with-history panel">
                    <main class="min-w-0">
@@ -115,26 +115,28 @@ function exportScript() {
            class="mt-4"
        ></NProgress>
        <div class="script-section">
-            <div class="flex flex-wrap items-center justify-between gap-3">
-                <NTabs v-model:value="tab" type="line" size="small" aria-label="剧本内容"
+            <div class="tabs-toolbar">
+                <NTabs v-model:value="tab" class="workspace-tabs" type="line" size="small" aria-label="剧本内容"
                    ><NTab name="episodes"
                        >剧集正文 <span>{{ episodes.length }}</span></NTab
                    ><NTab name="characters">角色设定</NTab><NTab name="world">世界观</NTab
-                    ><NTab name="review">审核记录</NTab></NTabs
-                >
-                <div class="flex items-center gap-3">
-                    <NButton text size="small" :aria-expanded="showHistory" @click="showHistory = !showHistory"
-                        ><History :size="14" />{{ showHistory ? '收起执行记录' : '执行记录' }}</NButton
-                    >
-                    <NButton :disabled="!episodes.length" @click="exportScript" text size="small"
-                        ><Download :size="14" />导出剧本</NButton
-                    ><RouterLink
-                        v-if="complete"
-                        class="text-button text-accent"
-                        :to="`/projects/${project?.id}/breakdown`"
-                        >进入拆解<ArrowRight :size="14"
-                    /></RouterLink>
-                </div>
+                    ><NTab name="review">审核记录</NTab>
+                    <template #suffix>
+                        <div class="tabs-toolbar-actions">
+                            <NButton text size="small" :aria-expanded="showHistory" @click="showHistory = !showHistory"
+                                ><History :size="14" />{{ showHistory ? '收起执行记录' : '执行记录' }}</NButton
+                            >
+                            <NButton :disabled="!episodes.length" @click="exportScript" text size="small"
+                                ><Download :size="14" />导出剧本</NButton
+                            ><RouterLink
+                                v-if="complete"
+                                class="text-button text-accent"
+                                :to="`/projects/${project?.id}/breakdown`"
+                                >进入拆解<ArrowRight :size="14"
+                            /></RouterLink>
+                        </div>
+                    </template>
+                </NTabs>
            </div>
            <div class="content-with-history panel mt-4" :class="{ 'history-hidden': !showHistory }">
                <main class="min-w-0">
@@ -829,14 +829,15 @@ describe('工作台页面交互', () => {
        expect(fetcher.mock.calls.every(([, init]) => init?.method === 'GET')).toBe(true)
    })

-    it('拆解导出按钮紧邻标签栏且保持空快照禁用状态', () => {
+    it('拆解导出按钮位于 Tabs suffix，且保持空快照禁用状态', () => {
        wrapper = mount(BreakdownPage, {
            attachTo: document.body,
            global: { provide: { [projectContextKey as symbol]: context() }, stubs: { RouterLink: true } }
        })
        const toolbar = wrapper.get('.result-toolbar')
        expect(toolbar.find('[aria-label="拆解结果"]').exists()).toBe(true)
-        const exportButton = toolbar.get<HTMLButtonElement>(':scope > button')
+        expect(toolbar.find(':scope > button').exists()).toBe(false)
+        const exportButton = toolbar.get<HTMLButtonElement>('.n-tabs-nav__suffix button')
        expect(exportButton.text()).toBe('导出 JSON')
        expect(exportButton.element.disabled).toBe(true)
    })
@@ -1422,6 +1423,9 @@ describe('工作台页面交互', () => {
            attachTo: document.body,
            global: { provide: { [projectContextKey as symbol]: context() }, stubs: { RouterLink: true } }
        })
+        const suffix = wrapper.get('.script-section .n-tabs-nav__suffix')
+        expect(suffix.findAll('button').map(item => item.text())).toEqual(['执行记录', '导出剧本'])
+        expect(suffix.get('router-link-stub').attributes('to')).toBe(`/projects/${fixture.id}/breakdown`)
        const reader = wrapper.get<HTMLElement>('.reader-scroll .n-scrollbar-container').element
        reader.scrollTop = 120
        expect(wrapper.find('.history-panel').exists()).toBe(false)