@arcblock/ux 3.1.31 → 3.1.33

package/src/UserCard/Cards/social-actions.tsx

@@ -67,7 +67,7 @@ function Chat({
       session?.login(noop, {
         openMode: 'redirect',
         redirect: window.location.href,
-      }); // TODO: 需要确认使用是否正确
+      });
       return;
     }
     window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
@@ -87,7 +87,8 @@ function Chat({
     <ButtonWrapper
       className="user-card__social-actions-chat"
       variant="outlined"
-      color="inherit"
+      color="primary"
+      size="small"
       onClick={onNavigateToChat}>
       <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
       {t('chat')}
@@ -148,7 +149,8 @@ function Follow({
     <ButtonWrapper
       className="user-card__social-actions-follow"
       variant="outlined"
-      color="inherit"
+      color="primary"
+      size="small"
       onClick={handleFollowAction}>
       {followed ? (
         <NotificationsOffIcon sx={{ fontSize: 14, mr: 0.5 }} />

package/src/UserCard/Content/minimal.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Typography, Box } from '@mui/material';
+import { Typography, Box, useMediaQuery, Divider } from '@mui/material';
 import { DID } from '../../DID';
 import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
@@ -31,7 +31,7 @@ function MinimalContent({ ...props }: MinimalContentProps) {
     renderName,
     ...rest
   } = props;
-
+  const isSmallScreen = useMediaQuery('(max-width:500px)');
   return (
     <Box
       className="user-card__avatar-content"
@@ -44,10 +44,12 @@ function MinimalContent({ ...props }: MinimalContentProps) {
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: 1,
+          flexDirection: isSmallScreen ? 'column' : 'row',
+          alignItems: isSmallScreen ? 'flex-start' : 'center',
+          gap: isSmallScreen ? 2 : 1,
           flex: 1,
           minWidth: 0,
+          flexWrap: 'wrap',
         }}>
         <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1 }}>
           <TooltipAvatar
@@ -91,7 +93,10 @@ function MinimalContent({ ...props }: MinimalContentProps) {
             ) : null}
           </Box>
         </Box>
-        <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
+        {isSmallScreen ? <Divider sx={{ width: '100%' }} /> : null}
+        {!renderTopRightContent ? (
+          <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
+        ) : null}
       </Box>
       {renderTopRight(renderTopRightContent, topRightMaxWidth)}
     </Box>

package/src/Util/index.ts

@@ -710,6 +710,10 @@ export const compareVersions = (version1: string, version2: string) => {
  * 通过 server 的版本和 ux 的版本共同决定
  */
 export const isSupportFollow = () => {
+  // HACK: 本地开发时，为了测试方便，暂时放开限制
+  if (process.env.NODE_ENV === 'development') {
+    return true;
+  }
   const serverVersion = getServerVersion();
   const uxVersion = getUxPackageVersion();
   const jsSdkVersion = getJsSdkVersion();