auto-sync: 2026-05-17 06:16:35

src/frontend/src/components/TaskModal.tsx

@@ -0,0 +1,87 @@
+// 任务详情弹窗
+
+import React from 'react';
+import type { Task } from '../types';
+
+interface Props {
+  task: Task | null;
+  onClose: () => void;
+}
+
+export function TaskModal({ task, onClose }: Props) {
+  if (!task) return null;
+
+  const fields = [
+    ['ID', task.id],
+    ['标题', task.title],
+    ['状态', task.status],
+    ['类型', task.task_type || '-'],
+    ['负责人', task.assignee || '未分配'],
+    ['分配者', task.assigned_by],
+    ['优先级', String(task.priority)],
+    ['风险级别', task.risk_level || '-'],
+    ['描述', task.description || '-'],
+    ['必须完成', task.must_haves || '-'],
+    ['依赖', task.depends_on || '-'],
+    ['输出路径', task.output_path || '-'],
+    ['结果摘要', task.result_summary || '-'],
+    ['重试', `${task.retry_count}/${task.max_retries}`],
+    ['创建时间', task.created_at?.substring(0, 19) || '-'],
+    ['更新时间', task.updated_at?.substring(0, 19) || '-'],
+    ['完成时间', task.completed_at?.substring(0, 19) || '-'],
+  ];
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0,0,0,0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        className="card"
+        style={{
+          width: '90%',
+          maxWidth: 600,
+          maxHeight: '80vh',
+          overflowY: 'auto',
+          padding: 24,
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+          <h3 style={{ fontSize: 18, fontWeight: 700 }}>{task.title}</h3>
+          <button className="btn" onClick={onClose}>关闭</button>
+        </div>
+
+        <table style={{ width: '100%' }}>
+          <tbody>
+            {fields.map(([label, value]) => (
+              <tr key={label}>
+                <td style={{ color: 'var(--muted)', width: 100, fontWeight: 600, fontSize: 12 }}>
+                  {label}
+                </td>
+                <td>
+                  {label === '状态' ? (
+                    <span className={`badge badge-${value}`}>{value}</span>
+                  ) : (
+                    value
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}