@vtx/modals2 5.0.2 → 5.0.4

package/lib/_components/index.js

@@ -0,0 +1,22 @@
+export { default as VmBarCharts } from "./vm-bar-charts";
+export { default as VmCalendar, VmCalendarInner, VmCalendarPercent } from "./vm-calendar";
+export { default as VmCardStatistics } from "./vm-card-statistics";
+export { default as VmCustom } from "./vm-custom";
+export { default as VmEmpty } from "./vm-empty";
+export { default as VmExtraTab } from "./vm-extra-tab";
+export { default as VmFactor } from "./vm-factor";
+export { default as VmFactorList } from "./vm-factor-list";
+export { default as VmFilter } from "./vm-filter";
+export { default as VmIframeModal } from "./vm-iframe-modal";
+export { default as VmInfoCollection } from "./vm-info-collection";
+export { default as VmLineCharts } from "./vm-line-charts";
+export { default as VmMap } from "./vm-map";
+export { default as VmPieCharts } from "./vm-pie-charts";
+export { default as VmProgress } from "./vm-progress";
+export { default as VmRepairMaintain } from "./vm-repair-maintain";
+export { default as VmTable } from "./vm-table";
+export { default as VmTabs } from "./vm-tabs";
+export { default as VmTag } from "./vm-tag";
+export { default as VmTitle } from "./vm-title";
+export { default as VmVideo } from "./vm-video";
+export { default as VmWrapper } from "./vm-wrapper";

package/lib/_components/vm-bar-charts/index.js

@@ -0,0 +1,181 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Row, Spin } from 'antd';
+import * as echarts from 'echarts';
+import ReactEcharts from 'echarts-for-react';
+import useSettings from "../../_hooks/useSettings";
+import { jsx as _jsx } from "react/jsx-runtime";
+var BarCharts = function BarCharts(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    xAxis = _ref.xAxis,
+    _ref$yAxisList = _ref.yAxisList,
+    yAxisList = _ref$yAxisList === void 0 ? [] : _ref$yAxisList,
+    _ref$lineList = _ref.lineList,
+    lineList = _ref$lineList === void 0 ? [] : _ref$lineList,
+    loading = _ref.loading,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$unit = _ref.unit,
+    unit = _ref$unit === void 0 ? '' : _ref$unit,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$gridOptions = _ref.gridOptions,
+    gridOptions = _ref$gridOptions === void 0 ? {} : _ref$gridOptions;
+  var lineColors = ['#1FB64D'];
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    isDark = _useSettings.isDark,
+    chartLineColor = _useSettings.chartLineColor;
+  var geekblue = ['rgba(22, 119, 255, 1)', 'rgba(22, 119, 255, 0)'];
+  var green = ['rgba(15, 185, 100, 1)', 'rgba(15, 185, 100, 0)'];
+  var blue = ['rgba(25, 201, 255, 1)', 'rgba(25, 201, 255, 0)'];
+  if (isDark) {
+    geekblue = ['rgba(0, 157, 255, 1)', 'rgba(0, 157, 255, 0)'];
+    green = ['rgba(19, 249, 122, 1)', 'rgba(19, 249, 122, 0)'];
+    blue = ['rgba(49, 253, 248, 1)', 'rgba(49, 253, 248, 0)'];
+  }
+  var barColorsMap = {
+    geekblue: geekblue,
+    green: green,
+    blue: blue
+  };
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: function valueFormatter(value) {
+        var _findUnit;
+        var findUnit = yAxisList === null || yAxisList === void 0 ? void 0 : yAxisList[0];
+        if ((yAxisList === null || yAxisList === void 0 ? void 0 : yAxisList.length) > 1) {
+          findUnit = yAxisList.find(function (item) {
+            return item.key && String(value).includes(item.key);
+          });
+        }
+        return "".concat(value).concat(((_findUnit = findUnit) === null || _findUnit === void 0 ? void 0 : _findUnit.unit) || unit);
+      },
+      position: function position(point, _params, _dom, _rect, size) {
+        // 固定在顶部
+        var leftSize = point[0] - size.contentSize[0];
+        return [point[0] + size.contentSize[0] > size.viewSize[0] ? leftSize < 0 ? '35%' : leftSize : point[0], '0%'];
+      }
+    },
+    legend: {
+      right: 'center',
+      itemGap: 8,
+      itemHeight: 8,
+      itemWidth: 8,
+      textStyle: {
+        color: chartFontColor
+      },
+      show: showLegend
+    },
+    grid: _objectSpread({
+      left: 50,
+      right: 50,
+      bottom: 20
+    }, gridOptions),
+    xAxis: {
+      type: 'category',
+      data: xAxis,
+      axisPointer: {
+        type: 'shadow'
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: chartFontColor
+      },
+      axisLine: {
+        show: false
+      }
+    },
+    yAxis: yAxisList.map(function (item, index) {
+      return {
+        type: 'value',
+        name: item.name,
+        // min: 0,
+        nameTextStyle: {
+          color: chartFontColor,
+          padding: index === 0 ? [0, 30, 0, 0] : [0, 0, 0, 30]
+        },
+        splitNumber: 5,
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: chartFontColor
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            color: chartLineColor
+          }
+        }
+      };
+    }),
+    series: [].concat(_toConsumableArray(dataList.map(function (item) {
+      var colors = barColorsMap[item.color || 'geekblue'];
+      return {
+        name: item.name,
+        type: 'bar',
+        data: item.data,
+        yAxisIndex: item.yAxisIndex || 0,
+        barWidth: 18,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+            offset: 1,
+            color: colors[0]
+          }, {
+            offset: 0,
+            color: colors[1]
+          }])
+        }
+      };
+    })), _toConsumableArray(lineList.map(function (item, index) {
+      var color = item.color || lineColors[index % lineColors.length];
+      return _objectSpread({
+        name: item.name,
+        type: 'line',
+        data: item.data,
+        barWidth: 18,
+        yAxisIndex: item.yAxisIndex || 0,
+        symbolSize: 4,
+        lineStyle: {
+          color: color
+        },
+        itemStyle: {
+          color: color
+        },
+        smooth: true
+      }, item);
+    })))
+  };
+  return loading ? /*#__PURE__*/_jsx(Row, {
+    style: {
+      height: height
+    },
+    align: 'middle',
+    justify: 'center',
+    children: /*#__PURE__*/_jsx(Spin, {})
+  }) : /*#__PURE__*/_jsx(ReactEcharts, {
+    option: option,
+    notMerge: true,
+    lazyUpdate: true,
+    style: {
+      height: height || '100%',
+      width: '100%'
+    }
+  });
+};
+export default BarCharts;

