@blocklet/ui-react 3.2.16 → 3.2.18

package/src/Dashboard/app-shell/app-badge.stories.tsx

@@ -0,0 +1,64 @@
+import { Box, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import { ThemeProvider } from '@arcblock/ux/lib/Theme';
+import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
+import AppBadge from './app-badge';
+
+export default {
+  title: 'Blocklet-UI-React/Dashboard',
+  component: AppBadge,
+};
+
+export function Badges() {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <ThemeProvider prefer="system">
+      <ThemeModeToggle />
+      <Box sx={{ p: 3, backgroundColor: 'background.default' }}>
+        <Stack spacing={2}>
+          <Typography variant="h6">Loading</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge label="Loading" value="Value" loading />
+          </Stack>
+          <Typography variant="h6">Default</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge label="Label" value="Value" />
+            <AppBadge icon="lucide:info" label="Label" value="Value" />
+          </Stack>
+          <Typography variant="h6">Number</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="number" value={1234} />
+            <AppBadge variant="number" value={1234567} round={1} />
+            <AppBadge variant="number" label="Label" value={1234567890} round={2} />
+          </Stack>
+          <Typography variant="h6">Time</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="time" value={new Date()} />
+            <AppBadge variant="time" label="Label" value={Date.now() - 3600000} />
+          </Stack>
+          <Typography variant="h6">State</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="state" value="Running" color="success" />
+            <AppBadge variant="state" value="Stopped" color="error" />
+            <AppBadge variant="state" value="Warning" color="warning" />
+          </Stack>
+          <Typography variant="h6">Version</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="version" value="1.0.0" color="info" />
+            <AppBadge variant="version" icon="lucide:package" value="2.3.4" color="primary" />
+          </Stack>
+          <Typography variant="h6">DID</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="did" value="z1kFxaZ5hJXHhqJzXqJzXqJzXqJzXqJzXqJz" />
+            <AppBadge variant="did" value="0x1234567890123456789012345678901234567890" />
+          </Stack>
+          <Typography variant="h6">Switch</Typography>
+          <Stack direction="row" spacing={2}>
+            <AppBadge variant="switch" label="Toggle" value={checked} onChange={setChecked} />
+          </Stack>
+        </Stack>
+      </Box>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/zh-tw';
+import 'dayjs/locale/ja';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AppBadgeDefault, AppBadgeDefaultProps } from './badges/app-badge-default';
+import { AppBadgeSwitch, AppBadgeSwitchProps } from './badges/app-badge-switch';
+import { AppBadgeVersion, AppBadgeVersionProps } from './badges/app-badge-version';
+import { AppBadgeState, AppBadgeStateProps } from './badges/app-badge-state';
+import { AppBadgeDID, AppBadgeDIDProps } from './badges/app-badge-did';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+export const formatNumber = (num: unknown, round: number = 0): string => {
+  if (typeof num !== 'number') return '';
+
+  const absNum = Math.abs(num);
+  let rounded;
+  let unit = '';
+
+  if (absNum >= 1e12) {
+    unit = 'T';
+    rounded = `${(num / 1e12).toFixed(round)}`; // 万亿
+  } else if (absNum >= 1e9) {
+    unit = 'B';
+    rounded = `${(num / 1e9).toFixed(round)}`; // 十亿
+  } else if (absNum >= 1e6) {
+    unit = 'M';
+    rounded = `${(num / 1e6).toFixed(round)}`; // 百万
+  } else if (absNum >= 1e3) {
+    unit = 'K';
+    rounded = `${(num / 1e3).toFixed(round)}`; // 千
+  } else {
+    rounded = num.toString();
+  }
+
+  // 去掉尾部的零
+  if (round > 0) {
+    rounded = rounded.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
+  }
+
+  return `${rounded}${unit}`;
+};
+
+export const formatTime = (value?: string | number | Date, locale: string = 'en'): string => {
+  if (!value) return '';
+
+  return dayjs(value).locale(locale).fromNow();
+};
+
+const BadgeVariants: Record<string, React.ComponentType<any>> = {
+  switch: AppBadgeSwitch,
+  version: AppBadgeVersion,
+  state: AppBadgeState,
+  did: AppBadgeDID,
+};
+
+export type AppBadgeProps =
+  | (AppBadgeDefaultProps & { variant?: 'default' })
+  | (AppBadgeDefaultProps & { variant: 'number' })
+  | (Omit<AppBadgeDefaultProps, 'value'> & { variant: 'time'; value?: string | number | Date })
+  | (AppBadgeSwitchProps & { variant: 'switch' })
+  | (AppBadgeVersionProps & { variant: 'version' })
+  | (AppBadgeStateProps & { variant: 'state' })
+  | (AppBadgeDIDProps & { variant: 'did' });
+
+export default function AppBadge(props: AppBadgeProps) {
+  const { locale = 'en' } = useLocaleContext() || {};
+
+  if (props.variant === 'number') {
+    const { value, round = 0, ...rest } = props;
+    const val = formatNumber(Number(value), round);
+
+    return <AppBadgeDefault value={val} {...rest} />;
+  }
+  if (props.variant === 'time') {
+    const { value, ...rest } = props;
+    const val = formatTime(value, locale);
+
+    return <AppBadgeDefault value={val} {...rest} />;
+  }
+  if (props.variant) {
+    const Badge = BadgeVariants[props.variant];
+    if (Badge) {
+      return <Badge {...props} />;
+    }
+  }
+
+  return <AppBadgeDefault {...(props as AppBadgeDefaultProps)} />;
+}

package/src/Dashboard/app-shell/app-header.tsx

@@ -0,0 +1,91 @@
+import { isValidElement } from 'react';
+import { Box, Stack, Typography, useMediaQuery, SxProps, Theme } from '@mui/material';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import AppBadge from './app-badge';
+import { useAppInfo } from './app-info-context';
+
+function useMobile(): boolean {
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+
+  return isMobile;
+}
+
+interface DividerProps {
+  sx?: SxProps<Theme>;
+}
+
+function Divider({ sx = {} }: DividerProps) {
+  const isMobile = useMobile();
+
+  return (
+    <Box sx={{ mx: isMobile ? -2 : -3, borderBottom: '1px solid', borderColor: 'divider', mt: 1.5, mb: 1, ...sx }} />
+  );
+}
+
+interface AppHeaderProps {
+  onTabChange?: (tab: string) => void;
+}
+
+function AppHeader({ onTabChange = undefined }: AppHeaderProps) {
+  const isMobile = useMobile();
+  const {
+    icon = undefined,
+    name = '',
+    description = undefined,
+    actions = undefined,
+    badges = [],
+    tabs = [],
+    currentTab = '',
+  } = useAppInfo();
+
+  if (!name) {
+    return null;
+  }
+
+  return (
+    <Box className="app-header" sx={{ mt: 3, mb: 3 }}>
+      {/* Basic Info */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}>
+        {icon && <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</Box>}
+        <Stack sx={{ flexGrow: 1 }}>
+          <Typography variant="h1" sx={{ mb: 0.5 }}>
+            {name}
+          </Typography>
+          {description && (
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{ lineHeight: 1.6, '& a': { color: 'primary.main' }, maxWidth: 980 }}>
+              {description}
+            </Typography>
+          )}
+        </Stack>
+        {!isMobile && actions && <Box sx={{ ml: 1 }}>{actions}</Box>}
+      </Box>
+      {/* Badges */}
+      {badges.length > 0 && (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', mt: 2 }}>
+          {badges.map((config, index) =>
+            isValidElement(config) ? config : <AppBadge key={config.label || index} {...config} />
+          )}
+        </Box>
+      )}
+      {isMobile && actions && <Box sx={{ mt: isMobile ? 2 : 0 }}>{actions}</Box>}
+      {/* Tabs */}
+      {tabs.length <= 1 && <Divider />}
+      {tabs.length > 1 && (
+        <>
+          <Tabs tabs={tabs} current={currentTab} onChange={onTabChange} scrollButtons="auto" sx={{ mt: 2.5 }} />
+          <Divider sx={{ mt: 0 }} />
+        </>
+      )}
+    </Box>
+  );
+}
+
+export default AppHeader;

