@arcblock/ux 2.11.50 → 2.12.1

package/src/NavMenu/style.ts

@@ -1,193 +1,230 @@
 import { styled } from '../Theme';
 
-type NavMenuBaseProps = {
+type NavMenuProps = {
   $bgColor: string;
   $textColor: string;
-  $activeTextColor: string;
 };
 
-const NavMenuBase = styled('nav', {
-  shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor' && prop !== '$activeTextColor',
-})<NavMenuBaseProps>`
-  background-color: ${(props) => props.$bgColor};
-  font-size: 16px;
-  // width: 100%;
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    display: flex;
-    align-items: center;
-  }
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  /* active/hover */
-  .navmenu-item,
-  .navmenu-sub {
-    color: ${(props) => props.$textColor};
-  }
-  .navmenu-item--active,
-  .navmenu-item:hover,
-  .navmenu-sub--opened {
-    color: ${(props) => props.$activeTextColor};
-  }
-
-  .navmenu-item {
-    position: relative;
-    cursor: pointer;
-    transition: color 0.2s ease-in-out;
-    a {
-      white-space: nowrap;
-    }
-    a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
-  }
-
-  .navmenu-sub {
-    position: relative;
-    cursor: pointer;
-  }
-  /* icon & expand icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon,
-  .navmenu-sub-expand-icon {
-    display: flex;
-    line-height: 1;
-  }
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    margin-right: 4px;
-  }
-  .navmenu-item-icon > *,
-  .navmenu-sub-icon > * {
-    width: auto;
-    height: 22px;
-    max-height: 22px;
-    font-size: 1.5em;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: 8px;
-    > * {
-      width: 0.8em;
-      height: 0.8em;
-      transition: transform 0.2s ease-in-out;
-    }
-  }
-`;
-
-export const HorizontalStyle = styled(NavMenuBase)`
-  padding: 8px 16px;
-  min-width: 50px;
+// .navmenu-root
+export const NavMenuRoot = styled('nav', {
+  shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
+})<NavMenuProps>(({ $bgColor, $textColor }) => ({
+  padding: '8px 16px',
+  minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
-  flex-grow: 100;
+  flexGrow: 100,
+  backgroundColor: $bgColor,
+  color: $textColor,
+  fontSize: '16px',
+}));
 
-  .navmenu-root {
-    display: flex;
-    align-items: center;
-  }
-  /* 顶级菜单间隔 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    margin-left: 24px;
-    white-space: nowrap;
-  }
-  .navmenu-root > .navmenu-item:first-of-type,
-  .navmenu-root > .navmenu-sub:first-of-type {
-    margin-left: 0;
-  }
+// .navmenu-list
+export const NavMenuList = styled('ul')(() => ({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  // inline 布局
+  '&.navmenu-list--inline ': {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+}));
+
+type NavMenuItemProps = {
+  $activeTextColor: string;
+};
+// 菜单项 .navmenu-item
+export const NavMenuItem = styled('li', {
+  shouldForwardProp: (prop) => prop !== '$activeTextColor',
+})<NavMenuItemProps>(({ $activeTextColor }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  padding: '0 12px',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  transition: 'color 0.2s ease-in-out',
+  // 间距调整
+  '&:first-of-type': {
+    paddingLeft: 0,
+  },
+  '&:last-of-type': {
+    paddingRight: 0,
+  },
+  // 内部链接
+  a: {
+    whiteSpace: 'nowrap',
+    color: 'inherit',
+    textDecoration: 'none',
+    // 扩大点击区域
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      backgroundColor: 'transparent',
+      content: '""',
+    },
+  },
+  // 图标
+  '.navmenu-item__icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '4px',
+    '& > *': {
+      width: 'auto',
+      height: '22px',
+      maxHeight: '22px',
+      fontSize: '1.5em',
+    },
+  },
+  // 右侧内容
+  '.navmenu-item__content': {
+    height: '32px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    gap: '5px',
+  },
+  '.navmenu-item__label': {
+    display: 'flex',
+    alignItems: 'center',
+    '&-arrow': {
+      marginLeft: '6px',
+      fontSize: '14px',
+      opacity: 0,
+      transition: 'opacity 0.2s ease-in-out',
+    },
+  },
+  '.navmenu-item__desc': {
+    fontSize: '14px',
+  },
+  // 悬停状态下
+  '&:hover': {
+    color: $activeTextColor,
+  },
+  // 选中状态下
+  '&.navmenu-item--active': {
+    color: $activeTextColor,
+  },
+  // Panel 形态下
+  '&.navmenu-item--panel': {
+    padding: '8px 16px',
+    borderRadius: '8px',
+    '.navmenu-item__icon': {
+      width: '32px',
+      height: '32px',
+      marginRight: '16px',
+      border: '1px solid #eff1f5',
+      borderRadius: '4px',
+      color: '#9497a0',
+    },
+    '.navmenu-item__label': {
+      fontSize: '14px',
+      lineHeight: 1,
+      color: '#26292e',
+    },
+    '.navmenu-item__desc': {
+      fontSize: '12px',
+      lineHeight: 1,
+      color: '#9497a0',
+    },
+    '&:hover': {
+      background: '#f9f9fb',
+      transition: 'background 0.2s ease-in-out',
+      '.navmenu-item__label-arrow': {
+        opacity: 1,
+      },
+      '.navmenu-item__desc': {
+        color: '#26292e',
+        transition: 'color 0.2s ease-in-out',
+      },
+    },
+    '&.navmenu-item--active': {
+      background: '#f9f9fb',
+    },
+  },
+  // inline 布局中
+  '&.navmenu-item--inline': {
+    margin: 0,
+    padding: '0 16px',
+    minHeight: '48px',
+    lineHeight: '48px',
+    flexWrap: 'wrap',
+  },
+}));
 
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    position: absolute;
-    top: 100%;
-  }
-  .navmenu-sub-list {
-    padding: 16px;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    .navmenu-item + .navmenu-item {
-      margin-top: 8px;
-    }
-  }
-  /* 二级 sub menu */
-  .navmenu-root > .navmenu-sub {
-    white-space: nowrap;
-    > .navmenu-sub-container {
-      left: 50%;
-      transform: translateX(-50%);
-      padding-top: 16px;
-    }
-    &.navmenu-sub--opened > .navmenu-sub-container {
-      display: block;
-    }
-  }
-`;
+// 包含子菜单的导航项 .navmenu-item .navmenu-sub
+export const NavMenuSub = styled(NavMenuItem)(() => ({
+  '.navmenu-item': {
+    marginLeft: 0,
+  },
+  '& .navmenu-sub__container': {
+    visibility: 'hidden',
+    opacity: 0,
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    zIndex: 1,
+    transform: 'translateX(-50%)',
+    paddingTop: '16px',
+    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
+  },
+  '&.navmenu-sub--opened > .navmenu-sub__container': {
+    visibility: 'visible',
+    opacity: 1,
+  },
+  // 扩展图标
+  '.navmenu-sub__expand-icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: '8px',
+    '& > *': {
+      width: '0.8em',
+      height: '0.8em',
+      transition: 'transform 0.2s ease-in-out',
+    },
+    '.navmenu-item--inline &': {
+      marginLeft: 'auto',
+    },
+  },
+  // inline 布局
+  '&.navmenu-item--inline': {
+    '.navmenu-sub__container': {
+      position: 'static',
+      transform: 'none',
+      flex: '1 0 100%',
+      margin: '0 -16px',
+      padding: 0,
+      height: 0,
+      overflow: 'hidden',
+      transition: 'height 0.2s ease-in-out',
+    },
+    '&.navmenu-sub--opened > .navmenu-sub__container': {
+      height: 'auto',
+    },
+    '.navmenu-sub__list': {
+      padding: 0,
+      paddingLeft: '16px',
+      boxShadow: 'none',
+    },
+  },
+}));
 
