@next-core/brick-kit 2.99.0 → 2.101.0

package/dist/index.bundle.js

@@ -1,21 +1,40 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('history'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('lodash'), require('@next-core/brick-utils'), require('@next-core/brick-http'), require('moment'), require('@next-core/pipes'), require('i18next'), require('@next-core/easyops-analytics'), require('js-yaml'), require('antd'), require('@ant-design/icons'), require('react-i18next'), require('@babel/runtime/helpers/esm/extends'), require('@next-core/illustrations'), require('@babel/runtime/helpers/decorate')) :
   typeof define === 'function' && define.amd ? define(['exports', 'history', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/defineProperty', 'react', 'lodash', '@next-core/brick-utils', '@next-core/brick-http', 'moment', '@next-core/pipes', 'i18next', '@next-core/easyops-analytics', 'js-yaml', 'antd', '@ant-design/icons', 'react-i18next', '@babel/runtime/helpers/esm/extends', '@next-core/illustrations', '@babel/runtime/helpers/decorate'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._asyncToGenerator$4, global._defineProperty$1, global.React, global.lodash, global.brickUtils, global.brickHttp, global.moment, global.pipes, global.i18next, global.easyopsAnalytics, global.yaml, global.antd, global.icons, global.reactI18next, global._extends, global.illustrations, global._decorate));
-})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _asyncToGenerator$4, _defineProperty$1, React, lodash, brickUtils, brickHttp, moment, pipes, i18next, easyopsAnalytics, yaml, antd, icons, reactI18next, _extends, illustrations, _decorate) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global.history$1, global._objectSpread, global._objectWithoutProperties, global._asyncToGenerator$4, global._defineProperty$1, global.React, global.lodash, global.brickUtils, global.brickHttp, global.moment, global.pipes, global.i18next, global.easyopsAnalytics, global.yaml, global.antd, global.icons, global.reactI18next, global._extends$2, global.illustrations, global._decorate));
+})(this, (function (exports, history$1, _objectSpread, _objectWithoutProperties, _asyncToGenerator$4, _defineProperty$1, React, lodash, brickUtils, brickHttp, moment, pipes, i18next, easyopsAnalytics, yaml, antd, icons, reactI18next, _extends$2, illustrations, _decorate) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
   var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
   var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
   var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator$4);
   var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$1);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var lodash__default = /*#__PURE__*/_interopDefaultLegacy(lodash);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
   var yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
-  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends$2);
   var _decorate__default = /*#__PURE__*/_interopDefaultLegacy(_decorate);
 
   class BaseBar {
@@ -6189,6 +6208,892 @@
     return _standaloneBootstrap.apply(this, arguments);
   }
 
