[Question] 参考官方文档视图消费，使用自定义视图替换顶部插槽无效

[HaiBoWon]

描述你的问题（Describe you question here）

在ide-electron基础上，根据官方文档的，常见集成场景-自定义视图-视图消费的用例说明，在src/modules新增了一个custom-topbar模块，并在src/browser/layout.ts 中 设置 SlotLocation.top 无效

custom-topbar 具体代码：

//  custom-topbar/index.ts
export * from './browser'

//  custom-topbar/browser/index.ts
import { Provider, Injectable } from '@opensumi/di';
import { BrowserModule} from '@opensumi/ide-core-browser';
import { TestContribution, TestToolbarSlotContribution } from './topbar.contribution';
@Injectable()
export class CustomToolbarModule extends BrowserModule {
  providers?: Provider[] = [
    TestContribution,
    TestToolbarSlotContribution,
  ];
}

//  custom-topbar/browser/topbar.contribution.ts
import { Domain, SlotRendererContribution, SlotRendererRegistry, SlotLocation } from '@opensumi/ide-core-browser';
import { ComponentContribution, ComponentRegistry } from '@opensumi/ide-core-browser/lib/layout';
import { TestToolbar, TopSlotRenderer } from './topbar.view';

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

@Domain(SlotRendererContribution)
export class TestToolbarSlotContribution implements SlotRendererContribution {
  registerRenderer(registry: SlotRendererRegistry) {
    registry.registerSlotRenderer(SlotLocation.top, TopSlotRenderer);
  }
}

//  custom-topbar/browser/topbar.view.tsx

import React from 'react';
import { ComponentRegistryInfo } from '@opensumi/ide-core-browser';

export const TopSlotRenderer: (props: {
  className: string;
  components: ComponentRegistryInfo[];
}) => any = ({ className, components }) => {
  const tmp = components.map(item => item.views[0].component!);
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      {tmp.map((Component, index) => (
        <Component key={index} />
      ))}
    </div>
  );
}

export const TestToolbar = () => (
  <div
    style={{
      lineHeight: '35px',
      flex: 1,
      padding: '0 20px',
      textAlign: 'center',
      backgroundColor: 'var(--kt-menubar-background)'
    }}
  >
    I'm a Test ToolBar
  </div>
);

在 src/browser/layout.ts 使用，最后无展示

export const customLayoutConfig: LayoutConfig = {
  [SlotLocation.top]: {
    modules: ['@opensumi/ide-menu-bar', 'test-toolbar'],
  },
  [SlotLocation.action]: {
    modules: ['@opensumi/ide-toolbar-action'],
  },
  [SlotLocation.left]: {
    modules: [
      '@opensumi/ide-explorer',
      '@opensumi/ide-search',
      '@opensumi/ide-scm',
      '@opensumi/ide-extension-manager',
      '@opensumi/ide-debug',
    ],
  },
  [SlotLocation.right]: {
    modules: [],
  },
  [SlotLocation.main]: {
    modules: ['@opensumi/ide-editor'],
  },
  [SlotLocation.bottom]: {
    modules: [
      '@opensumi/ide-terminal-next',
      '@opensumi/ide-output',
      'debug-console',
      '@opensumi/ide-markers',
      '@opensumi/ide-refactor-preview',
    ],
  },
  [SlotLocation.statusBar]: {
    modules: ['@opensumi/ide-status-bar'],
  },
  [SlotLocation.extra]: {
    modules: ['breadcrumb-menu'],
  },
};

[Ricbet]

CustomToolbarModule 有配置在这里吗 https://github.com/opensumi/opensumi-module-samples/blob/f06ccae5a57fba5d47d228ae5448a3805ea18892/example/src/browser/index.ts#L41

[HaiBoWon]

CustomToolbarModule 有配置在这里吗 https://github.com/opensumi/opensumi-module-samples/blob/f06ccae5a57fba5d47d228ae5448a3805ea18892/example/src/browser/index.ts#L41

可以了，谢谢