package/lib/_components/vm-calendar/index.js

@@ -0,0 +1,117 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["style", "className", "dateCellRender"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { Calendar, Progress } from 'antd';
+import locale from 'antd/lib/calendar/locale/zh_CN.js';
+import classnames from 'classnames';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import useSettings from "../../_hooks/useSettings";
+import "./style";
+dayjs.locale('zh-cn');
+import BlockA from "../../_imgs/block_alarm.png";
+import BlockN from "../../_imgs/block_normal.png";
+import { transformRgb } from "../../_util";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var prefix = 'vm-calendar';
+function VmCalendar(props) {
+  var _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    className = props.className,
+    dateCellRender = props.dateCellRender,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames("".concat(prefix), className),
+    style: _objectSpread({}, style),
+    children: /*#__PURE__*/_jsx(Calendar, _objectSpread({
+      locale: locale,
+      headerRender: function headerRender() {
+        return null;
+      },
+      dateCellRender: dateCellRender
+    }, rest))
+  });
+}
+export default VmCalendar;
+export function VmCalendarPercent(_ref) {
+  var percent = _ref.percent,
+    color = _ref.color;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var colorMap = {
+    blue: '#1677FF',
+    red: '#F5222D',
+    green: '#0FB964',
+    yellow: '#FFAA00',
+    gray: '#595959'
+  };
+  if (isDark) {
+    colorMap.blue = '#009DFF';
+    colorMap.red = '#FF5861';
+    colorMap.gray = '#FFFFFF';
+  }
+  var _color = colorMap[color];
+  return /*#__PURE__*/_jsxs("div", {
+    className: 'vm-calendar-percent',
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        width: 40
+      },
+      children: /*#__PURE__*/_jsx(Progress, {
+        percent: percent,
+        strokeColor: _color,
+        trailColor: transformRgb(_color, 0.1),
+        showInfo: false,
+        strokeWidth: 4
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        color: color === 'gray' && isDark ? '#ADADAD' : _color
+      },
+      children: [percent, "%"]
+    })]
+  });
+}
+export function VmCalendarInner(props) {
+  var _useSettings2 = useSettings(),
+    isDark = _useSettings2.isDark;
+  var _props$style2 = props.style,
+    style = _props$style2 === void 0 ? {} : _props$style2,
+    img = props.img,
+    _props$imgType = props.imgType,
+    imgType = _props$imgType === void 0 ? 'normal' : _props$imgType,
+    _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'blue' : _props$type,
+    _props$isAlarm = props.isAlarm,
+    isAlarm = _props$isAlarm === void 0 ? false : _props$isAlarm,
+    onMouseOut = props.onMouseOut,
+    onMouseOver = props.onMouseOver,
+    _props$content = props.content,
+    content = _props$content === void 0 ? '' : _props$content;
+  var innerImg = {
+    normal: BlockN,
+    alarm: BlockA
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "vm-calendar-head-item ".concat(isDark ? 'dark' : '', " ").concat(type),
+    style: _objectSpread({}, style),
+    onMouseOut: onMouseOut && onMouseOut,
+    onMouseOver: onMouseOver && onMouseOver,
+    children: [/*#__PURE__*/_jsx("img", {
+      src: img || innerImg[imgType]
+    }), content ? content : /*#__PURE__*/_jsx("div", {
+      style: isAlarm ? {
+        color: '#FF5861'
+      } : {},
+      children: value
+    })]
+  });
+}