+  /**
+   * Take input from [0, n] and return it as [0, 1]
+   * @hidden
+   */
+  function bound01(n, max) {
+      if (isOnePointZero(n)) {
+          n = '100%';
+      }
+      var isPercent = isPercentage(n);
+      n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+      // Automatically convert percentage into number
+      if (isPercent) {
+          n = parseInt(String(n * max), 10) / 100;
+      }
+      // Handle floating point rounding errors
+      if (Math.abs(n - max) < 0.000001) {
+          return 1;
+      }
+      // Convert into [0, 1] range if it isn't already
+      if (max === 360) {
+          // If n is a hue given in degrees,
+          // wrap around out-of-range values into [0, 360] range
+          // then convert into [0, 1].
+          n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+      }
+      else {
+          // If n not a hue given in degrees
+          // Convert into [0, 1] range if it isn't already.
+          n = (n % max) / parseFloat(String(max));
+      }
+      return n;
+  }
+  /**
+   * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+   * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+   * @hidden
+   */
+  function isOnePointZero(n) {
+      return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
+  }
+  /**
+   * Check to see if string passed in is a percentage
+   * @hidden
+   */
+  function isPercentage(n) {
+      return typeof n === 'string' && n.indexOf('%') !== -1;
+  }
+  /**
+   * Return a valid alpha value [0,1] with all invalid values being set to 1
+   * @hidden
+   */
+  function boundAlpha(a) {
+      a = parseFloat(a);
+      if (isNaN(a) || a < 0 || a > 1) {
+          a = 1;
+      }
+      return a;
+  }
+  /**
+   * Replace a decimal with it's percentage value
+   * @hidden
+   */
+  function convertToPercentage(n) {
+      if (n <= 1) {
+          return Number(n) * 100 + "%";
+      }
+      return n;
+  }
+  /**
+   * Force a hex value to have 2 characters
+   * @hidden
+   */
+  function pad2(c) {
+      return c.length === 1 ? '0' + c : String(c);
+  }
+
+  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
+  /**
+   * Handle bounds / percentage checking to conform to CSS color spec
+   * <http://www.w3.org/TR/css3-color/>
+   * *Assumes:* r, g, b in [0, 255] or [0, 1]
+   * *Returns:* { r, g, b } in [0, 255]
+   */
+  function rgbToRgb(r, g, b) {
+      return {
+          r: bound01(r, 255) * 255,
+          g: bound01(g, 255) * 255,
+          b: bound01(b, 255) * 255,
+      };
+  }
+  function hue2rgb(p, q, t) {
+      if (t < 0) {
+          t += 1;
+      }
+      if (t > 1) {
+          t -= 1;
+      }
+      if (t < 1 / 6) {
+          return p + (q - p) * (6 * t);
+      }
+      if (t < 1 / 2) {
+          return q;
+      }
+      if (t < 2 / 3) {
+          return p + (q - p) * (2 / 3 - t) * 6;
+      }
+      return p;
+  }
+  /**
+   * Converts an HSL color value to RGB.
+   *
+   * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+   * *Returns:* { r, g, b } in the set [0, 255]
+   */
+  function hslToRgb(h, s, l) {
+      var r;
+      var g;
+      var b;
+      h = bound01(h, 360);
+      s = bound01(s, 100);
+      l = bound01(l, 100);
+      if (s === 0) {
+          // achromatic
+          g = l;
+          b = l;
+          r = l;
+      }
+      else {
+          var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+          var p = 2 * l - q;
+          r = hue2rgb(p, q, h + 1 / 3);
+          g = hue2rgb(p, q, h);
+          b = hue2rgb(p, q, h - 1 / 3);
+      }
+      return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * Converts an RGB color value to HSV
+   *
+   * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+   * *Returns:* { h, s, v } in [0,1]
+   */
+  function rgbToHsv(r, g, b) {
+      r = bound01(r, 255);
+      g = bound01(g, 255);
+      b = bound01(b, 255);
+      var max = Math.max(r, g, b);
+      var min = Math.min(r, g, b);
+      var h = 0;
+      var v = max;
+      var d = max - min;
+      var s = max === 0 ? 0 : d / max;
+      if (max === min) {
+          h = 0; // achromatic
+      }
+      else {
+          switch (max) {
+              case r:
+                  h = (g - b) / d + (g < b ? 6 : 0);
+                  break;
+              case g:
+                  h = (b - r) / d + 2;
+                  break;
+              case b:
+                  h = (r - g) / d + 4;
+                  break;
+          }
+          h /= 6;
+      }
+      return { h: h, s: s, v: v };
+  }
+  /**
+   * Converts an HSV color value to RGB.
+   *
+   * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+   * *Returns:* { r, g, b } in the set [0, 255]
+   */
+  function hsvToRgb(h, s, v) {
+      h = bound01(h, 360) * 6;
+      s = bound01(s, 100);
+      v = bound01(v, 100);
+      var i = Math.floor(h);
+      var f = h - i;
+      var p = v * (1 - s);
+      var q = v * (1 - f * s);
+      var t = v * (1 - (1 - f) * s);
+      var mod = i % 6;
+      var r = [v, q, p, p, t, v][mod];
+      var g = [t, v, v, q, p, p][mod];
+      var b = [p, p, t, v, v, q][mod];
+      return { r: r * 255, g: g * 255, b: b * 255 };
+  }
+  /**
+   * Converts an RGB color to hex
+   *
+   * Assumes r, g, and b are contained in the set [0, 255]
+   * Returns a 3 or 6 character hex
+   */
+  function rgbToHex(r, g, b, allow3Char) {
+      var hex = [
+          pad2(Math.round(r).toString(16)),
+          pad2(Math.round(g).toString(16)),
+          pad2(Math.round(b).toString(16)),
+      ];
+      // Return a 3 character hex if possible
+      if (allow3Char &&
+          hex[0].startsWith(hex[0].charAt(1)) &&
+          hex[1].startsWith(hex[1].charAt(1)) &&
+          hex[2].startsWith(hex[2].charAt(1))) {
+          return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+      }
+      return hex.join('');
+  }
+  /** Converts a hex value to a decimal */
+  function convertHexToDecimal(h) {
+      return parseIntFromHex(h) / 255;
+  }
+  /** Parse a base-16 hex value into a base-10 integer */
+  function parseIntFromHex(val) {
+      return parseInt(val, 16);
+  }
+
+  // https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
+  /**
+   * @hidden
+   */
+  var names = {
+      aliceblue: '#f0f8ff',
+      antiquewhite: '#faebd7',
+      aqua: '#00ffff',
+      aquamarine: '#7fffd4',
+      azure: '#f0ffff',
+      beige: '#f5f5dc',
+      bisque: '#ffe4c4',
+      black: '#000000',
+      blanchedalmond: '#ffebcd',
+      blue: '#0000ff',
+      blueviolet: '#8a2be2',
+      brown: '#a52a2a',
+      burlywood: '#deb887',
+      cadetblue: '#5f9ea0',
+      chartreuse: '#7fff00',
+      chocolate: '#d2691e',
+      coral: '#ff7f50',
+      cornflowerblue: '#6495ed',
+      cornsilk: '#fff8dc',
+      crimson: '#dc143c',
+      cyan: '#00ffff',
+      darkblue: '#00008b',
+      darkcyan: '#008b8b',
+      darkgoldenrod: '#b8860b',
+      darkgray: '#a9a9a9',
+      darkgreen: '#006400',
+      darkgrey: '#a9a9a9',
+      darkkhaki: '#bdb76b',
+      darkmagenta: '#8b008b',
+      darkolivegreen: '#556b2f',
+      darkorange: '#ff8c00',
+      darkorchid: '#9932cc',
+      darkred: '#8b0000',
+      darksalmon: '#e9967a',
+      darkseagreen: '#8fbc8f',
+      darkslateblue: '#483d8b',
+      darkslategray: '#2f4f4f',
+      darkslategrey: '#2f4f4f',
+      darkturquoise: '#00ced1',
+      darkviolet: '#9400d3',
+      deeppink: '#ff1493',
+      deepskyblue: '#00bfff',
+      dimgray: '#696969',
+      dimgrey: '#696969',
+      dodgerblue: '#1e90ff',
+      firebrick: '#b22222',
+      floralwhite: '#fffaf0',
+      forestgreen: '#228b22',
+      fuchsia: '#ff00ff',
+      gainsboro: '#dcdcdc',
+      ghostwhite: '#f8f8ff',
+      goldenrod: '#daa520',
+      gold: '#ffd700',
+      gray: '#808080',
+      green: '#008000',
+      greenyellow: '#adff2f',
+      grey: '#808080',
+      honeydew: '#f0fff0',
+      hotpink: '#ff69b4',
+      indianred: '#cd5c5c',
+      indigo: '#4b0082',
+      ivory: '#fffff0',
+      khaki: '#f0e68c',
+      lavenderblush: '#fff0f5',
+      lavender: '#e6e6fa',
+      lawngreen: '#7cfc00',
+      lemonchiffon: '#fffacd',
+      lightblue: '#add8e6',
+      lightcoral: '#f08080',
+      lightcyan: '#e0ffff',
+      lightgoldenrodyellow: '#fafad2',
+      lightgray: '#d3d3d3',
+      lightgreen: '#90ee90',
+      lightgrey: '#d3d3d3',
+      lightpink: '#ffb6c1',
+      lightsalmon: '#ffa07a',
+      lightseagreen: '#20b2aa',
+      lightskyblue: '#87cefa',
+      lightslategray: '#778899',
+      lightslategrey: '#778899',
+      lightsteelblue: '#b0c4de',
+      lightyellow: '#ffffe0',
+      lime: '#00ff00',
+      limegreen: '#32cd32',
+      linen: '#faf0e6',
+      magenta: '#ff00ff',
+      maroon: '#800000',
+      mediumaquamarine: '#66cdaa',
+      mediumblue: '#0000cd',
+      mediumorchid: '#ba55d3',
+      mediumpurple: '#9370db',
+      mediumseagreen: '#3cb371',
+      mediumslateblue: '#7b68ee',
+      mediumspringgreen: '#00fa9a',
+      mediumturquoise: '#48d1cc',
+      mediumvioletred: '#c71585',
+      midnightblue: '#191970',
+      mintcream: '#f5fffa',
+      mistyrose: '#ffe4e1',
+      moccasin: '#ffe4b5',
+      navajowhite: '#ffdead',
+      navy: '#000080',
+      oldlace: '#fdf5e6',
+      olive: '#808000',
+      olivedrab: '#6b8e23',
+      orange: '#ffa500',
+      orangered: '#ff4500',
+      orchid: '#da70d6',
+      palegoldenrod: '#eee8aa',
+      palegreen: '#98fb98',
+      paleturquoise: '#afeeee',
+      palevioletred: '#db7093',
+      papayawhip: '#ffefd5',
+      peachpuff: '#ffdab9',
+      peru: '#cd853f',
+      pink: '#ffc0cb',
+      plum: '#dda0dd',
+      powderblue: '#b0e0e6',
+      purple: '#800080',
+      rebeccapurple: '#663399',
+      red: '#ff0000',
+      rosybrown: '#bc8f8f',
+      royalblue: '#4169e1',
+      saddlebrown: '#8b4513',
+      salmon: '#fa8072',
+      sandybrown: '#f4a460',
+      seagreen: '#2e8b57',
+      seashell: '#fff5ee',
+      sienna: '#a0522d',
+      silver: '#c0c0c0',
+      skyblue: '#87ceeb',
+      slateblue: '#6a5acd',
+      slategray: '#708090',
+      slategrey: '#708090',
+      snow: '#fffafa',
+      springgreen: '#00ff7f',
+      steelblue: '#4682b4',
+      tan: '#d2b48c',
+      teal: '#008080',
+      thistle: '#d8bfd8',
+      tomato: '#ff6347',
+      turquoise: '#40e0d0',
+      violet: '#ee82ee',
+      wheat: '#f5deb3',
+      white: '#ffffff',
+      whitesmoke: '#f5f5f5',
+      yellow: '#ffff00',
+      yellowgreen: '#9acd32',
+  };
+
+  /**
+   * Given a string or object, convert that input to RGB
+   *
+   * Possible string inputs:
+   * ```
+   * "red"
+   * "#f00" or "f00"
+   * "#ff0000" or "ff0000"
+   * "#ff000000" or "ff000000"
+   * "rgb 255 0 0" or "rgb (255, 0, 0)"
+   * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+   * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+   * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+   * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+   * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+   * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+   * ```
+   */
+  function inputToRGB(color) {
+      var rgb = { r: 0, g: 0, b: 0 };
+      var a = 1;
+      var s = null;
+      var v = null;
+      var l = null;
+      var ok = false;
+      var format = false;
+      if (typeof color === 'string') {
+          color = stringInputToObject(color);
+      }
+      if (typeof color === 'object') {
+          if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+              rgb = rgbToRgb(color.r, color.g, color.b);
+              ok = true;
+              format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
+          }
+          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+              s = convertToPercentage(color.s);
+              v = convertToPercentage(color.v);
+              rgb = hsvToRgb(color.h, s, v);
+              ok = true;
+              format = 'hsv';
+          }
+          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+              s = convertToPercentage(color.s);
+              l = convertToPercentage(color.l);
+              rgb = hslToRgb(color.h, s, l);
+              ok = true;
+              format = 'hsl';
+          }
+          if (Object.prototype.hasOwnProperty.call(color, 'a')) {
+              a = color.a;
+          }
+      }
+      a = boundAlpha(a);
+      return {
+          ok: ok,
+          format: color.format || format,
+          r: Math.min(255, Math.max(rgb.r, 0)),
+          g: Math.min(255, Math.max(rgb.g, 0)),
+          b: Math.min(255, Math.max(rgb.b, 0)),
+          a: a,
+      };
+  }
+  // <http://www.w3.org/TR/css3-values/#integers>
+  var CSS_INTEGER = '[-\\+]?\\d+%?';
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+  // Actual matching.
+  // Parentheses and commas are optional, but not required.
+  // Whitespace can take the place of commas or opening paren
+  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var matchers = {
+      CSS_UNIT: new RegExp(CSS_UNIT),
+      rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
+      rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
+      hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
+      hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
+      hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
+      hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
+      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+      hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+      hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+      hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  };
+  /**
+   * Permissive string parsing.  Take in a number of formats, and output an object
+   * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+   */
+  function stringInputToObject(color) {
+      color = color.trim().toLowerCase();
+      if (color.length === 0) {
+          return false;
+      }
+      var named = false;
+      if (names[color]) {
+          color = names[color];
+          named = true;
+      }
+      else if (color === 'transparent') {
+          return { r: 0, g: 0, b: 0, a: 0, format: 'name' };
+      }
+      // Try to match string input using regular expressions.
+      // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
+      // Just return an object and let the conversion functions handle that.
+      // This way the result will be the same whether the tinycolor is initialized with string or object.
+      var match = matchers.rgb.exec(color);
+      if (match) {
+          return { r: match[1], g: match[2], b: match[3] };
+      }
+      match = matchers.rgba.exec(color);
+      if (match) {
+          return { r: match[1], g: match[2], b: match[3], a: match[4] };
+      }
+      match = matchers.hsl.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], l: match[3] };
+      }
+      match = matchers.hsla.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], l: match[3], a: match[4] };
+      }
+      match = matchers.hsv.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], v: match[3] };
+      }
+      match = matchers.hsva.exec(color);
+      if (match) {
+          return { h: match[1], s: match[2], v: match[3], a: match[4] };
+      }
+      match = matchers.hex8.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1]),
+              g: parseIntFromHex(match[2]),
+              b: parseIntFromHex(match[3]),
+              a: convertHexToDecimal(match[4]),
+              format: named ? 'name' : 'hex8',
+          };
+      }
+      match = matchers.hex6.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1]),
+              g: parseIntFromHex(match[2]),
+              b: parseIntFromHex(match[3]),
+              format: named ? 'name' : 'hex',
+          };
+      }
+      match = matchers.hex4.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1] + match[1]),
+              g: parseIntFromHex(match[2] + match[2]),
+              b: parseIntFromHex(match[3] + match[3]),
+              a: convertHexToDecimal(match[4] + match[4]),
+              format: named ? 'name' : 'hex8',
+          };
+      }
+      match = matchers.hex3.exec(color);
+      if (match) {
+          return {
+              r: parseIntFromHex(match[1] + match[1]),
+              g: parseIntFromHex(match[2] + match[2]),
+              b: parseIntFromHex(match[3] + match[3]),
+              format: named ? 'name' : 'hex',
+          };
+      }
+      return false;
+  }
+  /**
+   * Check to see if it looks like a CSS unit
+   * (see `matchers` above for definition).
+   */
+  function isValidCSSUnit(color) {
+      return Boolean(matchers.CSS_UNIT.exec(String(color)));
+  }
+
+  var hueStep = 2; // 色相阶梯
+
+  var saturationStep = 0.16; // 饱和度阶梯，浅色部分
+
+  var saturationStep2 = 0.05; // 饱和度阶梯，深色部分
+
+  var brightnessStep1 = 0.05; // 亮度阶梯，浅色部分
+
+  var brightnessStep2 = 0.15; // 亮度阶梯，深色部分
+
+  var lightColorCount = 5; // 浅色数量，主色上
+
+  var darkColorCount = 4; // 深色数量，主色下
+  // 暗色主题颜色映射关系表
+
+  var darkColorMap = [{
+    index: 7,
+    opacity: 0.15
+  }, {
+    index: 6,
+    opacity: 0.25
+  }, {
+    index: 5,
+    opacity: 0.3
+  }, {
+    index: 5,
+    opacity: 0.45
+  }, {
+    index: 5,
+    opacity: 0.65
+  }, {
+    index: 5,
+    opacity: 0.85
+  }, {
+    index: 4,
+    opacity: 0.9
+  }, {
+    index: 3,
+    opacity: 0.95
+  }, {
+    index: 2,
+    opacity: 0.97
+  }, {
+    index: 1,
+    opacity: 0.98
+  }]; // Wrapper function ported from TinyColor.prototype.toHsv
+  // Keep it here because of `hsv.h * 360`
+
+  function toHsv(_ref) {
+    var r = _ref.r,
+        g = _ref.g,
+        b = _ref.b;
+    var hsv = rgbToHsv(r, g, b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v
+    };
+  } // Wrapper function ported from TinyColor.prototype.toHexString
+  // Keep it here because of the prefix `#`
+
+
+  function toHex(_ref2) {
+    var r = _ref2.r,
+        g = _ref2.g,
+        b = _ref2.b;
+    return "#".concat(rgbToHex(r, g, b, false));
+  } // Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
+  // Amount in range [0, 1]
+  // Assume color1 & color2 has no alpha, since the following src code did so.
+
+
+  function mix(rgb1, rgb2, amount) {
+    var p = amount / 100;
+    var rgb = {
+      r: (rgb2.r - rgb1.r) * p + rgb1.r,
+      g: (rgb2.g - rgb1.g) * p + rgb1.g,
+      b: (rgb2.b - rgb1.b) * p + rgb1.b
+    };
+    return rgb;
+  }
+
+  function getHue(hsv, i, light) {
+    var hue; // 根据色相不同，色相转向不同
+
+    if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
+      hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
+    } else {
+      hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
+    }
+
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+
+    return hue;
+  }
+
+  function getSaturation(hsv, i, light) {
+    // grey color don't change saturation
+    if (hsv.h === 0 && hsv.s === 0) {
+      return hsv.s;
+    }
+
+    var saturation;
+
+    if (light) {
+      saturation = hsv.s - saturationStep * i;
+    } else if (i === darkColorCount) {
+      saturation = hsv.s + saturationStep;
+    } else {
+      saturation = hsv.s + saturationStep2 * i;
+    } // 边界值修正
+
+
+    if (saturation > 1) {
+      saturation = 1;
+    } // 第一格的 s 限制在 0.06-0.1 之间
+
+
+    if (light && i === lightColorCount && saturation > 0.1) {
+      saturation = 0.1;
+    }
+
+    if (saturation < 0.06) {
+      saturation = 0.06;
+    }
+
+    return Number(saturation.toFixed(2));
+  }
+
+  function getValue(hsv, i, light) {
+    var value;
+
+    if (light) {
+      value = hsv.v + brightnessStep1 * i;
+    } else {
+      value = hsv.v - brightnessStep2 * i;
+    }
+
+    if (value > 1) {
+      value = 1;
+    }
+
+    return Number(value.toFixed(2));
+  }
+
+  function generate(color) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var patterns = [];
+    var pColor = inputToRGB(color);
+
+    for (var i = lightColorCount; i > 0; i -= 1) {
+      var hsv = toHsv(pColor);
+      var colorString = toHex(inputToRGB({
+        h: getHue(hsv, i, true),
+        s: getSaturation(hsv, i, true),
+        v: getValue(hsv, i, true)
+      }));
+      patterns.push(colorString);
+    }
+
+    patterns.push(toHex(pColor));
+
+    for (var _i = 1; _i <= darkColorCount; _i += 1) {
+      var _hsv = toHsv(pColor);
+
+      var _colorString = toHex(inputToRGB({
+        h: getHue(_hsv, _i),
+        s: getSaturation(_hsv, _i),
+        v: getValue(_hsv, _i)
+      }));
+
+      patterns.push(_colorString);
+    } // dark theme patterns
+
+
+    if (opts.theme === 'dark') {
+      return darkColorMap.map(function (_ref3) {
+        var index = _ref3.index,
+            opacity = _ref3.opacity;
+        var darkColorString = toHex(mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100));
+        return darkColorString;
+      });
+    }
+
+    return patterns;
+  }
+
+  var presetPrimaryColors = {
+    red: '#F5222D',
+    volcano: '#FA541C',
+    orange: '#FA8C16',
+    gold: '#FAAD14',
+    yellow: '#FADB14',
+    lime: '#A0D911',
+    green: '#52C41A',
+    cyan: '#13C2C2',
+    blue: '#1890FF',
+    geekblue: '#2F54EB',
+    purple: '#722ED1',
+    magenta: '#EB2F96',
+    grey: '#666666'
+  };
+  var presetPalettes = {};
+  var presetDarkPalettes = {};
+  Object.keys(presetPrimaryColors).forEach(function (key) {
+    presetPalettes[key] = generate(presetPrimaryColors[key]);
+    presetPalettes[key].primary = presetPalettes[key][5]; // dark presetPalettes
+
+    presetDarkPalettes[key] = generate(presetPrimaryColors[key], {
+      theme: 'dark',
+      backgroundColor: '#141414'
+    });
+    presetDarkPalettes[key].primary = presetDarkPalettes[key][5];
+  });
+  presetPalettes.red;
+  presetPalettes.volcano;
+  presetPalettes.gold;
+  presetPalettes.orange;
+  presetPalettes.yellow;
+  presetPalettes.lime;
+  presetPalettes.green;
+  presetPalettes.cyan;
+  presetPalettes.blue;
+  presetPalettes.geekblue;
+  presetPalettes.purple;
+  presetPalettes.magenta;
+  presetPalettes.grey;
+
+  function getStyleByBaseColors(theme, baseColors, backgroundColor) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByPalettes(generatePalettes(baseColors, theme, backgroundColor)));
+  }
+  function getStyleByBrandColor(theme, brandColor) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByBrand(brandColor));
+  }
+  function getStyleByVariables(theme, variables) {
+    return (theme === "dark" ? getDarkStyle : getLightStyle)(getCssVariableDefinitionsByVariables(variables));
+  }
+
+  function getLightStyle(cssVariableDefinitions) {
+    return ":root,\n[data-override-theme=\"light\"] {\n".concat(cssVariableDefinitions, "}");
+  }
+
+  function getDarkStyle(cssVariableDefinitions) {
+    return "html[data-theme=\"dark-v2\"],\n[data-override-theme=\"dark-v2\"] {\n".concat(cssVariableDefinitions, "}");
+  }
+
+  function getCssVariableDefinitionsByPalettes(palettes) {
+    return Object.entries(palettes).flatMap(_ref => {
+      var [colorName, palette] = _ref;
+      ensureBaseColorName(colorName);
+      return palette.map((color, index) => "  --palette-".concat(colorName, "-").concat(index + 1, ": ").concat(color, ";")) // Concat an empty string to make a double-line-break for each group of color name.
+      .concat("");
+    }).join("\n");
+  }
+
+  function generatePalettes(baseColors, theme, backgroundColor) {
+    return Object.fromEntries(Object.entries(baseColors).map(_ref2 => {
+      var [colorName, baseColor] = _ref2;
+      return [colorName, generate(baseColor, theme === "dark" ? {
+        theme,
+        backgroundColor
+      } : undefined)];
+    }));
+  }
+
+  function getCssVariableDefinitionsByBrand(color) {
+    if (typeof color === "string") {
+      return "  --color-brand: ".concat(color, ";\n");
+    }
+
+    return ["  --color-brand: ".concat(color.default, ";"), "  --color-brand-hover: ".concat(color.hover, ";"), "  --color-brand-active: ".concat(color.active, ";"), ""].join("\n");
+  }
+
+  function getCssVariableDefinitionsByVariables(variables) {
+    return Object.entries(variables).map(_ref3 => {
+      var [name, color] = _ref3;
+      ensureCssVariableName(name);
+      return "  ".concat(name, ": ").concat(color, ";");
+    }).concat("").join("\n");
+  }
+
+  function ensureCssVariableName(name) {
+    if (!/^--[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(name)) {
+      throw new Error("Invalid css variable name: ".concat(JSON.stringify(name)));
+    }
+  }
+
+  function ensureBaseColorName(name) {
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) {
+      throw new Error("Invalid base color name: ".concat(JSON.stringify(name)));
+    }
+  }
+
+  function applyColorTheme(options) {
+    var style = [];
+    var themes = ["light", "dark"];
+    themes.forEach(theme => {
+      if (options[theme]) {
+        switch (options.type) {
+          case "brandColor":
+            style.push(getStyleByBrandColor(theme, options[theme]));
+            break;
+
+          case "baseColors":
+            style.push(getStyleByBaseColors(theme, options[theme], options.backgroundColor));
+            break;
+
+          case "variables":
+            style.push(getStyleByVariables(theme, options[theme]));
+            break;
+        }
+      }
+    });
+
+    if (style.length > 0) {
+      var element = document.createElement("style");
+      element.textContent = style.join("\n\n");
+      document.head.appendChild(element);
+      return () => {
+        element.remove();
+      };
+    }
+  }
+
   class Kernel {
     constructor() {
       _defineProperty__default["default"](this, "mountPoints", void 0);
@@ -6238,6 +7143,8 @@
       var _this = this;
 
       return _asyncToGenerator__default["default"](function* () {
+        var _this$bootstrapData$s, _this$bootstrapData$s2;
+
         _this.mountPoints = mountPoints;
         yield Promise.all([_this.loadCheckLogin(), _this.loadMicroApps()]);
 
@@ -6245,6 +7152,8 @@
           throw new Error("No storyboard were found.");
         }
 
+        generateColorTheme((_this$bootstrapData$s = _this.bootstrapData.settings) === null || _this$bootstrapData$s === void 0 ? void 0 : (_this$bootstrapData$s2 = _this$bootstrapData$s.misc) === null || _this$bootstrapData$s2 === void 0 ? void 0 : _this$bootstrapData$s2.theme);
+
         if (isLoggedIn()) {
           _this.loadSharedData();
         }
@@ -6799,9 +7708,9 @@
     }
 
     getFeatureFlags() {
-      var _this$bootstrapData, _this$bootstrapData$s;
+      var _this$bootstrapData, _this$bootstrapData$s3;
 
-      return Object.assign({}, (_this$bootstrapData = this.bootstrapData) === null || _this$bootstrapData === void 0 ? void 0 : (_this$bootstrapData$s = _this$bootstrapData.settings) === null || _this$bootstrapData$s === void 0 ? void 0 : _this$bootstrapData$s.featureFlags);
+      return Object.assign({}, (_this$bootstrapData = this.bootstrapData) === null || _this$bootstrapData === void 0 ? void 0 : (_this$bootstrapData$s3 = _this$bootstrapData.settings) === null || _this$bootstrapData$s3 === void 0 ? void 0 : _this$bootstrapData$s3.featureFlags);
     }
 
     getStandaloneMenus(menuId) {
@@ -6870,6 +7779,24 @@
     return brickUtils.loadScript(src, window.PUBLIC_ROOT);
   }
 
+  function generateColorTheme(theme) {
+    if (!theme) {
+      return;
+    } else if (theme.brandColor) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "brandColor"
+      }, theme.brandColor));
+    } else if (theme.baseColors) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "baseColors"
+      }, theme.baseColors));
+    } else if (theme.variables) {
+      applyColorTheme(_objectSpread__default["default"]({
+        type: "variables"
+      }, theme.variables));
+    }
+  }
+
   /*! (c) Andrea Giammarchi - ISC */
   var self = {};
 
