@abtnode/ux 1.8.33 → 1.8.35

package/lib/delete-confirm.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CancelConfirm;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _clickToCopy = _interopRequireDefault(require("./click-to-copy"));
+var _confirm = _interopRequireDefault(require("./confirm"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function CancelConfirm(_ref) {
+  let {
+    title: _title,
+    description: _description,
+    confirmPlaceholder,
+    cancel,
+    confirm,
+    params: initialParams,
+    onCancel,
+    onConfirm,
+    keyName
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const confirmSetting = {
+    title: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [_title, " (".concat(keyName, ")")]
+    }),
+    description: (params, setParams) => {
+      const setValue = value => {
+        // eslint-disable-next-line no-underscore-dangle
+        setParams(_objectSpread(_objectSpread({}, value), {}, {
+          __disableConfirm: value.__disableConfirm
+        }));
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+          severity: "warning",
+          style: {
+            width: '100%'
+          },
+          children: t('common.notice')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginTop: 24,
+            marginBottom: 24
+          },
+          dangerouslySetInnerHTML: {
+            __html: _description
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            marginBottom: 24
+          },
+          children: [t('common.click'), "\uFF1A", /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+            "data-cy": "click-copy",
+            children: keyName
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "div",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: confirmPlaceholder,
+            autoComplete: "off",
+            "data-cy": "delete-confirm-input",
+            variant: "outlined",
+            fullWidth: true,
+            autoFocus: true,
+            value: params.inputVal,
+            onChange: e => {
+              setValue(_objectSpread(_objectSpread({}, params), {}, {
+                inputVal: e.target.value,
+                __disableConfirm: keyName !== e.target.value
+              }));
+            }
+          })
+        })]
+      });
+    },
+    confirm,
+    cancel,
+    onConfirm,
+    onCancel,
+    params: _objectSpread({
+      inputVal: '',
+      __disableConfirm: true
+    }, initialParams)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
+  });
+}
+CancelConfirm.propTypes = {
+  title: _propTypes.default.any.isRequired,
+  keyName: _propTypes.default.any.isRequired,
+  description: _propTypes.default.any.isRequired,
+  // can be a function that renders different content based on params
+  confirmPlaceholder: _propTypes.default.any.isRequired,
+  cancel: _propTypes.default.string,
+  confirm: _propTypes.default.string,
+  params: _propTypes.default.object,
+  // This object holds states managed in the dialog
+  onCancel: _propTypes.default.func,
+  onConfirm: _propTypes.default.func.isRequired
+};
+CancelConfirm.defaultProps = {
+  onCancel: () => {},
+  cancel: '',
+  confirm: 'Confirm',
+  params: {}
+};

package/lib/form/form-text-input.js

