feat: DAG画布嵌入项目详情页，任务节点点击弹详情Modal

2026-08-13 23:12:53 +08:00
parent c4020f2725
commit bd220050c7
1 changed files with 140 additions and 0 deletions
@@ -0,0 +1,140 @@
 import { useEffect, useState } from 'react';
 import { Modal, Descriptions, Spin, Tag, Typography, Empty } from 'antd';
 import { taskApi } from '@/api';
 import type { Task } from '@/types';
 import { TaskStatusTag, PriorityTag } from '@/components/constants';
 import dayjs from 'dayjs';
 const { Paragraph, Text } = Typography;
 interface Props {
  taskId: number | null;
  open: boolean;
  onClose: () => void;
 }
 /** 任务详情弹窗：在 DAG 画布/项目页内点击任务卡片时弹出，不跳转页面 */
 export default function TaskDetailModal({ taskId, open, onClose }: Props) {
  const [task, setTask] = useState<Task | null>(null);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    if (!open || taskId == null) return;
    setLoading(true);
    setTask(null);
    taskApi
      .get(taskId)
      .then(setTask)
      .catch(() => setTask(null))
      .finally(() => setLoading(false));
  }, [open, taskId]);
  const renderJsonBlock = (raw?: string) => {
    if (!raw) return <Text type="secondary">无</Text>;
    let pretty = raw;
    try {
      pretty = JSON.stringify(JSON.parse(raw), null, 2);
    } catch {
      /* keep raw */
    }
    return (
      <pre
        style={{
          background: '#f6f8fa',
          border: '1px solid #e8e8e8',
          borderRadius: 6,
          padding: 12,
          maxHeight: 260,
          overflow: 'auto',
          fontSize: 12,
          margin: 0,
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-all',
        }}
      >
        {pretty}
      </pre>
    );
  };
  return (
    <Modal
      title={task ? `任务 #${task.id} ${task.title}` : '任务详情'}
      open={open}
      onCancel={onClose}
      footer={null}
      width={720}
      destroyOnClose
    >
      {loading ? (
        <div style={{ textAlign: 'center', padding: 40 }}>
          <Spin />
        </div>
      ) : !task ? (
        <Empty description="任务不存在或加载失败" />
      ) : (
        <div>
          <Descriptions column={2} bordered size="small">
            <Descriptions.Item label="状态">
              <TaskStatusTag status={task.status} />
            </Descriptions.Item>
            <Descriptions.Item label="优先级">
              <PriorityTag priority={task.priority} />
            </Descriptions.Item>
            <Descriptions.Item label="任务类型">{task.task_type}</Descriptions.Item>
            <Descriptions.Item label="需要审核">
              {task.requires_review ? (
                <Tag color="purple">是</Tag>
              ) : (
                <Tag>否</Tag>
              )}
            </Descriptions.Item>
            {task.review_status && (
              <Descriptions.Item label="审核状态">{task.review_status}</Descriptions.Item>
            )}
            {task.worker_id && (
              <Descriptions.Item label="AI Worker">#{task.worker_id}</Descriptions.Item>
            )}
            {task.due_date && (
              <Descriptions.Item label="截止时间">
                {dayjs(task.due_date).format('YYYY-MM-DD HH:mm')}
              </Descriptions.Item>
            )}
            {task.started_at && (
              <Descriptions.Item label="开始时间">
                {dayjs(task.started_at).format('YYYY-MM-DD HH:mm')}
              </Descriptions.Item>
            )}
            {task.completed_at && (
              <Descriptions.Item label="完成时间">
                {dayjs(task.completed_at).format('YYYY-MM-DD HH:mm')}
              </Descriptions.Item>
            )}
            <Descriptions.Item label="创建时间">
              {dayjs(task.created_at).format('YYYY-MM-DD HH:mm')}
            </Descriptions.Item>
            {task.description && (
              <Descriptions.Item label="描述" span={2}>
                {task.description}
              </Descriptions.Item>
            )}
          </Descriptions>
          <div style={{ marginTop: 16 }}>
            <Paragraph strong style={{ marginBottom: 8 }}>
              输入（Prompt / 参数）
            </Paragraph>
            {renderJsonBlock(task.input_data)}
          </div>
          <div style={{ marginTop: 16 }}>
            <Paragraph strong style={{ marginBottom: 8 }}>
              输出结果
            </Paragraph>
            {renderJsonBlock(task.output_data)}
          </div>
        </div>
      )}
    </Modal>
  );
 }