@@ -9184,15 +10111,25 @@
 
     if (useMocks) mocks = _objectSpread__default["default"](_objectSpread__default["default"]({}, useMocks), {}, {
       mockList: (_useMocks$mockList = useMocks.mockList) === null || _useMocks$mockList === void 0 ? void 0 : _useMocks$mockList.map(item => _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
-        uri: item.uri.replace(/(easyops\.api\.)(.+)(@\d+\.\d+\.\d+(?=\/))(.+)/, (_match, p1, p2, _p3, p4) => {
-          return "(".concat(p1, ")?").concat(p2, "(@\\d+\\.\\d+\\.\\d+)?").concat(p4, "$");
-        }).replace(/:\w+/g, "[\\w|-]+")
+        uri: item.uri.replace(/(easyops\.api\.)(.+?)\/(.+)/, (_match, p1, p2, p3) => {
+          return "(".concat(p1, ")?").concat(p2, "(@\\d+\\.\\d+\\.\\d+)?/").concat(p3, "$");
+        }).replace(/:\w+/g, "([^/]+)")
       }))
     });
   }
-  var getMockId = requestUrl => {
-    if (mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl))) return mocks.mockId;
-    return undefined;
+  var getMockInfo = requestUrl => {
+    var item = mocks.mockList.find(item => new RegExp(item.uri).test(requestUrl));
+
+    if (item) {
+      return {
+        url: requestUrl.replace(/(api\/gateway\/.+?)(@\d+\.\d+\.\d+)?\/(.+)/, (_match, p1, _p2, p3) => {
+          return "".concat(p1, "/").concat(p3);
+        }).replace(/(api\/gateway)/, "api/gateway/mock_server.proxy.".concat(mocks.mockId)),
+        mockId: mocks.mockId
+      };
+    }
+
+    return;
   };
 
   class Router {
@@ -9574,7 +10511,10 @@
             portal.length > 0 && mountTree(portal, mountPoints.portal);
             afterMountTree(mountPoints.main);
             afterMountTree(mountPoints.portal);
-            afterMountTree(mountPoints.bg);
+            afterMountTree(mountPoints.bg); // Scroll to top after each rendering.
+            // See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md
+
+            window.scrollTo(0, 0);
 
             if (!failed) {
               _this3.locationContext.handlePageLoad();
@@ -9584,11 +10524,8 @@
               _this3.locationContext.resolver.scheduleRefreshing();
 
               _this3.locationContext.handleMessage();
-            } // Scroll to top after each rendering.
-            // See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md
-
+            }
 
