feat: 收口组件样式并调整移动端侧栏

2026-09-04 17:19:34 +08:00
parent d252d5513f
commit e6e0f08072
68 changed files with 2717 additions and 2775 deletions
@@ -0,0 +1,63 @@
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import BeatShotDirectory from '@/features/storyboard/components/BeatShotDirectory.vue'
+import { readAllStyles } from '@/testing/styles'
+import { designedShot } from '@/features/storyboard/testing/fixtures'
+
+let wrapper: VueWrapper | undefined
+afterEach(() => wrapper?.unmount())
+
+describe('Beat 两级镜头目录', () => {
+    it('按 Beat 和镜号排序，分组只出现一次并显示镜数，不改变原数组', () => {
+        const shots = [
+            { ...designedShot('b2-s1'), beatNo: 2 },
+            { ...designedShot('b1-s2'), shotNo: 2 },
+            designedShot('b1-s1')
+        ]
+        wrapper = mount(BeatShotDirectory, {
+            props: { shots, activeId: 'b1-s1', itemClass: 'shot-link' },
+            slots: { meta: '<span>设计已保存</span>' }
+        })
+        const groups = wrapper.findAll('.beat-directory-group')
+        expect(groups).toHaveLength(2)
+        expect(groups[0]!.get('h4').text()).toContain('BEAT 01')
+        expect(groups[0]!.get('.directory-group-count').text()).toBe('2 镜')
+        expect(groups[1]!.get('h4').text()).toContain('BEAT 02')
+        expect(groups[1]!.get('.directory-group-count').text()).toBe('1 镜')
+        expect(wrapper.findAll('.directory-shot-number').map(item => item.text())).toEqual([
+            '镜头 01',
+            '镜头 02',
+            '镜头 01'
+        ])
+        expect(wrapper.findAll('.directory-item-meta').every(item => item.text() === '设计已保存')).toBe(true)
+        expect(groups[0]!.attributes('aria-labelledby')).toBe(groups[0]!.get('h4').attributes('id'))
+        expect(shots.map(shot => shot.shotId)).toEqual(['b2-s1', 'b1-s2', 'b1-s1'])
+    })
+
+    it('不同 Beat 的同号镜头按正式 ID 选择，数据刷新后选中项保持不变', async () => {
+        const shots = [designedShot('b1-s1'), { ...designedShot('b2-s1'), beatNo: 2 }]
+        wrapper = mount(BeatShotDirectory, { props: { shots, activeId: 'b1-s1', itemClass: 'production-shot-link' } })
+        await wrapper.findAll('.production-shot-link')[1]!.trigger('click')
+        expect(wrapper.emitted('select')).toEqual([['b2-s1']])
+        await wrapper.setProps({
+            activeId: 'b2-s1',
+            shots: [...shots, { ...designedShot('b2-s2'), beatNo: 2, shotNo: 2 }]
+        })
+        expect(wrapper.get('.selected').attributes('aria-label')).toBe('BEAT 2 · 镜头 1 · 来信')
+        expect(wrapper.findAll('.selected')).toHaveLength(1)
+        expect(wrapper.findAll('.directory-group-count')[1]!.text()).toBe('2 镜')
+    })
+
+    it('组内吸顶与移动端归属提示分别保护，不在桌面重复展示 Beat', () => {
+        // happy-dom 不计算吸顶位置，保护 CSS 边界，实际滚动仍需浏览器验收。
+        const css = readAllStyles()
+        expect(css).toMatch(
+            /\.directory-group-heading\s*\{[^}]*position:\s*sticky;[^}]*top:\s*0;[^}]*background:\s*var\(--app-control\)/
+        )
+        expect(css).toMatch(/\.directory-mobile-beat\s*\{\s*display:\s*none/)
+        expect(css).toMatch(/@media \(max-width: 760px\)[\s\S]*\.directory-mobile-beat\s*\{\s*display:\s*inline/)
+        expect(css).toMatch(
+            /@media \(max-width: 760px\)[\s\S]*\.beat-directory-group,\s*\.beat-directory-items\s*\{\s*display:\s*contents/
+        )
+    })
+})
@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+    directionLabel,
+    mergeDesignedShots,
+    referenceImageUrl,
+    storyboardPrerequisites
+} from '@/features/storyboard/model'
+import {
+    directionsResult,
+    episodeShots,
+    storyboardCheckpoint,
+    visualStatesResult
+} from '@/features/storyboard/testing/fixtures'
+
+afterEach(() => vi.unstubAllEnvs())
+
+describe('分镜正式数据与生成依赖', () => {
+    it('用 Shot ID 关联状态，用 Beat + Shot 编号补充描述，不串同编号镜头', () => {
+        const directions = directionsResult('p')
+        const states = visualStatesResult('p', 1, true)
+        states.beats.reverse()
+        states.beats[0]!.shots[0]!.visualState!.continuityNote = '第二个 Beat'
+        const shots = mergeDesignedShots(directions, states, episodeShots())
+        expect(shots.map(shot => [shot.shotId, shot.title, shot.visualState?.continuityNote])).toEqual([
+            ['shot-db-1-1', '第1集镜头1', '信封始终在右手'],
+            ['shot-db-1-2', '第1集镜头2', '第二个 Beat']
+        ])
+    })
+
+    it('没有 Direction 的正式 Shot 仍可显示，不用 checkpoint 伪造数据库 ID', () => {
+        const rows = mergeDesignedShots(directionsResult('p', 1, false), visualStatesResult('p'), episodeShots())
+        expect(rows).toHaveLength(2)
+        expect(rows[0]?.direction).toBeNull()
+        expect(mergeDesignedShots(null, null, episodeShots())).toEqual([])
+    })
+
+    it('仅最新 Breakdown 决定生成前置条件，不能回退到历史完整快照', () => {
+        const ready = storyboardCheckpoint()
+        expect(storyboardPrerequisites([ready], 1)).toMatchObject({ directionEpisode: true, visualEpisode: true })
+        expect(storyboardPrerequisites([ready], 3)).toMatchObject({ directionEpisode: false, visualEpisode: false })
+        const latest = { ...ready, checkpointId: 'failed', createdAt: '2026-08-28T01:00:00Z', state: {} }
+        expect(storyboardPrerequisites([latest, ready], 1)).toMatchObject({
+            directionProject: false,
+            visualProject: false
+        })
+        expect(storyboardPrerequisites([{ ...latest, workflowName: 'create-drama' }, ready], 1)).toMatchObject({
+            directionProject: true
+        })
+    })
+
+    it('保留后端嵌套 Direction 与顶层 VisualState 的不同依赖', () => {
+        const checkpoint = storyboardCheckpoint()
+        delete checkpoint.state.breakdownResult
+        expect(storyboardPrerequisites([checkpoint], 1)).toMatchObject({ directionEpisode: false, visualEpisode: true })
+        checkpoint.state.subjectForms = []
+        expect(storyboardPrerequisites([checkpoint], 1).visualEpisode).toBe(false)
+        expect(directionLabel('future-camera-mode')).toBe('future-camera-mode')
+    })
+
+    it('参考图只允许 http(s) 或后端 storage 地址，拦截不可信协议和路径逃逸', () => {
+        vi.stubEnv('VITE_API_BASE_URL', 'https://api.example.test/api')
+        expect(referenceImageUrl('/storage/image.png')).toBe('https://api.example.test/storage/image.png')
+        expect(referenceImageUrl('https://images.example.test/a.png')).toBe('https://images.example.test/a.png')
+        for (const value of [
+            'javascript:alert(1)',
+            'data:image/svg+xml,anything',
+            '//evil.test/img',
+            '/storage/../api/projects',
+            '/storage/\\evil.test/img'
+        ]) {
+            expect(referenceImageUrl(value)).toBeNull()
+        }
+    })
+})