@@ -42,8 +42,12 @@ function FormTextInput(_ref) {
   const handleSubmit = async () => {
     setLoading(true);
     try {
-      await onSubmit(value);
-      setDefaultValue(value);
+      const shouldUpdate = await onSubmit(value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else {
+        setDefaultValue(value);
+      }
     } catch (err) {
       setValue(defaultValue);
     } finally {
@@ -80,6 +84,9 @@ function FormTextInput(_ref) {
   }, rest)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     px: 1,
     className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
     children: value
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formWrapper.default, {

package/lib/hooks/blocklet.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBlocklet = useBlocklet;
+var _react = require("react");
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _constant = require("@blocklet/constant");
+var _toast = _interopRequireDefault(require("../toast"));
+var _util = require("../util");
+var _util2 = require("../blocklet/util");
+var _urlEvaluation = require("./url-evaluation");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+// eslint-disable-next-line import/prefer-default-export
+function useBlocklet(_ref) {
+  var _blocklet$site, _blocklet$site$domain, _blocklet$meta, _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _blocklet$meta5, _blocklet$meta6, _blocklet$meta7, _blocklet$meta8;
+  let {
+    did,
+    client,
+    useSubscription,
+    getIP,
+    useLocaleContext,
+    disableSubscription
+  } = _ref;
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [error, setError] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [loadingRuntimeInfo, setLoadingRuntimeInfo] = (0, _react.useState)(false);
+  const [blocklet, setBlocklet] = (0, _react.useState)();
+  const [domainStatus, setDomainStatus] = (0, _react.useState)({});
+  const domainListStr = blocklet !== null && blocklet !== void 0 && (_blocklet$site = blocklet.site) !== null && _blocklet$site !== void 0 && (_blocklet$site$domain = _blocklet$site.domainAliases) !== null && _blocklet$site$domain !== void 0 && _blocklet$site$domain.length ? JSON.stringify(blocklet.site.domainAliases.map(x => x.value)) : '';
+  const domains = (0, _react.useMemo)(() => {
+    var _blocklet$site2;
+    return ((blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$site2 = blocklet.site) === null || _blocklet$site2 === void 0 ? void 0 : _blocklet$site2.domainAliases) || []).map(x => x.value);
+  }, [domainListStr]); // eslint-disable-line
+
+  const {
+    domainsAccessibility,
+    recommendedDomain
+  } = (0, _urlEvaluation.useDomainsAccessibility)(domains);
+  const refreshRuntimeInfo = async () => {
+    setLoadingRuntimeInfo(true);
+    try {
+      const {
+        blocklet: data
+      } = await client.getBlocklet({
+        input: {
+          did,
+          attachRuntimeInfo: true
+        }
+      });
+      await (0, _util2.fixBlocklet)(data, {
+        getIP
+      });
+      setBlocklet(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoadingRuntimeInfo(false);
+    }
+  };
+  const refreshBlocklet = async function refreshBlocklet() {
+    let {
+      showError = true,
+      attachRuntimeInfo = true
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const {
+        blocklet: data
+      } = await client.getBlocklet({
+        input: {
+          did,
+          attachRuntimeInfo: false
+        }
+      });
+      if (data) {
+        setBlocklet(oldBlocklet => {
+          (0, _util2.fixBlocklet)(data, {
+            fixRuntime: 'merge-old',
+            oldBlocklet
+          });
+          return data;
+        });
+        setLoading(false);
+        if (attachRuntimeInfo) {
+          refreshRuntimeInfo();
+        }
+      } else {
+        throw new Error(t('blocklet.notFound'));
+      }
+    } catch (err) {
+      setLoading(false);
+      setError(err);
+      if (showError) {
+        _toast.default.error(err.message);
+      }
+    }
+  };
+  const refreshDomainStatus = () => {
+    if (did && domainListStr) {
+      client.checkDomains({
+        input: {
+          did
+        }
+      }).catch(err => {
+        console.error(err);
+      });
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (domainListStr && !disableSubscription) {
+      refreshDomainStatus();
+    }
+  }, [domainListStr, disableSubscription]); // eslint-disable-line
+
+  useSubscription(_constant.BlockletEvents.domainStatus, data => {
+    setDomainStatus(pre => _objectSpread(_objectSpread({}, pre), {}, {
+      [data.domain]: _objectSpread(_objectSpread({}, pre[data.domain]), data)
+    }));
+  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.statusChange, () => refreshBlocklet({
+    attachRuntimeInfo: false
+  }), [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.started, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta3 = blocklet.meta) === null || _blocklet$meta3 === void 0 ? void 0 : _blocklet$meta3.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.startFailed, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta4 = blocklet.meta) === null || _blocklet$meta4 === void 0 ? void 0 : _blocklet$meta4.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.installed, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta5 = blocklet.meta) === null || _blocklet$meta5 === void 0 ? void 0 : _blocklet$meta5.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.upgraded, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta6 = blocklet.meta) === null || _blocklet$meta6 === void 0 ? void 0 : _blocklet$meta6.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.downgraded, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta7 = blocklet.meta) === null || _blocklet$meta7 === void 0 ? void 0 : _blocklet$meta7.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.updated, refreshBlocklet, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta8 = blocklet.meta) === null || _blocklet$meta8 === void 0 ? void 0 : _blocklet$meta8.did, !disableSubscription]);
+  const data = blocklet ? (0, _merge.default)(blocklet, {
+    site: {
+      domainAliases: blocklet.site.domainAliases.map(x => {
+        const domain = x.value;
+        const key = (0, _util.toSlotDomain)(domain);
+        x.domainStatus = (0, _omit.default)(domainStatus[key], ['domain', 'meta']);
+        x.accessibility = (0, _omit.default)(domainsAccessibility[domain], ['domain']);
+        x.href = (0, _util.getBlockletUrl)({
+          blocklet,
+          domain: x,
+          params: (0, _util.getBlockletUrlParams)(blocklet, locale)
+        });
+        return x;
+      })
+    }
+  }) : null;
+  return {
+    loading,
+    loadingRuntimeInfo,
+    error,
+    blocklet: data,
+    recommendedDomain: recommendedDomain || '',
+    actions: {
+      refreshBlocklet,
+      refreshDomainStatus,
+      setBlocklet
+    }
+  };
+}

