merge: integrate feat/auth into develop
This commit is contained in:
Winnie
@@ -10,24 +10,6 @@ import {
|
||||
import { useLocation, useNavigate } from "react-router";
|
||||
|
||||
import {
|
||||
acquireFileLock,
|
||||
createWorkspaceDirectory,
|
||||
createScript,
|
||||
createJupyterAccessTicket,
|
||||
deleteScript,
|
||||
deleteWorkspaceDirectory,
|
||||
demoContext,
|
||||
demoUsers,
|
||||
demoWorkspaces,
|
||||
heartbeatFileLock,
|
||||
listScripts,
|
||||
listScriptVersions,
|
||||
listWorkspaceDirectories,
|
||||
publishScriptVersion,
|
||||
releaseFileLock,
|
||||
releaseFileLockOnUnload,
|
||||
setDemoContext,
|
||||
uploadScript,
|
||||
type ActiveEditSession,
|
||||
type ScriptItem,
|
||||
type ScriptType,
|
||||
@@ -35,6 +17,7 @@ import {
|
||||
type Visibility,
|
||||
type WorkspaceDirectory,
|
||||
} from "../../services/api";
|
||||
import { useApi, useAuth } from "~/context/AuthContext";
|
||||
import Icon from "../../components/Icon";
|
||||
import SchedulePage from "../schedules/SchedulePage";
|
||||
import { DashboardPage, SystemAdminPage } from "../admin/AdminPages";
|
||||
@@ -123,9 +106,27 @@ function mergeDirectories(
|
||||
).values()];
|
||||
}
|
||||
export default function ModelPlatformApp() {
|
||||
const { currentWorkspace } = useAuth();
|
||||
if (!currentWorkspace) {
|
||||
return (
|
||||
<div className="app-shell" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<span style={{ fontSize: 18 }}>加载中…</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <AuthenticatedModelPlatformApp />;
|
||||
}
|
||||
|
||||
function AuthenticatedModelPlatformApp() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const activePage = pageFromPath(location.pathname);
|
||||
const auth = useAuth();
|
||||
const { user, workspaces, setCurrentWorkspace, logout } = auth;
|
||||
const currentWorkspace = auth.currentWorkspace!;
|
||||
const api = useApi();
|
||||
const [scripts, setScripts] = useState<ScriptItem[]>([]);
|
||||
const [directories, setDirectories] = useState<WorkspaceDirectory[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
@@ -144,7 +145,6 @@ export default function ModelPlatformApp() {
|
||||
}>({ open: false, parentPath: "", name: "", busy: false });
|
||||
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
||||
const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
||||
const [uploadParentPath, setUploadParentPath] = useState("");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const uploadInputRef = useRef<HTMLInputElement | null>(null);
|
||||
@@ -176,8 +176,8 @@ export default function ModelPlatformApp() {
|
||||
setRefreshing(silent);
|
||||
try {
|
||||
const [items, folderItems] = await Promise.all([
|
||||
listScripts(),
|
||||
listWorkspaceDirectories(),
|
||||
api.listScripts(),
|
||||
api.listWorkspaceDirectories(),
|
||||
]);
|
||||
setScripts(items);
|
||||
setDirectories(folderItems);
|
||||
@@ -248,7 +248,7 @@ export default function ModelPlatformApp() {
|
||||
}
|
||||
let ignore = false;
|
||||
setVersionsLoading(true);
|
||||
void listScriptVersions(selectedId)
|
||||
void api.listScriptVersions(selectedId)
|
||||
.then((items) => {
|
||||
if (!ignore) setVersions(items);
|
||||
})
|
||||
@@ -282,7 +282,7 @@ export default function ModelPlatformApp() {
|
||||
return;
|
||||
}
|
||||
heartbeatRunning = true;
|
||||
void heartbeatFileLock(current)
|
||||
void api.heartbeatFileLock(current)
|
||||
.then((updated) => {
|
||||
setEditSession((active) => active
|
||||
&& active.edit_session_id === updated.edit_session_id
|
||||
@@ -319,7 +319,7 @@ export default function ModelPlatformApp() {
|
||||
if (!current || current.edit_session_id !== editSession.edit_session_id) {
|
||||
return;
|
||||
}
|
||||
void createJupyterAccessTicket(current)
|
||||
void api.createJupyterAccessTicket(current)
|
||||
.then((ticket) => {
|
||||
setEditSession((active) => active
|
||||
&& active.edit_session_id === ticket.edit_session_id
|
||||
@@ -342,7 +342,7 @@ export default function ModelPlatformApp() {
|
||||
if (!editSession) return;
|
||||
const handleUnload = () => {
|
||||
const current = editSessionRef.current;
|
||||
if (current) releaseFileLockOnUnload(current);
|
||||
if (current) api.releaseFileLockOnUnload(current);
|
||||
};
|
||||
window.addEventListener("beforeunload", handleUnload);
|
||||
return () => window.removeEventListener("beforeunload", handleUnload);
|
||||
@@ -356,24 +356,17 @@ export default function ModelPlatformApp() {
|
||||
);
|
||||
}, [keyword, scripts]);
|
||||
|
||||
const memberScriptGroups = [...demoUsers]
|
||||
.sort((left, right) => (
|
||||
Number(right.userId === demoContext.userId)
|
||||
- Number(left.userId === demoContext.userId)
|
||||
))
|
||||
.map((user) => {
|
||||
const memberScripts = filteredScripts.filter(
|
||||
(item) => item.owner_user_id === user.userId,
|
||||
const memberScriptGroups = (() => {
|
||||
const currentUserScripts = filteredScripts.filter(
|
||||
(item) => item.owner_user_id === user?.user_id,
|
||||
);
|
||||
const inferred = inferredDirectories(memberScripts);
|
||||
return {
|
||||
user,
|
||||
scripts: memberScripts,
|
||||
directories: user.userId === demoContext.userId
|
||||
? mergeDirectories(directories, inferred)
|
||||
: inferred,
|
||||
};
|
||||
});
|
||||
const inferred = inferredDirectories(currentUserScripts);
|
||||
return [{
|
||||
user: user,
|
||||
scripts: currentUserScripts,
|
||||
directories: mergeDirectories(directories, inferred),
|
||||
}];
|
||||
})();
|
||||
const selected = scripts.find((item) => item.script_id === selectedId) ?? null;
|
||||
|
||||
const selectScript = (scriptId: string | null) => {
|
||||
@@ -413,7 +406,7 @@ export default function ModelPlatformApp() {
|
||||
let newlyAcquired = false;
|
||||
try {
|
||||
if (active && active.script_id !== script.script_id) {
|
||||
await releaseFileLock(active);
|
||||
await api.releaseFileLock(active);
|
||||
setEmbeddedJupyterUrl(null);
|
||||
setEditSession(null);
|
||||
editSessionRef.current = null;
|
||||
@@ -422,20 +415,20 @@ export default function ModelPlatformApp() {
|
||||
if (!requestIsCurrent()) return;
|
||||
|
||||
if (!active) {
|
||||
active = await acquireFileLock(script);
|
||||
active = await api.acquireFileLock(script);
|
||||
newlyAcquired = true;
|
||||
}
|
||||
if (!requestIsCurrent()) {
|
||||
if (active) {
|
||||
await releaseFileLock(active);
|
||||
await api.releaseFileLock(active);
|
||||
clearSessionIfActive(active);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const ticket = await createJupyterAccessTicket(active);
|
||||
const ticket = await api.createJupyterAccessTicket(active);
|
||||
if (!requestIsCurrent()) {
|
||||
await releaseFileLock(active);
|
||||
await api.releaseFileLock(active);
|
||||
clearSessionIfActive(active);
|
||||
return;
|
||||
}
|
||||
@@ -456,7 +449,7 @@ export default function ModelPlatformApp() {
|
||||
} catch (error) {
|
||||
if (newlyAcquired && active) {
|
||||
try {
|
||||
await releaseFileLock(active);
|
||||
await api.releaseFileLock(active);
|
||||
} catch {
|
||||
// The database lease is the final safety net if compensation cannot reach Runtime.
|
||||
}
|
||||
@@ -513,7 +506,7 @@ export default function ModelPlatformApp() {
|
||||
}
|
||||
setEditBusy(true);
|
||||
try {
|
||||
await releaseFileLock(active);
|
||||
await api.releaseFileLock(active);
|
||||
setEmbeddedJupyterUrl(null);
|
||||
setEditSession(null);
|
||||
editSessionRef.current = null;
|
||||
@@ -572,7 +565,7 @@ export default function ModelPlatformApp() {
|
||||
if (!publishTarget) return;
|
||||
setPublishing(true);
|
||||
try {
|
||||
const version = await publishScriptVersion({
|
||||
const version = await api.publishScriptVersion({
|
||||
script: publishTarget,
|
||||
releaseNote,
|
||||
visibility: publishVisibility,
|
||||
@@ -602,7 +595,7 @@ export default function ModelPlatformApp() {
|
||||
if (!form.name.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const created = await createScript(form);
|
||||
const created = await api.createScript(form);
|
||||
setScripts((items) => [created, ...items]);
|
||||
selectScript(created.script_id);
|
||||
setCreateOpen(false);
|
||||
@@ -658,7 +651,7 @@ export default function ModelPlatformApp() {
|
||||
let lastCreated: ScriptItem | null = null;
|
||||
try {
|
||||
for (const file of files) {
|
||||
lastCreated = await uploadScript(file, uploadParentPath);
|
||||
lastCreated = await api.uploadScript(file, uploadParentPath);
|
||||
}
|
||||
await load(true);
|
||||
if (lastCreated) selectScript(lastCreated.script_id);
|
||||
@@ -684,7 +677,7 @@ export default function ModelPlatformApp() {
|
||||
if (!folderDialog.name.trim()) return;
|
||||
setFolderDialog((current) => ({ ...current, busy: true }));
|
||||
try {
|
||||
await createWorkspaceDirectory(
|
||||
await api.createWorkspaceDirectory(
|
||||
folderDialog.name.trim(),
|
||||
folderDialog.parentPath,
|
||||
);
|
||||
@@ -718,7 +711,7 @@ export default function ModelPlatformApp() {
|
||||
if (editSessionRef.current?.script_id === script.script_id) return;
|
||||
}
|
||||
try {
|
||||
await deleteScript(script.script_id);
|
||||
await api.deleteScript(script.script_id);
|
||||
if (selectedIdRef.current === script.script_id) selectScript(null);
|
||||
await load(true);
|
||||
setToast({
|
||||
@@ -752,7 +745,7 @@ export default function ModelPlatformApp() {
|
||||
if (editSessionRef.current?.script_id === activeScript.script_id) return;
|
||||
}
|
||||
try {
|
||||
const result = await deleteWorkspaceDirectory(path);
|
||||
const result = await api.deleteWorkspaceDirectory(path);
|
||||
const selectedScript = scripts.find(
|
||||
(item) => item.script_id === selectedIdRef.current,
|
||||
);
|
||||
@@ -851,36 +844,29 @@ export default function ModelPlatformApp() {
|
||||
{apiOnline ? "服务已连接" : "服务未连接"}
|
||||
</div>
|
||||
<div className="topbar-menu-wrap">
|
||||
<button className="workspace-switcher" type="button" onClick={() => { setWorkspaceMenuOpen((value) => !value); setUserMenuOpen(false); }}>
|
||||
<button className="workspace-switcher" type="button" onClick={() => { setWorkspaceMenuOpen((value) => !value); }}>
|
||||
<span className="workspace-switcher__icon"><Icon name="workspace" size={18} /></span>
|
||||
<span><small>当前 Workspace</small><strong>{demoContext.workspaceName}</strong></span>
|
||||
<span><small>当前 Workspace</small><strong>{currentWorkspace.workspace_name}</strong></span>
|
||||
<Icon name="chevron" size={15} />
|
||||
</button>
|
||||
{workspaceMenuOpen && (
|
||||
<div className="topbar-dropdown">
|
||||
{demoWorkspaces.map((workspace) => (
|
||||
<button className={workspace.workspaceId === demoContext.workspaceId ? "is-selected" : ""} type="button" key={workspace.workspaceId} onClick={() => { setDemoContext({ workspace }); window.location.reload(); }}>
|
||||
<Icon name="workspace" size={15} /><span><strong>{workspace.workspaceName}</strong><small>{workspace.workspaceId === demoContext.workspaceId ? "当前使用" : "点击切换"}</small></span>
|
||||
{workspaces.map((workspace) => (
|
||||
<button className={workspace.workspace_id === currentWorkspace.workspace_id ? "is-selected" : ""} type="button" key={workspace.workspace_id} onClick={() => { setCurrentWorkspace(workspace.workspace_id); setWorkspaceMenuOpen(false); }}>
|
||||
<Icon name="workspace" size={15} /><span><strong>{workspace.workspace_name}</strong><small>{workspace.workspace_id === currentWorkspace.workspace_id ? "当前使用" : "点击切换"}</small></span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="topbar-menu-wrap">
|
||||
<button className="user-menu" type="button" onClick={() => { setUserMenuOpen((value) => !value); setWorkspaceMenuOpen(false); }}>
|
||||
<span className="avatar">{demoContext.userName.slice(0, 1)}</span>
|
||||
<span className="user-menu__copy"><strong>{demoContext.userName}</strong><small>{demoContext.roleName}</small></span>
|
||||
<Icon name="chevron" size={15} />
|
||||
<button className="user-menu" type="button">
|
||||
<span className="avatar">{user?.display_name?.slice(0, 1) ?? "?"}</span>
|
||||
<span className="user-menu__copy"><strong>{user?.display_name ?? "未知用户"}</strong><small>{user?.role_code === "admin" ? "管理员" : "开发人员"}</small></span>
|
||||
</button>
|
||||
<button className="text-button" type="button" onClick={() => { logout(); window.location.assign("/login"); }}>
|
||||
登出
|
||||
</button>
|
||||
{userMenuOpen && (
|
||||
<div className="topbar-dropdown topbar-dropdown--users">
|
||||
{demoUsers.map((user) => (
|
||||
<button className={user.userId === demoContext.userId ? "is-selected" : ""} type="button" key={user.userId} onClick={() => { setDemoContext({ user }); window.location.reload(); }}>
|
||||
<span className="avatar">{user.userName.slice(0, 1)}</span><span><strong>{user.userName}</strong><small>{user.roleName} · {user.username}</small></span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -949,18 +935,18 @@ export default function ModelPlatformApp() {
|
||||
<>
|
||||
{memberScriptGroups.map((group) => (
|
||||
<WorkspaceTreeGroup
|
||||
key={group.user.userId}
|
||||
title={`${group.user.userName}的文件`}
|
||||
key={group.user?.user_id ?? "anon"}
|
||||
title={`${group.user?.display_name}的文件`}
|
||||
scripts={group.scripts}
|
||||
directories={group.directories}
|
||||
selectedId={selectedId}
|
||||
onSelect={selectScript}
|
||||
onContextMenu={
|
||||
group.user.userId === demoContext.userId
|
||||
group.user?.user_id === user?.user_id
|
||||
? showContextMenu
|
||||
: undefined
|
||||
}
|
||||
readOnly={group.user.userId !== demoContext.userId}
|
||||
readOnly={group.user?.user_id !== user?.user_id}
|
||||
/>
|
||||
))}
|
||||
{filteredScripts.length === 0 && (
|
||||
@@ -1045,13 +1031,13 @@ export default function ModelPlatformApp() {
|
||||
</section>
|
||||
) : activePage === "schedules" ? (
|
||||
<SchedulePage
|
||||
key={`${demoContext.userId}-${demoContext.workspaceId}`}
|
||||
key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
|
||||
onNotify={setToast}
|
||||
onConnectionChange={setApiOnline}
|
||||
/>
|
||||
) : activePage === "system" ? (
|
||||
<SystemAdminPage
|
||||
key={`${demoContext.userId}-${demoContext.workspaceId}`}
|
||||
key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
|
||||
onNotify={setToast}
|
||||
onConnectionChange={setApiOnline}
|
||||
/>
|
||||
@@ -1458,4 +1444,4 @@ export default function ModelPlatformApp() {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
import Icon from "../../components/Icon";
|
||||
import type {
|
||||
ActiveEditSession,
|
||||
ScriptItem,
|
||||
StableVersion,
|
||||
} from "../../services/api";
|
||||
import { scriptIcon } from "./WorkspaceTree";
|
||||
|
||||
type ToastState = {
|
||||
tone: "success" | "error" | "info";
|
||||
message: string;
|
||||
};
|
||||
|
||||
type ScriptWorkspaceProps = {
|
||||
script: ScriptItem;
|
||||
editSession: ActiveEditSession | null;
|
||||
jupyterUrl: string | null;
|
||||
editBusy: boolean;
|
||||
openError: string | null;
|
||||
latestVersion: StableVersion | null;
|
||||
versionsLoading: boolean;
|
||||
onOpenEditor: () => void;
|
||||
onEndEditing: () => void;
|
||||
onClose: () => 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,
|
||||
editSession,
|
||||
jupyterUrl,
|
||||
editBusy,
|
||||
openError,
|
||||
latestVersion,
|
||||
versionsLoading,
|
||||
onOpenEditor,
|
||||
onEndEditing,
|
||||
onClose,
|
||||
onPublish,
|
||||
onInfo,
|
||||
}: ScriptWorkspaceProps) {
|
||||
const isNotebook = script.script_type === "notebook";
|
||||
const isEditing = editSession?.session_status === "active";
|
||||
return (
|
||||
<>
|
||||
<div className="tabbar">
|
||||
<div className="editor-tab editor-tab--active">
|
||||
<span className={`file-icon file-icon--${script.script_type}`}>
|
||||
<Icon name={scriptIcon(script)} size={16} />
|
||||
</span>
|
||||
<span>{script.script_name}</span>
|
||||
<button type="button" aria-label="关闭标签" onClick={onClose}>
|
||||
<Icon name="close" size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="new-tab"
|
||||
type="button"
|
||||
onClick={() => onInfo({ tone: "info", message: "请从左侧选择或新建脚本" })}
|
||||
>
|
||||
<Icon name="plus" size={17} />
|
||||
</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>
|
||||
|
||||
<div className={`editor-canvas${isEditing && jupyterUrl ? " is-embedded" : ""}`}>
|
||||
{isEditing && jupyterUrl ? (
|
||||
<section className="embedded-jupyter">
|
||||
<div className="embedded-jupyter__status">
|
||||
<span>
|
||||
<i />
|
||||
Workspace Jupyter Server
|
||||
</span>
|
||||
<span>
|
||||
{isNotebook ? "Notebook Session · Python 3 Kernel" : "Jupyter 文本编辑器"}
|
||||
</span>
|
||||
<code title={editSession.runtime_id}>
|
||||
Runtime {editSession.runtime_id.slice(-8)}
|
||||
</code>
|
||||
</div>
|
||||
<iframe
|
||||
key={`${editSession.edit_session_id}:${jupyterUrl}`}
|
||||
src={jupyterUrl}
|
||||
title={`${script.script_name} Jupyter 编辑器`}
|
||||
allow="clipboard-read; clipboard-write"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-downloads allow-modals"
|
||||
onLoad={(event) => confineJupyterFrame(event.currentTarget)}
|
||||
/>
|
||||
</section>
|
||||
) : isNotebook ? (
|
||||
<section
|
||||
className={`editor-opening-state${openError ? " has-error" : ""}`}
|
||||
aria-live="polite"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import { type MouseEvent as ReactMouseEvent, useState } from "react";
|
||||
|
||||
import Icon from "../../components/Icon";
|
||||
import type {
|
||||
ScriptItem,
|
||||
WorkspaceDirectory,
|
||||
} from "../../services/api";
|
||||
|
||||
export type WorkspaceTreeTarget = {
|
||||
kind: "root" | "directory" | "file";
|
||||
path: string;
|
||||
script?: ScriptItem;
|
||||
};
|
||||
|
||||
type WorkspaceTreeProps = {
|
||||
title: string;
|
||||
scripts: ScriptItem[];
|
||||
directories: WorkspaceDirectory[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onContextMenu?: (
|
||||
event: ReactMouseEvent,
|
||||
target: WorkspaceTreeTarget,
|
||||
) => void;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
type WorkspaceTreeItemsProps = Omit<WorkspaceTreeProps, "title" | "readOnly"> & {
|
||||
path: string;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
export function scriptIcon(item: ScriptItem) {
|
||||
return item.script_type === "notebook" ? "notebook" : "python";
|
||||
}
|
||||
|
||||
function ownedScriptPath(item: ScriptItem) {
|
||||
return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
|
||||
}
|
||||
|
||||
function parentOf(path: string) {
|
||||
const parts = path.split("/");
|
||||
parts.pop();
|
||||
return parts.join("/");
|
||||
}
|
||||
|
||||
export function WorkspaceTreeGroup({
|
||||
title,
|
||||
scripts,
|
||||
directories,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onContextMenu,
|
||||
readOnly = false,
|
||||
}: WorkspaceTreeProps) {
|
||||
const [open, setOpen] = useState(true);
|
||||
return (
|
||||
<div className="tree-group">
|
||||
<button
|
||||
className={`tree-group__title${open ? " is-open" : ""}`}
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
onContextMenu={onContextMenu
|
||||
? (event) => onContextMenu(event, { kind: "root", path: "" })
|
||||
: undefined}
|
||||
>
|
||||
<Icon name="chevron" size={14} />
|
||||
<Icon name="folder" size={17} />
|
||||
<span>{title}</span>
|
||||
<em>{scripts.length}</em>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="tree-group__items">
|
||||
<WorkspaceTreeItems
|
||||
path=""
|
||||
depth={0}
|
||||
scripts={scripts}
|
||||
directories={directories}
|
||||
selectedId={selectedId}
|
||||
onSelect={onSelect}
|
||||
onContextMenu={onContextMenu}
|
||||
/>
|
||||
{scripts.length === 0 && directories.length === 0 && (
|
||||
<p className="tree-group__empty">
|
||||
{readOnly ? "暂无文件" : "右键此目录即可新建或上传"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkspaceTreeItems({
|
||||
path,
|
||||
depth,
|
||||
scripts,
|
||||
directories,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onContextMenu,
|
||||
}: WorkspaceTreeItemsProps) {
|
||||
const childDirectories = directories.filter(
|
||||
(item) => item.parent_path === path,
|
||||
);
|
||||
const childScripts = scripts.filter(
|
||||
(item) => parentOf(ownedScriptPath(item)) === path,
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{childDirectories.map((directory) => (
|
||||
<DirectoryBranch
|
||||
key={directory.path}
|
||||
directory={directory}
|
||||
depth={depth}
|
||||
scripts={scripts}
|
||||
directories={directories}
|
||||
selectedId={selectedId}
|
||||
onSelect={onSelect}
|
||||
onContextMenu={onContextMenu}
|
||||
/>
|
||||
))}
|
||||
{childScripts.map((item) => (
|
||||
<button
|
||||
className={`script-row${
|
||||
selectedId === item.script_id ? " script-row--active" : ""
|
||||
}`}
|
||||
style={{ paddingLeft: 20 + depth * 16 }}
|
||||
key={item.script_id}
|
||||
type="button"
|
||||
onClick={() => onSelect(item.script_id)}
|
||||
onContextMenu={onContextMenu
|
||||
? (event) => onContextMenu(event, {
|
||||
kind: "file",
|
||||
path: ownedScriptPath(item),
|
||||
script: item,
|
||||
})
|
||||
: undefined}
|
||||
>
|
||||
<span className={`file-icon file-icon--${item.script_type}`}>
|
||||
<Icon name={scriptIcon(item)} size={17} />
|
||||
</span>
|
||||
<span className="script-row__copy">
|
||||
<strong title={item.script_name}>{item.script_name}</strong>
|
||||
<small>{formatTime(item.updated_at)}</small>
|
||||
</span>
|
||||
{item.visibility !== "private" && (
|
||||
<span className="visibility-dot" title="Workspace 可见" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DirectoryBranch({
|
||||
directory,
|
||||
depth,
|
||||
scripts,
|
||||
directories,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onContextMenu,
|
||||
}: Omit<WorkspaceTreeItemsProps, "path"> & {
|
||||
directory: WorkspaceDirectory;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
return (
|
||||
<div className="directory-branch">
|
||||
<button
|
||||
className="directory-row"
|
||||
style={{ paddingLeft: 10 + depth * 16 }}
|
||||
type="button"
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
onContextMenu={onContextMenu
|
||||
? (event) => onContextMenu(event, {
|
||||
kind: "directory",
|
||||
path: directory.path,
|
||||
})
|
||||
: undefined}
|
||||
>
|
||||
<span className={`directory-row__chevron${open ? " is-open" : ""}`}>
|
||||
<Icon name="chevron" size={13} />
|
||||
</span>
|
||||
<Icon name="folder" size={17} />
|
||||
<strong title={directory.path}>{directory.name}</strong>
|
||||
</button>
|
||||
{open && (
|
||||
<WorkspaceTreeItems
|
||||
path={directory.path}
|
||||
depth={depth + 1}
|
||||
scripts={scripts}
|
||||
directories={directories}
|
||||
selectedId={selectedId}
|
||||
onSelect={onSelect}
|
||||
onContextMenu={onContextMenu}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user