feat: 优化剧集连续阅读布局与目录滚动联动

src/features/create-drama/CreateDramaPage.vue

@@ -2,7 +2,7 @@
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
 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 { ArrowRight, Download, Check, Circle, History } from '@lucide/vue'
 import { EmptyState } from '../../components/ui'
 import { useProjectContext } from '../projects/context'
 import { projectsApi } from '../projects/api'
@@ -11,15 +11,15 @@ import { getOperation, runOperation } from '../workflows/operations'
 import HistoryPanel from '../workflows/HistoryPanel.vue'
 import ConfirmAction from '../workflows/ConfirmAction.vue'
 import { downloadText, formatDate } from '../../lib/format'
+import EpisodeReader from './EpisodeReader.vue'
 
 /** 剧本创作工作区，正式数据库内容为准，checkpoint 只补充计划与恢复信息。 */
 const { project, checkpoints, refresh, error } = useProjectContext()
-const selected = ref<number>()
 const tab = ref('episodes')
+const showHistory = ref(false)
 const dramaRecords = computed(() => workflowCheckpoints(checkpoints.value, 'create-drama'))
 const state = computed(() => dramaRecords.value.at(-1)?.state)
 const episodes = computed(() => project.value?.episodes ?? [])
-const episode = computed(() => episodes.value.find(item => item.episode === selected.value) ?? episodes.value[0])
 const total = computed(() => state.value?.episodeCount)
 const operation = computed(() => getOperation(project.value!.id))
 const complete = computed(() => project.value?.status === 'completed')
@@ -123,6 +123,9 @@ function exportScript() {
                     ><NTab name="review">审核记录</NTab></NTabs
                 >
                 <div class="flex items-center gap-3">
+                    <NButton text size="small" :aria-expanded="showHistory" @click="showHistory = !showHistory"
+                        ><History :size="14" />{{ showHistory ? '收起执行记录' : '执行记录' }}</NButton
+                    >
                     <NButton :disabled="!episodes.length" @click="exportScript" text size="small"
                         ><Download :size="14" />导出剧本</NButton
                     ><RouterLink
@@ -133,49 +136,14 @@ function exportScript() {
                     /></RouterLink>
                 </div>
             </div>
-            <div class="content-with-history panel mt-4">
+            <div class="content-with-history panel mt-4" :class="{ 'history-hidden': !showHistory }">
                 <main class="min-w-0">
-                    <div v-if="tab === 'episodes'" class="h-full">
-                        <div v-if="episode" class="script-workspace">
-                            <aside class="episode-list">
-                                <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">
-                                <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>
+                    <div v-show="tab === 'episodes'" class="h-full">
+                        <EpisodeReader v-if="episodes.length" :episodes="episodes" />
                         <EmptyState
                             v-else
                             title="剧本正在酝酿"
-                            description="剧集写入数据库后会自动出现在这里。角色与世界观生成期间，可以在右侧查看已保存的执行记录。"
+                            description="剧集写入数据库后会自动出现在这里。角色与世界观生成期间，可展开执行记录查看进度。"
                         />
                     </div>
                     <NScrollbar v-if="tab !== 'episodes'" class="panel-scroll"
@@ -274,7 +242,7 @@ function exportScript() {
                         </div>
                     </NScrollbar>
                 </main>
-                <HistoryPanel :checkpoints="checkpoints" workflow="create-drama" />
+                <HistoryPanel v-if="showHistory" :checkpoints="checkpoints" workflow="create-drama" />
             </div></div
     ></WorkspacePage>
 </template>