package/lib/hooks/url-evaluation.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBlockletUrlEvaluation = useBlockletUrlEvaluation;
+exports.useDomainsAccessibility = useDomainsAccessibility;
+exports.useUrlEvaluation = useUrlEvaluation;
+var _react = require("react");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
+var _constant = require("@abtnode/constant");
+var _urlEvaluation = require("@abtnode/util/lib/url-evaluation");
+var _checkAccessibleBrowser = _interopRequireDefault(require("@abtnode/util/lib/url-evaluation/check-accessible-browser"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+// 如果同一个页面中存在多个部分同时对同一个 url 检测 url 可访问性, 避免造成重复请求
+const ping = (0, _memoize.default)(url => (0, _checkAccessibleBrowser.default)((0, _urlJoin.default)(new URL(url).origin, _constant.WELLKNOWN_PING_PREFIX)));
+
+// url <-> evaluation cache
+const CACHE = {};
+function useUrlEvaluation(_ref) {
+  let {
+    urls,
+    checkAccessible = _checkAccessibleBrowser.default,
+    disableCache = false
+  } = _ref;
+  // 基于 CACHE 初始化该 hook 的状态
+  // FIXME: 最好解决源头的 material-table 渲染 BlockletInterface 时的 re-mount 问题 (#4897)
+  const initialCachedRef = (0, _react.useRef)(urls.filter(url => CACHE[url]).map(url => CACHE[url]));
+  const allCached = initialCachedRef.current.length === urls.length;
+  const [urlsState, setUrlsState] = (0, _react.useState)(allCached ? initialCachedRef.current : []);
+  const [loading, setLoading] = (0, _react.useState)(!allCached);
+  const recommendedUrlState = (0, _react.useMemo)(() => {
+    if (!loading && urlsState.length) {
+      return urlsState[0];
+    }
+    return null;
+  }, [urlsState, loading]);
+  (0, _react.useEffect)(() => {
+    if ((urls === null || urls === void 0 ? void 0 : urls.length) > 0 && !allCached) {
+      const evaluate = async () => {
+        let results;
+        setLoading(true);
+        if (disableCache) {
+          results = await (0, _urlEvaluation.evaluateURLs)(urls, {
+            checkAccessible
+          });
+          results.forEach(item => {
+            CACHE[item.url] = item;
+          });
+        } else {
+          const misses = await (0, _urlEvaluation.evaluateURLs)(urls.filter(url => !CACHE[url]), {
+            checkAccessible
+          });
+          misses.forEach(item => {
+            CACHE[item.url] = item;
+          });
+          results = urls.map(url => CACHE[url]).sort((a, b) => b.score - a.score);
+        }
+        setUrlsState(results);
+        setLoading(false);
+      };
+      evaluate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [urls, disableCache, allCached]);
+  return {
+    urlsState,
+    loading,
+    recommendedUrlState,
+    recommendedUrl: recommendedUrlState === null || recommendedUrlState === void 0 ? void 0 : recommendedUrlState.url
+  };
+}
+
+/**
+ * 主要对 blocklet 访问 urls 进行评估
+ * @param {object} blocklet
+ */
+function useBlockletUrlEvaluation(blocklet) {
+  const {
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const urls = (0, _react.useMemo)(() => {
+    if (!blocklet) {
+      return [];
+    }
+    // getBlockletUrlParams 的调用是必须的, 会根据 blocklet 状态决定是否添加 "__start__" 参数, 以保证 blocklet 启动按钮可以正确的跳转到启动页面
+    return (0, _util.getBlockletUrls)({
+      blocklet,
+      params: (0, _util.getBlockletUrlParams)(blocklet, locale)
+    });
+  }, [blocklet, locale]);
+  const {
+    loading,
+    recommendedUrlState,
+    recommendedUrl
+  } = useUrlEvaluation({
+    urls,
+    checkAccessible: ping
+  });
+  return {
+    urls,
+    loading,
+    recommendedUrlState,
+    recommendedUrl
+  };
+}
+
+/**
+ * 主要对 blocklet domains 对应的 urls 进行评估, 配合 DomainStatusProvider 使用
+ * @param {string[]} domains
+ */
+function useDomainsAccessibility(domains) {
+  // 获取 blocklet domain 对应的访问 url
+  const urls = (0, _react.useMemo)(() => domains.map(item => (0, _util.getAccessUrl)(item)), [domains]);
+  const {
+    urlsState,
+    loading,
+    recommendedUrl
+  } = useUrlEvaluation({
+    urls,
+    checkAccessible: ping
+  });
+  let result;
+  if (loading) {
+    result = {
+      domainsAccessibility: domains.reduce((acc, cur) => _objectSpread(_objectSpread({}, acc), {}, {
+        [cur]: {
+          loading: true
+        }
+      }), {}),
+      recommendedDomain: null
+    };
+  } else {
+    var _urlsState$find;
+    const domainsAccessibility = urlsState.reduce((acc, cur) => {
+      // 检测对象是 domain, 但检测可访问性用的是 domain 对应的 ping url, 所以需要取 hostname 作为结果
+      const domain = new URL(cur.url).hostname;
+      acc[domain] = _objectSpread(_objectSpread({}, cur), {}, {
+        domain
+      });
+      return acc;
+    }, {});
+    // 从排好优先级的 urls 中选择第一个可访问的 url 作为 recommendedDomain (对于自定义域名, 可能存在评分最高但不可访问的情况) (#5195)
+    const accessibleUrl = ((_urlsState$find = urlsState.find(item => item.accessible)) === null || _urlsState$find === void 0 ? void 0 : _urlsState$find.url) || recommendedUrl;
+    result = {
+      domainsAccessibility,
+      recommendedDomain: accessibleUrl ? new URL(accessibleUrl).hostname : null
+    };
+  }
+  return result;
+}

package/lib/hooks/use-subscription.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSubscription = useSubscription;
+var _react = require("react");
+// eslint-disable-next-line import/prefer-default-export
+function useSubscription(_ref) {
+  let {
+    wsClient,
+    event,
+    cb = () => {},
+    deps = []
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    // if deps has false value, do not sub
+    const shouldSub = wsClient && (!deps.length || deps.every(Boolean));
+    if (shouldSub) {
+      wsClient.on(event, cb);
+    }
+    return () => {
+      if (shouldSub) {
+        wsClient.off(event, cb);
+      }
+    };
+  }, deps); // eslint-disable-line
+}

package/lib/layout/addon.js

@@ -37,27 +37,27 @@ function HeaderAddon(_ref) {
     locale
   } = (0, _react.useContext)(_context.LocaleContext);
   const location = (0, _reactRouterDom.useLocation)();
-  const docPaths = {
-    '/dashboard': '/introduction/abtnode-overview',
-    '/store': '/marketplace',
-    '/blocklets': '/blocklet',
-    '/router/rules': '/router',
-    '/router/engine': '/router',
-    '/settings/basic': '/misc',
-    '/settings/team': '/misc/member-management',
-    '/console': '/misc/graphql-console'
+  const defaultEndpoint = 'https://developer.blocklet.io/docs';
+  const docMap = {
+    '/store': {
+      endpoint: 'https://store.blocklet.io'
+    },
+    '/dashboard': {
+      path: '/conceptual/overview'
+    },
+    '/settings/router': {
+      path: '/conceptual/server-architecture'
+    }
   };
   const onHelpClick = () => {
     const pathName = location.pathname;
-    let path = '';
-    if (pathName.indexOf('/blocklets') > -1) {
-      path = docPaths['/blocklets'];
-    } else if (pathName.indexOf('/store') > -1) {
-      path = docPaths['/store'];
-    } else if (docPaths[pathName]) {
-      path = docPaths[pathName];
+    let doc = {};
+    if (pathName.indexOf('/store') > -1) {
+      doc = docMap['/store'];
+    } else if (docMap[pathName]) {
+      doc = docMap[pathName];
     }
-    window.open("https://docs.arcblock.io/abtnode/".concat(locale).concat(path), '_blank');
+    window.open("".concat(doc.endpoint || defaultEndpoint, "/").concat(locale).concat(doc.path || ''), '_blank');
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
     children: [extraItems.map((x, index) => /*#__PURE__*/(0, _react.cloneElement)(x, {

package/lib/layout/feedback.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Feedback;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** @jsxImportSource @emotion/react */
+
+function Feedback(_ref) {
+  let {
+    id,
+    version,
+    bundleName
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const feedbackUrl = new URL('https://github.com/blocklet/blocklet-site/issues/new');
+  feedbackUrl.searchParams.set('title', '[Feedback]');
+  feedbackUrl.searchParams.set('body', "\n\n[Enter feedback here]\n\n\n---\n#### Document Details\n* App Id: ".concat(id, "\n* App Version: ").concat(version, "\n* App Bundle Name: ").concat(bundleName, "\n* Page: ").concat(window.location.href, "\n"));
+  return (0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      mx: {
+        xs: 0,
+        md: 2
+      }
+    },
+    children: (0, _jsxRuntime.jsx)(_Link.default, {
+      sx: {
+        color: 'text.primary'
+      },
+      target: "_blank",
+      href: feedbackUrl.href,
+      rel: "noreferrer",
+      style: {
+        textDecoration: 'underline'
+      },
+      children: t('common.reportIssue')
+    })
+  });
+}
+Feedback.propTypes = {
+  id: _propTypes.default.string,
+  version: _propTypes.default.string,
+  bundleName: _propTypes.default.string
+};
+Feedback.defaultProps = {
+  id: '',
+  version: '',
+  bundleName: ''
+};

package/lib/locales/en.js

@@ -210,6 +210,7 @@ module.exports = {
     reload: 'Reload',
     remark: 'Remark',
     remove: 'Remove',
+    reportIssue: 'Report an issue',
     requiredErrorText: '{name} is required',
     resource: 'Resource',
     restart: 'Restart',
@@ -224,6 +225,7 @@ module.exports = {
     scheduleFailed: 'schedule failed',
     scheduleSuccess: 'successfully scheduled',
     search: 'Search',
+    security: 'Security',
     setting: 'Settings',
     start: 'Start',
     status: 'Status',
@@ -728,7 +730,7 @@ module.exports = {
       }
     },
     domainSecurity: {
-      title: 'Update Domain Security',
+      title: 'Domain Security',
       cors: {
         title: 'Allowed CORS Domains',
         description: 'Domain list that can send cross origin requests to {name}, comma separated, use "*" to allow anyone, which is not recommended',
@@ -955,7 +957,9 @@ module.exports = {
       defaultRule: 'Default rule',
       search: 'Search Passport',
       searchIssuerDid: 'Search Issuer DID',
-      issueBy: 'Issue by {name}'
+      issueBy: 'Issue by {name}',
+      configColor: 'Config Passport Color',
+      color: 'Passport Color'
     },
     inviting: {
       link: 'Invite Link',

package/lib/locales/zh.js

@@ -216,6 +216,7 @@ module.exports = {
     reload: '优雅重启',
     remark: '备注',
     remove: '删除',
+    reportIssue: '问题反馈',
     requiredErrorText: '{name}是必填的',
     resource: '资源',
     restart: '重启',
@@ -230,6 +231,7 @@ module.exports = {
     scheduleFailed: '加入任务队列失败',
     scheduleSuccess: '成功加入任务队列',
     search: '搜索',
+    security: '安全',
     setting: '设置',
     start: '启动',
     status: '状态',
@@ -732,7 +734,7 @@ module.exports = {
       }
     },
     domainSecurity: {
-      title: '更新站点安全设置',
+      title: '站点安全设置',
       cors: {
         title: 'CORS 域名白名单',
         description: '此白名单显示的声明可以往 {name} 发送跨域请求的域名, 多个域名用逗号分隔, 可以用 "*" 来允许任何域名（我们不推荐这么做）',
@@ -961,7 +963,9 @@ module.exports = {
       defaultRule: '默认规则',
       search: '搜索通行证',
       searchIssuerDid: '搜索颁发者 DID',
-      issueBy: '由 {name} 颁发'
+      issueBy: '由 {name} 颁发',
+      configColor: '设置通行证颜色',
+      color: '通行证颜色'
     },
     inviting: {
       link: '邀请链接',