@abtnode/ux 1.16.14-beta-a898bfcb → 1.16.14-beta-d802cd3c

package/lib/invitation/invitation-passport.js

@@ -7,17 +7,18 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+/* eslint-disable jsx-a11y/alt-text */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function InvitationPassport(_ref) {
   let {
     invitation,
+    createPassportSvg,
     passportColor
   } = _ref;
   const [open, setOpen] = (0, _react.useState)(false);
@@ -29,13 +30,14 @@ function InvitationPassport(_ref) {
     return roleRaw.toUpperCase();
   }, [invitation.role.title, invitation.role.name]);
   const display = (0, _react.useMemo)(() => {
-    return (0, _createPassportSvg.default)({
+    return createPassportSvg({
       title: roleName,
       issuer: invitation.info.name,
       issuerDid: invitation.info.appDid,
       ownerName: 'Your Name',
       // can't get avatar, cause user is not login
       // ownerAvatarUrl: user.avatar,
+      ownerDid: invitation.info.appDid,
       isDataUrl: true,
       preferredColor: invitation.info.passportColor || passportColor
     });
@@ -48,33 +50,16 @@ function InvitationPassport(_ref) {
     setOpen(false);
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "invite-passport__card",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: display,
+        onClick: onViewPermission,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("object", {
+          data: display,
           alt: "passport",
           className: "invite-passport__cover"
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "invite-passport__content",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "invite-passport__title",
-          children: roleName
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "invite-passport__description",
-          title: invitation.role.description,
-          children: invitation.role.description
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            flex: 1
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "invite-passport__view-permission",
-          onClick: onViewPermission,
-          children: t('invite.viewPermission')
-        })]
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: open,
       title: t('invite.viewPermission'),
@@ -115,12 +100,13 @@ function InvitationPassport(_ref) {
 }
 InvitationPassport.propTypes = {
   invitation: _propTypes.default.object.isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired,
   passportColor: _propTypes.default.string
 };
 InvitationPassport.defaultProps = {
   passportColor: 'auto'
 };
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 350px;\n  margin: 30px auto;\n  .invite-passport__card {\n    margin-right: 12px;\n    width: 100px;\n    height: 100px;\n    flex-shrink: 0;\n    .invite-passport__cover {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .invite-passport__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .invite-passport__title {\n    font-weight: 700;\n    font-size: 16px;\n  }\n  .invite-passport__description {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    height: 3em;\n    color: #999;\n    font-size: 14px;\n  }\n  .invite-passport__view-permission {\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: ", ";\n  }\n"])), _ref2 => {
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 350px;\n  margin: 30px auto;\n  .invite-passport__card {\n    margin: 0 auto;\n    width: 228px;\n    height: 258px;\n    flex-shrink: 0;\n    .invite-passport__cover {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .invite-passport__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .invite-passport__title {\n    font-weight: 700;\n    font-size: 16px;\n  }\n  .invite-passport__description {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    height: 3em;\n    color: #999;\n    font-size: 14px;\n  }\n  .invite-passport__view-permission {\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: ", ";\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;

package/lib/invitation/invitation.js

@@ -24,6 +24,7 @@ function Invitation(_ref) {
   let {
     getDataFn,
     passportColor,
+    createPassportSvg,
     onLoginSuccess,
     checkFn,
     onReceive
@@ -53,6 +54,7 @@ function Invitation(_ref) {
         invitation: state.data
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_invitationPassport.default, {
         invitation: state.data,
+        createPassportSvg: createPassportSvg,
         passportColor: passportColor
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Section2, {
         invitation: state.data,
@@ -66,6 +68,7 @@ function Invitation(_ref) {
 Invitation.propTypes = {
   getDataFn: _propTypes.default.func.isRequired,
   checkFn: _propTypes.default.func.isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired,
   onLoginSuccess: _propTypes.default.func,
   onReceive: _propTypes.default.func,
   passportColor: _propTypes.default.string

package/lib/locales/en.js

@@ -91,6 +91,7 @@ module.exports = {
     alreadyExist: 'already exists',
     approve: 'Approve',
     approved: 'approved',
+    appUrl: 'APP Url',
     auditLogs: 'Audit Trail',
     author: 'Author',
     avatar: 'Avatar',
@@ -122,6 +123,7 @@ module.exports = {
     continue: 'Continue',
     continueWith: 'Continue With',
     copiedTip: 'Copied',
+    copyAndClose: 'Copy & Close',
     copyTip: 'Click To Copy',
     coreStorage: 'Core Storage',
     cpu: 'CPU',
@@ -189,6 +191,7 @@ module.exports = {
     lastPublishedAt: 'Published At',
     launcher: 'Launcher Information',
     leavePageTip: 'Are you sure to leave the page?',
+    link: 'Link',
     loading: 'loading',
     log: 'View Logs',
     logStorage: 'Log Storage',
@@ -1247,7 +1250,6 @@ module.exports = {
       launchFailed: 'Failed to launch the app, please try again',
       installedButStopped: 'The app is installed successfully, but cannot be started. You can start it manually after resolving blocking issues',
       installedButError: 'The app is successfully installed, but failed to start',
-      upgradeFailed: 'Upgrade Failed',
       restoreFailed: 'Failed to restore app, please try again'
     },
     steps: {
@@ -1454,7 +1456,8 @@ module.exports = {
       clientIdDescribe: "Auth0's clientId is required"
     },
     comingSoon: 'More login methods are under construction',
-    moreLogin: 'More Login'
+    moreLogin: 'More Login',
+    federated: 'Federated Login'
   },
   expiration: {
     tips: {
@@ -1480,5 +1483,49 @@ module.exports = {
       logSize: 'Log Size',
       bandwidth: 'Bandwidth'
     }
+  },
+  federated: {
+    inviteJoinFederatedLogin: 'Invite to join federated login',
+    inviteJoinFederatedLoginDescription: 'Copy the following address and fill it in the application where you need to join to apply for federated login.',
+    federatedLogin: 'Federated login',
+    joinFederatedLogin: 'Join federated login',
+    joinFederatedLoginDescription: 'Please enter the federated login address provided by Master Blocklet to join the federated login',
+    federatedJoinAppUrl: 'Federated login join appUrl',
+    federatedJoinAppUrlRequired: 'Please input federated login join appUrl',
+    failedToGetFederatedLoginAppUrl: 'Failed to get federated login join appUrl',
+    federatedJoinAppUrlInvalid: 'Federated login appUrl is invalid',
+    siteDetail: 'Site detail',
+    approveToJoinLogin: 'Approve to join federated login',
+    approve: 'Enable login',
+    revoke: 'Disable login',
+    enableFederatedLogin: 'Enable federated login',
+    disableFederatedLogin: 'Disable federated login',
+    enableFederatedLoginDescription: 'After enable federated login, this site will be auto login',
+    disableFederatedLoginDescription: 'After disable federated login, this site will not be auto login',
+    enableFederatedAutoLogin: 'Enable automatic login',
+    enableFederatedAutoLoginDescription: 'After enable automatic login, if there is currently a unified login status, the site will automatically log in the identity of the federated login',
+    disableFederatedAutoLogin: 'Disable automatic login',
+    disableFederatedAutoLoginDescription: 'After the automatic login is turned off, the site will not automatically log in the user information of the unified login, and you can still choose to manually click to log in with the identity of the federated login',
+    info: {
+      appId: 'APP DID',
+      appPid: 'Permanent ID',
+      migratedFrom: 'Also Known As',
+      appName: 'Blocklet name',
+      appDescription: 'Blocklet description',
+      appUrl: 'Blocklet url',
+      appLogo: 'Blocklet logo',
+      did: 'Blocklet DID',
+      serverId: 'Blocklet Server ID',
+      serverVersion: 'Blocklet Server version',
+      version: 'Blocklet version',
+      appliedAt: 'Apply at',
+      status: 'Status'
+    },
+    status: {
+      pending: 'Pending',
+      approved: 'Approved',
+      rejected: 'Rejected',
+      revoked: 'Revoked'
+    }
   }
 };

package/lib/locales/zh.js

@@ -94,6 +94,7 @@ module.exports = {
     alreadyExist: '已经存在',
     approve: '同意',
     approved: 'Approved',
+    appUrl: 'APP 链接',
     auditLogs: '审计记录',
     author: '作者',
     avatar: '头像',
@@ -125,6 +126,7 @@ module.exports = {
     continue: '继续',
     continueWith: '确认继续',
     copiedTip: '已复制',
+    copyAndClose: '复制并关闭',
     copyTip: '点击复制',
     coreStorage: '核心存储',
     cpu: 'CPU',
@@ -194,6 +196,7 @@ module.exports = {
     lastPublishedAt: '发布时间',
     launcher: '启动器信息',
     leavePageTip: '是否确定离开当前页面？',
+    link: '链接',
     loading: '加载中',
     log: '查看日志',
     logStorage: '日志存储',
@@ -1252,7 +1255,6 @@ module.exports = {
       launchFailed: '启动应用失败，请重试',
       installedButStopped: '应用安装成功，但是无法启动，解决启动问题之后后可手动启动',
       installedButError: '应用已经安装，但是运行出错了',
-      upgradeFailed: '更新失败',
       restoreFailed: '还原应用失败,请重试'
     },
     steps: {
@@ -1457,7 +1459,8 @@ module.exports = {
       clientIdDescribe: '请输入 Auth0 的 ClientID'
     },
     comingSoon: '更多登录方式正在建设中',
-    moreLogin: '更多登录方式'
+    moreLogin: '更多登录方式',
+    federated: '统一登录'
   },
   expiration: {
     tips: {
@@ -1483,5 +1486,49 @@ module.exports = {
       logSize: '日志大小',
       bandwidth: '带宽消耗'
     }
+  },
+  federated: {
+    inviteJoinFederatedLogin: '邀请加入统一登录',
+    inviteJoinFederatedLoginDescription: '复制以下地址到需要加入的应用中填入，申请加入统一登录',
+    federatedLogin: '统一登录',
+    joinFederatedLogin: '加入统一登录',
+    joinFederatedLoginDescription: '请输入 Master Blocklet 提供的统一登录地址以加入统一登录',
+    federatedJoinAppUrl: '统一登录地址',
+    federatedJoinAppUrlRequired: '请输入统一登录地址',
+    failedToGetFederatedLoginAppUrl: '获取统一登录地址失败',
+    federatedJoinAppUrlInvalid: '统一登录地址不可用',
+    siteDetail: '站点详情',
+    approveToJoinLogin: '审核加入统一登录',
+    approve: '恢复登录',
+    revoke: '禁止登录',
+    enableFederatedLogin: '启用统一登录',
+    disableFederatedLogin: '禁用统一登录',
+    enableFederatedLoginDescription: '启用统一登录后，该站点将自动登录',
+    disableFederatedLoginDescription: '禁用统一登录后，该站点将无法自动登录',
+    enableFederatedAutoLogin: '开启自动登录',
+    enableFederatedAutoLoginDescription: '开启自动登录后，如果当前存在统一登录的状态，则该站点将自动登录统一登录的身份',
+    disableFederatedAutoLogin: '关闭自动登录',
+    disableFederatedAutoLoginDescription: '关闭自动登录后，该站点将不会自动登录统一登录的用户信息，您仍可选择手动点击登录统一登录的身份',
+    info: {
+      appId: '应用 DID',
+      appPid: '永久 DID',
+      migratedFrom: '曾用 DID',
+      appName: '应用名称',
+      appDescription: '应用描述',
+      appUrl: '应用地址',
+      appLogo: '应用图标',
+      did: '应用 DID',
+      serverId: 'Blocklet Server ID',
+      serverVersion: 'Blocklet Server 版本',
+      version: '应用版本',
+      appliedAt: '申请时间',
+      status: '状态'
+    },
+    status: {
+      pending: '待审核',
+      approved: '已通过',
+      rejected: '已拒绝',
+      revoked: '已撤销'
+    }
   }
 };

package/lib/logs/log-terminal.js

@@ -16,7 +16,7 @@ var _clock = _interopRequireDefault(require("./clock"));
 var _node = require("../contexts/node");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-const _excluded = ["name", "logId", "types", "initialData", "prepend", "postpend"],
+const _excluded = ["name", "logId", "types", "defaultTypeIndex", "initialData", "prepend", "postpend", "onTypeChange"],
   _excluded2 = ["logFile"];
 /**
  * 按 level/destination 分类的一组 terminal
@@ -35,9 +35,11 @@ function LogTerminalGroup(_ref) {
       name,
       logId,
       types,
+      defaultTypeIndex,
       initialData,
       prepend,
-      postpend
+      postpend,
+      onTypeChange
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -53,7 +55,7 @@ function LogTerminalGroup(_ref) {
     stderr: 'stderr'
   };
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
-  const [currentType, setCurrentType] = (0, _react.useState)(types[0]);
+  const [currentType, setCurrentType] = (0, _react.useState)(types[defaultTypeIndex || 0]);
   const [logFiles, setLogFiles] = (0, _react.useState)();
   const terminalRefs = (0, _react.useRef)({});
 
@@ -94,7 +96,10 @@ function LogTerminalGroup(_ref) {
               variant: 'contained'
             } : {};
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, props), {}, {
-              onClick: () => setCurrentType(type),
+              onClick: () => {
+                setCurrentType(type);
+                onTypeChange(type);
+              },
               children: logTypeLabels[type]
             }), type);
           })
@@ -126,16 +131,20 @@ LogTerminalGroup.propTypes = {
   logId: _propTypes.default.string.isRequired,
   // 日志类型, info/error 或 stdin/stdout/access
   types: _propTypes.default.arrayOf(_propTypes.default.string),
+  defaultTypeIndex: _propTypes.default.number,
   // 写入 terminal 的初始数据
   initialData: _propTypes.default.arrayOf(_propTypes.default.string),
   prepend: _propTypes.default.node,
-  postpend: _propTypes.default.node
+  postpend: _propTypes.default.node,
+  onTypeChange: _propTypes.default.func
 };
 LogTerminalGroup.defaultProps = {
   types: ['error', 'info', 'access', 'stdout', 'stderr'],
+  defaultTypeIndex: 0,
   initialData: [],
   prepend: null,
-  postpend: null
+  postpend: null,
+  onTypeChange: () => {}
 };
 const LogTerminalGroupRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  .log-terminal-group-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-bottom: 16px;\n  }\n\n  .log-terminal-group-head-start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    ", " {\n      flex-direction: column;\n      align-items: start;\n    }\n  }\n\n  .log-terminal-group-head-end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    ", " {\n      flex-direction: column;\n      align-items: start;\n    }\n  }\n  .log-terminal-group-terminals {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    > * {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
 const LogTerminal = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {

package/lib/lost-passport.js

@@ -215,6 +215,7 @@ function LostPassport(_ref2) {
                   title: x.title,
                   issuer: x.issuer.name,
                   issuerDid: x.issuer.id,
+                  ownerDid: user.did,
                   ownerName: user.fullName,
                   ownerAvatarUrl: user.avatar,
                   isDataUrl: true,

package/lib/schema-form/passport-input.js

@@ -7,7 +7,7 @@ exports.default = PassportInput;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
-var _passportColor = require("@abtnode/auth/lib/util/passport-color");
+var _nftDisplay = require("@arcblock/nft-display");
 var _util = require("@blocklet/meta/lib/util");
 var _colorInput = _interopRequireDefault(require("./color-input"));
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
@@ -32,7 +32,7 @@ function PassportInput(_ref) {
   const {
     blocklet
   } = componentProps;
-  const color = value === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : value;
+  const color = value === 'auto' ? (0, _nftDisplay.getPassportColorFromDid)(blocklet.appDid) : value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     display: "flex",
     alignItems: "center",
@@ -47,6 +47,7 @@ function PassportInput(_ref) {
         issuer: (0, _util.getDisplayName)(blocklet),
         issuerDid: blocklet.appDid,
         ownerName: 'Your Name',
+        ownerDid: blocklet.appDid,
         isDataUrl: true,
         preferredColor: value || 'auto'
       })

package/lib/team/members/index.js

@@ -115,7 +115,8 @@ SimpleInfo.propTypes = {
 };
 function MemberList(_ref2) {
   let {
-    type
+    type,
+    createPassportSvg
   } = _ref2;
   const {
     appIdList = []
@@ -480,6 +481,9 @@ function MemberList(_ref2) {
             className: "table-toolbar-left",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
               control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                sx: {
+                  display: 'flex !important'
+                },
                 disabled: loading,
                 color: "primary",
                 checked: search.hideBlocked,
@@ -506,6 +510,7 @@ function MemberList(_ref2) {
     }), memberDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_member.default, {
       onCancel: () => setMemberDialog(null),
       userDid: memberDialog.did,
+      createPassportSvg: createPassportSvg,
       initTab: memberDialog.initTab
     }), showInviteMember && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inviteMember.default, {
       teamDid: teamDid,
@@ -528,7 +533,8 @@ function MemberList(_ref2) {
     })]
   });
 }
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .main {\n    .left {\n      width: 168px;\n      flex-shrink: 0;\n      margin-right: 65px;\n      .tabs {\n        padding-top: 16px;\n        .tab {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 8px 16px;\n          transition: background 0.4s;\n\n          width: 168px;\n          height: 36px;\n          border-radius: 8px;\n\n          cursor: pointer;\n          user-select: none;\n\n          &:nth-child(n + 2) {\n            margin-top: 24px;\n          }\n\n          &.active {\n            background: #f2f2f2;\n          }\n\n          &:hover {\n            background: #f2f2f2;\n          }\n\n          .text {\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 19px;\n\n            color: #222222;\n          }\n\n          .badge {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 20px;\n            height: 20px;\n            border-radius: 100%;\n            color: #fff;\n            background: #666666;\n            font-size: 10px;\n            font-weight: 400;\n            &.is-rect {\n              width: auto;\n              border-radius: 8px;\n              padding: 0 4px;\n            }\n          }\n        }\n      }\n      @media (max-width: ", "px) {\n        display: none;\n      }\n    }\n    .right {\n      flex-grow: 1;\n    }\n  }\n\n  .member-block {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    .member-avatar {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .member-text {\n      margin-left: 10px;\n    }\n    .badge-block {\n      width: 14px;\n      height: 14px;\n      position: absolute;\n      right: -4px;\n      top: -4px;\n      background: #ff5757;\n      border-radius: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &::after {\n        content: '';\n        width: 6px;\n        height: 2px;\n        background: #fefefe;\n      }\n    }\n  }\n\n  .table-toolbar-left {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 7px 0;\n    label span:first-child {\n      display: flex;\n    }\n  }\n"])), props => props.theme.breakpoints.values.md);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .main {\n    .left {\n      width: 168px;\n      flex-shrink: 0;\n      margin-right: 65px;\n      .tabs {\n        padding-top: 16px;\n        .tab {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 8px 16px;\n          transition: background 0.4s;\n\n          width: 168px;\n          height: 36px;\n          border-radius: 8px;\n\n          cursor: pointer;\n          user-select: none;\n\n          &:nth-child(n + 2) {\n            margin-top: 24px;\n          }\n\n          &.active {\n            background: #f2f2f2;\n          }\n\n          &:hover {\n            background: #f2f2f2;\n          }\n\n          .text {\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 19px;\n\n            color: #222222;\n          }\n\n          .badge {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 20px;\n            height: 20px;\n            border-radius: 100%;\n            color: #fff;\n            background: #666666;\n            font-size: 10px;\n            font-weight: 400;\n            &.is-rect {\n              width: auto;\n              border-radius: 8px;\n              padding: 0 4px;\n            }\n          }\n        }\n      }\n      @media (max-width: ", "px) {\n        display: none;\n      }\n    }\n    .right {\n      flex-grow: 1;\n    }\n  }\n\n  .member-block {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    .member-avatar {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .member-text {\n      margin-left: 10px;\n    }\n    .badge-block {\n      width: 14px;\n      height: 14px;\n      position: absolute;\n      right: -4px;\n      top: -4px;\n      background: #ff5757;\n      border-radius: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &::after {\n        content: '';\n        width: 6px;\n        height: 2px;\n        background: #fefefe;\n      }\n    }\n  }\n\n  .table-toolbar-left {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 7px 0;\n  }\n"])), props => props.theme.breakpoints.values.md);
 MemberList.propTypes = {
-  type: _propTypes.default.oneOf(['server', 'blocklet']).isRequired
+  type: _propTypes.default.oneOf(['server', 'blocklet']).isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired
 };

package/lib/team/members/member.js

@@ -91,7 +91,8 @@ function Member(_ref3) {
   let {
     userDid,
     onCancel,
-    initTab
+    initTab,
+    createPassportSvg
   } = _ref3;
   const {
     api,
@@ -245,6 +246,7 @@ function Member(_ref3) {
         user: pageState.user,
         teamDid: teamDid,
         roles: roles,
+        createPassportSvg: createPassportSvg,
         onCreate: () => {
           getData(teamDid, userDid).then(() => {
             // oauth 账户邀请后，不会产生待领取的邀请链接
@@ -381,6 +383,7 @@ function Member(_ref3) {
 Member.propTypes = {
   userDid: _propTypes.default.string.isRequired,
   onCancel: _propTypes.default.func.isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired,
   initTab: _propTypes.default.string
 };
 Member.defaultProps = {

package/lib/team/members/passports.js

@@ -21,7 +21,6 @@ var _RevokeIcon = _interopRequireDefault(require("@arcblock/icons/lib/RevokeIcon
 var _ExternalIssuerIcon = _interopRequireDefault(require("@arcblock/icons/lib/ExternalIssuerIcon"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _constant = require("@abtnode/constant");
-var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
 var _node = require("../../contexts/node");
 var _session = require("../../contexts/session");
 var _team = require("../../contexts/team");
@@ -75,7 +74,8 @@ function Passports(_ref2) {
   var _blocklet$settings;
   let {
     user,
-    onCreate
+    onCreate,
+    createPassportSvg
   } = _ref2;
   const {
     t
@@ -230,15 +230,16 @@ function Passports(_ref2) {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML: {
-                __html: (0, _createPassportSvg.default)({
+                __html: createPassportSvg({
                   title: x.title || x.name,
                   issuer: x.issuer && x.issuer.name,
                   issuerDid: x.issuer && x.issuer.id,
                   ownerName: user.fullName,
+                  ownerDid: user.did,
                   ownerAvatarUrl: user.avatar,
                   revoked: x.revoked,
                   preferredColor: passportColor,
-                  width: '120px'
+                  width: '150px'
                 })
               }
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -303,7 +304,7 @@ function Passports(_ref2) {
             })
           })]
         })
-      })), !filteredPassports.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      }, x.id)), !filteredPassports.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
         children: t('common.empty')
       })]
     }), showIssueDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_issuePassport.default, {
@@ -331,6 +332,7 @@ function Passports(_ref2) {
 }
 Passports.propTypes = {
   user: _propTypes.default.object.isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired,
   onCreate: _propTypes.default.func
 };
 Passports.defaultProps = {

package/lib/team/passports/color.js

@@ -14,7 +14,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
 var _util = require("@blocklet/meta/lib/util");
-var _passportColor = require("@abtnode/auth/lib/util/passport-color");
+var _nftDisplay = require("@arcblock/nft-display");
 var _constant = require("@blocklet/constant");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _node = require("../../contexts/node");
@@ -44,7 +44,7 @@ function PassportColor(_ref) {
   } = (0, _context.useLocaleContext)();
   const [loading, setLoading] = (0, _react.useState)(false);
   const curColor = (blocklet.environments.find(x => x.key === 'BLOCKLET_PASSPORT_COLOR') || {}).value || 'auto';
-  const defaultColor = curColor === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : curColor;
+  const defaultColor = curColor === 'auto' ? (0, _nftDisplay.getPassportColorFromDid)(blocklet.appDid) : curColor;
   const [color, setColor] = (0, _react.useState)(defaultColor);
   const onSubmit = async () => {
     const params = [{
@@ -107,6 +107,7 @@ function PassportColor(_ref) {
           issuer: (0, _util.getDisplayName)(blocklet),
           issuerDid: blocklet.appDid,
           ownerName: 'Your Name',
+          ownerDid: blocklet.appDid,
           isDataUrl: true,
           preferredColor: color
         })

package/lib/team/passports/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = PassportList;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -15,7 +16,6 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
 var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
 var _ExternalIssuerIcon = _interopRequireDefault(require("@arcblock/icons/lib/ExternalIssuerIcon"));
-var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _node = require("../../contexts/node");
 var _team = require("../../contexts/team");
@@ -34,7 +34,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function PassportList() {
+function PassportList(_ref) {
+  let {
+    createPassportSvg
+  } = _ref;
   const {
     t
   } = (0, _react.useContext)(_context.LocaleContext);
@@ -187,19 +190,23 @@ function PassportList() {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             style: {
-              width: 120
-            },
-            alt: "",
-            src: (0, _createPassportSvg.default)({
-              title: role.title,
-              issuer: teamName,
-              issuerDid: teamIssuerDid,
-              ownerName: 'Your Name',
-              isDataUrl: true,
-              preferredColor: passportColor
-            })
+              width: 150
+            }
+            // eslint-disable-next-line react/no-danger
+            ,
+            dangerouslySetInnerHTML: {
+              __html: createPassportSvg({
+                title: role.title,
+                issuer: teamName,
+                issuerDid: teamIssuerDid,
+                ownerName: 'Your Name',
+                ownerDid: teamIssuerDid,
+                preferredColor: passportColor,
+                width: '150px'
+              })
+            }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             ml: 3,
             className: "title",
@@ -248,5 +255,7 @@ function PassportList() {
   });
 }
 const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .list {\n    .item {\n      padding: 12px;\n      margin: 12px -12px;\n      cursor: pointer;\n      transition: box-shadow 0.4s;\n      &:hover {\n        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);\n      }\n    }\n\n    .title {\n      font-weight: 400;\n      font-size: 18px;\n      width: 80px;\n      line-height: 21px;\n      color: #222222;\n    }\n\n    .description {\n      flex: 1;\n      margin-left: 64px;\n      color: #999999;\n    }\n\n    .action {\n      color: #bfbfbf;\n      fill: #bfbfbf;\n    }\n  }\n"])));
-PassportList.propTypes = {};
+PassportList.propTypes = {
+  createPassportSvg: _propTypes.default.func.isRequired
+};
 PassportList.defaultProps = {};

package/lib/team/passports/trusted-factories.js

@@ -139,7 +139,6 @@ function TrustedFactories(_ref) {
                 size: 16,
                 showDidLogo: false
               }), !!x.remark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-                pl: 3.5,
                 fontSize: 12,
                 maxWidth: "300px",
                 children: x.remark