-/* inline mode */
-export const InlineStyle = styled(NavMenuBase)`
-  font-size: 16px;
-  .navmenu-root {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    padding: 0 16px;
-  }
-  & .navmenu-sub {
-    flex-wrap: wrap;
-  }
-  /* 顶级 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    line-height: 48px;
-    border-bottom: 1px solid #eee;
-  }
-  /* icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    width: 30px;
-    margin: 0;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: auto;
-  }
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    flex: 1 0 100%;
-    margin: 0 -16px;
-    padding-bottom: 8px;
-    .navmenu-item,
-    .navmenu-sub {
-      line-height: 32px;
-    }
-  }
-  .navmenu-sub-list {
-    padding-left: 16px;
-    .navmenu-item,
-    .navmenu-sub {
-      padding-left: 30px;
-      font-size: 13px;
-    }
-  }
-  /* 二级 menu */
-  .navmenu-sub--opened > .navmenu-sub-container {
-    display: block;
-  }
-`;
+// 下拉子菜单 .navmenu-sub-list
+export const NavMenuSubList = styled('ul')(() => ({
+  margin: 0,
+  padding: '16px',
+  borderRadius: '4px',
+  background: '#fff',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  '& .navmenu-item + .navmenu-item': {
+    marginTop: '8px',
+  },
+}));

