feat: add generation trace and partial-ready workflow status

admin-frontend/src/views/MyStories.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { api } from '../api/client'
 import BaseButton from '../components/ui/BaseButton.vue'
@@ -7,6 +7,11 @@ import BaseCard from '../components/ui/BaseCard.vue'
 import LoadingSpinner from '../components/ui/LoadingSpinner.vue'
 import EmptyState from '../components/ui/EmptyState.vue'
 import CreateStoryModal from '../components/CreateStoryModal.vue'
+import {
+  getGenerationStatusMeta,
+  isReadableGenerationStatus,
+  needsGenerationAttention,
+} from '../utils/storyStatus'
 import {
   BookOpenIcon,
   ChevronRightIcon,
@@ -22,6 +27,11 @@ interface StoryItem {
   image_url: string | null
   created_at: string
   mode: string
+  generation_status: string
+  text_status: string
+  image_status: string
+  audio_status: string
+  last_error: string | null
 }
 
 const router = useRouter()
@@ -29,6 +39,12 @@ const stories = ref<StoryItem[]>([])
 const loading = ref(true)
 const error = ref('')
 const showCreateModal = ref(false)
+const readableCount = computed(() =>
+  stories.value.filter((story) => isReadableGenerationStatus(story.generation_status)).length,
+)
+const attentionCount = computed(() =>
+  stories.value.filter((story) => needsGenerationAttention(story.generation_status)).length,
+)
 
 async function fetchStories() {
   try {
@@ -134,8 +150,12 @@ onMounted(() => {
             <div class="text-gray-500 text-sm mt-1">已配图</div>
           </div>
           <div class="text-center px-4">
-            <BookOpenIcon class="h-8 w-8 text-purple-500 mx-auto" />
-            <div class="text-gray-500 text-sm mt-1">继续阅读</div>
+            <div class="text-3xl font-bold text-gray-800">{{ readableCount }}</div>
+            <div class="text-gray-500 text-sm mt-1">可阅读</div>
+          </div>
+          <div class="text-center px-4">
+            <div class="text-3xl font-bold text-gray-800">{{ attentionCount }}</div>
+            <div class="text-gray-500 text-sm mt-1">需关注</div>
           </div>
         </div>
       </BaseCard>
@@ -164,6 +184,21 @@ onMounted(() => {
                 <PhotoIcon class="h-12 w-12" />
               </div>
 
+              <div class="absolute top-4 left-4 flex flex-wrap gap-2">
+                <span
+                  class="px-2.5 py-1 rounded-full text-xs font-medium backdrop-blur-sm"
+                  :class="story.mode === 'storybook' ? 'bg-amber-100/90 text-amber-800' : 'bg-violet-100/90 text-violet-800'"
+                >
+                  {{ story.mode === 'storybook' ? '绘本' : '故事' }}
+                </span>
+                <span
+                  class="px-2.5 py-1 rounded-full text-xs font-medium backdrop-blur-sm"
+                  :class="getGenerationStatusMeta(story.generation_status).badgeClass"
+                >
+                  {{ getGenerationStatusMeta(story.generation_status).label }}
+                </span>
+              </div>
+
               <!-- 悬停阅读提示 -->
               <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <span class="inline-flex items-center gap-1 px-4 py-2 bg-white/90 text-gray-900 rounded-full font-medium shadow-lg backdrop-blur-sm transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
@@ -177,6 +212,9 @@ onMounted(() => {
               <h3 class="font-bold text-xl text-gray-800 mb-2 line-clamp-2 group-hover:text-purple-600 transition-colors">
                 {{ story.title }}
               </h3>
+              <p class="text-sm text-gray-500 mb-4 leading-6">
+                {{ getGenerationStatusMeta(story.generation_status).description }}
+              </p>
               <div class="mt-auto flex items-center justify-between text-sm text-gray-500">
                 <span>{{ formatDate(story.created_at) }}</span>
                 <span v-if="story.image_url" class="flex items-center gap-1 text-green-600 bg-green-50 px-2 py-0.5 rounded text-xs font-medium">