apps/web/src/pages/generate/components/GenerateResultPanel.tsx

@@ -1,37 +1,21 @@
-/**
- * 智能剪辑右侧生成结果面板
- */
 import React from "react"
 import { Typography } from "antd"
-import {
-  PlayCircleOutlined,
-  CloseCircleOutlined,
-  DownloadOutlined,
-  ShareAltOutlined,
-} from "@ant-design/icons"
+import { PlayCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
 import type { GeneratedVideo } from "@/api/template-editor"
-import { formatDuration } from "@/api/voice-clone"
+import { ProgressIndicator } from "./result-panel/ProgressIndicator"
+import { ResultVideoCard } from "./result-panel/ResultVideoCard"
 
 const { Text } = Typography
 
 interface GenerateResultPanelProps {
-  /** 是否已生成完成 */
   generated: boolean
-  /** 是否正在生成中 */
   generating: boolean
-  /** 生成进度（0-100） */
   progress: number
-  /** 生成错误信息 */
   generateError: string | null
-  /** 生成的视频列表 */
   generatedVideos: GeneratedVideo[]
-  /** 点击视频卡片预览回调 */
   onVideoPreview: (video: GeneratedVideo) => void
-  /** 下载回调 */
   onDownload: () => void
-  /** 分享回调 */
   onShare: () => void
-  /** 前往成片库回调 */
   onGoToLibrary: () => void
 }
 
@@ -55,45 +39,8 @@ const GenerateResultPanel: React.FC<GenerateResultPanelProps> = ({
         )}
       </div>
 
-      {/* 生成中进度 */}
-      {generating && (
-        <div className="xx-result-progress">
-          <div className="xx-progress-circle">
-            <svg viewBox="0 0 80 80">
-              <circle
-                cx="40"
-                cy="40"
-                r="36"
-                fill="none"
-                stroke="var(--border-color)"
-                strokeWidth="6"
-              />
-              <circle
-                cx="40"
-                cy="40"
-                r="36"
-                fill="none"
-                stroke="var(--primary-color)"
-                strokeWidth="6"
-                strokeDasharray={`${Math.round(progress) * 2.26} 226`}
-                strokeLinecap="round"
-                transform="rotate(-90 40 40)"
-              />
-            </svg>
-            <span className="xx-progress-percent">{Math.round(progress)}%</span>
-          </div>
-          <div className="xx-progress-text">
-            <Text strong style={{ fontSize: 14, display: "block", marginBottom: 4 }}>
-              正在生成视频
-            </Text>
-            <Text style={{ fontSize: 12, color: "var(--text-secondary)" }}>
-              AI 正在处理素材，请稍候…
-            </Text>
-          </div>
-        </div>
-      )}
+      {generating && <ProgressIndicator progress={progress} />}
 
-      {/* 生成失败 */}
       {generateError && !generating && (
         <div className="xx-result-empty">
           <CloseCircleOutlined style={{ fontSize: 40, color: "#ff4d4f", marginBottom: 12 }} />
@@ -106,7 +53,6 @@ const GenerateResultPanel: React.FC<GenerateResultPanelProps> = ({
         </div>
       )}
 
-      {/* 空状态 */}
       {!generated && !generating && !generateError && (
         <div className="xx-result-empty">
           <PlayCircleOutlined
@@ -121,54 +67,17 @@ const GenerateResultPanel: React.FC<GenerateResultPanelProps> = ({
         </div>
       )}
 
-      {/* 生成结果卡片列表 */}
       {generated && generatedVideos.length > 0 && (
         <div className="xx-video-grid">
           {generatedVideos.map((video, idx) => (
-            <div
+            <ResultVideoCard
               key={video.id || idx}
-              className="xx-video-card"
-              onClick={() => onVideoPreview(video)}
-            >
-              <div className="xx-video-thumb">
-                {video.thumbnail_url ? (
-                  <img src={video.thumbnail_url} alt="" />
-                ) : (
-                  <div className="xx-video-thumb-placeholder">
-                    <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
-                  </div>
-                )}
-                <div className="xx-video-play-overlay">
-                  <PlayCircleOutlined style={{ fontSize: 36, color: "#fff" }} />
-                </div>
-                {video.duration && (
-                  <span className="xx-video-duration">{formatDuration(video.duration)}</span>
-                )}
-              </div>
-              <div className="xx-video-info">
-                <div className="xx-video-title">视频 {idx + 1}</div>
-                <div className="xx-video-actions">
-                  <button
-                    className="xx-video-action-btn"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onDownload()
-                    }}
-                  >
-                    <DownloadOutlined />
-                  </button>
-                  <button
-                    className="xx-video-action-btn"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onShare()
-                    }}
-                  >
-                    <ShareAltOutlined />
-                  </button>
-                </div>
-              </div>
-            </div>
+              video={video}
+              index={idx}
+              onPreview={onVideoPreview}
+              onDownload={onDownload}
+              onShare={onShare}
+            />
           ))}
         </div>
       )}

apps/web/src/pages/generate/components/result-panel/ProgressIndicator.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { Typography } from "antd"
+
+const { Text } = Typography
+
+interface ProgressIndicatorProps {
+  progress: number
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ progress }) => {
+  return (
+    <div className="xx-result-progress">
+      <div className="xx-progress-circle">
+        <svg viewBox="0 0 80 80">
+          <circle cx="40" cy="40" r="36" fill="none" stroke="var(--border-color)" strokeWidth="6" />
+          <circle
+            cx="40"
+            cy="40"
+            r="36"
+            fill="none"
+            stroke="var(--primary-color)"
+            strokeWidth="6"
+            strokeDasharray={`${Math.round(progress) * 2.26} 226`}
+            strokeLinecap="round"
+            transform="rotate(-90 40 40)"
+          />
+        </svg>
+        <span className="xx-progress-percent">{Math.round(progress)}%</span>
+      </div>
+      <div className="xx-progress-text">
+        <Text strong style={{ fontSize: 14, display: "block", marginBottom: 4 }}>
+          正在生成视频
+        </Text>
+        <Text style={{ fontSize: 12, color: "var(--text-secondary)" }}>
+          AI 正在处理素材，请稍候…
+        </Text>
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/generate/components/result-panel/ResultVideoCard.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { PlayCircleOutlined, DownloadOutlined, ShareAltOutlined } from "@ant-design/icons"
+import type { GeneratedVideo } from "@/api/template-editor"
+import { formatDuration } from "@/api/voice-clone"
+
+interface ResultVideoCardProps {
+  video: GeneratedVideo
+  index: number
+  onPreview: (video: GeneratedVideo) => void
+  onDownload: () => void
+  onShare: () => void
+}
+
+export const ResultVideoCard: React.FC<ResultVideoCardProps> = ({
+  video,
+  index,
+  onPreview,
+  onDownload,
+  onShare,
+}) => {
+  return (
+    <div className="xx-video-card" onClick={() => onPreview(video)}>
+      <div className="xx-video-thumb">
+        {video.thumbnail_url ? (
+          <img src={video.thumbnail_url} alt="" />
+        ) : (
+          <div className="xx-video-thumb-placeholder">
+            <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
+          </div>
+        )}
+        <div className="xx-video-play-overlay">
+          <PlayCircleOutlined style={{ fontSize: 36, color: "#fff" }} />
+        </div>
+        {video.duration && (
+          <span className="xx-video-duration">{formatDuration(video.duration)}</span>
+        )}
+      </div>
+      <div className="xx-video-info">
+        <div className="xx-video-title">视频 {index + 1}</div>
+        <div className="xx-video-actions">
+          <button
+            className="xx-video-action-btn"
+            onClick={(e) => {
+              e.stopPropagation()
+              onDownload()
+            }}
+          >
+            <DownloadOutlined />
+          </button>
+          <button
+            className="xx-video-action-btn"
+            onClick={(e) => {
+              e.stopPropagation()
+              onShare()
+            }}
+          >
+            <ShareAltOutlined />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}