@arcblock/ux 2.6.3 → 2.6.5

package/lib/SessionManager/index.js

@@ -6,16 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
+var _Link2 = _interopRequireDefault(require("@mui/icons-material/Link"));
+var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
+var _ConnectWithoutContact = _interopRequireDefault(require("@mui/icons-material/ConnectWithoutContact"));
 var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
+var _Account = _interopRequireDefault(require("@arcblock/icons/lib/Account"));
 var _OpenIn = _interopRequireDefault(require("@arcblock/icons/lib/OpenIn"));
 var _Disconnect = _interopRequireDefault(require("@arcblock/icons/lib/Disconnect"));
 var _Switch = _interopRequireDefault(require("@arcblock/icons/lib/Switch"));
-var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
-var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
-var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
 var _Util = require("../Util");
@@ -44,7 +53,8 @@ const translations = {
     openInWallet: 'Open DID Wallet',
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
-    thirdParty: 'Third Party Login'
+    thirdParty: 'Third Party Login',
+    connectedWith: 'Connected with'
   },
   zh: {
     switchDid: '切换账户',
@@ -56,7 +66,8 @@ const translations = {
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
-    thirdParty: '第三方登录'
+    thirdParty: '第三方登录',
+    connectedWith: '连接至'
   }
 };
 const getConnectedAccounts = user => {
@@ -68,7 +79,7 @@ const getSourceProvider = user => {
   return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.sourceProvider) || 'wallet';
 };
 function SessionManager(_ref) {
-  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5;
+  var _session$user, _session$user$avatar, _window$blocklet, _window$blocklet$sett, _window$blocklet$sett2, _session$user3, _session$user4, _session$user5;
   let {
       session,
       locale,
@@ -116,6 +127,7 @@ function SessionManager(_ref) {
   });
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
+  const federatedAccount = connectedAccounts.find(item => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -138,9 +150,10 @@ function SessionManager(_ref) {
     return (session === null || session === void 0 ? void 0 : session.initialized) === false && (session === null || session === void 0 ? void 0 : session.loading) === true;
     // eslint-disable-next-line react/prop-types
   }, [session === null || session === void 0 ? void 0 : session.initialized, session === null || session === void 0 ? void 0 : session.loading]);
+  const masterSiteInfo = (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : (_window$blocklet$sett = _window$blocklet.settings) === null || _window$blocklet$sett === void 0 ? void 0 : (_window$blocklet$sett2 = _window$blocklet$sett.federated) === null || _window$blocklet$sett2 === void 0 ? void 0 : _window$blocklet$sett2.master;
   if (!session.user) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
+      children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, _objectSpread(_objectSpread({
         ref: userAnchorRef,
         sx: [{
           borderRadius: '100vw'
@@ -153,19 +166,19 @@ function SessionManager(_ref) {
         "aria-label": "login button"
       }, rest), {}, {
         "data-cy": "sessionManager-login",
-        children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: {
             lineHeight: '25px'
           },
           children: translation.connect
         })]
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, _objectSpread(_objectSpread({
         ref: userAnchorRef
       }, rest), {}, {
         onClick: _onLogin,
         "data-cy": "sessionManager-login",
         size: "medium",
-        children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+        children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
           style: {
             width: size - 4,
             height: size - 4,
@@ -258,7 +271,7 @@ function SessionManager(_ref) {
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, _objectSpread(_objectSpread({
       ref: userAnchorRef,
       onClick: onToggleUser
     }, rest), {}, {
@@ -279,7 +292,7 @@ function SessionManager(_ref) {
       onClose: onCloseUser,
       anchorEl: userAnchorRef.current,
       dark: dark,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuList.default, {
         sx: {
           p: 0
         },
@@ -289,7 +302,7 @@ function SessionManager(_ref) {
             className: "session-manager-user-name",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: session.user.fullName
-            }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+            }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
               label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role.toUpperCase()),
               size: "small",
               variant: "outlined",
@@ -297,7 +310,7 @@ function SessionManager(_ref) {
                 height: 'auto',
                 marginRight: 0
               },
-              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
                 component: _ShieldCheck.default,
                 size: "small"
               })
@@ -310,6 +323,12 @@ function SessionManager(_ref) {
                 responsive: false,
                 children: walletDid
               })
+            }), federatedAccount && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "session-manager-id-item",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                responsive: false,
+                children: federatedAccount.did
+              })
             }), (session === null || session === void 0 ? void 0 : (_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "session-manager-id-item",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
@@ -318,18 +337,31 @@ function SessionManager(_ref) {
               })
             })]
           })]
