feat: preview components

2026-08-11 15:02:16 +08:00
parent 5969f2f749
commit b44d057241
4 changed files with 203 additions and 27 deletions
@@ -7,7 +7,10 @@ import type {
 } from "../../services/api";
 import { scriptIcon } from "./WorkspaceTree";
 import type { MouseEvent as ReactMouseEvent, RefObject } from "react";
-import { useRef, useEffect } from "react";
+import Editor from "@monaco-editor/react";
+import { useRef, useLayoutEffect } from "react";
+
+import { useScriptWorkspaceStore } from "./state/scriptWorkspaceStore";

 type ToastState = {
  tone: "success" | "error" | "info";
@@ -131,7 +134,7 @@ export function ScriptWorkspace({
    });
 };

-  useEffect(() => {
+  useLayoutEffect(() => {
    const tabbar = tabbarRef.current;
    if (!tabbar) return;
    const activeTab = tabbar.querySelector(".editor-tab--active") as HTMLElement | null;
@@ -232,13 +235,11 @@ export function ScriptWorkspace({
          </button>
          <span className={`stage-badge${isEditing ? " is-editing" : ""}`}>
            <span />
-            {isEditing
-              ? isNotebook
-                ? "Demo 无锁模式 · Kernel 已连接"
-                : "Demo 无锁模式 · 编辑中"
-              : latestVersion
+            {
+              latestVersion
                ? `最新 ${latestVersion.version_label}`
-                : "工作副本已就绪"}
+                : "工作副本已就绪"
+            }
          </span>
        </div>
      </div>
@@ -378,13 +379,13 @@ export function ScriptWorkspace({
                <span>Python 预览</span>
                <em>{isEditing ? "Jupyter 中可编辑" : "平台只读预览"}</em>
              </div>
-              <PythonPreview />
+              <PythonPreview workspaceId={script.workspace_id} filePath={`${script.script_id}.py`}/>
            </div>

            <div className="integrity-row">
              <span>
                <Icon name="check" size={15} />
-                {isEditing ? "Demo 无锁编辑会话已连接" : "工作副本已同步"}
+                {/*{isEditing ? "Demo 无锁编辑会话已连接" : "工作副本已同步"}*/}
              </span>
              <span>SHA-256&nbsp; {shortHash(script.content_hash)}</span>
              <span>
@@ -403,19 +404,59 @@ export function ScriptWorkspace({
  );
 }

-function PythonPreview() {
+
+interface PythonPreviewProps {
+  workspaceId: string;
+  filePath: string;
+}
+export function PythonPreview({
+  workspaceId,
+  filePath,
+}: PythonPreviewProps) {
+  const previewKey = `${workspaceId}::${filePath}`;
+  const storeKey = useScriptWorkspaceStore((s) => s.previewKey);
+  const previewCode = useScriptWorkspaceStore((s) => s.previewCode);
+  const previewCodeSize = useScriptWorkspaceStore((s) => s.previewCodeSize);
+  const previewLoading = useScriptWorkspaceStore((s) => s.previewLoading);
+  const previewError = useScriptWorkspaceStore((s) => s.previewError);
+ const loadPreview = useScriptWorkspaceStore((s) => s.loadPreview);
+
+  useLayoutEffect(() => {
+    void loadPreview(workspaceId, filePath);
+  }, [previewKey]);
+
+  if (storeKey !== previewKey) {
+    return <div>Loading...</div>;
+  }
+
+  if (previewLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (previewError) {
+    return <div>Failed to load: {previewError}</div>;
+  }
+
  return (
-    <div className="python-preview">
-      <div className="line-numbers">
-        1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9
-      </div>
-      <pre>
-        <span className="code-comment">&quot;&quot;&quot;模型实验开发平台构建脚本。&quot;&quot;&quot;</span>
-        {"\n\n"}<b>def</b> <span className="code-function">main</span>() -&gt; <b>None</b>:
-        {"\n"}    print(<i>&quot;Hello, Model Platform!&quot;</i>)
-        {"\n\n\n"}<b>if</b> __name__ == <i>&quot;__main__&quot;</i>:
-        {"\n"}    main()
-      </pre>
-    </div>
+    <Editor
+      height="550px"
+      language="python"
+      value={previewCode ?? ""}
+      theme="vs"
+      options={{
+        readOnly: true,
+        domReadOnly: true,
+        minimap: {
+          enabled: previewCodeSize !== null && previewCodeSize > 1000,
+        },
+        lineNumbers: "off",
+        folding: true,
+        wordWrap: "on",
+        contextmenu: false,
+        dragAndDrop: false,
+        automaticLayout: true,
+        renderLineHighlight: "none",
+      }}
+    />
  );
 }
@@ -8,7 +8,7 @@ import type {
  Visibility,
  WorkspaceBoundApi,
  WorkspaceDirectory,
-} from "../../../services/api";
+} from "~/services/api";

 import type { NewScriptForm } from "./uiStore";
 import { useUiStore } from "./uiStore";
@@ -27,6 +27,8 @@ let _editSession: ActiveEditSession | null = null;
 let _editorOpening = false;
 let _editorOpenRequest = 0;
 let _api: WorkspaceBoundApi | null = null;
+let _previewController: AbortController | null = null;
+let _previewRequest = 0;

 export const bindScriptWorkspaceApi = (api: WorkspaceBoundApi | null) => {
  _api = api;
@@ -60,6 +62,12 @@ type State = {
  latestVersion: LatestVersion | null;
  latestVersionLoading: boolean;

+  previewKey: string | null;
+  previewCode: string | null;
+  previewCodeSize: number | null;
+  previewLoading: boolean;
+  previewError: string | null;
+
  // actions
  setApiOnline: (online: boolean) => void;
  setKeyword: (keyword: string) => void;
@@ -72,6 +80,7 @@ type State = {
  openScriptEditor: (script: ScriptItem, showToast?: boolean) => Promise<void>;
  endEditing: (closeTabFlag?: boolean, showToast?: boolean) => Promise<void>;
  loadLatestVersion: (scriptId: string) => Promise<void>;
+  loadPreview: (workspaceId: string, filePath: string) => Promise<void>;
  createScript: (form: NewScriptForm) => Promise<ScriptItem | null>;
  uploadScripts: (files: File[], parentPath: string) => Promise<void>;
  createFolder: (name: string, parentPath: string) => Promise<void>;
@@ -132,10 +141,21 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
    latestVersion: null,
    latestVersionLoading: false,

+    previewKey: null,
+    previewCode: null,
+    previewCodeSize: null,
+    previewLoading: false,
+    previewError: null,
+
    setApiOnline: (online) => set({ apiOnline: online }),
    setKeyword: (keyword) => set({ keyword }),

    reset: () => {
+      if (_previewController) {
+        _previewController.abort();
+        _previewController = null;
+      }
+      _previewRequest += 1;
      _selectedId = null;
      _editSession = null;
      editSessionHandle.current = null;
@@ -150,6 +170,11 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
        editorOpenError: null,
        latestVersion: null,
        latestVersionLoading: false,
+        previewKey: null,
+        previewCode: null,
+        previewCodeSize: null,
+        previewLoading: false,
+        previewError: null,
      });
    },

@@ -390,6 +415,58 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
      }
    },

+    loadPreview: async (workspaceId, filePath) => {
+      if (_previewController) {
+        _previewController.abort();
+      }
+      _previewRequest += 1;
+      const requestId = _previewRequest;
+      const previewKey = `${workspaceId}::${filePath}`;
+
+      set({ previewKey, previewLoading: true, previewError: null });
+
+      const controller = new AbortController();
+      _previewController = controller;
+
+      try {
+       const url =
+         `/jupyter/${workspaceId}/api/contents/${filePath}` +
+         `?type=file&content=1&hash=1&format=text`;
+       const response = await fetch(url, {
+        signal: controller.signal,
+        credentials: "include",
+        cache: "no-store",
+       });
+       if (!response.ok) {
+         throw new Error(`Failed to load file: ${response.status}`);
+       }
+        const data = await response.json();
+        if (_previewRequest !== requestId) return;
+        set({
+          previewKey,
+          previewCode: data.content ?? "",
+          previewCodeSize: data.size ?? 0,
+          previewLoading: false,
+          previewError: null,
+        });
+      } catch (error) {
+        if (_previewRequest !== requestId) return;
+        if (error instanceof Error && error.name === "AbortError") return;
+        set({
+          previewKey,
+          previewCode: null,
+          previewCodeSize: null,
+          previewLoading: false,
+          previewError:
+            error instanceof Error ? error.message : "加载预览失败",
+        });
+      } finally {
+        if (_previewRequest === requestId) {
+          _previewController = null;
+        }
+      }
+    },
+
    createScript: async (form) => {
      const api = requireApi();
      const suffix = form.scriptType === "notebook" ? ".ipynb" : ".py";
@@ -9,6 +9,7 @@
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
    "@react-router/node": "^8",
    "@react-router/serve": "^8",
    "isbot": "^5.1.36",
@@ -27,5 +28,5 @@
    "typescript": "^5.9.3",
    "vite": "^8.0.3"
  },
-  "packageManager": "pnpm@10.15.1"
+  "packageManager": "pnpm@11.21.0"
 }
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@monaco-editor/react':
+        specifier: ^4.7.0
+        version: 4.7.0(monaco-editor@0.56.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@react-router/node':
        specifier: ^8
        version: 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.9.3)
@@ -228,6 +231,16 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@monaco-editor/loader@1.7.0':
+    resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
+
+  '@monaco-editor/react@4.7.0':
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
  '@napi-rs/wasm-runtime@1.2.0':
    resolution: {integrity: sha512-kDoONqMa+VnZ4vvvu/ZUurpJ4gkZU57e7g69qpNgWhYcZFPUHZM2CEMKm+cG6ufDVALbjMvfmMjFVqaK7uEMnA==}
    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
@@ -499,6 +512,9 @@ packages:
  '@types/react@19.2.17':
    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}

+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
  accepts@2.0.0:
    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
    engines: {node: '>= 0.6'}
@@ -619,6 +635,9 @@ packages:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

+  dompurify@3.4.8:
+    resolution: {integrity: sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==}
+
  dunder-proto@1.0.1:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}
@@ -926,6 +945,11 @@ packages:
  magic-string@0.30.21:
    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}

+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
  math-intrinsics@1.1.0:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
    engines: {node: '>= 0.4'}
@@ -946,6 +970,9 @@ packages:
    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
    engines: {node: '>=18'}

+  monaco-editor@0.56.0:
+    resolution: {integrity: sha512-sXboRm3BeBeLm938eaiyLMe0OxzfXIlZvbv4ir/jVgQy1zDhWjgmny0WoN45fuDKhCCQsYMbBJrv/A6jd8aCUg==}
+
  morgan@1.11.0:
    resolution: {integrity: sha512-zSkVu3t18r39pw4ixfBKvfZi3y2UOqr7d4WYwcj3m8nXpEQK4rPO6GLzs/CExoRgmX3y9EjmmcXqv6jq0SK46g==}
    engines: {node: '>= 0.8.0'}
@@ -1132,6 +1159,9 @@ packages:
    resolution: {integrity: sha512-mTozplhTX4tLKIHYji92OTZzVyZvi+Z1qRZDeBvQFI2XUB89wrRoj/xXad3c9NZ1GPJXXRvB+k41PQCPTMC+aA==}
    engines: {node: '>=0.10.0'}

+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
  statuses@2.0.2:
    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
    engines: {node: '>= 0.8'}
@@ -1492,6 +1522,17 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.4.14

+  '@monaco-editor/loader@1.7.0':
+    dependencies:
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.7.0(monaco-editor@0.56.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@monaco-editor/loader': 1.7.0
+      monaco-editor: 0.56.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
  '@napi-rs/wasm-runtime@1.2.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
    dependencies:
      '@emnapi/core': 1.11.1
@@ -1705,6 +1746,9 @@ snapshots:
    dependencies:
      csstype: 3.2.3

+  '@types/trusted-types@2.0.7':
+    optional: true
+
  accepts@2.0.0:
    dependencies:
      mime-types: 3.0.2
@@ -1815,6 +1859,10 @@ snapshots:

  detect-libc@2.1.2: {}

+  dompurify@3.4.8:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
  dunder-proto@1.0.1:
    dependencies:
      call-bind-apply-helpers: 1.0.2
@@ -2075,6 +2123,8 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5

+  marked@14.0.0: {}
+
  math-intrinsics@1.1.0: {}

  media-typer@1.1.1: {}
@@ -2087,6 +2137,11 @@ snapshots:
    dependencies:
      mime-db: 1.54.0

+  monaco-editor@0.56.0:
+    dependencies:
+      dompurify: 3.4.8
+      marked: 14.0.0
+
  morgan@1.11.0:
    dependencies:
      basic-auth: 2.0.1
@@ -2291,6 +2346,8 @@ snapshots:

  source-map@0.6.0: {}

+  state-local@1.0.7: {}
+
  statuses@2.0.2: {}

  tailwindcss@4.3.3: {}