-            window.scrollTo(0, 0);
             pageTracker === null || pageTracker === void 0 ? void 0 : pageTracker(locationContext.getCurrentMatch().path); // analytics page_view event
 
             easyopsAnalytics.userAnalytics.event("page_view", _objectSpread__default["default"]({
@@ -10886,9 +11823,289 @@
   };
   var defaultLocale = localeValues;
 
-  var emptyImage = "empty-image.8e18d87fea570ef0.png";
+  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+  var _ref$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "5.718%",
+    y1: "4.311%",
+    x2: "83.05%",
+    y2: "88.915%",
+    id: "empty-image_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#D4D8E4",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#A9B0C4",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "0%",
+    y1: "11.08%",
+    x2: "80.548%",
+    y2: "107.704%",
+    id: "empty-image_svg__d"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#C2C7DA",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#8F96B3",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M23.672 23.607h2.492a4 4 0 0 1 4 4v2.491a4 4 0 0 1-4 4h-2.492a4 4 0 0 1-4-4v-2.491a4 4 0 0 1 4-4z",
+    id: "empty-image_svg__c"
+  }), /*#__PURE__*/React__namespace.createElement("filter", {
+    x: "-57.2%",
+    y: "-47.7%",
+    width: "233.4%",
+    height: "233.4%",
+    filterUnits: "objectBoundingBox",
+    id: "empty-image_svg__b"
+  }, /*#__PURE__*/React__namespace.createElement("feOffset", {
+    dx: 1,
+    dy: 2,
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
+    stdDeviation: 2,
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feComposite", {
+    in: "shadowBlurOuter1",
+    in2: "SourceAlpha",
+    operator: "out",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0",
+    in: "shadowBlurOuter1"
+  })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "41.823%",
+    y1: "24.795%",
+    x2: "8.813%",
+    y2: "86.427%",
+    id: "empty-image_svg__g"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#CCD0DD",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#9DA3B9",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M37.311 12.459a4 4 0 0 1 4 4v3.419l-7.418-7.419h3.418z",
+    id: "empty-image_svg__f"
+  }), /*#__PURE__*/React__namespace.createElement("filter", {
+    x: "-94.4%",
+    y: "-121.3%",
+    width: "288.7%",
+    height: "288.7%",
+    filterUnits: "objectBoundingBox",
+    id: "empty-image_svg__e"
+  }, /*#__PURE__*/React__namespace.createElement("feOffset", {
+    dy: -2,
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
+    stdDeviation: 2,
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0",
+    in: "shadowBlurOuter1"
+  })));
+
+  var _ref2$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M39.682 33.967H10.81a2.8 2.8 0 0 0-1.94.782l-5.197 4.999v6.98a5.6 5.6 0 0 0 5.6 5.6H41.22a5.6 5.6 0 0 0 5.6-5.6v-6.98l-5.196-4.999a2.8 2.8 0 0 0-1.942-.782z",
+    fill: "#A6AAC3"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M33.893 12.459l7.418 7.419v22.568a2.8 2.8 0 0 1-2.8 2.8h-26.53a2.8 2.8 0 0 1-2.8-2.8V18.459a6 6 0 0 1 6-6h18.712z",
+    fill: "url(#empty-image_svg__a)"
+  }), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "#000",
+    filter: "url(#empty-image_svg__b)",
+    xlinkHref: "#empty-image_svg__c"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#FFF",
+    d: "M26.164 24.107c.966 0 1.841.391 2.475 1.025a3.489 3.489 0 0 1 1.025 2.475h0v2.491c0 .967-.392 1.842-1.025 2.475a3.489 3.489 0 0 1-2.475 1.025h0-2.492a3.489 3.489 0 0 1-2.475-1.025 3.489 3.489 0 0 1-1.025-2.475h0v-2.491c0-.967.392-1.842 1.025-2.475a3.489 3.489 0 0 1 2.475-1.025h0z",
+    strokeLinejoin: "square",
+    fill: "url(#empty-image_svg__d)"
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "rotate(180 37.602 16.168)"
+  }, /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "#000",
+    filter: "url(#empty-image_svg__e)",
+    xlinkHref: "#empty-image_svg__f"
+  }), /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "url(#empty-image_svg__g)",
+    xlinkHref: "#empty-image_svg__f"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M54.164 27.541c.253 0 .459.205.459.459v.918h.918a.459.459 0 1 1 0 .918h-.918v.918a.459.459 0 0 1-.918 0v-.918h-.918a.459.459 0 0 1 0-.918h.918V28c0-.254.205-.459.459-.459zM1.377 20.197c.19 0 .344.154.344.344v.574h.574a.459.459 0 1 1 0 .918h-.574v.574a.344.344 0 0 1-.688 0l-.001-.574H.459a.459.459 0 0 1 0-.918h.573v-.574c0-.19.155-.344.345-.344z",
+    fill: "#D6D8E4",
+    opacity: 0.3
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M24.787 43.53h.014c7.087.143 9.817-3.834 12.785-4.046l.19-.008h9.044v10.052a2.8 2.8 0 0 1-2.63 2.795l-.17.005H6.472l-.17-.005a2.8 2.8 0 0 1-2.63-2.795V39.475h8.126l.144-.004c2.485.004 5.214 3.898 12.83 4.06l.015-.002z",
+    fill: "#D6D8E4"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M13.77 2.2s2.308-.555 2.962-2.2c.943 1.35 1.429 1.933 2.547 2.189-1.522.453-2.183.963-2.704 2.401-.598-1.695-1.142-1.914-2.805-2.39",
+    fill: "#D6D8E4",
+    opacity: 0.5
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M41.311 6.64S47.464 5.194 49.21.917c2.514 3.508 3.81 5.025 6.791 5.691-4.059 1.18-5.822 2.503-7.21 6.243-1.594-4.406-3.045-4.976-7.479-6.213",
+    fill: "#D6D8E4",
+    opacity: 0.8
+  }));
 
