From 4e95399d4fbb749056a723c850d2a53d74b81561 Mon Sep 17 00:00:00 2001
From: xiaozhu <2395895331@qq.com>
Date: Tue, 4 Aug 2026 18:46:18 +0800
Subject: [PATCH] =?UTF-8?q?chore:platform=E6=96=87=E4=BB=B6=E6=8B=86?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/components/{ => common}/Icon.tsx |    0
 frontend/app/components/common/Sidebar.tsx    |   73 +
 frontend/app/components/common/Toast.tsx      |   23 +
 frontend/app/components/common/Topbar.tsx     |  121 ++
 .../app/components/common/WelcomePanel.tsx    |   24 +
 .../components/platform/CreateFolderModal.tsx |   80 +
 .../components/platform/CreateScriptModal.tsx |  165 ++
 .../app/components/platform/PublishModal.tsx  |  101 ++
 .../components/platform/ScriptExplorer.tsx    |  199 +++
 .../components/platform/TreeContextMenu.tsx   |  125 ++
 .../platform/VersionReceiptModal.tsx          |   54 +
 frontend/app/features/admin/AdminPages.tsx    |    2 +-
 .../platform/ModelPlatformApp copy.tsx        | 1513 +++++++++++++++++
 .../features/platform/ModelPlatformApp.tsx    | 1008 +++--------
 .../app/features/platform/ScriptWorkspace.tsx |    2 +-
 .../app/features/platform/WorkspaceTree.tsx   |    2 +-
 .../app/features/schedules/SchedulePage.tsx   |    2 +-
 17 files changed, 2701 insertions(+), 793 deletions(-)
 rename frontend/app/components/{ => common}/Icon.tsx (100%)
 create mode 100644 frontend/app/components/common/Sidebar.tsx
 create mode 100644 frontend/app/components/common/Toast.tsx
 create mode 100644 frontend/app/components/common/Topbar.tsx
 create mode 100644 frontend/app/components/common/WelcomePanel.tsx
 create mode 100644 frontend/app/components/platform/CreateFolderModal.tsx
 create mode 100644 frontend/app/components/platform/CreateScriptModal.tsx
 create mode 100644 frontend/app/components/platform/PublishModal.tsx
 create mode 100644 frontend/app/components/platform/ScriptExplorer.tsx
 create mode 100644 frontend/app/components/platform/TreeContextMenu.tsx
 create mode 100644 frontend/app/components/platform/VersionReceiptModal.tsx
 create mode 100644 frontend/app/features/platform/ModelPlatformApp copy.tsx

