@arcblock/ux 0.78.25 → 1.6.59

package/lib/Theme/index.js

@@ -3,88 +3,83 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = exports.colors = void 0;
+exports.create = void 0;
 
 var _styles = require("@material-ui/core/styles");
 
+require("@fontsource/lato/400.css");
+
+require("@fontsource/lato/700.css");
+
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable implicit-arrow-linebreak */
-
-/* eslint-disable object-curly-newline */
-// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-const colors = {
-  white: '#FFFFFF',
-  dark: '#4A707C',
-  gray: '#222222',
-  minor: '#9B9B9B',
-  darkText: '#DCDCDC',
-  background: '#F7F8F8',
-  yellow: '#FFCF71',
-  green: '#44cdc6',
-  red: '#D0021B',
-  blue: '#4E6AF6',
-  primary: '#222222',
-  black: '#222222',
-  secondary: '#44cdc6',
-  mint: '#44cdc6',
-  textSecondary: '#4A4A4A',
-  active: '#5b9025',
-  danger: '#D0021B',
-  lightGrey: '#BCBCBC'
-}; // https://material-ui.com/customization/default-theme/
-
-exports.colors = colors;
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
 const create = function create() {
-  let {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      {
     mode = 'light',
     pageWidth = 'md',
     palette,
     typography,
     overrides
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const theme = (0, _styles.createMuiTheme)({
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _styles.createTheme)(_objectSpread({
     themeName: 'ArcBlock',
-    palette: Object.assign({
-      primary: {
-        main: colors.blue,
-        contrastText: colors.white
-      },
-      secondary: {
-        main: colors.mint,
-        contrastText: colors.white
-      },
-      danger: {
-        main: colors.danger,
-        contrastText: colors.white
-      },
-      text: {
-        primary: '#404040',
-        contrast: colors.white
-      },
+    palette: Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
       background: {
-        paper: mode === 'light' ? colors.white : colors.gray,
-        default: mode === 'light' ? colors.background : colors.gray
+        paper: mode === 'light' ? _Colors.default.common.white : _Colors.default.grey[900],
+        default: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
       },
       type: mode
-    }, palette || {}),
+    }), palette || {}),
     typography: Object.assign({
       useNextVariants: true,
       color: {
-        main: mode === 'light' ? colors.gray : colors.white,
-        gray: mode === 'light' ? colors.minor : colors.darkText,
-        blue: colors.blue
+        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
+        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
+        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
+        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
+        main: mode === 'light' ? '#222222' : _Colors.default.common.white,
+        gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
-      fontSize: 16,
-      fontFamily: ['Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+      // 按最新设计规范, 只使用 400/700
+      fontWeightLight: 400,
+      fontWeightRegular: 400,
+      fontWeightMedium: 700,
+      fontWeightBold: 700,
+      // button 默认使用粗体
+      button: {
+        fontWeight: 700
+      }
     }, typography || {}),
     overrides: Object.assign({
       MuiButton: {
         root: {
-          borderRadius: 0,
+          boxShadow: 'none'
+        }
+      },
+      MuiButtonGroup: {
+        contained: {
           boxShadow: 'none'
         }
       },
@@ -95,7 +90,7 @@ const create = function create() {
       },
       MuiToolbar: {
         root: {
-          background: mode === 'light' ? colors.background : colors.gray
+          background: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
         }
       },
       MuiTableCell: {
@@ -108,10 +103,10 @@ const create = function create() {
         },
         head: {
           textTransform: 'uppercase',
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       },
       MuiChip: {
@@ -134,17 +129,38 @@ const create = function create() {
       },
       MuiTypography: {
         body1: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body2: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       }
     }, overrides || {}),
     pageWidth,
-    colors,
+    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
+    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    colors: {
+      white: '#FFFFFF',
+      dark: '#4A707C',
+      gray: '#222222',
+      minor: '#9B9B9B',
+      darkText: '#DCDCDC',
+      background: '#F7F8F8',
+      yellow: '#FFCF71',
+      green: '#44cdc6',
+      red: '#D0021B',
+      blue: '#4E6AF6',
+      primary: '#222222',
+      black: '#222222',
+      secondary: '#44cdc6',
+      mint: '#44cdc6',
+      textSecondary: '#4A4A4A',
+      active: '#5b9025',
+      danger: '#D0021B',
+      lightGrey: '#BCBCBC'
+    },
     mode
-  });
+  }, rest));
   const enhanced = (0, _responsiveFontSizes.default)(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,

package/lib/Theme/responsiveFontSizes.js

@@ -7,9 +7,9 @@ exports.default = responsiveFontSizes;
 
 var _cssUtils = require("@material-ui/core/styles/cssUtils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
@@ -26,9 +26,10 @@ function responsiveFontSizes(themeInput) {
 
   const theme = _objectSpread({}, themeInput);
 
-  theme.typography = _objectSpread({}, theme.typography); // eslint-disable-next-line prefer-destructuring
-
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  theme.typography = _objectSpread({}, theme.typography);
+  const {
+    typography
+  } = theme; // Convert between css lengths e.g. em->px or px->rem
   // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
   const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);
@@ -59,8 +60,7 @@ function responsiveFontSizes(themeInput) {
     let transform = null;
 
     if (!disableAlign) {
-      transform = value => // eslint-disable-next-line implicit-arrow-linebreak
-      (0, _cssUtils.alignProperty)({
+      transform = value => (0, _cssUtils.alignProperty)({
         size: value,
         grid: (0, _cssUtils.fontGrid)({
           pixels: 4,
@@ -70,7 +70,7 @@ function responsiveFontSizes(themeInput) {
       });
     }
 
-    typography[variant] = _objectSpread({}, style, {}, (0, _cssUtils.responsiveProperty)({
+    typography[variant] = _objectSpread(_objectSpread({}, style), (0, _cssUtils.responsiveProperty)({
       cssProperty: 'fontSize',
       min: minFontSize,
       max: maxFontSize,

package/lib/Toast/index.js

@@ -29,6 +29,8 @@ var _colors = require("@material-ui/core/colors");
 
 var _styles = require("@material-ui/core/styles");
 
+const _excluded = ["className", "message", "onClose", "variant"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -68,7 +70,7 @@ const useStyles1 = (0, _styles.makeStyles)(theme => ({
 }));
 
 function SnackbarContentWrapper(props) {
-  const classes = useStyles1(); // eslint-disable-next-line object-curly-newline
+  const classes = useStyles1();
 
   const {
     className,
@@ -76,24 +78,23 @@ function SnackbarContentWrapper(props) {
     onClose,
     variant
   } = props,
-        rest = _objectWithoutProperties(props, ["className", "message", "onClose", "variant"]);
+        rest = _objectWithoutProperties(props, _excluded);
 
   const Icon = variantIcon[variant];
-  return _react.default.createElement(_SnackbarContent.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, Object.assign({
     className: [classes[variant], className].join(' ').trim(),
-    message: // eslint-disable-next-line react/jsx-wrap-multilines
-    _react.default.createElement("span", {
+    message: /*#__PURE__*/_react.default.createElement("span", {
       id: "client-snackbar",
       className: classes.message
-    }, _react.default.createElement(Icon, {
+    }, /*#__PURE__*/_react.default.createElement(Icon, {
       className: [classes.icon, classes.iconVariant].join(' ').trim()
     }), message),
-    action: [_react.default.createElement(_IconButton.default, {
+    action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
       key: "close",
       "aria-label": "close",
       color: "inherit",
       onClick: onClose
-    }, _react.default.createElement(_Close.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, {
       className: classes.icon
     }))]
   }, rest));
@@ -108,7 +109,7 @@ SnackbarContentWrapper.propTypes = {
 SnackbarContentWrapper.defaultProps = {
   className: '',
   variant: 'success'
-}; // eslint-disable-next-line object-curly-newline
+};
 
 function Toast(_ref) {
   let {
@@ -129,7 +130,7 @@ function Toast(_ref) {
     onClose();
   };
 
-  return _react.default.createElement(_Snackbar.default, {
+  return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
     open: open,
     anchorOrigin: {
       vertical: 'top',
@@ -137,7 +138,7 @@ function Toast(_ref) {
     },
     autoHideDuration: duration,
     onClose: handleClose
-  }, _react.default.createElement(SnackbarContentWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(SnackbarContentWrapper, {
     onClose: handleClose,
     variant: variant,
     message: message

package/lib/Util/index.js

@@ -3,23 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseQuery = parseQuery;
+exports.formatToDate = formatToDate;
+exports.formatToDatetime = formatToDatetime;
+exports.getColor = exports.getBackground = exports.formatUptime = void 0;
 exports.getCookieOptions = getCookieOptions;
-exports.mergeProps = mergeProps;
 exports.getCopyright = getCopyright;
-exports.str2color = exports.formatUptime = exports.getTimezone = exports.getBackground = exports.getColor = void 0;
+exports.getDateTool = getDateTool;
+exports.getTimezone = void 0;
+exports.mergeProps = mergeProps;
+exports.openWebWallet = openWebWallet;
+exports.parseQuery = parseQuery;
+exports.setDateTool = setDateTool;
+exports.str2color = void 0;
 
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable no-bitwise */
+let dateTool = null;
 
-/* eslint-disable no-plusplus */
-
-/* eslint-disable operator-linebreak */
 function parseQuery(str) {
-  return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter((_ref) => {
+  return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter(_ref => {
     let [key] = _ref;
     return !!key;
   }).reduce((memo, x) => {
@@ -29,22 +34,50 @@ function parseQuery(str) {
     return memo;
   }, {});
 }
+/**
+ * @param {number} opts.expireInDays
+ * @param {string} opts.path
+ * @param {domain} opts.domain
+ * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
+ */
+
 
 function getCookieOptions() {
   let expireInDays = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  let opts = {
+    expireInDays
+  };
+
+  if (typeof expireInDays === 'object') {
+    opts = expireInDays;
+  }
+
+  if (opts.path === undefined) {
+    opts.path = '/';
+  }
+
+  if (!opts.expireInDays) {
+    opts.expireInDays = 1;
+  }
+
   const options = {
-    expires: expireInDays,
-    path: '/',
-    domain: ''
+    expires: opts.expireInDays,
+    path: opts.path,
+    domain: opts.domain || '',
+    sameSite: opts.sameSite || 'lax'
   };
 
-  if (typeof window === 'undefined') {
+  if (typeof window === 'undefined' || opts.domain || opts.returnDomain === false) {
+    if (opts.returnDomain === false) {
+      delete options.domain;
+    }
+
     return options;
   }
 
   const {
     host
-  } = window.location; // eslint-disable-line
+  } = window.location;
 
   if (/^[.:0-9]+$/.test(host)) {
     options.domain = '';
@@ -72,7 +105,7 @@ const getColor = props => {
   }
 
   if (props.dark) {
-    return props.theme.palette.text.contrast;
+    return props.theme.palette.common.white;
   }
 
   return props.theme.palette.text.primary;
@@ -86,10 +119,10 @@ const getBackground = props => {
   }
 
   if (props.dark) {
-    return props.theme.palette.text.primary;
+    return props.theme.palette.common.black;
   }
 
-  return props.theme.palette.text.contrast;
+  return props.theme.palette.common.white;
 };
 
 exports.getBackground = getBackground;
@@ -99,7 +132,6 @@ function mergeProps(props, component) {
   const newProps = Object.assign({}, props);
   Object.keys(component.defaultProps || {}).forEach(x => {
     if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
-      // eslint-disable-next-line react/default-props-match-prop-types
       newProps[x] = component.defaultProps[x];
     }
   });
@@ -139,6 +171,25 @@ const getTimezone = () => {
 
 exports.getTimezone = getTimezone;
 
+const str2color = str => {
+  let hash = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let colour = '#';
+
+  for (let j = 0; j < 3; j++) {
+    const value = hash >> j * 8 & 0xff;
+    colour += "00".concat(value.toString(16)).substr(-2);
+  }
+
+  return colour;
+};
+
+exports.str2color = str2color;
+
 const formatUptime = uptime => {
   const total = Math.round(uptime / 1000);
   const hours = Math.floor(total / 3600);
@@ -146,24 +197,144 @@ const formatUptime = uptime => {
   const seconds = total % 60;
   return "".concat((0, _padStart.default)(hours, 2, '0'), ":").concat((0, _padStart.default)(minutes, 2, '0'), ":").concat((0, _padStart.default)(seconds, 2, '0'));
 };
+/**
+ * Set the date tool library which support for format() and locale() functions,
+ *  moment and dayjs are recommended.
+ * @param {object} the date tool library
+ */
+
 
 exports.formatUptime = formatUptime;
 
-const str2color = str => {
-  let hash = 0;
+function setDateTool(tool) {
+  dateTool = tool;
+}
 
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+function getDateTool() {
+  return dateTool;
+}
+
+const createDateFormater = format => (date, _ref2) => {
+  let {
+    locale,
+    tz
+  } = _ref2;
+
+  if (dateTool === null) {
+    throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
   }
 
-  let colour = '#';
+  if (!date) {
+    return '-';
+  }
 
-  for (let j = 0; j < 3; j++) {
-    const value = hash >> j * 8 & 0xff;
-    colour += "00".concat(value.toString(16)).substr(-2);
+  let instance = dateTool(date);
+
+  if (typeof tz !== 'undefined') {
+    instance = instance.tz(tz);
   }
 
-  return colour;
+  if (typeof locale !== 'undefined') {
+    instance = instance.locale(locale);
+  }
+
+  return instance.format(format);
 };
+/**
+ * Format the time string as `ll` format: MMM D, YYYY
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+
+
+function formatToDate(date) {
+  let {
+    locale,
+    tz
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return createDateFormater('ll')(date, {
+    locale,
+    tz
+  });
+}
+/**
+ * Format the time string as `lll` format: MMM D, YYYY h:mm A
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+
+
+function formatToDatetime(date) {
+  let {
+    locale,
+    tz
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return createDateFormater('lll')(date, {
+    locale,
+    tz
+  });
+}
+
+function openWebWallet(_ref3) {
+  var _window;
+
+  let {
+    webWalletUrl,
+    action = 'login',
+    locale = 'en',
+    url,
+    windowFeatures
+  } = _ref3;
+  // web wallet extension
+  const webWalletExtension = ((_window = window) === null || _window === void 0 ? void 0 : _window.ABT_DEV) || window.ABT;
+
+  if (webWalletExtension && typeof webWalletExtension.open === 'function') {
+    webWalletExtension.open({
+      action,
+      locale,
+      url: encodeURIComponent(url)
+    });
+    return;
+  }
+
+  const defaultWindowFeatures = {
+    toolbar: 'no',
+    location: 'no',
+    status: 'no',
+    menubar: 'no',
+    scrollbars: 'yes',
+    resizable: 'yes',
+    // iphone 8plus size
+    width: 414,
+    height: 736
+  };
+  const windowUrl = "".concat(webWalletUrl, "?action=").concat(action, "&locale=").concat(locale, "&url=").concat(encodeURIComponent(url));
+  const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
+
+  const getWindowWidth = win => {
+    return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
+  }; // 默认在浏览器右上角弹出窗口
+
+
+  if (!('left' in mergedWindowFeatures)) {
+    const winWidth = getWindowWidth(window.top || window);
+    const winLeft = window.screenLeft || window.screenX;
+    mergedWindowFeatures.left = winWidth + winLeft - mergedWindowFeatures.width;
+  }
+
+  if (!('top' in mergedWindowFeatures)) {
+    const winTop = window.screenTop || window.screenY;
+    mergedWindowFeatures.top = winTop;
+  }
 
-exports.str2color = str2color;
+  const strWindowFeatures = Object.keys(mergedWindowFeatures).map(key => "".concat(key, "=").concat(mergedWindowFeatures[key])).join(',');
+  window.open(windowUrl, 'targetWindow', strWindowFeatures);
+}