-  var bigEmptyImage = "big-empty-image.397ff6359f4066d8.png";
+  function SvgEmptyImage(props) {
+    return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+      width: 56,
+      height: 53,
+      viewBox: "0 0 56 53",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink"
+    }, props), _ref$1, _ref2$1);
+  }
+
+  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+  var _ref = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "5.718%",
+    y1: "4.311%",
+    x2: "83.05%",
+    y2: "88.915%",
+    id: "big-empty-image_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#D4D8E4",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#A9B0C4",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "0%",
+    y1: "11.08%",
+    x2: "80.548%",
+    y2: "107.704%",
+    id: "big-empty-image_svg__d"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#C2C7DA",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#8F96B3",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M34 36h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-8a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z",
+    id: "big-empty-image_svg__c"
+  }), /*#__PURE__*/React__namespace.createElement("filter", {
+    x: "-37.5%",
+    y: "-31.3%",
+    width: "187.5%",
+    height: "187.5%",
+    filterUnits: "objectBoundingBox",
+    id: "big-empty-image_svg__b"
+  }, /*#__PURE__*/React__namespace.createElement("feOffset", {
+    dx: 1,
+    dy: 2,
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
+    stdDeviation: 2,
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feComposite", {
+    in: "shadowBlurOuter1",
+    in2: "SourceAlpha",
+    operator: "out",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0",
+    in: "shadowBlurOuter1"
+  })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    x1: "41.823%",
+    y1: "24.795%",
+    x2: "8.813%",
+    y2: "86.427%",
+    id: "big-empty-image_svg__g"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#CCD0DD",
+    offset: "0%"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#9DA3B9",
+    offset: "100%"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M59 19a4 4 0 0 1 4 4v7.314L51.686 19H59z",
+    id: "big-empty-image_svg__f"
+  }), /*#__PURE__*/React__namespace.createElement("filter", {
+    x: "-61.9%",
+    y: "-79.5%",
+    width: "223.7%",
+    height: "223.7%",
+    filterUnits: "objectBoundingBox",
+    id: "big-empty-image_svg__e"
+  }, /*#__PURE__*/React__namespace.createElement("feOffset", {
+    dy: -2,
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feGaussianBlur", {
+    stdDeviation: 2,
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/React__namespace.createElement("feColorMatrix", {
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0",
+    in: "shadowBlurOuter1"
+  })));
+
+  var _ref2 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M61.108 51.8H15.892a2.8 2.8 0 0 0-1.941.782L5.6 60.615V74.2a5.6 5.6 0 0 0 5.6 5.6h54.6a5.6 5.6 0 0 0 5.6-5.6V60.615l-8.35-8.033a2.8 2.8 0 0 0-1.942-.782z",
+    fill: "#A6AAC3"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M51.686 19L63 30.314V66.2a2.8 2.8 0 0 1-2.8 2.8H16.8a2.8 2.8 0 0 1-2.8-2.8V25a6 6 0 0 1 6-6h31.686z",
+    fill: "url(#big-empty-image_svg__a)"
+  }), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "#000",
+    filter: "url(#big-empty-image_svg__b)",
+    xlinkHref: "#big-empty-image_svg__c"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#FFF",
+    d: "M42 36.5c.966 0 1.841.392 2.475 1.025A3.489 3.489 0 0 1 45.5 40h0v8c0 .966-.392 1.841-1.025 2.475A3.489 3.489 0 0 1 42 51.5h0-8a3.489 3.489 0 0 1-2.475-1.025A3.489 3.489 0 0 1 30.5 48h0v-8c0-.966.392-1.841 1.025-2.475A3.489 3.489 0 0 1 34 36.5h0z",
+    strokeLinejoin: "square",
+    fill: "url(#big-empty-image_svg__d)"
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "rotate(180 57.343 24.657)"
+  }, /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "#000",
+    filter: "url(#big-empty-image_svg__e)",
+    xlinkHref: "#big-empty-image_svg__f"
+  }), /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "url(#big-empty-image_svg__g)",
+    xlinkHref: "#big-empty-image_svg__f"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M82.6 42a.7.7 0 0 1 .7.7v1.399l1.4.001a.7.7 0 0 1 0 1.4l-1.4-.001V46.9a.7.7 0 0 1-1.4 0v-1.401l-1.4.001a.7.7 0 0 1 0-1.4l1.4-.001V42.7a.7.7 0 0 1 .7-.7zM2.1 30.8c.29 0 .525.235.525.525l-.001.874.876.001a.7.7 0 0 1 0 1.4h-.876l.001.875a.525.525 0 1 1-1.05 0l-.001-.875H.7a.7.7 0 0 1 0-1.4l.874-.001.001-.874c0-.29.235-.525.525-.525z",
+    fill: "#D6D8E4",
+    opacity: 0.3
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.4 79.8l-.17-.005A2.8 2.8 0 0 1 5.6 77V60.2h12.393l.175-.006c3.802-.04 7.95 5.943 19.61 6.19l.022-.002.022.002c10.856.218 15.009-5.902 19.558-6.175l.227-.009H71.4V77a2.8 2.8 0 0 1-2.63 2.795l-.17.005H8.4z",
+    fill: "#D6D8E4"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M21 3.356S24.518 2.509 25.516 0c1.438 2.057 2.18 2.947 3.884 3.338-2.321.692-3.33 1.468-4.123 3.662-.912-2.584-1.741-2.919-4.277-3.644",
+    fill: "#D6D8E4",
+    opacity: 0.5
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M63 10.125S72.382 7.923 75.044 1.4c3.834 5.35 5.81 7.663 10.356 8.68-6.19 1.797-8.878 3.816-10.995 9.52-2.43-6.72-4.643-7.59-11.405-9.475",
+    fill: "#D6D8E4",
+    opacity: 0.8
+  }));
+
+  function SvgBigEmptyImage(props) {
+    return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+      width: 86,
+      height: 80,
+      viewBox: "0 0 86 80",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink"
+    }, props), _ref, _ref2);
+  }
 
   /**
    * 用于展示空数据的 React 组件。
@@ -10898,29 +12115,25 @@
 
     var illustration = React.useMemo(() => props.illustration && illustrations.getIllustration(props.illustration), [props.illustration]);
 
-    var _emptyImage = props.useBigEmptyImage ? bigEmptyImage : emptyImage;
+    var _emptyImage = props.useBigEmptyImage ? SvgBigEmptyImage : SvgEmptyImage;
 
-    var image = props.illustration ? illustration : getImageUrl(_emptyImage);
+    var image = props.illustration ? illustration : /*#__PURE__*/React__default["default"].createElement(_emptyImage);
     var imageStyle = (_props$imageStyle = props.imageStyle) !== null && _props$imageStyle !== void 0 ? _props$imageStyle : props.useBigEmptyImage ? undefined : {
       height: "60px"
     };
     return /*#__PURE__*/React__default["default"].createElement(antd.Empty, {
       image: image,
       imageStyle: imageStyle,
-      description: props.description
+      description: props.description,
+      style: {
+        color: "var(--text-color-secondary)"
+      }
     });
   }
-
-  function getImageUrl(url) {
-    var _window$CORE_ROOT;
-
-    return "".concat((_window$CORE_ROOT = window.CORE_ROOT) !== null && _window$CORE_ROOT !== void 0 ? _window$CORE_ROOT : "", "assets/").concat(url);
-  }
   /**
    * 调用后获得一个默认的展示空数据的 React 组件。
    */
 
-
   function renderEasyopsEmpty() {
     return /*#__PURE__*/React__default["default"].createElement(EasyopsEmpty, null);
   }
@@ -11418,7 +12631,7 @@
   exports.event = event;
   exports.getAuth = getAuth;
   exports.getHistory = getHistory;
-  exports.getMockId = getMockId;
+  exports.getMockInfo = getMockInfo;
   exports.getRuntime = getRuntime;
   exports.handleHttpError = handleHttpError;
   exports.httpErrorToString = httpErrorToString;