DevOps Bot
b86a9c2af2
CI/CD Pipeline / Deploy Staging (push) Has been skipped
CI/CD Pipeline / Staging E2E Tests (push) Has been skipped
CI/CD Pipeline / Build Production Runtime Images (push) Has been skipped
CI/CD Pipeline / Deploy Production (push) Has been skipped
CI/CD Pipeline / Production Browser E2E (push) Has been skipped
CI/CD Pipeline / Frontend Lint (push) Failing after 75h41m6s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 75h41m16s
103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
/**
|
|
* 生成历史弹窗 — 展示当前剪辑计划的生成任务记录
|
|
* 从 EditingPlanner 拆分，避免主文件过大
|
|
*/
|
|
import React from "react";
|
|
import { CloseOutlined, InboxOutlined } from "@ant-design/icons";
|
|
import type { EditPlanGeneration } from "@/api/editPlans";
|
|
import { PLAN_STATUS_LABELS } from "@/api/editPlans";
|
|
|
|
interface GenerationHistoryModalProps {
|
|
open: boolean;
|
|
loading: boolean;
|
|
history: EditPlanGeneration[];
|
|
onClose: () => void;
|
|
}
|
|
|
|
const GenerationHistoryModal: React.FC<GenerationHistoryModalProps> = ({
|
|
open,
|
|
loading,
|
|
history,
|
|
onClose,
|
|
}) => {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="ep-modal-overlay" onClick={onClose}>
|
|
<div
|
|
className="ep-modal ep-gh-modal"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="ep-modal-header">
|
|
<h3>生成历史</h3>
|
|
<button className="ep-modal-close" onClick={onClose}>
|
|
<CloseOutlined />
|
|
</button>
|
|
</div>
|
|
<div className="ep-modal-body ep-gh-body">
|
|
{loading ? (
|
|
<div className="ep-gh-empty">
|
|
<div className="ep-skeleton">
|
|
<div className="ep-skeleton-item ep-skeleton-item--header" />
|
|
<div className="ep-skeleton-item" />
|
|
<div className="ep-skeleton-item" />
|
|
<div className="ep-skeleton-item" />
|
|
</div>
|
|
</div>
|
|
) : history.length === 0 ? (
|
|
<div className="ep-gh-empty">
|
|
<InboxOutlined style={{ fontSize: 32, opacity: 0.4 }} />
|
|
<span>暂无生成记录</span>
|
|
</div>
|
|
) : (
|
|
<table className="ep-gh-table">
|
|
<thead>
|
|
<tr className="ep-gh-table-header-row">
|
|
<th className="ep-gh-th">任务ID</th>
|
|
<th className="ep-gh-th">状态</th>
|
|
<th className="ep-gh-th">创建时间</th>
|
|
<th className="ep-gh-th">更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{history.map((gen) => {
|
|
const statusClass = `ep-gh-status-tag--${gen.status}`;
|
|
return (
|
|
<tr key={gen.id} className="ep-gh-table-row">
|
|
<td className="ep-gh-td ep-gh-td-id">
|
|
{gen.generation_task_id.slice(0, 8)}...
|
|
</td>
|
|
<td className="ep-gh-td">
|
|
<span className={`ep-gh-status-tag ${statusClass}`}>
|
|
{PLAN_STATUS_LABELS[gen.status] || gen.status}
|
|
</span>
|
|
</td>
|
|
<td className="ep-gh-td ep-gh-td-time">
|
|
{gen.created_at
|
|
? new Date(gen.created_at).toLocaleString("zh-CN")
|
|
: "—"}
|
|
</td>
|
|
<td className="ep-gh-td ep-gh-td-time">
|
|
{gen.updated_at
|
|
? new Date(gen.updated_at).toLocaleString("zh-CN")
|
|
: "—"}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
<div className="ep-modal-footer">
|
|
<button className="ep-btn ep-btn-secondary" onClick={onClose}>
|
|
关闭
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GenerationHistoryModal;
|