feat: 统一研究模块表格布局与详情交互

frontend/src/research/PipelinePage.tsx

@@ -1,3 +1,4 @@
+import { ResearchList, ResearchDetail } from "./ResearchList";
 import { useEffect, useState } from "react";
 import { Banner, Button, Pagination } from "@douyinfe/semi-ui-19";
 import { api, formatTime } from "../api";
@@ -23,7 +24,8 @@ export function PipelinePage({
     localStorage.getItem("research-selected-flow"),
   );
   const [run, setRun] = useState<FlowRun | null>(null);
-  const [creating, setCreating] = useState(!selected);
+  const [creating, setCreating] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
   const [revision, setRevision] = useState(0);
   const [error, setError] = useState("");
   useEffect(() => {
@@ -59,46 +61,78 @@ export function PipelinePage({
     };
   }, [active, page, selected, revision]);
   function select(id: string) {
+    setRun(null);
+    setDetailOpen(true);
     setSelected(id);
     localStorage.setItem("research-selected-flow", id);
     setCreating(false);
   }
   return (
-    <section className="research-workspace">
-      <div className="section-toolbar">
-        <div>
-          <h2>研究流水线</h2>
-          <p className="muted">
-            生成 → 校验与设参 → 回测 → 评估决策 → 增强 → 重新展开
-          </p>
-        </div>
-        <Button onClick={() => setCreating(true)}>新建自动研究</Button>
-      </div>
-      {error && <Banner type="danger" description={error} />}
-      <div className="research-layout">
-        <aside className="research-library">
-          <h3>研究运行</h3>
-          {items.map((item) => (
-            <button
-              className={`research-library-item ${selected === item.id ? "selected" : ""}`}
-              key={item.id}
-              onClick={() => select(item.id)}
-            >
-              <strong>{item.name}</strong>
-              <span>
-                {flowStatus[item.status]} · 第 {item.round} 轮
-              </span>
-              <span>{formatTime(item.created_at)}</span>
-            </button>
-          ))}
-          <Pagination
-            size="small"
-            total={total}
-            currentPage={page}
-            pageSize={25}
-            onPageChange={setPage}
-          />
-        </aside>
+    <section className="research-workspace research-list-page">
+      {error && !detailOpen && <Banner type="danger" description={error} />}
+      <ResearchList
+        resetKey={JSON.stringify([page])}
+        label="研究流水线"
+        actions={
+          <Button
+            theme="solid"
+            onClick={() => {
+              setCreating(true);
+              setDetailOpen(true);
+            }}
+          >
+            新建自动研究
+          </Button>
+        }
+        pagination={
+          <>
+            <span>共 {total} 次运行</span>
+            {total > 0 && (
+              <Pagination
+                size="small"
+                total={total}
+                currentPage={page}
+                pageSize={25}
+                onPageChange={setPage}
+              />
+            )}
+          </>
+        }
+      >
+        <table className="research-table">
+          <thead>
+            <tr>
+              <th>研究名称</th>
+              <th>状态</th>
+              <th>轮次</th>
+              <th>创建时间</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item) => (
+              <tr key={item.id}>
+                <td>
+                  <Button theme="borderless" onClick={() => select(item.id)}>
+                    {item.name}
+                  </Button>
+                </td>
+                <td>{flowStatus[item.status]}</td>
+                <td>{item.round}</td>
+                <td>{formatTime(item.created_at)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {!items.length && (
+          <p className="research-list-empty">暂无研究运行，请新建自动研究。</p>
+        )}
+      </ResearchList>
+      <ResearchDetail
+        title={creating ? "新建自动研究" : "研究运行详情"}
+        visible={active && detailOpen}
+        onClose={() => setDetailOpen(false)}
+      >
+        {error && <Banner type="danger" description={error} />}
         <div className="research-main">
           {creating ? (
             <FlowLaunchForm
@@ -119,7 +153,7 @@ export function PipelinePage({
             )
           )}
         </div>
-      </div>
+      </ResearchDetail>
     </section>
   );
 }