422 lines
14 KiB
TypeScript
422 lines
14 KiB
TypeScript
import Icon from "../../components/common/Icon";
|
||
import type {
|
||
ActiveEditSession,
|
||
LatestVersion,
|
||
ScriptItem,
|
||
ScriptType,
|
||
} from "../../services/api";
|
||
import { scriptIcon } from "./WorkspaceTree";
|
||
import type { MouseEvent as ReactMouseEvent, RefObject } from "react";
|
||
import { useRef, useEffect } from "react";
|
||
|
||
type ToastState = {
|
||
tone: "success" | "error" | "info";
|
||
message: string;
|
||
};
|
||
|
||
// 缓存的会话类型（多 iframe 共存方案）
|
||
interface CachedSession {
|
||
session: ActiveEditSession;
|
||
jupyterUrl: string;
|
||
lastActiveTime: number;
|
||
}
|
||
|
||
type ScriptWorkspaceProps = {
|
||
script: ScriptItem;
|
||
sessionCache: Map<string, CachedSession>;
|
||
editSession: ActiveEditSession | null;
|
||
jupyterUrl: string | null;
|
||
editBusy: boolean;
|
||
openError: string | null;
|
||
latestVersion: LatestVersion | null;
|
||
versionsLoading: boolean;
|
||
openTabs: Array<{ scriptId: string; scriptName: string; scriptType: ScriptType }>;
|
||
onOpenEditor: () => void;
|
||
onEndEditing: () => void;
|
||
onClose: (scriptId: string, event?: ReactMouseEvent) => void;
|
||
onSwitchTab: (scriptId: string) => void;
|
||
onNewTab: () => void;
|
||
onPublish: () => void;
|
||
onInfo: (toast: ToastState) => void;
|
||
};
|
||
|
||
function formatTime(value: string) {
|
||
return new Intl.DateTimeFormat("zh-CN", {
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
hour12: false,
|
||
}).format(new Date(value));
|
||
}
|
||
|
||
function formatBytes(value: number) {
|
||
if (value < 1024) return `${value} B`;
|
||
return `${(value / 1024).toFixed(1)} KB`;
|
||
}
|
||
|
||
function shortHash(value: string) {
|
||
return value ? `${value.slice(0, 8)}…${value.slice(-6)}` : "—";
|
||
}
|
||
|
||
function confineJupyterFrame(frame: HTMLIFrameElement): void {
|
||
try {
|
||
const document = frame.contentDocument;
|
||
if (!document?.documentElement) return;
|
||
const keepInside = (): void => {
|
||
document.querySelectorAll<HTMLElement>("button,[role='button']").forEach(
|
||
(element) => {
|
||
const label = `${element.getAttribute("aria-label") ?? ""} ${
|
||
element.getAttribute("title") ?? ""
|
||
} ${element.textContent ?? ""}`.trim();
|
||
if (/^open in\b/i.test(label) || /\bopen in\.\.\./i.test(label)) {
|
||
element.style.setProperty("display", "none", "important");
|
||
}
|
||
},
|
||
);
|
||
document.querySelectorAll<HTMLAnchorElement>("a[target]").forEach((link) => {
|
||
if (["_blank", "_top", "_parent"].includes(link.target)) {
|
||
link.target = "_self";
|
||
}
|
||
});
|
||
};
|
||
keepInside();
|
||
new MutationObserver(keepInside).observe(document.documentElement, {
|
||
childList: true,
|
||
subtree: true,
|
||
});
|
||
document.addEventListener("click", (event) => {
|
||
const target = event.target as HTMLElement | null;
|
||
const link = target?.closest?.("a") as HTMLAnchorElement | null;
|
||
if (link && ["_blank", "_top", "_parent"].includes(link.target)) {
|
||
link.target = "_self";
|
||
}
|
||
}, true);
|
||
} catch {
|
||
// The iframe remains sandboxed even if its document is not yet accessible.
|
||
}
|
||
}
|
||
|
||
export function ScriptWorkspace({
|
||
script,
|
||
sessionCache,
|
||
editSession,
|
||
jupyterUrl,
|
||
editBusy,
|
||
openError,
|
||
latestVersion,
|
||
versionsLoading,
|
||
openTabs,
|
||
onOpenEditor,
|
||
onEndEditing,
|
||
onClose,
|
||
onSwitchTab,
|
||
onNewTab,
|
||
onPublish,
|
||
onInfo,
|
||
}: ScriptWorkspaceProps) {
|
||
const tabbarRef = useRef<HTMLDivElement | null>(null);
|
||
const isNotebook = script.script_type === "notebook";
|
||
// 判断当前选中的文件是否正在编辑（需要同时检查 session_status 和 script_id）
|
||
const isEditing = editSession?.session_status === "active"
|
||
&& editSession?.script_id === script.script_id;
|
||
|
||
const scroll = (direction: "left" | "right") => {
|
||
const tabbar = tabbarRef.current;
|
||
if (!tabbar) return;
|
||
const scrollAmount = 200;
|
||
tabbar.scrollBy({
|
||
left: direction === "left" ? -scrollAmount : scrollAmount,
|
||
behavior: "smooth",
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
const tabbar = tabbarRef.current;
|
||
if (!tabbar) return;
|
||
const activeTab = tabbar.querySelector(".editor-tab--active") as HTMLElement | null;
|
||
if (activeTab) {
|
||
const tabbarRect = tabbar.getBoundingClientRect();
|
||
const tabRect = activeTab.getBoundingClientRect();
|
||
if (tabRect.right > tabbarRect.right || tabRect.left < tabbarRect.left) {
|
||
activeTab.scrollIntoView({ behavior: "smooth", inline: "center" });
|
||
}
|
||
}
|
||
}, [script.script_id]);
|
||
|
||
return (
|
||
<>
|
||
<div className="tabbar">
|
||
<button
|
||
className="tabbar-scroll-btn tabbar-scroll-btn--left"
|
||
type="button"
|
||
aria-label="向左滚动"
|
||
onClick={() => scroll("left")}
|
||
>
|
||
<Icon name="chevron" size={16} />
|
||
</button>
|
||
<div className="tabbar-scroll-content" ref={tabbarRef}>
|
||
{openTabs.map((tab) => (
|
||
<div
|
||
key={tab.scriptId}
|
||
className={`editor-tab${tab.scriptId === script.script_id ? " editor-tab--active" : ""}`}
|
||
onClick={() => onSwitchTab(tab.scriptId)}
|
||
>
|
||
<span className={`file-icon file-icon--${tab.scriptType}`}>
|
||
<Icon name={tab.scriptType === "notebook" ? "notebook" : "python"} size={16} />
|
||
</span>
|
||
<span>{tab.scriptName}</span>
|
||
<button
|
||
type="button"
|
||
aria-label="关闭标签"
|
||
onClick={(event) => onClose(tab.scriptId, event)}
|
||
>
|
||
<Icon name="close" size={14} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button
|
||
className="new-tab"
|
||
type="button"
|
||
onClick={onNewTab}
|
||
>
|
||
<Icon name="plus" size={17} />
|
||
</button>
|
||
</div>
|
||
<button
|
||
className="tabbar-scroll-btn tabbar-scroll-btn--right"
|
||
type="button"
|
||
aria-label="向右滚动"
|
||
onClick={() => scroll("right")}
|
||
>
|
||
<Icon name="chevron" size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="editor-toolbar">
|
||
<div className="editor-toolbar__path">
|
||
<span className={`file-icon file-icon--${script.script_type}`}>
|
||
<Icon name={scriptIcon(script)} size={17} />
|
||
</span>
|
||
<span>工作副本</span>
|
||
<Icon name="chevron" size={13} />
|
||
<strong>{script.script_name}</strong>
|
||
</div>
|
||
<div className="editor-toolbar__actions">
|
||
{isEditing ? (
|
||
<button
|
||
className="end-edit-button"
|
||
type="button"
|
||
disabled={editBusy}
|
||
onClick={onEndEditing}
|
||
>
|
||
{editBusy ? "正在释放…" : "结束编辑"}
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={() => onInfo({
|
||
tone: "info",
|
||
message: "Jupyter 中保存后会直接写入 Workspace 工作副本",
|
||
})}
|
||
>
|
||
保存说明
|
||
</button>
|
||
)}
|
||
<button
|
||
className="release-button"
|
||
type="button"
|
||
onClick={onPublish}
|
||
>
|
||
发布稳定版
|
||
</button>
|
||
<span className={`stage-badge${isEditing ? " is-editing" : ""}`}>
|
||
<span />
|
||
{isEditing
|
||
? isNotebook
|
||
? "Demo 无锁模式 · Kernel 已连接"
|
||
: "Demo 无锁模式 · 编辑中"
|
||
: latestVersion
|
||
? `最新 ${latestVersion.version_label}`
|
||
: "工作副本已就绪"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 多 iframe 共存方案：为每个缓存的 session 渲染独立的 iframe */}
|
||
<div className={`editor-canvas ${sessionCache.size > 0 ? 'is-embedded' : ''}`} style={sessionCache.size > 0 ? { position: 'relative', minHeight: '0', height: '100%' } : undefined}>
|
||
{/* 渲染所有缓存的 iframe */}
|
||
{Array.from(sessionCache.entries()).map(([scriptId, cached]) => {
|
||
// 当前选中的脚本就是激活的
|
||
const isActive = scriptId === script.script_id;
|
||
return (
|
||
<section
|
||
key={scriptId}
|
||
className="embedded-jupyter"
|
||
style={{
|
||
position: isActive ? 'relative' : 'absolute',
|
||
visibility: isActive ? 'visible' : 'hidden',
|
||
pointerEvents: isActive ? 'auto' : 'none',
|
||
width: '100%',
|
||
height: '100%',
|
||
overflow: 'hidden'
|
||
}}
|
||
>
|
||
<div className="embedded-jupyter__status">
|
||
<span>
|
||
<i />
|
||
Workspace Jupyter Server
|
||
</span>
|
||
<span>
|
||
{cached.session.session_status === "active" ? "Notebook Session · Python 3 Kernel" : "Jupyter 文本编辑器"}
|
||
</span>
|
||
<code title={cached.session.runtime_id}>
|
||
Runtime {cached.session.runtime_id.slice(-8)}
|
||
</code>
|
||
</div>
|
||
<iframe
|
||
src={cached.jupyterUrl}
|
||
title={`${scriptId} Jupyter 编辑器`}
|
||
allow="clipboard-read; clipboard-write"
|
||
sandbox="allow-same-origin allow-scripts allow-forms allow-downloads allow-modals"
|
||
onLoad={(event) => confineJupyterFrame(event.currentTarget)}
|
||
/>
|
||
</section>
|
||
);
|
||
})}
|
||
|
||
{/* 当前脚本没有缓存时的状态显示 */}
|
||
{!sessionCache.has(script.script_id) ? (
|
||
isNotebook ? (
|
||
<section
|
||
className={`editor-opening-state${openError ? " has-error" : ""}`}
|
||
aria-live="polite"
|
||
style={{ display: 'block' }}
|
||
>
|
||
<div className="editor-opening-state__icon">
|
||
{openError
|
||
? <Icon name="info" size={28} />
|
||
: <span className="button-spinner button-spinner--blue" />}
|
||
</div>
|
||
<strong>
|
||
{openError ? "Notebook 打开失败" : "正在打开 Notebook"}
|
||
</strong>
|
||
<p>
|
||
{openError
|
||
? openError
|
||
: "正在获取编辑锁并连接 Workspace Jupyter Server…"}
|
||
</p>
|
||
{openError && (
|
||
<button
|
||
className="open-editor-button"
|
||
type="button"
|
||
disabled={editBusy}
|
||
onClick={onOpenEditor}
|
||
>
|
||
{editBusy
|
||
? <span className="button-spinner button-spinner--blue" />
|
||
: <Icon name="refresh" size={16} />}
|
||
{editBusy ? "正在重试…" : "重试打开"}
|
||
</button>
|
||
)}
|
||
</section>
|
||
) : (
|
||
<section className="script-overview">
|
||
<div className="script-overview__header">
|
||
<div>
|
||
<span className="section-kicker">PYTHON SCRIPT</span>
|
||
<h2>{script.script_name}</h2>
|
||
<p>{script.relative_path}</p>
|
||
</div>
|
||
<button
|
||
className={`open-editor-button${isEditing ? " is-editing" : ""}`}
|
||
type="button"
|
||
disabled={editBusy}
|
||
onClick={onOpenEditor}
|
||
>
|
||
{editBusy
|
||
? <span className="button-spinner button-spinner--blue" />
|
||
: <Icon name="external" size={17} />}
|
||
{editBusy
|
||
? "正在准备编辑器…"
|
||
: isEditing
|
||
? "继续编辑"
|
||
: "打开编辑器"}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="metadata-grid">
|
||
<div>
|
||
<span>脚本类型</span>
|
||
<strong>Python</strong>
|
||
</div>
|
||
<div>
|
||
<span>可见范围</span>
|
||
<strong>
|
||
{script.visibility === "workspace"
|
||
? "Workspace"
|
||
: script.visibility === "public" ? "公开" : "私有"}
|
||
</strong>
|
||
</div>
|
||
<div>
|
||
<span>文件大小</span>
|
||
<strong>{formatBytes(script.size_bytes)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>最近更新</span>
|
||
<strong>{formatTime(script.updated_at)}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="preview-card">
|
||
<div className="preview-card__bar">
|
||
<div>
|
||
<span className="window-dot window-dot--red" />
|
||
<span className="window-dot window-dot--yellow" />
|
||
<span className="window-dot window-dot--green" />
|
||
</div>
|
||
<span>Python 预览</span>
|
||
<em>{isEditing ? "Jupyter 中可编辑" : "平台只读预览"}</em>
|
||
</div>
|
||
<PythonPreview />
|
||
</div>
|
||
|
||
<div className="integrity-row">
|
||
<span>
|
||
<Icon name="check" size={15} />
|
||
{isEditing ? "Demo 无锁编辑会话已连接" : "工作副本已同步"}
|
||
</span>
|
||
<span>SHA-256 {shortHash(script.content_hash)}</span>
|
||
<span>
|
||
稳定版本
|
||
{versionsLoading
|
||
? "加载中"
|
||
: latestVersion
|
||
? `${latestVersion.version_label} · ${latestVersion.versions_id}`
|
||
: "尚未发布"}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
)) : null}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function PythonPreview() {
|
||
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">"""模型实验开发平台构建脚本。"""</span>
|
||
{"\n\n"}<b>def</b> <span className="code-function">main</span>() -> <b>None</b>:
|
||
{"\n"} print(<i>"Hello, Model Platform!"</i>)
|
||
{"\n\n\n"}<b>if</b> __name__ == <i>"__main__"</i>:
|
||
{"\n"} main()
|
||
</pre>
|
||
</div>
|
||
);
|
||
}
|