@blocklet/ui-react 2.12.61 → 2.12.63

package/src/Notifications/utils.ts

@@ -0,0 +1,245 @@
+import isEmpty from 'lodash/isEmpty';
+import DOMPurify from 'dompurify';
+import { Link, toTextList, getLink as getLinkUtil } from '@abtnode/util/lib/notification-preview/highlight';
+import { isSameAddr } from '@abtnode/util/lib/notification-preview/func';
+import { client } from '../libs/client';
+
+/**
+ * 通知对象的活动目标接口
+ */
+interface ActivityTarget {
+  type?: string;
+  id?: string;
+}
+
+/**
+ * 通知对象的活动元数据接口
+ */
+interface ActivityMeta {
+  id?: string;
+}
+
+/**
+ * 活动对象接口
+ */
+interface Activity {
+  type?: string;
+  actor?: string;
+  target?: ActivityTarget;
+  meta?: ActivityMeta;
+}
+
+/**
+ * 通知对象接口
+ */
+interface Notification {
+  activity?: Activity;
+  actorInfo?: any;
+  severity?: string;
+  title?: string;
+  description?: string;
+  items?: Notification[];
+}
+
+/**
+ * 合并相邻的通知数据
+ * 合并条件:
+ * 1. 数据必须是相邻的
+ * 2. activity.type 必须相同且不为 null 或 undefined
+ * 3. 如果存在target对象，activity.target.type和activity.target.id都必须相同
+ * 4. 如果相邻数据的 activity.type 相同但没有 activity.target 对象，则需要合并
+ *
+ * @param {Notification[]} notifications - 需要处理的通知数据
+ * @returns {Notification[]} - 合并后的通知数组
+ */
+export const mergeAdjacentNotifications = (notifications: Notification[]): Notification[] => {
+  if (!notifications || !notifications.length) {
+    return [];
+  }
+
+  const result: Notification[] = [];
+  let currentGroup: Notification | null = null;
+  let groupItems: Notification[] = [];
+
+  notifications.forEach((notification: Notification) => {
+    // 如果没有activity或activity.type为null/undefined或者这是第一条记录
+    if (!notification.activity || !notification.activity.type || !currentGroup) {
+      // 处理前一个分组（如果存在）
+      if (currentGroup) {
+        // 如果只有一个通知，直接添加原通知
+        if (groupItems.length === 1) {
+          result.push(groupItems[0]);
+        } else {
+          // 将items添加到第一个通知对象，并将其添加到结果中
+          currentGroup.items = groupItems;
+          result.push(currentGroup);
+        }
+      }
+
+      // 处理当前通知
+      if (notification.activity && notification.activity.type) {
+        // 将第一个通知对象作为组的基础，不创建新对象
+        currentGroup = notification;
+        groupItems = [notification];
+      } else {
+        // 无activity或activity.type的记录直接添加到结果中
+        result.push(notification);
+        // 重置当前组
+        currentGroup = null;
+        groupItems = [];
+      }
+      return;
+    }
+
+    // 获取当前组和当前通知的activity信息
+    const currentActivity = groupItems[0].activity;
+    const currentType = currentActivity?.type;
+    const currentTargetType = currentActivity?.target?.type;
+    const currentTargetId = currentActivity?.target?.id;
+
+    const newType = notification.activity.type;
+    const newTargetType = notification.activity.target?.type;
+    const newTargetId = notification.activity.target?.id;
+
+    // 判断是否需要合并
+    const shouldMerge =
+      // activity.type 必须相同且不为null或undefined
+      currentType &&
+      newType &&
+      currentType === newType &&
+      // 如果都没有target，可以合并
+      ((!currentActivity?.target && !notification.activity.target) ||
+        // 如果都有target，则target.type和target.id都必须相同
+        (currentActivity?.target &&
+          notification.activity.target &&
+          currentTargetType === newTargetType &&
+          currentTargetId === newTargetId));
+
+    if (shouldMerge) {
+      // 合并到当前组
+      groupItems.push(notification);
+    } else {
+      // 不满足合并条件，处理当前组
+      // 如果只有一个通知，直接添加原通知
+      if (groupItems.length === 1) {
+        result.push(groupItems[0]);
+      } else {
+        // 将items添加到第一个通知对象，并将其添加到结果中
+        // 使用Object.assign创建浅拷贝，避免修改原对象
+        const groupToAdd = Object.assign({}, currentGroup, { items: groupItems });
+        result.push(groupToAdd);
+      }
+
+      // 开始新的分组
+      currentGroup = notification;
+      groupItems = [notification];
+    }
+  });
+
+  // 处理最后一个分组（如果有）
+  if (currentGroup) {
+    // 如果只有一个通知，直接添加原通知
+    if (groupItems.length === 1) {
+      result.push(groupItems[0]);
+    } else {
+      // 将items添加到第一个通知对象，并将其添加到结果中
+      // 使用Object.assign创建浅拷贝，避免修改原对象
+      const groupToAdd = Object.assign({}, currentGroup, { items: groupItems });
+      result.push(groupToAdd);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * 判断通知是否包含activity
+ * @param {Notification} notification - 通知对象
+ * @returns {boolean} - 是否包含activity
+ */
+export const isIncludeActivity = (notification: Notification): boolean => {
+  return !isEmpty(notification.activity) && !!notification.activity?.type && !!notification.activity?.actor;
+};
+
+/**
+ * 是否可以自动已读
+ */
+export const canAutoRead = (notification: Notification | null | undefined): boolean => {
+  const { severity } = notification || {};
+  return !!severity && ['normal', 'success', 'info'].includes(severity);
+};
+
+/**
+ * 获取 activity 的链接
+ * 链接的来源有两种
+ * 1. activity.meta.id
+ * 2. activity.target.id
+ * @param {Activity} activity - 活动对象
+ * @returns {Object | null} - 活动的链接
+ */
+export const getActivityLink = (
+  activity: Activity | null | undefined
+): { metaLink?: string | null; targetLink?: string | null } | null => {
+  if (!activity) {
+    return null;
+  }
+  const { meta, target } = activity;
+  return {
+    metaLink: meta?.id,
+    targetLink: target?.id,
+  };
+};
+
+const getUserProfileUrl = async (did: string, locale: string) => {
+  try {
+    const profileUrl = await client.user.getProfileUrl({ did, locale });
+    return profileUrl;
+  } catch (error) {
+    console.error(error);
+    return undefined;
+  }
+};
+
+const getLink = async (item: any, locale: string) => {
+  const { type, did } = item;
+  if (isSameAddr(type, 'did')) {
+    const profileUrl = await getUserProfileUrl(did, locale);
+    return profileUrl || getLinkUtil(item);
+  }
+  return getLinkUtil(item);
+};
+
+export const toClickableSpan = async (str: string, locale: string, isHighLight = true) => {
+  const textList = toTextList(str);
+  const result = await Promise.all(
+    textList.map(async (item: any) => {
+      if (item instanceof Link) {
+        if (isHighLight) {
+          const url = await getLink(item, locale);
+          const { type, chainId, did } = item;
+
+          // HACK: 邮件中无法支持 dapp 的展示，缺少 dapp 链接，只能作为加粗展示
+          if (isSameAddr(type, 'dapp')) {
+            return `<em class="dapp" data-type="${type}" data-chain-id="${chainId}" data-did="${did}">${item.text}</em>`;
+          }
+          if (url) {
+            return `<a target="_blank" rel="noopener noreferrer" class="link" href="${url}">${item.text}</a>`;
+          }
+
+          // 默认展示为加粗
+          return `<em class="common" data-type="${type}" data-chain-id="${chainId}" data-did="${did}">${item.text}</em>`;
+        }
+        return item.text;
+      }
+
+      return item;
+    })
+  ).then((results) => results.join(''));
+  return result;
+};
+
+export const sanitize = (innerHtml: string) => {
+  return DOMPurify.sanitize(innerHtml, {
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'id', 'style'],
+  });
+};

package/src/UserCenter/components/danger-zone.tsx

@@ -0,0 +1,136 @@
+import { useContext } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { LOGIN_PROVIDER } from '@blocklet/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+
+import { translations } from '../libs/locales';
+import { client } from '../../libs/client';
+import type { SessionContext as TSessionContext } from '../../@types';
+
+export default function DangerZone() {
+  const { confirmApi, confirmHolder } = useConfirm();
+
+  const { locale } = useLocaleContext();
+  const { session, connectApi } = useContext<TSessionContext>(SessionContext);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const isNeedVerify = useCreation(() => {
+    if (['true', true].includes(window?.blocklet?.ALLOW_SKIP_DESTROY_MYSELF_VERIFY)) {
+      return false;
+    }
+    const connectedAccounts = session?.user?.connectedAccounts || [];
+    const ALLOW_VERIFY_PROVIDERS = [LOGIN_PROVIDER.WALLET];
+    if (connectedAccounts.some((x) => ALLOW_VERIFY_PROVIDERS.includes(x.provider))) {
+      return true;
+    }
+
+    return false;
+  }, [session?.user]);
+
+  const handleVerify = useMemoizedFn(() => {
+    return new Promise<{ did: string }>((resolve, reject) => {
+      const userDid = session?.user?.did;
+      connectApi.open({
+        locale,
+        action: 'destroy-myself',
+        forceConnected: true,
+        saveConnect: false,
+        autoConnect: false,
+        // 暂不允许使用 passkey 进行验证
+        passkeyBehavior: 'none',
+        extraParams: {
+          removeUserDid: userDid,
+        },
+        messages: {
+          title: t('destroyMyself.title'),
+          scan: t('destroyMyself.scan'),
+          confirm: t('destroyMyself.confirm'),
+          success: t('destroyMyself.success'),
+        },
+        onSuccess: ({ result }: { result: string }, decrypt = (x: string) => x) => {
+          const decryptResult = decrypt(result) as unknown as { did: string };
+          resolve(decryptResult);
+        },
+        onClose: () => {
+          connectApi.close();
+          reject(new Error(t('destroyMyself.abort')));
+        },
+      });
+    });
+  });
+
+  const handleDeleteAccount = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t('dangerZone.deleteAccount'),
+      content: t('dangerZone.deleteAccountDescription'),
+      confirmButtonText: t('common.confirm'),
+      confirmButtonProps: {
+        color: 'error',
+      },
+      cancelButtonText: t('common.cancel'),
+      async onConfirm(close: () => void) {
+        let result;
+        try {
+          if (isNeedVerify) {
+            result = await handleVerify();
+            // TODO: 等 js-sdk 新版后，就有这个方法，可以删除注释
+            // @ts-ignore
+          } else if (client?.user?.destroyMyself instanceof Function) {
+            // @ts-ignore
+            result = await client.user.destroyMyself();
+          } else {
+            Toast.error(t('notImplemented'));
+            return;
+          }
+          if (result?.did === session?.user?.did) {
+            // TODO: 前端执行退出等清理操作
+            session.logout(close);
+          } else {
+            Toast.error(t('destroyMyself.error'));
+          }
+        } catch (error: any) {
+          const errorMessage = error?.response?.data.error || error?.message || t('destroyMyself.error');
+          Toast.error(errorMessage);
+        }
+      },
+    });
+  });
+
+  return (
+    <>
+      <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            justifyContent: 'space-between',
+          }}>
+          <Box>
+            <Typography
+              variant="h6"
+              sx={{
+                fontSize: '0.875rem !important',
+                fontWeight: 'bold',
+              }}>
+              {t('dangerZone.deleteAccount')}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {t('dangerZone.deleteAccountDescription')}
+            </Typography>
+          </Box>
+          <Button variant="contained" color="error" size="small" onClick={handleDeleteAccount}>
+            {t('dangerZone.delete')}
+          </Button>
+        </Box>
+      </Box>
+      {confirmHolder}
+    </>
+  );
+}

