基于 React 打造高自由度的 IDE 布局系统

<BoxPanel>
  <SlotRenderer slot="top" />
  <SplitPanel direction="left-to-right">
    <TabbarRender slot="left"></TabbarRender>
    <SplitPanel direction="top-to-bottom">
      <SlotRenderer slot="main" />
      <SlotRenderer slot="bottom" />
    </SplitPanel>
    <TabbarRender slot="right"></TabbarRender>
  </SplitPanel>
  <SlotRenderer slot="bottom-bar" />
</BoxPanel>

export const BoxPanel: React.FC<{
  children?: ChildComponent | ChildComponent[];
  className?: string;
  direction?: Layout.direction;
  flex?: number;
}> = (({ className, children = [], direction = 'left-to-right', ...restProps }) => {
    // convert children to list
  const arrayChildren = React.Children.toArray(children);

  return (
    <div
      {...restProps}
      className={clsx(styles['box-panel'], className)}
      style={{flexDirection: Layout.getFlexDirection(direction)}}>
      {
        arrayChildren.map((child, index) => (
          <div
            key={index}
            className={clsx(styles.wrapper)}
            style={child['props'] ? {
              flex: child['props'].flex,
              overflow: child['props']?.overflow,
              zIndex: child['props']?.zIndex,
              } : {}}>
            {child}
          </div>
        ))
      }
    </div>
  );
});

<SplitPanel direction='top-to-bottom'>
  <div flex={2} flexGrow={1} minResize={200} />
  <div flex={1} minResize={160} />
</SplitPanel>

export function DefaultLayout() {
  return <BoxPanel direction='top-to-bottom'>
    <SlotRenderer slot='top' />
    <SplitPanel overflow='hidden' id='main-horizontal' flex={1}>
      <SlotRenderer slot='left' defaultSize={310}  minResize={204} minSize={49} />
      <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
        <SlotRenderer flex={2} flexGrow={1} minResize={200} slot='main' />
        <SlotRenderer flex={1} minResize={160} slot='bottom' />
      </SplitPanel>
      <SlotRenderer slot='right' defaultSize={310} minResize={200} minSize={41} />
    </SplitPanel>
    <SlotRenderer slot='statusBar' />
  </BoxPanel>;
}

// 默认的 SlotRenderer，多个视图依次渲染
function DefaultRenderer({ components }: RendererProps) {
  return components && <ErrorBoundary>
    {
      components.map((componentInfo, index: number) => {
        // 默认的只渲染一个
        const Component = componentInfo.views[0].component!;
        return <Component {...(componentInfo.options && componentInfo.options.initialProps)} key={`${Component.name}-${index}`} />;
      })
    }
  </ErrorBoundary>;
}

<TabbarViewBase
  tabSize={44} // 单个Tab的尺寸，用于计算当前tab内容是否超出视区
  MoreTabView={IconElipses} // tab内容超出视区后显示的菜单按钮，默认是一个...图标
  TabView={IconTabView} // 单个Tab的渲染组件，框架提供了IconTab和TextTab两种实现
  barSize={40} // Tabbar的尺寸，用于计算Tabbar收起时插槽的尺寸
  panelBorderSize={1} // Tabbar与Tabpanel之间的边框
  />

const { currentContainerId } = tabbarService;
const panelVisible = { zIndex: 1, display: 'block' };
const panelInVisible = { zIndex: -1, display: 'none' };
return (
  <div className={styles.tab_panel}>
    {tabbarService.visibleContainers.map((component) => {
      const containerId = component.options!.containerId;
      const titleMenu = tabbarService.getTitleToolbarMenu(containerId);
      return <div
        key={containerId}
        style={currentContainerId === containerId ? panelVisible : panelInVisible}>
          <ErrorBoundary>
            <PanelView titleMenu={titleMenu} side={side} component={component} />
          </ErrorBoundary>
      </div>;
    })}
  </div>
);

<AccordionContainer
  views={component.views}
  containerId={component.options!.containerId}
  alignment="vertical" // TODO
/>

export const LeftTabbarRenderer: React.FC = () => {
  const { side } = React.useContext(TabbarConfig);
  const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
  return (<div className={styles.left_tab_bar} onContextMenu={tabbarService.handleContextMenu}>
    <TabbarViewBase tabSize={48} MoreTabView={IconElipses} TabView={IconTabView} barSize={48} margin={90} panelBorderSize={1} />
    <InlineMenuBar className={styles.vertical_icons} menus={layoutService.getExtraMenu()} />
  </div>);
};

const ContainerView: React.FC<{
  component: ComponentRegistryInfo; side: string; titleMenu: IMenu;
}> = (({ component, titleMenu, side }) => {
  return (
    <div className={styles.view_container}>
      <TitleBar title={title!} menubar={<InlineActionBar menus={titleMenu} />} />
      <AccordionContainer views={component.views} containerId={component.options!.containerId} />
    </div>
  );
});

export const LeftTabPanelRenderer: React.FC = () => <BaseTabPanelView PanelView={ContainerView} />;

export const LeftTabRenderer = ({className, components}: {className: string, components: ComponentRegistryInfo[]}) => (
  <TabRendererBase side='left' direction='left-to-right' className={clsx(className, 'left-slot')} components={components} TabbarView={LeftTabbarRenderer} TabpanelView={LeftTabPanelRenderer} />
);

@Domain(SlotRendererContribution)
export class MainLayoutModuleContribution implements SlotRendererContribution {
  registerRenderer(registry: SlotRendererRegistry) {
    registry.registerSlotRenderer('left', LeftTabRenderer);
  }
}