package/src/NavMenu/sub-item-group.tsx

@@ -0,0 +1,36 @@
+import { Box, BoxProps } from '@mui/material';
+import { styled } from '../Theme';
+
+const Group = styled(Box)`
+  padding: 16px 24px;
+  border-radius: 8px;
+  background-color: white;
+  cursor: auto;
+
+  .group-label {
+    margin-bottom: 8px;
+    color: #71717b;
+    font-size: 12px;
+  }
+
+  .nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+export interface NavMenuSubItemGroupProps extends BoxProps {
+  label: React.ReactNode;
+}
+
+export default function NavMenuSubItemGroup({ label, children, className, sx, ...rest }: NavMenuSubItemGroupProps) {
+  return (
+    <Group className={`nav-menu-sub-item-group ${className}`} sx={{ ...sx }} {...rest}>
+      <Box className="group-label">{label}</Box>
+      <Box component="ul" className="nav">
+        {children}
+      </Box>
+    </Group>
+  );
+}

package/src/RelativeTime/index.tsx

@@ -32,6 +32,7 @@ dayjs.updateLocale('zh-cn', {
     yy: '%d 年',
   },
 });
+// FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 
 export interface RelativeTimeProps {

package/src/SessionUser/components/quick-login-item.tsx

@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+import DID from '@arcblock/ux/lib/DID';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
+import { Box, Chip, Typography } from '@mui/material';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import noop from 'lodash/noop';
+
+import Avatar from '../../Avatar';
+import { getSourceProvider } from '../libs/utils';
+
+export default function QuickLoginItem({
+  userSession,
+  locale = 'en',
+  onClick = noop,
+}: {
+  onClick?: () => void;
+  locale?: string;
+  userSession: {
+    user: {
+      avatar: string;
+      did: string;
+      fullName: string;
+      role: string;
+      roleTitle: string;
+      email: string;
+    };
+    extra: {
+      walletOS: string;
+      provider: string;
+    };
+    updatedAt: string;
+  };
+}) {
+  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
+
+  return (
+    <Box
+      sx={{
+        borderRadius: 2,
+        p: 2,
+        transition: 'background-color 0.5s',
+        '&:hover, &:active': {
+          backgroundColor: colors.backgroundsBgSubtileHover,
+        },
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: colors.surfacePrimarySubtitle,
+        },
+        width: '100%',
+        backgroundColor: 'white',
+      }}
+      onClick={onClick}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          flex: 1,
+          overflow: 'hidden',
+        }}>
+        <Avatar src={userSession.user.avatar} did={userSession.user.did} size={44} variant="circle" shape="circle" />
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
+          <Typography
+            sx={{
+              fontSize: '16px',
+              fontWeight: 500,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              color: colors.textBase,
+            }}>
+            {userSession.user.fullName}
+            <Chip
+              label={userSession.user?.roleTitle || userSession.user?.role}
+              size="small"
+              variant="outlined"
+              sx={() => ({
+                height: 'auto',
+                fontWeight: 'bold',
+                fontSize: '12px',
+                borderColor: colors.lineBorderStrong,
+                color: colors.textSubtitle,
+              })}
+            />
+          </Typography>
+          {isRawWalletAccount ? (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}>
+              <WalletOSIcon
+                provider={userSession?.extra?.provider}
+                walletOS={userSession?.extra?.walletOS}
+                color={colors.textSubtitle}
+              />
+              <DID
+                // @ts-ignore
+                locale={locale}
+                did={userSession.user.did}
+                size={12}
+                sx={{
+                  lineHeight: 1,
+                  fontSize: '12px',
+                  mt: 0.5,
+                  '& span.arc-avatar-did-motif': {
+                    display: 'none !important',
+                  },
+                }}
+                compact
+              />
+            </Box>
+          ) : (
+            <Typography sx={{ fontSize: '12px', color: colors.textSubtitle }}>{userSession.user.email}</Typography>
+          )}
+        </Box>
+      </Box>
+      {userSession.updatedAt && (
+        <Box component="span" sx={{ color: colors.textMuted, fontSize: '12px', flexShrink: 0 }}>
+          {/* @ts-ignore */}
+          <RelativeTime value={userSession.updatedAt} locale={locale} />
+        </Box>
+      )}
+    </Box>
+  );
+}