如何自定义 OpenSumi 视图内容？

[erha19]

目前框架内存在较多的视图拓展能力，其中包括：

1. 视图追加类型

1.1 添加侧边栏/底部面板

代码实现：

registerComponent(registry: ComponentRegistry) {
	registry.register('@opensumi/ide-explorer', [], {
    iconClass: getIcon('explorer'),
    title: localize('explorer.title'),
    priority: 10,
    containerId: EXPLORER_CONTAINER_ID,
  });
}

1.2 增加自定义视图

相关代码：
[自定义布局后注册模块]：

@Domain(ComponentContribution)
export class TestContribution implements ComponentContribution {
  registerComponent(registry: ComponentRegistry) {
    registry.register(
      'test-toolbar',
      [
        {
          id: 'test-toolbar',
          component: TestToolbar,
          name: '测试'
        }
      ],
      {
        containerId: 'test-toolbar'
      }
    );
  }
}

布局配置：

layoutConfig: {
  ...defaultConfig,
  ...{[SlotLocation.top]: {
    modules: ['@opensumi/ide-menu-bar', 'test-toolbar'],
  }},
  'customAction': {
    modules: ['test-toolbar']
  },
},

2. 修改部分区域样式

2.1 覆盖某个布局区块的渲染模板

如修改右侧组件渲染模板，从侧边栏渲染修改为按钮

// 通过 SlotRendererContribution 替换顶部的 SlotRenderer，将默认的上下平铺模式改成横向的 flex 模式：
@Domain(SlotRendererContribution)
export class TestToolbarSlotContribution implements SlotRendererContribution {
  registerRenderer(registry: SlotRendererRegistry) {
    registry.registerSlotRenderer(SlotLocation.top, TopSlotRenderer);
  }
}

2.2 通过替换渲染模板实现垂直布局

@Injectable()
export class TopTabModule extends BrowserModule {
  providers: Provider[] = [
    TopTabContribution,
  ];

  component = TopTab;
}

@Domain(ComponentContribution, SlotRendererContribution)
export class TopTabContribution implements ComponentContribution, SlotRendererContribution {

  registerComponent(registry: ComponentRegistry): void {
    registry.register('@opensumi/ide-top-tab', {
      id: 'top-tab',
      component: TopTab,
    }, {
      size: 56,
    });
  }

  registerRenderer(registry: SlotRendererRegistry) {
    registry.registerSlotRenderer('left', LeftTabRenderer as any);
    registry.registerSlotRenderer('center', CenterTabRenderer as any);
    registry.registerSlotRenderer('right', RightTabRenderer as any);
  }
}

2.3 通过自定义模块渲染替换 Menubar 区域

相关代码：

registerComponent(registry: ComponentRegistry) {
  registry.register(
    '@o2/menubar',
    {
      id: 'o2-custom-menubar',
      component: O2CodeOnlineTopView,
    },
    {
      containerId: 'o2-code-online',
      size: 27,
    },
  );
}

2.4 修改编辑器图标

相关代码：

@Injectable()
@Domain(ComponentContribution)
export class MenuBarContribution implements ComponentContribution {
  // Component key
  static MenuBarContainer = '@opensumi/menu-bar-example';

  registerComponent(registry: ComponentRegistry): void {
    registry.register(MenuBarContribution.MenuBarContainer, {
      component: MenuBarView,
      id: MenuBarContribution.MenuBarContainer,
    });
  }
}

/**
 * Custom menu bar component.
 * Add a logo in here, and keep
 * opensumi's original menubar.
 */
export const MenuBarView = () => (
  <div
    id={VIEW_CONTAINERS.MENUBAR}
    className={styles.menu_bar_view}
    style={{ height: LAYOUT_VIEW_SIZE.MENUBAR_HEIGHT }}
  >
    <span className={styles.menu_bar_logo} />
    <MenuBar />
  </div>
);

layoutConfig: {
  ...defaultConfig,
  ...{
    [SlotLocation.top]: {
      modules: ['@opensumi/menu-bar-example', 'toolbar'],
    },
  },
}

2.5 侧边栏图标

通过手动注册，修改侧边栏图标，代码如下：

  registerComponent(registry: ComponentRegistry) {
    registry.register('@opensumi/ide-explorer', [], {
      iconClass: getIcon('Gitlab-fill'),
      title: 'Gitlab',
      priority: 10,
      containerId: EXPLORER_CONTAINER_ID,
    });
  }

2.6 追加侧边栏用户图标

代码实现：opensumi/core#1741

2.7 新增/修改欢迎页面

相关代码：
https://github.com/opensumi/opensumi-module-samples/tree/main/modules/use-antd

2.8 自定义空面板 Welcome 页面

相关代码：

@Domain(ClientAppContribution)
export class WelcomeContentSampleContribution implements ClientAppContribution {
  @Autowired(IViewsRegistry)
  private readonly viewsRegistry: IViewsRegistry

  onDidStart() {
    this.viewsRegistry.registerViewWelcomeContent(RESOURCE_VIEW_ID, {
      content: `Add new Welcome Content\n[Open Folder 2.0](command:${FILE_COMMANDS.OPEN_FOLDER.id})`,
      group: ViewContentGroups.Open,
      order: 1,
    });
  }
}

2.9 Toolbar 区域拓展及自定义

2.10 修改编辑器底部默认渲染组件

相关代码：

@Domain(ComponentContribution)
export class EditorEmptyComponentContribution implements ComponentContribution {
  registerComponent(registry: ComponentRegistry) {
    registry.register('editor-empty', {
      id: 'editor-empty',
      component: EditorEmptyComponent,
      initialProps: {},
    });
  }
}

3. 插件定制

3.1 侧边栏视图拓展

3.2 颜色/图标主题

3.3 修改主题图标（待实现）

可以通过 webfont 工具将本地的 svg 图标集合转化为 WOFF 字体后实现图标的替换（映射）

3.4 Toolbar 区域拓展

4. 其他资源

4.1 内置图标集

OpenSumi 内置图标：https://opensumi.github.io/core/iconfont.html

4.2 内置组件

OpenSumi Components：https://github.com/opensumi/core/tree/main/packages/components