fix: 使用 NScrollbar 统一内容区滚动条

2026-09-01 16:44:30 +08:00
parent db8c176b55
commit 3fe1b3f5c3
17 changed files with 967 additions and 737 deletions
@@ -123,10 +123,13 @@ body {
 .project-tabs .n-tabs-nav {
    border: 0;
 }
-.project-notices {
+.project-notices.n-scrollbar {
    flex-shrink: 0;
+    height: auto;
    max-height: 100px;
-    overflow: auto;
+    overflow: hidden;
+}
+.project-notices-content {
    padding: 8px 24px;
    display: grid;
    gap: 5px;
@@ -147,12 +150,14 @@ body {
    min-height: 0;
    overflow: hidden;
 }
-.workspace-heading {
+.workspace-heading-scroll.n-scrollbar {
    flex-shrink: 0;
+    height: auto;
+    max-height: min(35dvh, 260px);
+    overflow: hidden;
+}
+.workspace-heading {
    padding: 16px 24px 12px;
-    max-height: 35%;
-    overflow: auto;
-    overscroll-behavior: contain;
 }
 .workspace-heading h2 {
    font-size: 16px;
@@ -189,28 +194,27 @@ body {
    margin: 0;
    flex-shrink: 0;
 }
-.workspace-overview {
+.workspace-overview.n-scrollbar {
    flex-shrink: 0;
-    max-height: 42%;
-    overflow: auto;
-    padding: 10px 14px;
+    height: auto;
+    max-height: min(36dvh, 420px);
+    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 6px;
 }
-.workspace-feedback {
+.overview-scroll-content {
+    padding: 10px 14px;
+}
+.workspace-feedback.n-scrollbar {
    flex-shrink: 0;
-    max-height: 24%;
-    overflow: auto;
+    height: auto;
+    max-height: min(24dvh, 160px);
+    overflow: hidden;
 }
 .workspace-feedback .n-alert + .n-alert {
    margin-top: 8px;
 }
-.workspace-split > .n-alert {
-    flex-shrink: 0;
-    max-height: 24%;
-    overflow: auto;
-}
 .script-section {
    flex: 1;
    display: flex;
@@ -259,11 +263,11 @@ body {
 }
 .production-shot-list {
    max-height: none;
-    overflow: auto;
+    overflow: hidden;
    min-height: 0;
 }
 .production-workspace > article {
-    overflow: auto;
+    overflow: hidden;
    min-height: 0;
    overscroll-behavior: contain;
 }
@@ -278,7 +282,7 @@ body {
 }
 .identity-workspace > div {
    min-height: 0;
-    overflow: auto;
+    overflow: hidden;
    overscroll-behavior: contain;
 }
 .identity-subject-list {
@@ -292,7 +296,7 @@ body {
 }
 .storyboard-workspace > article,
 .storyboard-workspace .shot-list {
-    overflow: auto;
+    overflow: hidden;
    min-height: 0;
    height: 100%;
    max-height: none;
@@ -306,7 +310,7 @@ body {
 .content-with-history > aside,
 .script-page {
    min-height: 0;
-    overflow: auto;
+    overflow: hidden;
    overscroll-behavior: contain;
 }
 .script-workspace {
@@ -315,6 +319,84 @@ body {
 .episode-list {
    max-height: none;
    min-height: 0;
+    overflow: hidden;
+}
+/* 面板只负责尺寸与裁切；滚动和深浅主题滚动条统一交给 Naive UI。 */
+.panel-scroll.n-scrollbar {
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+.n-scrollbar > .n-scrollbar-container {
+    overscroll-behavior: contain;
+}
+.production-shot-list,
+.production-detail,
+.storyboard-detail,
+.shot-list,
+.episode-list,
+.content-with-history > main {
+    min-width: 0;
+    min-height: 0;
+}
+.script-page,
+.history-panel,
+.production-shot-list,
+.shot-list,
+.episode-list {
+    padding: 0;
+}
+.production-shot-list-content {
+    padding-block: 8px;
+}
+.shot-list-content {
+    padding: 0 8px 20px;
+}
+.episode-list-content {
+    padding: 0 7px 20px;
+}
+.script-page-content {
+    padding: 36px 40px;
+}
+.history-content {
+    padding: 23px 21px;
+}
+.production-shot-list-content,
+.shot-list-content,
+.episode-list-content,
+.identity-subject-list-content {
+    display: flex;
+    flex-direction: column;
+}
+.n-button.production-shot-link,
+.n-button.shot-link,
+.n-button.episode-link,
+.n-button.identity-subject-item {
+    display: flex;
+    width: 100%;
+    flex-shrink: 0;
+}
+.image-history.n-scrollbar,
+.table-scroll.n-scrollbar {
+    height: auto;
+    overflow: hidden;
+}
+.image-history-content {
+    display: flex;
+    gap: 12px;
+    padding: 4px 4px 8px;
+    width: max-content;
+}
+.code-scroll.n-scrollbar {
+    height: auto;
+    max-height: 420px;
+    overflow: hidden;
+}
+.code-scroll .json-view,
+.code-scroll .storyboard-json {
+    max-height: none;
+    overflow: visible;
 }
 .project-table-area {
    flex: 1;
@@ -522,18 +604,39 @@ body {
        grid-template-rows: 110px minmax(0, 1fr);
    }
    .production-shot-list {
-        display: flex;
-        overflow-x: auto;
+        display: block;
+        overflow: hidden;
        height: 110px;
    }
-    .production-shot-link {
-        flex-shrink: 0;
+    .production-shot-list-content {
+        flex-direction: row;
+        width: max-content;
+    }
+    .n-button.production-shot-link {
+        width: 180px;
+        min-height: 98px;
    }
    .identity-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 180px minmax(0, 1fr);
        gap: 10px;
    }
+    .identity-workspace > aside {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        grid-template-rows: auto auto minmax(0, 1fr) auto;
+        gap: 6px 8px;
+        padding: 10px;
+    }
+    .identity-workspace > aside > * {
+        margin-top: 0;
+        min-width: 0;
+    }
+    .identity-workspace > aside > h3,
+    .identity-workspace > aside > .identity-subject-list,
+    .identity-workspace > aside > .n-button {
+        grid-column: 1 / -1;
+    }
    .storyboard-workspace {
        grid-template-columns: 120px minmax(0, 1fr);
    }
@@ -545,7 +648,7 @@ body {
        grid-template-rows: minmax(0, 1fr) 130px;
    }
    .history-panel {
-        overflow: auto;
+        overflow: hidden;
        min-height: 0;
    }
    .script-workspace {
@@ -560,6 +663,9 @@ body {
        width: 100%;
    }
    .script-page {
+        padding: 0;
+    }
+    .script-page-content {
        padding: 18px;
    }
    .project-search {
@@ -5,7 +5,9 @@ defineProps<{ split?: boolean }>()
 </script>
 <template>
    <section class="workspace-page">
-        <header v-if="$slots.header" class="workspace-heading"><slot name="header" /></header>
+        <NScrollbar v-if="$slots.header" class="workspace-heading-scroll"
+            ><header class="workspace-heading"><slot name="header" /></header
+        ></NScrollbar>
        <div v-if="split" class="workspace-split"><slot /></div>
        <NScrollbar v-else class="workspace-scroll" content-class="workspace-scroll-content"><slot /></NScrollbar>
    </section>
@@ -23,13 +23,20 @@ describe('管理后台组件边界', () => {
        expect(adminCss).toMatch(/html,\s*body,\s*#app,\s*\.app-provider\s*\{[^}]*overflow:\s*hidden/)
        expect(adminCss).toMatch(/\.workspace-page\s*\{[^}]*min-height:\s*0;[^}]*overflow:\s*hidden/)
    })
-    it('固定标题在滚动容器之外，普通工作区只有内容使用滚动组件', () => {
+    it('业务样式不再直接开启浏览器原生滚动条', () => {
+        const css = readFileSync('src/admin.css', 'utf8') + readFileSync('src/styles.css', 'utf8')
+        expect(css).not.toMatch(/overflow(?:-[xy])?\s*:\s*(?:auto|scroll)\b/)
+    })
+    it('标题与内容使用各自滚动容器，不随正文一起滚动', () => {
        wrapper = mount(WorkspacePage, {
            slots: { header: '<h2>固定操作区</h2>', default: '<p>正文</p>' }
        })
        expect(wrapper.get('.workspace-heading').text()).toBe('固定操作区')
-        expect(wrapper.getComponent(NScrollbar).text()).toBe('正文')
-        expect(wrapper.getComponent(NScrollbar).find('h2').exists()).toBe(false)
+        const content = wrapper.get('.workspace-scroll')
+        expect(content.classes()).toContain('n-scrollbar')
+        expect(content.text()).toBe('正文')
+        expect(content.find('h2').exists()).toBe(false)
+        expect(wrapper.get('.workspace-heading-scroll .n-scrollbar-content').text()).toBe('固定操作区')
    })

    it('分栏工作区不再包一层整页滚动', () => {
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
-import { NAlert, NButton, NCheckbox, NInputNumber, NProgress, NTab, NTable, NTabs, NTag } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NCheckbox, NInputNumber, NProgress, NTab, NTable, NTabs, NTag } from 'naive-ui'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 import { Download, Layers, LoaderCircle, ArrowRight } from '@lucide/vue'
 import { EmptyState, StatusBadge } from '../../components/ui'
@@ -343,7 +343,7 @@ function exportResult() {
                            <StoryboardList :plans="plans" :episodes="shots" />
                        </div>
                        <div v-if="tab === 'tasks'" class="p-5">
-                            <div v-if="snapshot?.tasks?.length" class="table-scroll">
+                            <NScrollbar x-scrollable v-if="snapshot?.tasks?.length" class="table-scroll">
                                <NTable :single-line="false" class="project-table"
                                    ><thead>
                                        <tr>
@@ -383,7 +383,7 @@ function exportResult() {
                                        >
                                    </tbody></NTable
                                >
-                            </div>
+                            </NScrollbar>
                            <EmptyState
                                v-else
                                title="尚无抽取任务记录"
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
-import { NButton, NCollapse, NCollapseItem, NProgress, NTab, NTabs, NTag } from 'naive-ui'
+import { NScrollbar, NButton, NCollapse, NCollapseItem, NProgress, NTab, NTabs, NTag } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { ArrowRight, Download, Check, Circle } from '@lucide/vue'
 import { EmptyState } from '../../components/ui'
@@ -138,32 +138,38 @@ function exportScript() {
                    <div v-if="tab === 'episodes'" class="h-full">
                        <div v-if="episode" class="script-workspace">
                            <aside class="episode-list">
-                                <p class="px-4 pb-3 pt-5 text-[11px] font-medium tracking-wider text-muted">剧集目录</p>
-                                <NButton
-                                    v-for="item in episodes"
-                                    :key="item.episode"
-                                    :aria-pressed="episode.episode === item.episode"
-                                    @click="selected = item.episode"
-                                    class="episode-link"
-                                    :class="{ active: episode.episode === item.episode }"
-                                    ><span class="episode-number">{{ String(item.episode).padStart(2, '0') }}</span
-                                    ><span class="truncate">{{ item.title }}</span></NButton
-                                >
+                                <NScrollbar class="panel-scroll" content-class="episode-list-content">
+                                    <p class="px-4 pb-3 pt-5 text-[11px] font-medium tracking-wider text-muted">
+                                        剧集目录
+                                    </p>
+                                    <NButton
+                                        v-for="item in episodes"
+                                        :key="item.episode"
+                                        :aria-pressed="episode.episode === item.episode"
+                                        @click="selected = item.episode"
+                                        class="episode-link"
+                                        :class="{ active: episode.episode === item.episode }"
+                                        ><span class="episode-number">{{ String(item.episode).padStart(2, '0') }}</span
+                                        ><span class="truncate">{{ item.title }}</span></NButton
+                                    >
+                                </NScrollbar>
                            </aside>
                            <article class="script-page">
-                                <p class="eyebrow">第 {{ String(episode.episode).padStart(2, '0') }} 集</p>
-                                <h2 class="mt-3 text-2xl font-semibold">{{ episode.title }}</h2>
-                                <p v-if="episode.summary" class="script-summary">{{ episode.summary }}</p>
-                                <div class="script-body">{{ episode.content }}</div>
-                                <dl v-if="episode.conflict || episode.hook" class="script-notes">
-                                    <template v-if="episode.conflict"
-                                        ><dt>核心冲突</dt>
-                                        <dd>{{ episode.conflict }}</dd></template
-                                    ><template v-if="episode.hook"
-                                        ><dt>结尾钩子</dt>
-                                        <dd>{{ episode.hook }}</dd></template
-                                    >
-                                </dl>
+                                <NScrollbar class="panel-scroll" content-class="script-page-content">
+                                    <p class="eyebrow">第 {{ String(episode.episode).padStart(2, '0') }} 集</p>
+                                    <h2 class="mt-3 text-2xl font-semibold">{{ episode.title }}</h2>
+                                    <p v-if="episode.summary" class="script-summary">{{ episode.summary }}</p>
+                                    <div class="script-body">{{ episode.content }}</div>
+                                    <dl v-if="episode.conflict || episode.hook" class="script-notes">
+                                        <template v-if="episode.conflict"
+                                            ><dt>核心冲突</dt>
+                                            <dd>{{ episode.conflict }}</dd></template
+                                        ><template v-if="episode.hook"
+                                            ><dt>结尾钩子</dt>
+                                            <dd>{{ episode.hook }}</dd></template
+                                        >
+                                    </dl>
+                                </NScrollbar>
                            </article>
                        </div>
                        <EmptyState
@@ -172,91 +178,101 @@ function exportScript() {
                            description="剧集写入数据库后会自动出现在这里。角色与世界观生成期间，可以在右侧查看已保存的执行记录。"
                        />
                    </div>
-                    <div v-if="tab === 'characters'" class="p-6 lg:p-8">
-                        <div v-if="project?.characters.length" class="divide-y divide-line">
-                            <article
-                                v-for="character in project.characters"
-                                :key="character.id"
-                                class="py-5 first:pt-0"
-                            >
-                                <div class="mb-3 flex items-center gap-3">
-                                    <h3 class="text-lg font-semibold">{{ character.name }}</h3>
-                                    <NTag size="small" :bordered="false">{{ character.role || '角色' }}</NTag
-                                    ><span class="text-xs text-muted">{{ character.occupation }}</span>
-                                </div>
+                    <NScrollbar v-if="tab !== 'episodes'" class="panel-scroll"
+                        ><div v-if="tab === 'characters'" class="p-6 lg:p-8">
+                            <div v-if="project?.characters.length" class="divide-y divide-line">
+                                <article
+                                    v-for="character in project.characters"
+                                    :key="character.id"
+                                    class="py-5 first:pt-0"
+                                >
+                                    <div class="mb-3 flex items-center gap-3">
+                                        <h3 class="text-lg font-semibold">{{ character.name }}</h3>
+                                        <NTag size="small" :bordered="false">{{ character.role || '角色' }}</NTag
+                                        ><span class="text-xs text-muted">{{ character.occupation }}</span>
+                                    </div>
+                                    <dl class="detail-grid">
+                                        <template
+                                            v-for="field in [
+                                                { key: 'personality', label: '性格' },
+                                                { key: 'goal', label: '目标' },
+                                                { key: 'secret', label: '秘密' }
+                                            ] as const"
+                                            :key="field.key"
+                                            ><dt>{{ field.label }}</dt>
+                                            <dd>{{ character[field.key] || '未提供' }}</dd></template
+                                        >
+                                    </dl>
+                                </article>
+                            </div>
+                            <EmptyState v-else title="尚无角色设定" description="角色生成结束后会在这里显示。" />
+                        </div>
+                        <div v-if="tab === 'world'" class="p-6 lg:p-8">
+                            <div v-if="project?.world">
+                                <p class="eyebrow">故事的发生之地</p>
+                                <h2 class="mb-7 mt-3 text-xl font-semibold">
+                                    {{ project.world.era }} · {{ project.world.location }}
+                                </h2>
                                <dl class="detail-grid">
                                    <template
                                        v-for="field in [
-                                            { key: 'personality', label: '性格' },
-                                            { key: 'goal', label: '目标' },
-                                            { key: 'secret', label: '秘密' }
+                                            { key: 'background', label: '背景' },
+                                            { key: 'coreConflict', label: '核心冲突' },
+                                            { key: 'tone', label: '基调' }
                                        ] as const"
                                        :key="field.key"
                                        ><dt>{{ field.label }}</dt>
-                                        <dd>{{ character[field.key] || '未提供' }}</dd></template
+                                        <dd>{{ project.world[field.key] || '未提供' }}</dd></template
                                    >
                                </dl>
-                            </article>
-                        </div>
-                        <EmptyState v-else title="尚无角色设定" description="角色生成结束后会在这里显示。" />
-                    </div>
-                    <div v-if="tab === 'world'" class="p-6 lg:p-8">
-                        <div v-if="project?.world">
-                            <p class="eyebrow">故事的发生之地</p>
-                            <h2 class="mb-7 mt-3 text-xl font-semibold">
-                                {{ project.world.era }} · {{ project.world.location }}
-                            </h2>
-                            <dl class="detail-grid">
-                                <template
-                                    v-for="field in [
-                                        { key: 'background', label: '背景' },
-                                        { key: 'coreConflict', label: '核心冲突' },
-                                        { key: 'tone', label: '基调' }
-                                    ] as const"
-                                    :key="field.key"
-                                    ><dt>{{ field.label }}</dt>
-                                    <dd>{{ project.world[field.key] || '未提供' }}</dd></template
+                                <NCollapse v-if="project.world.rules" class="mt-6 text-sm"
+                                    ><NCollapseItem name="details"
+                                        ><template #header>世界规则</template>
+                                        <NScrollbar class="code-scroll mt-3" x-scrollable>
+                                            <pre class="json-view">{{
+                                                JSON.stringify(project.world.rules, null, 2)
+                                            }}</pre>
+                                        </NScrollbar>
+                                    </NCollapseItem></NCollapse
                                >
-                            </dl>
-                            <NCollapse v-if="project.world.rules" class="mt-6 text-sm"
+                            </div>
+                            <EmptyState v-else title="尚无世界观" description="世界观会在角色设定之后生成。" />
+                        </div>
+                        <div v-if="tab === 'review'" class="p-6 lg:p-8">
+                            <div v-if="project?.reviews.length" class="space-y-5">
+                                <article
+                                    v-for="review in project.reviews"
+                                    :key="review.id"
+                                    class="border-b border-line pb-5"
+                                >
+                                    <div class="mb-3 flex justify-between gap-3">
+                                        <span
+                                            class="text-sm font-medium"
+                                            :class="review.passed ? 'text-success' : 'text-danger'"
+                                            >{{ review.passed ? '审核通过' : '需要修改' }}</span
+                                        ><time class="text-xs text-muted">{{ formatDate(review.createdAt) }}</time>
+                                    </div>
+                                    <p class="whitespace-pre-wrap text-sm leading-7">
+                                        {{ review.message || '本次审核未附加说明。' }}
+                                    </p>
+                                </article>
+                            </div>
+                            <EmptyState
+                                v-else
+                                title="还没有审核记录"
+                                description="剧集生成完成后，工作流会进行内容审核与必要的改写。"
+                            /><NCollapse v-if="state?.rewriteSuggestion" class="mt-5 text-sm"
                                ><NCollapseItem name="details"
-                                    ><template #header>世界规则</template>
-                                    <pre class="json-view mt-3">{{ JSON.stringify(project.world.rules, null, 2) }}</pre>
+                                    ><template #header>查看改写建议原文</template>
+                                    <NScrollbar class="code-scroll mt-3" x-scrollable>
+                                        <pre class="json-view">{{
+                                            JSON.stringify(state.rewriteSuggestion, null, 2)
+                                        }}</pre>
+                                    </NScrollbar>
                                </NCollapseItem></NCollapse
                            >
                        </div>
-                        <EmptyState v-else title="尚无世界观" description="世界观会在角色设定之后生成。" />
-                    </div>
-                    <div v-if="tab === 'review'" class="p-6 lg:p-8">
-                        <div v-if="project?.reviews.length" class="space-y-5">
-                            <article
-                                v-for="review in project.reviews"
-                                :key="review.id"
-                                class="border-b border-line pb-5"
-                            >
-                                <div class="mb-3 flex justify-between gap-3">
-                                    <span
-                                        class="text-sm font-medium"
-                                        :class="review.passed ? 'text-success' : 'text-danger'"
-                                        >{{ review.passed ? '审核通过' : '需要修改' }}</span
-                                    ><time class="text-xs text-muted">{{ formatDate(review.createdAt) }}</time>
-                                </div>
-                                <p class="whitespace-pre-wrap text-sm leading-7">
-                                    {{ review.message || '本次审核未附加说明。' }}
-                                </p>
-                            </article>
-                        </div>
-                        <EmptyState
-                            v-else
-                            title="还没有审核记录"
-                            description="剧集生成完成后，工作流会进行内容审核与必要的改写。"
-                        /><NCollapse v-if="state?.rewriteSuggestion" class="mt-5 text-sm"
-                            ><NCollapseItem name="details"
-                                ><template #header>查看改写建议原文</template>
-                                <pre class="json-view mt-3">{{ JSON.stringify(state.rewriteSuggestion, null, 2) }}</pre>
-                            </NCollapseItem></NCollapse
-                        >
-                    </div>
+                    </NScrollbar>
                </main>
                <HistoryPanel :checkpoints="checkpoints" workflow="create-drama" />
            </div></div
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
-import { NCollapse, NCollapseItem, NAlert, NButton, NCheckbox, NInputNumber, NProgress, NSelect } from 'naive-ui'
+import {
+    NScrollbar,
+    NCollapse,
+    NCollapseItem,
+    NAlert,
+    NButton,
+    NCheckbox,
+    NInputNumber,
+    NProgress,
+    NSelect
+} from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { ArrowLeft, CheckCircle2, CircleAlert, Film, Image, MessageSquareText, RefreshCw } from '@lucide/vue'
 import { EmptyState, StatusBadge } from '../../components/ui'
@@ -166,158 +176,165 @@ watch(
                </p>
            </section></template
        >
-        <NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mt-4"
-            >{{ query.error.value
-            }}<span v-if="query.data.value"> 当前保留上次读取的数据，生产操作已暂停。</span></NAlert
+        <NScrollbar v-if="query.error.value" class="workspace-feedback"
+            ><NAlert role="alert" type="error" :show-icon="false"
+                >{{ query.error.value
+                }}<span v-if="query.data.value"> 当前保留上次读取的数据，生产操作已暂停。</span></NAlert
+            ></NScrollbar
        >
-        <NCollapse v-model:expanded-names="overview" class="workspace-overview"
-            ><NCollapseItem name="overview" title="项目生产总览与批量操作"
-                ><div class="overview-content">
-                    <NAlert type="info" :show-icon="false" class="mt-5 text-xs">
-                        每一步都按后端就绪检查执行。覆盖只会新增首帧／视频候选，不会替换当前主资产；上游参考资产变化后，下游过期结果会被标记并阻止继续使用，需要重新生成后才能恢复就绪。
-                    </NAlert>
-                    <NAlert v-if="videoRunning" role="status" type="info" :show-icon="false" class="mt-4">
-                        当前有 {{ videoRunning }} 个视频任务等待或生成中。后端正在轮询
-                        Provider；同一镜头不会重复提交活动任务。
-                    </NAlert>
-                    <NAlert v-if="identityBlocked" type="info" :show-icon="false" class="mt-4">
-                        当前有 {{ identityBlocked }} 项角色身份前置问题。Character 必须生成
-                        Identity、确认演员母版并锁定后，首帧才能就绪。
-                        <RouterLink :to="`/projects/${id}/subject-identity`" class="text-button ml-2"
-                            >前往角色选角 →</RouterLink
-                        ></NAlert
-                    >
-                    <NAlert v-if="staleKeyframes" role="status" type="info" :show-icon="false" class="mt-4">
-                        当前有
-                        {{ staleKeyframes }}
-                        个主首帧已过期。它们使用的主体参考资产已经变化，视频阶段会被阻止；可在下方逐镜重新生成，或使用“补齐
-                        / 更新主首帧”批量处理。
-                    </NAlert>
-                    <NAlert v-if="staleVideos" role="status" type="info" :show-icon="false" class="mt-4">
-                        当前有
-                        {{ staleVideos }}
-                        个主视频已过期。它们使用的主首帧或主体参考图已经变化；非覆盖模式批量生成时会只重建这些过期主视频。
-                    </NAlert>
-                    <ProductionReceipt v-if="session.receipt" :receipt="session.receipt" />
-                    <div v-if="query.data.value" class="production-pipeline mt-5">
-                        <article v-for="stage in stages" :key="stage.key" class="panel production-pipeline-card">
-                            <div class="flex items-start justify-between gap-3">
-                                <div class="flex items-start gap-3">
-                                    <span class="production-step"><component :is="stage.icon" :size="17" /></span>
-                                    <div>
-                                        <p class="eyebrow">STEP {{ stage.code }}</p>
-                                        <h3 class="mt-2 text-sm font-semibold">{{ stage.title }}</h3>
+        <NScrollbar class="workspace-overview" content-class="overview-scroll-content"
+            ><NCollapse v-model:expanded-names="overview"
+                ><NCollapseItem name="overview" title="项目生产总览与批量操作"
+                    ><div class="overview-content">
+                        <NAlert type="info" :show-icon="false" class="mt-5 text-xs">
+                            每一步都按后端就绪检查执行。覆盖只会新增首帧／视频候选，不会替换当前主资产；上游参考资产变化后，下游过期结果会被标记并阻止继续使用，需要重新生成后才能恢复就绪。
+                        </NAlert>
+                        <NAlert v-if="videoRunning" role="status" type="info" :show-icon="false" class="mt-4">
+                            当前有 {{ videoRunning }} 个视频任务等待或生成中。后端正在轮询
+                            Provider；同一镜头不会重复提交活动任务。
+                        </NAlert>
+                        <NAlert v-if="identityBlocked" type="info" :show-icon="false" class="mt-4">
+                            当前有 {{ identityBlocked }} 项角色身份前置问题。Character 必须生成
+                            Identity、确认演员母版并锁定后，首帧才能就绪。
+                            <RouterLink :to="`/projects/${id}/subject-identity`" class="text-button ml-2"
+                                >前往角色选角 →</RouterLink
+                            ></NAlert
+                        >
+                        <NAlert v-if="staleKeyframes" role="status" type="info" :show-icon="false" class="mt-4">
+                            当前有
+                            {{ staleKeyframes }}
+                            个主首帧已过期。它们使用的主体参考资产已经变化，视频阶段会被阻止；可在下方逐镜重新生成，或使用“补齐
+                            / 更新主首帧”批量处理。
+                        </NAlert>
+                        <NAlert v-if="staleVideos" role="status" type="info" :show-icon="false" class="mt-4">
+                            当前有
+                            {{ staleVideos }}
+                            个主视频已过期。它们使用的主首帧或主体参考图已经变化；非覆盖模式批量生成时会只重建这些过期主视频。
+                        </NAlert>
+                        <ProductionReceipt v-if="session.receipt" :receipt="session.receipt" />
+                        <div v-if="query.data.value" class="production-pipeline mt-5">
+                            <article v-for="stage in stages" :key="stage.key" class="panel production-pipeline-card">
+                                <div class="flex items-start justify-between gap-3">
+                                    <div class="flex items-start gap-3">
+                                        <span class="production-step"><component :is="stage.icon" :size="17" /></span>
+                                        <div>
+                                            <p class="eyebrow">STEP {{ stage.code }}</p>
+                                            <h3 class="mt-2 text-sm font-semibold">{{ stage.title }}</h3>
+                                        </div>
                                    </div>
+                                    <span class="font-mono text-xs text-muted"
+                                        >{{ stage.done }} / {{ stage.data?.total ?? 0 }}</span
+                                    >
                                </div>
-                                <span class="font-mono text-xs text-muted"
-                                    >{{ stage.done }} / {{ stage.data?.total ?? 0 }}</span
-                                >
-                            </div>
-                            <p class="mt-4 min-h-10 text-xs leading-5 text-muted">{{ stage.description }}</p>
-                            <NProgress
-                                :aria-label="`${stage.title}完成数量`"
-                                type="line"
-                                :show-indicator="false"
-                                :height="4"
-                                :percentage="
-                                    Math.min(
-                                        100,
-                                        Math.max(
-                                            0,
-                                            (stage.done / Math.max(1, Math.max(stage.data?.total ?? 0, 1))) * 100
+                                <p class="mt-4 min-h-10 text-xs leading-5 text-muted">{{ stage.description }}</p>
+                                <NProgress
+                                    :aria-label="`${stage.title}完成数量`"
+                                    type="line"
+                                    :show-indicator="false"
+                                    :height="4"
+                                    :percentage="
+                                        Math.min(
+                                            100,
+                                            Math.max(
+                                                0,
+                                                (stage.done / Math.max(1, Math.max(stage.data?.total ?? 0, 1))) * 100
+                                            )
                                        )
-                                    )
-                                "
-                                class="mt-4"
-                            ></NProgress>
-                            <dl class="production-stats mt-4">
+                                    "
+                                    class="mt-4"
+                                ></NProgress>
+                                <dl class="production-stats mt-4">
+                                    <div>
+                                        <dt>可执行</dt>
+                                        <dd>{{ stage.data?.ready ?? 0 }}</dd>
+                                    </div>
+                                    <div>
+                                        <dt>已有结果</dt>
+                                        <dd>{{ stage.data?.skipped ?? 0 }}</dd>
+                                    </div>
+                                    <div>
+                                        <dt>阻塞</dt>
+                                        <dd>{{ stage.data?.blocked ?? 0 }}</dd>
+                                    </div>
+                                </dl>
+                                <p
+                                    v-if="stage.key === 'keyframes' && staleKeyframes"
+                                    class="mt-3 text-[11px] leading-5"
+                                >
+                                    已过期 {{ staleKeyframes }} · 会按当前主体参考资产重新生成
+                                </p>
+                                <p v-if="stage.key === 'videos' && staleVideos" class="mt-3 text-[11px] leading-5">
+                                    主视频已过期 {{ staleVideos }} · 会按当前主首帧与参考资产重新生成
+                                </p>
+                                <p
+                                    v-if="stage.key === 'keyframes' && identityBlocked"
+                                    class="mt-3 text-[11px] leading-5 text-danger"
+                                >
+                                    身份缺失 {{ query.data.value?.keyframes.missingIdentity ?? 0 }} · 母版缺失
+                                    {{ query.data.value?.keyframes.missingIdentityAnchor ?? 0 }} · 未锁定
+                                    {{ query.data.value?.keyframes.identityUnlocked ?? 0 }}
+                                </p>
+                                <ConfirmAction
+                                    class="mt-4"
+                                    :label="stage.action"
+                                    :disabled="blocked || !batchValid || !(stage.data?.ready ?? 0)"
+                                    acknowledgement
+                                    :description="
+                                        stage.key === 'videos'
+                                            ? staleVideos && !force
+                                                ? '当前存在过期主视频，非覆盖模式只会为这些镜头创建新的 Seedance 任务；新视频完成后会自动接替过期主视频。'
+                                                : '只为当前就绪镜头创建 Seedance 异步任务。创建成功不代表视频已经完成，任务会在后台继续运行。'
+                                            : stage.key === 'keyframes'
+                                              ? '处理缺失主首帧和参考资产已变化的过期主首帧。过期镜头会按当前主体参考资产重新生成并恢复为可用于视频的主首帧；覆盖模式只新增候选。'
+                                              : '只处理通过视频提示词就绪检查的镜头；覆盖模式会重写已有提示词。'
+                                    "
+                                    :primary="stage.key === 'videos'"
+                                    @confirm="run(stage.key)"
+                                />
+                            </article>
+                        </div>
+                        <div v-if="query.data.value" class="panel mt-4 p-5">
+                            <div class="flex flex-wrap items-center justify-between gap-3">
                                <div>
-                                    <dt>可执行</dt>
-                                    <dd>{{ stage.data?.ready ?? 0 }}</dd>
+                                    <h3 class="text-sm font-semibold">视频任务状态</h3>
+                                    <p class="mt-2 text-xs text-muted">
+                                        状态统计取每个镜头最近一次任务，不等同于主视频数量。
+                                    </p>
+                                </div>
+                                <ConfirmAction
+                                    label="重试失败视频"
+                                    :disabled="blocked || !batchValid || !query.data.value.videoStatus.failed"
+                                    acknowledgement
+                                    description="为当前最近一次状态为失败的镜头重新创建 Seedance 任务。成功镜头和进行中的镜头不会处理。"
+                                    @confirm="run('retry-videos')"
+                                />
+                            </div>
+                            <dl class="production-status-grid mt-4">
+                                <div>
+                                    <dt>完成</dt>
+                                    <dd>{{ query.data.value.videoStatus.completed }}</dd>
                                </div>
                                <div>
-                                    <dt>已有结果</dt>
-                                    <dd>{{ stage.data?.skipped ?? 0 }}</dd>
+                                    <dt>排队／生成</dt>
+                                    <dd>{{ videoRunning }}</dd>
                                </div>
                                <div>
-                                    <dt>阻塞</dt>
-                                    <dd>{{ stage.data?.blocked ?? 0 }}</dd>
+                                    <dt>失败</dt>
+                                    <dd>{{ query.data.value.videoStatus.failed }}</dd>
+                                </div>
+                                <div>
+                                    <dt>取消</dt>
+                                    <dd>{{ query.data.value.videoStatus.cancelled }}</dd>
+                                </div>
+                                <div>
+                                    <dt>未开始</dt>
+                                    <dd>{{ query.data.value.videoStatus.notStarted }}</dd>
                                </div>
                            </dl>
-                            <p v-if="stage.key === 'keyframes' && staleKeyframes" class="mt-3 text-[11px] leading-5">
-                                已过期 {{ staleKeyframes }} · 会按当前主体参考资产重新生成
-                            </p>
-                            <p v-if="stage.key === 'videos' && staleVideos" class="mt-3 text-[11px] leading-5">
-                                主视频已过期 {{ staleVideos }} · 会按当前主首帧与参考资产重新生成
-                            </p>
-                            <p
-                                v-if="stage.key === 'keyframes' && identityBlocked"
-                                class="mt-3 text-[11px] leading-5 text-danger"
-                            >
-                                身份缺失 {{ query.data.value?.keyframes.missingIdentity ?? 0 }} · 母版缺失
-                                {{ query.data.value?.keyframes.missingIdentityAnchor ?? 0 }} · 未锁定
-                                {{ query.data.value?.keyframes.identityUnlocked ?? 0 }}
-                            </p>
-                            <ConfirmAction
-                                class="mt-4"
-                                :label="stage.action"
-                                :disabled="blocked || !batchValid || !(stage.data?.ready ?? 0)"
-                                acknowledgement
-                                :description="
-                                    stage.key === 'videos'
-                                        ? staleVideos && !force
-                                            ? '当前存在过期主视频，非覆盖模式只会为这些镜头创建新的 Seedance 任务；新视频完成后会自动接替过期主视频。'
-                                            : '只为当前就绪镜头创建 Seedance 异步任务。创建成功不代表视频已经完成，任务会在后台继续运行。'
-                                        : stage.key === 'keyframes'
-                                          ? '处理缺失主首帧和参考资产已变化的过期主首帧。过期镜头会按当前主体参考资产重新生成并恢复为可用于视频的主首帧；覆盖模式只新增候选。'
-                                          : '只处理通过视频提示词就绪检查的镜头；覆盖模式会重写已有提示词。'
-                                "
-                                :primary="stage.key === 'videos'"
-                                @confirm="run(stage.key)"
-                            />
-                        </article>
-                    </div>
-                    <div v-if="query.data.value" class="panel mt-4 p-5">
-                        <div class="flex flex-wrap items-center justify-between gap-3">
-                            <div>
-                                <h3 class="text-sm font-semibold">视频任务状态</h3>
-                                <p class="mt-2 text-xs text-muted">
-                                    状态统计取每个镜头最近一次任务，不等同于主视频数量。
-                                </p>
-                            </div>
-                            <ConfirmAction
-                                label="重试失败视频"
-                                :disabled="blocked || !batchValid || !query.data.value.videoStatus.failed"
-                                acknowledgement
-                                description="为当前最近一次状态为失败的镜头重新创建 Seedance 任务。成功镜头和进行中的镜头不会处理。"
-                                @confirm="run('retry-videos')"
-                            />
                        </div>
-                        <dl class="production-status-grid mt-4">
-                            <div>
-                                <dt>完成</dt>
-                                <dd>{{ query.data.value.videoStatus.completed }}</dd>
-                            </div>
-                            <div>
-                                <dt>排队／生成</dt>
-                                <dd>{{ videoRunning }}</dd>
-                            </div>
-                            <div>
-                                <dt>失败</dt>
-                                <dd>{{ query.data.value.videoStatus.failed }}</dd>
-                            </div>
-                            <div>
-                                <dt>取消</dt>
-                                <dd>{{ query.data.value.videoStatus.cancelled }}</dd>
-                            </div>
-                            <div>
-                                <dt>未开始</dt>
-                                <dd>{{ query.data.value.videoStatus.notStarted }}</dd>
-                            </div>
-                        </dl>
-                    </div>
-                </div></NCollapseItem
-            ></NCollapse
+                    </div></NCollapseItem
+                ></NCollapse
+            ></NScrollbar
        >
        <div class="my-6 flex flex-wrap items-center justify-between gap-4">
            <div>
@@ -328,103 +345,108 @@ watch(
        </div>
        <div v-if="shot" class="panel production-workspace">
            <nav class="production-shot-list" aria-label="本集生产镜头">
-                <NButton
-                    v-for="item in shots"
-                    :key="item.shotId"
-                    :aria-current="item.shotId === shot.shotId ? 'true' : undefined"
-                    @click="selectedShot = item.shotId"
-                    class="production-shot-link"
-                    :class="{ selected: item.shotId === shot.shotId }"
-                    ><span class="font-mono text-[10px] text-muted">B{{ item.beatNo }} / S{{ item.shotNo }}</span
-                    ><span class="mt-1 block truncate text-xs font-medium">{{ item.title }}</span
-                    ><span
-                        v-if="
-                            query.data.value?.keyframes.items.find(row => row.shotId === item.shotId)
-                                ?.primaryKeyframeStale
-                        "
-                        class="mt-2 flex items-center gap-2 text-[10px]"
-                    >
-                        <CircleAlert :size="12" />主首帧已过期 </span
-                    ><span
-                        v-else-if="
-                            query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.primaryVideoStale
-                        "
-                        class="mt-2 flex items-center gap-2 text-[10px]"
-                    >
-                        <CircleAlert :size="12" />主视频已过期 </span
-                    ><span v-else class="mt-2 flex items-center gap-2 text-[10px] text-muted">
-                        <CheckCircle2
+                <NScrollbar class="panel-scroll" content-class="production-shot-list-content" x-scrollable>
+                    <NButton
+                        v-for="item in shots"
+                        :key="item.shotId"
+                        :aria-current="item.shotId === shot.shotId ? 'true' : undefined"
+                        @click="selectedShot = item.shotId"
+                        class="production-shot-link"
+                        :class="{ selected: item.shotId === shot.shotId }"
+                        ><span class="font-mono text-[10px] text-muted">B{{ item.beatNo }} / S{{ item.shotNo }}</span
+                        ><span class="mt-1 block truncate text-xs font-medium">{{ item.title }}</span
+                        ><span
                            v-if="
-                                query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
-                                'skipped'
+                                query.data.value?.keyframes.items.find(row => row.shotId === item.shotId)
+                                    ?.primaryKeyframeStale
                            "
-                            :size="12"
-                        />
-                        <CircleAlert
+                            class="mt-2 flex items-center gap-2 text-[10px]"
+                        >
+                            <CircleAlert :size="12" />主首帧已过期 </span
+                        ><span
                            v-else-if="
-                                query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
-                                'blocked'
+                                query.data.value?.videos.items.find(row => row.shotId === item.shotId)
+                                    ?.primaryVideoStale
                            "
-                            :size="12"
-                        />
-                        {{
-                            productionStatusLabel(
-                                query.data.value?.videoStatus.items.find(row => row.shotId === item.shotId)?.status ||
-                                    'not_started'
-                            )
-                        }}
-                    </span></NButton
-                >
+                            class="mt-2 flex items-center gap-2 text-[10px]"
+                        >
+                            <CircleAlert :size="12" />主视频已过期 </span
+                        ><span v-else class="mt-2 flex items-center gap-2 text-[10px] text-muted">
+                            <CheckCircle2
+                                v-if="
+                                    query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
+                                    'skipped'
+                                "
+                                :size="12"
+                            />
+                            <CircleAlert
+                                v-else-if="
+                                    query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
+                                    'blocked'
+                                "
+                                :size="12"
+                            />
+                            {{
+                                productionStatusLabel(
+                                    query.data.value?.videoStatus.items.find(row => row.shotId === item.shotId)
+                                        ?.status || 'not_started'
+                                )
+                            }}
+                        </span></NButton
+                    >
+                </NScrollbar>
            </nav>
-            <article class="min-w-0 p-5 lg:p-7">
-                <header class="mb-5 border-b border-line pb-5">
-                    <div class="flex flex-wrap items-start justify-between gap-3">
-                        <div>
-                            <p class="eyebrow">BEAT {{ shot.beatNo }} / SHOT {{ shot.shotNo }}</p>
-                            <h3 class="mt-2 text-lg font-semibold">{{ shot.title }}</h3>
+            <article class="production-detail min-w-0">
+                <NScrollbar class="panel-scroll" content-class="p-5 lg:p-7">
+                    <header class="mb-5 border-b border-line pb-5">
+                        <div class="flex flex-wrap items-start justify-between gap-3">
+                            <div>
+                                <p class="eyebrow">BEAT {{ shot.beatNo }} / SHOT {{ shot.shotNo }}</p>
+                                <h3 class="mt-2 text-lg font-semibold">{{ shot.title }}</h3>
+                            </div>
+                            <StatusBadge
+                                v-if="videoStatusItem"
+                                :status="videoStatusItem.status"
+                                :label="productionStatusLabel(videoStatusItem.status)"
+                            />
                        </div>
-                        <StatusBadge
-                            v-if="videoStatusItem"
-                            :status="videoStatusItem.status"
-                            :label="productionStatusLabel(videoStatusItem.status)"
-                        />
-                    </div>
-                    <p v-if="shot.description" class="mt-3 text-sm leading-7">{{ shot.description }}</p>
-                    <p class="mt-3 break-all font-mono text-[10px] text-muted">Shot ID · {{ shot.shotId }}</p>
-                    <NAlert
-                        v-if="keyframeItem?.primaryKeyframeStale"
-                        role="status"
-                        type="info"
-                        :show-icon="false"
-                        class="mt-4 text-xs"
-                    >
-                        主首帧已过期：当前主体参考资产与生成该首帧时不一致。旧首帧会保留，但不能继续用于视频生成。
-                    </NAlert>
-                    <NAlert
-                        v-if="videoItem?.primaryVideoStale"
-                        role="status"
-                        type="info"
-                        :show-icon="false"
-                        class="mt-4 text-xs"
-                    >
-                        主视频已过期：当前主首帧或主体参考图与生成该视频时不一致。旧视频仍保留，但需要重新生成后才能作为当前有效成片。
-                    </NAlert>
-                    <ul v-if="selectedIssues.length" class="alert alert-error mt-4 space-y-1" role="alert">
-                        <li v-for="(issue, index) in selectedIssues" :key="`${issue.code}-${index}`">
-                            {{ issueLabel(issue.code) }}：{{ issue.reason }}
-                        </li>
-                    </ul>
-                </header>
-                <ShotProductionAssets
-                    :key="shot.shotId"
-                    :project-id="id"
-                    :shot="shot"
-                    :prompt-readiness="promptItem"
-                    :keyframe-readiness="keyframeItem"
-                    :video-readiness="videoItem"
-                    :disabled="blocked"
-                    @changed="refreshProject"
-                />
+                        <p v-if="shot.description" class="mt-3 text-sm leading-7">{{ shot.description }}</p>
+                        <p class="mt-3 break-all font-mono text-[10px] text-muted">Shot ID · {{ shot.shotId }}</p>
+                        <NAlert
+                            v-if="keyframeItem?.primaryKeyframeStale"
+                            role="status"
+                            type="info"
+                            :show-icon="false"
+                            class="mt-4 text-xs"
+                        >
+                            主首帧已过期：当前主体参考资产与生成该首帧时不一致。旧首帧会保留，但不能继续用于视频生成。
+                        </NAlert>
+                        <NAlert
+                            v-if="videoItem?.primaryVideoStale"
+                            role="status"
+                            type="info"
+                            :show-icon="false"
+                            class="mt-4 text-xs"
+                        >
+                            主视频已过期：当前主首帧或主体参考图与生成该视频时不一致。旧视频仍保留，但需要重新生成后才能作为当前有效成片。
+                        </NAlert>
+                        <ul v-if="selectedIssues.length" class="alert alert-error mt-4 space-y-1" role="alert">
+                            <li v-for="(issue, index) in selectedIssues" :key="`${issue.code}-${index}`">
+                                {{ issueLabel(issue.code) }}：{{ issue.reason }}
+                            </li>
+                        </ul>
+                    </header>
+                    <ShotProductionAssets
+                        :key="shot.shotId"
+                        :project-id="id"
+                        :shot="shot"
+                        :prompt-readiness="promptItem"
+                        :keyframe-readiness="keyframeItem"
+                        :video-readiness="videoItem"
+                        :disabled="blocked"
+                        @changed="refreshProject"
+                    />
+                </NScrollbar>
            </article>
        </div>
        <EmptyState
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NAlert, NButton, NPageHeader, NSpin, NTab, NTabs, NEllipsis } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NTab, NTabs, NEllipsis } from 'naive-ui'
 import { RefreshCw } from '@lucide/vue'
 import { StatusBadge } from '../../components/ui'
 import { projectContextKey, useProjectData } from './context'
@@ -59,9 +59,10 @@ function switchWorkflow(path: string) {
                <NTab v-for="[path, label] in tabs" :key="path" :name="path">{{ label }}</NTab>
            </NTabs>
        </header>
-        <div
+        <NScrollbar
            v-if="context.error.value || operation.pending || operation.error || operation.notice"
            class="project-notices"
+            content-class="project-notices-content"
        >
            <NAlert v-if="context.error.value" type="error" :show-icon="false"
                >{{ context.error.value
@@ -72,7 +73,7 @@ function switchWorkflow(path: string) {
            >
            <NAlert v-if="operation.error" type="error" :show-icon="false">{{ operation.error }}</NAlert>
            <NAlert v-if="operation.notice" :show-icon="false" role="status">{{ operation.notice }}</NAlert>
-        </div>
+        </NScrollbar>
        <div class="project-view">
            <RouterView v-if="context.project.value" :key="id" />
            <NSpin
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
 import {
+    NScrollbar,
    NAlert,
    NButton,
    NCheckbox,
@@ -155,95 +156,99 @@ watch(
                </div>
            </section></template
        >
-        <NCollapse v-model:expanded-names="overview" class="workspace-overview"
-            ><NCollapseItem name="generation" title="生成配置、批量操作与回执"
-                ><div class="overview-content">
-                    <div class="generation-row">
-                        <div>
-                            <h3 class="text-sm font-semibold">
-                                <span class="mr-2 font-mono text-xs text-muted">01</span>导演摄影设计
-                            </h3>
-                            <p class="mt-2 text-xs leading-6 text-muted">
-                                景别、机位、运镜与构图。单集操作会重新生成并覆盖；批量默认跳过完整剧集。
-                            </p>
+        <NScrollbar class="workspace-overview" content-class="overview-scroll-content"
+            ><NCollapse v-model:expanded-names="overview"
+                ><NCollapseItem name="generation" title="生成配置、批量操作与回执"
+                    ><div class="overview-content">
+                        <div class="generation-row">
+                            <div>
+                                <h3 class="text-sm font-semibold">
+                                    <span class="mr-2 font-mono text-xs text-muted">01</span>导演摄影设计
+                                </h3>
+                                <p class="mt-2 text-xs leading-6 text-muted">
+                                    景别、机位、运镜与构图。单集操作会重新生成并覆盖；批量默认跳过完整剧集。
+                                </p>
+                            </div>
+                            <div class="flex flex-wrap gap-2">
+                                <ConfirmAction
+                                    label="生成本集导演设计"
+                                    :disabled="!allowed['direction-one']"
+                                    acknowledgement
+                                    description="调用模型生成当前整集的导演设计，校验通过后保存。如果此集已有设计，将覆盖原结果。"
+                                    @confirm="run('direction-one')"
+                                /><ConfirmAction
+                                    :label="force ? '重生成全部导演设计' : '补齐项目导演设计'"
+                                    :disabled="!allowed['direction-all']"
+                                    acknowledgement
+                                    :description="
+                                        force
+                                            ? '重新生成项目全部剧集的导演设计，覆盖已有结果。'
+                                            : '对整个项目生成导演设计，跳过已完整保存的剧集，可用于重试失败或未完成的剧集。'
+                                    "
+                                    @confirm="run('direction-all')"
+                                />
+                            </div>
                        </div>
-                        <div class="flex flex-wrap gap-2">
-                            <ConfirmAction
-                                label="生成本集导演设计"
-                                :disabled="!allowed['direction-one']"
-                                acknowledgement
-                                description="调用模型生成当前整集的导演设计，校验通过后保存。如果此集已有设计，将覆盖原结果。"
-                                @confirm="run('direction-one')"
-                            /><ConfirmAction
-                                :label="force ? '重生成全部导演设计' : '补齐项目导演设计'"
-                                :disabled="!allowed['direction-all']"
-                                acknowledgement
-                                :description="
-                                    force
-                                        ? '重新生成项目全部剧集的导演设计，覆盖已有结果。'
-                                        : '对整个项目生成导演设计，跳过已完整保存的剧集，可用于重试失败或未完成的剧集。'
-                                "
-                                @confirm="run('direction-all')"
-                            />
+                        <div class="generation-row">
+                            <div>
+                                <h3 class="text-sm font-semibold">
+                                    <span class="mr-2 font-mono text-xs text-muted">02</span>即时视觉状态
+                                </h3>
+                                <p class="mt-2 text-xs leading-6 text-muted">
+                                    表情、姿态、位置、环境与连续性。每集需要完整导演设计；批量中缺少前置设计的剧集会单独报错。
+                                </p>
+                            </div>
+                            <div class="flex flex-wrap gap-2">
+                                <ConfirmAction
+                                    label="生成本集即时状态"
+                                    :disabled="!allowed['visual-one']"
+                                    acknowledgement
+                                    description="依据本集导演设计和主体形态生成即时视觉状态，按配置尝试自动修复。校验通过才保存，已有状态将被覆盖。"
+                                    @confirm="run('visual-one')"
+                                /><ConfirmAction
+                                    :label="force ? '重生成全部即时状态' : '补齐项目即时状态'"
+                                    :disabled="!allowed['visual-all']"
+                                    acknowledgement
+                                    :description="
+                                        force
+                                            ? '重新生成整个项目的即时状态，覆盖已有结果。每集必须先有完整导演设计。'
+                                            : '补齐项目即时状态，跳过完整剧集；未完成导演设计的剧集会返回失败原因。'
+                                    "
+                                    @confirm="run('visual-all')"
+                                />
+                            </div>
                        </div>
-                    </div>
-                    <div class="generation-row">
-                        <div>
-                            <h3 class="text-sm font-semibold">
-                                <span class="mr-2 font-mono text-xs text-muted">02</span>即时视觉状态
-                            </h3>
-                            <p class="mt-2 text-xs leading-6 text-muted">
-                                表情、姿态、位置、环境与连续性。每集需要完整导演设计；批量中缺少前置设计的剧集会单独报错。
-                            </p>
-                        </div>
-                        <div class="flex flex-wrap gap-2">
-                            <ConfirmAction
-                                label="生成本集即时状态"
-                                :disabled="!allowed['visual-one']"
-                                acknowledgement
-                                description="依据本集导演设计和主体形态生成即时视觉状态，按配置尝试自动修复。校验通过才保存，已有状态将被覆盖。"
-                                @confirm="run('visual-one')"
-                            /><ConfirmAction
-                                :label="force ? '重生成全部即时状态' : '补齐项目即时状态'"
-                                :disabled="!allowed['visual-all']"
-                                acknowledgement
-                                :description="
-                                    force
-                                        ? '重新生成整个项目的即时状态，覆盖已有结果。每集必须先有完整导演设计。'
-                                        : '补齐项目即时状态，跳过完整剧集；未完成导演设计的剧集会返回失败原因。'
-                                "
-                                @confirm="run('visual-all')"
-                            />
-                        </div>
-                    </div>
-                    <p class="mt-4 text-[11px] leading-6 text-muted">
-                        修改或覆盖上游设计后，后端不会自动使旧状态、旧提示词失效；请按顺序重生成下游内容。自动修复次数仅用于
-                        VisualState。
-                    </p>
-                    <NCollapse class="mt-3 border-t border-line pt-3"
-                        ><NCollapseItem name="details"
-                            ><template #header>视频提示词批量操作</template>
-                            <p class="my-3 text-xs leading-6 text-muted">
-                                后端会先校验 GenerationSpec
-                                与主体参考图。这里只生成提示词；首帧、视频任务、就绪诊断与失败重试已整理到
-                                <RouterLink :to="`/projects/${id}/production`" class="text-button mx-1"
-                                    >镜头生产</RouterLink
-                                >。
-                            </p>
-                            <ConfirmAction
-                                :label="force ? '重生成全部视频提示词' : '补齐项目视频提示词'"
-                                :disabled="!allowed.prompts"
-                                acknowledgement
-                                :description="
-                                    force
-                                        ? '调用模型重新生成全项目镜头的视频提示词，覆盖已有正文。'
-                                        : '调用模型生成缺少视频提示词的镜头，已有提示词直接跳过。参考图缺失会返回失败。'
-                                "
-                                @confirm="run('prompts')" /></NCollapseItem
-                    ></NCollapse>
-                    <GenerationReceipt v-if="session.receipt" :receipt="session.receipt" /></div></NCollapseItem
-        ></NCollapse>
-        <div class="workspace-feedback">
+                        <p class="mt-4 text-[11px] leading-6 text-muted">
+                            修改或覆盖上游设计后，后端不会自动使旧状态、旧提示词失效；请按顺序重生成下游内容。自动修复次数仅用于
+                            VisualState。
+                        </p>
+                        <NCollapse class="mt-3 border-t border-line pt-3"
+                            ><NCollapseItem name="details"
+                                ><template #header>视频提示词批量操作</template>
+                                <p class="my-3 text-xs leading-6 text-muted">
+                                    后端会先校验 GenerationSpec
+                                    与主体参考图。这里只生成提示词；首帧、视频任务、就绪诊断与失败重试已整理到
+                                    <RouterLink :to="`/projects/${id}/production`" class="text-button mx-1"
+                                        >镜头生产</RouterLink
+                                    >。
+                                </p>
+                                <ConfirmAction
+                                    :label="force ? '重生成全部视频提示词' : '补齐项目视频提示词'"
+                                    :disabled="!allowed.prompts"
+                                    acknowledgement
+                                    :description="
+                                        force
+                                            ? '调用模型重新生成全项目镜头的视频提示词，覆盖已有正文。'
+                                            : '调用模型生成缺少视频提示词的镜头，已有提示词直接跳过。参考图缺失会返回失败。'
+                                    "
+                                    @confirm="run('prompts')" /></NCollapseItem
+                        ></NCollapse>
+                        <GenerationReceipt
+                            v-if="session.receipt"
+                            :receipt="session.receipt"
+                        /></div></NCollapseItem></NCollapse
+        ></NScrollbar>
+        <NScrollbar class="workspace-feedback">
            <NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mt-4"
                >{{ query.error.value }} 当前保留上次成功读取的数据，暂停生成操作。<NButton
                    @click="query.refresh"
@@ -269,7 +274,7 @@ watch(
            >
                本集导演设计尚未补齐，请先完成第 01 步，再生成本集即时状态。
            </NAlert>
-        </div>
+        </NScrollbar>
        <div class="my-6 flex flex-wrap items-center justify-between gap-4">
            <div>
                <h3 class="text-sm font-semibold">第 {{ episodeNo || '—' }} 集 · 镜头检查</h3>
@@ -306,57 +311,63 @@ watch(
        </div>
        <div v-else-if="shot" class="panel storyboard-workspace">
            <nav class="shot-list" aria-label="本集镜头">
-                <p class="px-4 pb-3 pt-5 text-[10px] text-muted">{{ shots.length }} 个镜头 · 按 Beat 排列</p>
-                <template v-for="(item, index) in shots" :key="item.shotId"
-                    ><h4
-                        v-if="index === 0 || shots[index - 1]?.beatNo !== item.beatNo"
-                        class="px-4 pb-2 pt-4 font-mono text-[10px] text-muted"
+                <NScrollbar class="panel-scroll" content-class="shot-list-content">
+                    <p class="px-4 pb-3 pt-5 text-[10px] text-muted">{{ shots.length }} 个镜头 · 按 Beat 排列</p>
+                    <template v-for="(item, index) in shots" :key="item.shotId"
+                        ><h4
+                            v-if="index === 0 || shots[index - 1]?.beatNo !== item.beatNo"
+                            class="px-4 pb-2 pt-4 font-mono text-[10px] text-muted"
+                        >
+                            BEAT {{ String(item.beatNo).padStart(2, '0') }}
+                        </h4>
+                        <NButton
+                            :aria-current="shot.shotId === item.shotId ? 'true' : undefined"
+                            @click="selectedShot = item.shotId"
+                            class="shot-link"
+                            :class="{ selected: shot.shotId === item.shotId }"
+                            ><span class="font-mono text-[10px] text-muted">{{
+                                String(item.shotNo).padStart(2, '0')
+                            }}</span
+                            ><span class="min-w-0"
+                                ><span class="block truncate text-xs font-medium">{{ item.title }}</span
+                                ><span class="mt-1 block text-[10px] text-muted"
+                                    >{{ item.direction ? '设计已保存' : '待设计' }} ·
+                                    {{ item.visualState ? '状态已保存' : '待状态' }}</span
+                                ></span
+                            ></NButton
+                        ></template
                    >
-                        BEAT {{ String(item.beatNo).padStart(2, '0') }}
-                    </h4>
-                    <NButton
-                        :aria-current="shot.shotId === item.shotId ? 'true' : undefined"
-                        @click="selectedShot = item.shotId"
-                        class="shot-link"
-                        :class="{ selected: shot.shotId === item.shotId }"
-                        ><span class="font-mono text-[10px] text-muted">{{ String(item.shotNo).padStart(2, '0') }}</span
-                        ><span class="min-w-0"
-                            ><span class="block truncate text-xs font-medium">{{ item.title }}</span
-                            ><span class="mt-1 block text-[10px] text-muted"
-                                >{{ item.direction ? '设计已保存' : '待设计' }} ·
-                                {{ item.visualState ? '状态已保存' : '待状态' }}</span
-                            ></span
-                        ></NButton
-                    ></template
-                >
+                </NScrollbar>
            </nav>
-            <article class="min-w-0 p-5 lg:p-7">
-                <header class="mb-6">
-                    <p class="eyebrow">
-                        BEAT {{ shot.beatNo }} / SHOT {{ shot.shotNo }}
-                        <span v-if="shot.durationSeconds" class="ml-3">{{ shot.durationSeconds }}s</span>
-                    </p>
-                    <h3 class="mt-2 text-lg font-semibold">{{ shot.title }}</h3>
-                    <p v-if="shot.description" class="mt-3 whitespace-pre-wrap text-sm leading-7">
-                        {{ shot.description }}
-                    </p>
-                    <p v-if="shot.visualFocus" class="mt-2 text-xs leading-6 text-muted">
-                        视觉重点：{{ shot.visualFocus }}
-                    </p>
-                    <p class="mt-3 break-all font-mono text-[10px] text-muted">Shot ID · {{ shot.shotId }}</p>
-                    <p class="mt-1 text-[10px] text-muted">
-                        标题与剧情描述取自最近可用 Breakdown 快照；以下设计与状态取自数据库。
-                    </p>
-                </header>
-                <div>
-                    <NTabs v-model:value="detailTab" type="line" size="small" aria-label="镜头详情"
-                        ><NTab name="design">设计与状态</NTab><NTab name="tools">参考图与生成规格</NTab></NTabs
-                    >
-                    <div v-if="detailTab === 'design'" class="pt-6"><ShotDesign :shot="shot" /></div>
-                    <div v-if="detailTab === 'tools'" class="pt-6">
-                        <ShotTools :key="shot.shotId" :project-id="id" :shot="shot" :disabled="blocked" />
+            <article class="storyboard-detail min-w-0">
+                <NScrollbar class="panel-scroll" content-class="p-5 lg:p-7">
+                    <header class="mb-6">
+                        <p class="eyebrow">
+                            BEAT {{ shot.beatNo }} / SHOT {{ shot.shotNo }}
+                            <span v-if="shot.durationSeconds" class="ml-3">{{ shot.durationSeconds }}s</span>
+                        </p>
+                        <h3 class="mt-2 text-lg font-semibold">{{ shot.title }}</h3>
+                        <p v-if="shot.description" class="mt-3 whitespace-pre-wrap text-sm leading-7">
+                            {{ shot.description }}
+                        </p>
+                        <p v-if="shot.visualFocus" class="mt-2 text-xs leading-6 text-muted">
+                            视觉重点：{{ shot.visualFocus }}
+                        </p>
+                        <p class="mt-3 break-all font-mono text-[10px] text-muted">Shot ID · {{ shot.shotId }}</p>
+                        <p class="mt-1 text-[10px] text-muted">
+                            标题与剧情描述取自最近可用 Breakdown 快照；以下设计与状态取自数据库。
+                        </p>
+                    </header>
+                    <div>
+                        <NTabs v-model:value="detailTab" type="line" size="small" aria-label="镜头详情"
+                            ><NTab name="design">设计与状态</NTab><NTab name="tools">参考图与生成规格</NTab></NTabs
+                        >
+                        <div v-if="detailTab === 'design'" class="pt-6"><ShotDesign :shot="shot" /></div>
+                        <div v-if="detailTab === 'tools'" class="pt-6">
+                            <ShotTools :key="shot.shotId" :project-id="id" :shot="shot" :disabled="blocked" />
+                        </div>
                    </div>
-                </div>
+                </NScrollbar>
            </article>
        </div>
        <EmptyState
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NTable } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NTable } from 'naive-ui'
 import { computed } from 'vue'
 import { Download } from '@lucide/vue'
 import { downloadText } from '../../../lib/format'
@@ -42,7 +42,7 @@ function exportReceipt() {
                共 {{ receipt.result.episodeCount }} 集 · 完成 {{ receipt.result.completedEpisodes }} · 跳过
                {{ receipt.result.skippedEpisodes }} · 失败 {{ receipt.result.failedEpisodes }}
            </p>
-            <div class="table-scroll">
+            <NScrollbar x-scrollable class="table-scroll">
                <NTable :single-line="false" class="project-table"
                    ><thead>
                        <tr>
@@ -74,7 +74,7 @@ function exportReceipt() {
                        </tr>
                    </tbody></NTable
                >
-            </div>
+            </NScrollbar>
        </template>
        <template v-else-if="receipt.kind === 'prompts'">
            <p class="mt-4 text-sm">
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCheckbox } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NCheckbox } from 'naive-ui'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 import { Download, ExternalLink, RefreshCw } from '@lucide/vue'
 import { storyboardApi } from '../api'
@@ -183,7 +183,9 @@ function exportResult(kind: 'spec' | 'prompt') {
                        >{{ spec.subjects.length }} 个主体 · {{ spec.durationSeconds }} 秒</span
                    ><NButton @click="exportResult('spec')" text size="small"><Download :size="13" />导出规格</NButton>
                </div>
-                <pre class="storyboard-json mt-3">{{ JSON.stringify(spec, null, 2) }}</pre>
+                <NScrollbar class="code-scroll mt-3" x-scrollable>
+                    <pre class="storyboard-json">{{ JSON.stringify(spec, null, 2) }}</pre>
+                </NScrollbar>
            </template>
        </section>
        <section class="border-t border-line pt-6">
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
-import { NAlert, NButton, NCheckbox, NCollapse, NCollapseItem, NInput, NInputNumber, NSelect, NTag } from 'naive-ui'
+import {
+    NScrollbar,
+    NAlert,
+    NButton,
+    NCheckbox,
+    NCollapse,
+    NCollapseItem,
+    NInput,
+    NInputNumber,
+    NSelect,
+    NTag
+} from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { UserCheck } from '@lucide/vue'
@@ -141,187 +152,188 @@ watch(
                >
            </div></template
        >
-        <NAlert
+        <NScrollbar
+            class="workspace-feedback"
            v-if="catalog.error.value || styleQuery.error.value || castingQuery.error.value"
-            role="alert"
-            type="error"
-            :show-icon="false"
-            class="mt-4"
-            >{{ catalog.error.value || styleQuery.error.value || castingQuery.error.value }}
-            当前相关操作已暂停，请刷新核对后端。
-        </NAlert>
-        <NCollapse v-model:expanded-names="overview" class="workspace-overview"
-            ><NCollapseItem name="casting" title="角色选角总览与批量操作"
-                ><div class="overview-content">
-                    <NAlert type="info" :show-icon="false" class="mt-5 text-xs">
-                        Character 现在需要依次完成身份文本、选角候选、确认演员并锁定
-                        Identity，之后首帧才能就绪。未明确人物背景时，AI
-                        默认以中国人物作为选角基线；项目和角色的明确事实始终优先。场景和道具仍使用普通身份母版流程。
-                    </NAlert>
-                    <NAlert v-if="styleQuery.data.value && !hasStyle" type="info" :show-icon="false" class="mt-4">
-                        先创建项目视觉风格，才能 AI 生成身份或身份图片。<RouterLink
-                            :to="`/projects/${projectId}/visual-style`"
-                            class="text-button ml-2"
-                            >设置视觉风格 →</RouterLink
-                        ></NAlert
-                    >
-                    <section v-if="casting" class="panel my-5 p-5" aria-label="角色选角流程">
-                        <div class="flex flex-wrap items-start justify-between gap-4">
-                            <div class="flex items-start gap-3">
-                                <span class="production-step"><UserCheck :size="17" /></span>
-                                <div>
-                                    <h3 class="text-sm font-semibold">角色选角</h3>
-                                    <p class="mt-2 text-xs leading-6 text-muted">
-                                        只处理 Character。每张候选都从 Identity 独立生成，不复用旧
-                                        Anchor；确认选择时才会同时切换 Anchor 并锁定 Identity。
-                                    </p>
-                                </div>
-                            </div>
-                            <span class="font-mono text-xs text-muted"
-                                >{{ casting.ready }} / {{ casting.total }} 已完成</span
-                            >
-                        </div>
-                        <dl class="casting-stats mt-4">
-                            <div>
-                                <dt>缺身份文本</dt>
-                                <dd>{{ casting.missingIdentity }}</dd>
-                            </div>
-                            <div>
-                                <dt>缺候选图</dt>
-                                <dd>{{ casting.missingAnchor }}</dd>
-                            </div>
-                            <div>
-                                <dt>待确认演员</dt>
-                                <dd>{{ casting.candidatePending }}</dd>
-                            </div>
-                            <div>
-                                <dt>母版未锁定</dt>
-                                <dd>{{ casting.unlocked }}</dd>
-                            </div>
-                            <div>
-                                <dt>选角完成</dt>
-                                <dd>{{ casting.ready }}</dd>
-                            </div>
-                        </dl>
-                        <div class="mt-5 flex flex-wrap items-end gap-4 border-t border-line pt-4">
-                            <label class="w-28">
-                                <span class="field-label">并发数</span>
-                                <NInputNumber
-                                    :disabled="operation.pending"
-                                    :value="typeof concurrency === 'number' ? concurrency : null"
-                                    @update:value="concurrency = $event ?? 0"
-                                    :min="1"
-                                    :step="1"
-                                ></NInputNumber>
-                            </label>
-                            <label class="w-28">
-                                <span class="field-label">本批上限</span>
-                                <NInputNumber
-                                    :disabled="operation.pending"
-                                    :value="typeof candidateLimit === 'number' ? candidateLimit : null"
-                                    @update:value="candidateLimit = $event ?? 0"
-                                    :min="1"
-                                    :step="1"
-                                ></NInputNumber>
-                            </label>
-                            <NCheckbox
-                                v-model:checked="force"
-                                :disabled="operation.pending"
-                                class="flex gap-2 pb-2 text-xs"
-                                >覆盖未锁定身份文本
-                            </NCheckbox>
-                            <ConfirmAction
-                                :label="force ? '重生成角色身份文本' : '补齐角色身份文本'"
-                                :disabled="blocked || !hasStyle || !batchValid || dirty || !casting.total"
-                                acknowledgement
-                                description="只生成 Character Identity 文本，不生成图片。已锁定角色始终跳过；覆盖文本不会自动更新已有候选图。"
-                                @confirm="generateProject(true)"
-                            />
-                            <ConfirmAction
-                                label="生成选角候选"
-                                :disabled="
-                                    castingBlocked ||
-                                    !hasStyle ||
-                                    !batchValid ||
-                                    !candidateLimitValid ||
-                                    !casting.missingAnchor
-                                "
-                                acknowledgement
-                                description="最多按本批上限为缺少 Anchor 的 Character 调用 Seedream，各自独立生成一张停用的 primary 候选，不复用旧身份母版。已有候选、已有母版或已完成选角的角色不会重复处理。"
-                                @confirm="generateCastingCandidates"
-                            />
-                        </div>
-                        <p v-if="!batchValid || !candidateLimitValid" class="mt-3 text-xs text-danger">
-                            并发数与本批上限都必须是正整数。
-                        </p>
-                        <div class="casting-list mt-5">
-                            <NButton
-                                v-for="item in casting.items"
-                                :key="item.subjectId"
-                                @click="select(item.subjectId)"
-                                class="casting-item"
-                                :class="{ selected: selectedId === item.subjectId }"
-                                ><span class="min-w-0">
-                                    <span class="block truncate text-xs font-medium">{{ item.subjectName }}</span>
-                                    <span class="mt-1 block font-mono text-[10px] text-muted">{{
-                                        item.subjectRef
-                                    }}</span> </span
-                                ><StatusBadge :status="item.status" :label="castingStatusLabel(item.status)"
-                            /></NButton>
-                        </div>
-                    </section>
-                    <NCollapse class="panel mb-5 p-5"
-                        ><NCollapseItem name="details"
-                            ><template #header>高级：全部主体身份文本</template>
-                            <p class="mt-3 text-xs leading-6 text-muted">
-                                同时处理 Character、Scene 和
-                                Prop；角色选角建议优先使用上方专用入口。已锁定身份始终跳过。
-                            </p>
-                            <ConfirmAction
-                                class="mt-4"
-                                :label="force ? '重生成全部未锁定身份' : '补齐全部主体身份文本'"
-                                :disabled="blocked || !hasStyle || !batchValid || dirty || !subjects.length"
-                                acknowledgement
-                                description="生成全项目主体身份描述与提示词，不生成图片。覆盖不会自动更新旧身份图、形态图、首帧或视频。"
-                                @confirm="generateProject(false)" /></NCollapseItem
-                    ></NCollapse>
-                    <section v-if="session.receipt" class="panel mb-5 p-5" aria-label="身份文本批量回执">
-                        <div class="flex justify-between gap-3">
-                            <h3 class="text-sm font-medium">{{ session.receipt.title }} · 本次回执</h3>
-                            <NButton @click="exportReceipt" text size="small">导出诊断</NButton>
-                        </div>
-                        <p v-if="session.receipt.kind === 'identities'" class="mt-3 text-xs text-muted">
-                            共 {{ session.receipt.result.total }} 个主体 · 目标
-                            {{ session.receipt.result.targetCount }} · 生成 {{ session.receipt.result.generated }} ·
-                            跳过 {{ session.receipt.result.skipped }}（含锁定
-                            {{ session.receipt.result.skippedLocked }}）· 失败 {{ session.receipt.result.failed }}
-                        </p>
-                        <p v-else class="mt-3 text-xs text-muted">
-                            共 {{ session.receipt.result.totalCharacters }} 个角色 · 缺候选
-                            {{ session.receipt.result.missingAnchor }} · 本批目标
-                            {{ session.receipt.result.targetCount }} · 已生成 {{ session.receipt.result.generated }} ·
-                            失败 {{ session.receipt.result.failed }}
-                        </p>
-                        <NAlert
-                            v-if="session.receipt.result.failed"
-                            role="alert"
-                            type="error"
-                            :show-icon="false"
-                            class="mt-3"
-                        >
-                            本次存在部分失败，成功结果不会回滚。请检查逐角色原因后再重试。
+            ><NAlert role="alert" type="error" :show-icon="false"
+                >{{ catalog.error.value || styleQuery.error.value || castingQuery.error.value }}
+                当前相关操作已暂停，请刷新核对后端。
+            </NAlert></NScrollbar
+        >
+        <NScrollbar class="workspace-overview" content-class="overview-scroll-content"
+            ><NCollapse v-model:expanded-names="overview"
+                ><NCollapseItem name="casting" title="角色选角总览与批量操作"
+                    ><div class="overview-content">
+                        <NAlert type="info" :show-icon="false" class="mt-5 text-xs">
+                            Character 现在需要依次完成身份文本、选角候选、确认演员并锁定
+                            Identity，之后首帧才能就绪。未明确人物背景时，AI
+                            默认以中国人物作为选角基线；项目和角色的明确事实始终优先。场景和道具仍使用普通身份母版流程。
                        </NAlert>
-                        <ul class="mt-3 space-y-2 text-xs text-danger">
-                            <li v-for="failure in session.receipt.result.failures" :key="failure.subjectId">
-                                {{ failure.subjectRef }} · {{ failure.subjectId }}：{{ failure.error }}
-                            </li>
-                        </ul>
-                        <p class="mt-3 text-[11px] text-muted">
-                            回执仅保留于当前浏览器会话；最终状态以刷新后的正式记录为准。
-                        </p>
-                    </section>
-                </div></NCollapseItem
-            ></NCollapse
+                        <NAlert v-if="styleQuery.data.value && !hasStyle" type="info" :show-icon="false" class="mt-4">
+                            先创建项目视觉风格，才能 AI 生成身份或身份图片。<RouterLink
+                                :to="`/projects/${projectId}/visual-style`"
+                                class="text-button ml-2"
+                                >设置视觉风格 →</RouterLink
+                            ></NAlert
+                        >
+                        <section v-if="casting" class="panel my-5 p-5" aria-label="角色选角流程">
+                            <div class="flex flex-wrap items-start justify-between gap-4">
+                                <div class="flex items-start gap-3">
+                                    <span class="production-step"><UserCheck :size="17" /></span>
+                                    <div>
+                                        <h3 class="text-sm font-semibold">角色选角</h3>
+                                        <p class="mt-2 text-xs leading-6 text-muted">
+                                            只处理 Character。每张候选都从 Identity 独立生成，不复用旧
+                                            Anchor；确认选择时才会同时切换 Anchor 并锁定 Identity。
+                                        </p>
+                                    </div>
+                                </div>
+                                <span class="font-mono text-xs text-muted"
+                                    >{{ casting.ready }} / {{ casting.total }} 已完成</span
+                                >
+                            </div>
+                            <dl class="casting-stats mt-4">
+                                <div>
+                                    <dt>缺身份文本</dt>
+                                    <dd>{{ casting.missingIdentity }}</dd>
+                                </div>
+                                <div>
+                                    <dt>缺候选图</dt>
+                                    <dd>{{ casting.missingAnchor }}</dd>
+                                </div>
+                                <div>
+                                    <dt>待确认演员</dt>
+                                    <dd>{{ casting.candidatePending }}</dd>
+                                </div>
+                                <div>
+                                    <dt>母版未锁定</dt>
+                                    <dd>{{ casting.unlocked }}</dd>
+                                </div>
+                                <div>
+                                    <dt>选角完成</dt>
+                                    <dd>{{ casting.ready }}</dd>
+                                </div>
+                            </dl>
+                            <div class="mt-5 flex flex-wrap items-end gap-4 border-t border-line pt-4">
+                                <label class="w-28">
+                                    <span class="field-label">并发数</span>
+                                    <NInputNumber
+                                        :disabled="operation.pending"
+                                        :value="typeof concurrency === 'number' ? concurrency : null"
+                                        @update:value="concurrency = $event ?? 0"
+                                        :min="1"
+                                        :step="1"
+                                    ></NInputNumber>
+                                </label>
+                                <label class="w-28">
+                                    <span class="field-label">本批上限</span>
+                                    <NInputNumber
+                                        :disabled="operation.pending"
+                                        :value="typeof candidateLimit === 'number' ? candidateLimit : null"
+                                        @update:value="candidateLimit = $event ?? 0"
+                                        :min="1"
+                                        :step="1"
+                                    ></NInputNumber>
+                                </label>
+                                <NCheckbox
+                                    v-model:checked="force"
+                                    :disabled="operation.pending"
+                                    class="flex gap-2 pb-2 text-xs"
+                                    >覆盖未锁定身份文本
+                                </NCheckbox>
+                                <ConfirmAction
+                                    :label="force ? '重生成角色身份文本' : '补齐角色身份文本'"
+                                    :disabled="blocked || !hasStyle || !batchValid || dirty || !casting.total"
+                                    acknowledgement
+                                    description="只生成 Character Identity 文本，不生成图片。已锁定角色始终跳过；覆盖文本不会自动更新已有候选图。"
+                                    @confirm="generateProject(true)"
+                                />
+                                <ConfirmAction
+                                    label="生成选角候选"
+                                    :disabled="
+                                        castingBlocked ||
+                                        !hasStyle ||
+                                        !batchValid ||
+                                        !candidateLimitValid ||
+                                        !casting.missingAnchor
+                                    "
+                                    acknowledgement
+                                    description="最多按本批上限为缺少 Anchor 的 Character 调用 Seedream，各自独立生成一张停用的 primary 候选，不复用旧身份母版。已有候选、已有母版或已完成选角的角色不会重复处理。"
+                                    @confirm="generateCastingCandidates"
+                                />
+                            </div>
+                            <p v-if="!batchValid || !candidateLimitValid" class="mt-3 text-xs text-danger">
+                                并发数与本批上限都必须是正整数。
+                            </p>
+                            <div class="casting-list mt-5">
+                                <NButton
+                                    v-for="item in casting.items"
+                                    :key="item.subjectId"
+                                    @click="select(item.subjectId)"
+                                    class="casting-item"
+                                    :class="{ selected: selectedId === item.subjectId }"
+                                    ><span class="min-w-0">
+                                        <span class="block truncate text-xs font-medium">{{ item.subjectName }}</span>
+                                        <span class="mt-1 block font-mono text-[10px] text-muted">{{
+                                            item.subjectRef
+                                        }}</span> </span
+                                    ><StatusBadge :status="item.status" :label="castingStatusLabel(item.status)"
+                                /></NButton>
+                            </div>
+                        </section>
+                        <NCollapse class="panel mb-5 p-5"
+                            ><NCollapseItem name="details"
+                                ><template #header>高级：全部主体身份文本</template>
+                                <p class="mt-3 text-xs leading-6 text-muted">
+                                    同时处理 Character、Scene 和
+                                    Prop；角色选角建议优先使用上方专用入口。已锁定身份始终跳过。
+                                </p>
+                                <ConfirmAction
+                                    class="mt-4"
+                                    :label="force ? '重生成全部未锁定身份' : '补齐全部主体身份文本'"
+                                    :disabled="blocked || !hasStyle || !batchValid || dirty || !subjects.length"
+                                    acknowledgement
+                                    description="生成全项目主体身份描述与提示词，不生成图片。覆盖不会自动更新旧身份图、形态图、首帧或视频。"
+                                    @confirm="generateProject(false)" /></NCollapseItem
+                        ></NCollapse>
+                        <section v-if="session.receipt" class="panel mb-5 p-5" aria-label="身份文本批量回执">
+                            <div class="flex justify-between gap-3">
+                                <h3 class="text-sm font-medium">{{ session.receipt.title }} · 本次回执</h3>
+                                <NButton @click="exportReceipt" text size="small">导出诊断</NButton>
+                            </div>
+                            <p v-if="session.receipt.kind === 'identities'" class="mt-3 text-xs text-muted">
+                                共 {{ session.receipt.result.total }} 个主体 · 目标
+                                {{ session.receipt.result.targetCount }} · 生成 {{ session.receipt.result.generated }} ·
+                                跳过 {{ session.receipt.result.skipped }}（含锁定
+                                {{ session.receipt.result.skippedLocked }}）· 失败 {{ session.receipt.result.failed }}
+                            </p>
+                            <p v-else class="mt-3 text-xs text-muted">
+                                共 {{ session.receipt.result.totalCharacters }} 个角色 · 缺候选
+                                {{ session.receipt.result.missingAnchor }} · 本批目标
+                                {{ session.receipt.result.targetCount }} · 已生成
+                                {{ session.receipt.result.generated }} · 失败 {{ session.receipt.result.failed }}
+                            </p>
+                            <NAlert
+                                v-if="session.receipt.result.failed"
+                                role="alert"
+                                type="error"
+                                :show-icon="false"
+                                class="mt-3"
+                            >
+                                本次存在部分失败，成功结果不会回滚。请检查逐角色原因后再重试。
+                            </NAlert>
+                            <ul class="mt-3 space-y-2 text-xs text-danger">
+                                <li v-for="failure in session.receipt.result.failures" :key="failure.subjectId">
+                                    {{ failure.subjectRef }} · {{ failure.subjectId }}：{{ failure.error }}
+                                </li>
+                            </ul>
+                            <p class="mt-3 text-[11px] text-muted">
+                                回执仅保留于当前浏览器会话；最终状态以刷新后的正式记录为准。
+                            </p>
+                        </section>
+                    </div></NCollapseItem
+                ></NCollapse
+            ></NScrollbar
        >
        <div v-if="subjects.length" class="identity-workspace">
            <aside class="panel min-w-0 p-4">
@@ -346,7 +358,10 @@ watch(
                    ]"
                    class="mt-3"
                ></NSelect>
-                <div class="identity-subject-list mt-4">
+                <NScrollbar
+                    class="identity-subject-list panel-scroll mt-4"
+                    content-class="identity-subject-list-content"
+                >
                    <NButton
                        v-for="item in filtered"
                        :key="item.id"
@@ -367,7 +382,7 @@ watch(
                        ></NButton
                    >
                    <p v-if="!filtered.length" class="py-6 text-xs text-muted">没有匹配主体，请调整筛选。</p>
-                </div>
+                </NScrollbar>
                <NButton
                    :disabled="catalog.loading.value || castingQuery.loading.value"
                    @click="refreshDirectory"
@@ -378,7 +393,7 @@ watch(
                    刷新主体目录
                </NButton>
            </aside>
-            <div class="min-w-0">
+            <NScrollbar class="identity-detail panel-scroll min-w-0">
                <NAlert v-if="pendingSelection" type="info" :show-icon="false" class="mb-4"
                    ><p class="text-xs">当前主体有未保存修改，切换会丢弃草稿。</p>
                    <div class="mt-3 flex gap-3">
@@ -495,7 +510,7 @@ watch(
                        >
                    </div>
                </section>
-            </div>
+            </NScrollbar>
        </div>
        <p v-else-if="catalog.loading.value" class="py-8 text-sm text-muted" role="status">正在读取正式主体目录…</p>
        <EmptyState
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCollapse, NCollapseItem, NTag } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NCollapse, NCollapseItem, NTag } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { AssetImage, StatusBadge } from '../../../components/ui'
 import { referenceImageUrl } from '../../../lib/assets'
@@ -132,7 +132,12 @@ function chooseAnchor() {
                本次锚定图片 ID：{{ readImageProvenance(selected.rawJson).referenceImageId }}
            </p>
            <p class="mt-2 break-all font-mono text-[10px] text-muted">Identity image ID · {{ selected.id }}</p>
-            <div class="image-history mt-4" aria-label="身份图片历史">
+            <NScrollbar
+                x-scrollable
+                content-class="image-history-content"
+                class="image-history mt-4"
+                aria-label="身份图片历史"
+            >
                <NButton
                    v-for="image in images"
                    :key="image.id"
@@ -154,7 +159,7 @@ function chooseAnchor() {
                              : identityViewLabels[image.viewType]
                    }}</span></NButton
                >
-            </div>
+            </NScrollbar>
        </template>
        <p v-else class="py-8 text-sm text-muted">尚无身份参考图。先保存身份提示词，再生成第一张母版。</p>
    </section>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCollapse, NCollapseItem, NTag } from 'naive-ui'
+import { NScrollbar, NAlert, NButton, NCollapse, NCollapseItem, NTag } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { ExternalLink, RefreshCw } from '@lucide/vue'
 import { AppDialog, AssetImage, StatusBadge } from '../../../components/ui'
@@ -159,7 +159,12 @@ async function choosePrimary() {
                        : '此记录未提供身份母版来源，不能据此判断是否使用了当前母版。'
                }}
            </p>
-            <div class="image-history mt-5" aria-label="图片历史">
+            <NScrollbar
+                x-scrollable
+                content-class="image-history-content"
+                class="image-history mt-5"
+                aria-label="图片历史"
+            >
                <NButton
                    v-for="image in images"
                    :key="image.id"
@@ -185,7 +190,7 @@ async function choosePrimary() {
                              ]
                    }}</span></NButton
                >
-            </div>
+            </NScrollbar>
        </div>
        <p v-else class="py-10 text-center text-sm text-muted">
            {{ query.loading.value ? '正在读取图片记录…' : '此形态尚无图片记录，可以先生成一张。' }}
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NEmpty, NTimeline, NTimelineItem } from 'naive-ui'
+import { NScrollbar, NEmpty, NTimeline, NTimelineItem } from 'naive-ui'
 import { Clock3 } from '@lucide/vue'
 import { formatDate, nodeLabel } from '../../lib/format'
 import { workflowCheckpoints } from './selectors'
@@ -13,29 +13,33 @@ const history = computed(() => workflowCheckpoints(props.checkpoints, props.work

 <template>
    <aside class="history-panel">
-        <h3 class="mb-1 flex items-center gap-2 text-sm font-semibold"><Clock3 :size="15" />执行记录</h3>
-        <p class="mb-6 text-xs leading-5 text-muted">最近 18 个 checkpoint · 自动刷新</p>
-        <NEmpty v-if="!history.length" size="small" description="工作流尚未保存执行记录。" />
-        <NTimeline v-else>
-            <NTimelineItem
-                v-for="item in history"
-                :key="item.checkpointId"
-                :type="item.state.workflowExecution?.status === 'failed' ? 'error' : 'default'"
-            >
-                <p class="text-xs font-medium">{{ nodeLabel(item.metadata?.nodeName) }}</p>
-                <p class="mt-1 text-[11px] text-muted">
-                    {{ formatDate(item.createdAt)
-                    }}<span v-if="item.metadata?.nodeDurationMs">
-                        · {{ (item.metadata.nodeDurationMs / 1000).toFixed(1) }}s</span
-                    >
-                </p>
-                <span v-if="item.state.workflowExecution?.status === 'failed'" class="mt-1 block text-xs text-danger"
-                    >运行失败</span
+        <NScrollbar class="panel-scroll" content-class="history-content">
+            <h3 class="mb-1 flex items-center gap-2 text-sm font-semibold"><Clock3 :size="15" />执行记录</h3>
+            <p class="mb-6 text-xs leading-5 text-muted">最近 18 个 checkpoint · 自动刷新</p>
+            <NEmpty v-if="!history.length" size="small" description="工作流尚未保存执行记录。" />
+            <NTimeline v-else>
+                <NTimelineItem
+                    v-for="item in history"
+                    :key="item.checkpointId"
+                    :type="item.state.workflowExecution?.status === 'failed' ? 'error' : 'default'"
                >
-            </NTimelineItem>
-        </NTimeline>
-        <p class="mt-5 border-t border-line pt-4 text-[11px] leading-5 text-muted">
-            记录在节点或批次结束后更新，长时间无新记录不一定意味着任务失败。
-        </p>
+                    <p class="text-xs font-medium">{{ nodeLabel(item.metadata?.nodeName) }}</p>
+                    <p class="mt-1 text-[11px] text-muted">
+                        {{ formatDate(item.createdAt)
+                        }}<span v-if="item.metadata?.nodeDurationMs">
+                            · {{ (item.metadata.nodeDurationMs / 1000).toFixed(1) }}s</span
+                        >
+                    </p>
+                    <span
+                        v-if="item.state.workflowExecution?.status === 'failed'"
+                        class="mt-1 block text-xs text-danger"
+                        >运行失败</span
+                    >
+                </NTimelineItem>
+            </NTimeline>
+            <p class="mt-5 border-t border-line pt-4 text-[11px] leading-5 text-muted">
+                记录在节点或批次结束后更新，长时间无新记录不一定意味着任务失败。
+            </p>
+        </NScrollbar>
    </aside>
 </template>
@@ -1,4 +1,5 @@
 import { computed, ref } from 'vue'
+import { NScrollbar } from 'naive-ui'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
@@ -142,6 +143,45 @@ afterEach(() => {
 })

 describe('内容级滚动下的生产反馈', () => {
+    it('生产目录和资产详情由两个独立 NScrollbar 接管，切镜头不会新增生产请求', async () => {
+        const fetcher = vi.fn<typeof fetch>().mockImplementation(async url => {
+            const path = String(url)
+            if (path.includes('/storyboard-directions')) return jsonResponse(directionsResult(fixture.id))
+            if (path.includes('/readiness') || path.endsWith('/videos/status'))
+                return jsonResponse({
+                    total: 2,
+                    ready: 0,
+                    skipped: 0,
+                    blocked: 0,
+                    completed: 0,
+                    queued: 0,
+                    pending: 0,
+                    running: 0,
+                    failed: 0,
+                    cancelled: 0,
+                    notStarted: 2,
+                    items: []
+                })
+            return jsonResponse([])
+        })
+        vi.stubGlobal('fetch', fetcher)
+        wrapper = mount(ProductionPage, {
+            attachTo: document.body,
+            global: { provide: { [projectContextKey as symbol]: context() }, stubs: { RouterLink: true } }
+        })
+        await flushPromises()
+        const directory = wrapper.get('.production-shot-list')
+        const detail = wrapper.get('.production-detail')
+        expect(directory.getComponent(NScrollbar).props('xScrollable')).toBe(true)
+        expect(detail.get('.panel-scroll').classes()).toContain('n-scrollbar')
+        expect(directory.get('.n-scrollbar-container').element).not.toBe(detail.get('.n-scrollbar-container').element)
+        const items = directory.findAll('.production-shot-link')
+        expect(items).toHaveLength(2)
+        await items[1]!.trigger('click')
+        await flushPromises()
+        expect(items[1]!.attributes('aria-current')).toBe('true')
+        expect(fetcher.mock.calls.every(([, init]) => init?.method === 'GET')).toBe(true)
+    })
    it('默认折叠总览时查询错误仍显示在内容区外层', async () => {
        vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockRejectedValue(new Error('生产连接中断')))
        wrapper = mount(ProductionPage, {
@@ -70,7 +70,7 @@
    }
    .identity-subject-list {
        max-height: 560px;
-        overflow-y: auto;
+        overflow: hidden;
    }
    .identity-subject-item {
        display: block;
@@ -248,7 +248,7 @@
        border-color: var(--color-accent);
    }
    .table-scroll {
-        overflow-x: auto;
+        overflow: hidden;
    }
    .project-table {
        width: 100%;
@@ -336,7 +336,7 @@
    }
    .production-shot-list {
        max-height: 760px;
-        overflow-y: auto;
+        overflow: hidden;
        border-right: 1px solid var(--color-line);
        background: var(--app-surface);
        padding-block: 8px;
@@ -413,7 +413,7 @@
        .production-shot-list {
            display: flex;
            max-height: none;
-            overflow-x: auto;
+            overflow: hidden;
            border-right: none;
            border-bottom: 1px solid var(--color-line);
        }
@@ -565,10 +565,7 @@
        height: min(48vh, 480px);
    }
    .image-history {
-        display: flex;
-        gap: 12px;
-        overflow-x: auto;
-        padding: 4px;
+        overflow: hidden;
    }
    .image-history-item {
        width: 110px;
@@ -615,7 +612,7 @@
    }
    .shot-list {
        max-height: 1000px;
-        overflow-y: auto;
+        overflow: hidden;
        border-right: 1px solid var(--color-line);
        background: var(--app-surface);
        padding: 0 8px 20px;
@@ -661,8 +658,6 @@
        background: var(--app-subtle);
    }
    .storyboard-json {
-        overflow: auto;
-        max-height: 440px;
        padding: 16px;
        border-radius: 4px;
        background: var(--app-subtle);
@@ -680,7 +675,7 @@
        padding: 0 7px 20px;
        background: var(--app-surface);
        max-height: 850px;
-        overflow-y: auto;
+        overflow: hidden;
    }
    .episode-link {
        display: flex;
@@ -757,8 +752,6 @@
        overflow-wrap: anywhere;
    }
    .json-view {
-        max-height: 420px;
-        overflow: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        padding: 16px;
@@ -930,7 +923,7 @@
    }
    .episode-list {
        display: flex;
-        overflow-x: auto;
+        overflow: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
        padding: 8px;