chore: clear lint and sync admin story views

2026-04-18 12:35:37 +08:00
parent bb575a7fe9
commit 9e1a17fa67
16 changed files with 670 additions and 355 deletions
--- a/admin-frontend/src/components/CreateStoryModal.vue
+++ b/admin-frontend/src/components/CreateStoryModal.vue
@@ -156,9 +156,10 @@ async function generateStory() {
      
      storybookStore.setStorybook(response)
      close()
-      router.push('/storybook/view')
+      const storybookPath = response.id ? `/storybook/view/${response.id}` : '/storybook/view'
+      router.push(storybookPath)
    } else {
-      const result = await api.post<any>('/api/generate/full', payload)
+      const result = await api.post<any>('/api/stories/generate/full', payload)
      const query: Record<string, string> = {}
      if (result.errors && Object.keys(result.errors).length > 0) {
        if (result.errors.image) query.imageError = '1'
--- a/admin-frontend/src/router.ts
+++ b/admin-frontend/src/router.ts
@@ -43,7 +43,7 @@ const router = createRouter({
      component: () => import('./views/StoryDetail.vue'),
    },
    {
-      path: '/storybook/view',
+      path: '/storybook/view/:id?',
      name: 'storybook-viewer',
      component: () => import('./views/StorybookViewer.vue'),
    },
--- a/admin-frontend/src/stores/storybook.ts
+++ b/admin-frontend/src/stores/storybook.ts
@@ -17,6 +17,10 @@ export interface Storybook {
  pages: StorybookPage[]
  cover_prompt: string
  cover_url?: string
+  generation_status?: string
+  image_status?: string
+  audio_status?: string
+  last_error?: string | null
 }

 export const useStorybookStore = defineStore('storybook', () => {
--- a/admin-frontend/src/utils/storyStatus.ts
+++ b/admin-frontend/src/utils/storyStatus.ts
@@ -0,0 +1,79 @@
+export type StoryGenerationStatus =
+  | 'narrative_ready'
+  | 'assets_generating'
+  | 'completed'
+  | 'degraded_completed'
+  | 'failed'
+
+export type StoryAssetStatus =
+  | 'not_requested'
+  | 'generating'
+  | 'ready'
+  | 'failed'
+
+interface StatusMeta {
+  label: string
+  description: string
+  badgeClass: string
+}
+
+const generationStatusMetaMap: Record<StoryGenerationStatus, StatusMeta> = {
+  narrative_ready: {
+    label: '文本已完成',
+    description: '故事内容已经生成，可以继续补充封面或音频。',
+    badgeClass: 'bg-sky-50 text-sky-700 border border-sky-100',
+  },
+  assets_generating: {
+    label: '资源生成中',
+    description: '封面或音频正在生成中，请稍候查看结果。',
+    badgeClass: 'bg-amber-50 text-amber-700 border border-amber-100',
+  },
+  completed: {
+    label: '内容可用',
+    description: '当前内容已经达到可阅读状态。',
+    badgeClass: 'bg-emerald-50 text-emerald-700 border border-emerald-100',
+  },
+  degraded_completed: {
+    label: '部分降级完成',
+    description: '核心内容可用，但有部分资源生成失败。',
+    badgeClass: 'bg-orange-50 text-orange-700 border border-orange-100',
+  },
+  failed: {
+    label: '生成失败',
+    description: '当前内容还未成功生成，请稍后重试。',
+    badgeClass: 'bg-rose-50 text-rose-700 border border-rose-100',
+  },
+}
+
+const assetStatusMetaMap: Record<StoryAssetStatus, StatusMeta> = {
+  not_requested: {
+    label: '未请求',
+    description: '还没有发起该资源生成。',
+    badgeClass: 'bg-slate-100 text-slate-600 border border-slate-200',
+  },
+  generating: {
+    label: '生成中',
+    description: '资源正在生成，请稍候。',
+    badgeClass: 'bg-amber-50 text-amber-700 border border-amber-100',
+  },
+  ready: {
+    label: '已就绪',
+    description: '该资源可使用。',
+    badgeClass: 'bg-emerald-50 text-emerald-700 border border-emerald-100',
+  },
+  failed: {
+    label: '失败',
+    description: '最近一次生成失败，可以稍后重试。',
+    badgeClass: 'bg-rose-50 text-rose-700 border border-rose-100',
+  },
+}
+
+export function getGenerationStatusMeta(status?: string): StatusMeta {
+  return generationStatusMetaMap[(status ?? 'narrative_ready') as StoryGenerationStatus]
+    ?? generationStatusMetaMap.narrative_ready
+}
+
+export function getAssetStatusMeta(status?: string): StatusMeta {
+  return assetStatusMetaMap[(status ?? 'not_requested') as StoryAssetStatus]
+    ?? assetStatusMetaMap.not_requested
+}
--- a/admin-frontend/src/views/MyStories.vue
+++ b/admin-frontend/src/views/MyStories.vue
@@ -21,6 +21,7 @@ interface StoryItem {
  title: string
  image_url: string | null
  created_at: string
+  mode: string
 }

 const router = useRouter()
@@ -60,6 +61,10 @@ function goToCreate() {
  showCreateModal.value = true
 }

+function getStoryPath(story: StoryItem) {
+  return story.mode === 'storybook' ? `/storybook/view/${story.id}` : `/story/${story.id}`
+}
+
 onMounted(() => {
  fetchStories()
  if (router.currentRoute.value.query.openCreate) {
@@ -140,7 +145,7 @@ onMounted(() => {
        <router-link
          v-for="story in stories"
          :key="story.id"
-          :to="`/story/${story.id}`"
+          :to="getStoryPath(story)"
          class="block group"
        >
          <BaseCard hover padding="none" class="h-full overflow-hidden flex flex-col">
--- a/admin-frontend/src/views/StoryDetail.vue
+++ b/admin-frontend/src/views/StoryDetail.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../api/client'
 import BaseButton from '../components/ui/BaseButton.vue'
 import ConfirmModal from '../components/ui/ConfirmModal.vue'
 import LoadingSpinner from '../components/ui/LoadingSpinner.vue'
+import { getAssetStatusMeta, getGenerationStatusMeta } from '../utils/storyStatus'
 import {
  ArrowLeftIcon,
  ExclamationTriangleIcon,
@@ -12,21 +13,30 @@ import {
  SpeakerWaveIcon,
  SparklesIcon,
  TrashIcon,
-  XMarkIcon,
 } from '@heroicons/vue/24/outline'

-const route = useRoute()
-const router = useRouter()
-
 interface Story {
  id: number
  title: string
-  story_text: string
+  story_text: string | null
  cover_prompt: string | null
  image_url: string | null
  mode: string
+  generation_status: string
+  image_status: string
+  audio_status: string
+  last_error: string | null
+  pages?: Array<{
+    page_number: number
+    text: string
+    image_prompt: string
+    image_url?: string | null
+  }> | null
 }

+const route = useRoute()
+const router = useRouter()
+
 const story = ref<Story | null>(null)
 const loading = ref(true)
 const imageLoading = ref(false)
@@ -38,11 +48,29 @@ const audioProgress = ref(0)
 const audioDuration = ref(0)
 const error = ref('')
 const showDeleteConfirm = ref(false)
-const imageGenerationFailed = ref(false)
+
+const storyParagraphs = computed(() => story.value?.story_text?.split('\n\n') ?? [])
+const generationMeta = computed(() => getGenerationStatusMeta(story.value?.generation_status))
+const imageMeta = computed(() => getAssetStatusMeta(story.value?.image_status))
+const audioMeta = computed(() => getAssetStatusMeta(story.value?.audio_status))
+
+async function refreshStorySnapshot() {
+  const data = await api.get<Story>(`/api/stories/${route.params.id}`)
+
+  if (data.mode === 'storybook') {
+    await router.replace(`/storybook/view/${data.id}`)
+    return
+  }
+
+  story.value = data
+}

 async function fetchStory() {
+  loading.value = true
+  error.value = ''
+
  try {
-    story.value = await api.get<Story>(`/api/stories/${route.params.id}`)
+    await refreshStorySnapshot()
  } catch (e) {
    error.value = e instanceof Error ? e.message : '加载失败'
  } finally {
@@ -52,12 +80,17 @@ async function fetchStory() {

 async function generateImage() {
  if (!story.value) return
+
  imageLoading.value = true
+  error.value = ''
+
  try {
-    const result = await api.post<{ image_url: string }>(`/api/image/generate/${story.value.id}`)
-    story.value.image_url = result.image_url
+    story.value = await api.post<Story>(`/api/stories/${story.value.id}/assets/retry`, {
+      assets: ['image'],
+    })
  } catch (e) {
    error.value = e instanceof Error ? e.message : '图片生成失败'
+    await refreshStorySnapshot().catch(() => undefined)
  } finally {
    imageLoading.value = false
  }
@@ -65,16 +98,25 @@ async function generateImage() {

 async function loadAudio() {
  if (!story.value || audioUrl.value) return
+
  audioLoading.value = true
+  error.value = ''
+
  try {
    const response = await fetch(`/api/audio/${story.value.id}`, {
      credentials: 'include',
    })
-    if (!response.ok) throw new Error('音频加载失败')
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({ detail: '音频加载失败' }))
+      throw new Error(payload.detail || '音频加载失败')
+    }
+
    const blob = await response.blob()
    audioUrl.value = URL.createObjectURL(blob)
+    await refreshStorySnapshot().catch(() => undefined)
  } catch (e) {
    error.value = e instanceof Error ? e.message : '音频加载失败'
+    await refreshStorySnapshot().catch(() => undefined)
  } finally {
    audioLoading.value = false
  }
@@ -82,24 +124,29 @@ async function loadAudio() {

 function togglePlay() {
  if (!audioRef.value) return
+
  if (isPlaying.value) {
    audioRef.value.pause()
  } else {
-    audioRef.value.play()
+    void audioRef.value.play()
  }
+
  isPlaying.value = !isPlaying.value
 }

 function updateProgress() {
  if (!audioRef.value) return
+
  audioProgress.value = audioRef.value.currentTime
  audioDuration.value = audioRef.value.duration || 0
 }

-function seekAudio(e: MouseEvent) {
+function seekAudio(event: MouseEvent) {
  if (!audioRef.value || !audioDuration.value) return
-  const rect = (e.target as HTMLElement).getBoundingClientRect()
-  const percent = (e.clientX - rect.left) / rect.width
+
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  const percent = (event.clientX - rect.left) / rect.width
  audioRef.value.currentTime = percent * audioDuration.value
 }

@@ -111,9 +158,10 @@ function formatTime(seconds: number) {

 async function deleteStory() {
  if (!story.value) return
+
  try {
    await api.delete(`/api/stories/${story.value.id}`)
-    router.push('/my-stories')
+    await router.push('/my-stories')
  } catch (e) {
    error.value = e instanceof Error ? e.message : '删除失败'
  }
@@ -124,12 +172,14 @@ async function confirmDelete() {
  await deleteStory()
 }

-onMounted(() => {
-  fetchStory()
-  if (route.query.imageError === '1') {
-    imageGenerationFailed.value = true
-  }
-})
+watch(
+  () => route.params.id,
+  () => {
+    story.value = null
+    void fetchStory()
+  },
+  { immediate: true },
+)

 onUnmounted(() => {
  if (audioUrl.value) {
@@ -139,7 +189,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="max-w-4xl mx-auto px-4">
+  <div class="max-w-5xl mx-auto px-4">
    <div v-if="loading" class="py-20">
      <LoadingSpinner size="lg" text="正在加载故事..." />
    </div>
@@ -147,7 +197,7 @@ onUnmounted(() => {
    <div v-else-if="error && !story" class="text-center py-20">
      <ExclamationTriangleIcon class="h-14 w-14 text-red-400 mx-auto mb-4" />
      <p class="text-red-500 text-lg mb-6">{{ error }}</p>
-      <BaseButton @click="router.push('/')">返回首页</BaseButton>
+      <BaseButton @click="router.push('/my-stories')">返回故事库</BaseButton>
    </div>

    <div v-else-if="story" class="space-y-8">
@@ -156,29 +206,16 @@ onUnmounted(() => {
        返回
      </BaseButton>

-      <Transition
-        enter-active-class="transition-all duration-300"
-        enter-from-class="opacity-0 -translate-y-2"
-        enter-to-class="opacity-100 translate-y-0"
-      >
      <div
-          v-if="imageGenerationFailed && !story?.image_url"
-          class="p-4 bg-amber-50 border border-amber-200 text-amber-700 rounded-xl flex items-center justify-between"
+        v-if="story.last_error"
+        class="p-4 bg-amber-50 border border-amber-200 text-amber-700 rounded-2xl flex items-start gap-3"
      >
-          <div class="flex items-center space-x-2">
-            <ExclamationTriangleIcon class="h-5 w-5" />
-            <span>封面生成失败，您可以稍后重试</span>
+        <ExclamationTriangleIcon class="h-5 w-5 mt-0.5 flex-shrink-0" />
+        <div>
+          <div class="font-semibold mb-1">最近一次资源生成异常</div>
+          <p class="text-sm leading-6">{{ story.last_error }}</p>
        </div>
-          <BaseButton
-            variant="ghost"
-            size="sm"
-            class="text-amber-500 hover:text-amber-700"
-            @click="imageGenerationFailed = false"
-          >
-            <XMarkIcon class="h-5 w-5" />
-          </BaseButton>
      </div>
-      </Transition>

      <div class="glass rounded-3xl shadow-2xl overflow-hidden">
        <div class="relative aspect-[21/9] bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 overflow-hidden">
@@ -188,28 +225,60 @@ onUnmounted(() => {
            :alt="story.title"
            class="w-full h-full object-cover"
          />
-          <div v-else class="absolute inset-0 flex flex-col items-center justify-center">
+          <div v-else class="absolute inset-0 flex flex-col items-center justify-center px-6 text-center">
            <PhotoIcon class="h-16 w-16 text-purple-400 mb-4" />
+            <p class="text-gray-600 mb-4 max-w-md">
+              {{ imageMeta.description }}
+            </p>
            <BaseButton
+              v-if="story.cover_prompt"
              variant="secondary"
              :loading="imageLoading"
              @click="generateImage"
            >
-              <template v-if="imageLoading">AI 正在绘制...</template>
-              <template v-else>生成精美封面</template>
+              <template v-if="imageLoading">正在生成封面...</template>
+              <template v-else>{{ story.image_status === 'failed' ? '重试生成封面' : '生成封面' }}</template>
            </BaseButton>
          </div>
-          <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white/80 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white/80 to-transparent" />
        </div>

        <div class="p-8 md:p-12 -mt-16 relative">
-          <h1 class="text-3xl md:text-4xl font-bold gradient-text mb-8 leading-tight">
+          <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
+            <h1 class="text-3xl md:text-4xl font-bold gradient-text leading-tight">
              {{ story.title }}
            </h1>
+            <span
+              class="px-3 py-1.5 rounded-full text-sm font-medium"
+              :class="generationMeta.badgeClass"
+            >
+              {{ generationMeta.label }}
+            </span>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
+            <div class="rounded-2xl border border-gray-100 bg-white/80 p-5">
+              <div class="text-sm text-gray-500 mb-2">整体状态</div>
+              <div class="font-semibold text-gray-800 mb-2">{{ generationMeta.label }}</div>
+              <p class="text-sm text-gray-500 leading-6">{{ generationMeta.description }}</p>
+            </div>
+            <div class="rounded-2xl border border-gray-100 bg-white/80 p-5">
+              <div class="text-sm text-gray-500 mb-2">封面资源</div>
+              <div class="font-semibold text-gray-800 mb-2">{{ imageMeta.label }}</div>
+              <p class="text-sm text-gray-500 leading-6">{{ imageMeta.description }}</p>
+            </div>
+            <div class="rounded-2xl border border-gray-100 bg-white/80 p-5">
+              <div class="text-sm text-gray-500 mb-2">音频资源</div>
+              <div class="font-semibold text-gray-800 mb-2">{{ audioMeta.label }}</div>
+              <p class="text-sm text-gray-500 leading-6">
+                {{ audioMeta.description }} 音频首次生成后会缓存复用，状态记录的是当前可播放结果。
+              </p>
+            </div>
+          </div>

          <div class="prose prose-lg max-w-none mb-10">
            <p
-              v-for="(paragraph, index) in story.story_text.split('\n\n')"
+              v-for="(paragraph, index) in storyParagraphs"
              :key="index"
              class="text-gray-700 leading-loose mb-6 first-letter:text-4xl first-letter:font-bold first-letter:text-purple-600 first-letter:float-left first-letter:mr-2"
            >
@@ -224,10 +293,10 @@ onUnmounted(() => {
                @click="loadAudio"
                class="mx-auto"
              >
-                <template v-if="audioLoading">加载中...</template>
+                <template v-if="audioLoading">正在准备音频...</template>
                <template v-else>
                  <SpeakerWaveIcon class="h-5 w-5" />
-                  听故事
+                  试听故事
                </template>
              </BaseButton>
            </div>
@@ -262,7 +331,7 @@ onUnmounted(() => {
                    <div
                      class="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full transition-all duration-100"
                      :style="{ width: `${(audioProgress / audioDuration) * 100 || 0}%` }"
-                    ></div>
+                    />
                  </div>
                  <div class="flex justify-between text-sm text-gray-500 mt-1">
                    <span>{{ formatTime(audioProgress) }}</span>
@@ -301,7 +370,7 @@ onUnmounted(() => {
    <ConfirmModal
      :show="showDeleteConfirm"
      title="确定删除这个故事吗？"
-      message="删除后将无法恢复"
+      message="删除后将无法恢复。"
      confirm-text="确定删除"
      cancel-text="取消"
      variant="danger"
--- a/admin-frontend/src/views/StorybookViewer.vue
+++ b/admin-frontend/src/views/StorybookViewer.vue
@@ -1,37 +1,89 @@
-
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../api/client'
 import { useStorybookStore } from '../stores/storybook'
 import BaseButton from '../components/ui/BaseButton.vue'
+import LoadingSpinner from '../components/ui/LoadingSpinner.vue'
+import { getAssetStatusMeta, getGenerationStatusMeta } from '../utils/storyStatus'
 import {
  ArrowLeftIcon,
  ArrowRightIcon,
-  HomeIcon,
  BookOpenIcon,
+  ExclamationTriangleIcon,
+  HomeIcon,
+  PhotoIcon,
  SparklesIcon,
-  PhotoIcon
 } from '@heroicons/vue/24/outline'

+interface StoryDetailResponse {
+  id: number
+  title: string
+  story_text: string | null
+  pages: Array<{
+    page_number: number
+    text: string
+    image_prompt: string
+    image_url?: string | null
+  }> | null
+  cover_prompt: string | null
+  image_url: string | null
+  mode: string
+  generation_status: string
+  image_status: string
+  audio_status: string
+  last_error: string | null
+}
+
+const route = useRoute()
 const router = useRouter()
 const store = useStorybookStore()
+
 const storybook = computed(() => store.currentStorybook)
+const loading = ref(true)
+const error = ref('')
+const currentPageIndex = ref(-1)

-const currentPageIndex = ref(-1) // -1 for cover
-
-// 计算属性
 const totalPages = computed(() => storybook.value?.pages.length || 0)
 const isCover = computed(() => currentPageIndex.value === -1)
 const isLastPage = computed(() => currentPageIndex.value === totalPages.value - 1)
+const generationMeta = computed(() => getGenerationStatusMeta(storybook.value?.generation_status))
+const imageMeta = computed(() => getAssetStatusMeta(storybook.value?.image_status))
+const audioMeta = computed(() => getAssetStatusMeta(storybook.value?.audio_status))
 const currentPage = computed(() => {
  if (!storybook.value || isCover.value) return null
  return storybook.value.pages[currentPageIndex.value]
 })
+const pageImageMessage = computed(() => {
+  if (storybook.value?.image_status === 'failed') {
+    return '部分插图生成失败，但不影响继续阅读。'
+  }
+
+  if (storybook.value?.image_status === 'generating') {
+    return '插图正在生成中，请稍后刷新查看。'
+  }
+
+  if (storybook.value?.image_status === 'not_requested') {
+    return '当前绘本还没有发起插图生成。'
+  }
+
+  return currentPage.value?.image_prompt
+    ? `“${currentPage.value.image_prompt}”`
+    : '当前页插图暂未就绪。'
+})
+
+const currentStoryId = computed(() => {
+  const rawId = route.params.id
+  const normalized = Array.isArray(rawId) ? rawId[0] : rawId
+  if (!normalized) return null
+
+  const parsed = Number(normalized)
+  return Number.isFinite(parsed) ? parsed : null
+})

-// 导航
 function goHome() {
  store.clearStorybook()
-  router.push('/')
+  router.push('/my-stories')
 }

 function nextPage() {
@@ -46,16 +98,89 @@ function prevPage() {
  }
 }

-onMounted(() => {
-  if (!storybook.value) {
-    router.push('/')
+async function loadStorybook() {
+  loading.value = true
+  error.value = ''
+  currentPageIndex.value = -1
+
+  const storyId = currentStoryId.value
+  const cachedStorybook = store.currentStorybook
+
+  if (storyId === null) {
+    if (cachedStorybook) {
+      loading.value = false
+      return
    }
+
+    await router.replace('/my-stories')
+    loading.value = false
+    return
+  }
+
+  if (cachedStorybook?.id === storyId) {
+    loading.value = false
+    return
+  }
+
+  try {
+    const detail = await api.get<StoryDetailResponse>(`/api/stories/${storyId}`)
+
+    if (detail.mode !== 'storybook') {
+      await router.replace(`/story/${detail.id}`)
+      return
+    }
+
+    store.setStorybook({
+      id: detail.id,
+      title: detail.title,
+      main_character: cachedStorybook?.id === detail.id ? cachedStorybook.main_character : '故事主角',
+      art_style: cachedStorybook?.id === detail.id ? cachedStorybook.art_style : 'AI 绘本风格',
+      pages: (detail.pages ?? []).map((page) => ({
+        ...page,
+        image_url: page.image_url ?? undefined,
+      })),
+      cover_prompt: detail.cover_prompt ?? '',
+      cover_url: detail.image_url ?? undefined,
+      generation_status: detail.generation_status,
+      image_status: detail.image_status,
+      audio_status: detail.audio_status,
+      last_error: detail.last_error,
    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '绘本加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => route.params.id,
+  () => {
+    void loadStorybook()
+  },
+  { immediate: true },
+)
 </script>

 <template>
-  <div class="storybook-viewer" v-if="storybook">
-    <!-- 导航栏 -->
+  <div v-if="loading" class="h-screen bg-[#0D0F1A] flex items-center justify-center px-4">
+    <LoadingSpinner size="lg" text="正在载入绘本..." />
+  </div>
+
+  <div v-else-if="error" class="h-screen bg-[#0D0F1A] flex items-center justify-center px-4">
+    <div class="max-w-md text-center text-white">
+      <ExclamationTriangleIcon class="w-14 h-14 mx-auto mb-4 text-amber-400" />
+      <p class="text-lg mb-6">{{ error }}</p>
+      <div class="flex items-center justify-center gap-3">
+        <BaseButton @click="loadStorybook">重新加载</BaseButton>
+        <BaseButton variant="ghost" class="text-white border-white/20 hover:bg-white/10" @click="goHome">
+          返回故事库
+        </BaseButton>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="storybook" class="storybook-viewer">
    <nav class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-gradient-to-b from-black/50 to-transparent">
      <button @click="goHome" class="p-2 rounded-full bg-white/10 backdrop-blur hover:bg-white/20 text-white transition-all">
        <HomeIcon class="w-6 h-6" />
@@ -63,39 +188,31 @@ onMounted(() => {
      <div class="text-white font-serif text-lg text-shadow">
        {{ storybook.title }}
      </div>
-      <div class="w-10"></div> <!-- 占位 -->
+      <div class="w-10"></div>
    </nav>

-    <!-- 主展示区 -->
    <div class="h-screen w-full flex items-center justify-center p-4 md:p-8 relative overflow-hidden">
-      <!-- 动态背景 -->
      <div class="absolute inset-0 bg-[#0D0F1A] z-0">
        <div class="absolute inset-0 bg-gradient-to-br from-[#1a1a2e] to-[#0D0F1A]"></div>
        <div class="stars"></div>
      </div>

-      <!-- 书页容器 -->
      <div class="book-container relative z-10 w-full max-w-5xl aspect-[16/10] bg-[#fffbf0] rounded-2xl shadow-2xl overflow-hidden flex transition-all duration-500">
-        
-        <!-- 封面模式 -->
        <div v-if="isCover" class="w-full h-full flex flex-col md:flex-row animate-fade-in">
-          <!-- 封面图 -->
          <div class="w-full md:w-1/2 h-1/2 md:h-full relative overflow-hidden bg-gray-900 group">
            <template v-if="storybook.cover_url">
              <img :src="storybook.cover_url" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
            </template>
            <div v-else class="w-full h-full flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-indigo-900 to-purple-900 text-white">
              <SparklesIcon class="w-20 h-20 mb-4 opacity-50" />
-               <p class="text-white/60 text-sm">封面正在构思中...</p>
+              <p class="text-white/70 text-sm max-w-xs leading-6">{{ imageMeta.description }}</p>
            </div>
-            <!-- 封面遮罩 -->
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent md:bg-gradient-to-r"></div>
            <div class="absolute bottom-6 left-6 text-white md:hidden">
              <span class="inline-block px-3 py-1 bg-yellow-500/90 rounded-full text-xs font-bold mb-2 text-black">绘本故事</span>
            </div>
          </div>

-          <!-- 封面信息 -->
          <div class="w-full md:w-1/2 h-1/2 md:h-full p-8 md:p-16 flex flex-col justify-center bg-[#fffbf0] text-amber-900">
            <div class="hidden md:block mb-8">
              <span class="inline-block px-4 py-1 border border-amber-900/30 rounded-full text-sm tracking-widest uppercase">Original Storybook</span>
@@ -104,24 +221,46 @@ onMounted(() => {
            <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 leading-tight">{{ storybook.title }}</h1>

            <div class="space-y-4 mb-10 text-amber-900/70">
-              <p class="flex items-center"><span class="w-20 font-bold opacity-50">主角</span> {{ storybook.main_character }}</p>
-              <p class="flex items-center"><span class="w-20 font-bold opacity-50">画风</span> {{ storybook.art_style }}</p>
+              <p class="flex items-center"><span class="w-20 font-bold opacity-50">主角</span> {{ storybook.main_character || '故事主角' }}</p>
+              <p class="flex items-center"><span class="w-20 font-bold opacity-50">画风</span> {{ storybook.art_style || 'AI 绘本风格' }}</p>
+            </div>
+
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="px-3 py-1 rounded-full text-xs font-semibold" :class="generationMeta.badgeClass">
+                {{ generationMeta.label }}
+              </span>
+              <span class="px-3 py-1 rounded-full text-xs font-semibold" :class="imageMeta.badgeClass">
+                插图：{{ imageMeta.label }}
+              </span>
+              <span class="px-3 py-1 rounded-full text-xs font-semibold" :class="audioMeta.badgeClass">
+                音频：{{ audioMeta.label }}
+              </span>
+            </div>
+
+            <p class="text-sm leading-6 text-amber-900/70 mb-6">
+              {{ generationMeta.description }}
+            </p>
+
+            <div
+              v-if="storybook.last_error"
+              class="mb-8 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800"
+            >
+              <div class="font-semibold mb-1">最近一次资源异常</div>
+              <p class="leading-6">{{ storybook.last_error }}</p>
            </div>

            <BaseButton size="lg" @click="nextPage" class="self-start shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all">
-              开始阅读 <BookOpenIcon class="w-5 h-5 ml-2" />
+              开始阅读
+              <BookOpenIcon class="w-5 h-5 ml-2" />
            </BaseButton>
          </div>
        </div>

-        <!-- 内页模式 -->
        <div v-else class="w-full h-full flex flex-col md:flex-row animate-fade-in relative">
-          <!-- 页码 -->
          <div class="absolute bottom-4 right-6 text-amber-900/30 font-serif text-xl z-20">
            {{ currentPageIndex + 1 }} / {{ totalPages }}
          </div>

-          <!-- 插图区域 (左) -->
          <div class="w-full md:w-1/2 h-1/2 md:h-full relative bg-gray-100 border-r border-amber-900/5">
            <template v-if="currentPage?.image_url">
              <img :src="currentPage.image_url" class="w-full h-full object-cover" />
@@ -131,12 +270,19 @@ onMounted(() => {
                <div class="inline-block p-6 rounded-full bg-amber-50 mb-4">
                  <PhotoIcon class="w-10 h-10 text-amber-300" />
                </div>
-                  <p class="text-amber-900/40 text-sm max-w-xs mx-auto italic">"{{ currentPage?.image_prompt }}"</p>
+                <p class="text-amber-900/50 text-sm max-w-xs mx-auto italic leading-6">
+                  {{ pageImageMessage }}
+                </p>
+                <p
+                  v-if="storybook.last_error && storybook.image_status === 'failed'"
+                  class="mt-3 text-xs font-medium text-amber-700"
+                >
+                  可以先继续阅读，稍后再回来看插图结果。
+                </p>
              </div>
            </div>
          </div>

-          <!-- 文字区域 (右) -->
          <div class="w-full md:w-1/2 h-1/2 md:h-full p-8 md:p-16 flex items-center justify-center bg-[#fffbf0]">
            <div class="prose prose-xl prose-amber font-serif text-amber-900 leading-relaxed text-center md:text-left">
              <p>{{ currentPage?.text }}</p>
@@ -145,7 +291,6 @@ onMounted(() => {
        </div>
      </div>

-      <!-- 翻页控制 (悬浮) -->
      <button
        v-if="!isCover"
        @click="prevPage"
@@ -162,7 +307,6 @@ onMounted(() => {
        <ArrowRightIcon class="w-6 h-6 md:w-8 md:h-8" />
      </button>

-      <!-- 最后一页的完成按钮 -->
      <BaseButton
        v-if="isLastPage"
        @click="goHome"
@@ -170,7 +314,6 @@ onMounted(() => {
      >
        读完了，再来一本
      </BaseButton>
-
    </div>
  </div>
 </template>
--- a/backend/app/api/admin_providers.py
+++ b/backend/app/api/admin_providers.py
@@ -6,7 +6,9 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from app.core.admin_auth import admin_guard
 from app.db.admin_models import Provider
 from app.db.database import get_db
+from app.services.adapters.registry import AdapterRegistry
 from app.services.cost_tracker import cost_tracker
+from app.services.provider_router import DEFAULT_PROVIDERS
 from app.services.secret_service import SecretService

 router = APIRouter(dependencies=[Depends(admin_guard)])
@@ -54,11 +56,6 @@ class ProviderResponse(BaseModel):

    model_config = ConfigDict(from_attributes=True)

-
-from app.services.adapters.registry import AdapterRegistry
-from app.services.provider_router import DEFAULT_PROVIDERS
-
-
@router.get("/providers/adapters")
 async def list_available_adapters():
    """获取所有可用的适配器类型 (定义的类)。"""
--- a/backend/app/api/profiles.py
+++ b/backend/app/api/profiles.py
@@ -266,13 +266,18 @@ async def get_profile_timeline(
                    if not obt_at:
                        obt_at = u.updated_at.isoformat()

-                    events.append(TimelineEvent(
+                    events.append(
+                        TimelineEvent(
                            date=obt_at,
                            type="achievement",
                            title=f"获得成就：{ach.get('type')}",
-                        description=ach.get('description'),
-                        metadata={"universe_id": u.id, "source_story_id": ach.get("source_story_id")}
-                    ))
+                            description=ach.get("description"),
+                            metadata={
+                                "universe_id": u.id,
+                                "source_story_id": ach.get("source_story_id"),
+                            },
+                        )
+                    )

    # Sort by date desc
    events.sort(key=lambda x: x.date, reverse=True)
--- a/backend/app/api/reading_events.py
+++ b/backend/app/api/reading_events.py
@@ -45,7 +45,11 @@ class ReadingEventResponse(BaseModel):
        from_attributes = True


-@router.post("/reading-events", response_model=ReadingEventResponse, status_code=status.HTTP_201_CREATED)
+@router.post(
+    "/reading-events",
+    response_model=ReadingEventResponse,
+    status_code=status.HTTP_201_CREATED,
+)
 async def create_reading_event(
    payload: ReadingEventCreate,
    user: User = Depends(require_user),
--- a/backend/app/db/admin_models.py
+++ b/backend/app/db/admin_models.py
@@ -29,7 +29,10 @@ class Provider(Base):
    weight: Mapped[int] = mapped_column(Integer, default=1)
    priority: Mapped[int] = mapped_column(Integer, default=0)
    enabled: Mapped[bool] = mapped_column(Boolean, default=True)
-    config_json: Mapped[dict | None] = mapped_column(JSON, nullable=True)  # 存储额外配置(speed, vol, etc)
+    config_json: Mapped[dict | None] = mapped_column(
+        JSON,
+        nullable=True,
+    )  # 存储额外配置(speed, vol, etc)
    config_ref: Mapped[str] = mapped_column(String(100), nullable=True)  # 环境变量 key 名称（回退）
    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=datetime.utcnow)
    updated_at: Mapped[datetime] = mapped_column(
--- a/backend/app/services/adapters/image/init.py
+++ b/backend/app/services/adapters/image/init.py
@@ -1,3 +1,4 @@
-"""图像生成适配器。"""# Image adapters
-from app.services.adapters.image import cqtai as _image_cqtai_adapter  # noqa: F401
+"""图像生成适配器。"""
+
 from app.services.adapters.image import antigravity as _image_antigravity_adapter  # noqa: F401
+from app.services.adapters.image import cqtai as _image_cqtai_adapter  # noqa: F401
--- a/backend/app/services/adapters/image/antigravity.py
+++ b/backend/app/services/adapters/image/antigravity.py
@@ -4,9 +4,7 @@
 支持 gemini-3-pro-image 等模型。
 """

-import base64
 import time
-from typing import Any

 from openai import AsyncOpenAI
 from tenacity import (
@@ -108,7 +106,7 @@ class AntigravityImageAdapter(BaseAdapter[str]):
        """检查 Antigravity API 是否可用。"""
        try:
            # 简单测试连通性
-            response = await self.client.chat.completions.create(
+            await self.client.chat.completions.create(
                model=self.config.model or DEFAULT_MODEL,
                messages=[{"role": "user", "content": "test"}],
                max_tokens=1,
--- a/backend/app/services/memory_service.py
+++ b/backend/app/services/memory_service.py
@@ -100,7 +100,11 @@ async def build_enhanced_memory_context(

            # 常驻角色
            if universe.recurring_characters:
-                chars = [f"{c.get('name')} ({c.get('type')})" for c in universe.recurring_characters if isinstance(c, dict)]
+                chars = [
+                    f"{c.get('name')} ({c.get('type')})"
+                    for c in universe.recurring_characters
+                    if isinstance(c, dict)
+                ]
                context_parts.append(f"已知伙伴：{'、'.join(chars)}")

            # 成就
--- a/backend/app/services/provider_cache.py
+++ b/backend/app/services/provider_cache.py
@@ -19,6 +19,7 @@ ProviderType = Literal["text", "image", "tts", "storybook"]

 class CachedProvider(BaseModel):
    """Serializable provider configuration matching DB model fields."""
+
    id: str
    name: str
    type: str
@@ -49,7 +50,8 @@ async def reload_providers(db: AsyncSession) -> dict[ProviderType, list[CachedPr
        # Convert to Pydantic models
        cached_list = []
        for p in providers:
-            cached_list.append(CachedProvider(
+            cached_list.append(
+                CachedProvider(
                    id=p.id,
                    name=p.name,
                    type=p.type,
@@ -63,8 +65,9 @@ async def reload_providers(db: AsyncSession) -> dict[ProviderType, list[CachedPr
                    priority=p.priority,
                    enabled=p.enabled,
                    config_json=p.config_json,
-                config_ref=p.config_ref
-            ))
+                    config_ref=p.config_ref,
+                )
+            )

        # Group by type
        grouped: dict[str, list[CachedProvider]] = defaultdict(list)
--- a/backend/tests/test_auth.py
+++ b/backend/tests/test_auth.py
@@ -1,6 +1,5 @@
 """认证相关测试。"""

-import pytest
 from fastapi.testclient import TestClient

 from app.core.security import create_access_token, decode_access_token