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

src/features/breakdown/BreakdownPage.vue

@@ -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">

src/features/create-drama/CreateDramaPage.vue

@@ -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">

src/features/workflows/pages.test.ts

@@ -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)