diff --git a/src/admin.css b/src/admin.css index 883931c..365d942 100644 --- a/src/admin.css +++ b/src/admin.css @@ -710,9 +710,11 @@ body { outline-offset: -3px; } .reader-content { + /* 正文紧邻目录左对齐,保留阅读行宽,不在宽屏内容区居中。 */ max-width: 900px; - margin-inline: auto; - padding: 32px clamp(24px, 5cqw, 64px); + margin-inline: 0; + padding: 32px; + text-align: left; } .reader-chapter + .reader-chapter { margin-top: 48px; diff --git a/src/features/create-drama/EpisodeReader.test.ts b/src/features/create-drama/EpisodeReader.test.ts index cb1ac26..27aa2ab 100644 --- a/src/features/create-drama/EpisodeReader.test.ts +++ b/src/features/create-drama/EpisodeReader.test.ts @@ -1,6 +1,7 @@ import { mount, type VueWrapper } from '@vue/test-utils' import { nextTick } from 'vue' import { afterEach, describe, expect, it, vi } from 'vitest' +import { readFileSync } from 'node:fs' import EpisodeReader from './EpisodeReader.vue' import type { Episode } from '../projects/types' @@ -61,6 +62,18 @@ function currentEpisode() { } describe('连续剧本阅读器', () => { + it('正文容器靠左并保留目录间距,宽屏不再使用自动外边距居中', () => { + // DOM 测试不计算布局;保护正文定位样式,目录联动仍由后续交互测试验证。 + const css = readFileSync('src/admin.css', 'utf8') + const content = css.match(/\.reader-content\s*\{([^}]+)\}/)![1]! + expect(content).toContain('max-width: 900px') + expect(content).toContain('margin-inline: 0') + expect(content).toContain('padding: 32px') + expect(content).toContain('text-align: left') + expect(content).not.toContain('auto') + expect(css).toMatch(/@media \(max-width: 600px\)[\s\S]*?\.reader-content\s*\{\s*padding-inline:\s*18px/) + }) + it('按编号连续渲染全部剧集、元数据和空正文,标题不截断,模型内容只按文本显示', () => { const reversed = episodes.toReversed() wrapper = mount(EpisodeReader, { props: { episodes: reversed } })