feat: implement scoped dataset catalog and template input drafts

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import zhCN from "@douyinfe/semi-ui-19/lib/es/locale/source/zh_CN";
 import { api, post } from "./api";
 import type { Account, Job } from "./types";
 import { AccountPage } from "./pages/AccountPage";
+import { DatasetPage } from "./pages/DatasetPage";
 import { AlphaPage } from "./pages/AlphaPage";
 import { JobPanel } from "./components/JobPanel";
 import { ChatPanel } from "./ai/ChatPanel";
@@ -23,8 +24,13 @@ export default function App() {
   const [account, setAccount] = useState<Account | null>(null);
   const [jobs, setJobs] = useState<Job[]>([]);
   const [page, setPage] = useState(
-    location.hash === "#account" ? "account" : "alphas",
+    location.hash === "#account"
+      ? "account"
+      : location.hash === "#datasets"
+        ? "datasets"
+        : "alphas",
   );
+  const [catalogModal, setCatalogModal] = useState(false);
   const [showJobs, setShowJobs] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const [pollError, setPollError] = useState("");
@@ -84,7 +90,13 @@ export default function App() {
     };
     window.addEventListener("session-expired", expired);
     const hash = () =>
-      setPage(location.hash === "#account" ? "account" : "alphas");
+      setPage(
+        location.hash === "#account"
+          ? "account"
+          : location.hash === "#datasets"
+            ? "datasets"
+            : "alphas",
+      );
     window.addEventListener("hashchange", hash);
     return () => {
       window.removeEventListener("session-expired", expired);
@@ -154,7 +166,11 @@ export default function App() {
         />
       ) : (
         <div className="workspace">
-          <aside className="sidebar" inert={chatOpen && viewport < 1440}>
+          <aside
+            className="sidebar"
+            inert={(chatOpen && viewport < 1440) || catalogModal}
+            aria-hidden={catalogModal || undefined}
+          >
             <div className="brand">
               <span className="brand-mark">α</span>
               <div>Alpha 研究</div>
@@ -167,6 +183,14 @@ export default function App() {
             >
               Alpha 管理
             </button>
+            <button
+              aria-label="数据集"
+              className={`nav-item ${page === "datasets" ? "active" : ""}`}
+              aria-current={page === "datasets" ? "page" : undefined}
+              onClick={() => changePage("datasets")}
+            >
+              数据集
+            </button>
             <button
               aria-label="个人信息"
               className={`nav-item ${page === "account" ? "active" : ""}`}
@@ -190,7 +214,11 @@ export default function App() {
               </div>
             </div>
           </aside>
-          <div className="main-shell" inert={chatOpen && viewport < 1440}>
+          <div
+            className="main-shell"
+            inert={(chatOpen && viewport < 1440) || catalogModal}
+            aria-hidden={catalogModal || undefined}
+          >
             <header className="topbar">
               <div className="breadcrumbs">研究工作空间</div>
               <div className="top-actions">
@@ -234,7 +262,7 @@ export default function App() {
               </div>
             </header>
             <main
-              className={`page-content ${page === "alphas" ? "bounded-page" : "account-page"}`}
+              className={`page-content ${page !== "account" ? "bounded-page" : "account-page"}`}
             >
               {pollError && (
                 <Banner
@@ -249,6 +277,18 @@ export default function App() {
                   onTask={taskCreated}
                 />
               </div>
+              <div className="alpha-page-view" hidden={page !== "datasets"}>
+                <DatasetPage
+                  account={account}
+                  jobs={jobs}
+                  active={page === "datasets"}
+                  version={`${refreshKey}:${completedVersion}`}
+                  suspended={showJobs || chatOpen}
+                  onTask={taskCreated}
+                  onModal={setCatalogModal}
+                  onChat={() => setChatOpen(true)}
+                />
+              </div>
               <div className="alpha-page-view" hidden={page !== "alphas"}>
                 <AlphaPage
                   taskPanelOpen={showJobs}
@@ -280,7 +320,7 @@ export default function App() {
               changePage("account");
             }}
           />
-          {!chatOpen && (
+          {!chatOpen && !catalogModal && (
             <Button
               className="ai-launcher"
               aria-label="打开研究助手"
@@ -298,30 +338,36 @@ export default function App() {
               onClick={() => setChatOpen(false)}
             />
           )}
-          <ChatPanel
-            jobs={jobs}
-            open={chatOpen}
-            width={chatWidth}
-            onWidth={setChatWidth}
-            onClose={() => setChatOpen(false)}
-            context={page === "alphas" ? alphaContext : { page: "account" }}
-            timezone={account?.timezone}
-            onSettings={() => {
-              focusBusiness();
-              changePage("account");
-              requestAnimationFrame(() =>
-                document
-                  .getElementById("model-settings")
-                  ?.scrollIntoView({ block: "start" }),
-              );
-            }}
-            onChanged={actionDone}
-            onAction={(action) => {
-              focusBusiness();
-              changePage("alphas");
-              setAIAction(action);
-            }}
-          />
+          <div inert={catalogModal && !chatOpen}>
+            <ChatPanel
+              jobs={jobs}
+              open={chatOpen}
+              width={chatWidth}
+              onWidth={setChatWidth}
+              onClose={() => setChatOpen(false)}
+              context={
+                page === "alphas"
+                  ? alphaContext
+                  : { page: page === "datasets" ? "datasets" : "account" }
+              }
+              timezone={account?.timezone}
+              onSettings={() => {
+                focusBusiness();
+                changePage("account");
+                requestAnimationFrame(() =>
+                  document
+                    .getElementById("model-settings")
+                    ?.scrollIntoView({ block: "start" }),
+                );
+              }}
+              onChanged={actionDone}
+              onAction={(action) => {
+                focusBusiness();
+                changePage("alphas");
+                setAIAction(action);
+              }}
+            />
+          </div>
         </div>
       )}
     </LocaleProvider>