From 5b121939e6712c912610014f7bbad3074403fc3f Mon Sep 17 00:00:00 2001
From: Wells <ww.sun@outlook.com>
Date: Fri, 2 Feb 2024 11:32:37 +0800
Subject: [PATCH] feat: allow add extra node to sandbox navigator (#100)

---
 apps/playground/src/pages/index.tsx         | 1 +
 packages/designer/src/sandbox/navigator.tsx | 7 ++++++-
 packages/designer/src/sandbox/sandbox.tsx   | 6 ++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
index 29dc363..0767485 100644
--- a/apps/playground/src/pages/index.tsx
+++ b/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">
diff --git a/packages/designer/src/sandbox/navigator.tsx b/packages/designer/src/sandbox/navigator.tsx
index 0892d7d..e876bcb 100644
--- a/packages/designer/src/sandbox/navigator.tsx
+++ b/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>
     );
   }
diff --git a/packages/designer/src/sandbox/sandbox.tsx b/packages/designer/src/sandbox/sandbox.tsx
index 44ff460..52681b5 100644
--- a/packages/designer/src/sandbox/sandbox.tsx
+++ b/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}>