celery 容灾升级

video-gen-admin/src/pages/AdminGenerationRecords.tsx

@@ -27,6 +27,7 @@ import {
 import { getAdminGenerationRecords, getVideoEngines, getImageEngines } from '../api';
 import type { AdminGenerationRecord, GenerationAIMediaReference } from '../types';
 import { formatDate } from '../utils/formatDate';
+import { getGenerationStageLabel, getGenerationStatusColor, resolveGenerationUiState } from '../utils/generationTaskStatus';
 
 const RAW_API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
 // 后端返回的图片/视频一般是 /images、/videos、/uploads 等相对路径。
@@ -49,14 +50,6 @@ const EMPTY_RESOURCE_STATE: PreviewResourceState = {
   references: {},
 };
 
-const STATUS_MAP: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
-  optimizing: { color: 'processing', text: '优化中', icon: <LoadingOutlined spin /> },
-  prompt_optimized: { color: 'processing', text: '待生成', icon: <ClockCircleOutlined /> },
-  generating: { color: 'warning', text: '生成中', icon: <LoadingOutlined spin /> },
-  completed: { color: 'success', text: '已完成', icon: <CheckCircleOutlined /> },
-  failed: { color: 'error', text: '失败', icon: <CloseCircleOutlined /> },
-};
-
 const GEN_TYPE_MAP: Record<string, { text: string; color: string; icon: React.ReactNode }> = {
   image: { text: '图片', color: 'purple', icon: <FileImageOutlined /> },
   video: { text: '视频', color: 'geekblue', icon: <VideoCameraOutlined /> },
@@ -459,10 +452,15 @@ const AdminGenerationRecords: React.FC = () => {
     {
       title: '状态', dataIndex: 'status', width: 90,
       render: (v: string) => {
-        const cfg = STATUS_MAP[v] || { color: 'default', text: v || '-', icon: null };
-        return <Tag color={cfg.color} icon={cfg.icon}>{cfg.text}</Tag>;
+        const state = resolveGenerationUiState({ status: v });
+        const icon = state.isActive ? <LoadingOutlined spin /> : (state.isSuccess ? <CheckCircleOutlined /> : (state.isFailure ? <CloseCircleOutlined /> : <ClockCircleOutlined />));
+        return <Tag color={state.color} icon={icon}>{state.label}</Tag>;
       },
     },
+    {
+      title: '阶段', dataIndex: 'pipelineStage', width: 150,
+      render: (v: string) => <Tag color={getGenerationStatusColor(v)}>{getGenerationStageLabel(v)}</Tag>,
+    },
     {
       title: '时间', key: 'time', width: 150,
       render: (_: any, r: AdminGenerationRecord) => (
@@ -483,10 +481,10 @@ const AdminGenerationRecords: React.FC = () => {
   ], [handleOpenPreview]);
 
   const previewTypeConfig = preview ? (GEN_TYPE_MAP[preview.genType || ''] || { text: preview.genType || '-', color: 'default', icon: null }) : null;
-  const previewStatusConfig = preview ? (STATUS_MAP[preview.status] || { color: 'default', text: preview.status || '-', icon: null }) : null;
+  const previewStatusConfig = preview ? resolveGenerationUiState(preview) : null;
 
   const renderResultImage = () => {
-    if (!preview || preview.genType !== 'image' || preview.status !== 'completed') return null;
+    if (!preview || preview.genType !== 'image' || !resolveGenerationUiState(preview).isSuccess) return null;
 
     if (!preview.imageUrl) {
       return <MediaPlaceholder text="此图片任务暂无结果图片" minHeight={260} />;
@@ -629,7 +627,7 @@ const AdminGenerationRecords: React.FC = () => {
   };
 
   const renderResultVideo = () => {
-    if (!preview || preview.genType !== 'video' || preview.status !== 'completed') return null;
+    if (!preview || preview.genType !== 'video' || !resolveGenerationUiState(preview).isSuccess) return null;
 
     if (!preview.videoUrl) {
       return <MediaPlaceholder text="此视频任务暂无结果视频" minHeight={340} />;
@@ -925,7 +923,9 @@ const AdminGenerationRecords: React.FC = () => {
                 <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>类型 / 状态</Typography.Text>
                 <Space size={4} wrap>
                   {previewTypeConfig ? <Tag color={previewTypeConfig.color} icon={previewTypeConfig.icon}>{previewTypeConfig.text}</Tag> : null}
-                  {previewStatusConfig ? <Tag color={previewStatusConfig.color} icon={previewStatusConfig.icon}>{previewStatusConfig.text}</Tag> : null}
+                  {previewStatusConfig ? <Tag color={previewStatusConfig.color} icon={previewStatusConfig.isActive ? <LoadingOutlined spin /> : (previewStatusConfig.isSuccess ? <CheckCircleOutlined /> : (previewStatusConfig.isFailure ? <CloseCircleOutlined /> : <ClockCircleOutlined />))}>{previewStatusConfig.label}</Tag> : null}
+                  {preview.pipelineStage ? <Tag color={getGenerationStatusColor(preview.pipelineStage)}>{getGenerationStageLabel(preview.pipelineStage)}</Tag> : null}
+                  {preview.videoUpscaleEnabled ? <Tag color="purple">已启用超分</Tag> : null}
                 </Space>
               </div>
             </div>
@@ -1004,7 +1004,7 @@ const AdminGenerationRecords: React.FC = () => {
 
             {renderReferences()}
 
-            {preview.status === 'completed' ? (
+            {resolveGenerationUiState(preview).isSuccess ? (
               <div>
                 <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>
                   {preview.genType === 'video' ? '生成视频' : '生成图片'}
@@ -1014,7 +1014,7 @@ const AdminGenerationRecords: React.FC = () => {
             ) : null}
 
             {/* Error message */}
-            {preview.status === 'failed' && preview.errorMessage ? (
+            {resolveGenerationUiState(preview).isFailure && preview.errorMessage ? (
               <div style={{ padding: 12, borderRadius: 10, background: 'rgba(239,68,68,0.04)', border: '1px solid rgba(239,68,68,0.15)' }}>
                 <Typography.Text style={{ fontSize: 12, color: '#ef4444' }}>错误信息: {preview.errorMessage}</Typography.Text>
               </div>