chore: retire demo technical debt

admin-frontend/src/components/CreateStoryModal.vue

@@ -7,9 +7,10 @@ import { useUserStore } from '../stores/user'
 import { useStorybookStore } from '../stores/storybook'
 import { api } from '../api/client'
 import BaseButton from './ui/BaseButton.vue'
-import BaseInput from './ui/BaseInput.vue'
-import BaseSelect from './ui/BaseSelect.vue'
-import BaseTextarea from './ui/BaseTextarea.vue'
+import BaseInput from './ui/BaseInput.vue'
+import BaseSelect from './ui/BaseSelect.vue'
+import BaseTextarea from './ui/BaseTextarea.vue'
+import AnalysisAnimation from './ui/AnalysisAnimation.vue'
 import {
   SparklesIcon,
   PencilSquareIcon,
@@ -72,12 +73,37 @@ const themes: ThemeOption[] = [
   { icon: HeartIcon, label: t('home.themeTolerance'), value: '包容' },
 ]
 
-const profileOptions = computed(() =>
-  profiles.value.map(profile => ({ value: profile.id, label: profile.name })),
-)
-const universeOptions = computed(() =>
-  universes.value.map(universe => ({ value: universe.id, label: universe.name })),
-)
+const profileOptions = computed(() =>
+  profiles.value.map(profile => ({ value: profile.id, label: profile.name })),
+)
+const universeOptions = computed(() =>
+  universes.value.map(universe => ({ value: universe.id, label: universe.name })),
+)
+const requestedOutputMode = computed<'story' | 'storybook'>(() =>
+  inputType.value === 'full_story' ? 'story' : outputMode.value === 'storybook' ? 'storybook' : 'story',
+)
+const generationTitle = computed(() =>
+  requestedOutputMode.value === 'storybook' ? '绘本排版中...' : '故事编织中...',
+)
+const generationSteps = computed(() => {
+  if (requestedOutputMode.value === 'storybook') {
+    return [
+      '正在整理主题和成长目标...',
+      '生成绘本分镜和每页文字...',
+      '保存绘本主记录，确保刷新也能找回...',
+      '补全封面和分页插图...',
+      '马上进入可翻页阅读模式。',
+    ]
+  }
+
+  return [
+    '正在整理孩子档案和故事主题...',
+    '生成可先阅读的故事正文...',
+    '保存故事主记录，避免结果丢失...',
+    '补全封面图，失败也可稍后重试...',
+    '马上进入故事详情页。',
+  ]
+})
 
 // Methods
 function close() {
@@ -136,10 +162,8 @@ async function generateStory() {
   error.value = ''
 
   try {
-    const requestedOutputMode =
-      inputType.value === 'full_story' ? 'story' : outputMode.value === 'storybook' ? 'storybook' : 'story'
     const payload: Record<string, unknown> = {
-      output_mode: requestedOutputMode,
+      output_mode: requestedOutputMode.value,
       type: inputType.value,
       data: inputData.value,
       education_theme: educationTheme.value || undefined,
@@ -149,7 +173,7 @@ async function generateStory() {
     if (selectedProfileId.value) payload.child_profile_id = selectedProfileId.value
     if (selectedUniverseId.value) payload.universe_id = selectedUniverseId.value
 
-    if (requestedOutputMode === 'storybook') {
+    if (requestedOutputMode.value === 'storybook') {
       const response = await api.post<any>('/api/generations', payload)
 
       storybookStore.setStorybook(response)
@@ -187,14 +211,21 @@ async function generateStory() {
         v-if="modelValue"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
       >
-        <!-- 遮罩层 -->
-        <div
-          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
-          @click="close"
-        ></div>
-
-        <!-- 模态框内容 -->
-        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1C2035] border border-gray-700/50 rounded-3xl shadow-2xl p-6 md:p-8">
+        <!-- 遮罩层 -->
+        <div
+          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+          @click="!loading && close()"
+        ></div>
+
+        <!-- 全屏加载动画 -->
+        <AnalysisAnimation
+          v-if="loading"
+          :title="generationTitle"
+          :steps="generationSteps"
+        />
+
+        <!-- 模态框内容 -->
+        <div v-else class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1C2035] border border-gray-700/50 rounded-3xl shadow-2xl p-6 md:p-8">
             <!-- 关闭按钮 -->
             <button
               @click="close"
@@ -344,8 +375,19 @@ async function generateStory() {
               </div>
             </Transition>
 
-            <!-- 提交按钮 -->
-            <BaseButton
+            <!-- 提交按钮 -->
+            <div class="mb-4 rounded-lg border border-amber-400/20 bg-amber-300/10 px-4 py-3 text-sm text-amber-100 leading-6">
+              <div class="font-semibold mb-1">
+                {{ requestedOutputMode === 'storybook' ? '绘本会先保存，再补全插图' : '故事会先可读，再补全封面' }}
+              </div>
+              <p>
+                {{ requestedOutputMode === 'storybook'
+                  ? '即使部分插图暂时失败，绘本文字也会保留在故事库，稍后可以继续补全。'
+                  : '封面或语音失败不会影响正文阅读，结果页会给出状态和重试入口。' }}
+              </p>
+            </div>
+
+            <BaseButton
               class="w-full"
               size="lg"
               :loading="loading"