fix:脚本文件标签栏

frontend/app/features/platform/ModelPlatformApp.tsx

@@ -131,6 +131,7 @@ function AuthenticatedModelPlatformApp() {
   const [scripts, setScripts] = useState<ScriptItem[]>([]);
   const [directories, setDirectories] = useState<WorkspaceDirectory[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [openTabIds, setOpenTabIds] = useState<string[]>([]);
   const [keyword, setKeyword] = useState("");
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
@@ -377,12 +378,52 @@ function AuthenticatedModelPlatformApp() {
   const selected = scripts.find((item) => item.script_id === selectedId) ?? null;
 
   const selectScript = (scriptId: string | null) => {
+    setSelectedId(scriptId);
+  };
+
+  const openTab = (scriptId: string) => {
     if (selectedIdRef.current !== scriptId) {
       editorOpenRequestRef.current += 1;
       setEditorOpenError(null);
     }
     selectedIdRef.current = scriptId;
     setSelectedId(scriptId);
+    setOpenTabIds((current) => {
+      if (current.includes(scriptId)) {
+        return current;
+      }
+      return [...current, scriptId];
+    });
+  };
+
+  const closeTab = async (scriptId: string, event?: ReactMouseEvent) => {
+    event?.stopPropagation();
+
+    // 如果关闭的是正在编辑的脚本，先释放编辑锁
+    if (editSessionRef.current?.script_id === scriptId) {
+      await endEditing(false, false);
+    }
+
+    setOpenTabIds((current) => {
+      const index = current.indexOf(scriptId);
+      if (index === -1) return current;
+      const newTabs = current.filter((id) => id !== scriptId);
+      if (selectedId === scriptId) {
+        const nextId = newTabs[index] ?? newTabs[index - 1] ?? null;
+        setSelectedId(nextId);
+        selectedIdRef.current = nextId;
+      }
+      return newTabs;
+    });
+  };
+
+  const switchTab = (scriptId: string) => {
+    if (selectedIdRef.current !== scriptId) {
+      editorOpenRequestRef.current += 1;
+      setEditorOpenError(null);
+    }
+    setSelectedId(scriptId);
+    selectedIdRef.current = scriptId;
   };
 
   const openScriptEditor = async (
@@ -503,12 +544,15 @@ function AuthenticatedModelPlatformApp() {
     selected?.script_type,
   ]);
 
-  const endEditing = async (closeTab = false, showToast = true) => {
+  const endEditing = async (closeTabFlag = true, showToast = true) => {
     editorOpenRequestRef.current += 1;
     setEditorOpenError(null);
     const active = editSessionRef.current;
+    const scriptId = active?.script_id;
     if (!active) {
-      if (closeTab) selectScript(null);
+      if (closeTabFlag && scriptId) {
+        void closeTab(scriptId);
+      }
       return;
     }
     setEditBusy(true);
@@ -517,7 +561,9 @@ function AuthenticatedModelPlatformApp() {
       setEmbeddedJupyterUrl(null);
       setEditSession(null);
       editSessionRef.current = null;
-      if (closeTab) selectScript(null);
+      if (closeTabFlag && scriptId) {
+        void closeTab(scriptId);
+      }
       if (showToast) {
         setToast({
           tone: "success",
@@ -613,7 +659,7 @@ function AuthenticatedModelPlatformApp() {
     try {
       const created = await api.createScript(form);
       setScripts((items) => [created, ...items]);
-      selectScript(created.script_id);
+      openTab(created.script_id);
       setCreateOpen(false);
       setForm(initialForm);
       setToast({
@@ -958,7 +1004,7 @@ function AuthenticatedModelPlatformApp() {
                       scripts={group.scripts}
                       directories={group.directories}
                       selectedId={selectedId}
-                      onSelect={selectScript}
+                      onSelect={openTab}
                       onContextMenu={
                         group.user?.user_id === user?.user_id
                           ? showContextMenu
@@ -1014,17 +1060,19 @@ function AuthenticatedModelPlatformApp() {
                 }
                 latestVersion={latestVersion}
                 versionsLoading={latestVersionLoading}
+                openTabs={openTabIds.map((id) => {
+                  const s = scripts.find((item) => item.script_id === id);
+                  return {
+                    scriptId: id,
+                    scriptName: s?.script_name ?? "未知",
+                    scriptType: s?.script_type ?? "notebook",
+                  };
+                })}
                 onOpenEditor={() => void openScriptEditor(selected)}
                 onEndEditing={() => void endEditing()}
-                onClose={() => {
-                  if (
-                    editSessionRef.current?.script_id === selected.script_id
-                  ) {
-                    void endEditing(true);
-                  } else {
-                    selectScript(null);
-                  }
-                }}
+                onClose={(scriptId, event) => void closeTab(scriptId, event)}
+                onSwitchTab={switchTab}
+                onNewTab={() => openCreateDialog("")}
                 onPublish={() => openPublishDialog(selected)}
                 onInfo={setToast}
               />