@blocklet/launcher-layout 2.13.31 → 2.13.33

package/lib/LaunchResultMessage/demo/default.js

@@ -1,18 +1,82 @@
+import { Grid } from '@mui/material';
 import Button from '@arcblock/ux/lib/Button';
 import LaunchResultMessage from '../../launch-result-message';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Demo() {
-  return /*#__PURE__*/_jsx(LaunchResultMessage, {
-    variant: "error",
-    title: "I am Title",
-    subTitle: "I am sub title",
-    footer: /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(Button, {
-        color: "primary",
-        variant: "contained",
-        children: "Click Me"
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    spacing: 12,
+    mt: 2,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sm: 6,
+      md: 3,
+      children: /*#__PURE__*/_jsx(LaunchResultMessage, {
+        variant: "success",
+        title: "Success Title",
+        subTitle: "This is a success message.",
+        footer: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            variant: "contained",
+            children: "Success Action"
+          })
+        })
       })
-    })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sm: 6,
+      md: 3,
+      children: /*#__PURE__*/_jsx(LaunchResultMessage, {
+        variant: "error",
+        title: "Error Title",
+        subTitle: "This is an error message.",
+        footer: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            variant: "contained",
+            children: "Error Action"
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sm: 6,
+      md: 3,
+      children: /*#__PURE__*/_jsx(LaunchResultMessage, {
+        variant: "info",
+        title: "Info Title",
+        subTitle: "This is an info message.",
+        footer: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            variant: "contained",
+            children: "Info Action"
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sm: 6,
+      md: 3,
+      children: /*#__PURE__*/_jsx(LaunchResultMessage, {
+        variant: "loading",
+        title: "Loading Title",
+        subTitle: "This is a loading message.",
+        footer: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "primary",
+            variant: "contained",
+            disabled: true,
+            children: "Loading Action"
+          })
+        })
+      })
+    })]
   });
 }
 Demo.propTypes = {};

package/lib/LaunchResultMessage/result-message.stories.js

@@ -1,4 +1,8 @@
+import { Container } from '@mui/material';
+import { ThemeProvider } from '@arcblock/ux/lib/Theme';
+import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
 import Default from './demo/default';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: 'Blocklet-Launcher/ResultMessage',
   parameters: {
@@ -6,7 +10,17 @@ export default {
     readme: {
       sidebar: '<!-- PROPS -->'
     }
-  }
+  },
+  decorators: [Story => /*#__PURE__*/_jsxs(ThemeProvider, {
+    prefer: "system",
+    children: [/*#__PURE__*/_jsx(Container, {
+      sx: {
+        textAlign: 'right',
+        py: 1
+      },
+      children: /*#__PURE__*/_jsx(ThemeModeToggle, {})
+    }), /*#__PURE__*/_jsx(Story, {})]
+  })]
 };
 Default.argTypes = {};
 Default.storyName = 'ResultMessage';

package/lib/Layout/demo/child-progress-in-memory-mode.js

@@ -1,12 +1,9 @@
 import { useEffect } from 'react';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider, useStepContext } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'wizard',
@@ -51,6 +48,9 @@ function TestContent() {
   });
 }
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
@@ -58,23 +58,8 @@ export default function Demo() {
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx(TestContent, {})
         })

package/lib/Layout/demo/child-progress.js

@@ -1,11 +1,8 @@
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'wizard',
@@ -34,29 +31,17 @@ const testSteps = [{
   path: ''
 }];
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx("p", {
             children: "set children in steps data"

package/lib/Layout/demo/constants.js

@@ -1,4 +1,10 @@
 import styled from '@emotion/styled';
+import IconButton from '@mui/material/IconButton';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const steps = [{
   key: 'wizard',
   name: 'Name1 Wizard',
@@ -20,6 +26,15 @@ export const BodyContainer = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: 700px;
+  display: flex;
+  flex-direction: column;
+  > div {
+    flex: 1;
+  }
+  .ll-container {
+    flex: 1;
+  }
 `;
 export const Content = styled.div`
   box-sizing: border-box;
@@ -29,4 +44,33 @@ export const Content = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-`;
+`;
+export function HeaderEndAddons() {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ThemeModeToggle, {}), /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+        style: {
+          fontSize: 28
+        }
+      })
+    })]
+  });
+}
+export function getNavLogo(mode) {
+  return {
+    desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+      style: {
+        filter: mode === 'dark' ? 'invert(1)' : 'none'
+      },
+      width: "145",
+      height: "48"
+    }),
+    mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+      style: {
+        filter: mode === 'dark' ? 'invert(1)' : 'none'
+      },
+      width: 32,
+      height: 32
+    })
+  };
+}

