chore: optimize sidebar content

Author: zhoushaw

packages/visualizer-report/src/App.tsx

@@ -1,13 +1,10 @@
-import { BrowserRouter, Link, Route, Routes } from '@modern-js/runtime/router';
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 import { Report } from './pages/Report';
 import { Home } from './pages/Home';
 
 export default () => {
   return (
     <BrowserRouter>
-      <ul>
-        <Link to="/">Back to Home</Link>
-      </ul>
       <Routes>
         <Route index element={<Home />} />
         <Route path="report" element={<Report />} />

packages/visualizer-report/src/pages/Report.tsx

@@ -1,11 +1,13 @@
 import { Visualizer } from '@midscene/visualizer';
 import React, { useEffect, useState } from 'react';
+import { useNavigate } from '@modern-js/runtime/router';
 
 declare module '@midscene/visualizer' {
   export function Visualizer(dumpInfo: any): any;
 }
 
 export function Report() {
+  const navigation = useNavigate();
   const [dumpJson, setDumpJson] = useState<any>(null);
   const [isLoading, setLoading] = useState<any>(true);
   // eslint-disable-next-line node/prefer-global/url-search-params
@@ -32,7 +34,16 @@ export function Report() {
   return (
     <div className="container-box">
       <div>
-        <main>{!isLoading && <Visualizer dump={dumpJson} />}</main>
+        <main>
+          {!isLoading && (
+            <Visualizer
+              dump={dumpJson}
+              logoAction={() => {
+                navigation('/');
+              }}
+            />
+          )}
+        </main>
         <div></div>
       </div>
     </div>

packages/visualizer/src/component/sidebar.tsx

@@ -81,7 +81,7 @@ const SideItem = (props: {
   );
 };
 
-const Sidebar = (props: { hideLogo?: boolean }): JSX.Element => {
+const Sidebar = (props: { hideLogo?: boolean; logoAction?: () => void }): JSX.Element => {
   const groupedDumps = useExecutionDump((store) => store.dump);
   const setActiveTask = useExecutionDump((store) => store.setActiveTask);
   const activeTask = useExecutionDump((store) => store.activeTask);
@@ -189,9 +189,13 @@ const Sidebar = (props: { hideLogo?: boolean }): JSX.Element => {
         <div className="brand" onClick={reset} style={{ display: props?.hideLogo ? 'none' : 'flex' }}>
           <Logo
             style={{ width: 70, height: 70, margin: 'auto' }}
-            // onClick={() => {
-            //   location.reload();
-            // }}
+            onClick={() => {
+              if (props.logoAction) {
+                props.logoAction();
+              } else {
+                location.reload();
+              }
+            }}
           />
         </div>
         <div className="task-list">{sideList}</div>

packages/visualizer/src/index.tsx

@@ -16,7 +16,11 @@ import Sidebar from '@/component/sidebar';
 
 const { Dragger } = Upload;
 
-export function Visualizer(props: { hideLogo?: boolean; dump?: GroupedActionDump[] }): JSX.Element {
+export function Visualizer(props: {
+  hideLogo?: boolean;
+  logoAction?: () => void;
+  dump?: GroupedActionDump[];
+}): JSX.Element {
   const { dump } = props;
 
   const executionDump = useExecutionDump((store) => store.dump);
@@ -157,7 +161,7 @@ export function Visualizer(props: { hideLogo?: boolean; dump?: GroupedActionDump
         }}
       >
         <Panel maxSize={95} defaultSize={20}>
-          <Sidebar hideLogo={props?.hideLogo} />
+          <Sidebar hideLogo={props?.hideLogo} logoAction={props?.logoAction} />
         </Panel>
         <PanelResizeHandle
           onDragging={(isChanging) => {