@arcblock/ux 2.13.70 → 3.0.1

package/lib/Layout/dashboard/index.js

@@ -1,201 +1,137 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { useLocation, matchPath } from 'react-router-dom';
-import Helmet from 'react-helmet';
-import Container from '@mui/material/Container';
-import Hidden from '@mui/material/Hidden';
-import Box from '@mui/material/Box';
-import clsx from 'clsx';
-import OpenInFullIcon from '@mui/icons-material/OpenInFull';
-import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
-import DashboardLegacy from '../dashboard-legacy';
-import { ResponsiveHeader } from '../../Header';
-import NavMenu from '../../NavMenu';
-import Footer from '../../Footer';
-import Sidebar from './sidebar';
-import { styled, useTheme } from '../../Theme';
-import { Link } from './external-link';
-import { FullPageProvider, useFullPage } from './full-page';
-// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
-// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
-function NavMenuWrapper({
-  closeMenu,
-  ...rest
-}) {
-  const location = useLocation();
-  useEffect(() => {
-    closeMenu();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location]);
-  return /*#__PURE__*/_jsx(NavMenu, {
-    ...rest
-  });
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { useMemo as M, useEffect as u } from "react";
+import { useLocation as x, matchPath as z } from "react-router-dom";
+import D from "react-helmet";
+import { useTheme as R, Box as i, Container as T } from "@mui/material";
+import V from "clsx";
+import { CloseFullscreen as B, OpenInFull as U } from "@mui/icons-material";
+import E from "../dashboard-legacy/index.js";
+import "../../Header/header.js";
+import G from "../../Header/responsive-header.js";
+import O from "../../NavMenu/nav-menu.js";
+import "../../NavMenu/products.js";
+import q from "../../Footer/index.js";
+import p from "./sidebar.js";
+import { styled as g } from "../../Theme/index.js";
+import { Link as v } from "./external-link.js";
+import { FullPageProvider as A, useFullPage as J } from "./full-page.js";
+function K({ closeMenu: o, ...a }) {
+  const e = x();
+  return u(() => {
+    o();
+  }, [e]), /* @__PURE__ */ r(O, { ...a });
 }
-function formatLinks(links, location) {
-  return links.map(link => {
-    if (link.children?.length) {
-      return {
-        ...link,
-        label: link.title,
-        children: formatLinks(link.children, location)
-      };
-    }
-    return {
-      ...link,
-      label: /*#__PURE__*/_jsx(Link, {
-        to: link.url,
-        external: link.external,
-        children: link.title
-      }),
+function w(o, a) {
+  return o.map((e) => {
+    var s;
+    return (s = e.children) != null && s.length ? {
+      ...e,
+      label: e.title,
+      children: w(e.children, a)
+    } : {
+      ...e,
+      label: /* @__PURE__ */ r(v, { to: e.url, external: e.external, children: e.title }),
       // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-      active: link.external ? link.active : !!matchPath({
-        path: link.url,
-        end: false
-      }, location.pathname)
+      active: e.external ? e.active : !!z({ path: e.url, end: !1 }, a.pathname)
     };
   });
 }
-function Dashboard({
-  title = 'Home',
-  headerProps = {},
-  links = [],
-  sidebarWidth = 120,
-  fullWidth = false,
-  dense = 'auto',
-  footerProps = {},
-  sx,
-  children,
-  ...rest
+function Q({
+  title: o = "Home",
+  headerProps: a = {},
+  links: e = [],
+  sidebarWidth: s = 120,
+  fullWidth: y = !1,
+  dense: c = "auto",
+  footerProps: N = {},
+  sx: P,
+  children: F,
+  ...m
 }) {
-  const theme = useTheme();
-  const {
-    inFullPage,
-    showToggleButton,
-    headerVisible,
-    footerVisible,
-    sidebarVisible,
-    toggleFullPage
-  } = useFullPage();
-  const location = useLocation();
-  const navItems = useMemo(() => formatLinks(links, location), [location, links]);
-  const isGroupedMode = navItems.some(item => !!item.children?.length);
-  // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
-  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
-  const classes = clsx('dashboard', {
-    'dashboard-dense': _dense
-  }, rest.className);
-  const defaultHomeLink = content => /*#__PURE__*/_jsx(Link, {
-    to: window.blocklet?.prefix || '/',
-    children: content
-  });
-  const _headerProps = {
-    homeLink: defaultHomeLink,
-    ...headerProps
+  const b = R(), { inFullPage: L, showToggleButton: W, headerVisible: $, footerVisible: C, sidebarVisible: H, toggleFullPage: _ } = J(), f = x(), l = M(() => w(e, f), [f, e]), S = l.some((t) => {
+    var d;
+    return !!((d = t.children) != null && d.length);
+  }), n = c === "auto" ? l.length >= 8 || S : c, j = V("dashboard", { "dashboard-dense": n }, m.className), I = {
+    homeLink: (t) => {
+      var d;
+      return /* @__PURE__ */ r(v, { to: ((d = window.blocklet) == null ? void 0 : d.prefix) || "/", children: t });
+    },
+    ...a
   };
-  useEffect(() => {
-    const {
-      searchParams
-    } = new URL(window.location.href);
-    if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter'));
-    }
-  }, []);
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    sx: sx,
-    ...rest,
-    className: classes,
-    sidebarWidth: sidebarWidth,
-    children: [/*#__PURE__*/_jsx(Helmet, {
-      title: title
-    }, title), headerVisible && /*#__PURE__*/_jsx(StyledUxHeader, {
-      ..._headerProps,
-      className: "dashboard-header",
-      children: links?.length ? ({
-        isMobile,
-        closeMenu
-      }) => {
-        if (isMobile) {
-          return /*#__PURE__*/_jsx(NavMenuWrapper, {
-            mode: "inline",
-            items: navItems,
-            closeMenu: closeMenu,
-            bgColor: "transparent",
-            activeTextColor: theme.palette.primary.main
-          });
-        }
-        return null;
-      } : null
-    }), /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      className: "dashboard-body",
-      children: [/*#__PURE__*/_jsx(Hidden, {
-        mdDown: true,
-        children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
-          className: "dashboard-sidebar",
-          children: _dense ? /*#__PURE__*/_jsx(Sidebar, {
-            links: links,
-            dense: _dense
-          }) : /*#__PURE__*/_jsx(Box, {
-            className: "dashboard-sidebar-container",
-            children: /*#__PURE__*/_jsx(Sidebar, {
-              links: links,
-              dense: _dense
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        className: "dashboard-main",
-        id: "arc__dashboard-main",
-        children: [showToggleButton && /*#__PURE__*/_jsx(Box, {
-          sx: {
-            position: 'absolute',
-            top: 4,
-            right: 4,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: 24,
-            height: 24,
-            color: '#fff',
-            bgcolor: 'rgba(158,158,158, 0.6);',
-            borderRadius: 1,
-            cursor: 'pointer'
-          },
-          onClick: toggleFullPage,
-          children: inFullPage ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {
-            style: {
-              fontSize: 18
-            }
-          }) : /*#__PURE__*/_jsx(OpenInFullIcon, {
-            style: {
-              fontSize: 18
+  return u(() => {
+    const { searchParams: t } = new URL(window.location.href);
+    t.get("inviter") && window.localStorage.setItem("inviter", t.get("inviter"));
+  }, []), /* @__PURE__ */ h(X, { sx: P, ...m, className: j, sidebarWidth: s, children: [
+    /* @__PURE__ */ r(D, { title: o }, o),
+    $ && /* @__PURE__ */ r(Y, { ...I, className: "dashboard-header", children: e != null && e.length ? ({ isMobile: t, closeMenu: d }) => t ? /* @__PURE__ */ r(
+      K,
+      {
+        mode: "inline",
+        items: l,
+        closeMenu: d,
+        bgColor: "transparent",
+        activeTextColor: b.palette.primary.main
+      }
+    ) : null : null }),
+    /* @__PURE__ */ h(
+      i,
+      {
+        className: "dashboard-body",
+        sx: {
+          display: "flex"
+        },
+        children: [
+          !!(e != null && e.length) && H && /* @__PURE__ */ r(
+            i,
+            {
+              className: "dashboard-sidebar",
+              sx: {
+                display: {
+                  xs: "none",
+                  md: "block"
+                }
+              },
+              children: n ? /* @__PURE__ */ r(p, { links: e, dense: n }) : /* @__PURE__ */ r(i, { className: "dashboard-sidebar-container", children: /* @__PURE__ */ r(p, { links: e, dense: n }) })
             }
-          })
-        }), /*#__PURE__*/_jsx(Container, {
-          className: "dashboard-content",
-          id: "arc__dashboard-content",
-          ...(fullWidth && {
-            maxWidth: false
-          }),
-          children: children
-        }), footerVisible && /*#__PURE__*/_jsx(Footer, {
-          dark: theme.palette.mode === 'dark',
-          ...footerProps
-        })]
-      })]
-    })]
-  });
+          ),
+          /* @__PURE__ */ h(i, { className: "dashboard-main", id: "arc__dashboard-main", children: [
+            W && /* @__PURE__ */ r(
+              i,
+              {
+                sx: {
+                  position: "absolute",
+                  top: 4,
+                  right: 4,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  width: 24,
+                  height: 24,
+                  color: "#fff",
+                  bgcolor: "rgba(158,158,158, 0.6);",
+                  borderRadius: 1,
+                  cursor: "pointer"
+                },
+                onClick: _,
+                children: L ? /* @__PURE__ */ r(B, { style: { fontSize: 18 } }) : /* @__PURE__ */ r(U, { style: { fontSize: 18 } })
+              }
+            ),
+            /* @__PURE__ */ r(T, { className: "dashboard-content", id: "arc__dashboard-content", ...y && { maxWidth: !1 }, children: F }),
+            C && /* @__PURE__ */ r(q, { dark: b.palette.mode === "dark", ...N })
+          ] })
+        ]
+      }
+    )
+  ] });
 }
-const Wrapper = styled('div', {
-  shouldForwardProp: prop => prop !== 'sidebarWidth'
+const X = g("div", {
+  shouldForwardProp: (o) => o !== "sidebarWidth"
 })`
   &.dashboard {
     display: flex;
     flex-direction: column;
     height: 100vh;
-    background-color: ${({
-  theme
-}) => theme.palette.background.default};
+    background-color: ${({ theme: o }) => o.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -204,14 +140,14 @@ const Wrapper = styled('div', {
   .dashboard-sidebar {
     box-sizing: border-box;
     flex: 0 0 auto;
-    width: ${props => props.sidebarWidth}px;
+    width: ${(o) => o.sidebarWidth}px;
     overflow: hidden;
     &:hover {
       overflow-y: auto;
     }
   }
   .dashboard-sidebar-container {
-    width: ${props => props.sidebarWidth}px;
+    width: ${(o) => o.sidebarWidth}px;
   }
   .dashboard-main {
     display: flex;
@@ -226,19 +162,15 @@ const Wrapper = styled('div', {
   &.dashboard-dense {
     .dashboard-header {
       border-bottom: 1px solid;
-      border-color: ${({
-  theme
-}) => theme.palette.divider};
+      border-color: ${({ theme: o }) => o.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
       border-right: 1px solid;
-      border-color: ${({
-  theme
-}) => theme.palette.divider};
+      border-color: ${({ theme: o }) => o.palette.divider};
     }
   }
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(o) => o.theme.breakpoints.up("md")} {
     .header-logo {
       display: flex;
       justify-content: center;
@@ -250,26 +182,17 @@ const Wrapper = styled('div', {
       }
     }
   }
-`;
-const StyledUxHeader = styled(ResponsiveHeader)`
+`, Y = g(G)`
   .header-container {
     max-width: 100%;
   }
 `;
-
-// 兼容旧版 dashboard
-export default function DashboardWrapper({
-  legacy = true,
-  ...rest
+function ue({
+  legacy: o = !0,
+  ...a
 }) {
-  if (legacy) {
-    return /*#__PURE__*/_jsx(DashboardLegacy, {
-      ...rest
-    });
-  }
-  return /*#__PURE__*/_jsx(FullPageProvider, {
-    children: /*#__PURE__*/_jsx(Dashboard, {
-      ...rest
-    })
-  });
-}
+  return o ? /* @__PURE__ */ r(E, { ...a }) : /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(Q, { ...a }) });
+}
+export {
+  ue as default
+};

package/lib/Layout/dashboard/sidebar.js

@@ -1,76 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Typography from '@mui/material/Typography';
-import clsx from 'clsx';
-import { styled } from '../../Theme';
-import { NavLink } from './external-link';
-function renderItem(item, index) {
-  if (item.children?.length) {
-    // eslint-disable-next-line no-use-before-define
-    return renderGroup(item, index);
-  }
-  const {
-    url,
-    icon,
-    title,
-    showBadge,
-    external,
-    active
-  } = item;
-  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-  return /*#__PURE__*/_jsx("li", {
-    className: "layout-sidebar-item",
-    children: /*#__PURE__*/_jsxs(NavLink, {
-      external: external,
-      to: url,
-      className: ({
-        isActive
-      }) => clsx('layout-sidebar-link', {
-        'layout-sidebar-link--active': external ? active : isActive
-      }),
-      children: [icon && /*#__PURE__*/_jsx("span", {
-        className: `layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`,
-        children: icon
-      }), /*#__PURE__*/_jsx(Typography, {
-        component: "span",
-        className: "layout-sidebar-link-text",
-        children: title
-      })]
-    })
-  }, `${url}-${index}`);
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { Typography as b } from "@mui/material";
+import d from "clsx";
+import { styled as c } from "../../Theme/index.js";
+import { NavLink as h } from "./external-link.js";
+function p(e, i) {
+  var n;
+  if ((n = e.children) != null && n.length)
+    return m(e, i);
+  const { url: a, icon: r, title: s, showBadge: u, external: l, active: g } = e;
+  return /* @__PURE__ */ t("li", { className: "layout-sidebar-item", children: /* @__PURE__ */ o(
+    h,
+    {
+      external: l,
+      to: a,
+      className: ({ isActive: x }) => d("layout-sidebar-link", { "layout-sidebar-link--active": l ? g : x }),
+      children: [
+        r && /* @__PURE__ */ t("span", { className: `layout-sidebar-icon ${u ? "layout-sidebar-badge" : ""}`, children: r }),
+        /* @__PURE__ */ t(b, { component: "span", className: "layout-sidebar-link-text", children: s })
+      ]
+    }
+  ) }, `${a}-${i}`);
 }
-function renderGroup(item, index) {
-  return /*#__PURE__*/_jsxs("li", {
-    className: "layout-sidebar-group",
-    children: [/*#__PURE__*/_jsx("span", {
-      className: "layout-sidebar-group-title",
-      children: item.title
-    }), /*#__PURE__*/_jsx("ul", {
-      children: item.children.map(renderItem)
-    })]
-  }, `group-${item.title}-${index}`);
+function m(e, i) {
+  return /* @__PURE__ */ o("li", { className: "layout-sidebar-group", children: [
+    /* @__PURE__ */ t("span", { className: "layout-sidebar-group-title", children: e.title }),
+    /* @__PURE__ */ t("ul", { children: e.children.map(p) })
+  ] }, `group-${e.title}-${i}`);
 }
-function Sidebar({
-  links,
-  addons,
-  dense = false,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Root, {
-    ...rest,
-    className: clsx({
-      'layout-sidebar-dense': dense
-    }),
-    children: [/*#__PURE__*/_jsx("ul", {
-      children: links.map(renderItem)
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), addons]
-  });
+function z({ links: e, addons: i, dense: a = !1, ...r }) {
+  return /* @__PURE__ */ o(f, { ...r, className: d({ "layout-sidebar-dense": a }), children: [
+    /* @__PURE__ */ t("ul", { children: e.map(p) }),
+    /* @__PURE__ */ t("div", { style: { flex: 1 } }),
+    i
+  ] });
 }
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const Root = styled('div')`
+const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", f = c("div")`
   display: flex;
   flex-direction: column;
   ul {
@@ -83,14 +47,14 @@ const Root = styled('div')`
     flex-direction: column;
     align-items: center;
     padding: 22px 24px;
-    color: ${props => props.theme.palette.text.secondary};
+    color: ${(e) => e.theme.palette.text.secondary};
     text-decoration: none;
 
     &:hover,
     &.layout-sidebar-link--active {
-      color: ${props => props.theme.palette.primary.main};
-      background: ${gradient};
-      border-left-color: ${props => props.theme.palette.primary.main};
+      color: ${(e) => e.theme.palette.primary.main};
+      background: ${y};
+      border-left-color: ${(e) => e.theme.palette.primary.main};
     }
   }
   .layout-sidebar-icon {
@@ -149,8 +113,8 @@ const Root = styled('div')`
       padding: 8px;
       &:hover,
       &.layout-sidebar-link--active {
-        color: ${props => props.theme.palette.grey[900]};
-        background: ${props => props.theme.palette.grey[100]};
+        color: ${(e) => e.theme.palette.grey[900]};
+        background: ${(e) => e.theme.palette.grey[100]};
         border: 0;
         border-radius: 4px;
       }
@@ -181,7 +145,7 @@ const Root = styled('div')`
       line-height: 1;
     }
     .layout-sidebar-group {
-      color: ${props => props.theme.palette.text.hint};
+      color: ${(e) => e.theme.palette.text.hint};
       .layout-sidebar-group-title {
         display: inline-block;
         padding: 8px 0 8px 24px;
@@ -196,4 +160,6 @@ const Root = styled('div')`
     }
   }
 `;
-export default Sidebar;
+export {
+  z as default
+};

package/lib/Layout/dashboard-legacy/header.d.ts

@@ -1,4 +1,4 @@
-import { type AppBarProps } from '@mui/material/AppBar';
+import { AppBarProps } from '@mui/material';
 export interface HeaderProps extends AppBarProps {
     onToggleMenu: () => void;
     brand?: string;