@arcblock/ux 3.1.28 → 3.1.30

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

@@ -0,0 +1,196 @@
+import { useMemo } from 'react';
+import { Box, Button, styled } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { joinURL } from 'ufo';
+import noop from 'lodash/noop';
+import { Icon } from '@iconify/react';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+
+import useFollow from '../use-follow';
+import { User, UserCardProps } from '../types';
+import { useLocaleContext } from '../../Locale/context';
+import { translate } from '../../Locale/util';
+import { isSupportFollow } from '../../Util';
+
+type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session'> & {
+  user: User; // 当前卡片显示的用户，要与 session.user 区分开
+};
+
+const translations = {
+  zh: {
+    chat: '聊天',
+    follow: '关注',
+    unfollow: '取消关注',
+    follow_success: '关注成功',
+    unfollow_success: '取消关注成功',
+  },
+  en: {
+    chat: 'Chat',
+    follow: 'Follow',
+    unfollow: 'Unfollow',
+    follow_success: 'Follow success',
+    unfollow_success: 'Unfollow success',
+  },
+};
+
+const getDiscussKitMountPoint = () => {
+  const { componentMountPoints = [] } = window.blocklet || {};
+  const component = componentMountPoints.find((c: any) => c.name === 'did-comments');
+  return component?.mountPoint;
+};
+
+// chat: 1. showSocialActions.chat 为 true，2. 必须安装了 discuss kit
+function Chat({
+  user,
+  showSocialActions,
+  session,
+}: {
+  user: SocialActionsProps['user'];
+  showSocialActions: SocialActionsProps['showSocialActions'];
+  session: SocialActionsProps['session'];
+}) {
+  const { locale } = useLocaleContext() || { locale: 'en' };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const isLogin = useMemo(() => {
+    return !!session?.user?.did;
+  }, [session?.user?.did]);
+
+  // 获取 discuss kit 的挂载点
+  const discussKitMountPoint = useMemo(() => getDiscussKitMountPoint(), []);
+
+  const onNavigateToChat = useMemoizedFn(() => {
+    if (!isLogin) {
+      session?.login(noop, {
+        openMode: 'redirect',
+        redirect: window.location.href,
+      }); // TODO: 需要确认使用是否正确
+      return;
+    }
+    window.open(joinURL(discussKitMountPoint, `/chat/dm/${user?.did}`), '_blank');
+  });
+
+  const showChat = useMemo(() => {
+    // boolean：直接使用原值；对象：取对应属性值
+    const chatEnabled = typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.chat;
+
+    return chatEnabled && !!discussKitMountPoint;
+  }, [showSocialActions, discussKitMountPoint]);
+
+  if (!showChat) {
+    return null;
+  }
+  return (
+    <ButtonWrapper
+      className="user-card__social-actions-chat"
+      variant="outlined"
+      color="inherit"
+      onClick={onNavigateToChat}>
+      <Icon icon="tabler:message-dots" style={{ marginRight: 4 }} />
+      {t('chat')}
+    </ButtonWrapper>
+  );
+}
+
+// follow: 1. showSocialActions.follow 为 true
+function Follow({
+  user,
+  showSocialActions,
+  session,
+}: {
+  user: SocialActionsProps['user'];
+  showSocialActions: SocialActionsProps['showSocialActions'];
+  session: SocialActionsProps['session'];
+}) {
+  const { locale } = useLocaleContext() || { locale: 'en' };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const isLogin = useMemo(() => {
+    return !!session?.user?.did;
+  }, [session?.user?.did]);
+
+  const showFollow = useMemo(() => {
+    // boolean：直接使用原值；对象：取对应属性值
+    return typeof showSocialActions === 'boolean' ? !!showSocialActions : showSocialActions?.follow;
+  }, [showSocialActions]);
+
+  const { followed, followUser, unfollowUser } = useFollow({
+    user,
+    t,
+    isMySelf: false,
+    visible: !!showFollow,
+  });
+  const handleFollowAction = useMemoizedFn(() => {
+    if (!isLogin) {
+      session?.login(noop, {
+        openMode: 'redirect',
+        redirect: window.location.href,
+      });
+      return;
+    }
+    if (followed) {
+      unfollowUser(user.did);
+    } else {
+      followUser(user.did);
+    }
+  });
+
+  if (!showFollow) {
+    return null;
+  }
+
+  return (
+    <ButtonWrapper
+      className="user-card__social-actions-follow"
+      variant="outlined"
+      color="inherit"
+      onClick={handleFollowAction}>
+      {followed ? (
+        <NotificationsOffIcon sx={{ fontSize: 14, mr: 0.5 }} />
+      ) : (
+        <NotificationsIcon sx={{ fontSize: 14, mr: 0.5 }} />
+      )}
+      {followed ? t('unfollow') : t('follow')}
+    </ButtonWrapper>
+  );
+}
+
+// 社交操作组件
+// 按钮的显示逻辑
+// 通用逻辑： 1. user 和 session.user 不能是同一个用户, 2. 相关依赖支持，3. showSocialActions 为 true 或 为 object
+// 其他逻辑： 1. 如果 session 中没有用户信息，点击后需要重定向到登录页面
+function SocialActions({ showSocialActions, session, user }: SocialActionsProps) {
+  const isSameUser = useMemo(() => {
+    return session?.user?.did === user?.did;
+  }, [session?.user?.did, user?.did]);
+
+  const isSupportSocialActions = useMemo(() => {
+    return isSupportFollow();
+  }, []);
+
+  // 如果 session 中没有用户信息，或者 user 和 session.user 是同一个用户，则不显示社交操作
+  if (isSameUser || !isSupportSocialActions || !showSocialActions) {
+    return null;
+  }
+
+  return (
+    <Box className="user-card__social-actions" sx={{ display: 'flex', gap: 1 }}>
+      <Chat session={session} user={user} showSocialActions={showSocialActions} />
+      <Follow session={session} user={user} showSocialActions={showSocialActions} />
+    </Box>
+  );
+}
+
+export default SocialActions;
+
+export const ButtonWrapper = styled(Button)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-weight: 500;
+  border-color: ${({ theme }) => theme.palette.grey[300]};
+  line-height: 1.5;
+`;

package/src/UserCard/Content/minimal.tsx

@@ -5,6 +5,7 @@ import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
 import ShortenLabel from './shorten-label';
+import SocialActions from '../Cards/social-actions';
 
 interface MinimalContentProps extends UserCardProps {
   user: User;
@@ -42,44 +43,55 @@ function MinimalContent({ ...props }: MinimalContentProps) {
       <Box
         sx={{
           display: 'flex',
-          justifyContent: 'flex-start',
+          justifyContent: 'space-between',
           alignItems: 'center',
           gap: 1,
           flex: 1,
           minWidth: 0,
         }}>
-        <TooltipAvatar
-          user={user}
-          avatarSize={avatarSize}
-          shouldShowHoverCard={shouldShowHoverCard}
-          renderCardContent={renderCardContent}
-          avatarProps={avatarProps}
-          {...rest}
-        />
-        <Box>
-          <Typography
-            variant="subtitle1"
-            className="user-card__full-name-label"
-            noWrap
-            sx={{
-              fontWeight: 500,
-              color: 'text.primary',
-              fontSize: 18,
-              lineHeight: 1.1,
-            }}>
-            {renderName ? (
-              renderName(user)
-            ) : (
-              <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
-                {user.fullName || user.email || user.did}
-              </ShortenLabel>
-            )}
-          </Typography>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1 }}>
+          <TooltipAvatar
+            user={user}
+            avatarSize={avatarSize}
+            shouldShowHoverCard={shouldShowHoverCard}
+            renderCardContent={renderCardContent}
+            avatarProps={avatarProps}
+            {...rest}
+          />
+          <Box>
+            <Typography
+              variant="subtitle1"
+              className="user-card__full-name-label"
+              noWrap
+              sx={{
+                fontWeight: 500,
+                color: 'text.primary',
+                fontSize: 18,
+                lineHeight: 1.1,
+              }}>
+              {renderName ? (
+                renderName(user)
+              ) : (
+                <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
+                  {user.fullName || user.email || user.did}
+                </ShortenLabel>
+              )}
+            </Typography>
 
-          {showDid && user.did ? (
-            <DID did={user.did} size={14} copyable compact locale="en" sx={{ lineHeight: 1.5 }} {...(didProps ?? {})} />
-          ) : null}
+            {showDid && user.did ? (
+              <DID
+                did={user.did}
+                size={14}
+                copyable
+                compact
+                locale="en"
+                sx={{ lineHeight: 1.5 }}
+                {...(didProps ?? {})}
+              />
+            ) : null}
+          </Box>
         </Box>
+        <SocialActions showSocialActions={rest.showSocialActions} user={user!} session={rest.session} />
       </Box>
       {renderTopRight(renderTopRightContent, topRightMaxWidth)}
     </Box>

package/src/UserCard/UserCard.stories.jsx

@@ -5,6 +5,7 @@ export { default as DidControl } from './demo/didControl';
 export { default as TopRightContent } from './demo/topRightContent';
 export { default as CustomFooter } from './demo/customFooter';
 export { default as DidOnlyAvatar } from './demo/did-only-avatar';
+export { default as SocialActions } from './demo/socialActions';
 
 export default {
   title: 'Data Display/UserCard',

package/src/UserCard/index.tsx

@@ -6,6 +6,7 @@ import DetailedCard from './Cards';
 import DialogContainer from './Container/dialog';
 import CardContainer from './Container/card';
 import Avatar from '../Avatar';
+import SocialActions from './Cards/social-actions';
 import { getUserByDid, isUserDid } from './utils';
 
 // 创建仅显示名称首字母的头像
@@ -93,6 +94,9 @@ function UserCard(props: UserCardProps) {
           infoType={props.popupInfoType || props.infoType}
           didProps={props.popupDidProps || props.didProps}
           showDid={props.popupShowDid || props.showDid}
+          showSocialActions={
+            props.popupShowSocialActions === undefined ? props.showSocialActions : props.popupShowSocialActions
+          }
         />
       </DialogContainer>
     );
@@ -124,3 +128,5 @@ function UserCard(props: UserCardProps) {
 }
 
 export default UserCard;
+
+export { SocialActions };

package/src/UserCard/types.ts

@@ -3,6 +3,7 @@ import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
 import { AvatarProps } from '../Avatar';
 import { ShortenLabelProps } from './Content/shorten-label';
+import type { Session } from '../type';
 
 type UserPublicInfo = {
   avatar: string;
@@ -100,13 +101,17 @@ export enum CardType {
 
 // 信息类型
 export enum InfoType {
-  NameOnly = 'NameOnly', // 仅显示名称
   Minimal = 'Minimal', // 极简模式，显示头像、名称和DID
   Basic = 'Basic', // 基本信息模式
 }
 
+export type SocialActionProps = {
+  chat: boolean;
+  follow: boolean;
+};
 // 定义UserCard属性接口
 export interface UserCardProps {
+  session?: Session;
   user?: User;
   did?: string;
   cardType?: CardType;
@@ -146,6 +151,10 @@ export interface UserCardProps {
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth?: number;
 
+  // 社交按钮相关属性
+  showSocialActions?: SocialActionProps | boolean;
+  popupShowSocialActions?: SocialActionProps | boolean;
+
   // 自定义内容渲染函数
   renderCustomContent?: () => React.ReactNode;
 

package/src/UserCard/use-follow.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import isNil from 'lodash/isNil';
+
+import type { AxiosError } from 'axios';
+import { BlockletSDK } from '@blocklet/js-sdk';
+import Toast from '../Toast';
+import type { User } from './types';
+
+export const formatAxiosError = (err: AxiosError) => {
+  const { response } = err;
+
+  if (response) {
+    return `Request failed: ${response.status} ${response.statusText}: ${JSON.stringify(response.data)}`;
+  }
+
+  return err.message;
+};
+
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({
+  user,
+  t,
+  isMySelf,
+  visible,
+}: {
+  user: User;
+  t: (k: string) => string;
+  isMySelf: boolean;
+  visible: boolean;
+}) {
+  const [followed, setFollowed] = useState(false);
+
+  const userDid = useMemo(() => user?.did, [user]);
+
+  // 判断 user 对象中 isFollowing 值是否有效，有isFollowed字段并且值不为 undefined 或 null
+  // 如果为 true 则不需要通过 api 查询，直接使用 user.isFollowing 值
+  // 如果为 false 则需要通过 api 查询，并设置 user.isFollowing 值
+  const hasFollowedField = useMemo(() => {
+    return Object.prototype.hasOwnProperty.call(user, 'isFollowing') && !isNil((user as any).isFollowing);
+  }, [user]);
+
+  const client = useMemo(() => {
+    let _client: BlockletSDK | null = null;
+    try {
+      _client = new BlockletSDK();
+    } catch (error) {
+      console.error('Failed to initialize BlockletSDK:', error);
+      _client = null;
+    }
+    return _client;
+  }, []);
+
+  const isFollowingUser = useMemoizedFn(async () => {
+    if (!client) {
+      setFollowed(false);
+      return;
+    }
+    try {
+      if (isMySelf) {
+        setFollowed(true);
+        return;
+      }
+      const res = await client.user.isFollowingUser({ userDid });
+      setFollowed(res);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
+    if (!client || (isMySelf && followUserDid === userDid)) {
+      return;
+    }
+    try {
+      await client.user.followUser({ userDid: followUserDid });
+      Toast.success(t('follow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
+    if (!client || (isMySelf && unfollowUserDid === userDid)) {
+      return;
+    }
+    try {
+      await client.user.unfollowUser({ userDid: unfollowUserDid });
+      Toast.success(t('unfollow_success'));
+      isFollowingUser();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error as AxiosError));
+    }
+  });
+
+  useEffect(() => {
+    // 如果 user 对象中已经存在了 isFollowing 字段，则不进行查询
+    if (visible && userDid && !isMySelf && !!client && !hasFollowedField) {
+      isFollowingUser();
+    }
+  }, [isFollowingUser, userDid, isMySelf, client, hasFollowedField, visible]);
+
+  // 如果 user 对象中已经存在了 isFollowing 字段，则直接设置 followed 状态
+  useEffect(() => {
+    if (hasFollowedField) {
+      setFollowed((user as any)?.isFollowing || false);
+    }
+  }, [hasFollowedField, user]);
+
+  return {
+    followed,
+    followUser,
+    unfollowUser,
+  };
+}

package/src/Util/index.ts

@@ -15,8 +15,10 @@ import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import semver from 'semver';
 
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
+import pkg from '../../package.json';
 import type { $TSFixMe, Locale } from '../type';
 import { getFederatedEnabled } from './federated';
 
@@ -658,3 +660,68 @@ export function hexToRgba(hex: string, alpha = 1) {
   // 返回 RGBA 格式
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
+
+// 获取 server 的版本号
+export const getServerVersion = () => {
+  return window.blocklet?.serverVersion || '';
+};
+
+// 获取 UX 包版本号
+export const getUxPackageVersion = () => {
+  return pkg.version || '';
+};
+
+export const getJsSdkVersion = () => {
+  // 从 package.json 的 dependencies 中获取 @blocklet/js-sdk 的版本
+  const jsSdkVersion = pkg.dependencies?.['@blocklet/js-sdk'];
+  if (!jsSdkVersion) {
+    return '';
+  }
+  // 移除版本前缀符号 (^, ~, >=, 等)
+  return jsSdkVersion.replace(/^[\^~>=<]+/, '');
+};
+
+/**
+ * 比较两个版本号，version1 是否大于等于 version2
+ * @param {*} version1
+ * @param {*} version2
+ * @returns boolean
+ */
+export const compareVersions = (version1: string, version2: string) => {
+  const getDateVersion = (version: string) => {
+    const match = version.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
+    return match ? match[1] : version;
+  };
+
+  const dateVersion1 = getDateVersion(version1);
+  const dateVersion2 = getDateVersion(version2);
+
+  // 如果基础版本相同，但完整版本不同（意味着有额外部分），返回false
+  if (dateVersion1 === dateVersion2 && version1 !== version2) {
+    return false;
+  }
+
+  // 其他情况正常比较
+  return semver.gte(dateVersion1, dateVersion2);
+};
+
+/**
+ * 是否支持用户的 follow 关系
+ * 通过 server 的版本和 ux 的版本共同决定
+ */
+export const isSupportFollow = () => {
+  const serverVersion = getServerVersion();
+  const uxVersion = getUxPackageVersion();
+  const jsSdkVersion = getJsSdkVersion();
+
+  if (!serverVersion || !uxVersion || !jsSdkVersion) {
+    return false;
+  }
+  // UX 包支持
+  const uxVersionSupport = compareVersions(uxVersion, '3.1.29');
+  // 服务端接口实现支持
+  const serverVersionSupport = compareVersions(serverVersion, '1.16.49-beta-20250822-070545-6d3344cc');
+  // SDK 接口实现支持
+  const jsSdkVersionSupport = compareVersions(jsSdkVersion, '1.16.49-beta-20250822-070545-6d3344cc');
+  return uxVersionSupport && serverVersionSupport && jsSdkVersionSupport;
+};

package/lib/UserCard/Cards/name-only.d.ts

@@ -1,5 +0,0 @@
-import { UserCardProps, User } from '../types';
-declare function NameOnlyCard(props: Omit<UserCardProps, 'user'> & {
-    user: User;
-}): import("react/jsx-runtime").JSX.Element;
-export default NameOnlyCard;

package/lib/UserCard/Cards/name-only.js

@@ -1,13 +0,0 @@
-import { jsxs as o, Fragment as i, jsx as n } from "react/jsx-runtime";
-import { Typography as m } from "@mui/material";
-import { renderAvatar as d } from "../components.js";
-function c(a) {
-  const { user: r, avatarSize: t = 48, onAvatarClick: e } = a;
-  return /* @__PURE__ */ o(i, { children: [
-    d(r, t, a.avatarProps, e),
-    /* @__PURE__ */ n(m, { variant: "body1", children: r.fullName || r.email || r.did })
-  ] });
-}
-export {
-  c as default
-};

package/src/UserCard/Cards/name-only.tsx

@@ -1,17 +0,0 @@
-import { Typography } from '@mui/material';
-import { UserCardProps, User } from '../types';
-import { renderAvatar } from '../components';
-
-// 详细卡片模式下的NameOnly渲染组件
-function NameOnlyCard(props: Omit<UserCardProps, 'user'> & { user: User }) {
-  const { user, avatarSize = 48, onAvatarClick } = props;
-
-  return (
-    <>
-      {renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick)}
-      <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
-    </>
-  );
-}
-
-export default NameOnlyCard;