01 前端界面改造:Launcher 增加 DeepAnalyze + 自定义布局

目标:

  1. 在 JupyterLab 的 Launcher 页面增加一个入口:DeepAnalyze
  2. 点击后进入 “DeepAnalyze 模式”:创建一个新目录作为工作区,并打开一个自定义主界面:

你需要改哪些文件

关键 JupyterLab API(你会用到)

步骤 A:在 Launcher 增加 DeepAnalyze 入口

src/index.ts 的 plugin 里:

  1. 注入依赖:ILauncherIFileBrowserFactory(至少这两个)。
  2. 注册一个命令(command id 示例:deepanalyze:open)。
  3. 调用 launcher.add({ command, category, rank }) 把命令放进 Launcher。

建议的插件骨架(结构要点,按需增减依赖):

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'deepanalyze:plugin',
  autoStart: true,
  requires: [ILauncher, IFileBrowserFactory],
  activate: (app, launcher, browserFactory) => {
    const command = 'deepanalyze:open';
    app.commands.addCommand(command, {
      label: 'DeepAnalyze',
      execute: () => openDeepAnalyze(app, browserFactory)
    });
    launcher.add({ command, category: 'Other', rank: 50 });
  }
};

步骤 B:点击后创建工作区目录,并切换左侧文件浏览器目录

建议策略:每次进入模式时创建一个唯一目录,例如 DeepAnalyze-YYYYMMDD-HHMMSS/,并切到该目录。

关键调用(示意):

const { contents } = app.serviceManager;
const dir = await contents.newUntitled({ type: 'directory', path: '' });
await browserFactory.defaultBrowser.model.cd(dir.path);

步骤 C:构建“中间 Notebook + 右侧上下分栏”的主界面

思路:用 Lumino 的 SplitPanel 组合三个区域:

关键点:

补充:终端依赖 Jupyter Server 允许 terminals(有些部署会禁用)。如果你发现终端不可用,优先检查服务器配置与权限;或临时用自定义“聊天面板”替代真实终端 widget。

你可能要补齐的知识

验证与调试