package/src/Dashboard/app-shell/app-info-context.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, useState, useContext, useMemo, useEffect } from 'react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { withoutTrailingSlash } from 'ufo';
+import isPlainObject from 'lodash/isPlainObject';
+import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
+import { Locale } from '@arcblock/ux/lib/type';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AppBadgeProps } from './app-badge';
+
+export type NavItem = {
+  id: string;
+  parent: string; // pid
+  title: string;
+  link: string;
+  description?: string;
+};
+
+export interface TabConfig {
+  value: string;
+  label?: string;
+  render?: React.ComponentType | React.ReactNode;
+}
+
+export interface AppInfo {
+  icon?: React.ReactNode;
+  name?: React.ReactNode;
+  description?: React.ReactNode;
+  badges?: Array<AppBadgeProps | React.ReactElement>;
+  actions?: React.ReactNode;
+  tabs?: TabConfig[];
+  currentTab?: string;
+}
+
+export interface AppInfoContextValue extends AppInfo {
+  currentTab: string;
+  TabComponent: React.ComponentType | React.ReactNode;
+  navItem?: NavItem;
+  updateAppInfo: (patch: Partial<AppInfo>) => void;
+}
+
+const AppInfoContext = createContext<AppInfoContextValue>({
+  currentTab: '',
+  TabComponent: null,
+  navItem: undefined,
+  updateAppInfo: () => {},
+});
+
+const getI18nVal = (obj: Record<string, string | Record<Locale, string>>, key: string, locale: Locale = 'en') => {
+  const val = obj?.[key];
+
+  // @ts-ignore
+  return isPlainObject(val) ? val[locale] || val.en : val;
+};
+
+interface AppInfoProviderProps {
+  path?: string;
+  currentTab?: string;
+  meta?: object;
+  children?: React.ReactNode;
+}
+export function AppInfoProvider({
+  path = window?.location?.pathname || '',
+  currentTab = '',
+  meta = undefined,
+  children = null,
+}: AppInfoProviderProps) {
+  const { locale = 'en' } = useLocaleContext() || {};
+  const targetLink = withoutTrailingSlash(path);
+  const inService = targetLink.startsWith(WELLKNOWN_BLOCKLET_ADMIN_PATH);
+  // 便于测试
+  const blockletMeta = useCreation(() => Object.assign({}, window.blocklet, meta), [meta]);
+
+  // 匹配 Dashboard NavItem
+  const navItem = useCreation(() => {
+    // @ts-ignore
+    const navigations = blockletMeta.navigation?.filter((v) =>
+      Array.isArray(v.section) ? v.section.includes('dashboard') : v.section === 'dashboard'
+    );
+    const items: NavItem[] = navigations?.flatMap((v: { items?: NavItem[] }) => v.items || []);
+
+    // 根据路由查找 navItem
+    const item = items?.find((v) => {
+      const link = getI18nVal(v, 'link', locale) || '';
+      return link.startsWith(targetLink);
+    });
+
+    if (!item) {
+      return undefined;
+    }
+
+    const parentItem = navigations.find((v: NavItem) => v.id === item.parent);
+    let title = getI18nVal(item, 'title', locale) || '';
+
+    if (!inService) {
+      // 应用带上父级标题
+      title = `${getI18nVal(parentItem, 'title', locale) || ''} - ${title}`;
+    }
+
+    return {
+      id: item.id,
+      parent: item.parent,
+      title,
+      link: getI18nVal(item, 'link', locale) || '',
+      description: getI18nVal(item, 'description', locale) || '',
+    } as NavItem;
+  }, [path, inService, locale, blockletMeta]);
+
+  const [appInfo, setAppInfo] = useState<AppInfo>({});
+
+  const updateAppInfo = useMemoizedFn((patch: Partial<AppInfo>) => {
+    setAppInfo((prev) => ({ ...prev, ...patch }));
+  });
+
+  const value = useMemo(
+    () => {
+      const { tabs = [] } = appInfo;
+      const currentTabConfig = tabs.find((v) => v.value === currentTab);
+
+      let ctab = currentTab;
+      let TabComponent = null;
+      // fallback 到第一个 tab
+      if (!currentTabConfig && tabs.length > 0) {
+        ctab = tabs[0].value;
+        TabComponent = tabs[0].render || null;
+      } else {
+        TabComponent = currentTabConfig?.render || null;
+      }
+
+      return {
+        ...appInfo,
+        navItem,
+        currentTab: ctab,
+        TabComponent,
+        updateAppInfo,
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [appInfo, navItem, currentTab, updateAppInfo]
+  );
+
+  // 非 Service 应用，动态更新 name / description
+  useEffect(() => {
+    if (!inService) {
+      updateAppInfo({
+        name: navItem?.title || '',
+        description: navItem?.description || '',
+      });
+    }
+  }, [navItem?.title, navItem?.description, inService, updateAppInfo]);
+
+  return <AppInfoContext.Provider value={value}>{children}</AppInfoContext.Provider>;
+}
+
+export function useAppInfo(): AppInfoContextValue {
+  const context = useContext(AppInfoContext);
+  return context;
+}

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

@@ -0,0 +1,131 @@
+import { Box, Skeleton, styled, Typography } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { TBox } from '@arcblock/ux/lib/MuiWrap';
+import { Link } from 'react-router-dom';
+import { BoxProps } from '@mui/material/Box';
+
+export const isExternal = (to: string = ''): boolean => {
+  return to.startsWith('http:') || to.startsWith('https:');
+};
+
+export const isSameOrigin = (to: string): boolean => {
+  try {
+    const url = new URL(to);
+    return url.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+};
+
+export const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+    borderRadius: '50%',
+    backgroundColor: color,
+    marginRight: theme.spacing(1),
+  };
+});
+export const StyledBadge = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: theme.spacing(3),
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  borderRadius: (theme.shape.borderRadius as number) * 0.5,
+  fontSize: 12,
+  overflow: 'hidden',
+  '& .app-badge-label': {
+    display: 'inline-flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    lineHeight: theme.spacing(3),
+    marginLeft: theme.spacing(-1.5),
+    paddingLeft: theme.spacing(1.5),
+    marginRight: theme.spacing(1),
+    fontSize: 12,
+    backgroundColor: theme.palette.grey[100],
+    color: theme.palette.text.secondary,
+    '&::after': {
+      content: '""',
+      height: theme.spacing(3),
+      borderRight: '1px solid',
+      borderColor: theme.palette.divider,
+      backgroundColor: theme.palette.grey[100],
+    },
+  },
+  '& .app-badge-value': {
+    color: theme.palette.text.primary,
+    fontSize: 12,
+  },
+})) as typeof TBox;
+
+export interface BadgeContainerProps extends Omit<BoxProps, 'to'> {
+  loading?: boolean;
+  to?: string;
+}
+
+export function BadgeContainer({ loading = false, children = null, to = '', ...rest }: BadgeContainerProps) {
+  const container = (
+    <StyledBadge className="app-badge" component={to ? 'a' : 'div'} href={to} {...rest}>
+      {children}
+    </StyledBadge>
+  );
+
+  if (loading) {
+    return <Skeleton variant="rounded">{container}</Skeleton>;
+  }
+
+  if (to) {
+    if (isExternal(to)) {
+      const target = isSameOrigin(to) ? '_self' : '_blank';
+
+      // 外部链接跳转
+      return (
+        <StyledBadge className="app-badge" component="a" href={to} target={target} rel="noreferrer noopener" {...rest}>
+          {children}
+        </StyledBadge>
+      );
+    }
+
+    // 内部路由跳转
+    return (
+      <StyledBadge className="app-badge" component={Link} to={to} {...rest}>
+        {children}
+      </StyledBadge>
+    );
+  }
+
+  // 无跳转
+  return (
+    <StyledBadge className="app-badge" component="div" {...rest}>
+      {children}
+    </StyledBadge>
+  );
+}
+
+export interface AppBadgeDefaultProps extends BadgeContainerProps {
+  icon?: string;
+  label?: string;
+  value?: string | number;
+  round?: number;
+}
+
+export function AppBadgeDefault({ icon = '', label = '', value = '', loading = false, ...rest }: AppBadgeDefaultProps) {
+  return (
+    <BadgeContainer loading={loading} {...rest}>
+      {label && (
+        <Typography className="app-badge-label">
+          {icon && <Icon icon={icon} />}
+          {label}
+        </Typography>
+      )}
+      <Typography className="app-badge-value">{value}</Typography>
+    </BadgeContainer>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { useCreation } from 'ahooks';
+import { Typography } from '@mui/material';
+import { isEthereumDid } from '@arcblock/ux/lib/Util';
+import DidAddress from '@arcblock/ux/lib/Address';
+import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
+
+export interface AppBadgeDIDProps extends Omit<AppBadgeDefaultProps, 'value'> {
+  value?: string;
+}
+
+export function AppBadgeDID({ value = '', loading = false, ...rest }: AppBadgeDIDProps) {
+  const label = useCreation(() => {
+    const isEthDid = isEthereumDid(value);
+
+    return `DID:${isEthDid ? 'ETH' : 'ABT'}`;
+  }, [value]);
+
+  return (
+    <BadgeContainer loading={loading} {...rest}>
+      <Typography className="app-badge-label">{label}</Typography>
+      <Typography className="app-badge-value">
+        <DidAddress inline size={14} compact responsive={false}>
+          {value}
+        </DidAddress>
+      </Typography>
+    </BadgeContainer>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { useTheme, alpha, Typography, styled } from '@mui/material';
+import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
+import { BadgeColor, getBgColor, getTextColor } from './app-badge-version';
+
+const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+    borderRadius: '50%',
+    backgroundColor: color,
+    marginRight: theme.spacing(1),
+  };
+});
+
+export interface AppBadgeStateProps extends AppBadgeDefaultProps {
+  color?: BadgeColor;
+}
+
+export function AppBadgeState({ value = '', color = 'primary', loading = false, ...rest }: AppBadgeStateProps) {
+  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}>
+      <StateIcon color={getTextColor(theme, color)} />
+      <Typography className="app-badge-value" style={{ color: txtcolor }}>
+        {value}
+      </Typography>
+    </BadgeContainer>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { Box, Typography, useTheme } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
+
+export interface AppBadgeSwitchProps extends Omit<AppBadgeDefaultProps, 'value' | 'onChange'> {
+  value?: unknown;
+  trueValue?: unknown;
+  falseValue?: unknown;
+  onChange?: (checked: boolean) => void;
+}
+
+export function AppBadgeSwitch({
+  label = '',
+  value = undefined,
+  trueValue = true,
+  falseValue = false,
+  loading = false,
+  onChange = undefined,
+  ...rest
+}: AppBadgeSwitchProps) {
+  const theme = useTheme();
+  let checked = false;
+  const handleClick = useMemoizedFn(() => onChange?.(!checked));
+
+  if (value === trueValue) {
+    checked = true;
+  } else if (value === falseValue) {
+    checked = false;
+  } else {
+    checked = Boolean(value);
+  }
+
+  return (
+    <BadgeContainer
+      loading={loading}
+      sx={{
+        cursor: 'pointer',
+        backgroundColor: checked ? 'primary.main' : 'grey.100',
+        borderColor: checked ? 'primary.main' : 'divider',
+        transition: 'background-color 0.3s ease',
+      }}
+      onClick={handleClick}
+      {...rest}>
+      {/* 内容 */}
+      <Typography
+        sx={{
+          fontWeight: 400,
+          paddingLeft: checked ? 0 : theme.spacing(2.5),
+          paddingRight: checked ? theme.spacing(2.5) : 0,
+          color: checked ? 'common.white' : 'text.secondary',
+          transition: 'color 0.3s ease',
+        }}>
+        {label}
+      </Typography>
+      {/* 滑块 */}
+      <Box
+        sx={{
+          width: theme.spacing(2.5),
+          height: theme.spacing(2.5),
+          borderRadius: `${(theme.shape.borderRadius as number) * 0.5}px`,
+          backgroundColor: 'common.white',
+          position: 'absolute',
+          top: '50%',
+          left: checked ? `calc(100% - ${theme.spacing(3)})` : theme.spacing(0.5),
+          transform: 'translateY(-50%)',
+          transition: 'left 0.3s ease',
+          boxShadow: 1,
+        }}
+      />
+    </BadgeContainer>
+  );
+}