diff --git a/frontend/app/components/Icon.tsx b/frontend/app/components/common/Icon.tsx
similarity index 100%
rename from frontend/app/components/Icon.tsx
rename to frontend/app/components/common/Icon.tsx
diff --git a/frontend/app/components/common/Sidebar.tsx b/frontend/app/components/common/Sidebar.tsx
new file mode 100644
index 0000000..7a4ffc4
--- /dev/null
+++ b/frontend/app/components/common/Sidebar.tsx
@@ -0,0 +1,73 @@
+import Icon from "./Icon";
+
+const navigation = [
+  { label: "工作台", icon: "home" as const, page: "home" as const },
+  { label: "构建脚本", icon: "script" as const, page: "scripts" as const },
+  { label: "调度配置", icon: "schedule" as const, page: "schedules" as const },
+  { label: "系统管理", icon: "settings" as const, page: "system" as const },
+];
+
+type ActivePage = "home" | "scripts" | "schedules" | "system";
+
+type SidebarProps = {
+  activePage: ActivePage;
+  collapsed: boolean;
+  onNavigate: (page: ActivePage) => void;
+  onToggleCollapse: () => void;
+  onEndEditing?: () => void;
+  onSelectScript?: (scriptId: null) => void;
+  editSessionRef?: React.RefObject<unknown | null>;
+};
+
+export function Sidebar({
+  activePage,
+  collapsed,
+  onNavigate,
+  onToggleCollapse,
+  onEndEditing,
+  onSelectScript,
+  editSessionRef,
+}: SidebarProps) {
+  const handleNavigationClick = (page: ActivePage) => {
+    if (page !== "scripts") {
+      if (editSessionRef?.current) {
+        onEndEditing?.();
+      } else {
+        onSelectScript?.(null);
+      }
+    }
+    onNavigate(page);
+  };
+
+  return (
+    <aside className={`sidebar${collapsed ? " is-collapsed" : ""}`}>
+      <div className="brand">
+        <span className="brand__mark"><Icon name="brand" size={31} /></span>
+        {!collapsed && <span className="brand__name">模型实验开发平台</span>}
+      </div>
+
+      {!collapsed && (
+        <nav className="navigation" aria-label="主导航">
+          {navigation.map((item) => (
+            <button
+              className={`nav-item${
+                item.page === activePage ? " nav-item--active" : ""
+              }`}
+              key={item.label}
+              type="button"
+              onClick={() => handleNavigationClick(item.page)}
+            >
+              <Icon name={item.icon} size={19} />
+              <span>{item.label}</span>
+            </button>
+          ))}
+        </nav>
+      )}
+
+      <button className="sidebar-footer" type="button" onClick={onToggleCollapse}>
+        <Icon name="menu" size={19} />
+        <span>{collapsed ? "展开菜单" : "收起菜单"}</span>
+      </button>
+    </aside>
+  );
+}
diff --git a/frontend/app/components/common/Toast.tsx b/frontend/app/components/common/Toast.tsx
new file mode 100644
index 0000000..fa9e26b
--- /dev/null
+++ b/frontend/app/components/common/Toast.tsx
@@ -0,0 +1,23 @@
+import Icon from "./Icon";
+
+type ToastState = {
+  tone: "success" | "error" | "info";
+  message: string;
+};
+
+type ToastProps = {
+  toast: ToastState | null;
+};
+
+export function Toast({ toast }: ToastProps) {
+  if (!toast) return null;
+
+  return (
+    <div className={`toast toast--${toast.tone}`} role="status">
+      <span>
+        <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
+      </span>
+      {toast.message}
+    </div>
+  );
+}
diff --git a/frontend/app/components/common/Topbar.tsx b/frontend/app/components/common/Topbar.tsx
new file mode 100644
index 0000000..538258e
--- /dev/null
+++ b/frontend/app/components/common/Topbar.tsx
@@ -0,0 +1,121 @@
+import Icon from "./Icon";
+import type { AuthUser, AuthWorkspace } from "../../context/AuthContext";
+
+type TopbarProps = {
+  activePage: string;
+  apiOnline: boolean;
+  user: AuthUser | null;
+  currentWorkspace: AuthWorkspace;
+  workspaces: AuthWorkspace[];
+  workspaceMenuOpen: boolean;
+  onSetWorkspaceMenuOpen: (open: boolean) => void;
+  onSetCurrentWorkspace: (workspaceId: string) => void;
+  onLogout: () => void;
+};
+
+export function Topbar({
+  activePage,
+  apiOnline,
+  user,
+  currentWorkspace,
+  workspaces,
+  workspaceMenuOpen,
+  onSetWorkspaceMenuOpen,
+  onSetCurrentWorkspace,
+  onLogout,
+}: TopbarProps) {
+  const pageTitles: Record<string, string> = {
+    home: "工作台",
+    scripts: "构建脚本",
+    schedules: "调度配置",
+    system: "系统管理",
+  };
+
+  return (
+    <header className="topbar">
+      <div className="page-title">
+        <button className="icon-button icon-button--back" type="button">
+          <Icon name="chevron" size={19} />
+        </button>
+        <div>
+          <span className="page-title__eyebrow">开发工作区</span>
+          <h1>{pageTitles[activePage] || "工作台"}</h1>
+        </div>
+      </div>
+      <div className="topbar__actions">
+        <div className="api-state">
+          <span className={`api-state__dot${apiOnline ? " is-online" : ""}`} />
+          {apiOnline ? "服务已连接" : "服务未连接"}
+        </div>
+        <div className="topbar-menu-wrap">
+          <button
+            className="workspace-switcher"
+            type="button"
+            onClick={() => onSetWorkspaceMenuOpen(!workspaceMenuOpen)}
+          >
+            <span className="workspace-switcher__icon">
+              <Icon name="workspace" size={18} />
+            </span>
+            <span>
+              <small>当前 Workspace</small>
+              <strong>{currentWorkspace.workspace_name}</strong>
+            </span>
+            <Icon name="chevron" size={15} />
+          </button>
+          {workspaceMenuOpen && (
+            <div className="topbar-dropdown">
+              {workspaces.map((workspace) => (
+                <button
+                  className={
+                    workspace.workspace_id === currentWorkspace.workspace_id
+                      ? "is-selected"
+                      : ""
+                  }
+                  type="button"
+                  key={workspace.workspace_id}
+                  onClick={() => {
+                    onSetCurrentWorkspace(workspace.workspace_id);
+                    onSetWorkspaceMenuOpen(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">
+            <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={() => {
+              onLogout();
+              window.location.assign("/login");
+            }}
+          >
+            登出
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/app/components/common/WelcomePanel.tsx b/frontend/app/components/common/WelcomePanel.tsx
new file mode 100644
index 0000000..a7e0336
--- /dev/null
+++ b/frontend/app/components/common/WelcomePanel.tsx
@@ -0,0 +1,24 @@
+import Icon from "./Icon";
+
+type WelcomePanelProps = {
+  onCreateScript: () => void;
+};
+
+export function WelcomePanel({ onCreateScript }: WelcomePanelProps) {
+  return (
+    <div className="welcome-panel">
+      <div className="welcome-panel__visual">
+        <Icon name="script" size={42} />
+      </div>
+      <span className="welcome-panel__label">构建脚本工作台</span>
+      <h2>创建你的第一个模型脚本</h2>
+      <p>
+        通过 Notebook 完成数据探索，或使用 Python 脚本构建可调度的处理任务。
+      </p>
+      <button className="primary-button" onClick={onCreateScript}>
+        <Icon name="plus" size={17} />
+        新建构建脚本
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/app/components/platform/CreateFolderModal.tsx b/frontend/app/components/platform/CreateFolderModal.tsx
new file mode 100644
index 0000000..7a9ac44
--- /dev/null
+++ b/frontend/app/components/platform/CreateFolderModal.tsx
@@ -0,0 +1,80 @@
+import { type FormEvent } from "react";
+import Icon from "../common/Icon";
+
+type CreateFolderModalProps = {
+  open: boolean;
+  parentPath: string;
+  name: string;
+  busy: boolean;
+  onNameChange: (name: string) => void;
+  onSubmit: (event: FormEvent) => void;
+  onClose: () => void;
+};
+
+export function CreateFolderModal({
+  open,
+  parentPath,
+  name,
+  busy,
+  onNameChange,
+  onSubmit,
+  onClose,
+}: CreateFolderModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal modal--compact" role="dialog" aria-modal="true">
+        <div className="modal__header">
+          <div>
+            <span className="modal__eyebrow">WORKSPACE</span>
+            <h2>新建文件夹</h2>
+          </div>
+          <button
+            className="icon-button"
+            type="button"
+            aria-label="关闭"
+            onClick={onClose}
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+        <form onSubmit={onSubmit}>
+          <div className="destination-chip">
+            <Icon name="folder" size={16} />
+            创建到：{parentPath || "个人根目录"}
+          </div>
+          <label className="form-field">
+            <span>文件夹名称</span>
+            <input
+              autoFocus
+              maxLength={255}
+              placeholder="例如：模型训练"
+              value={name}
+              onChange={(event) => onNameChange(event.target.value)}
+            />
+          </label>
+          <div className="modal__footer">
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onClose}
+            >
+              取消
+            </button>
+            <button
+              className="primary-button"
+              type="submit"
+              disabled={busy || !name.trim()}
+            >
+              {busy
+                ? <span className="button-spinner" />
+                : <Icon name="folder" size={16} />}
+              {busy ? "正在创建…" : "创建文件夹"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
diff --git a/frontend/app/components/platform/CreateScriptModal.tsx b/frontend/app/components/platform/CreateScriptModal.tsx
new file mode 100644
index 0000000..9c8a919
--- /dev/null
+++ b/frontend/app/components/platform/CreateScriptModal.tsx
@@ -0,0 +1,165 @@
+import { type FormEvent } from "react";
+import Icon from "../common/Icon";
+import type { ScriptType, Visibility } from "../../services/api";
+
+type NewScriptForm = {
+  name: string;
+  scriptType: ScriptType;
+  visibility: Visibility;
+  parentPath: string;
+};
+
+type CreateScriptModalProps = {
+  open: boolean;
+  creating: boolean;
+  form: NewScriptForm;
+  scripts: Array<{ script_type: ScriptType; script_name: string }>;
+  onFormChange: (form: NewScriptForm) => void;
+  onSubmit: (event: FormEvent) => void;
+  onClose: () => void;
+};
+
+export function CreateScriptModal({
+  open,
+  creating,
+  form,
+  scripts,
+  onFormChange,
+  onSubmit,
+  onClose,
+}: CreateScriptModalProps) {
+  if (!open) return null;
+
+  const suffix = form.scriptType === "notebook" ? ".ipynb" : ".py";
+  const requestedName = form.name.trim();
+  const normalizedName = requestedName.toLocaleLowerCase().endsWith(suffix)
+    ? requestedName
+    : `${requestedName}${suffix}`;
+  const duplicate = scripts.some((script) =>
+    script.script_type === form.scriptType
+    && script.script_name.toLocaleLowerCase() === normalizedName.toLocaleLowerCase()
+  );
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal" role="dialog" aria-modal="true">
+        <div className="modal__header">
+          <div>
+            <span className="modal__eyebrow">工作副本</span>
+            <h2>新建构建脚本</h2>
+          </div>
+          <button
+            className="icon-button"
+            type="button"
+            aria-label="关闭"
+            onClick={onClose}
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+        <form onSubmit={onSubmit}>
+          <div className="destination-chip">
+            <Icon name="folder" size={16} />
+            保存到：{form.parentPath || "个人根目录"}
+          </div>
+          <label className="form-field">
+            <span>脚本名称</span>
+            <input
+              autoFocus
+              maxLength={255}
+              placeholder={form.scriptType === "notebook"
+                ? "例如：数据探索"
+                : "例如：data_process"}
+              value={form.name}
+              onChange={(event) =>
+                onFormChange({
+                  ...form,
+                  name: event.target.value,
+                })}
+            />
+            <small>
+              系统会自动补充
+              {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
+            </small>
+          </label>
+
+          <fieldset className="type-picker">
+            <legend>脚本类型</legend>
+            <button
+              className={form.scriptType === "notebook" ? "is-selected" : ""}
+              type="button"
+              onClick={() => onFormChange({
+                ...form,
+                scriptType: "notebook",
+              })}
+            >
+              <span className="type-picker__icon type-picker__icon--notebook">
+                <Icon name="notebook" size={22} />
+              </span>
+              <span>
+                <strong>Jupyter Notebook</strong>
+                <small>交互式数据探索与模型实验</small>
+              </span>
+              <span className="type-picker__check">
+                <Icon name="check" size={14} />
+              </span>
+            </button>
+            <button
+              className={form.scriptType === "python" ? "is-selected" : ""}
+              type="button"
+              onClick={() => onFormChange({
+                ...form,
+                scriptType: "python",
+              })}
+            >
+              <span className="type-picker__icon type-picker__icon--python">
+                <Icon name="python" size={23} />
+              </span>
+              <span>
+                <strong>Python 脚本</strong>
+                <small>批处理、训练和模型调用任务</small>
+              </span>
+              <span className="type-picker__check">
+                <Icon name="check" size={14} />
+              </span>
+            </button>
+          </fieldset>
+
+          <label className="form-field">
+            <span>可见范围</span>
+            <select
+              value={form.visibility}
+              onChange={(event) =>
+                onFormChange({
+                  ...form,
+                  visibility: event.target.value as Visibility,
+                })}
+            >
+              <option value="private">仅自己可见</option>
+              <option value="workspace">Workspace 成员可见</option>
+              <option value="public">公开</option>
+            </select>
+          </label>
+
+          <div className="modal__footer">
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onClose}
+            >
+              取消
+            </button>
+            <button
+              className="primary-button"
+              type="submit"
+              disabled={creating || !form.name.trim()}
+            >
+              {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
+              {creating ? "正在创建…" : "创建脚本"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
diff --git a/frontend/app/components/platform/PublishModal.tsx b/frontend/app/components/platform/PublishModal.tsx
new file mode 100644
index 0000000..867a9fe
--- /dev/null
+++ b/frontend/app/components/platform/PublishModal.tsx
@@ -0,0 +1,101 @@
+import { type FormEvent } from "react";
+import Icon from "../common/Icon";
+import type { ScriptItem, Visibility } from "../../services/api";
+import { scriptIcon } from "../../features/platform/WorkspaceTree";
+
+type PublishModalProps = {
+  publishTarget: ScriptItem | null;
+  releaseNote: string;
+  publishVisibility: Visibility;
+  publishing: boolean;
+  onReleaseNoteChange: (note: string) => void;
+  onPublishVisibilityChange: (visibility: Visibility) => void;
+  onSubmit: (event: FormEvent) => void;
+  onClose: () => void;
+};
+
+export function PublishModal({
+  publishTarget,
+  releaseNote,
+  publishVisibility,
+  publishing,
+  onReleaseNoteChange,
+  onPublishVisibilityChange,
+  onSubmit,
+  onClose,
+}: PublishModalProps) {
+  if (!publishTarget) return null;
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal publish-modal" role="dialog" aria-modal="true">
+        <div className="modal__header">
+          <div>
+            <span className="modal__eyebrow">不可变制品</span>
+            <h2>发布稳定版本</h2>
+          </div>
+          <button
+            className="icon-button"
+            type="button"
+            aria-label="关闭"
+            onClick={onClose}
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+        <form onSubmit={onSubmit}>
+          <div className="publish-source">
+            <span className={`file-icon file-icon--${publishTarget.script_type}`}>
+              <Icon name={scriptIcon(publishTarget)} size={18} />
+            </span>
+            <span>
+              <strong>{publishTarget.script_name}</strong>
+              <small>当前 Workspace 工作副本</small>
+            </span>
+          </div>
+          <label className="form-field">
+            <span>发布说明</span>
+            <textarea
+              maxLength={1000}
+              placeholder="例如：完成数据清洗和特征工程"
+              value={releaseNote}
+              onChange={(event) => onReleaseNoteChange(event.target.value)}
+            />
+            <small>稳定版本内容不可修改，可作为后续调度节点输入。</small>
+          </label>
+          <label className="form-field">
+            <span>可见范围</span>
+            <select
+              value={publishVisibility}
+              onChange={(event) =>
+                onPublishVisibilityChange(event.target.value as Visibility)}
+            >
+              <option value="private">仅自己可见</option>
+              <option value="workspace">Workspace 成员可见</option>
+              <option value="public">公开</option>
+            </select>
+          </label>
+          <div className="modal__footer">
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onClose}
+            >
+              取消
+            </button>
+            <button
+              className="primary-button"
+              type="submit"
+              disabled={publishing}
+            >
+              {publishing
+                ? <span className="button-spinner" />
+                : <Icon name="release" size={16} />}
+              {publishing ? "正在发布…" : "确认发布"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
diff --git a/frontend/app/components/platform/ScriptExplorer.tsx b/frontend/app/components/platform/ScriptExplorer.tsx
new file mode 100644
index 0000000..eb6eac3
--- /dev/null
+++ b/frontend/app/components/platform/ScriptExplorer.tsx
@@ -0,0 +1,199 @@
+import { type ChangeEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
+import Icon from "../common/Icon";
+import { WorkspaceTreeGroup } from "../../features/platform/WorkspaceTree";
+import type { ScriptItem, WorkspaceDirectory } from "../../services/api";
+import type { AuthUser } from "../../context/AuthContext";
+
+type ScriptExplorerProps = {
+  scripts: ScriptItem[];
+  filteredScripts: ScriptItem[];
+  directories: WorkspaceDirectory[];
+  user: AuthUser | null;
+  selectedId: string | null;
+  loading: boolean;
+  refreshing: boolean;
+  uploading: boolean;
+  keyword: string;
+  onKeywordChange: (keyword: string) => void;
+  onRefresh: () => void;
+  onUpload: () => void;
+  onOpenCreateDialog: (parentPath?: string, scriptType?: "notebook" | "python") => void;
+  onOpenFolderDialog: (parentPath?: string) => void;
+  onChooseUpload: (parentPath?: string) => void;
+  onContextMenu: (
+    event: ReactMouseEvent,
+    target: { kind: "root" | "directory" | "file"; path: string; script?: ScriptItem }
+  ) => void;
+  onSelect: (scriptId: string) => void;
+  uploadInputRef: RefObject<HTMLInputElement | null>;
+  onHandleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export function ScriptExplorer({
+  scripts,
+  filteredScripts,
+  directories,
+  user,
+  selectedId,
+  loading,
+  refreshing,
+  uploading,
+  keyword,
+  onKeywordChange,
+  onRefresh,
+  onUpload,
+  onOpenCreateDialog,
+  onOpenFolderDialog,
+  onChooseUpload,
+  onContextMenu,
+  onSelect,
+  uploadInputRef,
+  onHandleUpload,
+}: ScriptExplorerProps) {
+  const memberScriptGroups = (() => {
+    const currentUserScripts = filteredScripts.filter(
+      (item) => item.owner_user_id === user?.user_id,
+    );
+    const inferred = inferredDirectories(currentUserScripts);
+    return [{
+      user: user,
+      scripts: currentUserScripts,
+      directories: mergeDirectories(directories, inferred),
+    }];
+  })();
+
+  return (
+    <aside className="explorer">
+      <div className="explorer__header">
+        <div>
+          <h2>脚本目录</h2>
+          <span>{scripts.length} 个工作副本</span>
+        </div>
+        <div className="explorer__actions">
+          <button
+            className="text-button"
+            type="button"
+            disabled={uploading}
+            onClick={onUpload}
+          >
+            <Icon name="upload" size={15} />
+            {uploading ? "上传中…" : "上传"}
+          </button>
+          <input
+            ref={uploadInputRef}
+            className="visually-hidden"
+            type="file"
+            accept=".py,.ipynb"
+            multiple
+            onChange={onHandleUpload}
+          />
+          <button
+            className="text-button"
+            type="button"
+            onClick={() => onOpenCreateDialog()}
+          >
+            <Icon name="plus" size={16} />
+            新建
+          </button>
+        </div>
+      </div>
+
+      <div className="search-box">
+        <Icon name="search" size={17} />
+        <input
+          aria-label="搜索脚本"
+          placeholder="搜索脚本名称"
+          value={keyword}
+          onChange={(event) => onKeywordChange(event.target.value)}
+        />
+        <button
+          className={refreshing ? "is-spinning" : ""}
+          type="button"
+          aria-label="刷新脚本"
+          onClick={onRefresh}
+        >
+          <Icon name="refresh" size={16} />
+        </button>
+      </div>
+
+      <div className="tree-scroll">
+        {loading ? (
+          <div className="tree-skeleton">
+            <span /><span /><span /><span />
+          </div>
+        ) : (
+          <>
+            {memberScriptGroups.map((group) => (
+              <WorkspaceTreeGroup
+                key={group.user?.user_id ?? "anon"}
+                title={`${group.user?.display_name}的文件`}
+                scripts={group.scripts}
+                directories={group.directories}
+                selectedId={selectedId}
+                onSelect={onSelect}
+                onContextMenu={
+                  group.user?.user_id === user?.user_id
+                    ? onContextMenu
+                    : undefined
+                }
+                readOnly={group.user?.user_id !== user?.user_id}
+              />
+            ))}
+            {filteredScripts.length === 0 && (
+              <div className="tree-empty">
+                <span className="tree-empty__icon">
+                  <Icon name="script" size={24} />
+                </span>
+                <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
+                <p>
+                  {keyword
+                    ? "换个关键词试试"
+                    : "新建 Notebook 或 Python 脚本开始实验"}
+                </p>
+                {!keyword && (
+                  <button type="button" onClick={() => onOpenCreateDialog()}>
+                    <Icon name="plus" size={15} />
+                    新建脚本
+                  </button>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function parentOf(path: string) {
+  const parts = path.split("/");
+  parts.pop();
+  return parts.join("/");
+}
+
+function ownedScriptPath(item: ScriptItem) {
+  return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
+}
+
+function inferredDirectories(items: ScriptItem[]): WorkspaceDirectory[] {
+  const result = new Map<string, WorkspaceDirectory>();
+  for (const item of items) {
+    const parts = parentOf(ownedScriptPath(item)).split("/").filter(Boolean);
+    let parentPath = "";
+    for (const name of parts) {
+      const path = parentPath ? `${parentPath}/${name}` : name;
+      result.set(path, { path, name, parent_path: parentPath });
+      parentPath = path;
+    }
+  }
+  return [...result.values()];
+}
+
+function mergeDirectories(
+  left: WorkspaceDirectory[],
+  right: WorkspaceDirectory[],
+): WorkspaceDirectory[] {
+  return [...new Map(
+    [...left, ...right].map((item) => [item.path, item]),
+  ).values()];
+}
diff --git a/frontend/app/components/platform/TreeContextMenu.tsx b/frontend/app/components/platform/TreeContextMenu.tsx
new file mode 100644
index 0000000..014fceb
--- /dev/null
+++ b/frontend/app/components/platform/TreeContextMenu.tsx
@@ -0,0 +1,125 @@
+import Icon from "../common/Icon";
+import type { ScriptItem, ScriptType } from "../../services/api";
+
+type ContextMenuState = {
+  x: number;
+  y: number;
+  kind: "root" | "directory" | "file";
+  path: string;
+  script?: ScriptItem;
+};
+
+type TreeContextMenuProps = {
+  contextMenu: ContextMenuState | null;
+  onOpenScript: (scriptId: string) => void;
+  onRemoveScript: (script: ScriptItem) => void;
+  onOpenCreateDialog: (parentPath: string, scriptType: ScriptType) => void;
+  onOpenFolderDialog: (parentPath: string) => void;
+  onChooseUpload: (parentPath: string) => void;
+  onRemoveDirectory: (path: string) => void;
+  onClose: () => void;
+};
+
+export function TreeContextMenu({
+  contextMenu,
+  onOpenScript,
+  onRemoveScript,
+  onOpenCreateDialog,
+  onOpenFolderDialog,
+  onChooseUpload,
+  onRemoveDirectory,
+  onClose,
+}: TreeContextMenuProps) {
+  if (!contextMenu) return null;
+
+  const width = 188;
+  const height = contextMenu.kind === "file" ? 92 : 190;
+
+  return (
+    <div
+      className="tree-context-menu"
+      role="menu"
+      style={{
+        left: contextMenu.x,
+        top: contextMenu.y,
+        position: "fixed",
+        zIndex: 1000,
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {contextMenu.kind === "file" && contextMenu.script ? (
+        <>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => {
+              onOpenScript(contextMenu.script!.script_id);
+              onClose();
+            }}
+          >
+            <Icon name="script" size={16} />
+            打开文件
+          </button>
+          <button
+            className="is-danger"
+            type="button"
+            role="menuitem"
+            onClick={() => onRemoveScript(contextMenu.script!)}
+          >
+            <Icon name="close" size={16} />
+            删除文件
+          </button>
+        </>
+      ) : (
+        <>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => onOpenCreateDialog(contextMenu.path, "notebook")}
+          >
+            <Icon name="notebook" size={16} />
+            新建 Notebook
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => onOpenCreateDialog(contextMenu.path, "python")}
+          >
+            <Icon name="python" size={16} />
+            新建 Python 文件
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => onOpenFolderDialog(contextMenu.path)}
+          >
+            <Icon name="folder" size={16} />
+            新建文件夹
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => onChooseUpload(contextMenu.path)}
+          >
+            <Icon name="upload" size={16} />
+            上传到此处
+          </button>
+          {contextMenu.kind === "directory" && (
+            <>
+              <span className="tree-context-menu__separator" />
+              <button
+                className="is-danger"
+                type="button"
+                role="menuitem"
+                onClick={() => onRemoveDirectory(contextMenu.path)}
+              >
+                <Icon name="close" size={16} />
+                删除文件夹
+              </button>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/components/platform/VersionReceiptModal.tsx b/frontend/app/components/platform/VersionReceiptModal.tsx
new file mode 100644
index 0000000..1b7a37f
--- /dev/null
+++ b/frontend/app/components/platform/VersionReceiptModal.tsx
@@ -0,0 +1,54 @@
+import Icon from "../common/Icon";
+import type { StableVersion } from "../../services/api";
+
+type VersionReceiptModalProps = {
+  publishedVersion: StableVersion | null;
+  onClose: () => void;
+  onCopy: (text: string) => void;
+};
+
+export function VersionReceiptModal({
+  publishedVersion,
+  onClose,
+  onCopy,
+}: VersionReceiptModalProps) {
+  if (!publishedVersion) return null;
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal version-receipt" role="dialog" aria-modal="true">
+        <div className="version-receipt__check">
+          <Icon name="check" size={28} />
+        </div>
+        <span className="modal__eyebrow">STABLE VERSION</span>
+        <h2>稳定版本发布成功</h2>
+        <p>
+          {publishedVersion.version_label} 已成为不可变制品，
+          后续调度将通过 versions_id 引用它。
+        </p>
+        <div className="version-id-box">
+          <span>versions_id</span>
+          <code>{publishedVersion.versions_id}</code>
+          <button
+            type="button"
+            onClick={() => {
+              void navigator.clipboard.writeText(
+                publishedVersion.versions_id,
+              );
+              onCopy("versions_id 已复制");
+            }}
+          >
+            复制
+          </button>
+        </div>
+        <button
+          className="primary-button version-receipt__close"
+          type="button"
+          onClick={onClose}
+        >
+          完成
+        </button>
+      </section>
+    </div>
+  );
+}
diff --git a/frontend/app/features/admin/AdminPages.tsx b/frontend/app/features/admin/AdminPages.tsx
index 5fe192a..006dd69 100644
--- a/frontend/app/features/admin/AdminPages.tsx
+++ b/frontend/app/features/admin/AdminPages.tsx
@@ -5,7 +5,7 @@ import {
   type Employee,
 } from "../../services/api";
 import { useApi, useAuth } from "../../context/AuthContext";
-import Icon from "../../components/Icon";
+import Icon from "../../components/common/Icon";
 import "../../styles/admin.css";
 import "../../styles/dashboard.css";
 import "../../styles/platform.css";
diff --git a/frontend/app/features/platform/ModelPlatformApp copy.tsx b/frontend/app/features/platform/ModelPlatformApp copy.tsx
new file mode 100644
index 0000000..ce6500a
--- /dev/null
+++ b/frontend/app/features/platform/ModelPlatformApp copy.tsx	
@@ -0,0 +1,1513 @@
+import {
+  type ChangeEvent,
+  type FormEvent,
+  type MouseEvent as ReactMouseEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useLocation, useNavigate } from "react-router";
+
+import {
+  type ActiveEditSession,
+  type LatestVersion,
+  type ScriptItem,
+  type ScriptType,
+  type StableVersion,
+  type Visibility,
+  type WorkspaceDirectory,
+} from "../../services/api";
+import { useApi, useAuth } from "../../context/AuthContext";
+import Icon from "../../components/common/Icon";
+import SchedulePage from "../schedules/SchedulePage";
+import { DashboardPage, SystemAdminPage } from "../admin/AdminPages";
+import "../../styles/platform.css";
+import { WorkspaceTreeGroup, scriptIcon } from "./WorkspaceTree";
+import { ScriptWorkspace } from "./ScriptWorkspace";
+
+
+type NewScriptForm = {
+  name: string;
+  scriptType: ScriptType;
+  visibility: Visibility;
+  parentPath: string;
+};
+
+type ContextMenuState = {
+  x: number;
+  y: number;
+  kind: "root" | "directory" | "file";
+  path: string;
+  script?: ScriptItem;
+};
+
+type ToastState = {
+  tone: "success" | "error" | "info";
+  message: string;
+};
+
+const navigation = [
+  { label: "工作台", icon: "home" as const, page: "home" as const },
+  { label: "构建脚本", icon: "script" as const, page: "scripts" as const },
+  { label: "调度配置", icon: "schedule" as const, page: "schedules" as const },
+  { label: "系统管理", icon: "settings" as const, page: "system" as const },
+];
+
+type ActivePage = "home" | "scripts" | "schedules" | "system";
+
+function pageFromPath(pathname: string): ActivePage {
+  const page = pathname.replace(/^\/+|\/+$/g, "");
+  return ["scripts", "schedules", "system"].includes(page)
+    ? page as ActivePage
+    : "home";
+}
+
+function pathForPage(page: ActivePage): string {
+  return page === "home" ? "/workbench" : `/${page}`;
+}
+
+const initialForm: NewScriptForm = {
+  name: "",
+  scriptType: "notebook",
+  visibility: "workspace",
+  parentPath: "",
+};
+
+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("/");
+}
+
+function inferredDirectories(items: ScriptItem[]): WorkspaceDirectory[] {
+  const result = new Map<string, WorkspaceDirectory>();
+  for (const item of items) {
+    const parts = parentOf(ownedScriptPath(item)).split("/").filter(Boolean);
+    let parentPath = "";
+    for (const name of parts) {
+      const path = parentPath ? `${parentPath}/${name}` : name;
+      result.set(path, { path, name, parent_path: parentPath });
+      parentPath = path;
+    }
+  }
+  return [...result.values()];
+}
+
+function mergeDirectories(
+  left: WorkspaceDirectory[],
+  right: WorkspaceDirectory[],
+): WorkspaceDirectory[] {
+  return [...new Map(
+    [...left, ...right].map((item) => [item.path, item]),
+  ).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);
+  const [openTabIds, setOpenTabIds] = useState<string[]>([]);
+  const [keyword, setKeyword] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [apiOnline, setApiOnline] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState<NewScriptForm>(initialForm);
+  const [folderDialog, setFolderDialog] = useState<{
+    open: boolean;
+    parentPath: string;
+    name: string;
+    busy: boolean;
+  }>({ open: false, parentPath: "", name: "", busy: false });
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
+  const [uploadParentPath, setUploadParentPath] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const [toast, setToast] = useState<ToastState | null>(null);
+  const [editSession, setEditSession] = useState<ActiveEditSession | null>(null);
+  const editSessionRef = useRef<ActiveEditSession | null>(null);
+  const selectedIdRef = useRef<string | null>(null);
+  const editorOpenRequestRef = useRef(0);
+  const editorOpeningRef = useRef(false);
+  const [embeddedJupyterUrl, setEmbeddedJupyterUrl] =
+    useState<string | null>(null);
+  const [editBusy, setEditBusy] = useState(false);
+  const [editorOpenError, setEditorOpenError] = useState<{
+    scriptId: string;
+    message: string;
+  } | null>(null);
+  const [latestVersion, setLatestVersion] = useState<LatestVersion | null>(
+    null,
+  );
+  const [latestVersionLoading, setLatestVersionLoading] = useState(false);
+  const [publishTarget, setPublishTarget] = useState<ScriptItem | null>(null);
+  const [releaseNote, setReleaseNote] = useState("");
+  const [publishVisibility, setPublishVisibility] =
+    useState<Visibility>("workspace");
+  const [publishing, setPublishing] = useState(false);
+  const [publishedVersion, setPublishedVersion] =
+    useState<StableVersion | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const load = async (silent = false) => {
+    if (!silent) setLoading(true);
+    setRefreshing(silent);
+    try {
+      const [items, folderItems] = await Promise.all([
+        api.listScripts(),
+        api.listWorkspaceDirectories(),
+      ]);
+      setScripts(items);
+      setDirectories(folderItems);
+      setApiOnline(true);
+      setSelectedId((current) => {
+        if (current && items.some((item) => item.script_id === current)) {
+          selectedIdRef.current = current;
+          return current;
+        }
+        const nextSelectedId = (
+          items.find((item) => item.script_type === "notebook")?.script_id
+          ?? items[0]?.script_id
+          ?? null
+        );
+        selectedIdRef.current = nextSelectedId;
+        return nextSelectedId;
+      });
+    } catch (error) {
+      setApiOnline(false);
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "脚本列表加载失败",
+      });
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  useEffect(() => {
+    if (!toast) return;
+    const timer = window.setTimeout(() => setToast(null), 3200);
+    return () => window.clearTimeout(timer);
+  }, [toast]);
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const close = () => setContextMenu(null);
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("blur", close);
+    window.addEventListener("resize", close);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("keydown", closeOnEscape);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("blur", close);
+      window.removeEventListener("resize", close);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [contextMenu]);
+
+  useEffect(() => {
+    editSessionRef.current = editSession;
+  }, [editSession]);
+
+  useEffect(() => {
+    if (!selectedId) {
+      setLatestVersion(null);
+      return;
+    }
+    let ignore = false;
+    setLatestVersionLoading(true);
+    void api.getLatestScriptVersion(selectedId)
+      .then((item) => {
+        if (!ignore) setLatestVersion(item);
+      })
+      .catch((error) => {
+        if (!ignore) {
+          setToast({
+            tone: "error",
+            message:
+              error instanceof Error
+                ? error.message
+                : "最新版本加载失败",
+          });
+        }
+      })
+      .finally(() => {
+        if (!ignore) setLatestVersionLoading(false);
+      });
+    return () => {
+      ignore = true;
+    };
+  }, [selectedId]);
+
+  useEffect(() => {
+    if (!editSession) return;
+    const intervalSeconds = Math.max(
+      5,
+      editSession.heartbeat_interval_seconds || 15,
+    );
+    let heartbeatRunning = false;
+    const timer = window.setInterval(() => {
+      if (heartbeatRunning) return;
+      const current = editSessionRef.current;
+      if (!current || current.edit_session_id !== editSession.edit_session_id) {
+        return;
+      }
+      heartbeatRunning = true;
+      void api.heartbeatFileLock(current)
+        .then((updated) => {
+          setEditSession((active) => active
+            && active.edit_session_id === updated.edit_session_id
+            ? {
+                ...active,
+                session_status: updated.session_status,
+                expires_at: updated.expires_at,
+              }
+            : active);
+        })
+        .catch((error) => {
+          setEditSession(null);
+          setEmbeddedJupyterUrl(null);
+          setToast({
+            tone: "error",
+            message: `编辑锁心跳已中断：${
+              error instanceof Error ? error.message : "请重新打开文件"
+            }`,
+          });
+        })
+        .finally(() => {
+          heartbeatRunning = false;
+        });
+    }, intervalSeconds * 1000);
+    return () => window.clearInterval(timer);
+  }, [editSession?.edit_session_id, editSession?.heartbeat_interval_seconds]);
+
+  useEffect(() => {
+    if (!editSession?.ticket_expires_at) return;
+    const expiresAt = new Date(editSession.ticket_expires_at).getTime();
+    const renewAfter = Math.max(15_000, expiresAt - Date.now() - 60_000);
+    const timer = window.setTimeout(() => {
+      const current = editSessionRef.current;
+      if (!current || current.edit_session_id !== editSession.edit_session_id) {
+        return;
+      }
+      void api.createJupyterAccessTicket(current)
+        .then((ticket) => {
+          setEditSession((active) => active
+            && active.edit_session_id === ticket.edit_session_id
+            ? { ...active, ticket_expires_at: ticket.expires_at }
+            : active);
+        })
+        .catch((error) => {
+          setToast({
+            tone: "error",
+            message: `Jupyter 访问票据续签失败：${
+              error instanceof Error ? error.message : "请重新打开文件"
+            }`,
+          });
+        });
+    }, renewAfter);
+    return () => window.clearTimeout(timer);
+  }, [editSession?.edit_session_id, editSession?.ticket_expires_at]);
+
+  useEffect(() => {
+    if (!editSession) return;
+    const handleUnload = () => {
+      const current = editSessionRef.current;
+      if (current) api.releaseFileLockOnUnload(current);
+    };
+    window.addEventListener("beforeunload", handleUnload);
+    return () => window.removeEventListener("beforeunload", handleUnload);
+  }, [editSession?.edit_session_id]);
+
+  const filteredScripts = useMemo(() => {
+    const normalized = keyword.trim().toLocaleLowerCase();
+    if (!normalized) return scripts;
+    return scripts.filter((item) =>
+      item.script_name.toLocaleLowerCase().includes(normalized),
+    );
+  }, [keyword, scripts]);
+
+  const memberScriptGroups = (() => {
+    const currentUserScripts = filteredScripts.filter(
+      (item) => item.owner_user_id === user?.user_id,
+    );
+    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) => {
+    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 (
+    script: ScriptItem,
+    showToast = true,
+  ) => {
+    if (editorOpeningRef.current) return;
+    editorOpeningRef.current = true;
+    const requestId = editorOpenRequestRef.current + 1;
+    editorOpenRequestRef.current = requestId;
+    const requestIsCurrent = () =>
+      editorOpenRequestRef.current === requestId
+      && selectedIdRef.current === script.script_id;
+    const clearSessionIfActive = (session: ActiveEditSession) => {
+      if (
+        editSessionRef.current?.edit_session_id === session.edit_session_id
+      ) {
+        setEmbeddedJupyterUrl(null);
+        setEditSession(null);
+        editSessionRef.current = null;
+      }
+    };
+
+    setEditBusy(true);
+    setEditorOpenError((current) =>
+      current?.scriptId === script.script_id ? null : current);
+    let active = editSessionRef.current;
+    let newlyAcquired = false;
+    try {
+      if (active && active.script_id !== script.script_id) {
+        await api.releaseFileLock(active);
+        setEmbeddedJupyterUrl(null);
+        setEditSession(null);
+        editSessionRef.current = null;
+        active = null;
+      }
+      if (!requestIsCurrent()) return;
+
+      if (!active) {
+        active = await api.acquireFileLock(script);
+        newlyAcquired = true;
+      }
+      if (!requestIsCurrent()) {
+        if (active) {
+          await api.releaseFileLock(active);
+          clearSessionIfActive(active);
+        }
+        return;
+      }
+
+      const ticket = await api.createJupyterAccessTicket(active);
+      if (!requestIsCurrent()) {
+        await api.releaseFileLock(active);
+        clearSessionIfActive(active);
+        return;
+      }
+
+      const readySession = {
+        ...active,
+        ticket_expires_at: ticket.expires_at,
+      };
+      setEditSession(readySession);
+      editSessionRef.current = readySession;
+      setEmbeddedJupyterUrl(ticket.jupyter_url);
+      if (showToast) {
+        setToast({
+          tone: "success",
+          message: `${script.script_name} 已打开，Jupyter 已嵌入当前工作区`,
+        });
+      }
+    } catch (error) {
+      if (newlyAcquired && active) {
+        try {
+          await api.releaseFileLock(active);
+        } catch {
+          // The database lease is the final safety net if compensation cannot reach Runtime.
+        }
+        setEditSession(null);
+        editSessionRef.current = null;
+      }
+      setEmbeddedJupyterUrl(null);
+      if (requestIsCurrent()) {
+        const message = error instanceof Error ? error.message : "打开编辑器失败";
+        setEditorOpenError({ scriptId: script.script_id, message });
+        if (showToast) {
+          setToast({ tone: "error", message });
+        }
+      }
+    } finally {
+      editorOpeningRef.current = false;
+      setEditBusy(false);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      activePage !== "scripts"
+      || !selected
+      || selected.script_type !== "notebook"
+      || editBusy
+      || editorOpenError?.scriptId === selected.script_id
+      || (
+        editSession?.script_id === selected.script_id
+        && embeddedJupyterUrl
+      )
+    ) {
+      return;
+    }
+
+    void openScriptEditor(selected, false);
+  }, [
+    activePage,
+    editBusy,
+    editSession?.script_id,
+    editorOpenError?.scriptId,
+    embeddedJupyterUrl,
+    selected?.script_id,
+    selected?.script_type,
+  ]);
+
+  const endEditing = async (closeTabFlag = true, showToast = true) => {
+    editorOpenRequestRef.current += 1;
+    setEditorOpenError(null);
+    const active = editSessionRef.current;
+    const scriptId = active?.script_id;
+    if (!active) {
+      if (closeTabFlag && scriptId) {
+        void closeTab(scriptId);
+      }
+      return;
+    }
+    setEditBusy(true);
+    try {
+      await api.releaseFileLock(active);
+      setEmbeddedJupyterUrl(null);
+      setEditSession(null);
+      editSessionRef.current = null;
+      if (closeTabFlag && scriptId) {
+        void closeTab(scriptId);
+      }
+      if (showToast) {
+        setToast({
+          tone: "success",
+          message: `${active.script_name} 的编辑锁已释放`,
+        });
+      }
+    } catch (error) {
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "释放编辑锁失败",
+      });
+    } finally {
+      setEditBusy(false);
+    }
+  };
+
+  useEffect(() => {
+    const active = editSessionRef.current;
+    if (
+      !active
+      || !selected
+      || selected.script_type === "notebook"
+      || selected.script_id === active.script_id
+      || editBusy
+    ) {
+      return;
+    }
+    void endEditing(false, false);
+  }, [editBusy, selected?.script_id, selected?.script_type]);
+
+  useEffect(() => {
+    if (
+      activePage === "scripts"
+      || editBusy
+      || (!editSessionRef.current && !editorOpeningRef.current)
+    ) {
+      return;
+    }
+    void endEditing(true, false);
+  }, [activePage, editBusy]);
+
+  const openPublishDialog = (script: ScriptItem) => {
+    setPublishTarget(script);
+    setReleaseNote("");
+    setPublishVisibility(
+      script.visibility === "private" ? "private" : "workspace",
+    );
+  };
+
+  const submitPublish = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!publishTarget) return;
+    setPublishing(true);
+    try {
+      const version = await api.publishScriptVersion({
+        script: publishTarget,
+        releaseNote,
+        visibility: publishVisibility,
+      });
+      setPublishTarget(null);
+      setPublishedVersion(version);
+      setToast({
+        tone: "success",
+        message: `${version.version_label} 稳定版本发布成功`,
+      });
+    } catch (error) {
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "稳定版本发布失败",
+      });
+    } finally {
+      setPublishing(false);
+    }
+  };
+
+  const submitCreate = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!form.name.trim()) return;
+    const suffix = form.scriptType === "notebook" ? ".ipynb" : ".py";
+    const requestedName = form.name.trim();
+    const normalizedName = requestedName.toLocaleLowerCase().endsWith(suffix)
+      ? requestedName
+      : `${requestedName}${suffix}`;
+    const duplicate = scripts.some((script) =>
+      script.script_type === form.scriptType
+      && script.script_name.toLocaleLowerCase() === normalizedName.toLocaleLowerCase()
+    );
+    if (duplicate) {
+      setToast({ tone: "error", message: `${normalizedName} 已存在，请更换名称` });
+      return;
+    }
+    setCreating(true);
+    try {
+      const created = await api.createScript(form);
+      setScripts((items) => [created, ...items]);
+      openTab(created.script_id);
+      setCreateOpen(false);
+      setForm(initialForm);
+      setToast({
+        tone: "success",
+        message: `${created.script_name} 已创建`,
+      });
+    } catch (error) {
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "创建失败",
+      });
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const openCreateDialog = (
+    parentPath = "",
+    scriptType: ScriptType = "notebook",
+  ) => {
+    setContextMenu(null);
+    setForm({
+      ...initialForm,
+      parentPath,
+      scriptType,
+    });
+    setCreateOpen(true);
+  };
+
+  const openFolderDialog = (parentPath = "") => {
+    setContextMenu(null);
+    setFolderDialog({
+      open: true,
+      parentPath,
+      name: "",
+      busy: false,
+    });
+  };
+
+  const chooseUpload = (parentPath = "") => {
+    setContextMenu(null);
+    setUploadParentPath(parentPath);
+    uploadInputRef.current?.click();
+  };
+
+  const handleUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (files.length === 0) return;
+    setUploading(true);
+    let lastCreated: ScriptItem | null = null;
+    try {
+      for (const file of files) {
+        lastCreated = await api.uploadScript(file, uploadParentPath);
+      }
+      await load(true);
+      if (lastCreated) selectScript(lastCreated.script_id);
+      setToast({
+        tone: "success",
+        message: `${files.length} 个文件已上传到${
+          uploadParentPath ? ` ${uploadParentPath}` : "当前目录"
+        }`,
+      });
+    } catch (error) {
+      await load(true);
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "文件上传失败",
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const submitFolder = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!folderDialog.name.trim()) return;
+    setFolderDialog((current) => ({ ...current, busy: true }));
+    try {
+      await api.createWorkspaceDirectory(
+        folderDialog.name.trim(),
+        folderDialog.parentPath,
+      );
+      await load(true);
+      setFolderDialog({
+        open: false,
+        parentPath: "",
+        name: "",
+        busy: false,
+      });
+      setToast({
+        tone: "success",
+        message: `${folderDialog.name.trim()} 文件夹已创建`,
+      });
+    } catch (error) {
+      setFolderDialog((current) => ({ ...current, busy: false }));
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "文件夹创建失败",
+      });
+    }
+  };
+
+  const removeScript = async (script: ScriptItem) => {
+    setContextMenu(null);
+    if (!window.confirm(`确定删除文件“${script.script_name}”吗？稳定版本会保留。`)) {
+      return;
+    }
+    if (editSessionRef.current?.script_id === script.script_id) {
+      await endEditing(false, false);
+      if (editSessionRef.current?.script_id === script.script_id) return;
+    }
+    try {
+      await api.deleteScript(script.script_id);
+      if (selectedIdRef.current === script.script_id) selectScript(null);
+      await load(true);
+      setToast({
+        tone: "success",
+        message: `${script.script_name} 已删除`,
+      });
+    } catch (error) {
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "文件删除失败",
+      });
+    }
+  };
+
+  const removeDirectory = async (path: string) => {
+    setContextMenu(null);
+    if (!window.confirm(`确定递归删除文件夹“${path}”及其内容吗？稳定版本会保留。`)) {
+      return;
+    }
+    const activeScript = scripts.find(
+      (item) => item.script_id === editSessionRef.current?.script_id,
+    );
+    if (
+      activeScript
+      && (
+        ownedScriptPath(activeScript) === path
+        || ownedScriptPath(activeScript).startsWith(`${path}/`)
+      )
+    ) {
+      await endEditing(false, false);
+      if (editSessionRef.current?.script_id === activeScript.script_id) return;
+    }
+    try {
+      const result = await api.deleteWorkspaceDirectory(path);
+      const selectedScript = scripts.find(
+        (item) => item.script_id === selectedIdRef.current,
+      );
+      if (
+        selectedScript
+        && ownedScriptPath(selectedScript).startsWith(`${path}/`)
+      ) {
+        selectScript(null);
+      }
+      await load(true);
+      setToast({
+        tone: "success",
+        message: `${path} 已删除（含 ${result.deleted_scripts} 个脚本）`,
+      });
+    } catch (error) {
+      setToast({
+        tone: "error",
+        message: error instanceof Error ? error.message : "文件夹删除失败",
+      });
+    }
+  };
+
+  const showContextMenu = (
+    event: ReactMouseEvent,
+    target: Omit<ContextMenuState, "x" | "y">,
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const width = 188;
+    const height = target.kind === "file" ? 92 : 190;
+    setContextMenu({
+      ...target,
+      x: Math.min(event.clientX, window.innerWidth - width - 8),
+      y: Math.min(event.clientY, window.innerHeight - height - 8),
+    });
+  };
+
+  return (
+    <div className="app-shell">
+      <aside className={`sidebar${sidebarCollapsed ? " is-collapsed" : ""}`}>
+        <div className="brand">
+          <span className="brand__mark"><Icon name="brand" size={31} /></span>
+          {!sidebarCollapsed && <span className="brand__name">模型实验开发平台</span>}
+        </div>
+
+        {!sidebarCollapsed && (
+        <nav className="navigation" aria-label="主导航">
+          {navigation.map((item) => (
+            <button
+              className={`nav-item${
+                item.page === activePage ? " nav-item--active" : ""
+              }`}
+              key={item.label}
+              type="button"
+              onClick={() => {
+                if (item.page !== "scripts") {
+                  if (editSessionRef.current) {
+                    void endEditing(true);
+                  } else {
+                    selectScript(null);
+                  }
+                }
+                navigate(pathForPage(item.page));
+              }}
+            >
+              <Icon name={item.icon} size={19} />
+              <span>{item.label}</span>
+            </button>
+          ))}
+        </nav>
+        )}
+
+        <button className="sidebar-footer" type="button" onClick={() => setSidebarCollapsed((v) => !v)}>
+          <Icon name="menu" size={19} />
+          <span>{sidebarCollapsed ? "展开菜单" : "收起菜单"}</span>
+        </button>
+      </aside>
+
+      <main className="main-area">
+        <header className="topbar">
+          <div className="page-title">
+            <button className="icon-button icon-button--back" type="button">
+              <Icon name="chevron" size={19} />
+            </button>
+            <div>
+              <span className="page-title__eyebrow">开发工作区</span>
+              <h1>{{
+                home: "工作台",
+                scripts: "构建脚本",
+                schedules: "调度配置",
+                system: "系统管理",
+              }[activePage]}</h1>
+            </div>
+          </div>
+          <div className="topbar__actions">
+            <div className="api-state">
+              <span className={`api-state__dot${apiOnline ? " is-online" : ""}`} />
+              {apiOnline ? "服务已连接" : "服务未连接"}
+            </div>
+            <div className="topbar-menu-wrap">
+              <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>{currentWorkspace.workspace_name}</strong></span>
+                <Icon name="chevron" size={15} />
+              </button>
+              {workspaceMenuOpen && (
+                <div className="topbar-dropdown">
+                  {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">
+                <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>
+            </div>
+          </div>
+        </header>
+
+        {activePage === "scripts" ? (
+        <section className="workspace-layout">
+          <aside className="explorer">
+            <div className="explorer__header">
+              <div>
+                <h2>脚本目录</h2>
+                <span>{scripts.length} 个工作副本</span>
+              </div>
+              <div className="explorer__actions">
+                <button
+                  className="text-button"
+                  type="button"
+                  disabled={uploading}
+                  onClick={() => chooseUpload("")}
+                >
+                  <Icon name="upload" size={15} />
+                  {uploading ? "上传中…" : "上传"}
+                </button>
+                <input
+                  ref={uploadInputRef}
+                  className="visually-hidden"
+                  type="file"
+                  accept=".py,.ipynb"
+                  multiple
+                  onChange={(event) => void handleUpload(event)}
+                />
+                <button
+                  className="text-button"
+                  type="button"
+                  onClick={() => openCreateDialog("")}
+                >
+                  <Icon name="plus" size={16} />
+                  新建
+                </button>
+              </div>
+            </div>
+
+            <div className="search-box">
+              <Icon name="search" size={17} />
+              <input
+                aria-label="搜索脚本"
+                placeholder="搜索脚本名称"
+                value={keyword}
+                onChange={(event) => setKeyword(event.target.value)}
+              />
+              <button
+                className={refreshing ? "is-spinning" : ""}
+                type="button"
+                aria-label="刷新脚本"
+                onClick={() => void load(true)}
+              >
+                <Icon name="refresh" size={16} />
+              </button>
+            </div>
+
+            <div className="tree-scroll">
+              {loading ? (
+                <div className="tree-skeleton">
+                  <span /><span /><span /><span />
+                </div>
+              ) : (
+                <>
+                  {memberScriptGroups.map((group) => (
+                    <WorkspaceTreeGroup
+                      key={group.user?.user_id ?? "anon"}
+                      title={`${group.user?.display_name}的文件`}
+                      scripts={group.scripts}
+                      directories={group.directories}
+                      selectedId={selectedId}
+                      onSelect={openTab}
+                      onContextMenu={
+                        group.user?.user_id === user?.user_id
+                          ? showContextMenu
+                          : undefined
+                      }
+                      readOnly={group.user?.user_id !== user?.user_id}
+                    />
+                  ))}
+                  {filteredScripts.length === 0 && (
+                    <div className="tree-empty">
+                      <span className="tree-empty__icon">
+                        <Icon name="script" size={24} />
+                      </span>
+                      <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
+                      <p>
+                        {keyword
+                          ? "换个关键词试试"
+                          : "新建 Notebook 或 Python 脚本开始实验"}
+                      </p>
+                      {!keyword && (
+                        <button type="button" onClick={() => openCreateDialog("")}>
+                          <Icon name="plus" size={15} />
+                          新建脚本
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </aside>
+
+          <section className="editor-area">
+            {selected ? (
+              <ScriptWorkspace
+                key={selected.script_id}
+                script={selected}
+                editSession={
+                  editSession?.script_id === selected.script_id
+                    ? editSession
+                    : null
+                }
+                jupyterUrl={
+                  editSession?.script_id === selected.script_id
+                    ? embeddedJupyterUrl
+                    : null
+                }
+                editBusy={editBusy}
+                openError={
+                  editorOpenError?.scriptId === selected.script_id
+                    ? editorOpenError.message
+                    : null
+                }
+                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={(scriptId, event) => void closeTab(scriptId, event)}
+                onSwitchTab={switchTab}
+                onNewTab={() => openCreateDialog("")}
+                onPublish={() => openPublishDialog(selected)}
+                onInfo={setToast}
+              />
+            ) : (
+              <div className="welcome-panel">
+                <div className="welcome-panel__visual">
+                  <Icon name="script" size={42} />
+                </div>
+                <span className="welcome-panel__label">构建脚本工作台</span>
+                <h2>创建你的第一个模型脚本</h2>
+                <p>
+                  通过 Notebook 完成数据探索，或使用 Python
+                  脚本构建可调度的处理任务。
+                </p>
+                <button className="primary-button" onClick={() => openCreateDialog("")}>
+                  <Icon name="plus" size={17} />
+                  新建构建脚本
+                </button>
+              </div>
+            )}
+          </section>
+        </section>
+        ) : activePage === "schedules" ? (
+          <SchedulePage
+            key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
+            onNotify={setToast}
+            onConnectionChange={setApiOnline}
+          />
+        ) : activePage === "system" ? (
+          <SystemAdminPage
+            key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
+            onNotify={setToast}
+            onConnectionChange={setApiOnline}
+          />
+        ) : (
+          <DashboardPage
+            scriptCount={scripts.length}
+            online={apiOnline}
+            onNavigate={(page) => {
+              navigate(pathForPage(page));
+            }}
+          />
+        )}
+      </main>
+
+      {createOpen && (
+        <div className="modal-backdrop" role="presentation">
+          <section className="modal" role="dialog" aria-modal="true">
+            <div className="modal__header">
+              <div>
+                <span className="modal__eyebrow">工作副本</span>
+                <h2>新建构建脚本</h2>
+              </div>
+              <button
+                className="icon-button"
+                type="button"
+                aria-label="关闭"
+                onClick={() => setCreateOpen(false)}
+              >
+                <Icon name="close" />
+              </button>
+            </div>
+            <form onSubmit={submitCreate}>
+              <div className="destination-chip">
+                <Icon name="folder" size={16} />
+                保存到：{form.parentPath || "个人根目录"}
+              </div>
+              <label className="form-field">
+                <span>脚本名称</span>
+                <input
+                  autoFocus
+                  maxLength={255}
+                  placeholder={form.scriptType === "notebook"
+                    ? "例如：数据探索"
+                    : "例如：data_process"}
+                  value={form.name}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      name: event.target.value,
+                    }))}
+                />
+                <small>
+                  系统会自动补充
+                  {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
+                </small>
+              </label>
+
+              <fieldset className="type-picker">
+                <legend>脚本类型</legend>
+                <button
+                  className={form.scriptType === "notebook" ? "is-selected" : ""}
+                  type="button"
+                  onClick={() => setForm((current) => ({
+                    ...current,
+                    scriptType: "notebook",
+                  }))}
+                >
+                  <span className="type-picker__icon type-picker__icon--notebook">
+                    <Icon name="notebook" size={22} />
+                  </span>
+                  <span>
+                    <strong>Jupyter Notebook</strong>
+                    <small>交互式数据探索与模型实验</small>
+                  </span>
+                  <span className="type-picker__check">
+                    <Icon name="check" size={14} />
+                  </span>
+                </button>
+                <button
+                  className={form.scriptType === "python" ? "is-selected" : ""}
+                  type="button"
+                  onClick={() => setForm((current) => ({
+                    ...current,
+                    scriptType: "python",
+                  }))}
+                >
+                  <span className="type-picker__icon type-picker__icon--python">
+                    <Icon name="python" size={23} />
+                  </span>
+                  <span>
+                    <strong>Python 脚本</strong>
+                    <small>批处理、训练和模型调用任务</small>
+                  </span>
+                  <span className="type-picker__check">
+                    <Icon name="check" size={14} />
+                  </span>
+                </button>
+              </fieldset>
+
+              <label className="form-field">
+                <span>可见范围</span>
+                <select
+                  value={form.visibility}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      visibility: event.target.value as Visibility,
+                    }))}
+                >
+                  <option value="private">仅自己可见</option>
+                  <option value="workspace">Workspace 成员可见</option>
+                  <option value="public">公开</option>
+                </select>
+              </label>
+
+              <div className="modal__footer">
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={() => setCreateOpen(false)}
+                >
+                  取消
+                </button>
+                <button
+                  className="primary-button"
+                  type="submit"
+                  disabled={creating || !form.name.trim()}
+                >
+                  {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
+                  {creating ? "正在创建…" : "创建脚本"}
+                </button>
+              </div>
+            </form>
+          </section>
+        </div>
+      )}
+
+      {folderDialog.open && (
+        <div className="modal-backdrop" role="presentation">
+          <section className="modal modal--compact" role="dialog" aria-modal="true">
+            <div className="modal__header">
+              <div>
+                <span className="modal__eyebrow">WORKSPACE</span>
+                <h2>新建文件夹</h2>
+              </div>
+              <button
+                className="icon-button"
+                type="button"
+                aria-label="关闭"
+                onClick={() => setFolderDialog((current) => ({
+                  ...current,
+                  open: false,
+                }))}
+              >
+                <Icon name="close" />
+              </button>
+            </div>
+            <form onSubmit={submitFolder}>
+              <div className="destination-chip">
+                <Icon name="folder" size={16} />
+                创建到：{folderDialog.parentPath || "个人根目录"}
+              </div>
+              <label className="form-field">
+                <span>文件夹名称</span>
+                <input
+                  autoFocus
+                  maxLength={255}
+                  placeholder="例如：模型训练"
+                  value={folderDialog.name}
+                  onChange={(event) => setFolderDialog((current) => ({
+                    ...current,
+                    name: event.target.value,
+                  }))}
+                />
+              </label>
+              <div className="modal__footer">
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={() => setFolderDialog((current) => ({
+                    ...current,
+                    open: false,
+                  }))}
+                >
+                  取消
+                </button>
+                <button
+                  className="primary-button"
+                  type="submit"
+                  disabled={folderDialog.busy || !folderDialog.name.trim()}
+                >
+                  {folderDialog.busy
+                    ? <span className="button-spinner" />
+                    : <Icon name="folder" size={16} />}
+                  {folderDialog.busy ? "正在创建…" : "创建文件夹"}
+                </button>
+              </div>
+            </form>
+          </section>
+        </div>
+      )}
+
+      {contextMenu && (
+        <div
+          className="tree-context-menu"
+          role="menu"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+          onPointerDown={(event) => event.stopPropagation()}
+        >
+          {contextMenu.kind === "file" && contextMenu.script ? (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  selectScript(contextMenu.script!.script_id);
+                  setContextMenu(null);
+                }}
+              >
+                <Icon name="script" size={16} />
+                打开文件
+              </button>
+              <button
+                className="is-danger"
+                type="button"
+                role="menuitem"
+                onClick={() => void removeScript(contextMenu.script!)}
+              >
+                <Icon name="close" size={16} />
+                删除文件
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => openCreateDialog(contextMenu.path, "notebook")}
+              >
+                <Icon name="notebook" size={16} />
+                新建 Notebook
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => openCreateDialog(contextMenu.path, "python")}
+              >
+                <Icon name="python" size={16} />
+                新建 Python 文件
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => openFolderDialog(contextMenu.path)}
+              >
+                <Icon name="folder" size={16} />
+                新建文件夹
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => chooseUpload(contextMenu.path)}
+              >
+                <Icon name="upload" size={16} />
+                上传到此处
+              </button>
+              {contextMenu.kind === "directory" && (
+                <>
+                  <span className="tree-context-menu__separator" />
+                  <button
+                    className="is-danger"
+                    type="button"
+                    role="menuitem"
+                    onClick={() => void removeDirectory(contextMenu.path)}
+                  >
+                    <Icon name="close" size={16} />
+                    删除文件夹
+                  </button>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {publishTarget && (
+        <div className="modal-backdrop" role="presentation">
+          <section className="modal publish-modal" role="dialog" aria-modal="true">
+            <div className="modal__header">
+              <div>
+                <span className="modal__eyebrow">不可变制品</span>
+                <h2>发布稳定版本</h2>
+              </div>
+              <button
+                className="icon-button"
+                type="button"
+                aria-label="关闭"
+                onClick={() => setPublishTarget(null)}
+              >
+                <Icon name="close" />
+              </button>
+            </div>
+            <form onSubmit={submitPublish}>
+              <div className="publish-source">
+                <span className={`file-icon file-icon--${publishTarget.script_type}`}>
+                  <Icon name={scriptIcon(publishTarget)} size={18} />
+                </span>
+                <span>
+                  <strong>{publishTarget.script_name}</strong>
+                  <small>当前 Workspace 工作副本</small>
+                </span>
+              </div>
+              <label className="form-field">
+                <span>发布说明</span>
+                <textarea
+                  maxLength={1000}
+                  placeholder="例如：完成数据清洗和特征工程"
+                  value={releaseNote}
+                  onChange={(event) => setReleaseNote(event.target.value)}
+                />
+                <small>稳定版本内容不可修改，可作为后续调度节点输入。</small>
+              </label>
+              <label className="form-field">
+                <span>可见范围</span>
+                <select
+                  value={publishVisibility}
+                  onChange={(event) =>
+                    setPublishVisibility(event.target.value as Visibility)}
+                >
+                  <option value="private">仅自己可见</option>
+                  <option value="workspace">Workspace 成员可见</option>
+                  <option value="public">公开</option>
+                </select>
+              </label>
+              <div className="modal__footer">
+                <button
+                  className="secondary-button"
+                  type="button"
+                  onClick={() => setPublishTarget(null)}
+                >
+                  取消
+                </button>
+                <button
+                  className="primary-button"
+                  type="submit"
+                  disabled={publishing}
+                >
+                  {publishing
+                    ? <span className="button-spinner" />
+                    : <Icon name="release" size={16} />}
+                  {publishing ? "正在发布…" : "确认发布"}
+                </button>
+              </div>
+            </form>
+          </section>
+        </div>
+      )}
+
+      {publishedVersion && (
+        <div className="modal-backdrop" role="presentation">
+          <section className="modal version-receipt" role="dialog" aria-modal="true">
+            <div className="version-receipt__check">
+              <Icon name="check" size={28} />
+            </div>
+            <span className="modal__eyebrow">STABLE VERSION</span>
+            <h2>稳定版本发布成功</h2>
+            <p>
+              {publishedVersion.version_label} 已成为不可变制品，
+              后续调度将通过 versions_id 引用它。
+            </p>
+            <div className="version-id-box">
+              <span>versions_id</span>
+              <code>{publishedVersion.versions_id}</code>
+              <button
+                type="button"
+                onClick={() => {
+                  void navigator.clipboard.writeText(
+                    publishedVersion.versions_id,
+                  );
+                  setToast({ tone: "success", message: "versions_id 已复制" });
+                }}
+              >
+                复制
+              </button>
+            </div>
+            <button
+              className="primary-button version-receipt__close"
+              type="button"
+              onClick={() => setPublishedVersion(null)}
+            >
+              完成
+            </button>
+          </section>
+        </div>
+      )}
+
+      {toast && (
+        <div className={`toast toast--${toast.tone}`} role="status">
+          <span>
+            <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
+          </span>
+          {toast.message}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/features/platform/ModelPlatformApp.tsx b/frontend/app/features/platform/ModelPlatformApp.tsx
index b123fbb..8bf9fc5 100644
--- a/frontend/app/features/platform/ModelPlatformApp.tsx
+++ b/frontend/app/features/platform/ModelPlatformApp.tsx
@@ -19,13 +19,20 @@ import {
   type WorkspaceDirectory,
 } from "../../services/api";
 import { useApi, useAuth } from "../../context/AuthContext";
-import Icon from "../../components/Icon";
+import Icon from "../../components/common/Icon";
+import { Sidebar } from "../../components/common/Sidebar";
+import { Topbar } from "../../components/common/Topbar";
+import { ScriptExplorer } from "../../components/platform/ScriptExplorer";
+import { CreateScriptModal } from "../../components/platform/CreateScriptModal";
+import { CreateFolderModal } from "../../components/platform/CreateFolderModal";
+import { TreeContextMenu } from "../../components/platform/TreeContextMenu";
+import { PublishModal } from "../../components/platform/PublishModal";
+import { VersionReceiptModal } from "../../components/platform/VersionReceiptModal";
+import { Toast } from "../../components/common/Toast";
+import { ScriptWorkspace } from "./ScriptWorkspace";
 import SchedulePage from "../schedules/SchedulePage";
 import { DashboardPage, SystemAdminPage } from "../admin/AdminPages";
 import "../../styles/platform.css";
-import { WorkspaceTreeGroup, scriptIcon } from "./WorkspaceTree";
-import { ScriptWorkspace } from "./ScriptWorkspace";
-
 
 type NewScriptForm = {
   name: string;
@@ -47,13 +54,6 @@ type ToastState = {
   message: string;
 };
 
-const navigation = [
-  { label: "工作台", icon: "home" as const, page: "home" as const },
-  { label: "构建脚本", icon: "script" as const, page: "scripts" as const },
-  { label: "调度配置", icon: "schedule" as const, page: "schedules" as const },
-  { label: "系统管理", icon: "settings" as const, page: "system" as const },
-];
-
 type ActivePage = "home" | "scripts" | "schedules" | "system";
 
 function pageFromPath(pathname: string): ActivePage {
@@ -74,38 +74,6 @@ const initialForm: NewScriptForm = {
   parentPath: "",
 };
 
-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("/");
-}
-
-function inferredDirectories(items: ScriptItem[]): WorkspaceDirectory[] {
-  const result = new Map<string, WorkspaceDirectory>();
-  for (const item of items) {
-    const parts = parentOf(ownedScriptPath(item)).split("/").filter(Boolean);
-    let parentPath = "";
-    for (const name of parts) {
-      const path = parentPath ? `${parentPath}/${name}` : name;
-      result.set(path, { path, name, parent_path: parentPath });
-      parentPath = path;
-    }
-  }
-  return [...result.values()];
-}
-
-function mergeDirectories(
-  left: WorkspaceDirectory[],
-  right: WorkspaceDirectory[],
-): WorkspaceDirectory[] {
-  return [...new Map(
-    [...left, ...right].map((item) => [item.path, item]),
-  ).values()];
-}
 export default function ModelPlatformApp() {
   const { currentWorkspace } = useAuth();
   if (!currentWorkspace) {
@@ -128,6 +96,8 @@ function AuthenticatedModelPlatformApp() {
   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);
@@ -136,46 +106,60 @@ function AuthenticatedModelPlatformApp() {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [apiOnline, setApiOnline] = useState(false);
+
+  // 创建脚本相关
   const [createOpen, setCreateOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [form, setForm] = useState<NewScriptForm>(initialForm);
+
+  // 创建文件夹相关
   const [folderDialog, setFolderDialog] = useState<{
     open: boolean;
     parentPath: string;
     name: string;
     busy: boolean;
   }>({ open: false, parentPath: "", name: "", busy: false });
+
+  // 右键菜单
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+
+  // Workspace 菜单
   const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
+
+  // 上传相关
   const [uploadParentPath, setUploadParentPath] = useState("");
   const [uploading, setUploading] = useState(false);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Toast 通知
   const [toast, setToast] = useState<ToastState | null>(null);
+
+  // 编辑会话相关
   const [editSession, setEditSession] = useState<ActiveEditSession | null>(null);
   const editSessionRef = useRef<ActiveEditSession | null>(null);
   const selectedIdRef = useRef<string | null>(null);
   const editorOpenRequestRef = useRef(0);
   const editorOpeningRef = useRef(false);
-  const [embeddedJupyterUrl, setEmbeddedJupyterUrl] =
-    useState<string | null>(null);
+  const [embeddedJupyterUrl, setEmbeddedJupyterUrl] = useState<string | null>(null);
   const [editBusy, setEditBusy] = useState(false);
   const [editorOpenError, setEditorOpenError] = useState<{
     scriptId: string;
     message: string;
   } | null>(null);
-  const [latestVersion, setLatestVersion] = useState<LatestVersion | null>(
-    null,
-  );
+
+  // 版本发布相关
+  const [latestVersion, setLatestVersion] = useState<LatestVersion | null>(null);
   const [latestVersionLoading, setLatestVersionLoading] = useState(false);
   const [publishTarget, setPublishTarget] = useState<ScriptItem | null>(null);
   const [releaseNote, setReleaseNote] = useState("");
-  const [publishVisibility, setPublishVisibility] =
-    useState<Visibility>("workspace");
+  const [publishVisibility, setPublishVisibility] = useState<Visibility>("workspace");
   const [publishing, setPublishing] = useState(false);
-  const [publishedVersion, setPublishedVersion] =
-    useState<StableVersion | null>(null);
+  const [publishedVersion, setPublishedVersion] = useState<StableVersion | null>(null);
+
+  // 侧边栏折叠
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
+  // 加载脚本列表
   const load = async (silent = false) => {
     if (!silent) setLoading(true);
     setRefreshing(silent);
@@ -261,10 +245,7 @@ function AuthenticatedModelPlatformApp() {
         if (!ignore) {
           setToast({
             tone: "error",
-            message:
-              error instanceof Error
-                ? error.message
-                : "最新版本加载失败",
+            message: error instanceof Error ? error.message : "最新版本加载失败",
           });
         }
       })
@@ -276,12 +257,10 @@ function AuthenticatedModelPlatformApp() {
     };
   }, [selectedId]);
 
+  // 编辑锁心跳
   useEffect(() => {
     if (!editSession) return;
-    const intervalSeconds = Math.max(
-      5,
-      editSession.heartbeat_interval_seconds || 15,
-    );
+    const intervalSeconds = Math.max(5, editSession.heartbeat_interval_seconds || 15);
     let heartbeatRunning = false;
     const timer = window.setInterval(() => {
       if (heartbeatRunning) return;
@@ -306,9 +285,7 @@ function AuthenticatedModelPlatformApp() {
           setEmbeddedJupyterUrl(null);
           setToast({
             tone: "error",
-            message: `编辑锁心跳已中断：${
-              error instanceof Error ? error.message : "请重新打开文件"
-            }`,
+            message: `编辑锁心跳已中断：${error instanceof Error ? error.message : "请重新打开文件"}`,
           });
         })
         .finally(() => {
@@ -318,6 +295,7 @@ function AuthenticatedModelPlatformApp() {
     return () => window.clearInterval(timer);
   }, [editSession?.edit_session_id, editSession?.heartbeat_interval_seconds]);
 
+  // Jupyter 访问票据续签
   useEffect(() => {
     if (!editSession?.ticket_expires_at) return;
     const expiresAt = new Date(editSession.ticket_expires_at).getTime();
@@ -337,15 +315,14 @@ function AuthenticatedModelPlatformApp() {
         .catch((error) => {
           setToast({
             tone: "error",
-            message: `Jupyter 访问票据续签失败：${
-              error instanceof Error ? error.message : "请重新打开文件"
-            }`,
+            message: `Jupyter 访问票据续签失败：${error instanceof Error ? error.message : "请重新打开文件"}`,
           });
         });
     }, renewAfter);
     return () => window.clearTimeout(timer);
   }, [editSession?.edit_session_id, editSession?.ticket_expires_at]);
 
+  // 页面卸载时释放编辑锁
   useEffect(() => {
     if (!editSession) return;
     const handleUnload = () => {
@@ -356,6 +333,7 @@ function AuthenticatedModelPlatformApp() {
     return () => window.removeEventListener("beforeunload", handleUnload);
   }, [editSession?.edit_session_id]);
 
+  // 过滤脚本
   const filteredScripts = useMemo(() => {
     const normalized = keyword.trim().toLocaleLowerCase();
     if (!normalized) return scripts;
@@ -364,23 +342,14 @@ function AuthenticatedModelPlatformApp() {
     );
   }, [keyword, scripts]);
 
-  const memberScriptGroups = (() => {
-    const currentUserScripts = filteredScripts.filter(
-      (item) => item.owner_user_id === user?.user_id,
-    );
-    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) => {
     setSelectedId(scriptId);
   };
 
+  // 打开标签
   const openTab = (scriptId: string) => {
     if (selectedIdRef.current !== scriptId) {
       editorOpenRequestRef.current += 1;
@@ -396,14 +365,12 @@ function AuthenticatedModelPlatformApp() {
     });
   };
 
+  // 关闭标签
   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;
@@ -417,6 +384,7 @@ function AuthenticatedModelPlatformApp() {
     });
   };
 
+  // 切换标签
   const switchTab = (scriptId: string) => {
     if (selectedIdRef.current !== scriptId) {
       editorOpenRequestRef.current += 1;
@@ -426,10 +394,8 @@ function AuthenticatedModelPlatformApp() {
     selectedIdRef.current = scriptId;
   };
 
-  const openScriptEditor = async (
-    script: ScriptItem,
-    showToast = true,
-  ) => {
+  // 打开脚本编辑器
+  const openScriptEditor = async (script: ScriptItem, showToast = true) => {
     if (editorOpeningRef.current) return;
     editorOpeningRef.current = true;
     const requestId = editorOpenRequestRef.current + 1;
@@ -438,9 +404,7 @@ function AuthenticatedModelPlatformApp() {
       editorOpenRequestRef.current === requestId
       && selectedIdRef.current === script.script_id;
     const clearSessionIfActive = (session: ActiveEditSession) => {
-      if (
-        editSessionRef.current?.edit_session_id === session.edit_session_id
-      ) {
+      if (editSessionRef.current?.edit_session_id === session.edit_session_id) {
         setEmbeddedJupyterUrl(null);
         setEditSession(null);
         editSessionRef.current = null;
@@ -481,10 +445,7 @@ function AuthenticatedModelPlatformApp() {
         return;
       }
 
-      const readySession = {
-        ...active,
-        ticket_expires_at: ticket.expires_at,
-      };
+      const readySession = { ...active, ticket_expires_at: ticket.expires_at };
       setEditSession(readySession);
       editSessionRef.current = readySession;
       setEmbeddedJupyterUrl(ticket.jupyter_url);
@@ -499,7 +460,7 @@ function AuthenticatedModelPlatformApp() {
         try {
           await api.releaseFileLock(active);
         } catch {
-          // The database lease is the final safety net if compensation cannot reach Runtime.
+          // The database lease is the final safety net
         }
         setEditSession(null);
         editSessionRef.current = null;
@@ -518,6 +479,7 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 自动打开 Notebook 编辑器
   useEffect(() => {
     if (
       activePage !== "scripts"
@@ -525,25 +487,17 @@ function AuthenticatedModelPlatformApp() {
       || selected.script_type !== "notebook"
       || editBusy
       || editorOpenError?.scriptId === selected.script_id
-      || (
-        editSession?.script_id === selected.script_id
-        && embeddedJupyterUrl
-      )
+      || (editSession?.script_id === selected.script_id && embeddedJupyterUrl)
     ) {
       return;
     }
-
     void openScriptEditor(selected, false);
   }, [
-    activePage,
-    editBusy,
-    editSession?.script_id,
-    editorOpenError?.scriptId,
-    embeddedJupyterUrl,
-    selected?.script_id,
-    selected?.script_type,
+    activePage, editBusy, editSession?.script_id, editorOpenError?.scriptId,
+    embeddedJupyterUrl, selected?.script_id, selected?.script_type,
   ]);
 
+  // 结束编辑
   const endEditing = async (closeTabFlag = true, showToast = true) => {
     editorOpenRequestRef.current += 1;
     setEditorOpenError(null);
@@ -580,6 +534,7 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 切换文件时结束编辑
   useEffect(() => {
     const active = editSessionRef.current;
     if (
@@ -594,6 +549,7 @@ function AuthenticatedModelPlatformApp() {
     void endEditing(false, false);
   }, [editBusy, selected?.script_id, selected?.script_type]);
 
+  // 切换页面时结束编辑
   useEffect(() => {
     if (
       activePage === "scripts"
@@ -605,14 +561,14 @@ function AuthenticatedModelPlatformApp() {
     void endEditing(true, false);
   }, [activePage, editBusy]);
 
+  // 打开发布对话框
   const openPublishDialog = (script: ScriptItem) => {
     setPublishTarget(script);
     setReleaseNote("");
-    setPublishVisibility(
-      script.visibility === "private" ? "private" : "workspace",
-    );
+    setPublishVisibility(script.visibility === "private" ? "private" : "workspace");
   };
 
+  // 发布稳定版本
   const submitPublish = async (event: FormEvent) => {
     event.preventDefault();
     if (!publishTarget) return;
@@ -639,6 +595,7 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 创建脚本
   const submitCreate = async (event: FormEvent) => {
     event.preventDefault();
     if (!form.name.trim()) return;
@@ -662,10 +619,7 @@ function AuthenticatedModelPlatformApp() {
       openTab(created.script_id);
       setCreateOpen(false);
       setForm(initialForm);
-      setToast({
-        tone: "success",
-        message: `${created.script_name} 已创建`,
-      });
+      setToast({ tone: "success", message: `${created.script_name} 已创建` });
     } catch (error) {
       setToast({
         tone: "error",
@@ -676,27 +630,15 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
-  const openCreateDialog = (
-    parentPath = "",
-    scriptType: ScriptType = "notebook",
-  ) => {
+  const openCreateDialog = (parentPath = "", scriptType: ScriptType = "notebook") => {
     setContextMenu(null);
-    setForm({
-      ...initialForm,
-      parentPath,
-      scriptType,
-    });
+    setForm({ ...initialForm, parentPath, scriptType });
     setCreateOpen(true);
   };
 
   const openFolderDialog = (parentPath = "") => {
     setContextMenu(null);
-    setFolderDialog({
-      open: true,
-      parentPath,
-      name: "",
-      busy: false,
-    });
+    setFolderDialog({ open: true, parentPath, name: "", busy: false });
   };
 
   const chooseUpload = (parentPath = "") => {
@@ -705,6 +647,7 @@ function AuthenticatedModelPlatformApp() {
     uploadInputRef.current?.click();
   };
 
+  // 上传文件
   const handleUpload = async (event: ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(event.target.files ?? []);
     event.target.value = "";
@@ -719,9 +662,7 @@ function AuthenticatedModelPlatformApp() {
       if (lastCreated) selectScript(lastCreated.script_id);
       setToast({
         tone: "success",
-        message: `${files.length} 个文件已上传到${
-          uploadParentPath ? ` ${uploadParentPath}` : "当前目录"
-        }`,
+        message: `${files.length} 个文件已上传到${uploadParentPath ? ` ${uploadParentPath}` : "当前目录"}`,
       });
     } catch (error) {
       await load(true);
@@ -734,26 +675,16 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 创建文件夹
   const submitFolder = async (event: FormEvent) => {
     event.preventDefault();
     if (!folderDialog.name.trim()) return;
     setFolderDialog((current) => ({ ...current, busy: true }));
     try {
-      await api.createWorkspaceDirectory(
-        folderDialog.name.trim(),
-        folderDialog.parentPath,
-      );
+      await api.createWorkspaceDirectory(folderDialog.name.trim(), folderDialog.parentPath);
       await load(true);
-      setFolderDialog({
-        open: false,
-        parentPath: "",
-        name: "",
-        busy: false,
-      });
-      setToast({
-        tone: "success",
-        message: `${folderDialog.name.trim()} 文件夹已创建`,
-      });
+      setFolderDialog({ open: false, parentPath: "", name: "", busy: false });
+      setToast({ tone: "success", message: `${folderDialog.name.trim()} 文件夹已创建` });
     } catch (error) {
       setFolderDialog((current) => ({ ...current, busy: false }));
       setToast({
@@ -763,9 +694,10 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 删除脚本
   const removeScript = async (script: ScriptItem) => {
     setContextMenu(null);
-    if (!window.confirm(`确定删除文件“${script.script_name}”吗？稳定版本会保留。`)) {
+    if (!window.confirm(`确定删除文件"${script.script_name}"吗？稳定版本会保留。`)) {
       return;
     }
     if (editSessionRef.current?.script_id === script.script_id) {
@@ -776,10 +708,7 @@ function AuthenticatedModelPlatformApp() {
       await api.deleteScript(script.script_id);
       if (selectedIdRef.current === script.script_id) selectScript(null);
       await load(true);
-      setToast({
-        tone: "success",
-        message: `${script.script_name} 已删除`,
-      });
+      setToast({ tone: "success", message: `${script.script_name} 已删除` });
     } catch (error) {
       setToast({
         tone: "error",
@@ -788,9 +717,10 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 删除文件夹
   const removeDirectory = async (path: string) => {
     setContextMenu(null);
-    if (!window.confirm(`确定递归删除文件夹“${path}”及其内容吗？稳定版本会保留。`)) {
+    if (!window.confirm(`确定递归删除文件夹"${path}"及其内容吗？稳定版本会保留。`)) {
       return;
     }
     const activeScript = scripts.find(
@@ -798,10 +728,7 @@ function AuthenticatedModelPlatformApp() {
     );
     if (
       activeScript
-      && (
-        ownedScriptPath(activeScript) === path
-        || ownedScriptPath(activeScript).startsWith(`${path}/`)
-      )
+      && (ownedScriptPath(activeScript) === path || ownedScriptPath(activeScript).startsWith(`${path}/`))
     ) {
       await endEditing(false, false);
       if (editSessionRef.current?.script_id === activeScript.script_id) return;
@@ -811,17 +738,11 @@ function AuthenticatedModelPlatformApp() {
       const selectedScript = scripts.find(
         (item) => item.script_id === selectedIdRef.current,
       );
-      if (
-        selectedScript
-        && ownedScriptPath(selectedScript).startsWith(`${path}/`)
-      ) {
+      if (selectedScript && ownedScriptPath(selectedScript).startsWith(`${path}/`)) {
         selectScript(null);
       }
       await load(true);
-      setToast({
-        tone: "success",
-        message: `${path} 已删除（含 ${result.deleted_scripts} 个脚本）`,
-      });
+      setToast({ tone: "success", message: `${path} 已删除（含 ${result.deleted_scripts} 个脚本）` });
     } catch (error) {
       setToast({
         tone: "error",
@@ -830,6 +751,7 @@ function AuthenticatedModelPlatformApp() {
     }
   };
 
+  // 显示右键菜单
   const showContextMenu = (
     event: ReactMouseEvent,
     target: Omit<ContextMenuState, "x" | "y">,
@@ -847,254 +769,98 @@ function AuthenticatedModelPlatformApp() {
 
   return (
     <div className="app-shell">
-      <aside className={`sidebar${sidebarCollapsed ? " is-collapsed" : ""}`}>
-        <div className="brand">
-          <span className="brand__mark"><Icon name="brand" size={31} /></span>
-          {!sidebarCollapsed && <span className="brand__name">模型实验开发平台</span>}
-        </div>
-
-        {!sidebarCollapsed && (
-        <nav className="navigation" aria-label="主导航">
-          {navigation.map((item) => (
-            <button
-              className={`nav-item${
-                item.page === activePage ? " nav-item--active" : ""
-              }`}
-              key={item.label}
-              type="button"
-              onClick={() => {
-                if (item.page !== "scripts") {
-                  if (editSessionRef.current) {
-                    void endEditing(true);
-                  } else {
-                    selectScript(null);
-                  }
-                }
-                navigate(pathForPage(item.page));
-              }}
-            >
-              <Icon name={item.icon} size={19} />
-              <span>{item.label}</span>
-            </button>
-          ))}
-        </nav>
-        )}
-
-        <button className="sidebar-footer" type="button" onClick={() => setSidebarCollapsed((v) => !v)}>
-          <Icon name="menu" size={19} />
-          <span>{sidebarCollapsed ? "展开菜单" : "收起菜单"}</span>
-        </button>
-      </aside>
+      <Sidebar
+        activePage={activePage}
+        collapsed={sidebarCollapsed}
+        onNavigate={(page) => navigate(pathForPage(page))}
+        onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
+        onEndEditing={() => void endEditing(true)}
+        onSelectScript={selectScript}
+        editSessionRef={editSessionRef}
+      />
 
       <main className="main-area">
-        <header className="topbar">
-          <div className="page-title">
-            <button className="icon-button icon-button--back" type="button">
-              <Icon name="chevron" size={19} />
-            </button>
-            <div>
-              <span className="page-title__eyebrow">开发工作区</span>
-              <h1>{{
-                home: "工作台",
-                scripts: "构建脚本",
-                schedules: "调度配置",
-                system: "系统管理",
-              }[activePage]}</h1>
-            </div>
-          </div>
-          <div className="topbar__actions">
-            <div className="api-state">
-              <span className={`api-state__dot${apiOnline ? " is-online" : ""}`} />
-              {apiOnline ? "服务已连接" : "服务未连接"}
-            </div>
-            <div className="topbar-menu-wrap">
-              <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>{currentWorkspace.workspace_name}</strong></span>
-                <Icon name="chevron" size={15} />
-              </button>
-              {workspaceMenuOpen && (
-                <div className="topbar-dropdown">
-                  {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">
-                <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>
-            </div>
-          </div>
-        </header>
+        <Topbar
+          activePage={activePage}
+          apiOnline={apiOnline}
+          user={user}
+          currentWorkspace={currentWorkspace}
+          workspaces={workspaces}
+          workspaceMenuOpen={workspaceMenuOpen}
+          onSetWorkspaceMenuOpen={setWorkspaceMenuOpen}
+          onSetCurrentWorkspace={setCurrentWorkspace}
+          onLogout={logout}
+        />
 
         {activePage === "scripts" ? (
-        <section className="workspace-layout">
-          <aside className="explorer">
-            <div className="explorer__header">
-              <div>
-                <h2>脚本目录</h2>
-                <span>{scripts.length} 个工作副本</span>
-              </div>
-              <div className="explorer__actions">
-                <button
-                  className="text-button"
-                  type="button"
-                  disabled={uploading}
-                  onClick={() => chooseUpload("")}
-                >
-                  <Icon name="upload" size={15} />
-                  {uploading ? "上传中…" : "上传"}
-                </button>
-                <input
-                  ref={uploadInputRef}
-                  className="visually-hidden"
-                  type="file"
-                  accept=".py,.ipynb"
-                  multiple
-                  onChange={(event) => void handleUpload(event)}
+          <section className="workspace-layout">
+            <ScriptExplorer
+              scripts={scripts}
+              filteredScripts={filteredScripts}
+              directories={directories}
+              user={user}
+              selectedId={selectedId}
+              loading={loading}
+              refreshing={refreshing}
+              uploading={uploading}
+              keyword={keyword}
+              onKeywordChange={setKeyword}
+              onRefresh={() => void load(true)}
+              onUpload={() => chooseUpload("")}
+              onOpenCreateDialog={openCreateDialog}
+              onOpenFolderDialog={openFolderDialog}
+              onChooseUpload={chooseUpload}
+              onContextMenu={showContextMenu}
+              onSelect={openTab}
+              uploadInputRef={uploadInputRef}
+              onHandleUpload={handleUpload}
+            />
+
+            <section className="editor-area">
+              {selected ? (
+                <ScriptWorkspace
+                  key={selected.script_id}
+                  script={selected}
+                  editSession={editSession?.script_id === selected.script_id ? editSession : null}
+                  jupyterUrl={editSession?.script_id === selected.script_id ? embeddedJupyterUrl : null}
+                  editBusy={editBusy}
+                  openError={editorOpenError?.scriptId === selected.script_id ? editorOpenError.message : null}
+                  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={(scriptId, event) => void closeTab(scriptId, event)}
+                  onSwitchTab={switchTab}
+                  onNewTab={() => openCreateDialog("")}
+                  onPublish={() => openPublishDialog(selected)}
+                  onInfo={setToast}
                 />
-                <button
-                  className="text-button"
-                  type="button"
-                  onClick={() => openCreateDialog("")}
-                >
-                  <Icon name="plus" size={16} />
-                  新建
-                </button>
-              </div>
-            </div>
-
-            <div className="search-box">
-              <Icon name="search" size={17} />
-              <input
-                aria-label="搜索脚本"
-                placeholder="搜索脚本名称"
-                value={keyword}
-                onChange={(event) => setKeyword(event.target.value)}
-              />
-              <button
-                className={refreshing ? "is-spinning" : ""}
-                type="button"
-                aria-label="刷新脚本"
-                onClick={() => void load(true)}
-              >
-                <Icon name="refresh" size={16} />
-              </button>
-            </div>
-
-            <div className="tree-scroll">
-              {loading ? (
-                <div className="tree-skeleton">
-                  <span /><span /><span /><span />
-                </div>
               ) : (
-                <>
-                  {memberScriptGroups.map((group) => (
-                    <WorkspaceTreeGroup
-                      key={group.user?.user_id ?? "anon"}
-                      title={`${group.user?.display_name}的文件`}
-                      scripts={group.scripts}
-                      directories={group.directories}
-                      selectedId={selectedId}
-                      onSelect={openTab}
-                      onContextMenu={
-                        group.user?.user_id === user?.user_id
-                          ? showContextMenu
-                          : undefined
-                      }
-                      readOnly={group.user?.user_id !== user?.user_id}
-                    />
-                  ))}
-                  {filteredScripts.length === 0 && (
-                    <div className="tree-empty">
-                      <span className="tree-empty__icon">
-                        <Icon name="script" size={24} />
-                      </span>
-                      <strong>{keyword ? "没有匹配脚本" : "还没有构建脚本"}</strong>
-                      <p>
-                        {keyword
-                          ? "换个关键词试试"
-                          : "新建 Notebook 或 Python 脚本开始实验"}
-                      </p>
-                      {!keyword && (
-                        <button type="button" onClick={() => openCreateDialog("")}>
-                          <Icon name="plus" size={15} />
-                          新建脚本
-                        </button>
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          </aside>
-
-          <section className="editor-area">
-            {selected ? (
-              <ScriptWorkspace
-                key={selected.script_id}
-                script={selected}
-                editSession={
-                  editSession?.script_id === selected.script_id
-                    ? editSession
-                    : null
-                }
-                jupyterUrl={
-                  editSession?.script_id === selected.script_id
-                    ? embeddedJupyterUrl
-                    : null
-                }
-                editBusy={editBusy}
-                openError={
-                  editorOpenError?.scriptId === selected.script_id
-                    ? editorOpenError.message
-                    : null
-                }
-                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={(scriptId, event) => void closeTab(scriptId, event)}
-                onSwitchTab={switchTab}
-                onNewTab={() => openCreateDialog("")}
-                onPublish={() => openPublishDialog(selected)}
-                onInfo={setToast}
-              />
-            ) : (
-              <div className="welcome-panel">
-                <div className="welcome-panel__visual">
-                  <Icon name="script" size={42} />
+                <div className="welcome-panel">
+                  <div className="welcome-panel__visual">
+                    <Icon name="script" size={42} />
+                  </div>
+                  <span className="welcome-panel__label">构建脚本工作台</span>
+                  <h2>创建你的第一个模型脚本</h2>
+                  <p>
+                    通过 Notebook 完成数据探索，或使用 Python 脚本构建可调度的处理任务。
+                  </p>
+                  <button className="primary-button" onClick={() => openCreateDialog("")}>
+                    <Icon name="plus" size={17} />
+                    新建构建脚本
+                  </button>
                 </div>
-                <span className="welcome-panel__label">构建脚本工作台</span>
-                <h2>创建你的第一个模型脚本</h2>
-                <p>
-                  通过 Notebook 完成数据探索，或使用 Python
-                  脚本构建可调度的处理任务。
-                </p>
-                <button className="primary-button" onClick={() => openCreateDialog("")}>
-                  <Icon name="plus" size={17} />
-                  新建构建脚本
-                </button>
-              </div>
-            )}
+              )}
+            </section>
           </section>
-        </section>
         ) : activePage === "schedules" ? (
           <SchedulePage
             key={`${user?.user_id ?? "anon"}-${currentWorkspace?.workspace_id ?? "none"}`}
@@ -1111,403 +877,67 @@ function AuthenticatedModelPlatformApp() {
           <DashboardPage
             scriptCount={scripts.length}
             online={apiOnline}
-            onNavigate={(page) => {
-              navigate(pathForPage(page));
-            }}
+            onNavigate={(page) => navigate(pathForPage(page))}
           />
         )}
       </main>
 
-      {createOpen && (
-        <div className="modal-backdrop" role="presentation">
-          <section className="modal" role="dialog" aria-modal="true">
-            <div className="modal__header">
-              <div>
-                <span className="modal__eyebrow">工作副本</span>
-                <h2>新建构建脚本</h2>
-              </div>
-              <button
-                className="icon-button"
-                type="button"
-                aria-label="关闭"
-                onClick={() => setCreateOpen(false)}
-              >
-                <Icon name="close" />
-              </button>
-            </div>
-            <form onSubmit={submitCreate}>
-              <div className="destination-chip">
-                <Icon name="folder" size={16} />
-                保存到：{form.parentPath || "个人根目录"}
-              </div>
-              <label className="form-field">
-                <span>脚本名称</span>
-                <input
-                  autoFocus
-                  maxLength={255}
-                  placeholder={form.scriptType === "notebook"
-                    ? "例如：数据探索"
-                    : "例如：data_process"}
-                  value={form.name}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      name: event.target.value,
-                    }))}
-                />
-                <small>
-                  系统会自动补充
-                  {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
-                </small>
-              </label>
+      <CreateScriptModal
+        open={createOpen}
+        creating={creating}
+        form={form}
+        scripts={scripts.map((s) => ({ script_type: s.script_type, script_name: s.script_name }))}
+        onFormChange={setForm}
+        onSubmit={submitCreate}
+        onClose={() => setCreateOpen(false)}
+      />
 
-              <fieldset className="type-picker">
-                <legend>脚本类型</legend>
-                <button
-                  className={form.scriptType === "notebook" ? "is-selected" : ""}
-                  type="button"
-                  onClick={() => setForm((current) => ({
-                    ...current,
-                    scriptType: "notebook",
-                  }))}
-                >
-                  <span className="type-picker__icon type-picker__icon--notebook">
-                    <Icon name="notebook" size={22} />
-                  </span>
-                  <span>
-                    <strong>Jupyter Notebook</strong>
-                    <small>交互式数据探索与模型实验</small>
-                  </span>
-                  <span className="type-picker__check">
-                    <Icon name="check" size={14} />
-                  </span>
-                </button>
-                <button
-                  className={form.scriptType === "python" ? "is-selected" : ""}
-                  type="button"
-                  onClick={() => setForm((current) => ({
-                    ...current,
-                    scriptType: "python",
-                  }))}
-                >
-                  <span className="type-picker__icon type-picker__icon--python">
-                    <Icon name="python" size={23} />
-                  </span>
-                  <span>
-                    <strong>Python 脚本</strong>
-                    <small>批处理、训练和模型调用任务</small>
-                  </span>
-                  <span className="type-picker__check">
-                    <Icon name="check" size={14} />
-                  </span>
-                </button>
-              </fieldset>
+      <CreateFolderModal
+        open={folderDialog.open}
+        parentPath={folderDialog.parentPath}
+        name={folderDialog.name}
+        busy={folderDialog.busy}
+        onNameChange={(name) => setFolderDialog((current) => ({ ...current, name }))}
+        onSubmit={submitFolder}
+        onClose={() => setFolderDialog((current) => ({ ...current, open: false }))}
+      />
 
-              <label className="form-field">
-                <span>可见范围</span>
-                <select
-                  value={form.visibility}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      visibility: event.target.value as Visibility,
-                    }))}
-                >
-                  <option value="private">仅自己可见</option>
-                  <option value="workspace">Workspace 成员可见</option>
-                  <option value="public">公开</option>
-                </select>
-              </label>
+      <TreeContextMenu
+        contextMenu={contextMenu}
+        onOpenScript={(scriptId) => {
+          selectScript(scriptId);
+          setContextMenu(null);
+        }}
+        onRemoveScript={removeScript}
+        onOpenCreateDialog={openCreateDialog}
+        onOpenFolderDialog={openFolderDialog}
+        onChooseUpload={chooseUpload}
+        onRemoveDirectory={removeDirectory}
+        onClose={() => setContextMenu(null)}
+      />
 
-              <div className="modal__footer">
-                <button
-                  className="secondary-button"
-                  type="button"
-                  onClick={() => setCreateOpen(false)}
-                >
-                  取消
-                </button>
-                <button
-                  className="primary-button"
-                  type="submit"
-                  disabled={creating || !form.name.trim()}
-                >
-                  {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
-                  {creating ? "正在创建…" : "创建脚本"}
-                </button>
-              </div>
-            </form>
-          </section>
-        </div>
-      )}
+      <PublishModal
+        publishTarget={publishTarget}
+        releaseNote={releaseNote}
+        publishVisibility={publishVisibility}
+        publishing={publishing}
+        onReleaseNoteChange={setReleaseNote}
+        onPublishVisibilityChange={setPublishVisibility}
+        onSubmit={submitPublish}
+        onClose={() => setPublishTarget(null)}
+      />
 
-      {folderDialog.open && (
-        <div className="modal-backdrop" role="presentation">
-          <section className="modal modal--compact" role="dialog" aria-modal="true">
-            <div className="modal__header">
-              <div>
-                <span className="modal__eyebrow">WORKSPACE</span>
-                <h2>新建文件夹</h2>
-              </div>
-              <button
-                className="icon-button"
-                type="button"
-                aria-label="关闭"
-                onClick={() => setFolderDialog((current) => ({
-                  ...current,
-                  open: false,
-                }))}
-              >
-                <Icon name="close" />
-              </button>
-            </div>
-            <form onSubmit={submitFolder}>
-              <div className="destination-chip">
-                <Icon name="folder" size={16} />
-                创建到：{folderDialog.parentPath || "个人根目录"}
-              </div>
-              <label className="form-field">
-                <span>文件夹名称</span>
-                <input
-                  autoFocus
-                  maxLength={255}
-                  placeholder="例如：模型训练"
-                  value={folderDialog.name}
-                  onChange={(event) => setFolderDialog((current) => ({
-                    ...current,
-                    name: event.target.value,
-                  }))}
-                />
-              </label>
-              <div className="modal__footer">
-                <button
-                  className="secondary-button"
-                  type="button"
-                  onClick={() => setFolderDialog((current) => ({
-                    ...current,
-                    open: false,
-                  }))}
-                >
-                  取消
-                </button>
-                <button
-                  className="primary-button"
-                  type="submit"
-                  disabled={folderDialog.busy || !folderDialog.name.trim()}
-                >
-                  {folderDialog.busy
-                    ? <span className="button-spinner" />
-                    : <Icon name="folder" size={16} />}
-                  {folderDialog.busy ? "正在创建…" : "创建文件夹"}
-                </button>
-              </div>
-            </form>
-          </section>
-        </div>
-      )}
+      <VersionReceiptModal
+        publishedVersion={publishedVersion}
+        onClose={() => setPublishedVersion(null)}
+        onCopy={(message) => setToast({ tone: "success", message })}
+      />
 
-      {contextMenu && (
-        <div
-          className="tree-context-menu"
-          role="menu"
-          style={{ left: contextMenu.x, top: contextMenu.y }}
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          {contextMenu.kind === "file" && contextMenu.script ? (
-            <>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  selectScript(contextMenu.script!.script_id);
-                  setContextMenu(null);
-                }}
-              >
-                <Icon name="script" size={16} />
-                打开文件
-              </button>
-              <button
-                className="is-danger"
-                type="button"
-                role="menuitem"
-                onClick={() => void removeScript(contextMenu.script!)}
-              >
-                <Icon name="close" size={16} />
-                删除文件
-              </button>
-            </>
-          ) : (
-            <>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => openCreateDialog(contextMenu.path, "notebook")}
-              >
-                <Icon name="notebook" size={16} />
-                新建 Notebook
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => openCreateDialog(contextMenu.path, "python")}
-              >
-                <Icon name="python" size={16} />
-                新建 Python 文件
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => openFolderDialog(contextMenu.path)}
-              >
-                <Icon name="folder" size={16} />
-                新建文件夹
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => chooseUpload(contextMenu.path)}
-              >
-                <Icon name="upload" size={16} />
-                上传到此处
-              </button>
-              {contextMenu.kind === "directory" && (
-                <>
-                  <span className="tree-context-menu__separator" />
-                  <button
-                    className="is-danger"
-                    type="button"
-                    role="menuitem"
-                    onClick={() => void removeDirectory(contextMenu.path)}
-                  >
-                    <Icon name="close" size={16} />
-                    删除文件夹
-                  </button>
-                </>
-              )}
-            </>
-          )}
-        </div>
-      )}
-
-      {publishTarget && (
-        <div className="modal-backdrop" role="presentation">
-          <section className="modal publish-modal" role="dialog" aria-modal="true">
-            <div className="modal__header">
-              <div>
-                <span className="modal__eyebrow">不可变制品</span>
-                <h2>发布稳定版本</h2>
-              </div>
-              <button
-                className="icon-button"
-                type="button"
-                aria-label="关闭"
-                onClick={() => setPublishTarget(null)}
-              >
-                <Icon name="close" />
-              </button>
-            </div>
-            <form onSubmit={submitPublish}>
-              <div className="publish-source">
-                <span className={`file-icon file-icon--${publishTarget.script_type}`}>
-                  <Icon name={scriptIcon(publishTarget)} size={18} />
-                </span>
-                <span>
-                  <strong>{publishTarget.script_name}</strong>
-                  <small>当前 Workspace 工作副本</small>
-                </span>
-              </div>
-              <label className="form-field">
-                <span>发布说明</span>
-                <textarea
-                  maxLength={1000}
-                  placeholder="例如：完成数据清洗和特征工程"
-                  value={releaseNote}
-                  onChange={(event) => setReleaseNote(event.target.value)}
-                />
-                <small>稳定版本内容不可修改，可作为后续调度节点输入。</small>
-              </label>
-              <label className="form-field">
-                <span>可见范围</span>
-                <select
-                  value={publishVisibility}
-                  onChange={(event) =>
-                    setPublishVisibility(event.target.value as Visibility)}
-                >
-                  <option value="private">仅自己可见</option>
-                  <option value="workspace">Workspace 成员可见</option>
-                  <option value="public">公开</option>
-                </select>
-              </label>
-              <div className="modal__footer">
-                <button
-                  className="secondary-button"
-                  type="button"
-                  onClick={() => setPublishTarget(null)}
-                >
-                  取消
-                </button>
-                <button
-                  className="primary-button"
-                  type="submit"
-                  disabled={publishing}
-                >
-                  {publishing
-                    ? <span className="button-spinner" />
-                    : <Icon name="release" size={16} />}
-                  {publishing ? "正在发布…" : "确认发布"}
-                </button>
-              </div>
-            </form>
-          </section>
-        </div>
-      )}
-
-      {publishedVersion && (
-        <div className="modal-backdrop" role="presentation">
-          <section className="modal version-receipt" role="dialog" aria-modal="true">
-            <div className="version-receipt__check">
-              <Icon name="check" size={28} />
-            </div>
-            <span className="modal__eyebrow">STABLE VERSION</span>
-            <h2>稳定版本发布成功</h2>
-            <p>
-              {publishedVersion.version_label} 已成为不可变制品，
-              后续调度将通过 versions_id 引用它。
-            </p>
-            <div className="version-id-box">
-              <span>versions_id</span>
-              <code>{publishedVersion.versions_id}</code>
-              <button
-                type="button"
-                onClick={() => {
-                  void navigator.clipboard.writeText(
-                    publishedVersion.versions_id,
-                  );
-                  setToast({ tone: "success", message: "versions_id 已复制" });
-                }}
-              >
-                复制
-              </button>
-            </div>
-            <button
-              className="primary-button version-receipt__close"
-              type="button"
-              onClick={() => setPublishedVersion(null)}
-            >
-              完成
-            </button>
-          </section>
-        </div>
-      )}
-
-      {toast && (
-        <div className={`toast toast--${toast.tone}`} role="status">
-          <span>
-            <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
-          </span>
-          {toast.message}
-        </div>
-      )}
+      <Toast toast={toast} />
     </div>
   );
 }
+
+function ownedScriptPath(item: ScriptItem) {
+  return item.relative_path.replaceAll("\\", "/").split("/").slice(2).join("/");
+}
diff --git a/frontend/app/features/platform/ScriptWorkspace.tsx b/frontend/app/features/platform/ScriptWorkspace.tsx
index b5150bb..9a792ab 100644
--- a/frontend/app/features/platform/ScriptWorkspace.tsx
+++ b/frontend/app/features/platform/ScriptWorkspace.tsx
@@ -1,4 +1,4 @@
-import Icon from "../../components/Icon";
+import Icon from "../../components/common/Icon";
 import type {
   ActiveEditSession,
   LatestVersion,
diff --git a/frontend/app/features/platform/WorkspaceTree.tsx b/frontend/app/features/platform/WorkspaceTree.tsx
index bdb5b6c..fb4987b 100644
--- a/frontend/app/features/platform/WorkspaceTree.tsx
+++ b/frontend/app/features/platform/WorkspaceTree.tsx
@@ -1,6 +1,6 @@
 import { type MouseEvent as ReactMouseEvent, useState } from "react";
 
-import Icon from "../../components/Icon";
+import Icon from "../../components/common/Icon";
 import type {
   ScriptItem,
   WorkspaceDirectory,
diff --git a/frontend/app/features/schedules/SchedulePage.tsx b/frontend/app/features/schedules/SchedulePage.tsx
index 1a24931..532271a 100644
--- a/frontend/app/features/schedules/SchedulePage.tsx
+++ b/frontend/app/features/schedules/SchedulePage.tsx
@@ -20,7 +20,7 @@ import {
 } from "../../services/api";
 
 import { useApi } from "../../context/AuthContext";
-import Icon from "../../components/Icon";
+import Icon from "../../components/common/Icon";
 import "../../styles/schedule.css";