package/lib/Layout/demo/default.js

@@ -1,11 +1,8 @@
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, getNavLogo, HeaderEndAddons } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Demo() {
   const testSteps = [{
@@ -24,29 +21,17 @@ export default function Demo() {
     path: '',
     description: 'I am desc 3'
   }];
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsxs(Content, {
           children: [/*#__PURE__*/_jsxs("p", {
             children: [/*#__PURE__*/_jsx("b", {

package/lib/Layout/demo/extra-nav.js

@@ -0,0 +1,108 @@
+import { useTheme } from '@mui/material';
+import AppsIcon from '@mui/icons-material/Apps';
+import Layout from '../../index';
+import { StepProvider } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, getNavLogo, HeaderEndAddons } from './constants';
+
+// helper to remove icon for display
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getSerializable(obj) {
+  const {
+    icon,
+    ...rest
+  } = obj;
+  return rest;
+}
+export default function Demo() {
+  const testSteps = [{
+    key: 'wizard',
+    name: 'Name1 Wizard',
+    path: '/',
+    description: 'I am desc 1'
+  }, {
+    key: 'select-node',
+    name: 'Name2 select node',
+    path: '/launch/select',
+    description: 'I am desc 2'
+  }, {
+    key: 'launch-app',
+    name: 'Name3 launch app',
+    path: '',
+    description: 'I am desc 3'
+  }];
+  const {
+    palette
+  } = useTheme();
+
+  // Example 2: With Tooltip and Description
+  const tooltipExtraNav = {
+    link: 'https://www.baidu.com',
+    text: 'My Apps',
+    appText: 'View My Apps',
+    icon: /*#__PURE__*/_jsx(AppsIcon, {}),
+    tooltipText: 'View my apps',
+    description: 'Your apps will be shown here'
+  };
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      children: /*#__PURE__*/_jsxs(Layout, {
+        locale: "en",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
+        extraNav: tooltipExtraNav,
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsxs("p", {
+            children: [/*#__PURE__*/_jsx("b", {
+              children: "extraNav"
+            }), " is used to add additional navigation items to the navigation bar, supporting the following features:"]
+          }), /*#__PURE__*/_jsxs("div", {
+            children: [/*#__PURE__*/_jsx("h4", {
+              children: "Property Description"
+            }), /*#__PURE__*/_jsxs("ul", {
+              children: [/*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "text"
+                }), ": Main display text"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "appText"
+                }), ": Optional alternative text (displayed on mobile)"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "link"
+                }), ": Link to navigate to when clicked"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "icon"
+                }), ": Optional icon (supports any React node)"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "tooltipText"
+                }), ": Optional tooltip text"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "description"
+                }), ": Optional description text"]
+              }), /*#__PURE__*/_jsxs("li", {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: "buttonProps"
+                }), ": Custom button properties (supports all MUI Button props)"]
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx("pre", {
+          style: {
+            background: '#f5f5f5',
+            padding: 16,
+            borderRadius: 4
+          },
+          children: JSON.stringify(getSerializable(tooltipExtraNav), null, 2)
+        })]
+      })
+    })
+  });
+}
+Demo.propTypes = {};

package/lib/Layout/demo/logo-url.js

@@ -1,37 +1,22 @@
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, steps } from './constants';
+import { BodyContainer, Content, steps, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: steps,
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
         logoUrl: "https://store.blocklet.dev/assets/z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV/logo.png",
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsxs("p", {
             children: [/*#__PURE__*/_jsx("b", {

package/lib/Layout/demo/longest-steps-for-launch.js

@@ -1,12 +1,9 @@
 import { useEffect } from 'react';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider, useStepContext } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'introduction',
@@ -76,6 +73,9 @@ function TestContent() {
   });
 }
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
@@ -83,23 +83,8 @@ export default function Demo() {
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx(TestContent, {})
         })

package/lib/Layout/demo/memory-mode.js

@@ -1,12 +1,9 @@
 import { useEffect } from 'react';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider, useStepContext } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'wizard',
@@ -30,6 +27,9 @@ function TestContent() {
   });
 }
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
@@ -37,23 +37,8 @@ export default function Demo() {
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx(TestContent, {})
         })

package/lib/Layout/demo/old-code-compatible.js

@@ -1,13 +1,11 @@
 import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
 import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Layout from '../../index';
 import { StepProvider } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, LogoContainer, steps } from './constants';
+import { BodyContainer, Content, LogoContainer, steps, HeaderEndAddons } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Demo() {
   const theme = useTheme();
@@ -26,13 +24,7 @@ export default function Demo() {
       steps: steps,
       children: /*#__PURE__*/_jsx(Layout, {
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
         navLogo: logo,
         children: /*#__PURE__*/_jsx(Content, {
           children: "I am test content"

package/lib/Layout/demo/optional-step.js

@@ -1,12 +1,9 @@
 import { useEffect } from 'react';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider, useStepContext } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'wizard',
@@ -42,6 +39,9 @@ function TestContent() {
   });
 }
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
@@ -49,23 +49,8 @@ export default function Demo() {
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx(TestContent, {})
         })

package/lib/Layout/demo/show-child.js

@@ -1,12 +1,9 @@
 import { useEffect } from 'react';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Button from '@mui/material/IconButton';
+import { useTheme } from '@mui/material';
 import Layout from '../../index';
 import { StepProvider, useStepContext } from '../../context/step';
 import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content } from './constants';
+import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testSteps = [{
   key: 'start-app',
@@ -74,6 +71,9 @@ function TestContent() {
   });
 }
 export default function Demo() {
+  const {
+    palette
+  } = useTheme();
   return /*#__PURE__*/_jsx(BodyContainer, {
     children: /*#__PURE__*/_jsx(StepProvider, {
       steps: testSteps,
@@ -81,23 +81,8 @@ export default function Demo() {
       children: /*#__PURE__*/_jsx(Layout, {
         locale: "zh",
         blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(Button, {
-          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-            style: {
-              fontSize: 28
-            }
-          })
-        }),
-        navLogo: {
-          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-            width: "145",
-            height: "48"
-          }),
-          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-            width: 32,
-            height: 32
-          })
-        },
+        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
+        navLogo: getNavLogo(palette.mode),
         children: /*#__PURE__*/_jsx(Content, {
           children: /*#__PURE__*/_jsx(TestContent, {})
         })

package/lib/Layout/layout.stories.js

@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@arcblock/ux/lib/Theme';
 import Default from './demo/default';
 import LogoUrl from './demo/logo-url';
 import ChildProgress from './demo/child-progress';
@@ -7,6 +8,8 @@ import ChildProgressInMemoryMode from './demo/child-progress-in-memory-mode';
 import ShowChild from './demo/show-child';
 import LongestStepsForLaunch from './demo/longest-steps-for-launch';
 import OldCodeCompatible from './demo/old-code-compatible';
+import ExtraNav from './demo/extra-nav';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: 'Blocklet-Launcher/Layout',
   parameters: {
@@ -14,8 +17,12 @@ export default {
     readme: {
       sidebar: '<!-- PROPS -->'
     }
-  }
+  },
+  decorators: [Story => /*#__PURE__*/_jsx(ThemeProvider, {
+    prefer: "system",
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
 };
 Default.argTypes = {};
 Default.storyName = 'Default';
-export { Default, LogoUrl, ChildProgress, MemoryMode, OptionalStep, ChildProgressInMemoryMode, ShowChild, LongestStepsForLaunch, OldCodeCompatible };
+export { Default, LogoUrl, ChildProgress, MemoryMode, OptionalStep, ChildProgressInMemoryMode, ShowChild, LongestStepsForLaunch, OldCodeCompatible, ExtraNav };

package/lib/content.js

@@ -44,7 +44,7 @@ const Container = styled.div`
     align-items: center;
 
     width: 100%;
-    background: ${props => props.theme.palette.common.white};
+    background: ${props => props.theme.palette.background.paper};
 
     .create-button {
       margin-right: 32px;

package/lib/header.js

@@ -171,6 +171,7 @@ function AppTitle({
     });
   }
   return /*#__PURE__*/_jsx(AppLink, {
+    className: "app-link",
     target: "_blank",
     href: joinUrl(blockletMeta?.registryUrl || '', `/blocklets/${blockletMeta?.did}`),
     title: name,
@@ -203,7 +204,7 @@ AppTitle.defaultProps = {
 };
 export default AppHeader;
 const AppLink = styled.a`
-  color: ${props => props.theme.palette.common.black};
+  color: ${props => props.theme.palette.text.primary};
   text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -264,7 +265,7 @@ const Container = styled.div`
     flex-shrink: 0;
     font-size: 14px;
     font-weight: 600;
-    color: ${props => props.theme.palette.grey[500]};
+    color: ${props => props.theme.palette.text.secondary};
     ${props => props.theme.breakpoints.up('md')} {
       margin-bottom: 4px;
     }
@@ -313,7 +314,7 @@ const Container = styled.div`
       align-items: center;
       flex: 1;
       height: 100%;
-      color: ${props => props.theme.palette.common.black};
+      color: ${props => props.theme.palette.text.primary};
       font-weight: 700;
       ${props => props.theme.breakpoints.up('sm')} {
         font-size: 18px;

package/lib/index.js

@@ -1,8 +1,7 @@
 import Center from '@arcblock/ux/lib/Center';
-import { create } from '@arcblock/ux/lib/Theme';
+import { deepmerge } from '@arcblock/ux/lib/Theme';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import styled from '@emotion/styled';
-import { CircularProgress, Hidden, StyledEngineProvider, ThemeProvider, Typography, useMediaQuery } from '@mui/material';
+import { CircularProgress, Hidden, styled, StyledEngineProvider, ThemeProvider, Typography, useMediaQuery, useTheme } from '@mui/material';
 import isObject from 'lodash/isObject';
 import PropTypes from 'prop-types';
 import { Suspense, isValidElement } from 'react';
@@ -14,7 +13,7 @@ import Nav from './nav';
 import SmallCircleProgress from './small-circle-progress';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HEADER_HEIGHT_MD = '72px';
-const MobileContent = styled.div`
+const MobileContent = styled('div')`
   box-sizing: border-box;
   display: flex;
   overflow: hidden;
@@ -22,13 +21,15 @@ const MobileContent = styled.div`
   height: 100%;
   padding-top: ${HEADER_HEIGHT_MD};
 `;
-const PcContent = styled.div`
+const PcContent = styled('div')`
   display: flex;
   min-width: 900px;
   max-width: ${props => props.contentMaxWidth};
   max-height: 880px;
   border-radius: 8px;
-  background-color: #fff;
+  background-color: ${({
+  theme
+}) => theme.palette.background.paper};
   width: ${props => props.width || '80%'};
   height: ${props => props.height || '80%'};
 
@@ -38,21 +39,6 @@ const PcContent = styled.div`
     max-height: 100%;
   }
 `;
-const theme = create({
-  typography: {
-    fontSize: 14
-  },
-  palette: {
-    primary: {
-      main: '#1dc1c7',
-      contrastText: '#fff'
-    },
-    secondary: {
-      main: '#1976d2',
-      contrastText: '#fff'
-    }
-  }
-});
 function Layout({
   blockletMeta: tmpBlockletMeta,
   loading,
@@ -69,8 +55,11 @@ function Layout({
   navSubTitle,
   contentMaxWidth,
   theme: userTheme,
+  themeOverrides,
+  extraNav,
   ...rest
 }) {
+  const parentTheme = useTheme();
   const isMobile = useMediaQuery(t => t.breakpoints.down('md'));
   const {
     activeStep,
@@ -90,13 +79,13 @@ function Layout({
       });
     }
   }
-  const tempTheme = Object.assign(theme, userTheme || {});
+  const mergedTheme = deepmerge(parentTheme, userTheme || {}, themeOverrides || {});
   return /*#__PURE__*/_jsx(StyledEngineProvider, {
     injectFirst: true,
     children: /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: tempTheme,
+      theme: mergedTheme,
       children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
-        theme: tempTheme,
+        theme: mergedTheme,
         children: /*#__PURE__*/_jsxs(Root, {
           ...rest,
           children: [/*#__PURE__*/_jsxs(Header, {
@@ -115,6 +104,23 @@ function Layout({
                       style: {
                         marginLeft: 3
                       }
+                    }), extraNav && /*#__PURE__*/_jsx(Typography, {
+                      variant: "caption",
+                      className: "extra-nav-text",
+                      onClick: () => {
+                        if (extraNav.link) {
+                          window.open(extraNav.link, '_blank');
+                        }
+                      },
+                      sx: {
+                        ml: 1,
+                        color: 'primary.main',
+                        cursor: 'pointer',
+                        '&:hover': {
+                          opacity: 0.8
+                        }
+                      },
+                      children: extraNav.appText || extraNav.text
                     })]
                   }),
                   logoUrl: logoUrl,
@@ -140,7 +146,8 @@ function Layout({
                 logoUrl: logoUrl,
                 useOfSkeleton: useOfSkeleton,
                 subTitle: navSubTitle,
-                loading: loading
+                loading: loading,
+                extraNav: extraNav
               })
             }), /*#__PURE__*/_jsx(Typography, {
               component: "div",
@@ -178,7 +185,10 @@ Layout.propTypes = {
   useOfSkeleton: PropTypes.bool,
   stepTip: PropTypes.string,
   navSubTitle: PropTypes.string,
-  theme: PropTypes.object
+  /**  @deprecated Please use themeOverrides instead */
+  theme: PropTypes.object,
+  themeOverrides: PropTypes.object,
+  extraNav: PropTypes.object
 };
 Layout.defaultProps = {
   loading: false,
@@ -194,7 +204,9 @@ Layout.defaultProps = {
   useOfSkeleton: true,
   stepTip: '',
   navSubTitle: '',
-  theme: null
+  theme: null,
+  themeOverrides: null,
+  extraNav: null
 };
 
 // 针对 safari 下的 chrome 适配
@@ -203,7 +215,7 @@ let injectStyle = '';
 if (ua.includes('iphone os') && ua.includes('crios')) {
   injectStyle = 'height: calc(100vh - 60px);';
 }
-const Header = styled.header`
+const Header = styled('header')`
   width: ${props => props.width || '80%'};
   min-width: 900px;
   box-sizing: border-box;
@@ -215,7 +227,7 @@ const Header = styled.header`
   height: 68px;
   align-items: center;
 
-  ${props => props.theme.breakpoints.up('sm')} and (min-height: 900px) {
+  ${props => `${props.theme.breakpoints.up('sm')} and (min-height: 900px)`} {
     justify-content: flex-end;
   }
 
@@ -224,7 +236,9 @@ const Header = styled.header`
     width: 100%;
     height: ${HEADER_HEIGHT_MD};
     justify-content: space-between;
-    background: #f6f8fa;
+    background-color: ${({
+  theme
+}) => theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[100]};
   }
 
   .left {
@@ -233,12 +247,15 @@ const Header = styled.header`
     align-items: center;
   }
 `;
-const Root = styled.div`
+const Root = styled('div')`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   letter-spacing: normal;
+  background: ${({
+  theme
+}) => theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[100]};
   ${injectStyle}
 
   header:empty {
@@ -270,21 +287,16 @@ const Root = styled.div`
     flex-grow: 1;
     height: 100%;
     padding: 32px;
+    background-color: ${({
+  theme
+}) => theme.palette.background.paper};
 
     ${props => props.theme.breakpoints.down('md')} {
       padding: 16px;
     }
   }
-
-  ${props => props.theme.breakpoints.up('sm')} {
-    background: #f6f8fa;
-  }
-
-  ${props => props.theme.breakpoints.down('md')} {
-    background: ${props => props.theme.palette.common.white};
-  }
 `;
-const LogoContainer = styled.div`
+const LogoContainer = styled('div')`
   display: block;
   margin-top: 4px;
 `;

package/lib/markdown-body.js

@@ -38,7 +38,7 @@ const Root = styled(Box)`
   }
 
   .CodeMirror pre {
-    background: #f6f8fa !important;
+    background-color: ${props => props.theme.palette.grey[50]} !important;
   }
 
   .anchor {

package/lib/nav.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import Check from '@mui/icons-material/Check';
-import { Skeleton } from '@mui/material';
+import { Button, Skeleton, Tooltip, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import { useStepContext } from './context/step';
 import AppHeader from './header';
@@ -11,7 +11,8 @@ function Nav({
   locale,
   useOfSkeleton,
   subTitle,
-  loading
+  loading,
+  extraNav
 }) {
   const {
     steps,
@@ -123,14 +124,55 @@ function Nav({
           })]
         }, step.key);
       })
+    }), extraNav && /*#__PURE__*/_jsxs("div", {
+      className: "extra-nav",
+      children: [extraNav.tooltipText ? /*#__PURE__*/_jsx(Tooltip, {
+        title: extraNav.tooltipText,
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: extraNav.buttonProps?.variant || 'text',
+          onClick: () => {
+            if (extraNav.link) {
+              window.open(extraNav.link, '_blank');
+            }
+          },
+          startIcon: extraNav.icon,
+          className: "extra-nav-button",
+          size: "small",
+          ...extraNav.buttonProps,
+          children: extraNav.text
+        })
+      }) : /*#__PURE__*/_jsx(Button, {
+        variant: extraNav.buttonProps?.variant || 'text',
+        onClick: () => {
+          if (extraNav.link) {
+            window.open(extraNav.link, '_blank');
+          }
+        },
+        startIcon: extraNav.icon,
+        size: "small",
+        className: "extra-nav-button",
+        ...extraNav.buttonProps,
+        children: extraNav.text
+      }), extraNav.description && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        sx: {
+          color: 'text.secondary',
+          mt: 0.5
+        },
+        component: "p",
+        className: "extra-nav-description",
+        children: extraNav.description
+      })]
     })]
   });
 }
 const Div = styled.div`
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
   ${props => props.theme.breakpoints.up('md')} {
     padding: 24px;
-    border-right: 1px solid ${props => props.theme.palette.grey[100]};
+    border-right: 1px solid ${props => props.theme.palette.divider};
     flex: 0 0 280px;
     min-height: 48px;
 
@@ -169,11 +211,15 @@ const Div = styled.div`
       animation: none !important;
     }
   }
+  .extra-nav-button {
+    cursor: pointer;
+  }
 `;
 const StepContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 60px;
+  flex: 1;
 
   @media (max-height: 900px) {
     margin-top: 32px;
@@ -354,7 +400,7 @@ const StepContainer = styled.div`
       height: 24px;
       line-height: 24px;
       font-size: 14px;
-      color: #9397a1;
+      color: ${props => props.theme.palette.grey[500]};
       transition: all ease 0.3s;
       &:first-of-type {
         margin-top: 8px;
@@ -363,11 +409,11 @@ const StepContainer = styled.div`
         padding-bottom: 40px;
       }
       &.step-child-block-active {
-        color: ${props => props.theme.palette.common.black};
+        color: ${props => props.theme.palette.text.primary};
         font-weight: 700;
       }
       &.step-child-block-checked {
-        color: ${props => props.theme.palette.common.black};
+        color: ${props => props.theme.palette.text.primary};
       }
     }
   }
@@ -393,13 +439,15 @@ Nav.propTypes = {
   locale: PropTypes.string,
   useOfSkeleton: PropTypes.bool,
   subTitle: PropTypes.string,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  extraNav: PropTypes.object
 };
 Nav.defaultProps = {
   logoUrl: '',
   locale: '',
   useOfSkeleton: false,
   subTitle: '',
-  loading: false
+  loading: false,
+  extraNav: null
 };
 export default Nav;

package/lib/page-header.js

@@ -30,7 +30,7 @@ const Content = styled.div`
   .title {
     font-size: 24px;
     font-weight: 700;
-    color: ${props => props.theme.palette.common.black};
+    color: ${props => props.theme.palette.text.primary};
 
     ${props => props.theme.breakpoints.down('md')} {
       font-size: 20px;
@@ -39,7 +39,7 @@ const Content = styled.div`
 
   .sub-title {
     font-size: 14px;
-    color: ${props => props.theme.palette.grey[600]};
+    color: ${props => props.theme.palette.text.secondary};
     padding: 0 14px;
     font-weight: 400;
   }
@@ -48,7 +48,7 @@ const Content = styled.div`
     position: absolute;
     left: 0;
     top: 8px;
-    color: #9397a1;
+    color: ${props => props.theme.palette.grey[500]};
     font-size: 18px;
     cursor: pointer;
   }

package/lib/small-circle-progress.js

@@ -22,8 +22,8 @@ export default function SmallCircleProgress({
       size: size,
       "aria-label": "decorative progress bar",
       thickness: 10,
-      style: {
-        color: '#dddddd'
+      sx: {
+        color: 'grey.300'
       }
     }), /*#__PURE__*/_jsx(CircularProgress, {
       variant: "determinate",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "2.13.31",
+  "version": "2.13.33",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@arcblock/icons": "^2.13.31",
+    "@arcblock/icons": "^2.13.33",
     "@blocklet/meta": "^1.16.43",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
@@ -65,5 +65,5 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "glob": "^10.4.5"
   },
-  "gitHead": "66ef51b4b217d15985838eb2c058ec833c07e1cd"
+  "gitHead": "b835dedcd8f2e473082e4c1aee0a8cb3ed0e78ec"
 }