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

frontend/src/App.tsx

@@ -12,7 +12,6 @@ import Workers from '@/pages/Workers';
 import Reviews from '@/pages/Reviews';
 import Alerts from '@/pages/Alerts';
 import KnowledgeBase from '@/pages/KnowledgeBase';
-import DagCanvas from '@/pages/DagCanvas';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated } = useAuthStore();
@@ -62,7 +61,6 @@ export default function App() {
           <Route path="reviews" element={<Reviews />} />
           <Route path="alerts" element={<Alerts />} />
           <Route path="knowledge" element={<KnowledgeBase />} />
-          <Route path="dag" element={<DagCanvas />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

frontend/src/components/AppLayout.tsx

@@ -18,7 +18,6 @@ import {
   AuditOutlined,
   AlertOutlined,
   BookOutlined,
-  ApartmentOutlined,
   LogoutOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -63,11 +62,6 @@ const menuItems: MenuProps['items'] = [
     icon: <CheckSquareOutlined />,
     label: '任务管理',
   },
-  {
-    key: '/dag',
-    icon: <ApartmentOutlined />,
-    label: 'DAG 编排',
-  },
   {
     key: '/workers',
     icon: <RobotOutlined />,

frontend/src/components/TaskDetailModal.tsx

@@ -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>
+  );
+}

frontend/src/pages/DagCanvas.tsx

@@ -14,8 +14,6 @@ import {
 import type { Node, Edge, Connection, NodeProps } from 'reactflow';
 import 'reactflow/dist/style.css';
 import {
-  Card,
-  Select,
   Button,
   Space,
   message,
@@ -30,9 +28,10 @@ import {
   ReloadOutlined,
   DeleteOutlined,
 } from '@ant-design/icons';
-import { projectApi, dagApi } from '@/api';
+import { dagApi } from '@/api';
-import type { Project, TaskStatus, DagGraphNode, DagGraphEdge } from '@/types';
+import type { TaskStatus, DagGraphNode, DagGraphEdge } from '@/types';
 import { taskStatusConfig, priorityConfig } from '@/components/constants';
+import TaskDetailModal from '@/components/TaskDetailModal';
 
 const { Text } = Typography;
 
@@ -52,6 +51,7 @@ function TaskNode({ data }: NodeProps) {
         borderRadius: 8,
         boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
         overflow: 'hidden',
+        cursor: 'pointer',
       }}
     >
       <Handle type="target" position={Position.Top} />
@@ -121,23 +121,19 @@ function layoutNodes(graphNodes: DagGraphNode[], graphEdges: DagGraphEdge[]) {
   return positions;
 }
 
-export default function DagCanvas() {
+interface Props {
-  const [projects, setProjects] = useState<Project[]>([]);
+  projectId: number;
-  const [projectId, setProjectId] = useState<number | undefined>();
+}
+
+/** DAG 编排画布（嵌入项目详情页使用） */
+export default function DagCanvas({ projectId }: Props) {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [loading, setLoading] = useState(false);
   const [executing, setExecuting] = useState(false);
   const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
-
+  const [detailTaskId, setDetailTaskId] = useState<number | null>(null);
-  // Load projects
+  const [detailOpen, setDetailOpen] = useState(false);
-  useEffect(() => {
-    projectApi.list().then((ps) => {
-      setProjects(ps);
-      if (ps.length > 0 && !projectId) setProjectId(ps[0].id);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   const loadGraph = useCallback(async (pid: number) => {
     setLoading(true);
@@ -182,7 +178,7 @@ export default function DagCanvas() {
   // Connect: add dependency (drag from source(bottom) to target(top))
   const onConnect = useCallback(
     async (conn: Connection) => {
-      if (!conn.source || !conn.target || !projectId) return;
+      if (!conn.source || !conn.target) return;
       try {
         await dagApi.addDependency({
           task_id: Number(conn.target),
@@ -205,9 +201,15 @@ export default function DagCanvas() {
         message.error(e.response?.data?.detail || '添加依赖失败');
       }
     },
-    [projectId, setEdges]
+    [setEdges]
   );
 
+  // Node click -> open task detail modal
+  const onNodeClick = useCallback((_: unknown, node: Node) => {
+    setDetailTaskId(Number(node.id));
+    setDetailOpen(true);
+  }, []);
+
   // Delete selected edge
   const removeSelectedEdge = useCallback(async () => {
     if (!selectedEdge) return;
@@ -269,70 +271,73 @@ export default function DagCanvas() {
 
   return (
     <div>
-      <Card
+      <div
-        title="DAG 编排画布"
+        style={{
-        extra={
+          display: 'flex',
-          <Space>
+          justifyContent: 'space-between',
-            <Select
+          alignItems: 'center',
-              style={{ width: 220 }}
+          marginBottom: 8,
-              placeholder="选择项目"
+        }}
-              value={projectId}
-              onChange={setProjectId}
-              options={projects.map((p) => ({ label: p.name, value: p.id }))}
-            />
-            <Tooltip title="刷新">
-              <Button icon={<ReloadOutlined />} onClick={() => projectId && loadGraph(projectId)} loading={loading} />
-            </Tooltip>
-            <Tooltip title={selectedEdge ? '删除选中的依赖连线' : '先点击选中一条连线'}>
-              <Button
-                danger
-                icon={<DeleteOutlined />}
-                disabled={!selectedEdge}
-                onClick={removeSelectedEdge}
-              >
-                删除依赖
-              </Button>
-            </Tooltip>
-            <Button
-              type="primary"
-              icon={<ThunderboltOutlined />}
-              onClick={executeAll}
-              loading={executing}
-              disabled={nodes.length === 0}
-            >
-              执行 DAG
-            </Button>
-          </Space>
-        }
       >
-        <div style={{ marginBottom: 8 }}>
+        <Text type="secondary" style={{ fontSize: 12 }}>
-          <Text type="secondary" style={{ fontSize: 12 }}>
+          拖拽节点底部锚点到另一节点顶部建立依赖；点击节点查看详情；点击连线可选中删除。
-            操作说明：从节点底部拖拽到另一节点顶部可建立依赖（上游 → 下游）；点击连线可选中并删除；支持拖拽移动节点、缩放画布。
+        </Text>
-          </Text>
+        <Space>
-        </div>
+          <Tooltip title="刷新">
-        <div style={{ height: 'calc(100vh - 260px)', minHeight: 480, border: '1px solid #f0f0f0', borderRadius: 8 }}>
+            <Button size="small" icon={<ReloadOutlined />} onClick={() => loadGraph(projectId)} loading={loading} />
-          {nodes.length === 0 && !loading ? (
+          </Tooltip>
-            <Empty description="该项目暂无任务，请先在任务管理中创建任务" style={{ marginTop: 120 }} />
+          <Tooltip title={selectedEdge ? '删除选中的依赖连线' : '先点击选中一条连线'}>
-          ) : (
+            <Button
-            <ReactFlow
+              size="small"
-              nodes={nodes}
+              danger
-              edges={edges}
+              icon={<DeleteOutlined />}
-              onNodesChange={onNodesChange}
+              disabled={!selectedEdge}
-              onEdgesChange={onEdgesChange}
+              onClick={removeSelectedEdge}
-              onConnect={onConnect}
-              onEdgeClick={(_, edge) => setSelectedEdge(edge)}
-              onPaneClick={() => setSelectedEdge(null)}
-              nodeTypes={nodeTypes}
-              fitView
-              deleteKeyCode={[]}
             >
-              <Background gap={16} />
+              删除依赖
-              <Controls />
+            </Button>
-              {minimap}
+          </Tooltip>
-            </ReactFlow>
+          <Button
-          )}
+            size="small"
-        </div>
+            type="primary"
-      </Card>
+            icon={<ThunderboltOutlined />}
+            onClick={executeAll}
+            loading={executing}
+            disabled={nodes.length === 0}
+          >
+            执行 DAG
+          </Button>
+        </Space>
+      </div>
+      <div style={{ height: 560, border: '1px solid #f0f0f0', borderRadius: 8 }}>
+        {nodes.length === 0 && !loading ? (
+          <Empty description="该项目暂无任务，请先在任务管理中创建任务" style={{ marginTop: 160 }} />
+        ) : (
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onNodeClick={onNodeClick}
+            onEdgeClick={(_, edge) => setSelectedEdge(edge)}
+            onPaneClick={() => setSelectedEdge(null)}
+            nodeTypes={nodeTypes}
+            fitView
+            deleteKeyCode={[]}
+          >
+            <Background gap={16} />
+            <Controls />
+            {minimap}
+          </ReactFlow>
+        )}
+      </div>
+
+      <TaskDetailModal
+        taskId={detailTaskId}
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
+      />
     </div>
   );
 }

frontend/src/pages/ProjectDetail.tsx

@@ -12,15 +12,20 @@ import {
   Tag,
   Empty,
   List,
+  Tabs,
 } from 'antd';
 import {
   ArrowLeftOutlined,
   ReloadOutlined,
+  ApartmentOutlined,
+  ProfileOutlined,
 } from '@ant-design/icons';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { projectApi, taskApi, artifactApi } from '@/api';
 import type { Project, ProjectStats, Task, Artifact } from '@/types';
 import { ProjectStatusTag, TaskStatusTag } from '@/components/constants';
+import DagCanvas from '@/pages/DagCanvas';
+import TaskDetailModal from '@/components/TaskDetailModal';
 import dayjs from 'dayjs';
 
 const { Title, Text } = Typography;
@@ -28,11 +33,20 @@ const { Title, Text } = Typography;
 export default function ProjectDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab = searchParams.get('tab') || 'overview';
   const [loading, setLoading] = useState(true);
   const [project, setProject] = useState<Project | null>(null);
   const [stats, setStats] = useState<ProjectStats | null>(null);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [artifacts, setArtifacts] = useState<Artifact[]>([]);
+  const [detailTaskId, setDetailTaskId] = useState<number | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const openTaskDetail = (taskId: number) => {
+    setDetailTaskId(taskId);
+    setDetailOpen(true);
+  };
 
   useEffect(() => {
     if (!id) return;
@@ -75,36 +89,8 @@ export default function ProjectDetail() {
       ].filter((item) => item.count > 0)
     : [];
 
-  return (
+  const overviewTab = (
-    <div>
+    <>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 16,
-        }}
-      >
-        <Space>
-          <Button
-            icon={<ArrowLeftOutlined />}
-            onClick={() => navigate('/projects')}
-          >
-            返回
-          </Button>
-          <Title level={4} style={{ margin: 0 }}>
-            {project.name}
-          </Title>
-          <ProjectStatusTag status={project.status} />
-        </Space>
-        <Button
-          icon={<ReloadOutlined />}
-          onClick={() => window.location.reload()}
-        >
-          刷新
-        </Button>
-      </div>
-
       <Card style={{ marginBottom: 16 }}>
         <Descriptions column={2} bordered size="small">
           <Descriptions.Item label="项目名称">{project.name}</Descriptions.Item>
@@ -198,7 +184,7 @@ export default function ProjectDetail() {
                   >
                     <List.Item.Meta
                       title={
-                        <a onClick={() => navigate('/tasks')}>{task.title}</a>
+                        <a onClick={() => openTaskDetail(task.id)}>{task.title}</a>
                       }
                       description={dayjs(task.created_at).format('MM-DD HH:mm')}
                     />
@@ -231,6 +217,73 @@ export default function ProjectDetail() {
           </Card>
         </Col>
       </Row>
+    </>
+  );
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 16,
+        }}
+      >
+        <Space>
+          <Button
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate('/projects')}
+          >
+            返回
+          </Button>
+          <Title level={4} style={{ margin: 0 }}>
+            {project.name}
+          </Title>
+          <ProjectStatusTag status={project.status} />
+        </Space>
+        <Button
+          icon={<ReloadOutlined />}
+          onClick={() => window.location.reload()}
+        >
+          刷新
+        </Button>
+      </div>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setSearchParams({ tab: key })}
+        items={[
+          {
+            key: 'overview',
+            label: (
+              <span>
+                <ProfileOutlined /> 概览
+              </span>
+            ),
+            children: overviewTab,
+          },
+          {
+            key: 'dag',
+            label: (
+              <span>
+                <ApartmentOutlined /> DAG 编排
+              </span>
+            ),
+            children: (
+              <Card size="small" title="DAG 编排画布">
+                <DagCanvas projectId={project.id} />
+              </Card>
+            ),
+          },
+        ]}
+      />
+
+      <TaskDetailModal
+        taskId={detailTaskId}
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
+      />
     </div>
   );
 }

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/api/client.ts","./src/api/index.ts","./src/components/AppLayout.tsx","./src/components/constants.tsx","./src/pages/Alerts.tsx","./src/pages/DagCanvas.tsx","./src/pages/Dashboard.tsx","./src/pages/KnowledgeBase.tsx","./src/pages/Login.tsx","./src/pages/ProjectDetail.tsx","./src/pages/Projects.tsx","./src/pages/Reviews.tsx","./src/pages/Tasks.tsx","./src/pages/Workers.tsx","./src/stores/auth.ts","./src/types/index.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/api/client.ts","./src/api/index.ts","./src/components/AppLayout.tsx","./src/components/TaskDetailModal.tsx","./src/components/constants.tsx","./src/pages/Alerts.tsx","./src/pages/DagCanvas.tsx","./src/pages/Dashboard.tsx","./src/pages/KnowledgeBase.tsx","./src/pages/Login.tsx","./src/pages/ProjectDetail.tsx","./src/pages/Projects.tsx","./src/pages/Reviews.tsx","./src/pages/Tasks.tsx","./src/pages/Workers.tsx","./src/stores/auth.ts","./src/types/index.ts"],"version":"5.9.3"}