+        }), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          className: "session-manager-menu-item",
+          "data-cy": "sessionManager-connectWithFederated",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+            component: _ConnectWithoutContact.default,
+            className: "session-manager-menu-icon"
+          }), translation.connectedWith, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+            ml: 1,
+            href: masterSiteInfo.appUrl,
+            underline: "hover",
+            target: "_blank",
+            children: masterSiteInfo.appName
+          })]
         }), Array.isArray(menu) && menu.map((menuItem, index) => {
           const {
               svgIcon
             } = menuItem,
             menuProps = _objectWithoutProperties(menuItem, _excluded2);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, _objectSpread(_objectSpread({
             className: "session-manager-menu-item"
           }, _objectSpread(_objectSpread({}, menuProps), {}, {
             icon: undefined,
             label: undefined
           })), {}, {
-            children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+            children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
               component: svgIcon,
               className: "session-manager-menu-icon"
             }) : menuItem.icon, menuItem.label]
@@ -339,54 +371,54 @@ function SessionManager(_ref) {
             menuItem: 'session-manager-menu-item',
             menuIcon: 'session-manager-menu-icon'
           }
-        }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           component: "a",
           className: "session-manager-menu-item",
           "data-cy": "sessionManager-openInWallet",
           href: "https://www.abtwallet.io/",
           target: "_blank",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _OpenIn.default,
             className: "session-manager-menu-icon"
           }), translation.openInWallet]
-        }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchDid,
           "data-cy": "sessionManager-switch-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _Switch.default,
             className: "session-manager-menu-icon"
           }), translation.switchDid]
-        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchProfile,
           "data-cy": "sessionManager-switch-profile-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _PersonOutline.default,
             className: "session-manager-menu-icon"
           }), translation.switchProfile]
-        }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchPassport,
           "data-cy": "sessionManager-switch-passport-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _VpnKeyOutlined.default,
             className: "session-manager-menu-icon"
           }), translation.switchPassport]
-        }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onBindWallet,
           "data-cy": "sessionManager-bind-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-            component: _Link.default,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+            component: _Link2.default,
             className: "session-manager-menu-icon"
           }), session.provider === 'auth0' ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onLogout,
           disabled: disableLogout,
           "data-cy": "sessionManager-logout-trigger",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _Disconnect.default,
             className: "session-manager-menu-icon"
           }), translation.disconnect]

package/lib/Util/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.appendParams = void 0;
 exports.detectWalletExtension = detectWalletExtension;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
@@ -296,15 +297,45 @@ const isEthereumDid = did => {
   }
   return true;
 };
+
+/**
+ *
+ * @param {string} url 需要处理的 url
+ * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
+ * @returns
+ */
 exports.isEthereumDid = isEthereumDid;
