hc-busin-components 1.0.3 → 1.0.4

package/dist/CascaderCluster/index.js

@@ -15,7 +15,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { SearchOutlined } from '@ant-design/icons';
 import { ConfigProvider, Divider, Dropdown, Input, Popover } from 'antd';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ComponentUninstalled from "../ComponentUninstalled";
 import Icon from "../Icon";
 import TextEllipsis from "../TextEllipsis";
@@ -91,6 +91,10 @@ var CascaderCluster = function CascaderCluster(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     currentCluster = _useState12[0],
     setCurrentCluster = _useState12[1];
+  var onClusterChangeRef = useRef(onClusterChange);
+  useEffect(function () {
+    onClusterChangeRef.current = onClusterChange;
+  }, [onClusterChange]);
   var resolvedDataInterface = useMemo(function () {
     if (dataInterfaceProp) return dataInterfaceProp;
     if (services) return buildCascaderClusterDataInterface(space, isBackend, storage, services);
@@ -103,6 +107,9 @@ var CascaderCluster = function CascaderCluster(props) {
     writeFilterCache(storage, isBackend, pathname, params);
     onFilterCacheChange === null || onFilterCacheChange === void 0 || onFilterCacheChange(params);
   }, [storage, isBackend, pathname, onFilterCacheChange]);
+  var emitClusterChange = useCallback(function (clusterName) {
+    onClusterChangeRef.current(clusterName);
+  }, []);
   var getInitCluster = useCallback(function (list, dcData) {
     var cachedClusterName = getCache().clusterName;
     var all = list || [];
@@ -120,43 +127,45 @@ var CascaderCluster = function CascaderCluster(props) {
     var clusterName = cluster.clusterName || '';
     setCurrentCluster(clusterName);
     if (clusterName) {
-      onClusterChange(clusterName);
+      emitClusterChange(clusterName);
     }
     saveCache(_objectSpread(_objectSpread({}, dcData), {}, {
       clusterName: clusterName
     }));
-  }, [getCache, onClusterChange, saveCache]);
-  var fetchClusterList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _resolvedDataInterfac;
-    var params,
-      list,
-      _args = arguments;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          params = _args.length > 0 && _args[0] !== undefined ? _args[0] : currentDatacenter;
-          if (resolvedDataInterface !== null && resolvedDataInterface !== void 0 && (_resolvedDataInterfac = resolvedDataInterface.resource) !== null && _resolvedDataInterfac !== void 0 && _resolvedDataInterfac.service) {
-            _context.next = 3;
-            break;
-          }
-          return _context.abrupt("return");
-        case 3:
-          _context.next = 5;
-          return resolvedDataInterface.resource.service(_objectSpread(_objectSpread({}, resolvedDataInterface.resource.params || {}), {}, {
-            dataCenterId: params === null || params === void 0 ? void 0 : params.dataCenterId,
-            logicalUnitId: params === null || params === void 0 ? void 0 : params.logicalUnitId
-          }));
-        case 5:
-          list = _context.sent;
-          setAllClusters(list);
-          setClusterList(list);
-          getInitCluster(list, params);
-        case 9:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [resolvedDataInterface, currentDatacenter, getInitCluster]);
+  }, [emitClusterChange, getCache, saveCache]);
+  var fetchClusterList = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+      var _resolvedDataInterfac;
+      var list;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (resolvedDataInterface !== null && resolvedDataInterface !== void 0 && (_resolvedDataInterfac = resolvedDataInterface.resource) !== null && _resolvedDataInterfac !== void 0 && _resolvedDataInterfac.service) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.next = 4;
+            return resolvedDataInterface.resource.service(_objectSpread(_objectSpread({}, resolvedDataInterface.resource.params || {}), {}, {
+              dataCenterId: params === null || params === void 0 ? void 0 : params.dataCenterId,
+              logicalUnitId: params === null || params === void 0 ? void 0 : params.logicalUnitId
+            }));
+          case 4:
+            list = _context.sent;
+            setAllClusters(list);
+            setClusterList(list);
+            getInitCluster(list, params);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [resolvedDataInterface, getInitCluster]);
   var getLdcWriteBack = useCallback(function (list) {
     var cache = getCache();
     if (cache.id === '-1') {
@@ -257,7 +266,7 @@ var CascaderCluster = function CascaderCluster(props) {
     if (space === 'cluster') {
       var cluster = String(storage.getSession('clusterName') || '');
       setCurrentCluster(cluster);
-      onClusterChange(cluster);
+      emitClusterChange(cluster);
       setDatacenterList([]);
       setClusterList([]);
       setAllClusters([]);
@@ -269,7 +278,7 @@ var CascaderCluster = function CascaderCluster(props) {
       return;
     }
     fetchDatacenterList();
-  }, [space, datacenters, clusters, compoKey, fetchDatacenterList, getInitDatacenter, onClusterChange, storage]);
+  }, [space, datacenters, clusters, compoKey, fetchDatacenterList, getInitDatacenter, emitClusterChange, storage]);
   useEffect(function () {
     if (!pathname.includes('resourceQuotaCenter')) return;
     var timer = setTimeout(function () {
@@ -331,7 +340,7 @@ var CascaderCluster = function CascaderCluster(props) {
   };
   var handleChangeCluster = function handleChangeCluster(cluster) {
     setCurrentCluster(cluster.clusterName);
-    onClusterChange(cluster.clusterName);
+    emitClusterChange(cluster.clusterName);
     saveCache(_objectSpread(_objectSpread({}, currentDatacenter), {}, {
       clusterName: cluster.clusterName
     }));

package/dist/DateRangePicker/index.d.ts

@@ -13,6 +13,16 @@ export interface TimeRangeInfo {
     timeUnitId?: number;
     id?: number;
 }
+export interface DateRangePickerValue {
+    from: string;
+    to: string;
+    inputValue?: string;
+    diff?: number;
+    sliderValue?: number | null;
+    interval?: number;
+    timeUnitId?: number;
+    id?: number;
+}
 export interface QuickTimeOption {
     id: number;
     value: number;
@@ -21,9 +31,14 @@ export interface QuickTimeOption {
     interval?: number;
     timeUnitId?: number;
 }
+export interface DateRangePickerLocale {
+    recent: React.ReactNode;
+    custom: React.ReactNode;
+    confirm: React.ReactNode;
+}
 export interface DateRangePickerProps {
     onChange?: (timeInfo: TimeRangeInfo) => void;
-    value?: TimeRangeInfo;
+    value?: DateRangePickerValue;
     format?: string;
     placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     quickTimeOptions?: QuickTimeOption[];
@@ -33,6 +48,7 @@ export interface DateRangePickerProps {
     width?: number | string;
     disabled?: boolean;
     flat?: boolean;
+    locale?: Partial<DateRangePickerLocale>;
 }
 declare const DateRangePicker: React.FC<DateRangePickerProps>;
 export default DateRangePicker;

package/dist/DateRangePicker/index.js

@@ -1,9 +1,3 @@
-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 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 _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -14,8 +8,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 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 { CalendarOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, ConfigProvider, DatePicker, Input, Popover, Radio, Slider, Switch } from 'antd';
+import { Button, ConfigProvider, DatePicker, Input, Popover, Segmented, Slider, Switch } from 'antd';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import moment from 'moment';
@@ -24,56 +24,55 @@ import enUS from 'rc-calendar/lib/locale/en_US';
 import zhCN from 'rc-calendar/lib/locale/zh_CN';
 import zhHK from 'rc-calendar/lib/locale/zh_TW';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'rc-calendar/assets/index.css';
 import 'rc-time-picker/assets/index.css';
 import "./index.less";
 dayjs.extend(customParseFormat);
 var RangePicker = DatePicker.RangePicker;
 var DEFAULT_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-var DEFAULT_QUICK_TIME_OPTIONS = [{
+var DEFAULT_QUICK_TIME_OPTION_PRESETS = [{
   id: 1,
   value: 1,
-  label: '5分钟',
   diff: 5 * 60 * 1000,
   interval: 1,
   timeUnitId: 1
 }, {
   id: 2,
   value: 2,
-  label: '1小时',
   diff: 60 * 60 * 1000,
   interval: 2,
   timeUnitId: 2
 }, {
   id: 3,
   value: 3,
-  label: '6小时',
   diff: 6 * 60 * 60 * 1000,
   interval: 4,
   timeUnitId: 2
 }, {
   id: 4,
   value: 4,
-  label: '12小时',
   diff: 12 * 60 * 60 * 1000,
   interval: 5,
   timeUnitId: 4
 }, {
   id: 5,
   value: 5,
-  label: '1天',
   diff: 24 * 60 * 60 * 1000,
   interval: 6,
   timeUnitId: 5
 }, {
   id: 6,
   value: 6,
-  label: '7天',
   diff: 7 * 24 * 60 * 60 * 1000,
   interval: 5,
   timeUnitId: 5
 }];
+var DEFAULT_QUICK_TIME_OPTION_LABELS = {
+  'zh-CN': ['5分钟', '1小时', '6小时', '12小时', '1天', '7天'],
+  'zh-HK': ['5分鐘', '1小時', '6小時', '12小時', '1天', '7天'],
+  'en-US': ['5m', '1h', '6h', '12h', '1d', '7d']
+};
 var LOCALE_TEXT = {
   'zh-CN': {
     recent: '最近',
@@ -98,21 +97,83 @@ var CALENDAR_LOCALE_MAP = {
 };
 var PRIMARY = 'var(--ant-color-primary, #1677ff)';
 var TEXT_SECONDARY = 'rgba(0, 0, 0, 0.65)';
+var getDefaultQuickTimeOptions = function getDefaultQuickTimeOptions(locale) {
+  return DEFAULT_QUICK_TIME_OPTION_PRESETS.map(function (item, index) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      label: DEFAULT_QUICK_TIME_OPTION_LABELS[locale][index]
+    });
+  });
+};
+var getSafeDayjs = function getSafeDayjs(value, format) {
+  var strictValue = dayjs(value, format, true);
+  return strictValue.isValid() ? strictValue : dayjs(value);
+};
+var getPickerStateSnapshot = function getPickerStateSnapshot(value, format, quickTimeOptions) {
+  var _quickTimeOptions$;
+  var defaultOption = (_quickTimeOptions$ = quickTimeOptions[0]) !== null && _quickTimeOptions$ !== void 0 ? _quickTimeOptions$ : getDefaultQuickTimeOptions('zh-CN')[0];
+  var defaultTo = dayjs();
+  var defaultFrom = dayjs().subtract(defaultOption.diff, 'millisecond');
+  if (!value) {
+    return {
+      isRecent: true,
+      sliderValue: defaultOption.value,
+      selectTimeRange: [defaultFrom, defaultTo],
+      customTimeRange: [moment(defaultFrom.valueOf()), moment(defaultTo.valueOf())],
+      displayValue: defaultOption.label,
+      flatRadioValue: defaultOption.id
+    };
+  }
+  var safeFrom = getSafeDayjs(value.from, format);
+  var safeTo = getSafeDayjs(value.to, format);
+  if (value.sliderValue !== null && value.sliderValue !== undefined) {
+    var _matchedOption$value, _ref, _matchedOption$label;
+    var matchedOption = quickTimeOptions.find(function (option) {
+      return option.id === value.id || option.value === value.sliderValue;
+    });
+    return {
+      isRecent: true,
+      sliderValue: (_matchedOption$value = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.value) !== null && _matchedOption$value !== void 0 ? _matchedOption$value : value.sliderValue,
+      selectTimeRange: [safeFrom, safeTo],
+      customTimeRange: [moment(safeFrom.valueOf()), moment(safeTo.valueOf())],
+      displayValue: (_ref = (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value.inputValue) !== null && _ref !== void 0 ? _ref : "".concat(value.from, " - ").concat(value.to),
+      flatRadioValue: matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.id
+    };
+  }
+  return {
+    isRecent: false,
+    sliderValue: defaultOption.value,
+    selectTimeRange: [safeFrom, safeTo],
+    customTimeRange: [moment(safeFrom.valueOf()), moment(safeTo.valueOf())],
+    displayValue: value.inputValue || "".concat(value.from, " - ").concat(value.to),
+    flatRadioValue: undefined
+  };
+};
+var normalizeDisabledDateFrom = function normalizeDisabledDateFrom(source) {
+  if (!source) {
+    return [];
+  }
+  var rawFrom = _typeof(source) === 'object' && !Array.isArray(source) && 'from' in source ? source.from : source;
+  var fromList = Array.isArray(rawFrom) ? rawFrom : [rawFrom];
+  return fromList.filter(function (item) {
+    return Boolean(item);
+  }).map(function (item) {
+    return dayjs(item.valueOf());
+  });
+};
 var DateRangePicker = function DateRangePicker(props) {
-  var _quickTimeOptions$2;
   var onChange = props.onChange,
     value = props.value,
     _props$format = props.format,
     format = _props$format === void 0 ? DEFAULT_DATE_TIME_FORMAT : _props$format,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
-    _props$quickTimeOptio = props.quickTimeOptions,
-    quickTimeOptions = _props$quickTimeOptio === void 0 ? DEFAULT_QUICK_TIME_OPTIONS : _props$quickTimeOptio,
+    quickTimeOptionsProp = props.quickTimeOptions,
     disabledDate = props.disabledDate,
     width = props.width,
     disabled = props.disabled,
     _props$flat = props.flat,
-    flat = _props$flat === void 0 ? false : _props$flat;
+    flat = _props$flat === void 0 ? false : _props$flat,
+    localeProp = props.locale;
   var _useContext = useContext(ConfigProvider.ConfigContext),
     antdLocale = _useContext.locale;
   var currentLocale = useMemo(function () {
@@ -128,40 +189,53 @@ var DateRangePicker = function DateRangePicker(props) {
     }
     return 'zh-CN';
   }, [antdLocale]);
-  var i18n = useMemo(function () {
-    return LOCALE_TEXT[currentLocale];
+  var defaultQuickTimeOptions = useMemo(function () {
+    return getDefaultQuickTimeOptions(currentLocale);
   }, [currentLocale]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isRecent = _useState4[0],
-    setIsRecent = _useState4[1];
-  var _useState5 = useState(function () {
-      var _quickTimeOptions$0$v, _quickTimeOptions$;
-      return (_quickTimeOptions$0$v = (_quickTimeOptions$ = quickTimeOptions[0]) === null || _quickTimeOptions$ === void 0 ? void 0 : _quickTimeOptions$.value) !== null && _quickTimeOptions$0$v !== void 0 ? _quickTimeOptions$0$v : DEFAULT_QUICK_TIME_OPTIONS[0].value;
+  var quickTimeOptions = useMemo(function () {
+    return quickTimeOptionsProp !== null && quickTimeOptionsProp !== void 0 && quickTimeOptionsProp.length ? quickTimeOptionsProp : defaultQuickTimeOptions;
+  }, [quickTimeOptionsProp, defaultQuickTimeOptions]);
+  var mergedLocale = useMemo(function () {
+    return _objectSpread(_objectSpread({}, LOCALE_TEXT[currentLocale]), localeProp);
+  }, [currentLocale, localeProp]);
+  var _useState = useState(function () {
+      return getPickerStateSnapshot(value, format, quickTimeOptions);
     }),
+    _useState2 = _slicedToArray(_useState, 1),
+    initialState = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(initialState.isRecent),
     _useState6 = _slicedToArray(_useState5, 2),
-    sliderValue = _useState6[0],
-    setSliderValue = _useState6[1];
-  var _useState7 = useState([dayjs().subtract(1, 'day'), dayjs()]),
+    isRecent = _useState6[0],
+    setIsRecent = _useState6[1];
+  var _useState7 = useState(initialState.sliderValue),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectTimeRange = _useState8[0],
-    setSelectTimeRange = _useState8[1];
-  var _useState9 = useState([moment().subtract(1, 'days'), moment()]),
+    sliderValue = _useState8[0],
+    setSliderValue = _useState8[1];
+  var _useState9 = useState(initialState.selectTimeRange),
     _useState10 = _slicedToArray(_useState9, 2),
-    customTimeRange = _useState10[0],
-    setCustomTimeRange = _useState10[1];
-  var _useState11 = useState(''),
+    selectTimeRange = _useState10[0],
+    setSelectTimeRange = _useState10[1];
+  var _useState11 = useState(initialState.customTimeRange),
     _useState12 = _slicedToArray(_useState11, 2),
-    displayValue = _useState12[0],
-    setDisplayValue = _useState12[1];
-  var _useState13 = useState((_quickTimeOptions$2 = quickTimeOptions[0]) === null || _quickTimeOptions$2 === void 0 ? void 0 : _quickTimeOptions$2.id),
+    customTimeRange = _useState12[0],
+    setCustomTimeRange = _useState12[1];
+  var _useState13 = useState(initialState.displayValue),
     _useState14 = _slicedToArray(_useState13, 2),
-    flatRadioValue = _useState14[0],
-    setFlatRadioValue = _useState14[1];
+    displayValue = _useState14[0],
+    setDisplayValue = _useState14[1];
+  var _useState15 = useState(initialState.flatRadioValue),
+    _useState16 = _slicedToArray(_useState15, 2),
+    flatRadioValue = _useState16[0],
+    setFlatRadioValue = _useState16[1];
+  var flatSegmentedRef = useRef(null);
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    flatSegmentedThumbStyle = _useState18[0],
+    setFlatSegmentedThumbStyle = _useState18[1];
   var marks = useMemo(function () {
     var marksObj = {};
     quickTimeOptions.forEach(function (option) {
@@ -178,10 +252,70 @@ var DateRangePicker = function DateRangePicker(props) {
       max: Math.max.apply(Math, _toConsumableArray(values))
     };
   }, [quickTimeOptions]);
+  var flatSegmentedOptions = useMemo(function () {
+    return quickTimeOptions.map(function (item) {
+      return {
+        label: item.label,
+        value: item.id
+      };
+    });
+  }, [quickTimeOptions]);
+  var flatSegmentedTheme = useMemo(function () {
+    return {
+      cssVar: {
+        key: 'hc-date-range-picker-flat-segmented'
+      },
+      token: {
+        borderRadius: 4,
+        borderRadiusSM: 4,
+        boxShadowTertiary: '0 1px 10px rgba(0, 0, 0, 0.08)',
+        colorBgElevated: '#FFFFFF'
+      },
+      components: {
+        Segmented: {
+          trackBg: 'rgba(40, 105, 246, 0.1)',
+          trackPadding: 3,
+          itemColor: 'rgba(0, 0, 0, 0.85)',
+          itemHoverColor: 'rgba(0, 0, 0, 0.85)',
+          itemSelectedColor: '#2869F6'
+        }
+      }
+    };
+  }, []);
+  var quickTimeOptionsSignature = useMemo(function () {
+    return quickTimeOptions.map(function (item) {
+      var _item$interval, _item$timeUnitId;
+      return "".concat(item.id, ":").concat(item.value, ":").concat(item.label, ":").concat(item.diff, ":").concat((_item$interval = item.interval) !== null && _item$interval !== void 0 ? _item$interval : '', ":").concat((_item$timeUnitId = item.timeUnitId) !== null && _item$timeUnitId !== void 0 ? _item$timeUnitId : '');
+    }).join('|');
+  }, [quickTimeOptions]);
   var setRangeByDate = useCallback(function (from, to) {
     setSelectTimeRange([from, to]);
     setCustomTimeRange([moment(from.valueOf()), moment(to.valueOf())]);
   }, []);
+  var updateFlatSegmentedThumb = useCallback(function () {
+    var _items$find;
+    if (!flatSegmentedRef.current || flatRadioValue === undefined) {
+      setFlatSegmentedThumbStyle(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-opacity', 0));
+      return;
+    }
+    var rootElement = flatSegmentedRef.current;
+    var items = Array.from(rootElement.querySelectorAll('.ant-segmented-item'));
+    var targetItem = (_items$find = items.find(function (item) {
+      var input = item.querySelector('.ant-segmented-item-input');
+      return input === null || input === void 0 ? void 0 : input.checked;
+    })) !== null && _items$find !== void 0 ? _items$find : items.find(function (item) {
+      var input = item.querySelector('.ant-segmented-item-input');
+      return Number(input === null || input === void 0 ? void 0 : input.value) === flatRadioValue;
+    });
+    var targetLabel = targetItem === null || targetItem === void 0 ? void 0 : targetItem.querySelector('.ant-segmented-item-label');
+    if (!targetItem || !targetLabel) {
+      setFlatSegmentedThumbStyle(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-opacity', 0));
+      return;
+    }
+    var rootRect = rootElement.getBoundingClientRect();
+    var labelRect = targetLabel.getBoundingClientRect();
+    setFlatSegmentedThumbStyle(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-left', "".concat(labelRect.left - rootRect.left, "px")), '--hc-date-range-picker-flat-segmented-thumb-top', "".concat(labelRect.top - rootRect.top, "px")), '--hc-date-range-picker-flat-segmented-thumb-width', "".concat(labelRect.width, "px")), '--hc-date-range-picker-flat-segmented-thumb-height', "".concat(labelRect.height, "px")), '--hc-date-range-picker-flat-segmented-thumb-opacity', 1));
+  }, [flatRadioValue]);
   var calculateInterval = useCallback(function (fromTime, toTime) {
     var diff = dayjs(toTime).valueOf() - dayjs(fromTime).valueOf();
     var hours = diff / (60 * 60 * 1000);
@@ -215,46 +349,34 @@ var DateRangePicker = function DateRangePicker(props) {
     };
   }, []);
   useEffect(function () {
-    if (value) {
-      var sValue = value.sliderValue,
-        from = value.from,
-        to = value.to;
-      var fromD = dayjs(from, format, true);
-      var toD = dayjs(to, format, true);
-      var safeFrom = fromD.isValid() ? fromD : dayjs(from);
-      var safeTo = toD.isValid() ? toD : dayjs(to);
-      setRangeByDate(safeFrom, safeTo);
-      if (sValue !== null && sValue !== undefined) {
-        setIsRecent(true);
-        setSliderValue(sValue);
-        var option = quickTimeOptions.find(function (opt) {
-          return opt.id === value.id || opt.value === sValue;
-        });
-        if (option) {
-          setDisplayValue(option.label);
-          if (flat) {
-            setFlatRadioValue(option.id);
-          }
-        }
-      } else {
-        setIsRecent(false);
-        setDisplayValue("".concat(from, " - ").concat(to));
-        if (flat) {
-          setFlatRadioValue(undefined);
-        }
-      }
-    } else if (quickTimeOptions.length > 0) {
-      var defaultOption = quickTimeOptions[0];
-      var _to = dayjs();
-      var _from = dayjs().subtract(defaultOption.diff, 'millisecond');
-      setSliderValue(defaultOption.value);
-      setDisplayValue(defaultOption.label);
-      setRangeByDate(_from, _to);
-      if (flat) {
-        setFlatRadioValue(defaultOption.id);
-      }
+    var nextState = getPickerStateSnapshot(value, format, quickTimeOptions);
+    setIsRecent(nextState.isRecent);
+    setSliderValue(nextState.sliderValue);
+    setSelectTimeRange(nextState.selectTimeRange);
+    setCustomTimeRange(nextState.customTimeRange);
+    setDisplayValue(nextState.displayValue);
+    setFlatRadioValue(flat ? nextState.flatRadioValue : undefined);
+  }, [value, quickTimeOptionsSignature, flat, format, quickTimeOptions]);
+  useEffect(function () {
+    if (!flat) {
+      return;
+    }
+    var frameId = window.requestAnimationFrame(function () {
+      updateFlatSegmentedThumb();
+    });
+    var resizeObserver = typeof ResizeObserver === 'undefined' || !flatSegmentedRef.current ? null : new ResizeObserver(function () {
+      updateFlatSegmentedThumb();
+    });
+    if (flatSegmentedRef.current) {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(flatSegmentedRef.current);
     }
-  }, [value, quickTimeOptions, flat, format, setRangeByDate]);
+    window.addEventListener('resize', updateFlatSegmentedThumb);
+    return function () {
+      window.cancelAnimationFrame(frameId);
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+      window.removeEventListener('resize', updateFlatSegmentedThumb);
+    };
+  }, [flat, flatSegmentedOptions, updateFlatSegmentedThumb]);
   var handleRecentSave = useCallback(function () {
     var option = quickTimeOptions.find(function (opt) {
       return opt.value === sliderValue;
@@ -305,13 +427,10 @@ var DateRangePicker = function DateRangePicker(props) {
     onChange === null || onChange === void 0 || onChange(timeInfo);
   }, [customTimeRange, format, calculateInterval, onChange]);
   var wrappedDisabledDateForCalendar = useCallback(function (current, options) {
-    var _options$from$map, _options$from;
     if (!disabledDate) {
       return false;
     }
-    var fromArr = (_options$from$map = options === null || options === void 0 || (_options$from = options.from) === null || _options$from === void 0 ? void 0 : _options$from.map(function (item) {
-      return dayjs(item.valueOf());
-    })) !== null && _options$from$map !== void 0 ? _options$from$map : [];
+    var fromArr = normalizeDisabledDateFrom(options);
     var currentDayjs = current ? dayjs(current.valueOf()) : null;
     return disabledDate(currentDayjs, {
       from: fromArr
@@ -326,8 +445,8 @@ var DateRangePicker = function DateRangePicker(props) {
       from: fromArr
     });
   }, [disabledDate]);
-  var handleFlatRadioChange = useCallback(function (e) {
-    var selectedId = e.target.value;
+  var handleFlatSegmentedChange = useCallback(function (selectedValue) {
+    var selectedId = Number(selectedValue);
     setFlatRadioValue(selectedId);
     var option = quickTimeOptions.find(function (opt) {
       return opt.id === selectedId;
@@ -383,7 +502,7 @@ var DateRangePicker = function DateRangePicker(props) {
     style: {
       color: isRecent ? PRIMARY : TEXT_SECONDARY
     }
-  }, i18n.recent), /*#__PURE__*/React.createElement(Switch, {
+  }, mergedLocale.recent), /*#__PURE__*/React.createElement(Switch, {
     checked: !isRecent,
     onChange: function onChange(checked) {
       return setIsRecent(!checked);
@@ -396,7 +515,7 @@ var DateRangePicker = function DateRangePicker(props) {
     style: {
       color: isRecent ? TEXT_SECONDARY : PRIMARY
     }
-  }, i18n.custom)), /*#__PURE__*/React.createElement(CloseOutlined, {
+  }, mergedLocale.custom)), /*#__PURE__*/React.createElement(CloseOutlined, {
     className: "hc-date-range-picker-close",
     onClick: function onClick() {
       return setVisible(false);
@@ -421,7 +540,7 @@ var DateRangePicker = function DateRangePicker(props) {
     type: "primary",
     size: "small",
     onClick: handleRecentSave
-  }, i18n.confirm))) : /*#__PURE__*/React.createElement("div", {
+  }, mergedLocale.confirm))) : /*#__PURE__*/React.createElement("div", {
     className: "hc-date-range-picker-custom"
   }, /*#__PURE__*/React.createElement(RangeCalendar, {
     showToday: false,
@@ -439,16 +558,15 @@ var DateRangePicker = function DateRangePicker(props) {
     className: "hc-date-range-picker-wrapper ".concat(flat ? 'hc-date-range-picker-flat' : '')
   }, flat ? /*#__PURE__*/React.createElement("div", {
     className: "hc-date-range-picker-flat-content"
-  }, /*#__PURE__*/React.createElement(Radio.Group, {
-    className: "hc-date-range-picker-flat-radio-group",
-    buttonStyle: "solid",
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: flatSegmentedTheme
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    ref: flatSegmentedRef,
+    className: "hc-date-range-picker-flat-segmented",
     value: flatRadioValue,
-    onChange: handleFlatRadioChange
-  }, quickTimeOptions.map(function (item) {
-    return /*#__PURE__*/React.createElement(Radio.Button, {
-      key: item.id,
-      value: item.id
-    }, item.label);
+    onChange: handleFlatSegmentedChange,
+    options: flatSegmentedOptions,
+    style: flatSegmentedThumbStyle
   })), /*#__PURE__*/React.createElement(RangePicker, {
     allowClear: false,
     disabledDate: disabledDate ? wrappedDisabledDateForAntd : undefined,

package/dist/DateRangePicker/index.less

@@ -1,4 +1,4 @@
-@hc-primary: var(--ant-color-primary, #1677ff);
+@hc-primary: var(--ant-color-primary, #2869f6);
 
 .hc-date-range-picker-wrapper {
   position: relative;
@@ -23,33 +23,66 @@
       align-items: center;
     }
 
-    .hc-date-range-picker-flat-radio-group {
+    .hc-date-range-picker-flat-segmented {
+      position: relative;
       display: inline-flex;
       flex-wrap: nowrap;
-      gap: 3px;
       margin: 0;
-      padding: 3px;
-      background: rgba(40, 105, 246, 10%);
+      border: none;
       border-radius: 4px;
+      box-shadow: none;
+
+      &::before {
+        position: absolute;
+        top: var(--hc-date-range-picker-flat-segmented-thumb-top, 3px);
+        left: var(--hc-date-range-picker-flat-segmented-thumb-left, 3px);
+        z-index: 0;
+        width: var(--hc-date-range-picker-flat-segmented-thumb-width, 0);
+        height: var(--hc-date-range-picker-flat-segmented-thumb-height, 26px);
+        background: var(--ant-color-bg-elevated, #fff);
+        border-radius: var(--ant-border-radius-sm, 4px);
+        box-shadow: var(--ant-box-shadow-tertiary, 0 1px 10px #00000014);
+        opacity: var(--hc-date-range-picker-flat-segmented-thumb-opacity, 0);
+        transition:
+          left 0.2s ease,
+          top 0.2s ease,
+          width 0.2s ease,
+          height 0.2s ease,
+          opacity 0.2s ease;
+        pointer-events: none;
+        content: '';
+      }
+
+      .ant-segmented-group {
+        position: relative;
+        z-index: 1;
+        gap: 3px;
+      }
 
-      .ant-radio-button-wrapper {
+      .ant-segmented-item {
         height: 26px;
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
+        border-radius: 4px;
+      }
+
+      .ant-segmented-item-label {
+        min-height: 26px;
         padding: 0 12px;
         line-height: 26px;
-        background: none;
-        border: none;
         border-radius: 4px;
+      }
 
-        &:not(:first-child)::before {
-          width: 0;
-        }
+      .ant-segmented-thumb {
+        pointer-events: none;
+        opacity: 0;
+      }
 
-        &.ant-radio-button-wrapper-checked {
-          color: @hc-primary;
-          font-weight: 500;
-          background: #fff;
-          box-shadow: 0 1px 10px #00000014;
-        }
+      .ant-segmented-item-selected,
+      .ant-segmented-item-selected:hover {
+        background: transparent;
+        box-shadow: none;
       }
     }
   }

package/dist/HCDrawer/index.d.ts

@@ -0,0 +1,14 @@
+import type { DrawerProps } from 'antd';
+import React from 'react';
+import './index.less';
+export interface HCDrawerProps extends DrawerProps {
+    showFooter?: boolean;
+    onOk?: () => void | Promise<void>;
+    okText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+}
+declare const HCDrawer: React.FC<HCDrawerProps>;
+export default HCDrawer;

package/dist/HCDrawer/index.js

@@ -0,0 +1,307 @@
+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 = ["footer", "showFooter", "onOk", "onClose", "okText", "cancelText", "resizable", "minWidth", "maxWidth", "width", "size", "placement", "rootClassName", "open", "styles", "classNames"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 classNames from 'classnames';
+import { Button, Drawer, Space } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import "./index.less";
+var DEFAULT_WIDTH = 378;
+var DEFAULT_LARGE_WIDTH = 736;
+var RESIZE_EDGE_WIDTH = 8;
+var drawerId = 0;
+function getDefaultWidth(size) {
+  return size === 'large' ? DEFAULT_LARGE_WIDTH : DEFAULT_WIDTH;
+}
+function getDefaultMaxWidth(minWidth) {
+  if (typeof window === 'undefined') {
+    return minWidth;
+  }
+  return Math.max(minWidth, window.innerWidth - 48);
+}
+function clampWidth(width, minWidth, maxWidth) {
+  return Math.min(Math.max(width, minWidth), Math.max(minWidth, maxWidth));
+}
+var HCDrawer = function HCDrawer(props) {
+  var footer = props.footer,
+    _props$showFooter = props.showFooter,
+    showFooter = _props$showFooter === void 0 ? true : _props$showFooter,
+    onOk = props.onOk,
+    onClose = props.onClose,
+    _props$okText = props.okText,
+    okText = _props$okText === void 0 ? '确认' : _props$okText,
+    _props$cancelText = props.cancelText,
+    cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
+    _props$resizable = props.resizable,
+    resizable = _props$resizable === void 0 ? false : _props$resizable,
+    _props$minWidth = props.minWidth,
+    minWidth = _props$minWidth === void 0 ? DEFAULT_WIDTH : _props$minWidth,
+    maxWidth = props.maxWidth,
+    width = props.width,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'right' : _props$placement,
+    rootClassName = props.rootClassName,
+    open = props.open,
+    styles = props.styles,
+    drawerClassNames = props.classNames,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var supportsResize = resizable && (placement === 'left' || placement === 'right');
+  var resolvedMinWidth = Math.max(0, minWidth);
+  var resolvedMaxWidth = maxWidth === undefined ? getDefaultMaxWidth(resolvedMinWidth) : Math.max(resolvedMinWidth, maxWidth);
+  var hasCustomFooter = Object.prototype.hasOwnProperty.call(props, 'footer');
+  var instanceClassNameRef = useRef('');
+  var dragStateRef = useRef(null);
+  var innerWidthRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerWidth = _useState2[0],
+    setInnerWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    okLoading = _useState4[0],
+    setOkLoading = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    edgeHovered = _useState6[0],
+    setEdgeHovered = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isResizing = _useState8[0],
+    setIsResizing = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    footerDividerVisible = _useState10[0],
+    setFooterDividerVisible = _useState10[1];
+  if (!instanceClassNameRef.current) {
+    drawerId += 1;
+    instanceClassNameRef.current = "hc-drawer-instance-".concat(drawerId);
+  }
+  var syncInnerWidth = function syncInnerWidth() {
+    if (!supportsResize) {
+      setInnerWidth(null);
+      return;
+    }
+    if (typeof width === 'number') {
+      setInnerWidth(clampWidth(width, resolvedMinWidth, resolvedMaxWidth));
+      return;
+    }
+    if (width === undefined) {
+      setInnerWidth(clampWidth(getDefaultWidth(size), resolvedMinWidth, resolvedMaxWidth));
+      return;
+    }
+    setInnerWidth(null);
+  };
+  useEffect(function () {
+    innerWidthRef.current = innerWidth;
+  }, [innerWidth]);
+  useEffect(function () {
+    syncInnerWidth();
+  }, [width, size, supportsResize, resolvedMinWidth, resolvedMaxWidth]);
+  useEffect(function () {
+    if (!supportsResize || !open || typeof width !== 'string' || typeof document === 'undefined') {
+      return;
+    }
+    var frameId = window.requestAnimationFrame(function () {
+      var rootElement = document.querySelector(".".concat(instanceClassNameRef.current));
+      var contentElement = rootElement === null || rootElement === void 0 ? void 0 : rootElement.querySelector('.ant-drawer-content');
+      if (!contentElement) {
+        return;
+      }
+      var nextWidth = clampWidth(Math.round(contentElement.getBoundingClientRect().width), resolvedMinWidth, resolvedMaxWidth);
+      setInnerWidth(nextWidth);
+    });
+    return function () {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [width, open, resolvedMinWidth, resolvedMaxWidth, supportsResize]);
+  useEffect(function () {
+    if (!open || hasCustomFooter || !showFooter || typeof document === 'undefined') {
+      setFooterDividerVisible(false);
+      return;
+    }
+    var rootElement = document.querySelector(".".concat(instanceClassNameRef.current));
+    var bodyElement = rootElement === null || rootElement === void 0 ? void 0 : rootElement.querySelector('.ant-drawer-body');
+    if (!bodyElement) {
+      return;
+    }
+    var updateFooterDivider = function updateFooterDivider() {
+      setFooterDividerVisible(bodyElement.scrollHeight > bodyElement.clientHeight);
+    };
+    updateFooterDivider();
+    var resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(function () {
+      updateFooterDivider();
+    });
+    resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(bodyElement);
+    if (bodyElement.firstElementChild instanceof HTMLElement) {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(bodyElement.firstElementChild);
+    }
+    bodyElement.addEventListener('scroll', updateFooterDivider);
+    window.addEventListener('resize', updateFooterDivider);
+    return function () {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+      bodyElement.removeEventListener('scroll', updateFooterDivider);
+      window.removeEventListener('resize', updateFooterDivider);
+    };
+  }, [hasCustomFooter, open, showFooter, innerWidth]);
+  useEffect(function () {
+    if (!supportsResize || !open || typeof document === 'undefined') {
+      setEdgeHovered(false);
+      return;
+    }
+    var rootElement = document.querySelector(".".concat(instanceClassNameRef.current));
+    var contentElement = rootElement === null || rootElement === void 0 ? void 0 : rootElement.querySelector('.ant-drawer-content');
+    if (!contentElement) {
+      return;
+    }
+    var isInResizeEdge = function isInResizeEdge(clientX) {
+      var rect = contentElement.getBoundingClientRect();
+      if (placement === 'right') {
+        return clientX >= rect.left && clientX <= rect.left + RESIZE_EDGE_WIDTH;
+      }
+      return clientX <= rect.right && clientX >= rect.right - RESIZE_EDGE_WIDTH;
+    };
+    var handleMouseMove = function handleMouseMove(event) {
+      if (dragStateRef.current) {
+        return;
+      }
+      setEdgeHovered(isInResizeEdge(event.clientX));
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      if (!dragStateRef.current) {
+        setEdgeHovered(false);
+      }
+    };
+    var cleanupDraggingStyle = function cleanupDraggingStyle() {
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    };
+    var handleMouseUp = function handleMouseUp() {
+      dragStateRef.current = null;
+      setIsResizing(false);
+      setEdgeHovered(false);
+      cleanupDraggingStyle();
+      window.removeEventListener('mousemove', handleWindowMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    var handleWindowMouseMove = function handleWindowMouseMove(event) {
+      var dragState = dragStateRef.current;
+      if (!dragState) {
+        return;
+      }
+      var delta = event.clientX - dragState.startX;
+      var nextWidth = placement === 'right' ? dragState.startWidth - delta : dragState.startWidth + delta;
+      setInnerWidth(clampWidth(nextWidth, resolvedMinWidth, resolvedMaxWidth));
+    };
+    var handleMouseDown = function handleMouseDown(event) {
+      var _ref, _innerWidthRef$curren;
+      if (event.button !== 0 || !isInResizeEdge(event.clientX)) {
+        return;
+      }
+      var currentWidth = (_ref = (_innerWidthRef$curren = innerWidthRef.current) !== null && _innerWidthRef$curren !== void 0 ? _innerWidthRef$curren : Math.round(contentElement.getBoundingClientRect().width)) !== null && _ref !== void 0 ? _ref : getDefaultWidth(size);
+      dragStateRef.current = {
+        startX: event.clientX,
+        startWidth: currentWidth
+      };
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'col-resize';
+      setIsResizing(true);
+      setEdgeHovered(true);
+      window.addEventListener('mousemove', handleWindowMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      event.preventDefault();
+    };
+    contentElement.addEventListener('mousemove', handleMouseMove);
+    contentElement.addEventListener('mouseleave', handleMouseLeave);
+    contentElement.addEventListener('mousedown', handleMouseDown);
+    return function () {
+      contentElement.removeEventListener('mousemove', handleMouseMove);
+      contentElement.removeEventListener('mouseleave', handleMouseLeave);
+      contentElement.removeEventListener('mousedown', handleMouseDown);
+      cleanupDraggingStyle();
+      window.removeEventListener('mousemove', handleWindowMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      dragStateRef.current = null;
+      setIsResizing(false);
+    };
+  }, [open, resolvedMinWidth, placement, resolvedMaxWidth, size, supportsResize]);
+  var mergedFooter = useMemo(function () {
+    if (hasCustomFooter) {
+      return footer;
+    }
+    if (!showFooter) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('hc-drawer-footer', {
+        'hc-drawer-footer-divider': footerDividerVisible
+      })
+    }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick(event) {
+        return onClose === null || onClose === void 0 ? void 0 : onClose(event);
+      }
+    }, cancelText), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      loading: okLoading,
+      onClick: function onClick() {
+        if (!onOk) {
+          return;
+        }
+        var result = onOk();
+        if (result && typeof result.then === 'function') {
+          setOkLoading(true);
+          void result.catch(function () {
+            return undefined;
+          }).finally(function () {
+            setOkLoading(false);
+          });
+        }
+      }
+    }, okText)));
+  }, [cancelText, footer, footerDividerVisible, hasCustomFooter, okLoading, okText, onClose, onOk, showFooter]);
+  var mergedRootClassName = classNames('hc-drawer', instanceClassNameRef.current, {
+    'hc-drawer-resizable': supportsResize,
+    'hc-drawer-resize-hover': supportsResize && edgeHovered,
+    'hc-drawer-resizing': supportsResize && isResizing,
+    'hc-drawer-resizable-left': supportsResize && placement === 'left',
+    'hc-drawer-resizable-right': supportsResize && placement === 'right',
+    'hc-drawer-footer-divider-visible': footerDividerVisible && !hasCustomFooter && showFooter
+  }, rootClassName);
+  var mergedWidth = supportsResize ? innerWidth !== null && innerWidth !== void 0 ? innerWidth : width : width;
+  var mergedStyles = useMemo(function () {
+    if (!supportsResize) {
+      return styles;
+    }
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      wrapper: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.wrapper), {}, {
+        minWidth: resolvedMinWidth,
+        maxWidth: resolvedMaxWidth
+      })
+    });
+  }, [resolvedMaxWidth, resolvedMinWidth, styles, supportsResize]);
+  return /*#__PURE__*/React.createElement(Drawer, _extends({}, restProps, {
+    open: open,
+    onClose: onClose,
+    placement: placement,
+    size: size,
+    width: mergedWidth,
+    footer: mergedFooter,
+    rootClassName: mergedRootClassName,
+    classNames: drawerClassNames,
+    styles: mergedStyles
+  }));
+};
+export default HCDrawer;

package/dist/HCDrawer/index.less

@@ -0,0 +1,30 @@
+:root {
+  .hc-drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    border-top: 0;
+  }
+
+  .hc-drawer .ant-drawer-footer {
+    border-top: 0;
+  }
+
+  .hc-drawer-footer-divider-visible .ant-drawer-footer {
+    border-top: 1px solid #f0f0f0;
+  }
+
+  .hc-drawer-resizable-right .ant-drawer-content,
+  .hc-drawer-resizable-left .ant-drawer-content {
+    position: relative;
+  }
+
+  .hc-drawer-resize-hover.hc-drawer-resizable-right .ant-drawer-content,
+  .hc-drawer-resize-hover.hc-drawer-resizable-left .ant-drawer-content {
+    cursor: col-resize;
+  }
+
+  .hc-drawer-resizing .ant-drawer-content-wrapper {
+    transition: none;
+  }
+}

package/dist/HCModal/index.d.ts

@@ -0,0 +1,9 @@
+import { Modal } from 'antd';
+import type { ModalProps } from 'antd';
+import React from 'react';
+import './index.less';
+export interface HCModalProps extends ModalProps {
+}
+type HCModalType = React.FC<HCModalProps> & Pick<typeof Modal, 'useModal' | 'destroyAll' | 'config' | 'info' | 'success' | 'error' | 'warning' | 'warn' | 'confirm' | '_InternalPanelDoNotUseOrYouWillBeFired'>;
+declare const HCModal: HCModalType;
+export default HCModal;

package/dist/HCModal/index.js

@@ -0,0 +1,50 @@
+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 = ["rootClassName"];
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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 classNames from 'classnames';
+import { Modal } from 'antd';
+import React from 'react';
+import "./index.less";
+var HCModalBase = function HCModalBase(_ref) {
+  var rootClassName = _ref.rootClassName,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, restProps, {
+    rootClassName: classNames('hc-modal', rootClassName)
+  }));
+};
+var withStaticClassName = function withStaticClassName(config) {
+  return _objectSpread(_objectSpread({}, config), {}, {
+    className: classNames('hc-modal', config.className)
+  });
+};
+var HCModal = HCModalBase;
+HCModal.useModal = Modal.useModal;
+HCModal.destroyAll = Modal.destroyAll;
+HCModal.config = Modal.config;
+HCModal.info = function (config) {
+  return Modal.info(withStaticClassName(config));
+};
+HCModal.success = function (config) {
+  return Modal.success(withStaticClassName(config));
+};
+HCModal.error = function (config) {
+  return Modal.error(withStaticClassName(config));
+};
+HCModal.warning = function (config) {
+  return Modal.warning(withStaticClassName(config));
+};
+HCModal.warn = function (config) {
+  return Modal.warn(withStaticClassName(config));
+};
+HCModal.confirm = function (config) {
+  return Modal.confirm(withStaticClassName(config));
+};
+HCModal._InternalPanelDoNotUseOrYouWillBeFired = Modal._InternalPanelDoNotUseOrYouWillBeFired;
+export default HCModal;

package/dist/HCModal/index.less

@@ -0,0 +1,29 @@
+:root {
+  .hc-modal {
+    .ant-modal-content {
+      padding: 0;
+      overflow: hidden;
+      border-radius: 4px;
+    }
+
+    .ant-modal-header {
+      margin-bottom: 0;
+      padding: 16px 24px;
+      background: #fff;
+      border-bottom: 1px solid #f0f0f0;
+      border-radius: 4px 4px 0 0;
+    }
+
+    .ant-modal-body {
+      padding: 24px;
+    }
+
+    .ant-modal-footer {
+      margin-top: 0;
+      padding: 10px 16px;
+      background: #fff;
+      border-top: 1px solid #f0f0f0;
+      border-radius: 0 0 4px 4px;
+    }
+  }
+}

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export type { ResourceProgressProps } from './ResourceProgress';
 export { default as ShowMore } from './showMore';
 export { default as BasicFilesRead } from './BasicFilesRead';
 export { default as DateRangePicker } from './DateRangePicker';
-export type { DateRangePickerProps, QuickTimeOption, TimeRangeInfo, } from './DateRangePicker';
+export type { DateRangePickerLocale, DateRangePickerProps, DateRangePickerValue, QuickTimeOption, TimeRangeInfo, } from './DateRangePicker';
 export { Actions, LinkButton } from './Actions';
 export type { ActionElementProps, ActionsProps, LinkButtonProps, } from './Actions';
 export { default as TextCopy } from './TextCopy';
@@ -30,6 +30,10 @@ export { default as Yaml } from './Yaml';
 export type { YamlProps, YamlTexts, YamlValidateResult } from './Yaml';
 export { default as PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
+export { default as HCModal } from './HCModal';
+export type { HCModalProps } from './HCModal';
+export { default as HCDrawer } from './HCDrawer';
+export type { HCDrawerProps } from './HCDrawer';
 export { default as MetadataForm } from './MetadataForm';
 export type { MetadataFormProps, MetadataFormRef } from './MetadataForm';
 export { default as MetadataTags } from './MetadataTags';

package/dist/index.js

@@ -19,6 +19,8 @@ export { logCenterLocaleZhCN, LOG_CENTER_API, createLogCenterServices } from "./
 export { default as Terminal } from "./Terminal";
 export { default as Yaml } from "./Yaml";
 export { default as PageHeader } from "./PageHeader";
+export { default as HCModal } from "./HCModal";
+export { default as HCDrawer } from "./HCDrawer";
 export { default as MetadataForm } from "./MetadataForm";
 export { default as MetadataTags } from "./MetadataTags";
 export { default as MetadataCount } from "./MetadataCount";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hc-busin-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",