From 65e8f9c3ba755a707d5c385b18b8fb82802c4934 Mon Sep 17 00:00:00 2001 From: GouJ Date: Tue, 22 Sep 2026 19:29:27 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=89=A7=E9=9B=86?= =?UTF-8?q?=E9=98=85=E8=AF=BB=E5=90=B8=E9=A1=B6=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/create-drama/CreateDramaPage.vue | 9 --------- src/features/create-drama/EpisodeReader.vue | 6 +++++- tests/features/create-drama/EpisodeReader.test.ts | 9 ++++++++- tests/features/workflows/pages.test.ts | 15 ++------------- 4 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/features/create-drama/CreateDramaPage.vue b/src/features/create-drama/CreateDramaPage.vue index a0703ec..963f835 100644 --- a/src/features/create-drama/CreateDramaPage.vue +++ b/src/features/create-drama/CreateDramaPage.vue @@ -135,12 +135,6 @@ function exportScript() { ]" @select="$event === 'history' ? (showHistory = !showHistory) : exportScript()" /> - 进入拆解 @@ -304,9 +298,6 @@ function exportScript() { .script-section .tabs-toolbar-actions { @apply min-h-0 flex-nowrap; } - .script-section .tabs-toolbar-actions .script-next-link { - @apply hidden; - } .script-section .content-with-history:not(.history-hidden) { @apply relative; grid-template-columns: minmax(0, 1fr); diff --git a/src/features/create-drama/EpisodeReader.vue b/src/features/create-drama/EpisodeReader.vue index 8a82c79..76086ed 100644 --- a/src/features/create-drama/EpisodeReader.vue +++ b/src/features/create-drama/EpisodeReader.vue @@ -229,6 +229,7 @@ onBeforeUnmount(() => observer?.disconnect()) @apply outline-[2px_solid_var(--app-accent)] outline-offset-[-3px]; } .reader-content { + --reader-gutter: 32px; @apply mx-0 p-8 text-left; /* 正文紧邻目录左对齐，保留阅读行宽，不在宽屏内容区居中。 */ max-width: 900px; @@ -241,7 +242,9 @@ onBeforeUnmount(() => observer?.disconnect()) min-height: max(160px, calc(var(--reader-height) - 64px)); } .reader-chapter-heading { - @apply mb-6; + @apply sticky top-0 z-[2] mb-6 bg-(--app-surface); + margin-inline: calc(var(--reader-gutter) * -1); + padding: 14px var(--reader-gutter) 18px; } .reader-chapter-heading p { @apply text-muted text-[13px] font-medium mb-2.5; @@ -277,6 +280,7 @@ onBeforeUnmount(() => observer?.disconnect()) @apply text-[11px]; } .reader-content { + --reader-gutter: 18px; @apply px-[18px]; } } diff --git a/tests/features/create-drama/EpisodeReader.test.ts b/tests/features/create-drama/EpisodeReader.test.ts index a27ad9d..af87509 100644 --- a/tests/features/create-drama/EpisodeReader.test.ts +++ b/tests/features/create-drama/EpisodeReader.test.ts @@ -71,7 +71,14 @@ describe('连续剧本阅读器', () => { expect(content).toContain('padding: 32px') expect(content).toContain('text-align: left') expect(content).not.toContain('auto') - expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.reader-content\s*\{\s*padding-inline:\s*18px/) + expect(css).toMatch( + /\.reader-chapter-heading\s*\{[^}]*position:\s*sticky;[^}]*top:\s*0;[^}]*z-index:\s*2;[^}]*background:\s*var\(--app-surface\)/ + ) + expect(css).toMatch( + /\.reader-chapter-heading\s*\{[^}]*margin-inline:\s*calc\(var\(--reader-gutter\) \* -1\);[^}]*padding:\s*14px var\(--reader-gutter\) 18px;/ + ) + expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.reader-content\s*\{[^}]*padding-inline:\s*18px/) + expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.reader-content\s*\{[^}]*--reader-gutter:\s*18px/) expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.episode-reader\s*\{[^}]*72px/) }) diff --git a/tests/features/workflows/pages.test.ts b/tests/features/workflows/pages.test.ts index e946db5..1b0539e 100644 --- a/tests/features/workflows/pages.test.ts +++ b/tests/features/workflows/pages.test.ts @@ -21,7 +21,6 @@ import { } from '@/features/storyboard/testing/fixtures' import { getStoryboardSession } from '@/features/storyboard/model' import { getOperation } from '@/features/workflows/operations' -import { readAllStyles } from '@/testing/styles' import SubjectImagesPage from '@/features/subject-images/SubjectImagesPage.vue' import { formFixture, imageFixture } from '@/features/subject-images/testing/fixtures' import { getImageSession } from '@/features/subject-images/model' @@ -1452,9 +1451,6 @@ describe('工作台页面交互', () => { wrapper = mount(CreateProjectDialog, { attachTo: document.body }) button('新建剧本').click() await flushPromises() - const title = document.querySelector('#title')! - title.value = ' 记忆当铺 ' - title.dispatchEvent(new Event('input', { bubbles: true })) const topic = document.querySelector('#topic')! topic.value = ' 雨夜来信 ' topic.dispatchEvent(new Event('input', { bubbles: true })) @@ -1465,7 +1461,6 @@ describe('工作台页面交互', () => { await flushPromises() expect(wrapper.emitted('created')).toEqual([['created']]) expect(JSON.parse(fetcher.mock.calls[0]![1]!.body as string)).toEqual({ - title: '记忆当铺', topic: '雨夜来信', style: '', episodeCount: 6 @@ -1504,13 +1499,6 @@ describe('工作台页面交互', () => { expect(provided.refresh).toHaveBeenCalledOnce() }) - it('窄屏隐藏进入拆解，选择器需压过工具栏文字按钮', () => { - const css = readAllStyles() - expect(css).toMatch( - /@media \(max-width: 800px\)[\s\S]*?\.tabs-toolbar-actions \.script-next-link\s*\{[^}]*display:\s*none/ - ) - }) - it('切换剧本标签保留阅读容器和位置，执行记录按需展开', async () => { wrapper = mount(CreateDramaPage, { attachTo: document.body, @@ -1518,7 +1506,8 @@ describe('工作台页面交互', () => { }) const suffix = wrapper.get('.script-section .n-tabs-nav__suffix') expect(suffix.findAll('button').map(item => item.attributes('aria-label'))).toEqual(['剧本更多操作']) - expect(suffix.get('router-link-stub').attributes('to')).toBe(`/projects/${fixture.id}/breakdown`) + expect(suffix.find('router-link-stub').exists()).toBe(false) + expect(suffix.text()).not.toContain('进入拆解') const reader = wrapper.get('.reader-scroll .n-scrollbar-container').element reader.scrollTop = 120 expect(wrapper.find('.history-panel').exists()).toBe(false)