package/lib/_components/vm-calendar/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/lib/_components/vm-calendar/style/index.less

@@ -0,0 +1,136 @@
+@import '../../../style/index.less';
+
+.vm-calendar {
+  width: 100%;
+  height: 100%;
+
+  .ant-picker-calendar,
+  .ant-picker-calendar-full {
+    background-color: var(--vm-calendar-bg-color) !important;
+    border: none !important;
+
+    .ant-picker-panel {
+      background: var(--vm-calendar-bg-color) !important;
+      padding-top: 8px;
+    }
+    .ant-picker-calendar-date-today .ant-picker-calendar-date-value {
+      color: var(--vm-calendar-cell-font-color);
+    }
+    .ant-picker-body {
+      padding: 0 !important;
+    }
+
+    .ant-picker-content th {
+      color: var(--vm-calendar-cell-font-color);
+    }
+
+    .ant-picker-panel .ant-picker-calendar-date {
+      color: var(--vm-calendar-cell-font-color);
+      border-top: 2px solid var(--vm-calendar-cell-border-color) !important;
+      background: transparent !important;
+    }
+
+    .ant-picker-panel .ant-picker-cell:hover .ant-picker-calendar-date {
+      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
+    }
+
+    .ant-picker-cell .ant-picker-cell-in-view .ant-picker-cell-today {
+      border-top: none !important;
+    }
+
+    .ant-picker-cell .ant-picker-cell-in-view .ant-picker-cell-selected {
+      border-top: none !important;
+      background: var(--vm-calendar-bg-color) !important;
+    }
+
+    .ant-picker-calendar-full
+      .ant-picker-panel
+      .ant-picker-calendar-date-today {
+      color: var(--vm-calendar-cell-active-border-color);
+      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
+    }
+
+    .ant-picker-calendar-date-today {
+      background: transparent !important;
+      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
+    }
+    .ant-picker-calendar-full
+      .ant-picker-panel
+      .ant-picker-cell-selected
+      .ant-picker-calendar-date {
+      background: transparent !important;
+    }
+  }
+}
+
+.vm-calendar-percent {
+  position: absolute;
+  top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-calendar-head-item {
+  --blue-bg: rgba(22, 119, 255, 0.1);
+  --green-bg: rgba(15, 185, 100, 0.1);
+  --yellow-bg: rgba(255, 170, 0, 0.2);
+  --cyan-bg: rgba(15, 185, 100, 0.1);
+  --red-bg: rgba(245, 34, 45, 0.1);
+  --gray-bg: rgba(119, 119, 119, 0.1);
+  --color: #1f1f1f;
+
+  &.dark {
+    --blue-bg: rgba(89, 157, 255, 0.2);
+    --green-bg: rgba(19, 249, 122, 0.2);
+    --yellow-bg: rgba(255, 170, 0, 0.2);
+    --cyan-bg: rgba(0, 252, 246, 0.2);
+    --red-bg: rgba(255, 62, 72, 0.2);
+    --gray-bg: rgba(153, 153, 153, 0.2);
+    --color: #fff;
+  }
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  color: var(--color);
+
+  img {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+  }
+
+  .vm-calendar-common {
+    height: 28px;
+    line-height: 28px;
+    padding: 0 8px;
+    border-radius: 8px;
+  }
+
+  &.blue {
+    .vm-calendar-common;
+    background: var(--blue-bg);
+  }
+  &.green {
+    .vm-calendar-common;
+    background: var(--green-bg);
+  }
+  &.cyan {
+    .vm-calendar-common;
+    background: var(--cyan-bg);
+  }
+  &.yellow {
+    .vm-calendar-common;
+    background: var(--yellow-bg);
+  }
+  &.red {
+    .vm-calendar-common;
+    background: var(--red-bg);
+  }
+  &.gray {
+    .vm-calendar-common;
+    background: var(--gray-bg);
+  }
+}

package/lib/_components/vm-card-statistics/index.js

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import useSettings from "../../_hooks/useSettings";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VmCardStatistics = function VmCardStatistics(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    img = _ref.img,
+    unit = _ref.unit;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      backgroundImage: "url(".concat(img)
+    },
+    className: classNames('vm-car-statistics', {
+      'vm-car-statistics-dark': isDark
+    }),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: 'vm-car-statistics-label',
+      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: 'vm-car-statistics-value',
+        children: value
+      }), /*#__PURE__*/_jsx("span", {
+        className: 'vm-car-statistics-unit',
+        children: unit
+      })]
+    })]
+  });
+};
+export default VmCardStatistics;

