@blocklet/ui-react 3.2.17 → 3.2.18

package/src/Dashboard/app-shell/badges/app-badge-version.tsx

@@ -0,0 +1,60 @@
+import { LiteralUnion } from 'type-fest';
+import { alpha, Theme, Typography, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
+
+export type ColorKey = 'primary' | 'info' | 'success' | 'error' | 'warning';
+export type BadgeColor = LiteralUnion<ColorKey, string>;
+export const colorMap: Record<ColorKey, (theme: Theme) => { main: string }> = {
+  primary: (theme) => theme.palette.primary,
+  info: (theme) => theme.palette.info,
+  success: (theme) => theme.palette.success,
+  error: (theme) => theme.palette.error,
+  warning: (theme) => theme.palette.warning,
+};
+
+export const getBgColor = (theme: Theme, color: BadgeColor): string => {
+  if (colorMap[color as ColorKey]) {
+    const c = colorMap[color as ColorKey](theme).main;
+    return alpha(c, 0.1);
+  }
+  return alpha(color, 0.1);
+};
+
+export const getTextColor = (theme: Theme, color: BadgeColor): string => {
+  if (colorMap[color as ColorKey]) {
+    return colorMap[color as ColorKey](theme).main;
+  }
+  return color;
+};
+
+export interface AppBadgeVersionProps extends AppBadgeDefaultProps {
+  color?: string | ColorKey;
+}
+
+export function AppBadgeVersion({
+  icon = '',
+  value = '',
+  color = 'info',
+  loading = false,
+  ...rest
+}: AppBadgeVersionProps) {
+  const theme = useTheme();
+  const txtcolor = getTextColor(theme, color);
+  const bgcolor = getBgColor(theme, color);
+
+  return (
+    <BadgeContainer
+      loading={loading}
+      sx={{
+        borderColor: alpha(txtcolor, 0.2),
+        bgcolor,
+      }}
+      {...rest}>
+      <Icon icon={icon || 'lucide:orbit'} style={{ marginRight: 6 }} />
+      <Typography className="app-badge-value" style={{ color: txtcolor }}>
+        v {value}
+      </Typography>
+    </BadgeContainer>
+  );
+}

package/src/Dashboard/app-shell/index.ts

@@ -0,0 +1,5 @@
+import AppHeader from './app-header';
+import AppBadge from './app-badge';
+import { AppInfoProvider, useAppInfo } from './app-info-context';
+
+export { AppHeader, AppBadge, AppInfoProvider, useAppInfo };

package/src/Dashboard/index.jsx

@@ -13,6 +13,7 @@ import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
+import { AppHeader, AppBadge, AppInfoProvider, useAppInfo } from './app-shell';
 
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
@@ -32,6 +33,10 @@ function Dashboard({
   },
   links = [],
   showDomainWarningDialog = true,
+  appPath = undefined,
+  appTab = undefined,
+  onAppTabChange = undefined,
+  children = undefined,
   ...rest
 }) {
   useWalletHiddenTopbar();
@@ -150,8 +155,12 @@ function Dashboard({
         logo: <img src={appLogo} alt="logo" />,
         addons: _headerAddons,
         ...rest.headerProps,
-      }}
-    />
+      }}>
+      <AppInfoProvider path={appPath} currentTab={appTab} meta={meta}>
+        <AppHeader onTabChange={onAppTabChange} />
+        {children}
+      </AppInfoProvider>
+    </UxDashboard>
   );
 }
 
@@ -165,6 +174,11 @@ Dashboard.propTypes = {
   sessionManagerProps: SessionManagerProps,
   links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
   showDomainWarningDialog: PropTypes.bool,
+  appPath: PropTypes.string,
+  appTab: PropTypes.string,
+  onAppTabChange: PropTypes.func,
+  children: PropTypes.node,
 };
 
+export { AppHeader, AppBadge, AppInfoProvider, useAppInfo };
 export default Dashboard;

package/src/Footer/internal-footer.jsx

