aegon-lv97 1.0.0

package/gen-ai/build-report/components/ReportGeneratingPanel.vue

@@ -0,0 +1,1765 @@
+<template>
+  <div ref="pageRef" class="report-generating-page">
+    <div class="report-generating-page__layout">
+      <div class="report-generating-page__main">
+        <header class="report-generating-page__hero">
+          <h1 class="report-generating-page__hero-title">{{ heroTitle }}</h1>
+        </header>
+
+        <div class="report-generating-page__body">
+          <el-scrollbar class="report-generating-page__scrollbar">
+            <div class="report-generating-page__content">
+              <ul v-if="visibleChapters.length" class="report-generating-chapters">
+                <li
+                  v-for="chapter in visibleChapters"
+                  :key="chapter.id"
+                  :ref="(el) => bindChapterRowEl(chapter.id, el)"
+                  class="report-generating-chapters__row"
+                  :class="{ 'is-creating-active': chapter.status === 'creating' }"
+                  :data-chapter-id="chapter.id"
+                >
+                  <span class="report-generating-chapters__state" :class="`is-${chapter.status}`">
+                    <template v-if="chapter.status === 'success'">
+                      <el-icon
+                        class="report-generating-chapters__icon is-success"
+                        aria-hidden="true"
+                      >
+                        <Check />
+                      </el-icon>
+                    </template>
+                    <template v-else-if="chapter.status === 'failure'">
+                      <el-icon
+                        class="report-generating-chapters__icon is-failed"
+                        aria-hidden="true"
+                      >
+                        <Close />
+                      </el-icon>
+                    </template>
+                    <template v-else-if="chapter.status === 'creating'">
+                      <el-icon
+                        class="report-generating-chapters__icon is-loading"
+                        aria-hidden="true"
+                      >
+                        <RefreshRight />
+                      </el-icon>
+                    </template>
+                    <template v-else>
+                      <span
+                        class="report-generating-chapters__icon is-pending report-generating-hourglass"
+                        aria-hidden="true"
+                      >
+                        <svg
+                          class="report-generating-hourglass__svg"
+                          viewBox="0 0 24 28"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            class="report-generating-hourglass__frame"
+                            d="M6 2h12l-5.2 9.2a1.2 1.2 0 0 0 0 1.2L18 22H6l5.2-9.6a1.2 1.2 0 0 0 0-1.2L6 2z"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.4"
+                            stroke-linejoin="round"
+                          />
+                          <path
+                            class="report-generating-hourglass__sand-top"
+                            d="M8.2 4.2h7.6L12 10.8 8.2 4.2z"
+                            fill="currentColor"
+                          />
+                          <path
+                            class="report-generating-hourglass__sand-bottom"
+                            d="M12 17.2 15.8 23.8H8.2L12 17.2z"
+                            fill="currentColor"
+                          />
+                          <circle
+                            class="report-generating-hourglass__drip report-generating-hourglass__drip--1"
+                            cx="12"
+                            cy="12.8"
+                            r="0.75"
+                            fill="currentColor"
+                          />
+                          <circle
+                            class="report-generating-hourglass__drip report-generating-hourglass__drip--2"
+                            cx="12"
+                            cy="12.8"
+                            r="0.6"
+                            fill="currentColor"
+                          />
+                          <circle
+                            class="report-generating-hourglass__drip report-generating-hourglass__drip--3"
+                            cx="12"
+                            cy="12.8"
+                            r="0.55"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                    </template>
+                  </span>
+                  <div class="report-generating-chapters__name">
+                    <span class="report-generating-chapters__index">{{ chapter.orderSeq }}.</span>
+                    <ChapterTitleScroll
+                      root-tag="span"
+                      :title="chapter.sectionName"
+                      :max-chars="19"
+                    />
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+
+      <aside class="report-generating-page__video" aria-label="視頻播放區">
+        <div class="report-generating-page__video-slot">
+          <!-- 視頻已刪：guide.mp4 相關暫時注釋
+          <video
+            ref="videoEl"
+            class="report-generating-page__player"
+            :src="GENERATING_VIDEO_SRC"
+            muted
+            autoplay
+            loop
+            playsinline
+            webkit-playsinline
+            preload="auto"
+          />
+          -->
+        </div>
+      </aside>
+    </div>
+
+    <footer v-if="showActionFooter" class="report-generating-page__footer">
+      <p class="report-generating-page__summary">{{ completionSummary }}</p>
+      <div class="report-generating-page__footer-actions">
+        <button
+          type="button"
+          class="app-btn app-btn--wide app-btn--outline"
+          :disabled="isGenerating || retrying || isSectionRequesting || !failedCount"
+          @click="retryFailedChapters"
+        >
+          重試失敗的章節
+        </button>
+        <!-- <button
+          type="button"
+          class="app-btn app-btn--wide"
+          :disabled="isGenerating || retrying || isSectionRequesting || !canEnterEditing"
+          @click="enterEditing"
+        >
+          進入編輯
+        </button> -->
+        <button type="button" class="app-btn app-btn--wide" @click="enterEditing">進入編輯</button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Close, RefreshRight } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage, ElScrollbar } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ChapterTitleScroll } from '../../common'
+// 視頻已刪：guide.mp4 相關暫時注釋
+// import generatingVideoSrc from '../../common/assets/guide.mp4?url'
+import { postGenAiRequest } from '../../common/utils/remote-request'
+import { getViewportHeight, lockDocumentScroll, navigateToReportEdit } from '../report-domain'
+import {
+  clearGeneratingSession,
+  loadGeneratingSession,
+  saveGeneratingSession,
+  useReportWorkflow,
+  type GeneratingSessionChapter,
+} from '../useReportWorkflow'
+const emit = defineEmits<{
+  'enter-editing': []
+}>()
+
+/** 生成中頁視頻源（視頻已刪，暫時注釋） */
+// const GENERATING_VIDEO_SRC = generatingVideoSrc
+
+/** 輪詢間隔 2s；未收到 completed:true 則持續輪詢（無次數上限） */
+const SECTION_POLL_INTERVAL_MS = 2000 // 轮询间隔2s
+/** CREATING 計時閾值（僅追蹤開始時間；failure 叉號只認接口 createdFlag=FAILURE，本地超時不寫成 failure） */
+const SECTION_CREATING_TIMEOUT_MS = 1_800_000 // 30分钟超时
+
+type GenAiSectionCreatedFlag = 'PENDING' | 'CREATING' | 'SUCCESS' | 'FAILURE'
+
+interface genAiSearchReportParams {
+  categoryId: number
+  instanceId: string
+}
+
+interface GenAiGeneratingSectionItem {
+  sectionId: string
+  sectionName: string
+  orderSeq: number
+  createdFlag: GenAiSectionCreatedFlag
+}
+
+type ChapterGenerationStatus = 'pending' | 'creating' | 'success' | 'failure'
+
+interface ChapterGenerationItem {
+  id: string
+  sectionId: string
+  sectionName: string
+  orderSeq: number
+  status: ChapterGenerationStatus
+  body?: string
+}
+
+const CREATED_FLAG_STATUS_MAP: Record<GenAiSectionCreatedFlag, ChapterGenerationStatus> = {
+  PENDING: 'pending',
+  CREATING: 'creating',
+  SUCCESS: 'success',
+  FAILURE: 'failure',
+}
+
+const route = useRoute()
+const router = useRouter()
+const instanceId = ref('')
+
+const {
+  markGenerationSuccess,
+  selectedTemplate,
+  setGeneratedChaptersFromApi,
+  loadTemplateFromSession,
+} = useReportWorkflow()
+
+const templateId = computed(() => {
+  const fromRoute = route.query.templateId
+  if (typeof fromRoute === 'string' && fromRoute) return fromRoute
+  return selectedTemplate.value?.id ?? '1'
+})
+
+const pageRef = ref<HTMLElement | null>(null)
+// 視頻已刪：guide.mp4 相關暫時注釋
+// const videoEl = ref<HTMLVideoElement | null>(null)
+let measureRafId = 0
+let cleanupLock: (() => void) | null = null
+let cleanupBodyHeight: (() => void) | null = null
+let generationAbortController: AbortController | null = null
+/** 章節進入 CREATING 的時間戳（僅觀測；不因超時改 status） */
+const creatingStartedAt = new Map<string, number>()
+let creatingTimeoutTimer = 0
+
+// 視頻已刪：guide.mp4 相關暫時注釋
+// function ensureVideoPlaying() {
+//   const el = videoEl.value
+//   if (!el) return
+//   el.muted = true
+//   el.loop = true
+//   const playPromise = el.play()
+//   if (playPromise && typeof playPromise.then === 'function') {
+//     void playPromise.catch(() => {
+//       window.setTimeout(() => {
+//         void videoEl.value?.play()?.catch(() => undefined)
+//       }, 120)
+//     })
+//   }
+// }
+
+// function initGeneratingVideo() {
+//   const el = videoEl.value
+//   if (!el) return
+//
+//   el.muted = true
+//   el.defaultMuted = true
+//   el.autoplay = true
+//   el.loop = true
+//   el.playsInline = true
+//   el.setAttribute('muted', '')
+//   el.setAttribute('playsinline', '')
+//   el.setAttribute('webkit-playsinline', '')
+//
+//   el.addEventListener('loadeddata', ensureVideoPlaying)
+//   el.addEventListener('canplay', ensureVideoPlaying)
+//   el.addEventListener('ended', onVideoEnded)
+//   ensureVideoPlaying()
+// }
+
+// function onVideoEnded() {
+//   const el = videoEl.value
+//   if (!el) return
+//   el.currentTime = 0
+//   ensureVideoPlaying()
+// }
+
+// function disposeGeneratingVideo() {
+//   const el = videoEl.value
+//   if (!el) return
+//   el.removeEventListener('loadeddata', ensureVideoPlaying)
+//   el.removeEventListener('canplay', ensureVideoPlaying)
+//   el.removeEventListener('ended', onVideoEnded)
+//   el.pause()
+// }
+
+function delay(ms: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms)
+  })
+}
+
+function throwIfAborted(signal: AbortSignal) {
+  if (signal.aborted) {
+    throw new DOMException('章節生成已取消', 'AbortError')
+  }
+}
+
+function mapCreatedFlag(flag: GenAiSectionCreatedFlag | string): ChapterGenerationStatus {
+  // 僅認接口明確返回值；缺省 / 未知一律 pending（叉號必須 createdFlag=FAILURE）
+  const key = String(flag ?? '')
+    .trim()
+    .toUpperCase() as GenAiSectionCreatedFlag
+  return CREATED_FLAG_STATUS_MAP[key] ?? 'pending'
+}
+
+function resolveOrderSeq(raw: unknown, fallback: number): number {
+  const n = typeof raw === 'number' ? raw : Number.parseInt(String(raw ?? ''), 10)
+  return Number.isFinite(n) && n > 0 ? n : fallback
+}
+
+/**
+ * 按 orderSeq 排序；同 sectionId 去重；保證 orderSeq 唯一不亂序
+ */
+function normalizeSectionList(list: GenAiGeneratingSectionItem[]): GenAiGeneratingSectionItem[] {
+  const byId = new Map<string, GenAiGeneratingSectionItem>()
+
+  list.forEach((raw, index) => {
+    const sectionId = String(raw?.sectionId ?? '').trim()
+    if (!sectionId || byId.has(sectionId)) return
+    byId.set(sectionId, {
+      sectionId,
+      sectionName: String(raw?.sectionName ?? ''),
+      orderSeq: resolveOrderSeq(raw?.orderSeq, index + 1),
+      createdFlag: raw?.createdFlag,
+    })
+  })
+
+  const sorted = [...byId.values()].sort((a, b) => {
+    if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+    return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+  })
+
+  const used = new Set<number>()
+  return sorted.map((item, index) => {
+    let orderSeq = item.orderSeq
+    if (used.has(orderSeq)) {
+      orderSeq = index + 1
+      while (used.has(orderSeq)) orderSeq += 1
+    }
+    used.add(orderSeq)
+    return { ...item, orderSeq }
+  })
+}
+
+function sortSectionList(list: GenAiGeneratingSectionItem[]) {
+  return normalizeSectionList(list)
+}
+
+function toChapterItems(list: GenAiGeneratingSectionItem[]): ChapterGenerationItem[] {
+  return normalizeSectionList(list).map((item) => ({
+    id: item.sectionId,
+    sectionId: item.sectionId,
+    sectionName: item.sectionName,
+    orderSeq: item.orderSeq,
+    status: mapCreatedFlag(item.createdFlag),
+  }))
+}
+
+function resolveGeneratingParams(): genAiSearchReportParams {
+  const categoryRaw = route.query.categoryId
+  const instanceRaw = route.query.instanceId
+  const categoryId =
+    typeof categoryRaw === 'string' && categoryRaw
+      ? Number.parseInt(categoryRaw, 10)
+      : Number.parseInt(templateId.value, 10)
+
+  if (typeof instanceRaw === 'string' && instanceRaw) {
+    instanceId.value = instanceRaw
+  }
+
+  return {
+    categoryId: Number.isFinite(categoryId) && categoryId > 0 ? categoryId : 1,
+    instanceId: instanceId.value,
+  }
+}
+
+/**
+ * 發送請求封裝：僅 path + 業務參數（超時由網關處理，不傳 timeoutMs）
+ */
+const genAiCreateReportApi = {
+  getGeneratingSection(params: { categoryId: number; instanceId: string }) {
+    return postGenAiRequest('/generatingSection', params)
+  },
+  getGeneratingSectionStatus(params: {
+    categoryId: number
+    instanceId: string
+    sectionIdList: string[]
+  }) {
+    return postGenAiRequest('/generatingSectionStatus', params)
+  },
+}
+
+/** success === false 或非 200 視為失敗，呼叫端應停止後續連續請求 */
+function isGenAiResponseOk(res: any): boolean {
+  if (res == null) return false
+  if (res.success === false) return false
+  if (res.success === true) return true
+  return String(res.code) === '200'
+}
+
+/**
+ * —— 發送方式 / 參數 / res 結構不可改 ——
+ * success === false 或非 200 時返回 ok:false，呼叫端停止後續連續請求
+ */
+const generatingSection = async (params: genAiSearchReportParams) => {
+  const res: any = await genAiCreateReportApi
+    .getGeneratingSection({
+      categoryId: params.categoryId,
+      instanceId: params.instanceId,
+    })
+    .catch((err) => {
+      console.error('接口異常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口異常')
+      return {
+        ok: false as const,
+        sectionList: [] as GenAiGeneratingSectionItem[],
+        completed: false,
+      }
+    }
+
+    const sectionList = normalizeSectionList(
+      (res.data?.sectionList ?? []) as GenAiGeneratingSectionItem[]
+    )
+    const allFinish = !!res.data?.completed
+    if (res.data?.instanceId) {
+      instanceId.value = String(res.data.instanceId)
+      void syncInstanceIdToRoute(instanceId.value)
+    }
+    console.log('分段列表', sectionList, '是否全部完成', allFinish)
+    return { ok: true as const, sectionList, completed: allFinish }
+  } catch (err) {
+    console.error('接口異常', err)
+    ElMessage.warning('接口異常')
+    return { ok: false as const, sectionList: [] as GenAiGeneratingSectionItem[], completed: false }
+  }
+}
+
+const generatingSectionStatus = async (params: {
+  categoryId: number
+  instanceId: string
+  sectionIdList: string[]
+}) => {
+  // 傳入 id 順序保證按當前章節 orderSeq 由小到大
+  const orderedSectionIdList = (() => {
+    const idSet = new Set(params.sectionIdList.map(String))
+    const fromChapters = [...chapters.value]
+      .filter((item) => idSet.has(item.id))
+      .sort((a, b) => {
+        if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+        return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+      })
+      .map((item) => item.id)
+    if (fromChapters.length === idSet.size) return fromChapters
+    // 章節尚未寫入時，保持傳入順序（呼叫方 buildSectionIdList 已按 orderSeq 排好）
+    return params.sectionIdList.map(String)
+  })()
+
+  const res: any = await genAiCreateReportApi
+    .getGeneratingSectionStatus({
+      categoryId: params.categoryId,
+      instanceId: params.instanceId,
+      sectionIdList: orderedSectionIdList,
+    })
+    .catch((err) => {
+      console.error('接口異常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口異常')
+      return { ok: false as const, list: [] as GenAiGeneratingSectionItem[] }
+    }
+
+    return {
+      ok: true as const,
+      list: normalizeSectionList(
+        (Array.isArray(res.data) ? res.data : []) as GenAiGeneratingSectionItem[]
+      ),
+    }
+  } catch (err) {
+    console.error('接口異常', err)
+    ElMessage.warning('接口異常')
+    return { ok: false as const, list: [] as GenAiGeneratingSectionItem[] }
+  }
+}
+
+const chapters = ref<ChapterGenerationItem[]>([])
+const isGenerating = ref(false)
+const isComplete = ref(false)
+const retrying = ref(false)
+/** 正在請求 / 輪詢 getGeneratingSection 時為 true，期間不展示 footer */
+const isSectionRequesting = ref(false)
+
+const chapterRowEls = new Map<string, HTMLElement>()
+
+function bindChapterRowEl(id: string, el: unknown) {
+  if (el instanceof HTMLElement) chapterRowEls.set(id, el)
+  else chapterRowEls.delete(id)
+}
+
+const visibleChapters = computed(() =>
+  [...chapters.value].sort((a, b) => {
+    if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+    return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+  })
+)
+
+/** 當前正在生成的章節（creating） */
+const activeCreatingChapterId = computed(
+  () => visibleChapters.value.find((item) => item.status === 'creating')?.id ?? null
+)
+
+/** 滾動條滾到當前生成中的章節行 */
+function scrollToActiveCreatingChapter() {
+  const id = activeCreatingChapterId.value
+  if (!id) return
+
+  void nextTick(() => {
+    const row =
+      chapterRowEls.get(id) ??
+      (document.querySelector(
+        `.report-generating-chapters__row[data-chapter-id="${CSS.escape(id)}"]`
+      ) as HTMLElement | null)
+    if (!row) return
+
+    row.scrollIntoView({ block: 'center', behavior: 'smooth', inline: 'nearest' })
+  })
+}
+
+watch(activeCreatingChapterId, (id) => {
+  if (id) scrollToActiveCreatingChapter()
+})
+
+/** 生成頁 height / min-height 相對視口固定扣減；章節溢出時由 __body 內部滾動 */
+const GENERATING_VIEWPORT_OFFSET_PX = 110
+
+const doneCount = computed(() => chapters.value.filter((item) => item.status === 'success').length)
+const failedCount = computed(
+  () => chapters.value.filter((item) => item.status === 'failure').length
+)
+
+/** 至少有一章成功才可進入編輯；全部失敗時置灰不可點 */
+const canEnterEditing = computed(() => doneCount.value > 0)
+
+const completionSummary = computed(
+  () => `報告生成完畢，${doneCount.value}個章節已完成，${failedCount.value}個章節失敗`
+)
+
+const heroTitle = computed(() =>
+  isComplete.value && !isGenerating.value && !isSectionRequesting.value
+    ? '報告生成完畢'
+    : '報告生成中...'
+)
+
+/** 僅在 generatingSection 請求全部結束後顯示底部操作區 */
+const showActionFooter = computed(
+  () => isComplete.value && !isGenerating.value && !isSectionRequesting.value && !retrying.value
+)
+
+function getGeneratingHostEl(page: HTMLElement) {
+  return page.closest('.report-edit-page__generating') as HTMLElement | null
+}
+
+function clearGeneratingHeightStyles(page: HTMLElement) {
+  page.style.height = ''
+  page.style.maxHeight = ''
+  page.style.minHeight = ''
+  const host = getGeneratingHostEl(page)
+  if (host) {
+    host.style.height = ''
+    host.style.maxHeight = ''
+    host.style.minHeight = ''
+  }
+}
+
+/** 視口高度減去固定 110px 後寫入 page + report-edit-page__generating（始終貼合視口） */
+function applyGeneratingViewportHeights(page: HTMLElement) {
+  const heightPx = Math.max(0, getViewportHeight() - GENERATING_VIEWPORT_OFFSET_PX)
+  const height = `${heightPx}px`
+  const host = getGeneratingHostEl(page)
+
+  page.style.height = height
+  page.style.maxHeight = height
+  page.style.minHeight = height
+  if (host) {
+    host.style.height = height
+    host.style.maxHeight = height
+    host.style.minHeight = height
+  }
+}
+
+async function syncViewportHeightMode() {
+  await nextTick()
+  await new Promise<void>((resolve) => {
+    cancelAnimationFrame(measureRafId)
+    measureRafId = requestAnimationFrame(() => {
+      measureRafId = requestAnimationFrame(() => resolve())
+    })
+  })
+
+  const page = pageRef.value
+  if (!page) return
+
+  cleanupBodyHeight?.()
+  cleanupBodyHeight = null
+
+  applyGeneratingViewportHeights(page)
+  const update = () => applyGeneratingViewportHeights(page)
+  window.addEventListener('resize', update)
+  cleanupBodyHeight = () => {
+    window.removeEventListener('resize', update)
+    clearGeneratingHeightStyles(page)
+  }
+}
+
+function scheduleSyncViewportHeightMode() {
+  cancelAnimationFrame(measureRafId)
+  measureRafId = requestAnimationFrame(() => {
+    void syncViewportHeightMode()
+  })
+}
+
+function clearCreatingTimeoutState(ids?: string[]) {
+  if (!ids?.length) {
+    creatingStartedAt.clear()
+    return
+  }
+  for (const id of ids) {
+    creatingStartedAt.delete(id)
+  }
+}
+
+function stopCreatingTimeoutWatcher() {
+  if (creatingTimeoutTimer) {
+    clearInterval(creatingTimeoutTimer)
+    creatingTimeoutTimer = 0
+  }
+}
+
+function startCreatingTimeoutWatcher() {
+  stopCreatingTimeoutWatcher()
+  creatingTimeoutTimer = window.setInterval(() => {
+    applyCreatingTimeouts()
+  }, 1000)
+}
+
+/** 同步 CREATING 計時觀測；不把本地超時寫成 failure（叉號只認接口 createdFlag=FAILURE） */
+function applyCreatingTimeouts() {
+  const now = Date.now()
+  void SECTION_CREATING_TIMEOUT_MS
+
+  for (const chapter of chapters.value) {
+    if (chapter.status === 'creating') {
+      if (!creatingStartedAt.has(chapter.id)) {
+        creatingStartedAt.set(chapter.id, now)
+      }
+      continue
+    }
+    creatingStartedAt.delete(chapter.id)
+  }
+}
+
+function applySectionList(sectionList: GenAiGeneratingSectionItem[]) {
+  const prevCount = chapters.value.length
+  const nextChapters = toChapterItems(sectionList)
+  const prevMap = new Map(chapters.value.map((row) => [row.id, row] as const))
+
+  chapters.value = nextChapters.map((item) => {
+    const prev = prevMap.get(item.id)
+    // 前一次已是 success：後續輪詢不再改動該章節（含 orderSeq）
+    if (prev?.status === 'success') {
+      return prev
+    }
+    return {
+      ...item,
+      // 已有 orderSeq 則保持，避免輪詢改序錯亂
+      orderSeq: prev?.orderSeq && prev.orderSeq > 0 ? prev.orderSeq : item.orderSeq,
+      body: item.status === 'success' ? prev?.body : undefined,
+    }
+  })
+  // 最終再按 orderSeq 排序，防止合併後錯亂
+  chapters.value = [...chapters.value].sort((a, b) => {
+    if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+    return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+  })
+  applyCreatingTimeouts()
+  // 章節數量變化才重測；純狀態輪詢不觸發，避免視頻跳動
+  if (chapters.value.length !== prevCount) {
+    scheduleSyncViewportHeightMode()
+  }
+}
+
+function applySectionStatus(statusList: GenAiGeneratingSectionItem[]) {
+  if (!statusList.length) return
+
+  const statusMap = new Map(
+    sortSectionList(statusList).map((item) => [String(item.sectionId), item] as const)
+  )
+
+  chapters.value = chapters.value.map((chapter) => {
+    // 前一次已是 success：後續輪詢不再改動該章節
+    if (chapter.status === 'success') return chapter
+
+    const next = statusMap.get(chapter.id)
+    if (!next) return chapter
+    const status = mapCreatedFlag(next.createdFlag)
+
+    return {
+      ...chapter,
+      sectionName: next.sectionName || chapter.sectionName,
+      // status 輪詢不改 orderSeq，避免序號重複/錯亂
+      status,
+      body: status === 'success' ? chapter.body : undefined,
+    }
+  })
+
+  applyCreatingTimeouts()
+}
+
+/** 接口 sectionList 是否全部為 FAILURE（此情況不再繼續請求 generatingSection） */
+function isSectionListAllFailure(sectionList: GenAiGeneratingSectionItem[]) {
+  const list = normalizeSectionList(sectionList)
+  if (!list.length) return false
+  return list.every((item) => mapCreatedFlag(item.createdFlag) === 'failure')
+}
+
+function buildSectionIdList(sectionList: GenAiGeneratingSectionItem[]) {
+  // generatingSectionStatus 的 sectionIdList 必須按 orderSeq 由小到大
+  return normalizeSectionList(sectionList).map((item) => String(item.sectionId))
+}
+
+function stopGeneratingFlow() {
+  isSectionRequesting.value = false
+  isComplete.value = true
+  isGenerating.value = false
+}
+
+/**
+ * 流程：
+ * 1. 第一次請求 generatingSection，拿到 sectionList
+ * 2. 用 sectionList 拼裝 sectionIdList，generatingSectionStatus 只請求一次
+ * 3. 之後每 2s 只輪詢 generatingSection；僅 completed / 全部 FAILURE / 報錯 / 取消時停止
+ */
+async function runGeneratingFlow(signal: AbortSignal) {
+  isSectionRequesting.value = true
+  // —— 第一次：generatingSection → 拼裝 sectionIdList → status 僅一次 ——
+  throwIfAborted(signal)
+  let params = resolveGeneratingParams()
+  const firstSection = await generatingSection(params)
+  throwIfAborted(signal)
+
+  if (!firstSection.ok) {
+    stopGeneratingFlow()
+    return
+  }
+
+  applySectionList(firstSection.sectionList)
+
+  // 全部 FAILURE：不再打 status，也不再輪詢 generatingSection
+  if (isSectionListAllFailure(firstSection.sectionList)) {
+    stopGeneratingFlow()
+    return
+  }
+
+  const sectionIdList = buildSectionIdList(firstSection.sectionList)
+
+  if (sectionIdList.length) {
+    const firstStatus = await generatingSectionStatus({
+      categoryId: params.categoryId,
+      instanceId: instanceId.value,
+      sectionIdList,
+    })
+    throwIfAborted(signal)
+    if (!firstStatus.ok) {
+      stopGeneratingFlow()
+      return
+    }
+    applySectionStatus(firstStatus.list)
+  }
+
+  // 僅認接口 completed；未完成則進入持續輪詢
+  if (firstSection.completed) {
+    stopGeneratingFlow()
+    return
+  }
+
+  // —— 後續只輪詢 generatingSection（不再打 status）；無次數上限 ——
+  while (true) {
+    throwIfAborted(signal)
+    await delay(SECTION_POLL_INTERVAL_MS)
+    throwIfAborted(signal)
+
+    params = resolveGeneratingParams()
+    const sectionRes = await generatingSection(params)
+    throwIfAborted(signal)
+    if (!sectionRes.ok) {
+      stopGeneratingFlow()
+      return
+    }
+
+    applySectionList(sectionRes.sectionList)
+
+    if (sectionRes.completed || isSectionListAllFailure(sectionRes.sectionList)) {
+      stopGeneratingFlow()
+      return
+    }
+  }
+}
+
+/**
+ * 重試失敗章節（每次點擊完整走一遍）：
+ * 1. 先調用 generatingSection
+ * 2. 無論 completed true / false（含首包仍全 FAILURE）→ 都先調用一次 generatingSectionStatus
+ * 3. 再每 2s 循環輪詢 generatingSection
+ * 進頁 runGeneratingFlow 不變；已成功章節不改。
+ */
+async function pollFailedChaptersBySection(signal: AbortSignal, failedIds: string[]) {
+  if (!failedIds.length) return
+
+  isSectionRequesting.value = true
+
+  // —— 第一次：generatingSection ——
+  throwIfAborted(signal)
+  let params = resolveGeneratingParams()
+  const firstSection = await generatingSection(params)
+  throwIfAborted(signal)
+
+  if (!firstSection.ok) {
+    stopGeneratingFlow()
+    return
+  }
+
+  applySectionList(firstSection.sectionList)
+
+  // 無論 completed / 是否全 FAILURE：都先打一次 status（修復重試首包仍 FAILURE 時被提前 return 跳過 status）
+  const sectionIdList = buildSectionIdList(firstSection.sectionList)
+  const idsForStatus = sectionIdList.length ? sectionIdList : failedIds.map(String)
+  if (idsForStatus.length) {
+    const firstStatus = await generatingSectionStatus({
+      categoryId: params.categoryId,
+      instanceId: instanceId.value,
+      sectionIdList: idsForStatus,
+    })
+    throwIfAborted(signal)
+    if (!firstStatus.ok) {
+      stopGeneratingFlow()
+      return
+    }
+    applySectionStatus(firstStatus.list)
+  }
+
+  // —— 後續只輪詢 generatingSection（不再打 status）；無次數上限 ——
+  while (true) {
+    throwIfAborted(signal)
+    await delay(SECTION_POLL_INTERVAL_MS)
+    throwIfAborted(signal)
+
+    params = resolveGeneratingParams()
+    const sectionRes = await generatingSection(params)
+    throwIfAborted(signal)
+    if (!sectionRes.ok) {
+      stopGeneratingFlow()
+      return
+    }
+
+    applySectionList(sectionRes.sectionList)
+
+    if (sectionRes.completed || isSectionListAllFailure(sectionRes.sectionList)) {
+      stopGeneratingFlow()
+      return
+    }
+  }
+}
+
+async function startGeneration() {
+  generationAbortController?.abort()
+  const controller = new AbortController()
+  generationAbortController = controller
+
+  clearCreatingTimeoutState()
+  chapters.value = []
+  isComplete.value = false
+  isGenerating.value = true
+  isSectionRequesting.value = true
+  startCreatingTimeoutWatcher()
+
+  try {
+    await runGeneratingFlow(controller.signal)
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      isSectionRequesting.value = false
+      return
+    }
+    isSectionRequesting.value = false
+    throw error
+  } finally {
+    stopCreatingTimeoutWatcher()
+    applyCreatingTimeouts()
+    if (!controller.signal.aborted) {
+      isGenerating.value = false
+      isSectionRequesting.value = false
+      // 流程正常結束時 stopGeneratingFlow 已設 isComplete；異常中斷也需收斂請求態
+      if (!isComplete.value && chapters.value.length) {
+        isComplete.value = true
+      }
+    }
+    scheduleSyncViewportHeightMode()
+  }
+}
+
+function buildChapterBody(chapter: ChapterGenerationItem) {
+  // 僅用接口/會話寫入的 body；無正文則空（不回落本地假文案）
+  return chapter.body || ''
+}
+
+function persistGeneratingSession() {
+  const tid = String(templateId.value || selectedTemplate.value?.id || '')
+  if (!tid || !chapters.value.length) return
+  saveGeneratingSession({
+    templateId: tid,
+    instanceId: instanceId.value,
+    chapters: chapters.value.map(
+      (chapter): GeneratingSessionChapter => ({
+        id: chapter.id,
+        sectionId: chapter.sectionId,
+        sectionName: chapter.sectionName,
+        orderSeq: chapter.orderSeq,
+        status: chapter.status,
+        body: chapter.body,
+      })
+    ),
+    isComplete: isComplete.value,
+  })
+}
+
+async function syncInstanceIdToRoute(id: string) {
+  if (!id || route.query.instanceId === id) return
+  // 強制保持 generating，避免遷移後 query 拼接把 step 沖掉
+  await navigateToReportEdit(
+    router,
+    'generating',
+    typeof route.query.templateId === 'string' ? route.query.templateId : undefined,
+    true,
+    undefined,
+    id
+  )
+}
+
+function enterEditing() {
+  // 僅在仍在生成 / 輪詢時攔截；按鈕已常駐可點，遷移/接口失敗時也要能進編輯頁
+  if (isGenerating.value || retrying.value || isSectionRequesting.value) {
+    ElMessage.warning('報告仍在生成中，請稍候再進入編輯')
+    return
+  }
+
+  if (!selectedTemplate.value) {
+    ElMessage.warning('缺少報告模板，無法進入編輯')
+    return
+  }
+
+  const orderedChapters = [...chapters.value].sort((a, b) => {
+    if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+    return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+  })
+
+  if (orderedChapters.length) {
+    setGeneratedChaptersFromApi(
+      orderedChapters.map((chapter) => {
+        const label =
+          String(chapter.sectionName || '')
+            .replace(/^\d+\.\s*/, '')
+            .trim() || chapter.sectionName
+        return {
+          title: `${chapter.orderSeq}. ${label}`,
+          body: buildChapterBody(chapter),
+        }
+      })
+    )
+  } else {
+    // 接口無章節：空列表進入編輯（不回落本地假標題）
+    setGeneratedChaptersFromApi([])
+  }
+
+  markGenerationSuccess()
+  clearGeneratingSession()
+  emit('enter-editing')
+}
+
+async function retryFailedChapters() {
+  if (isGenerating.value || retrying.value || !failedCount.value) return
+
+  const failedIds = [...chapters.value]
+    .filter((item) => item.status === 'failure')
+    .sort((a, b) => {
+      if (a.orderSeq !== b.orderSeq) return a.orderSeq - b.orderSeq
+      return a.sectionId.localeCompare(b.sectionId, 'en', { numeric: true })
+    })
+    .map((item) => item.id)
+
+  if (!failedIds.length) return
+
+  generationAbortController?.abort()
+  const controller = new AbortController()
+  generationAbortController = controller
+
+  retrying.value = true
+  isGenerating.value = true
+  isComplete.value = false
+  isSectionRequesting.value = true
+  clearCreatingTimeoutState(failedIds)
+
+  chapters.value = chapters.value.map((item) =>
+    item.status === 'failure' ? { ...item, status: 'pending', body: undefined } : item
+  )
+  startCreatingTimeoutWatcher()
+  scheduleSyncViewportHeightMode()
+
+  try {
+    await pollFailedChaptersBySection(controller.signal, failedIds)
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      isSectionRequesting.value = false
+      return
+    }
+    isSectionRequesting.value = false
+    throw error
+  } finally {
+    stopCreatingTimeoutWatcher()
+    applyCreatingTimeouts()
+    retrying.value = false
+    if (!controller.signal.aborted) {
+      isGenerating.value = false
+      isSectionRequesting.value = false
+      if (!isComplete.value) {
+        isComplete.value = true
+      }
+    }
+    scheduleSyncViewportHeightMode()
+  }
+}
+
+onMounted(() => {
+  loadTemplateFromSession()
+  cleanupLock = lockDocumentScroll()
+  window.addEventListener('resize', scheduleSyncViewportHeightMode)
+
+  const snapshot = loadGeneratingSession()
+  const tid = String(templateId.value || '')
+  const routeInstanceId = typeof route.query.instanceId === 'string' ? route.query.instanceId : ''
+
+  if (snapshot && snapshot.templateId === tid && snapshot.chapters?.length) {
+    chapters.value = snapshot.chapters.map((chapter) => ({ ...chapter }))
+    instanceId.value = snapshot.instanceId || routeInstanceId
+    isComplete.value = snapshot.isComplete
+    isGenerating.value = false
+    isSectionRequesting.value = false
+    if (instanceId.value) void syncInstanceIdToRoute(instanceId.value)
+    // 已完成：直接恢復列表；未完成：重新跑生成以繼續進度
+    if (!snapshot.isComplete) {
+      void startGeneration()
+    }
+  } else {
+    void startGeneration()
+  }
+
+  // 視頻已刪：guide.mp4 相關暫時注釋
+  // void nextTick(() => initGeneratingVideo())
+  scheduleSyncViewportHeightMode()
+})
+
+onUnmounted(() => {
+  persistGeneratingSession()
+  generationAbortController?.abort()
+  stopCreatingTimeoutWatcher()
+  clearCreatingTimeoutState()
+  cancelAnimationFrame(measureRafId)
+  window.removeEventListener('resize', scheduleSyncViewportHeightMode)
+  cleanupBodyHeight?.()
+  cleanupBodyHeight = null
+  cleanupLock?.()
+  // 視頻已刪：guide.mp4 相關暫時注釋
+  // disposeGeneratingVideo()
+})
+
+watch(
+  [chapters, isComplete, instanceId],
+  () => {
+    persistGeneratingSession()
+  },
+  { deep: true }
+)
+
+/** footer 顯隱時同步測高，避免按鈕區撐破視口 */
+watch(showActionFooter, () => {
+  scheduleSyncViewportHeightMode()
+})
+</script>
+
+<style scoped>
+.report-generating-page {
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-fw-bold: 700;
+  --report-generating-video-slot-width: 646px;
+  --report-generating-video-slot-height: 363px;
+  --report-generating-video-aspect: 646 / 363;
+  --report-generating-video-sticky-top: 24px;
+  --report-generating-gap: 50px;
+  /* 左右等寬（以 video 為準）+ 間距 */
+  --report-generating-layout-max-width: calc(
+    2 * var(--report-generating-video-slot-width) + var(--report-generating-gap)
+  );
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 100%;
+  margin-bottom: 0;
+  padding: 0;
+  background: #fff;
+  overflow: hidden;
+}
+
+.report-generating-page__layout {
+  display: grid;
+  grid-template-columns: minmax(0, var(--report-generating-video-slot-width)) minmax(
+      0,
+      var(--report-generating-video-slot-width)
+    );
+  grid-template-rows: minmax(0, 1fr);
+  column-gap: var(--report-generating-gap);
+  align-items: stretch;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: min(100%, var(--report-generating-layout-max-width));
+  min-height: 0;
+  margin: 0 auto;
+  padding: clamp(32px, 12vh, 96px) 24px 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-generating-page__main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  grid-row: 1;
+  width: 100%;
+  max-width: var(--report-generating-video-slot-width);
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  justify-self: stretch;
+}
+
+.report-generating-page__video {
+  position: relative;
+  grid-row: 1;
+  align-self: start;
+  justify-self: stretch;
+  margin-top: 0;
+  width: 100%;
+  max-width: var(--report-generating-video-slot-width);
+  height: fit-content;
+  max-height: none;
+  display: block;
+  z-index: 2;
+}
+
+.report-generating-page__video-slot {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: var(--report-generating-video-slot-width);
+  height: auto;
+  aspect-ratio: var(--report-generating-video-aspect);
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 12px;
+  overflow: hidden;
+  line-height: 0;
+  font-size: 0;
+  flex-shrink: 0;
+  /* 實心底，避免滾動條出現後亞像素縫露出 video 默認黑底 */
+  background: #f3f0ff;
+  isolation: isolate;
+}
+
+/* 遮住底邊 1px 黑縫（滾動條導致寬高重算時常見） */
+.report-generating-page__video-slot::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 3px;
+  background: #f3f0ff;
+  pointer-events: none;
+  z-index: 2;
+  border-radius: 0 0 12px 12px;
+}
+
+.report-generating-page__video-slot .report-generating-page__player {
+  position: absolute;
+  /* 略放大並多蓋住底邊，消除 sticky + 滾動條後的黑線 */
+  inset: -3px -2px -5px -2px;
+  width: calc(100% + 4px);
+  height: calc(100% + 8px);
+  max-width: none;
+  object-fit: cover;
+  object-position: center bottom;
+  background: #f3f0ff;
+  border: 0;
+  outline: none;
+  display: block;
+  vertical-align: top;
+}
+
+.report-generating-page__hero {
+  flex-shrink: 0;
+  text-align: left;
+  padding: 0 0 20px;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+.report-generating-page__hero-title {
+  margin: 0;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.report-generating-page__body {
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 與章節 el-select 下拉滾動條同款（el-scrollbar） */
+.report-generating-page__scrollbar {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar) {
+  height: 100%;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar__bar.is-vertical) {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.report-generating-page__scrollbar :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: block !important;
+  width: 8px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: #999 !important;
+  opacity: 1 !important;
+}
+
+.report-generating-page__content {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0 12px 12px 0;
+  box-sizing: border-box;
+}
+
+.report-generating-chapters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 100%;
+  max-width: 100%;
+}
+
+.report-generating-chapters__row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  min-height: 40px;
+  width: 100%;
+  max-width: 100%;
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+}
+
+.report-generating-chapters__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 15px;
+  min-height: 40px;
+}
+
+.report-generating-chapters__state .report-generating-chapters__icon {
+  font-weight: 700;
+}
+
+.report-generating-chapters__state .report-generating-chapters__icon :deep(svg) {
+  stroke: currentColor;
+  stroke-width: 48;
+  paint-order: stroke fill;
+  overflow: visible;
+}
+
+.report-generating-chapters__state .report-generating-hourglass__svg {
+  stroke-width: 1.8;
+}
+
+.report-generating-chapters__state .report-generating-hourglass__frame {
+  stroke-width: 1.8;
+}
+
+.report-generating-chapters__state .report-generating-hourglass__sand-top,
+.report-generating-chapters__state .report-generating-hourglass__sand-bottom,
+.report-generating-chapters__state .report-generating-hourglass__drip {
+  stroke: currentColor;
+  stroke-width: 0.6;
+  paint-order: stroke fill;
+}
+
+.report-generating-chapters__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.report-generating-chapters__index {
+  flex-shrink: 0;
+  height: 40px;
+  line-height: 40px;
+  margin-right: 6px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll) {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll.is-char-truncated) {
+  flex: 0 1 auto;
+  width: max-content;
+  max-width: 100%;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll__viewport) {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+/* 19 字前綴完整可見，不被 overflow / ... 裁切遮擋 */
+.report-generating-chapters__name
+  :deep(.chapter-title-scroll.is-char-truncated .chapter-title-scroll__viewport) {
+  flex: 0 0 auto;
+  min-width: auto;
+  width: max-content;
+  max-width: none;
+  overflow: visible;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll__text) {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: inherit;
+  color: #303133;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll.is-truncatable) {
+  cursor: pointer;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll.is-truncatable.is-dragging) {
+  cursor: grabbing;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll__ellipsis) {
+  position: static;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  margin-left: 2px;
+  padding: 0;
+  background: none;
+  color: #c53355;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.report-generating-chapters__icon {
+  --report-generating-icon-color: rgb(31, 199, 255);
+  font-size: 15px;
+  width: 15px;
+  height: 15px;
+  color: var(--report-generating-icon-color);
+}
+
+.report-generating-chapters__icon.is-success {
+  color: var(--report-generating-icon-color);
+}
+
+.report-generating-chapters__icon.is-failed {
+  color: #c53355;
+}
+
+.report-generating-chapters__icon.is-loading {
+  color: var(--report-generating-icon-color);
+  animation: report-generating-spin 1s linear infinite;
+  -webkit-mask-image: conic-gradient(from 0deg, transparent 8%, rgba(0, 0, 0, 0.25) 35%, #000 78%);
+  mask-image: conic-gradient(from 0deg, transparent 8%, rgba(0, 0, 0, 0.25) 35%, #000 78%);
+}
+
+.report-generating-chapters__icon.is-pending,
+.report-generating-hourglass {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  color: var(--report-generating-icon-color, rgb(31, 199, 255));
+}
+
+.report-generating-hourglass__svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  animation: report-generating-hourglass-flip 2.8s ease-in-out infinite;
+}
+
+.report-generating-hourglass__sand-top {
+  transform-box: fill-box;
+  transform-origin: center top;
+  animation: report-generating-sand-top 2.8s ease-in-out infinite;
+}
+
+.report-generating-hourglass__sand-bottom {
+  transform-box: fill-box;
+  transform-origin: center bottom;
+  animation: report-generating-sand-bottom 2.8s ease-in-out infinite;
+}
+
+.report-generating-hourglass__drip {
+  opacity: 0;
+  animation: report-generating-sand-drip 1.1s linear infinite;
+}
+
+.report-generating-hourglass__drip--2 {
+  animation-delay: 0.35s;
+}
+
+.report-generating-hourglass__drip--3 {
+  animation-delay: 0.7s;
+}
+
+@keyframes report-generating-hourglass-flip {
+  0%,
+  42% {
+    transform: rotate(0deg);
+  }
+
+  50%,
+  92% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes report-generating-sand-top {
+  0%,
+  8% {
+    transform: scaleY(1);
+    opacity: 0.9;
+  }
+
+  40%,
+  50% {
+    transform: scaleY(0.12);
+    opacity: 0.35;
+  }
+
+  58%,
+  100% {
+    transform: scaleY(1);
+    opacity: 0.9;
+  }
+}
+
+@keyframes report-generating-sand-bottom {
+  0%,
+  8% {
+    transform: scaleY(0.12);
+    opacity: 0.35;
+  }
+
+  40%,
+  50% {
+    transform: scaleY(1);
+    opacity: 0.9;
+  }
+
+  58%,
+  100% {
+    transform: scaleY(0.12);
+    opacity: 0.35;
+  }
+}
+
+@keyframes report-generating-sand-drip {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  12% {
+    opacity: 0.95;
+  }
+
+  88% {
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: translateY(6px);
+    opacity: 0;
+  }
+}
+
+.report-generating-chapters__state.is-creating .report-generating-chapters__icon.is-loading {
+  color: var(--report-generating-icon-color, rgb(31, 199, 255));
+}
+
+.report-generating-page__footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  margin-top: auto;
+  padding: 32px 0 40px;
+  background: transparent;
+}
+
+.report-generating-page__footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.report-generating-page__summary {
+  flex-shrink: 0;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  text-align: center;
+}
+
+@keyframes report-generating-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: auto;
+  min-width: 160px;
+  height: 39px;
+  padding: 0 20px;
+  border: 1px solid #c53355;
+  border-radius: 4px;
+  background: #c53355;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.app-btn:hover:not(:disabled) {
+  background: #fff;
+  color: #c53355;
+}
+
+.app-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.app-btn--wide {
+  width: auto;
+  min-width: 160px;
+}
+
+.app-btn--outline {
+  background: #fff;
+  color: #c53355;
+}
+
+.app-btn--outline:hover:not(:disabled) {
+  background: #c53355;
+  color: #fff;
+}
+
+@media (max-width: 1023px) {
+  .report-generating-page__layout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: clamp(16px, 3vw, 24px);
+    width: 100%;
+    max-width: min(100%, var(--report-generating-video-slot-width));
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 clamp(16px, 4vw, 24px);
+    overflow: hidden;
+  }
+
+  /* 視頻在上、章節在下 */
+  .report-generating-page__video {
+    position: relative;
+    top: auto;
+    order: -1;
+    width: 100%;
+    max-width: min(100%, var(--report-generating-video-slot-width));
+    margin-top: 0;
+    align-self: center;
+    justify-self: center;
+    z-index: 1;
+  }
+
+  .report-generating-page__video-slot {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: var(--report-generating-video-aspect);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .report-generating-page__main {
+    order: 1;
+    width: 100%;
+    max-width: min(100%, var(--report-generating-video-slot-width));
+    margin-top: 0;
+    align-self: center;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .report-generating-page__hero-title {
+    font-size: clamp(22px, 4.2vw, var(--gen-ai-fs-hero));
+  }
+
+  .report-generating-chapters__row {
+    font-size: clamp(13px, 2.2vw, 15px);
+  }
+
+  .report-generating-page__footer {
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 24px;
+  }
+
+  .report-generating-page__footer-actions {
+    justify-content: center;
+  }
+}
+</style>