package/lib/_components/vm-card-statistics/index.less

@@ -0,0 +1,27 @@
+.vm-car-statistics {
+  width: 208px;
+  height: 84px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+  background-size: 100% 100%;
+  &-label {
+    color: var(--img-text-color);
+  }
+  &-value, &-unit {
+    color: #1f1f1f;
+  }
+  &.vm-car-statistics-dark {
+    .vm-car-statistics-value,.vm-car-statistics-unit {
+      background: linear-gradient(180deg, #ffffff 0%, #119FFB 100%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+  &-value {
+    font-size: 20px;
+    font-weight: bold;
+    margin-right: 4px;
+  }
+}

package/lib/_components/vm-custom/index.js

@@ -0,0 +1,25 @@
+import { getVtxToken } from '@vtx/utils';
+import useSettings from "../../_hooks/useSettings";
+import "./style/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var VmCustom = function VmCustom(_ref) {
+  var id = _ref.id,
+    url = _ref.url;
+  var _useSettings = useSettings(),
+    theme = _useSettings.theme;
+  var _getVtxToken = getVtxToken(),
+    token = _getVtxToken.token,
+    userId = _getVtxToken.userId,
+    tenantId = _getVtxToken.tenantId;
+  var param = (url === null || url === void 0 ? void 0 : url.indexOf('http')) > -1 ? "&userId=".concat(userId, "&tenantId=").concat(tenantId, "&token=").concat(token) : '';
+  return /*#__PURE__*/_jsx("iframe", {
+    src: "".concat(url).concat(id, "&theme=").concat(theme).concat(param),
+    style: {
+      width: '100%',
+      height: 600,
+      border: 'none',
+      overflowY: 'auto'
+    }
+  });
+};
+export default VmCustom;

package/lib/_components/vm-custom/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/lib/_components/vm-custom/style/index.less

@@ -0,0 +1,20 @@
+.button-common {
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 2px;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.vm-button {
+    .button-common();
+    background: var(--button-background-color--default);
+    color: var(--button-text-color--defalut);
+}
+
+.vm-button--active {
+    .button-common();
+    background: var(--button-background-color--active);
+    border: 1px solid #6ff3ff;
+    color: var(--button-text-color--active);
+}