aegon-dangerious 1.0.0

package/build-report/components/ReportGeneratingPanel.vue

@@ -0,0 +1,908 @@
+<template>
+  <div ref="pageRef" class="report-generating-page" :class="{ 'is-scrollable': needsPageScroll }">
+    <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">
+          <div class="report-generating-page__content">
+            <ul v-if="visibleChapters.length" class="report-generating-chapters">
+              <li v-for="chapter in visibleChapters" :key="chapter.id" class="report-generating-chapters__row">
+                <span class="report-generating-chapters__state" :class="`is-${chapter.status}`">
+                  <template v-if="chapter.status === 'done'">
+                    <el-icon class="report-generating-chapters__icon is-success" aria-hidden="true">
+                      <CircleCheck />
+                    </el-icon>
+                  </template>
+                  <template v-else-if="chapter.status === 'failed'">
+                    <el-icon class="report-generating-chapters__icon is-failed" aria-hidden="true">
+                      <Close />
+                    </el-icon>
+                  </template>
+                  <template v-else-if="chapter.status === 'running'">
+                    <el-icon class="report-generating-chapters__icon is-loading" aria-hidden="true">
+                      <Loading />
+                    </el-icon>
+                  </template>
+                  <template v-else>
+                    <span class="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">
+                  <ChapterTitleScroll root-tag="span" :title="chapter.name" />
+                </div>
+              </li>
+            </ul>
+
+            <p v-if="isComplete" class="report-generating-page__summary">{{ completionSummary }}</p>
+          </div>
+        </div>
+
+        <footer v-if="isComplete" class="report-generating-page__footer">
+          <button type="button" class="app-btn app-btn--wide app-btn--outline"
+            :disabled="isGenerating || retrying || !failedCount" @click="retryFailedChapters">
+            重試失敗的章節
+          </button>
+          <button type="button" class="app-btn app-btn--wide" :disabled="isGenerating || retrying"
+            @click="enterEditing">
+            進入編輯
+          </button>
+        </footer>
+      </div>
+
+      <aside class="report-generating-page__video" aria-label="視頻播放區">
+        <div class="report-generating-page__video-slot">
+          <!-- 預留 video 嵌入位，後續可替換為 <video> 或播放器組件 -->
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCheck, Close, Loading } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  MOCK_REPORT_TEMPLATES,
+} from '../report-template-data'
+import { useReportWorkflow } from '../useReportWorkflow'
+import { bindViewportBodyHeight, lockDocumentScroll } from '../utils/scroll'
+import ChapterTitleScroll from './ChapterTitleScroll.vue'
+
+const emit = defineEmits<{
+  'enter-editing': []
+}>()
+
+const CHAPTER_MAX_COUNT = 100
+
+type ChapterGenerationStatus = 'pending' | 'running' | 'done' | 'failed'
+
+interface ChapterGenerationItem {
+  id: string
+  name: string
+  status: ChapterGenerationStatus
+  body?: string
+}
+
+const DEFAULT_CHAPTER_NAMES: string[] = [
+  '1. 摘要與本年總結',
+  '2. 宏觀經濟與政策背景',
+  '3. 重點風險與監管關注',
+  '4. 章節名稱',
+  '5. 章節名稱',
+  '6. 章節名稱',
+  '7. 章節名稱',
+  '8. 章節名稱',
+  '9. 章節名稱',
+  '10. 章節名稱',
+]
+
+/** Demo：固定失敗章節索引（0-based），對應 7 成功 / 3 失敗 */
+const DEMO_FAIL_INDICES = new Set<number>([2, 3, 6])
+
+const route = useRoute()
+
+const {
+  markGenerationSuccess,
+  selectedTemplate,
+  setSelectedTemplate,
+  setGeneratedChapterBodies,
+  loadTemplateFromSession,
+  draft,
+} = 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)
+const needsPageScroll = ref(false)
+let measureRafId = 0
+let resizeObserver: ResizeObserver | null = null
+let cleanupBodyHeight: (() => void) | null = null
+let cleanupLock: (() => void) | null = null
+let generationAbortController: AbortController | null = null
+
+/** Mock 輪詢間隔（毫秒） */
+const CHAPTER_POLL_INTERVAL_MS = 600
+
+interface MockChapterGenerateStartResponse {
+  taskId: string
+}
+
+interface MockChapterGeneratePollResponse {
+  success: boolean
+  status: 'running' | 'done' | 'failed'
+  progress: number
+  body?: string
+}
+
+interface MockChapterTask {
+  templateId: string
+  chapterIndex: number
+  chapterName: string
+  createdAt: number
+  durationMs: number
+  shouldFail: boolean
+  body: string
+}
+
+const mockChapterTasks = new Map<string, MockChapterTask>()
+let mockChapterTaskSeq = 0
+
+function throwIfAborted(signal: AbortSignal) {
+  if (signal.aborted) {
+    throw new DOMException('章節生成已取消', 'AbortError')
+  }
+}
+
+function getMockChapterDurationMs(total: number) {
+  if (total > 30) return 1200
+  if (total > 15) return 2000
+  return 2800
+}
+
+function buildMockChapterBody(chapterName: string, index: number) {
+  if (index === 0) {
+    return `本報告基於「${draft.industry || '目標行業'}」${draft.year}年度調研，從${draft.researchFocus || '核心視角'}出發，對行業風險進行系統性梳理。`
+  }
+  return `（${chapterName} 已生成，可在此編輯章節內容，並配合右側 Prompt 優化。）`
+}
+
+/** Mock API：發起章節生成（POST /report/chapter/generate/start） */
+async function mockStartChapterGeneration(params: {
+  templateId: string
+  chapterIndex: number
+  chapterName: string
+  totalChapters: number
+  forceSuccess?: boolean
+}): Promise<MockChapterGenerateStartResponse> {
+  await delay(180)
+  const taskId = `ch-${params.templateId}-${params.chapterIndex}-${++mockChapterTaskSeq}`
+  mockChapterTasks.set(taskId, {
+    templateId: params.templateId,
+    chapterIndex: params.chapterIndex,
+    chapterName: params.chapterName,
+    createdAt: Date.now(),
+    durationMs: getMockChapterDurationMs(params.totalChapters),
+    shouldFail: params.forceSuccess ? false : shouldFail(params.chapterIndex),
+    body: buildMockChapterBody(params.chapterName, params.chapterIndex),
+  })
+  return { taskId }
+}
+
+/** Mock API：輪詢章節生成（POST /report/chapter/generate/poll） */
+async function mockPollChapterGeneration(taskId: string): Promise<MockChapterGeneratePollResponse> {
+  await delay(CHAPTER_POLL_INTERVAL_MS)
+  const task = mockChapterTasks.get(taskId)
+  if (!task) {
+    return { success: false, status: 'failed', progress: 0 }
+  }
+
+  const elapsed = Date.now() - task.createdAt
+  const progress = Math.min(100, Math.floor((elapsed / task.durationMs) * 100))
+
+  if (elapsed < task.durationMs) {
+    return { success: false, status: 'running', progress }
+  }
+
+  mockChapterTasks.delete(taskId)
+
+  if (task.shouldFail) {
+    return { success: false, status: 'failed', progress: 100 }
+  }
+
+  return { 
+    success: true,
+    status: 'done',
+    progress: 100,
+    body: task.body,
+  }
+}
+
+/** 輪詢直至後端返回 success=true 或明確失敗 */
+async function pollChapterUntilSettled(
+  taskId: string,
+  signal: AbortSignal,
+): Promise<{ success: boolean; body?: string }> {
+  while (true) {
+    throwIfAborted(signal)
+    const res = await mockPollChapterGeneration(taskId)
+
+    if (res.status === 'running') {
+      continue
+    }
+
+    if (res.success) {
+      return { success: true, body: res.body ?? '' }
+    }
+
+    return { success: false }
+  }
+}
+
+/**
+ * 單章節：發起請求 + 輪詢。
+ * 上一章 res.success === true（或失敗）後，由 runChapterGeneration 順序調用下一章。
+ */
+async function fetchChapterByPolling(
+  index: number,
+  chapter: ChapterGenerationItem,
+  options: { signal: AbortSignal; forceSuccess?: boolean },
+) {
+  syncVisibleAhead(index)
+  chapter.status = 'running'
+  chapter.body = undefined
+
+  const { taskId } = await mockStartChapterGeneration({
+    templateId: templateId.value,
+    chapterIndex: index,
+    chapterName: chapter.name,
+    totalChapters: chapters.value.length,
+    forceSuccess: options.forceSuccess,
+  })
+
+  throwIfAborted(options.signal)
+  const res = await pollChapterUntilSettled(taskId, options.signal)
+
+  chapter.status = res.success ? 'done' : 'failed'
+  chapter.body = res.success ? res.body : undefined
+
+  scheduleDetectPageScroll()
+  await delay(120)
+}
+
+const chapters = ref<ChapterGenerationItem[]>([])
+const visibleCount = ref(0)
+const isGenerating = ref(false)
+const isComplete = ref(false)
+const retrying = ref(false)
+
+const visibleChapters = computed(() => chapters.value.slice(0, visibleCount.value))
+
+const doneCount = computed(() => chapters.value.filter((item) => item.status === 'done').length)
+const failedCount = computed(() => chapters.value.filter((item) => item.status === 'failed').length)
+
+const completionSummary = computed(
+  () => `報告生成完畢，${doneCount.value}個章節已完成，${failedCount.value}個章節失敗`,
+)
+
+const heroTitle = computed(() => (isComplete.value && !isGenerating.value ? '報告生成完畢' : '報告生成中...'))
+
+function buildChapterNames(): string[] {
+  const fromTemplate: string[] = selectedTemplate.value?.chapters ?? []
+
+  if (fromTemplate.length) {
+    return fromTemplate.slice(0, CHAPTER_MAX_COUNT).map((name: string, index: number) => {
+      const trimmed = name.trim()
+      return /^\d+\./.test(trimmed) ? trimmed : `${index + 1}. ${trimmed}`
+    })
+  }
+
+  return DEFAULT_CHAPTER_NAMES.slice(0, CHAPTER_MAX_COUNT)
+}
+
+function buildChapters(): ChapterGenerationItem[] {
+  return buildChapterNames().map((name, index) => ({
+    id: String(index),
+    name,
+    status: 'pending',
+  }))
+}
+
+function shouldFail(index: number) {
+  return DEMO_FAIL_INDICES.has(index)
+}
+
+function delay(ms: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms)
+  })
+}
+
+function syncVisibleAhead(currentIndex: number) {
+  visibleCount.value = Math.min(chapters.value.length, currentIndex + 3)
+}
+
+async function detectPageScroll() {
+  await nextTick()
+  await new Promise<void>((resolve) => {
+    cancelAnimationFrame(measureRafId)
+    measureRafId = requestAnimationFrame(() => {
+      measureRafId = requestAnimationFrame(() => resolve())
+    })
+  })
+
+  const page = pageRef.value
+  if (!page) return
+
+  const prevScrollable = page.classList.contains('is-scrollable')
+  if (!prevScrollable) {
+    page.classList.add('is-scrollable')
+  }
+
+  const overflows = page.scrollHeight > page.clientHeight + 1
+  needsPageScroll.value = overflows
+
+  if (!overflows) {
+    page.classList.remove('is-scrollable')
+  }
+}
+
+function scheduleDetectPageScroll() {
+  cancelAnimationFrame(measureRafId)
+  measureRafId = requestAnimationFrame(() => {
+    void detectPageScroll()
+  })
+}
+
+async function runChapterGeneration(indices: number[], signal: AbortSignal, forceSuccess = false) {
+  for (const index of indices) {
+    const chapter = chapters.value[index]
+    if (!chapter) continue
+    await fetchChapterByPolling(index, chapter, { signal, forceSuccess })
+    // 單章失敗不阻塞，繼續請求下一章
+  }
+}
+
+async function startGeneration() {
+  generationAbortController?.abort()
+  const controller = new AbortController()
+  generationAbortController = controller
+
+  chapters.value = buildChapters()
+  visibleCount.value = 0
+  isComplete.value = false
+  isGenerating.value = true
+
+  try {
+    const indices = chapters.value.map((_, index) => index)
+    await runChapterGeneration(indices, controller.signal)
+
+    visibleCount.value = chapters.value.length
+    isComplete.value = true
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      return
+    }
+    throw error
+  } finally {
+    isGenerating.value = false
+    scheduleDetectPageScroll()
+  }
+}
+
+function buildChapterBody(chapter: ChapterGenerationItem, index: number) {
+  if (chapter.body) return chapter.body
+  if (chapter.status !== 'done') return ''
+  return buildMockChapterBody(chapter.name, index)
+}
+
+function enterEditing() {
+  if (!selectedTemplate.value) {
+    const fallback = MOCK_REPORT_TEMPLATES[0] ?? null
+    if (!fallback) return
+    setSelectedTemplate(fallback)
+  }
+
+  setGeneratedChapterBodies(
+    chapters.value.map((chapter, index) => buildChapterBody(chapter, index)),
+  )
+  markGenerationSuccess()
+  emit('enter-editing')
+}
+
+async function retryFailedChapters() {
+  if (isGenerating.value || retrying.value) return
+
+  const failedIndices = chapters.value
+    .map((chapter, index) => (chapter.status === 'failed' ? index : -1))
+    .filter((index) => index >= 0)
+
+  if (!failedIndices.length) return
+
+  generationAbortController?.abort()
+  const controller = new AbortController()
+  generationAbortController = controller
+
+  retrying.value = true
+  isGenerating.value = true
+
+  try {
+    await runChapterGeneration(failedIndices, controller.signal)
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      return
+    }
+    throw error
+  } finally {
+    isGenerating.value = false
+    retrying.value = false
+    scheduleDetectPageScroll()
+  }
+}
+
+onMounted(() => {
+  loadTemplateFromSession()
+  if (pageRef.value) {
+    cleanupBodyHeight = bindViewportBodyHeight(pageRef.value)
+    resizeObserver = new ResizeObserver(() => scheduleDetectPageScroll())
+    resizeObserver.observe(pageRef.value)
+  }
+  cleanupLock = lockDocumentScroll()
+  window.addEventListener('resize', scheduleDetectPageScroll)
+  void startGeneration()
+  scheduleDetectPageScroll()
+})
+
+onUnmounted(() => {
+  generationAbortController?.abort()
+  cancelAnimationFrame(measureRafId)
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', scheduleDetectPageScroll)
+  cleanupBodyHeight?.()
+  cleanupLock?.()
+})
+
+watch([visibleChapters, isComplete, heroTitle], () => {
+  scheduleDetectPageScroll()
+})
+</script>
+
+<style scoped>
+.report-generating-page {
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-fw-bold: 700;
+  --report-generating-layout-width: 80%;
+  --report-generating-video-slot-width: 620px;
+  --report-generating-gap: 50px;
+  --report-generating-page-padding: 24px;
+  box-sizing: border-box;
+  min-height: 100dvh;
+  padding: var(--report-generating-page-padding);
+  background: #fff;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.report-generating-page.is-scrollable {
+  overflow-y: auto;
+}
+
+.report-generating-page__layout {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--report-generating-gap);
+  width: var(--report-generating-layout-width);
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.report-generating-page__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  min-height: calc(100dvh - var(--report-generating-page-padding) * 2);
+}
+
+.report-generating-page__video {
+  flex-shrink: 0;
+  position: sticky;
+  top: var(--report-generating-page-padding);
+  align-self: flex-start;
+  display: flex;
+  justify-content: flex-end;
+  width: var(--report-generating-video-slot-width);
+  max-width: 100%;
+}
+
+.report-generating-page__video-slot {
+  width: var(--report-generating-video-slot-width);
+  max-width: 100%;
+  height: 400px;
+  margin-left: auto;
+  border-radius: 12px;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 70% 55% at 28% 38%, rgba(186, 214, 255, 0.95) 0%, rgba(186, 214, 255, 0) 72%),
+    radial-gradient(ellipse 62% 48% at 72% 28%, rgba(214, 198, 255, 0.9) 0%, rgba(214, 198, 255, 0) 70%),
+    radial-gradient(ellipse 58% 52% at 52% 78%, rgba(255, 198, 220, 0.85) 0%, rgba(255, 198, 220, 0) 68%),
+    linear-gradient(135deg, #f7f9ff 0%, #f3f0ff 48%, #fff5f8 100%);
+}
+
+.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 {
+  flex: 1 0 auto;
+  min-height: 0;
+}
+
+.report-generating-page__content {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.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: 14px;
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+}
+
+.report-generating-chapters__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  min-height: 40px;
+}
+
+.report-generating-chapters__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll__viewport) {
+  height: 40px;
+  line-height: 40px;
+}
+
+.report-generating-chapters__name :deep(.chapter-title-scroll__text) {
+  color: #303133;
+  font-weight: 500;
+}
+
+.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) {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+}
+
+.report-generating-chapters__icon {
+  font-size: 18px;
+}
+
+.report-generating-chapters__icon.is-success {
+  color: #52c41a;
+}
+
+.report-generating-chapters__icon.is-failed {
+  color: #c53355;
+  font-weight: 700;
+}
+
+.report-generating-chapters__icon.is-loading {
+  color: #409eff;
+  animation: report-generating-spin 1s linear infinite;
+}
+
+.report-generating-hourglass {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 22px;
+  color: #909399;
+}
+
+.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-running .report-generating-chapters__icon.is-loading {
+  color: #409eff;
+}
+
+.report-generating-page__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+  margin-top: auto;
+  padding: 32px 0 0;
+  background: transparent;
+}
+
+@keyframes report-generating-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.report-generating-page__summary {
+  margin: 28px 0 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  text-align: left;
+}
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 160px;
+  height: 39px;
+  min-width: 160px;
+  padding: 0;
+  border: 1px solid #c53355;
+  border-radius: 4px;
+  background: #c53355;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  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: 160px;
+  min-width: 160px;
+}
+
+.app-btn--outline {
+  background: #fff;
+  color: #c53355;
+}
+
+.app-btn--outline:hover:not(:disabled) {
+  background: #c53355;
+  color: #fff;
+}
+
+@media (max-width: 960px) {
+  .report-generating-page {
+    --report-generating-page-padding: 16px;
+    --report-generating-layout-width: 100%;
+  }
+
+  .report-generating-page__layout {
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .report-generating-page__video {
+    position: relative;
+    top: auto;
+    order: -1;
+    width: 100%;
+  }
+
+  .report-generating-page__video-slot {
+    width: min(var(--report-generating-video-slot-width), 100%);
+    margin-left: auto;
+  }
+
+  .report-generating-page__main {
+    width: 100%;
+  }
+
+  .report-generating-page__footer {
+    justify-content: center;
+  }
+}
+</style>