fix: 完善剧本完成状态限制并优化表单对齐与配色

2026-09-01 22:37:51 +08:00
parent a24326b85d
commit 370e7bb4a6
19 changed files with 340 additions and 67 deletions
@@ -1,19 +1,30 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, inject, onScopeDispose, provide, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NEllipsis } from 'naive-ui'
-import { RefreshCw } from '@lucide/vue'
-import { StatusBadge } from '../../components/ui'
+import { EmptyState } from '../../components/ui'
 import { projectContextKey, useProjectData } from './context'
 import { getOperation } from '../workflows/operations'
+import { isProjectComplete, projectAccessKey, type ProjectAccess } from './access'

-/** 项目仅保留紧凑标题与刷新；工作流统一由左侧导航切换，子工作区负责内容滚动。 */
+/** 项目标题只保留名称；下游工作区在剧本完成前不挂载，直接链接也无法越过限制。 */
 const route = useRoute()
 const router = useRouter()
 const id = computed(() => String(route.params.projectId))
 const context = useProjectData(id)
 provide(projectContextKey, context)
 const operation = computed(() => getOperation(id.value))
+const complete = computed(() => isProjectComplete(context.project.value, id.value))
+const isCreation = computed(() => route.path.replace(/\/+$/, '').endsWith('/create-drama'))
+const access = inject(projectAccessKey, undefined)
+let published: ProjectAccess | null = null
+watchEffect(() => {
+    published = { projectId: id.value, completed: complete.value }
+    if (access) access.value = published
+})
+onScopeDispose(() => {
+    if (access?.value === published) access.value = null
+})
 </script>
 <template>
    <section class="project-frame">
@@ -24,16 +35,6 @@ const operation = computed(() => getOperation(id.value))
                        context.project.value?.title || context.project.value?.topic || '读取项目'
                    }}</NEllipsis></template
                >
-                <template #extra
-                    ><div class="flex items-center gap-3">
-                        <StatusBadge v-if="context.project.value" :status="context.project.value.status" /><NButton
-                            size="small"
-                            :loading="context.loading.value"
-                            @click="context.refresh"
-                            ><template #icon><RefreshCw :size="14" /></template>刷新</NButton
-                        >
-                    </div></template
-                >
            </NPageHeader>
        </header>
        <NScrollbar
@@ -42,8 +43,10 @@ const operation = computed(() => getOperation(id.value))
            content-class="project-notices-content"
        >
            <NAlert v-if="context.error.value" type="error" :show-icon="false"
-                >{{ context.error.value
-                }}<span v-if="context.project.value"> 当前保留上次成功读取的数据。</span></NAlert
+                >{{ context.error.value }}<span v-if="context.project.value"> 当前保留上次成功读取的数据。</span>
+                <NButton text class="ml-3" :loading="context.loading.value" @click="context.refresh"
+                    >重试读取</NButton
+                ></NAlert
            >
            <NAlert v-if="operation.pending" :show-icon="false" role="status"
                >{{ operation.label }}。可切换页面查看结果，请勿重复提交；关闭页面不会取消后端任务。</NAlert
@@ -52,7 +55,15 @@ const operation = computed(() => getOperation(id.value))
            <NAlert v-if="operation.notice" :show-icon="false" role="status">{{ operation.notice }}</NAlert>
        </NScrollbar>
        <div class="project-view">
-            <RouterView v-if="context.project.value" :key="id" />
+            <RouterView v-if="context.project.value?.id === id && (isCreation || complete)" :key="id" />
+            <EmptyState
+                v-else-if="context.project.value?.id === id"
+                class="project-access-gate"
+                title="请先完成剧本创作"
+                description="剧本完成后，才能使用拆解、视觉风格、主体身份、形态图片、分镜设计与镜头生产。状态会自动更新。"
+            >
+                <NButton type="primary" @click="router.push(`/projects/${id}/create-drama`)">返回剧本创作</NButton>
+            </EmptyState>
            <NSpin
                v-else-if="context.loading.value"
                class="workspace-loading"
