@blocklet/ui-react 3.4.15 → 3.5.0

package/src/common/notification-addon.jsx

@@ -1,135 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useMemo } from 'react';
-import { IconButton, Badge } from '@mui/material';
-import { useSnackbar } from 'notistack';
-import NotificationsOutlinedIcon from '@arcblock/icons/lib/Notification';
-import { useCreation } from 'ahooks';
-import { EVENTS, WELLKNOWN_SERVICE_PATH_PREFIX, ROLES } from '@abtnode/constant';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { compareVersions } from '@arcblock/ux/lib/Util';
-import { joinURL, withQuery } from 'ufo';
-import { useListenWsClient } from './ws';
-import NotificationSnackbar from '../Notifications/Snackbar';
-
-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 isAdmin = useCreation(() => user?.role && [ROLES.ADMIN, ROLES.OWNER].includes(user?.role), [user?.role]);
-
-  const { enqueueSnackbar } = useSnackbar();
-  const browser = useBrowser();
-
-  const isPreviewUser = useMemo(() => {
-    return !userDid || user?.isPreviewUser || userDid === window.blocklet.did;
-  }, [userDid, user]);
-
-  // 在 ArcSphere 和 Wallet 端隐藏， 消息的 toast 提示，因为有 native 的通知
-  const hiddenNotificationToast = useMemo(() => {
-    return browser.arcSphere || browser.wallet;
-  }, [browser]);
-
-  const serverVersion = useCreation(() => {
-    return window.blocklet?.serverVersion;
-  }, []);
-
-  const wsClient = useListenWsClient('user');
-
-  const listenEvent = useCreation(
-    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
-    [userDid]
-  );
-  const readListenEvent = useCreation(
-    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_READ}`,
-    [userDid]
-  );
-
-  const listenCallback = useCallback(
-    (notification) => {
-      const { receivers, source } = notification ?? {};
-
-      const { receiver: notificationReceiver } = receivers[0] ?? {};
-      const shouldUpdate = isAdmin || source !== 'system';
-      if (notificationReceiver === userDid && shouldUpdate) {
-        setUnReadCount((x) => x + 1);
-        // 显示通知, 如果是系统通知则不需要显示, 如果是移动端不需要显示
-        // 兼容代码，如果 server 没有升级那么不需要提示
-        const isCompatible = compareVersions(serverVersion, '1.16.42-beta-20250407');
-        if (!hiddenNotificationToast && 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,
-            anchorOrigin: {
-              vertical: 'top',
-              horizontal: 'center',
-            },
-            // eslint-disable-next-line react/no-unstable-nested-components
-            content: (key) => <NotificationSnackbar viewAllUrl={link} keyId={key} notification={notification} />,
-          });
-        }
-      }
-    },
-    [userDid, setUnReadCount, enqueueSnackbar, serverVersion, hiddenNotificationToast, isAdmin]
-  );
-
-  const readListenCallback = useCallback(
-    (data) => {
-      const { receiver, readCount } = data ?? {};
-
-      if (receiver === userDid) {
-        setUnReadCount((x) => Math.max(x - readCount, 0));
-      }
-    },
-    [userDid, setUnReadCount]
-  );
-
-  useEffect(() => {
-    if (wsClient && !isPreviewUser) {
-      wsClient.on(listenEvent, listenCallback);
-      wsClient.on(readListenEvent, readListenCallback);
-    }
-    return () => {
-      if (wsClient && !isPreviewUser) {
-        wsClient.off(listenEvent, listenCallback);
-        wsClient.off(readListenEvent, readListenCallback);
-      }
-    };
-  }, [wsClient, setUnReadCount, listenCallback, listenEvent, readListenCallback, readListenEvent, isPreviewUser]);
-
-  if (!session.user || !viewAllUrl) {
-    return null;
-  }
-
-  return (
-    <IconButton
-      size="medium"
-      variant="outlined"
-      href={withQuery(viewAllUrl, { read: unReadCount <= 0 })}
-      sx={{
-        '&:hover': {
-          borderRadius: '50%',
-        },
-      }}>
-      <Badge badgeContent={unReadCount} color="error" invisible={unReadCount === 0}>
-        <NotificationsOutlinedIcon style={{ width: 'auto', height: 24 }} />
-      </Badge>
-    </IconButton>
-  );
-}
-
-NotificationAddon.propTypes = {
-  session: PropTypes.object,
-};

package/src/common/org-switch/avatar-uploader.jsx

@@ -1,271 +0,0 @@
-/**
- * AvatarUploader - 组织头像上传组件
- *
- * 用于创建和编辑组织时上传头像
- * 支持图片裁剪、旋转等编辑功能
- * 上传成功后返回文件路径供表单使用
- */
-import { lazy, Suspense, useRef, useMemo, useState } from 'react';
-import noop from 'lodash/noop';
-import PropTypes from 'prop-types';
-import { Box, CircularProgress } from '@mui/material';
-import { styled } from '@arcblock/ux/lib/Theme';
-import { joinURL } from 'ufo';
-import { useMemoizedFn } from 'ahooks';
-import CameraAltIcon from '@mui/icons-material/CameraAlt';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import Img from '@arcblock/ux/lib/Img';
-
-import translations from './locales';
-
-// eslint-disable-next-line import/no-unresolved
-const Uploader = lazy(() => import('@blocklet/uploader').then((res) => ({ default: res.Uploader })));
-
-// 配置常量
-const UPLOAD_PREFIX = '/blocklet';
-const ALLOWED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.ico'];
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const MIN_CROP_SIZE = 256;
-const ICON_SIZE_RATIO = 3;
-
-/**
- * 构建组织头像显示 URL
- * @param {string} prefix - URL 前缀
- * @param {string} teamDid - 团队 DID
- * @param {string} orgId - 组织 ID
- * @param {string} avatar - 头像文件名
- * @returns {string} 完整的 URL 路径
- */
-function buildAvatarDisplayUrl(prefix, teamDid, avatar) {
-  return joinURL(prefix, UPLOAD_PREFIX, teamDid, 'orgs', 'avatar', avatar);
-}
-
-/**
- * 构建头像上传 API URL（不需要 orgId）
- * @param {string} prefix - URL 前缀
- * @param {string} teamDid - 团队 DID
- * @returns {string} 上传 API URL
- */
-function buildAvatarUploadUrl(prefix, teamDid) {
-  return joinURL(prefix, UPLOAD_PREFIX, teamDid, 'orgs', 'avatar', 'upload');
-}
-
-export default function AvatarUploader({
-  org = null,
-  size = 80,
-  teamDid: teamDidProp = '',
-  prefix = '/.well-known/service',
-  locale = 'en',
-  headers = noop,
-  onChange = noop,
-  onError = noop,
-  editable = true,
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const uploaderRef = useRef(null);
-  const [uploading, setUploading] = useState(false);
-  // 本地预览的头像路径（用于新上传的图片）
-  const [localAvatar, setLocalAvatar] = useState('');
-
-  // 获取 teamDid：优先使用 prop，否则从 window.blocklet.did 获取
-  const teamDid = useMemo(() => {
-    if (teamDidProp) return teamDidProp;
-    // eslint-disable-next-line no-undef
-    return typeof window !== 'undefined' ? window.blocklet?.did : '';
-  }, [teamDidProp]);
-
-  // 构建上传 API URL（不需要 orgId）
-  const uploadApiUrl = useMemo(() => {
-    if (!teamDid) return null;
-    return buildAvatarUploadUrl(prefix, teamDid);
-  }, [prefix, teamDid]);
-
-  // 是否可以上传（需要有 teamDid 且 editable 为 true）
-  const canUpload = editable && !!uploadApiUrl;
-
-  // 打开上传弹窗
-  const handleOpen = useMemoizedFn(() => {
-    if (canUpload && !uploading) {
-      uploaderRef.current?.open();
-    }
-  });
-
-  // 上传完成处理 - 返回文件路径
-  const handleFinish = useMemoizedFn((result) => {
-    uploaderRef.current?.close();
-    setUploading(false);
-    const { avatarPath } = result.data;
-    setLocalAvatar(result.uploadURL);
-    onChange(avatarPath);
-  });
-
-  // 上传开始处理
-  const handleUploadStart = useMemoizedFn(() => {
-    setUploading(true);
-  });
-
-  // 错误处理
-  const handleError = useMemoizedFn((error) => {
-    setUploading(false);
-    console.error('Avatar upload failed:', error);
-    onError(error);
-  });
-
-  // 构建头像显示 URL
-  const avatarUrl = useMemo(() => {
-    // 优先使用本地上传的头像
-    if (localAvatar) {
-      return localAvatar;
-    }
-    const avatar = org?.avatar;
-    if (!avatar) return null;
-    if (org?.id) {
-      return buildAvatarDisplayUrl(prefix, teamDid, avatar);
-    }
-    if (avatar.startsWith('http://') || avatar.startsWith('https://') || avatar.startsWith('/')) {
-      return avatar;
-    }
-    return joinURL(prefix, avatar);
-  }, [localAvatar, org?.avatar, org?.id, prefix, teamDid]);
-
-  // 获取显示名称
-  const displayName = org?.name || '';
-
-  return (
-    <Root $size={size} $editable={editable} $uploading={uploading} onClick={handleOpen}>
-      {uploadApiUrl && (
-        <Suspense fallback={null}>
-          <Uploader
-            ref={uploaderRef}
-            locale={locale}
-            popup
-            onUploadFinish={handleFinish}
-            onUploadStart={handleUploadStart}
-            onError={handleError}
-            plugins={['ImageEditor']}
-            installerProps={{ disabled: true }}
-            apiPathProps={{
-              uploader: uploadApiUrl,
-              disableMediaKitPrefix: true,
-              disableMediaKitStatus: true,
-            }}
-            coreProps={{
-              restrictions: {
-                allowedFileExts: ALLOWED_FILE_EXTENSIONS,
-                maxFileSize: MAX_FILE_SIZE,
-                maxNumberOfFiles: 1,
-              },
-            }}
-            dashboardProps={{
-              autoOpen: 'imageEditor',
-            }}
-            imageEditorProps={{
-              actions: {
-                revert: true,
-                rotate: true,
-                granularRotate: true,
-                flip: true,
-                zoomIn: true,
-                zoomOut: true,
-                cropSquare: false,
-                cropWidescreen: false,
-                cropWidescreenVertical: false,
-              },
-              cropperOptions: {
-                autoCrop: true,
-                autoCropArea: 1,
-                aspectRatio: 1,
-                initialAspectRatio: 1,
-                croppedCanvasOptions: {
-                  minWidth: MIN_CROP_SIZE,
-                  minHeight: MIN_CROP_SIZE,
-                },
-              },
-            }}
-            tusProps={{
-              headers,
-            }}
-          />
-        </Suspense>
-      )}
-      {/* 使用 Img 组件显示头像，自动处理加载错误和占位图片 */}
-      <Img
-        key={avatarUrl || 'no-avatar'}
-        src={avatarUrl || ''}
-        alt={displayName}
-        width={size}
-        height={size}
-        ratio={1}
-        size="cover"
-        position="center"
-        lazy={false}
-        style={{
-          borderRadius: '50%',
-          overflow: 'hidden',
-        }}
-      />
-      {editable && (
-        <Box className="upload-overlay">
-          {uploading ? (
-            <CircularProgress size={size / ICON_SIZE_RATIO} sx={{ color: 'white' }} />
-          ) : (
-            <>
-              <CameraAltIcon sx={{ fontSize: size / ICON_SIZE_RATIO, color: 'white' }} />
-              <Box component="span" sx={{ fontSize: 12, color: 'white' }}>
-                {t('upload')}
-              </Box>
-            </>
-          )}
-        </Box>
-      )}
-    </Root>
-  );
-}
-
-AvatarUploader.propTypes = {
-  org: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    avatar: PropTypes.string,
-  }),
-  size: PropTypes.number,
-  teamDid: PropTypes.string,
-  prefix: PropTypes.string,
-  headers: PropTypes.func,
-  onChange: PropTypes.func,
-  onError: PropTypes.func,
-  editable: PropTypes.bool,
-  locale: PropTypes.string,
-};
-
-const Root = styled(Box, {
-  shouldForwardProp: (prop) => !['$size', '$editable', '$uploading'].includes(prop),
-})(({ $size, $editable, $uploading }) => ({
-  position: 'relative',
-  width: $size,
-  height: $size,
-  borderRadius: '50%',
-  overflow: 'hidden',
-  cursor: $editable && !$uploading ? 'pointer' : 'default',
-
-  '.upload-overlay': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    opacity: $uploading ? 1 : 0,
-    transition: 'opacity 0.2s ease-in-out',
-  },
-
-  '&:hover .upload-overlay': {
-    opacity: $editable ? 1 : 0,
-  },
-}));

package/src/common/org-switch/create.jsx

@@ -1,267 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/**
- * OrgMutateDialog - 组织创建/编辑弹窗
- *
- * 支持两种模式：
- * - 创建模式：新建组织，头像必填
- * - 编辑模式：编辑已有组织信息
- */
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useReactive, useMemoizedFn } from 'ahooks';
-import noop from 'lodash/noop';
-import Dialog from '@arcblock/ux/lib/Dialog';
-import { CircularProgress, DialogContentText, Typography, TextField, Alert, Box } from '@mui/material';
-import Toast from '@arcblock/ux/lib/Toast';
-import Button from '@arcblock/ux/lib/Button';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-
-import { formatAxiosError } from '../../UserCenter/libs/utils';
-import useOrg from './use-org';
-import translations from './locales';
-import AvatarUploader from './avatar-uploader';
-
-// 操作模式
-const MODE_CREATE = 'create';
-const MODE_EDIT = 'edit';
-
-export default function OrgMutateDialog({
-  mode = MODE_CREATE,
-  org = null,
-  onSuccess = noop,
-  onCancel = noop,
-  locale = 'en',
-  teamDid: teamDidProp = '',
-  prefix = '/.well-known/service',
-  headers = noop,
-}) {
-  const isEditMode = mode === MODE_EDIT;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const { createOrg, updateOrg } = useOrg();
-
-  // 获取 teamDid：优先使用 prop，否则从 window.blocklet.did 获取
-  // eslint-disable-next-line no-undef
-  const teamDid = teamDidProp || (typeof window !== 'undefined' ? window.blocklet?.did : '');
-
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const form = useReactive({
-    name: '',
-    description: '',
-    avatar: '',
-  });
-
-  // 编辑模式下初始化表单数据
-  useEffect(() => {
-    if (isEditMode && org) {
-      form.name = org.name || '';
-      form.description = org.description || '';
-      form.avatar = org.avatar || '';
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode, org]);
-
-  // 头像变化处理
-  const handleAvatarChange = useMemoizedFn((avatarPath) => {
-    setError('');
-    form.avatar = avatarPath;
-  });
-
-  // 表单验证
-  const validateForm = useMemoizedFn(() => {
-    const _name = form.name.trim();
-    if (!_name) {
-      setError(t('nameEmpty'));
-      return false;
-    }
-
-    if (_name.length > 25) {
-      setError(t('nameTooLong', { length: 25 }));
-      return false;
-    }
-
-    const _description = form.description.trim();
-    if (_description.length > 255) {
-      setError(t('descriptionTooLong', { length: 255 }));
-      return false;
-    }
-
-    // 头像必填验证
-    if (!form.avatar) {
-      setError(t('avatarEmpty'));
-      return false;
-    }
-
-    return true;
-  });
-
-  // 提交处理
-  const onSubmit = async () => {
-    if (!validateForm()) {
-      return;
-    }
-
-    setError('');
-    setLoading(true);
-
-    const _name = form.name.trim();
-    const _description = form.description.trim();
-    const _avatar = form.avatar;
-
-    try {
-      if (isEditMode && org?.id) {
-        // 编辑模式：更新组织
-        await updateOrg(org.id, {
-          name: _name,
-          description: _description,
-          avatar: _avatar,
-        });
-      } else {
-        // 创建模式：新建组织
-        await createOrg({
-          name: _name,
-          description: _description,
-          avatar: _avatar,
-        });
-      }
-      onSuccess();
-    } catch (err) {
-      console.error(err);
-      const errMsg = formatAxiosError(err);
-      setError(errMsg);
-      Toast.error(errMsg);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 对话框标题
-  const dialogTitle = isEditMode ? t('mutate.title', { mode: t('edit') }) : t('mutate.title', { mode: t('create') });
-
-  // 提交按钮文本
-  const submitButtonText = isEditMode ? t('save') : t('create');
-
-  return (
-    <Dialog
-      title={dialogTitle}
-      fullWidth
-      open
-      onClose={onCancel}
-      showCloseButton={false}
-      actions={
-        <>
-          <Button onClick={onCancel} color="inherit">
-            {t('cancel')}
-          </Button>
-          <Button
-            data-cy="mutate-org-confirm"
-            onClick={onSubmit}
-            color="primary"
-            disabled={loading}
-            variant="contained"
-            autoFocus>
-            {loading && <CircularProgress size={16} sx={{ mr: 1 }} />}
-            {submitButtonText}
-          </Button>
-        </>
-      }>
-      <DialogContentText component="div">
-        {/* 头像上传区域 */}
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            py: 2,
-          }}>
-          <AvatarUploader
-            org={isEditMode ? org : { name: form.name }}
-            size={90}
-            teamDid={teamDid}
-            prefix={prefix}
-            headers={headers}
-            onChange={handleAvatarChange}
-            value={form.avatar}
-            editable
-          />
-          <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
-            {t('avatar')}
-          </Typography>
-        </Box>
-
-        {/* 表单字段 */}
-        <Typography component="div" style={{ marginTop: 16 }}>
-          <TextField
-            label={t('mutate.name')}
-            autoComplete="off"
-            variant="outlined"
-            name="name"
-            data-cy="mutate-org-input-name"
-            fullWidth
-            autoFocus
-            value={form.name}
-            onChange={(e) => {
-              setError('');
-              form.name = e.target.value;
-            }}
-            disabled={loading}
-            required
-          />
-        </Typography>
-
-        <Typography component="div" style={{ marginTop: 16, marginBottom: 16 }}>
-          <TextField
-            label={t('mutate.description')}
-            autoComplete="off"
-            variant="outlined"
-            name="description"
-            data-cy="mutate-org-input-description"
-            fullWidth
-            value={form.description}
-            onChange={(e) => {
-              setError('');
-              form.description = e.target.value;
-            }}
-            disabled={loading}
-            multiline
-            rows={3}
-          />
-        </Typography>
-      </DialogContentText>
-
-      {!!error && (
-        <Alert severity="error" style={{ width: '100%', margin: 0 }}>
-          {error}
-        </Alert>
-      )}
-    </Dialog>
-  );
-}
-
-OrgMutateDialog.propTypes = {
-  /** 操作模式：'create' 创建 | 'edit' 编辑 */
-  mode: PropTypes.oneOf([MODE_CREATE, MODE_EDIT]),
-  /** 编辑模式下的组织数据 */
-  org: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-    avatar: PropTypes.string,
-  }),
-  onSuccess: PropTypes.func,
-  onCancel: PropTypes.func,
-  locale: PropTypes.string,
-  teamDid: PropTypes.string,
-  prefix: PropTypes.string,
-  headers: PropTypes.func,
-};
-
-// 导出模式常量供外部使用
-OrgMutateDialog.MODE_CREATE = MODE_CREATE;
-OrgMutateDialog.MODE_EDIT = MODE_EDIT;
-
-// 保持向后兼容的别名
-export { OrgMutateDialog as CreateOrgDialog };