@@ -43,7 +43,7 @@ function InternalFooter({ ...props }) {
     return brand ? <Brand {...brand} /> : null;
   };
   const renderNavigation = () => {
-    return navigation?.length ? <Links links={navigation} columns={3} /> : null;
+    return navigation?.length ? <Links links={navigation} minColumns={3} /> : null;
   };
   const renderSocialMedia = () => {
     return socialMedia?.length ? <SocialMedia items={socialMedia} /> : null;

package/src/Footer/links.jsx

@@ -14,13 +14,15 @@ import { splitNavColumns, isMailProtocol } from '../utils';
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
  */
-export default function Links({ links = [], flowLayout = false, columns, ...rest }) {
+export default function Links({ links = [], flowLayout = false, minColumns = 1, maxColumns = 4, ...rest }) {
   const [activeIndex, setActiveIndex] = useState(-1);
   const isMobile = useMobile({ key: 'md' });
   // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
   const isGroupMode = links.some((item) => item.items?.length);
-  // 是否启用 columns 布局
-  const columnsLayout = !isMobile && isGroupMode && isInteger(columns) && columns > 1;
+  // 是否启用分列布局
+  const columnsLayout = !isMobile && isGroupMode && isInteger(minColumns) && minColumns > 1 && maxColumns >= minColumns;
+  // Clamp columns
+  const columns = columnsLayout ? Math.min(Math.max(links.length, minColumns), maxColumns) : 1;
   const renderItem = ({ label, link, icon, render, props }) => {
     let result = label;
 
@@ -139,6 +141,7 @@ export default function Links({ links = [], flowLayout = false, columns, ...rest
 
   return (
     <Root
+      columns={columns}
       {...rest}
       className={clsx(rest.className, {
         'footer-links--grouped': isGroupMode,
@@ -161,11 +164,12 @@ Links.propTypes = {
   ),
   // 流动布局, 简单的从左到右排列
   flowLayout: PropTypes.bool,
-  // 列布局
-  columns: PropTypes.number.isRequired,
+  // 列布局，最小列数，最大列数
+  minColumns: PropTypes.number,
+  maxColumns: PropTypes.number,
 };
 
-const Root = styled('div')`
+const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'columns' })`
   overflow: hidden;
   color: ${({ theme }) => theme.palette.text.secondary};
   .footer-links-inner {
@@ -230,7 +234,7 @@ const Root = styled('div')`
   /* columns 布局 */
   &.footer-links--columns {
     .footer-links-inner {
-      gap: 96px;
+      gap: ${({ columns }) => `${288 / columns}px`};
     }
     .footer-links-column {
       display: flex;

package/src/utils.js

@@ -89,6 +89,8 @@ export const matchPaths = (paths = []) => {
 /** 导航列表分列 */
 export const splitNavColumns = (items, options = {}) => {
   const { columns = 1, breakInside = false, groupHeight = 48, itemHeight = 24, childrenKey = 'items' } = options;
+  // 分组数
+  const groups = items.length;
 
   // 高度预估
   const totalHeight = items.reduce((height, group) => {
@@ -114,16 +116,17 @@ export const splitNavColumns = (items, options = {}) => {
   };
 
   items.forEach((group) => {
+    // 当前分组的预估高度
     const groupTotalHeight = groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
 
-    // 允许截断分组时，可以在任何子项处换列
+    // 允许截断分组，可以在任何子项处换列，尽可能利用当前列的剩余空间
     if (breakInside && shouldBreakColumn(groupHeight)) {
       currentColumn++;
       currentHeight = 0;
       result[currentColumn] = [];
     }
-    // 不允许截断分组时，只能在分组边界换列
-    if (!breakInside && currentHeight > 0 && shouldBreakColumn(groupTotalHeight)) {
+    // 不允许截断分组，只能在分组边界换列，优先分列，列不够用再考虑充分利用剩余空间
+    if (!breakInside && currentHeight > 0 && (groups <= columns || shouldBreakColumn(groupTotalHeight))) {
       currentColumn++;
       currentHeight = 0;
       result[currentColumn] = [];