@blocklet/ui-react 3.4.6 → 3.4.8

package/src/common/header-addons.jsx

@@ -11,29 +11,17 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import SessionBlocklet from '@arcblock/ux/lib/SessionBlocklet';
 import SessionUser from '@arcblock/ux/lib/SessionUser';
 import { Fragment } from 'react/jsx-runtime';
-import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
 
 import { filterNavByRole, getLocalizedNavigation } from '../blocklets';
 import { SessionManagerProps } from '../types';
 import DomainWarning from './domain-warning';
 import NotificationAddon from './notification-addon';
-import OrgsSwitch from './org-switch';
 
 const hasNotification = () => {
   const navigations = window?.blocklet?.navigation ?? [];
   return !!navigations.find((n) => n.id === '/userCenter/notification');
 };
 
-const isOrgsEnabled = (blocklet) => {
-  const { settings = {} } = blocklet ?? window?.blocklet ?? {};
-  return settings?.org?.enabled || false;
-};
-
-const inDashboard = () => {
-  const { pathname = '' } = window.location || {};
-  return pathname.startsWith(WELLKNOWN_BLOCKLET_ADMIN_PATH);
-};
-
 // eslint-disable-next-line no-shadow
 export default function HeaderAddons({
   formattedBlocklet,
@@ -103,11 +91,6 @@ export default function HeaderAddons({
       );
     }
 
-    // 在最前面添加 orgs switch, 在 Dashboard 中不显示
-    if (!inDashboard() && isOrgsEnabled(formattedBlocklet) && sessionCtx?.session?.user) {
-      addonsArray.unshift(<OrgsSwitch key="orgs-switch" session={sessionCtx.session} locale={locale} />);
-    }
-
     if (typeof addons === 'function') {
       addonsArray = addons(addonsArray) || [];
     }

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

@@ -0,0 +1,271 @@
+/**
+ * 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,10 +1,17 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { useState } from 'react';
+/**
+ * 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 } from '@mui/material';
+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';
@@ -12,11 +19,31 @@ 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';
 
-export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, locale = 'en' }) {
+// 操作模式
+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 } = useOrg();
+  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);
   });
@@ -24,32 +51,82 @@ export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, loc
   const form = useReactive({
     name: '',
     description: '',
+    avatar: '',
   });
 
-  const onSubmit = async () => {
+  // 编辑模式下初始化表单数据
+  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;
+      return false;
     }
 
     if (_name.length > 25) {
       setError(t('nameTooLong', { length: 25 }));
-      return;
+      return false;
     }
 
     const _description = form.description.trim();
-
     if (_description.length > 255) {
-      setError(t('descriptionTooLong', { length: 25 }));
+      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 {
-      await createOrg({ name: _name, description: _description });
+      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);
@@ -61,50 +138,15 @@ export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, loc
     }
   };
 
-  const body = (
-    <div>
-      <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}
-        />
-      </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>
-    </div>
-  );
+  // 对话框标题
+  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={t('mutate.title', { mode: t('create') })}
+      title={dialogTitle}
       fullWidth
       open
       onClose={onCancel}
@@ -121,12 +163,75 @@ export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, loc
             disabled={loading}
             variant="contained"
             autoFocus>
-            {loading && <CircularProgress size={16} />}
-            {t('create')}
+            {loading && <CircularProgress size={16} sx={{ mr: 1 }} />}
+            {submitButtonText}
           </Button>
         </>
       }>
-      <DialogContentText component="div">{body}</DialogContentText>
+      <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}
@@ -136,8 +241,27 @@ export default function CreateOrgDialog({ onSuccess = noop, onCancel = noop, loc
   );
 }
 
-CreateOrgDialog.propTypes = {
+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 };

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

@@ -23,7 +23,7 @@ import { KeyboardArrowDown, Search, Add, OpenInNew } from '@mui/icons-material';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 
 import useOrg from './use-org';
-import CreateOrgDialog from './create';
+import { CreateOrgDialog } from './create';
 import translations from './locales';
 
 const PAGE_SIZE = 20;

package/src/common/org-switch/locales.js

@@ -9,12 +9,18 @@ const translations = {
     nameEmpty: 'Name cannot be empty',
     nameTooLong: 'Name must be less than {length} characters',
     descriptionTooLong: 'Description must be less than {length} characters',
+    avatarEmpty: 'Avatar cannot be empty',
     cancel: 'Cancel',
     create: 'Create',
+    upload: 'Upload',
+    avatar: 'Avatar',
     mutate: {
       title: '{mode} Organization',
       name: 'Name',
       description: 'Description',
+      avatarRequired: 'Avatar is required',
+      uploadAvatarTitle: 'Upload Avatar',
+      uploadAvatarTip: 'Click to upload an avatar for your organization',
     },
   },
   zh: {
@@ -27,12 +33,18 @@ const translations = {
     nameEmpty: '名称不能为空',
     nameTooLong: '名称不能超过{length}个字符',
     descriptionTooLong: '描述不能超过{length}个字符',
+    avatarEmpty: '头像不能为空',
+    upload: '上传',
     cancel: '取消',
     create: '创建',
+    avatar: '头像',
     mutate: {
       title: '{mode}组织',
       name: '组织名称',
       description: '组织描述',
+      avatarRequired: '头像为必填项',
+      uploadAvatarTitle: '上传头像',
+      uploadAvatarTip: '点击上传组织头像',
     },
   },
 };

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

@@ -23,9 +23,20 @@ export default function useOrg(session) {
     }
   });
 
-  const createOrg = useMemoizedFn(async ({ name, description }) => {
+  const createOrg = useMemoizedFn(async ({ name, description, avatar }) => {
     try {
-      const response = await client.user.createOrg({ name, description });
+      const response = await client.user.createOrg({ name, description, avatar });
+      return response.data;
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatAxiosError(error));
+      return null;
+    }
+  });
+
+  const updateOrg = useMemoizedFn(async (orgId, { name, description, avatar }) => {
+    try {
+      const response = await client.user.updateOrg(orgId, { name, description, avatar });
       return response.data;
     } catch (error) {
       console.error(error);
@@ -62,6 +73,7 @@ export default function useOrg(session) {
   return {
     getOrgs,
     createOrg,
+    updateOrg,
     getCurrentOrg,
   };
 }