package/src/UserCenter/components/settings.tsx

@@ -4,6 +4,7 @@ import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
 import colors from '@arcblock/ux/lib/Colors/themes/temp';
 import { translations } from '../libs/locales';
@@ -13,6 +14,7 @@ import { User, UserCenterTab } from '../../@types';
 import { UserSessions } from '../../UserSessions';
 import ThirdPartyLogin from './third-party-login';
 import ConfigProfile from './config-profile';
+import DangerZone from './danger-zone';
 
 export default function Settings({
   user,
@@ -68,6 +70,14 @@ export default function Settings({
         value: 'session',
         content: <UserSessions user={user} showUser={false} />,
       },
+      {
+        label: t('dangerZone.title'),
+        value: 'dangerZone',
+        content: <DangerZone />,
+        sx: {
+          borderColor: 'error.main',
+        },
+      },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
 
@@ -97,14 +107,17 @@ export default function Settings({
         <Box
           id={tab.value}
           key={tab.value}
-          sx={{
-            border: `1px solid ${colors.dividerColor}`,
-            borderRadius: 2,
-            p: 2,
-            '&:last-child': {
-              mb: 5,
+          sx={mergeSx(
+            {
+              border: `1px solid ${colors.dividerColor}`,
+              borderRadius: 2,
+              p: 2,
+              '&:last-child': {
+                mb: 5,
+              },
             },
-          }}>
+            tab.sx
+          )}>
           <Typography
             sx={{
               color: colors.foregroundsFgBase,

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -166,7 +166,7 @@ export default function UserBasicInfo({
                       bottom: 0,
                       left: 0,
                       right: 0,
-                      height: '50%',
+                      height: '25%',
                       backgroundColor: 'rgba(0, 0, 0, 0.3)',
                       display: 'flex',
                       justifyContent: 'center',

package/src/UserCenter/libs/locales.ts

@@ -99,6 +99,12 @@ export const translations = {
       title: '通用设置',
       locale: '偏好语言',
     },
+    dangerZone: {
+      title: '危险操作',
+      deleteAccount: '删除账户',
+      deleteAccountDescription: '删除账户后，您将无法使用该账户登录，您的数据将从平台中完全删除，不可恢复。',
+      delete: '删除',
+    },
     userStatus: {
       Online: '在线',
       Meeting: '开会中',
@@ -154,6 +160,16 @@ export const translations = {
         invalidPostalCode: '邮政编码格式不正确',
       },
     },
+    destroyMyself: {
+      title: '删除账户',
+      scan: '删除账户后，您将无法使用该账户登录，您的数据将从平台中完全删除，不可恢复。',
+      confirm: '确认删除',
+      cancel: '取消',
+      success: '删除账户成功',
+      abort: '取消删除账户',
+      error: '删除账户失败',
+    },
+    notImplemented: '操作未实现',
   },
   en: {
     settings: 'Settings',
@@ -255,6 +271,13 @@ export const translations = {
       title: 'Common Settings',
       locale: 'Preferred language',
     },
+    dangerZone: {
+      title: 'Danger Zone',
+      deleteAccount: 'Delete Account',
+      deleteAccountDescription:
+        'Delete account will make you unable to login with this account, your data will be completely deleted from the platform and cannot be recovered.',
+      delete: 'Delete',
+    },
     userStatus: {
       Online: 'Online',
       Meeting: 'In a Meeting',
@@ -311,5 +334,15 @@ export const translations = {
         invalidPostalCode: 'Postal code is invalid',
       },
     },
+    destroyMyself: {
+      title: 'Delete Account',
+      scan: 'Delete account will make you unable to login with this account, your data will be completely deleted from the platform and cannot be recovered.',
+      confirm: 'Confirm delete',
+      cancel: 'Cancel',
+      success: 'Delete account successfully',
+      abort: 'Delete account aborted',
+      error: 'Delete account failed',
+    },
+    notImplemented: 'This action is not implemented',
   },
 };

package/src/common/notification-addon.jsx

@@ -3,22 +3,35 @@ import PropTypes from 'prop-types';
 import { useCallback, useEffect } from 'react';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { IconButton } from '@mui/material';
-
+import { useSnackbar } from 'notistack';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import NotificationsOutlinedIcon from '@arcblock/icons/lib/Notification';
 import { useCreation } from 'ahooks';
-import { EVENTS } from '@abtnode/constant';
+import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { joinURL, withQuery } from 'ufo';
 import { useListenWsClient } from './ws';
+import NotificationSnackbar from '../Notifications/Snackbar';
+import { compareVersions } from '../utils';
+
+const viewAllUrl = joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user', 'notifications');
+
+const getNotificationLink = (notification) => {
+  return withQuery(viewAllUrl, {
+    id: notification.id,
+    severity: notification.severity || 'all',
+    componentDid: notification.source === 'system' ? 'system' : notification.componentDid || 'all',
+  });
+};
 
 export default function NotificationAddon({ session = {} }) {
   const { unReadCount, user, setUnReadCount } = session;
   const userDid = useCreation(() => user?.did, [user]);
 
-  const viewAllUrl = useCreation(() => {
-    const { navigation } = window.blocklet ?? {};
-    const notification = navigation?.find((x) => x.id === '/userCenter/notification');
-    return notification?.link;
-  });
+  const { enqueueSnackbar } = useSnackbar();
+
+  const serverVersion = useCreation(() => {
+    return window.blocklet?.serverVersion;
+  }, []);
 
   const wsClient = useListenWsClient('user');
 
@@ -39,9 +52,23 @@ export default function NotificationAddon({ session = {} }) {
 
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
+        // 显示通知, 如果是系统通知则不需要显示
+        // 兼容代码，如果 server 没有升级那么不需要提示
+        const isCompatible = compareVersions(serverVersion, '1.16.42-beta-20250407');
+        if (notification.source === 'component' && isCompatible) {
+          const link = getNotificationLink(notification);
+          const { severity, description } = notification || {};
+          const disableAutoHide = ['error', 'warning'].includes(severity) || notification.sticky;
+          enqueueSnackbar(description, {
+            variant: severity,
+            autoHideDuration: disableAutoHide ? null : 5000,
+            // eslint-disable-next-line react/no-unstable-nested-components
+            content: (key) => <NotificationSnackbar viewAllUrl={link} keyId={key} notification={notification} />,
+          });
+        }
       }
     },
-    [userDid, setUnReadCount]
+    [userDid, setUnReadCount, enqueueSnackbar, serverVersion]
   );
 
   const readListenCallback = useCallback(
@@ -49,7 +76,7 @@ export default function NotificationAddon({ session = {} }) {
       const { receiver, readCount } = data ?? {};
 
       if (receiver === userDid) {
-        setUnReadCount((x) => (x - readCount <= 0 ? 0 : x - readCount));
+        setUnReadCount((x) => Math.max(x - readCount, 0));
       }
     },
     [userDid, setUnReadCount]

package/src/utils.js

@@ -1,3 +1,5 @@
+import semver from 'semver';
+
 export const mapRecursive = (array, fn, childrenKey = 'children') => {
   return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
@@ -151,3 +153,27 @@ export const splitNavColumns = (items, options = {}) => {
 
   return result;
 };
+
+/**
+ * 比较两个版本号，用于判断版本号是否兼容
+ * @param {*} version1
+ * @param {*} version2
+ * @returns 0: 版本相同, -1: version1 < version2, 1: version1 > version2
+ */
+export const compareVersions = (version1, version2) => {
+  const getDateVersion = (version) => {
+    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);
+};