+const appendParams = (url, params) => {
+  if (!params) {
+    return url;
+  }
+  try {
+    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
+    const urlInstance = new URL(url, window.location.origin);
+    Object.keys(params).forEach(key => {
+      urlInstance.searchParams.set(key, params[key]);
+    });
+    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
+    if (urlInstance.origin === window.location.origin) {
+      return urlInstance.pathname + urlInstance.search;
+    }
+    return urlInstance.href;
+  } catch (_unused) {
+    return url;
+  }
+};
+exports.appendParams = appendParams;
 const getUserAvatar = function getUserAvatar(avatar) {
-  var _window$blocklet, _window$blocklet$capa;
   let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 48;
   if (!avatar) {
     return avatar;
   }
-  if (avatar.indexOf('/.well-known/service') >= 0 && (_window$blocklet = window.blocklet) !== null && _window$blocklet !== void 0 && (_window$blocklet$capa = _window$blocklet.capabilities) !== null && _window$blocklet$capa !== void 0 && _window$blocklet$capa.httpImageFilter) {
-    return "".concat(avatar, "/resize?w=").concat(size, "&h=").concat(size);
+  if (avatar.indexOf('/.well-known/service') >= 0) {
+    return appendParams(avatar, {
+      imageFilter: 'resize',
+      w: size,
+      h: size
+    });
   }
   return avatar;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "1b4d3ea0e13aa11bc06cad0be0e3dd630ffd7008",
+  "gitHead": "3456978c946fbf78d5476dc2447ab14877effc13",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.6.3",
-    "@arcblock/react-hooks": "^2.6.3",
+    "@arcblock/icons": "^2.6.5",
+    "@arcblock/react-hooks": "^2.6.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/index.jsx

@@ -2,16 +2,25 @@
 /* eslint-disable react/jsx-no-bind */
 import { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, CircularProgress } from '@mui/material';
-import AccountIcon from '@arcblock/icons/lib/Account';
+import IconButton from '@mui/material/IconButton';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import SvgIcon from '@mui/material/SvgIcon';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Link from '@mui/material/Link';
+import CircularProgress from '@mui/material/CircularProgress';
+import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
+import BindWalletIcon from '@mui/icons-material/Link';
+import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
+import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';
 import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import AccountIcon from '@arcblock/icons/lib/Account';
 import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import SwitchDidIcon from '@arcblock/icons/lib/Switch';
-import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
-import BindWalletIcon from '@mui/icons-material/Link';
-import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import isEmpty from 'lodash/isEmpty';
 
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
@@ -30,6 +39,7 @@ const translations = {
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
     thirdParty: 'Third Party Login',
+    connectedWith: 'Connected with',
   },
   zh: {
     switchDid: '切换账户',
@@ -42,6 +52,7 @@ const translations = {
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
     thirdParty: '第三方登录',
+    connectedWith: '连接至',
   },
 };
 
@@ -87,6 +98,7 @@ function SessionManager({
 
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
+  const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -111,6 +123,8 @@ function SessionManager({
     // eslint-disable-next-line react/prop-types
   }, [session?.initialized, session?.loading]);
 
+  const masterSiteInfo = window.blocklet?.settings?.federated?.master;
+
   if (!session.user) {
     return (
       <>
@@ -242,6 +256,11 @@ function SessionManager({
                   <DidAddress responsive={false}>{walletDid}</DidAddress>
                 </div>
               )}
+              {federatedAccount && (
+                <div className="session-manager-id-item">
+                  <DidAddress responsive={false}>{federatedAccount.did}</DidAddress>
+                </div>
+              )}
               {session?.user?.email && (
                 <div className="session-manager-id-item">
                   <DidAddress responsive={false}>{session.user.email}</DidAddress>
@@ -249,6 +268,15 @@ function SessionManager({
               )}
             </div>
           </div>
+          {federatedAccount && !isEmpty(masterSiteInfo) && (
+            <MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
+              <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
+              {translation.connectedWith}
+              <Link ml={1} href={masterSiteInfo.appUrl} underline="hover" target="_blank">
+                {masterSiteInfo.appName}
+              </Link>
+            </MenuItem>
+          )}
           {Array.isArray(menu) &&
             menu.map((menuItem, index) => {
               const { svgIcon, ...menuProps } = menuItem;

package/src/Util/index.js

@@ -283,13 +283,43 @@ export const isEthereumDid = (did) => {
   return true;
 };
 
+/**
+ *
+ * @param {string} url 需要处理的 url
+ * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
+ * @returns
+ */
+export const appendParams = (url, params) => {
+  if (!params) {
+    return url;
+  }
+  try {
+    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
+    const urlInstance = new URL(url, window.location.origin);
+    Object.keys(params).forEach((key) => {
+      urlInstance.searchParams.set(key, params[key]);
+    });
+    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
+    if (urlInstance.origin === window.location.origin) {
+      return urlInstance.pathname + urlInstance.search;
+    }
+    return urlInstance.href;
+  } catch {
+    return url;
+  }
+};
+
 export const getUserAvatar = (avatar, size = 48) => {
   if (!avatar) {
     return avatar;
   }
 
-  if (avatar.indexOf('/.well-known/service') >= 0 && window.blocklet?.capabilities?.httpImageFilter) {
-    return `${avatar}/resize?w=${size}&h=${size}`;
+  if (avatar.indexOf('/.well-known/service') >= 0) {
+    return appendParams(avatar, {
+      imageFilter: 'resize',
+      w: size,
+      h: size,
+    });
   }
 
   return avatar;