feat: allow add extra node to sandbox navigator (#100)

apps/playground/src/pages/index.tsx

@@ -133,6 +133,7 @@ export default function App() {
                   setMenuLoading(false);
                 }
               }}
+              navigatorExtra={<Button size="small">hello world</Button>}
             />
           </WorkspaceView>
           <WorkspaceView mode="code">

packages/designer/src/sandbox/navigator.tsx

@@ -33,6 +33,10 @@ interface NavigatorProps {
   onForward?: () => void;
   onRefresh?: () => void;
   onInputEnter?: (text: string, e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /**
+   * 附加信息
+   */
+  extra?: React.ReactNode;
 }
 
 interface NavigatorState {
@@ -68,7 +72,7 @@ export class Navigator extends React.Component<NavigatorProps, NavigatorState> {
   };
 
   render() {
-    const { disabled, onBack, onForward, onRefresh } = this.props;
+    const { disabled, onBack, onForward, onRefresh, extra } = this.props;
     return (
       <Box
         className="navigator"
@@ -93,6 +97,7 @@ export class Navigator extends React.Component<NavigatorProps, NavigatorState> {
           disabled={disabled}
         />
         <ViewportSwitch />
+        {extra}
       </Box>
     );
   }

packages/designer/src/sandbox/sandbox.tsx

@@ -35,6 +35,10 @@ export type SandboxProps = Omit<CodeSandboxProps, 'files' | 'eventHandlers' | 'o
   onViewChange?: (data: any, config?: ISandboxEventHandlerConfig) => void;
   onMessage?: (data: any, config?: ISandboxEventHandlerConfig) => void;
   onLoad?: (config?: ISandboxEventHandlerConfig) => void;
+  /**
+   * 沙箱导航栏扩展
+   */
+  navigatorExtra?: React.ReactNode;
 };
 
 export interface CombinedSandboxRef {
@@ -296,6 +300,7 @@ export const Sandbox = observer(
     selectionTools,
     bundlerURL,
     mode = 'combined',
+    navigatorExtra,
     ...props
   }: SandboxProps) => {
     const bundlerUrl = bundlerURL ?? 'https://codesandbox.fn.netease.com';
@@ -362,6 +367,7 @@ export const Sandbox = observer(
             }
             workspace.selectSource.clear();
           }}
+          extra={navigatorExtra}
         />
         <Simulator>
           <Viewport selectionTools={selectionTools}>