@@ -0,0 +1,181 @@
+import { h } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { readFileSync } from 'node:fs'
+import App from '../../App.vue'
+import ProjectLayout from './ProjectLayout.vue'
+import { isProjectComplete } from './access'
+import { projectsApi } from './api'
+import type { ProjectDetail, ProjectStatus } from './types'
+
+const downstream = ['breakdown', 'visual-style', 'subject-identity', 'subject-images', 'storyboard', 'production']
+let wrapper: VueWrapper | undefined
+afterEach(() => {
+    wrapper?.unmount()
+    wrapper = undefined
+    document.body.innerHTML = ''
+    localStorage.clear()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+})
+
+/** 用已有剧集模拟中途生成的项目，完成与否必须取 status 而非数组长度。 */
+function project(id: string, status: ProjectStatus): ProjectDetail {
+    return {
+        id,
+        status,
+        title: '访问限制测试',
+        topic: '',
+        style: null,
+        createdAt: '',
+        updatedAt: '',
+        episodes: [{ episode: 1, title: '部分剧集', content: '已经写入的内容' }],
+        characters: [],
+        world: null,
+        reviews: [],
+        tasks: []
+    }
+}
+
+/** 真实项目布局与侧栏，子工作区以挂载探针代替，防止测试发起实际生成请求。 */
+async function openProject(initialPath: string) {
+    const mounted = vi.fn<(path: string) => void>()
+    const router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+            { path: '/projects', component: { render: () => h('div', '项目列表') } },
+            {
+                path: '/projects/:projectId',
+                component: ProjectLayout,
+                children: ['create-drama', ...downstream].map(path => ({
+                    path,
+                    component: {
+                        setup() {
+                            mounted(path)
+                            return () => h('div', { class: 'workspace-probe' }, path)
+                        }
+                    }
+                }))
+            }
+        ]
+    })
+    await router.push(initialPath)
+    wrapper = mount(App, { attachTo: document.body, global: { plugins: [router] } })
+    await flushPromises()
+    return { router, mounted }
+}
+
+describe('剧本完成前的下游访问限制', () => {
+    it.each(['draft', 'generating', 'need_review', 'failed'] as const)(
+        '%s 不解锁导航，也不挂载直接链接对应的工作区',
+        async status => {
+            vi.spyOn(projectsApi, 'detail').mockResolvedValue(project('unfinished', status))
+            vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
+            const { router, mounted } = await openProject('/projects/unfinished/production')
+            for (const path of downstream) {
+                await router.push(`/projects/unfinished/${path}`)
+                await flushPromises()
+                expect(wrapper!.get('.project-access-gate').text()).toContain('请先完成剧本创作')
+                expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
+                expect(wrapper!.find(`.n-menu a[href="/projects/unfinished/${path}"]`).exists()).toBe(false)
+            }
+            expect(mounted).not.toHaveBeenCalled()
+            expect(wrapper!.findAll('.n-menu [aria-disabled="true"]')).toHaveLength(6)
+            await wrapper!.get('.project-access-gate button').trigger('click')
+            await flushPromises()
+            expect(router.currentRoute.value.path).toBe('/projects/unfinished/create-drama')
+            expect(wrapper!.get('.workspace-probe').text()).toBe('create-drama')
+            expect(mounted).toHaveBeenCalledExactlyOnceWith('create-drama')
+        }
+    )
+
+    it('轮询完成状态自动解锁；重新变为待审核时撤下下游面板', async () => {
+        vi.useFakeTimers()
+        let status: ProjectStatus = 'generating'
+        vi.spyOn(projectsApi, 'detail').mockImplementation(async id => project(id, status))
+        vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
+        const { mounted } = await openProject('/projects/polling/production')
+        expect(mounted).not.toHaveBeenCalled()
+        status = 'completed'
+        await vi.advanceTimersByTimeAsync(6000)
+        await flushPromises()
+        expect(wrapper!.get('.workspace-probe').text()).toBe('production')
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(8)
+        status = 'need_review'
+        await vi.advanceTimersByTimeAsync(6000)
+        await flushPromises()
+        expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
+        expect(wrapper!.get('.project-access-gate').text()).toContain('请先完成剧本创作')
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
+        expect(mounted).toHaveBeenCalledExactlyOnceWith('production')
+    })
+
+    it('切换项目与首次读取期间不能沿用上一个已完成项目的权限', async () => {
+        let resolveSecond!: (value: ProjectDetail) => void
+        const pending = new Promise<ProjectDetail>(resolve => {
+            resolveSecond = resolve
+        })
+        vi.spyOn(projectsApi, 'detail').mockImplementation(async id =>
+            id === 'first' ? project(id, 'completed') : pending
+        )
+        vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
+        const { router, mounted } = await openProject('/projects/first/production')
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(8)
+        await router.push('/projects/second/production')
+        await flushPromises()
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
+        expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
+        resolveSecond(project('second', 'draft'))
+        await flushPromises()
+        expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
+        expect(mounted).toHaveBeenCalledExactlyOnceWith('production')
+        await router.push('/projects')
+        await flushPromises()
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(1)
+    })
+
+    it('读取失败保持锁定；错误区重试成功后解锁，页头不恢复标签与刷新按钮', async () => {
+        const detail = vi
+            .spyOn(projectsApi, 'detail')
+            .mockRejectedValueOnce(new Error('项目读取失败'))
+            .mockResolvedValue(project('retry', 'completed'))
+        vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
+        const { mounted } = await openProject('/projects/retry/storyboard')
+        expect(mounted).not.toHaveBeenCalled()
+        expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
+        expect(wrapper!.find('.project-header .n-button').exists()).toBe(false)
+        expect(wrapper!.find('.project-header .n-tag').exists()).toBe(false)
+        await wrapper!.get('.project-notices button').trigger('click')
+        await flushPromises()
+        expect(detail).toHaveBeenCalledTimes(2)
+        expect(mounted).toHaveBeenCalledExactlyOnceWith('storyboard')
+    })
+
+    it('不存在、未知状态或项目 ID 不匹配时默认锁定', () => {
+        expect(isProjectComplete(null, 'p')).toBe(false)
+        expect(isProjectComplete({ id: 'other', status: 'completed' }, 'p')).toBe(false)
+        expect(isProjectComplete({ id: 'p', status: 'unknown' as ProjectStatus }, 'p')).toBe(false)
+        expect(isProjectComplete({ id: 'p', status: 'completed' }, 'p')).toBe(true)
+    })
+
+    it('配置复选框居中对齐，输入表面随面板背景分层而非增加边框', () => {
+        // 保护布局契约；实际像素对齐仍需浏览器视觉验收。
+        const css = readFileSync('src/admin.css', 'utf8')
+        expect(css).toMatch(
+            /\.n-checkbox\.control-row-checkbox\s*\{[^}]*align-items:\s*center;[^}]*min-height:\s*34px;[^}]*padding-block:\s*0/
+        )
+        expect(css).toMatch(/\.app-dialog\s*\{[^}]*--app-field:\s*var\(--app-control\)/)
+        expect(readFileSync('src/styles.css', 'utf8')).toMatch(/\.panel\s*\{[^}]*--app-field:\s*var\(--app-control\)/)
+        for (const path of [
+            'production/ProductionPage.vue',
+            'storyboard/StoryboardPage.vue',
+            'subject-identity/SubjectIdentityPage.vue',
+            'subject-images/SubjectImagesPage.vue'
+        ]) {
+            const source = readFileSync(`src/features/${path}`, 'utf8')
+            expect(source).toContain('control-row-checkbox')
+            expect(source).not.toMatch(/<NCheckbox\b[^>]*class="[^"]*pb-[23]/)
+        }
+    })
+})
@@ -0,0 +1,16 @@
+import type { InjectionKey, ShallowRef } from 'vue'
+import type { Project } from './types'
+
+/** 由项目布局发布给应用侧栏的访问状态；不额外请求或持久化项目数据。 */
+export interface ProjectAccess {
+    projectId: string
+    completed: boolean
+}
+
+/** 侧栏与项目布局共享同一份判定，初次读取和切换项目时默认锁定。 */
+export const projectAccessKey: InjectionKey<ShallowRef<ProjectAccess | null>> = Symbol('project-access')
+
+/** 仅正式项目状态 completed 解锁下游；已有部分剧集或旧 checkpoint 不代表剧本完成。 */
+export function isProjectComplete(project: Pick<Project, 'id' | 'status'> | null, projectId: string): boolean {
+    return !!projectId && project?.id === projectId && project.status === 'completed'
+}