style: 优化剧集阅读吸顶标题
This commit is contained in:
@@ -135,12 +135,6 @@ function exportScript() {
|
|||||||
]"
|
]"
|
||||||
@select="$event === 'history' ? (showHistory = !showHistory) : exportScript()"
|
@select="$event === 'history' ? (showHistory = !showHistory) : exportScript()"
|
||||||
/>
|
/>
|
||||||
<RouterLink
|
|
||||||
v-if="complete"
|
|
||||||
class="text-button text-accent script-next-link"
|
|
||||||
:to="`/projects/${project?.id}/breakdown`"
|
|
||||||
>进入拆解<ArrowRight :size="14"
|
|
||||||
/></RouterLink>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</NTabs>
|
</NTabs>
|
||||||
@@ -304,9 +298,6 @@ function exportScript() {
|
|||||||
.script-section .tabs-toolbar-actions {
|
.script-section .tabs-toolbar-actions {
|
||||||
@apply min-h-0 flex-nowrap;
|
@apply min-h-0 flex-nowrap;
|
||||||
}
|
}
|
||||||
.script-section .tabs-toolbar-actions .script-next-link {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
.script-section .content-with-history:not(.history-hidden) {
|
.script-section .content-with-history:not(.history-hidden) {
|
||||||
@apply relative;
|
@apply relative;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
|||||||
@@ -229,6 +229,7 @@ onBeforeUnmount(() => observer?.disconnect())
|
|||||||
@apply outline-[2px_solid_var(--app-accent)] outline-offset-[-3px];
|
@apply outline-[2px_solid_var(--app-accent)] outline-offset-[-3px];
|
||||||
}
|
}
|
||||||
.reader-content {
|
.reader-content {
|
||||||
|
--reader-gutter: 32px;
|
||||||
@apply mx-0 p-8 text-left;
|
@apply mx-0 p-8 text-left;
|
||||||
/* 正文紧邻目录左对齐,保留阅读行宽,不在宽屏内容区居中。 */
|
/* 正文紧邻目录左对齐,保留阅读行宽,不在宽屏内容区居中。 */
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
@@ -241,7 +242,9 @@ onBeforeUnmount(() => observer?.disconnect())
|
|||||||
min-height: max(160px, calc(var(--reader-height) - 64px));
|
min-height: max(160px, calc(var(--reader-height) - 64px));
|
||||||
}
|
}
|
||||||
.reader-chapter-heading {
|
.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 {
|
.reader-chapter-heading p {
|
||||||
@apply text-muted text-[13px] font-medium mb-2.5;
|
@apply text-muted text-[13px] font-medium mb-2.5;
|
||||||
@@ -277,6 +280,7 @@ onBeforeUnmount(() => observer?.disconnect())
|
|||||||
@apply text-[11px];
|
@apply text-[11px];
|
||||||
}
|
}
|
||||||
.reader-content {
|
.reader-content {
|
||||||
|
--reader-gutter: 18px;
|
||||||
@apply px-[18px];
|
@apply px-[18px];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -71,7 +71,14 @@ describe('连续剧本阅读器', () => {
|
|||||||
expect(content).toContain('padding: 32px')
|
expect(content).toContain('padding: 32px')
|
||||||
expect(content).toContain('text-align: left')
|
expect(content).toContain('text-align: left')
|
||||||
expect(content).not.toContain('auto')
|
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/)
|
expect(css).toMatch(/@media \(max-width: 800px\)[\s\S]*?\.episode-reader\s*\{[^}]*72px/)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ import {
|
|||||||
} from '@/features/storyboard/testing/fixtures'
|
} from '@/features/storyboard/testing/fixtures'
|
||||||
import { getStoryboardSession } from '@/features/storyboard/model'
|
import { getStoryboardSession } from '@/features/storyboard/model'
|
||||||
import { getOperation } from '@/features/workflows/operations'
|
import { getOperation } from '@/features/workflows/operations'
|
||||||
import { readAllStyles } from '@/testing/styles'
|
|
||||||
import SubjectImagesPage from '@/features/subject-images/SubjectImagesPage.vue'
|
import SubjectImagesPage from '@/features/subject-images/SubjectImagesPage.vue'
|
||||||
import { formFixture, imageFixture } from '@/features/subject-images/testing/fixtures'
|
import { formFixture, imageFixture } from '@/features/subject-images/testing/fixtures'
|
||||||
import { getImageSession } from '@/features/subject-images/model'
|
import { getImageSession } from '@/features/subject-images/model'
|
||||||
@@ -1452,9 +1451,6 @@ describe('工作台页面交互', () => {
|
|||||||
wrapper = mount(CreateProjectDialog, { attachTo: document.body })
|
wrapper = mount(CreateProjectDialog, { attachTo: document.body })
|
||||||
button('新建剧本').click()
|
button('新建剧本').click()
|
||||||
await flushPromises()
|
await flushPromises()
|
||||||
const title = document.querySelector<HTMLInputElement>('#title')!
|
|
||||||
title.value = ' 记忆当铺 '
|
|
||||||
title.dispatchEvent(new Event('input', { bubbles: true }))
|
|
||||||
const topic = document.querySelector<HTMLTextAreaElement>('#topic')!
|
const topic = document.querySelector<HTMLTextAreaElement>('#topic')!
|
||||||
topic.value = ' 雨夜来信 '
|
topic.value = ' 雨夜来信 '
|
||||||
topic.dispatchEvent(new Event('input', { bubbles: true }))
|
topic.dispatchEvent(new Event('input', { bubbles: true }))
|
||||||
@@ -1465,7 +1461,6 @@ describe('工作台页面交互', () => {
|
|||||||
await flushPromises()
|
await flushPromises()
|
||||||
expect(wrapper.emitted('created')).toEqual([['created']])
|
expect(wrapper.emitted('created')).toEqual([['created']])
|
||||||
expect(JSON.parse(fetcher.mock.calls[0]![1]!.body as string)).toEqual({
|
expect(JSON.parse(fetcher.mock.calls[0]![1]!.body as string)).toEqual({
|
||||||
title: '记忆当铺',
|
|
||||||
topic: '雨夜来信',
|
topic: '雨夜来信',
|
||||||
style: '',
|
style: '',
|
||||||
episodeCount: 6
|
episodeCount: 6
|
||||||
@@ -1504,13 +1499,6 @@ describe('工作台页面交互', () => {
|
|||||||
expect(provided.refresh).toHaveBeenCalledOnce()
|
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 () => {
|
it('切换剧本标签保留阅读容器和位置,执行记录按需展开', async () => {
|
||||||
wrapper = mount(CreateDramaPage, {
|
wrapper = mount(CreateDramaPage, {
|
||||||
attachTo: document.body,
|
attachTo: document.body,
|
||||||
@@ -1518,7 +1506,8 @@ describe('工作台页面交互', () => {
|
|||||||
})
|
})
|
||||||
const suffix = wrapper.get('.script-section .n-tabs-nav__suffix')
|
const suffix = wrapper.get('.script-section .n-tabs-nav__suffix')
|
||||||
expect(suffix.findAll('button').map(item => item.attributes('aria-label'))).toEqual(['剧本更多操作'])
|
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<HTMLElement>('.reader-scroll .n-scrollbar-container').element
|
const reader = wrapper.get<HTMLElement>('.reader-scroll .n-scrollbar-container').element
|
||||||
reader.scrollTop = 120
|
reader.scrollTop = 120
|
||||||
expect(wrapper.find('.history-panel').exists()).toBe(false)
|
expect(wrapper.find('.history-panel').exists()).toBe(false)
|
||||||
|
|||||||
Reference in New Issue
Block a user