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

2026-09-09 09:29:30 +08:00
parent f6c2dcead8
commit 20645d6d17
19 changed files with 1693 additions and 1243 deletions
@@ -0,0 +1,68 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { SideSheet } from "@douyinfe/semi-ui-19";
+
+/** Parent supplies a bounded flex area; only the data viewport owns scrolling. */
+export function ResearchList({
+  label,
+  resetKey,
+  filters,
+  actions,
+  pagination,
+  children,
+}: {
+  label: string;
+  resetKey: string;
+  filters?: ReactNode;
+  actions: ReactNode;
+  pagination: ReactNode;
+  children: ReactNode;
+}) {
+  const viewport = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    viewport.current?.scrollTo({ top: 0, left: 0 });
+  }, [resetKey]);
+  return (
+    <section className="research-list" aria-label={label}>
+      {filters && <div className="research-list-filters">{filters}</div>}
+      <div className="research-list-actions">{actions}</div>
+      <div
+        ref={viewport}
+        className="research-list-scroll"
+        tabIndex={0}
+        aria-label={`${label}数据区`}
+      >
+        {children}
+      </div>
+      <div className="table-pagination">{pagination}</div>
+    </section>
+  );
+}
+
+/** Keep drafts mounted while closed; inactive workspace pages must hide portals. */
+export function ResearchDetail({
+  title,
+  visible,
+  onClose,
+  children,
+}: {
+  title: string;
+  visible: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <SideSheet
+      title={title}
+      className="research-detail"
+      placement="right"
+      width="60%"
+      visible={visible}
+      onCancel={onClose}
+      closeOnEsc
+      keepDOM
+      motion={false}
+    >
+      <div className="research-detail-content">{children}</div>
+    </SideSheet>
+  );
+}