@blocklet/ui-react 3.4.7 → 3.4.8

package/lib/common/org-switch/index.js

@@ -36,9 +36,9 @@ function ye({ session: a, locale: h = "en" }) {
         console.error("Failed to fetch organizations list", e);
       }
     }
-  ), { list: p = [], total: q = 0 } = K || {}, T = p.length < q, U = k((e) => {
+  ), { list: p = [], total: q = 0 } = K || {}, M = p.length < q, U = k((e) => {
     const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
-    y - c - b < 50 && !z && T && V();
+    y - c - b < 50 && !z && M && V();
   }), x = !!S;
   ee(() => {
     x && O();
@@ -56,7 +56,7 @@ function ye({ session: a, locale: h = "en" }) {
     ), f();
   }, Q = () => {
     u(!0);
-  }, M = () => {
+  }, T = () => {
     const e = le(ce(ne, "user/orgs"), { locale: h });
     window.location.href = e, f();
   }, X = (e) => /* @__PURE__ */ i(
@@ -214,7 +214,7 @@ function ye({ session: a, locale: h = "en" }) {
             const c = o === p.length - 1;
             return /* @__PURE__ */ i(r, { children: [
               X(e),
-              c && T && /* @__PURE__ */ t(
+              c && M && /* @__PURE__ */ t(
                 r,
                 {
                   sx: {
@@ -267,7 +267,7 @@ function ye({ session: a, locale: h = "en" }) {
           /* @__PURE__ */ t(r, { sx: { p: 1.5 }, children: /* @__PURE__ */ t(
             P,
             {
-              onClick: M,
+              onClick: T,
               variant: "text",
               component: "a",
               size: "small",
@@ -289,7 +289,7 @@ function ye({ session: a, locale: h = "en" }) {
         ]
       }
     ),
-    j && /* @__PURE__ */ t(xe, { onSuccess: M, onCancel: () => u(!1), locale: h })
+    j && /* @__PURE__ */ t(xe, { onSuccess: T, onCancel: () => u(!1), locale: h })
   ] });
 }
 ye.propTypes = {

package/lib/common/org-switch/locales.d.ts

@@ -10,12 +10,18 @@ declare namespace translations {
         let nameEmpty: string;
         let nameTooLong: string;
         let descriptionTooLong: string;
+        let avatarEmpty: string;
         let cancel: string;
         let create: string;
+        let upload: string;
+        let avatar: string;
         namespace mutate {
             let title: string;
             let name: string;
             let description: string;
+            let avatarRequired: string;
+            let uploadAvatarTitle: string;
+            let uploadAvatarTip: string;
         }
     }
     namespace zh {
@@ -37,10 +43,16 @@ declare namespace translations {
         export { nameTooLong_1 as nameTooLong };
         let descriptionTooLong_1: string;
         export { descriptionTooLong_1 as descriptionTooLong };
+        let avatarEmpty_1: string;
+        export { avatarEmpty_1 as avatarEmpty };
+        let upload_1: string;
+        export { upload_1 as upload };
         let cancel_1: string;
         export { cancel_1 as cancel };
         let create_1: string;
         export { create_1 as create };
+        let avatar_1: string;
+        export { avatar_1 as avatar };
         export namespace mutate_1 {
             let title_1: string;
             export { title_1 as title };
@@ -48,6 +60,12 @@ declare namespace translations {
             export { name_1 as name };
             let description_1: string;
             export { description_1 as description };
+            let avatarRequired_1: string;
+            export { avatarRequired_1 as avatarRequired };
+            let uploadAvatarTitle_1: string;
+            export { uploadAvatarTitle_1 as uploadAvatarTitle };
+            let uploadAvatarTip_1: string;
+            export { uploadAvatarTip_1 as uploadAvatarTip };
         }
         export { mutate_1 as mutate };
     }

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

@@ -1,4 +1,4 @@
-const e = {
+const a = {
   en: {
     search: "Search",
     orgs: "Organizations",
@@ -9,12 +9,18 @@ const e = {
     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"
+      description: "Description",
+      avatarRequired: "Avatar is required",
+      uploadAvatarTitle: "Upload Avatar",
+      uploadAvatarTip: "Click to upload an avatar for your organization"
     }
   },
   zh: {
@@ -27,15 +33,21 @@ const e = {
     nameEmpty: "名称不能为空",
     nameTooLong: "名称不能超过{length}个字符",
     descriptionTooLong: "描述不能超过{length}个字符",
+    avatarEmpty: "头像不能为空",
+    upload: "上传",
     cancel: "取消",
     create: "创建",
+    avatar: "头像",
     mutate: {
       title: "{mode}组织",
       name: "组织名称",
-      description: "组织描述"
+      description: "组织描述",
+      avatarRequired: "头像为必填项",
+      uploadAvatarTitle: "上传头像",
+      uploadAvatarTip: "点击上传组织头像"
     }
   }
 };
 export {
-  e as default
+  a as default
 };

package/lib/common/org-switch/use-org.d.ts

@@ -1,5 +1,6 @@
 export default function useOrg(session: any): {
     getOrgs: (this: any, args_0?: any) => Promise<any>;
     createOrg: (this: any, args_0?: any) => Promise<any>;
+    updateOrg: (this: any, orgId?: any, args_1?: any) => Promise<any>;
     getCurrentOrg: (this: any, roleName?: any) => Promise<any>;
 };

package/lib/common/org-switch/use-org.js

@@ -1,13 +1,13 @@
-import { useMemoizedFn as n } from "ahooks";
-import i from "@arcblock/ux/lib/Toast";
-import { getBlockletSDK as m } from "@blocklet/js-sdk";
-import { formatAxiosError as p } from "../../UserCenter/libs/utils.js";
-function w(c) {
-  const e = m(), a = n(async ({ search: t, page: r = 1, pageSize: o = 20 }) => {
+import { useMemoizedFn as s } from "ahooks";
+import c from "@arcblock/ux/lib/Toast";
+import { getBlockletSDK as y } from "@blocklet/js-sdk";
+import { formatAxiosError as u } from "../../UserCenter/libs/utils.js";
+function x(g) {
+  const n = y(), l = s(async ({ search: t, page: r = 1, pageSize: o = 20 }) => {
     try {
-      return await e.user.getOrgs({ search: t, page: r, pageSize: o });
-    } catch (s) {
-      return console.error(s), {
+      return await n.user.getOrgs({ search: t, page: r, pageSize: o });
+    } catch (e) {
+      return console.error(e), {
         orgs: [],
         paging: {
           page: r,
@@ -16,32 +16,39 @@ function w(c) {
         }
       };
     }
-  }), u = n(async ({ name: t, description: r }) => {
+  }), i = s(async ({ name: t, description: r, avatar: o }) => {
     try {
-      return (await e.user.createOrg({ name: t, description: r })).data;
-    } catch (o) {
-      return console.error(o), i.error(p(o)), null;
+      return (await n.user.createOrg({ name: t, description: r, avatar: o })).data;
+    } catch (e) {
+      return console.error(e), c.error(u(e)), null;
     }
-  }), g = n(async (t) => {
+  }), p = s(async (t, { name: r, description: o, avatar: e }) => {
     try {
-      return await e.user.getOrg(t);
+      return (await n.user.updateOrg(t, { name: r, description: o, avatar: e })).data;
+    } catch (a) {
+      return console.error(a), c.error(u(a)), null;
+    }
+  }), d = s(async (t) => {
+    try {
+      return await n.user.getOrg(t);
     } catch (r) {
-      return c.logout(), console.error(r), null;
+      return g.logout(), console.error(r), null;
     }
-  }), l = n(async (t) => {
+  }), m = s(async (t) => {
     try {
-      const r = await e.user.getRole(t);
-      return r.orgId ? await g(r.orgId) : null;
+      const r = await n.user.getRole(t);
+      return r.orgId ? await d(r.orgId) : null;
     } catch (r) {
       return console.error(r), null;
     }
   });
   return {
-    getOrgs: a,
-    createOrg: u,
-    getCurrentOrg: l
+    getOrgs: l,
+    createOrg: i,
+    updateOrg: p,
+    getCurrentOrg: m
   };
 }
 export {
-  w as default
+  x as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -36,11 +36,12 @@
   "dependencies": {
     "@abtnode/constant": "^1.17.7",
     "@abtnode/util": "^1.17.7",
-    "@arcblock/bridge": "3.4.7",
-    "@arcblock/icons": "3.4.7",
-    "@arcblock/react-hooks": "3.4.7",
+    "@arcblock/bridge": "3.4.8",
+    "@arcblock/icons": "3.4.8",
+    "@arcblock/react-hooks": "3.4.8",
     "@arcblock/ws": "^1.28.5",
     "@blocklet/did-space-react": "^1.2.15",
+    "@blocklet/uploader": "^0.3.19",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -83,7 +84,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.4.7",
+    "@arcblock/did-connect-react": "3.4.8",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -97,5 +98,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "eb0fca0015ba4ee80affb3b03d47505c45f8ec1c"
+  "gitHead": "6bbdc63e6e0b7ddfd5e37f2ac6bb44ee49da7139"
 }

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,
+  },
+}));