@oceanbase/ui 1.0.0-alpha.14 → 1.0.0-alpha.16

package/es/DateRanger/hooks/useSegmentedInput.js

@@ -0,0 +1,427 @@
+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); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import { useRef, useCallback, useState, useMemo } from 'react';
+import dayjs from 'dayjs';
+import moment from 'moment';
+
+// 日期时间段的类型定义
+
+// 分隔符
+var RANGE_SEPARATOR = ' ~ ';
+
+// 段落配置表
+var SEGMENT_CONFIG = {
+  YYYY: {
+    type: 'year',
+    length: 4,
+    min: 1900,
+    max: 2100
+  },
+  MM: {
+    type: 'month',
+    length: 2,
+    min: 1,
+    max: 12
+  },
+  DD: {
+    type: 'day',
+    length: 2,
+    min: 1,
+    max: 31
+  },
+  HH: {
+    type: 'hour',
+    length: 2,
+    min: 0,
+    max: 23
+  },
+  mm: {
+    type: 'minute',
+    length: 2,
+    min: 0,
+    max: 59
+  },
+  ss: {
+    type: 'second',
+    length: 2,
+    min: 0,
+    max: 59
+  }
+};
+
+// 解析单个日期时间字符串的段落 - 根据 format 动态计算
+var parseDateTimeSegments = function parseDateTimeSegments(format, dateValue, rangeType, offset) {
+  if (!dateValue) return [];
+  var segments = [];
+  var patterns = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss'];
+  for (var _i = 0, _patterns = patterns; _i < _patterns.length; _i++) {
+    var pattern = _patterns[_i];
+    var formatIndex = format.indexOf(pattern);
+    if (formatIndex === -1) continue;
+    var config = SEGMENT_CONFIG[pattern];
+    var valueStart = formatIndex;
+    var valueEnd = formatIndex + config.length;
+    segments.push({
+      type: config.type,
+      range: rangeType,
+      start: offset + valueStart,
+      end: offset + valueEnd,
+      value: dateValue.substring(valueStart, valueEnd),
+      min: config.min,
+      max: config.max,
+      padLength: config.length
+    });
+  }
+  segments.sort(function (a, b) {
+    return a.start - b.start;
+  });
+  return segments;
+};
+
+// 根据光标位置找到当前段落
+var findSegmentByPosition = function findSegmentByPosition(segments, position) {
+  var _iterator = _createForOfIteratorHelper(segments),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var segment = _step.value;
+      if (position >= segment.start && position <= segment.end) {
+        return segment;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var minDistance = Infinity;
+  var closestSegment = null;
+  var _iterator2 = _createForOfIteratorHelper(segments),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _segment = _step2.value;
+      var distance = Math.min(Math.abs(position - _segment.start), Math.abs(position - _segment.end));
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestSegment = _segment;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return closestSegment;
+};
+
+// 获取下一个段落
+var getNextSegment = function getNextSegment(segments, currentSegment) {
+  var currentIndex = segments.findIndex(function (s) {
+    return s.range === currentSegment.range && s.type === currentSegment.type;
+  });
+  if (currentIndex < segments.length - 1) {
+    return segments[currentIndex + 1];
+  }
+  return null;
+};
+
+// 获取上一个段落
+var getPrevSegment = function getPrevSegment(segments, currentSegment) {
+  var currentIndex = segments.findIndex(function (s) {
+    return s.range === currentSegment.range && s.type === currentSegment.type;
+  });
+  if (currentIndex > 0) {
+    return segments[currentIndex - 1];
+  }
+  return null;
+};
+export var useSegmentedInput = function useSegmentedInput(options) {
+  var value = options.value,
+    onChange = options.onChange,
+    format = options.format,
+    baseFormat = options.baseFormat,
+    _options$isMoment = options.isMoment,
+    isMoment = _options$isMoment === void 0 ? false : _options$isMoment,
+    _options$isCn = options.isCn,
+    isCn = _options$isCn === void 0 ? true : _options$isCn,
+    onClick = options.onClick;
+  var inputRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputBuffer = _useState4[0],
+    setInputBuffer = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentSegmentKey = _useState6[0],
+    setCurrentSegmentKey = _useState6[1];
+
+  // 格式化日期值为字符串
+  var formatValue = useCallback(function (v) {
+    var includeTimezone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (!v) return '';
+    var formatToUse = includeTimezone ? format : baseFormat;
+    return v.format(formatToUse);
+  }, [format, baseFormat]);
+
+  // 开始时间不包含时区后缀，结束时间包含
+  var startValue = useMemo(function () {
+    return formatValue((value === null || value === void 0 ? void 0 : value[0]) || null, false);
+  }, [value, formatValue]);
+  var endValue = useMemo(function () {
+    return formatValue((value === null || value === void 0 ? void 0 : value[1]) || null, true);
+  }, [value, formatValue]);
+
+  // 合并后的显示值
+  var displayValue = useMemo(function () {
+    if (!startValue && !endValue) return '';
+    return "".concat(startValue).concat(RANGE_SEPARATOR).concat(endValue);
+  }, [startValue, endValue]);
+
+  // 解析所有段落
+  var allSegments = useMemo(function () {
+    var startSegments = parseDateTimeSegments(baseFormat, startValue, 'start', 0);
+    var endOffset = startValue.length + RANGE_SEPARATOR.length;
+    var endSegments = parseDateTimeSegments(format, endValue, 'end', endOffset);
+    return [].concat(_toConsumableArray(startSegments), _toConsumableArray(endSegments));
+  }, [baseFormat, format, startValue, endValue]);
+
+  // 动态获取当前段落
+  var currentSegment = useMemo(function () {
+    if (!currentSegmentKey) return null;
+    return allSegments.find(function (s) {
+      return "".concat(s.range, "-").concat(s.type) === currentSegmentKey;
+    }) || null;
+  }, [currentSegmentKey, allSegments]);
+
+  // 创建新的日期对象
+  var createDate = useCallback(function (dateStr, rangeType) {
+    var formatToUse = rangeType === 'start' ? baseFormat : format;
+    if (isMoment) {
+      return moment(dateStr, formatToUse);
+    }
+    return dayjs(dateStr, formatToUse);
+  }, [isMoment, format, baseFormat]);
+
+  // 更新日期值
+  var updateValue = useCallback(function (segment, newSegmentValue) {
+    var which = segment.range;
+    var currentDateValue = which === 'start' ? startValue : endValue;
+    var paddedValue = newSegmentValue.padStart(segment.padLength, '0');
+    var baseOffset = which === 'start' ? 0 : startValue.length + RANGE_SEPARATOR.length;
+    var localStart = segment.start - baseOffset;
+    var localEnd = segment.end - baseOffset;
+    var newDateValue = currentDateValue.substring(0, localStart) + paddedValue + currentDateValue.substring(localEnd);
+    var newDate = createDate(newDateValue, which);
+    if (newDate.isValid()) {
+      var newRange = which === 'start' ? [newDate, (value === null || value === void 0 ? void 0 : value[1]) || newDate] : [(value === null || value === void 0 ? void 0 : value[0]) || newDate, newDate];
+      onChange === null || onChange === void 0 || onChange(newRange);
+    }
+  }, [startValue, endValue, value, onChange, createDate]);
+
+  // 选中指定段落
+  var selectSegment = useCallback(function (segment) {
+    if (inputRef.current) {
+      var _inputRef$current;
+      inputRef.current.focus();
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.input) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(segment.start, segment.end);
+      setCurrentSegmentKey("".concat(segment.range, "-").concat(segment.type));
+      setInputBuffer('');
+    }
+  }, []);
+
+  // 处理单击事件
+  var handleClick = useCallback(function (e) {
+    var _inputRef$current2;
+    e.stopPropagation();
+    setIsEditing(true);
+    onClick === null || onClick === void 0 || onClick();
+    var cursorPos = ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2 = _inputRef$current2.input) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) || 0;
+    var segment = findSegmentByPosition(allSegments, cursorPos);
+    if (segment) {
+      selectSegment(segment);
+    }
+  }, [allSegments, selectSegment, onClick]);
+
+  // 处理双击事件
+  var handleDoubleClick = useCallback(function (e) {
+    var _inputRef$current3;
+    e.stopPropagation();
+    e.preventDefault();
+    setIsEditing(true);
+    setCurrentSegmentKey(null);
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || (_inputRef$current3 = _inputRef$current3.input) === null || _inputRef$current3 === void 0 || _inputRef$current3.select();
+  }, []);
+
+  // 处理键盘输入
+  var handleKeyDown = useCallback(function (e) {
+    if (!currentSegment) return;
+    var key = e.key;
+
+    // 处理数字输入
+    if (/^\d$/.test(key)) {
+      e.preventDefault();
+      var newBuffer = inputBuffer + key;
+      setInputBuffer(newBuffer);
+      var numValue = parseInt(newBuffer, 10);
+      var shouldJump = newBuffer.length >= currentSegment.padLength || numValue * 10 > currentSegment.max;
+      if (shouldJump) {
+        var clampedValue = Math.max(currentSegment.min, Math.min(currentSegment.max, numValue));
+        updateValue(currentSegment, String(clampedValue));
+        var nextSegment = getNextSegment(allSegments, currentSegment);
+        if (nextSegment) {
+          setTimeout(function () {
+            return selectSegment(nextSegment);
+          }, 0);
+        }
+      } else {
+        updateValue(currentSegment, newBuffer);
+      }
+      return;
+    }
+
+    // 处理左右箭头
+    if (key === 'ArrowLeft') {
+      e.preventDefault();
+      var prevSegment = getPrevSegment(allSegments, currentSegment);
+      if (prevSegment) {
+        selectSegment(prevSegment);
+      }
+      return;
+    }
+    if (key === 'ArrowRight') {
+      e.preventDefault();
+      var _nextSegment = getNextSegment(allSegments, currentSegment);
+      if (_nextSegment) {
+        selectSegment(_nextSegment);
+      }
+      return;
+    }
+
+    // 处理上下箭头调整数值
+    if (key === 'ArrowUp' || key === 'ArrowDown') {
+      e.preventDefault();
+      var currentNum = parseInt(currentSegment.value, 10);
+      var delta = key === 'ArrowUp' ? 1 : -1;
+      var newNum = currentNum + delta;
+      if (newNum > currentSegment.max) {
+        newNum = currentSegment.min;
+      } else if (newNum < currentSegment.min) {
+        newNum = currentSegment.max;
+      }
+      updateValue(currentSegment, String(newNum));
+      setTimeout(function () {
+        var _inputRef$current4;
+        if ((_inputRef$current4 = inputRef.current) !== null && _inputRef$current4 !== void 0 && _inputRef$current4.input && currentSegment) {
+          inputRef.current.input.setSelectionRange(currentSegment.start, currentSegment.end);
+        }
+      }, 0);
+      return;
+    }
+
+    // 处理 Tab 键
+    if (key === 'Tab') {
+      var _nextSegment2 = e.shiftKey ? getPrevSegment(allSegments, currentSegment) : getNextSegment(allSegments, currentSegment);
+      if (_nextSegment2) {
+        e.preventDefault();
+        selectSegment(_nextSegment2);
+      }
+      return;
+    }
+
+    // 阻止删除和其他非法输入
+    if (key === 'Backspace' || key === 'Delete' || !e.ctrlKey && !e.metaKey && key.length === 1 && !/\d/.test(key)) {
+      e.preventDefault();
+      return;
+    }
+  }, [currentSegment, inputBuffer, allSegments, selectSegment, updateValue]);
+
+  // 处理失焦事件
+  var handleBlur = useCallback(function (e) {
+    if (currentSegment && inputBuffer) {
+      var numValue = parseInt(inputBuffer, 10);
+      var clampedValue = Math.max(currentSegment.min, Math.min(currentSegment.max, numValue));
+      updateValue(currentSegment, String(clampedValue));
+    }
+    setIsEditing(false);
+    setCurrentSegmentKey(null);
+    setInputBuffer('');
+  }, [currentSegment, inputBuffer, updateValue]);
+
+  // 处理粘贴事件
+  var handlePaste = useCallback(function (e) {
+    e.preventDefault();
+    var pastedText = e.clipboardData.getData('text').trim();
+    if (!pastedText) return;
+    var separators = [' ~ ', '~', ' - ', ' – ', ' — '];
+    var startStr = '';
+    var endStr = '';
+    for (var _i2 = 0, _separators = separators; _i2 < _separators.length; _i2++) {
+      var sep = _separators[_i2];
+      if (pastedText.includes(sep)) {
+        var parts = pastedText.split(sep);
+        if (parts.length === 2) {
+          startStr = parts[0].trim();
+          endStr = parts[1].trim();
+          break;
+        }
+      }
+    }
+    if (!startStr && !endStr) {
+      startStr = pastedText;
+      endStr = pastedText;
+    }
+    var formats = ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm', 'YYYY/MM/DD HH:mm:ss', 'YYYY/MM/DD HH:mm', 'MM/DD/YYYY HH:mm:ss', 'MM/DD/YYYY HH:mm', 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'];
+    var parsedStart = null;
+    var parsedEnd = null;
+    for (var _i3 = 0, _formats = formats; _i3 < _formats.length; _i3++) {
+      var fmt = _formats[_i3];
+      var tryStart = isMoment ? moment(startStr, fmt, true) : dayjs(startStr, fmt, true);
+      if (tryStart.isValid()) {
+        parsedStart = tryStart;
+        break;
+      }
+    }
+    for (var _i4 = 0, _formats2 = formats; _i4 < _formats2.length; _i4++) {
+      var _fmt = _formats2[_i4];
+      var tryEnd = isMoment ? moment(endStr, _fmt, true) : dayjs(endStr, _fmt, true);
+      if (tryEnd.isValid()) {
+        parsedEnd = tryEnd;
+        break;
+      }
+    }
+    if (parsedStart && parsedEnd) {
+      onChange === null || onChange === void 0 || onChange([parsedStart, parsedEnd]);
+    } else if (parsedStart) {
+      onChange === null || onChange === void 0 || onChange([parsedStart, (value === null || value === void 0 ? void 0 : value[1]) || parsedStart]);
+    } else if (parsedEnd) {
+      onChange === null || onChange === void 0 || onChange([(value === null || value === void 0 ? void 0 : value[0]) || parsedEnd, parsedEnd]);
+    }
+  }, [isMoment, onChange, value]);
+  return {
+    inputRef: inputRef,
+    isEditing: isEditing,
+    displayValue: displayValue,
+    currentSegment: currentSegment,
+    allSegments: allSegments,
+    handleClick: handleClick,
+    handleDoubleClick: handleDoubleClick,
+    handleKeyDown: handleKeyDown,
+    handleBlur: handleBlur,
+    handlePaste: handlePaste
+  };
+};
+export default useSegmentedInput;

package/es/DateRanger/style/index.js

@@ -12,7 +12,7 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     colorTextSecondary = token.colorTextSecondary,
     colorFillSecondary = token.colorFillSecondary,
     colorFill = token.colorFill;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     cursor: 'pointer'
   }, "".concat(componentCls, "-wrapper"), _defineProperty(_defineProperty({
     backgroundColor: colorBgContainer,
@@ -116,6 +116,24 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     '&:hover': {
       backgroundColor: "".concat(colorFill, " !important")
     }
+  }), "".concat(componentCls, "-editable-wrapper"), {
+    display: 'inline-flex',
+    alignItems: 'center'
+  }), "".concat(componentCls, "-range-editable"), {
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'text',
+    '&-disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.6
+    }
+  }), "".concat(componentCls, "-range-editable-input"), {
+    width: 290,
+    cursor: 'text',
+    caretColor: 'transparent',
+    '&:focus, &:focus-within': _defineProperty({}, "".concat(antCls, "-input"), {
+      caretColor: token.colorPrimary
+    })
   });
 };
 export default (function (prefixCls) {

package/es/DocDialog/index.js

@@ -38,32 +38,49 @@ var DocDialogComp = function DocDialogComp(props) {
     embedConfig = _props$embedConfig === void 0 ? {} : _props$embedConfig,
     _props$normalConfig = props.normalConfig,
     normalConfig = _props$normalConfig === void 0 ? {} : _props$normalConfig;
-  var _useState = useState(document.body.clientHeight),
+  // Avoid SSR issue: only read document/window on client (e.g. Next.js)
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     clientHeight = _useState2[0],
     setClientHeight = _useState2[1];
-  var _useState3 = useState(document.body.clientWidth),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     clientWidth = _useState4[0],
     setClientWidth = _useState4[1];
-  var location = window.location;
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    location = _useState6[0],
+    setLocation = _useState6[1];
+  useEffect(function () {
+    if (typeof window !== 'undefined') {
+      setClientHeight(window.document.body.clientHeight);
+      setClientWidth(window.document.body.clientWidth);
+      setLocation({
+        pathname: window.location.pathname
+      });
+    }
+  }, []);
   var currentLink = useMemo(function () {
-    var _link$;
-    var pathname = location.pathname;
+    var _location$pathname, _link$;
+    var pathname = (_location$pathname = location === null || location === void 0 ? void 0 : location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '';
     var link = Object.entries(docUrls).find(function (set) {
       return pathname.indexOf(set[0]) > -1;
     });
     return (_link$ = link === null || link === void 0 ? void 0 : link[1]) !== null && _link$ !== void 0 ? _link$ : fallbackUrl;
   }, [location, docUrls, fallbackUrl]);
   var handleResize = debounce(function () {
-    setClientWidth(document.body.clientWidth);
-    setClientHeight(document.body.clientHeight);
+    if (typeof window !== 'undefined') {
+      setClientWidth(window.document.body.clientWidth);
+      setClientHeight(window.document.body.clientHeight);
+    }
   }, 300);
   useEffect(function () {
+    if (typeof window === 'undefined') return;
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- register resize listener once on mount
   }, []);
   var DialogProps = useMemo(function () {
     var maxDialogHeight = clientHeight - defautTop;

package/es/NavMenu/index.js

@@ -29,10 +29,22 @@ export default (function (props) {
     _useState4 = _slicedToArray(_useState3, 2),
     menus = _useState4[0],
     setMenus = _useState4[1];
-  var location = window.location;
+  // Avoid SSR issue: only read window.location on client (e.g. Next.js)
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    location = _useState6[0],
+    setLocation = _useState6[1];
+  useEffect(function () {
+    if (typeof window !== 'undefined') {
+      setLocation({
+        pathname: window.location.pathname
+      });
+    }
+  }, []);
   var navigate = useNavigate();
   var preProcess = useCallback(function (list) {
-    var pathname = location.pathname;
+    var _location$pathname;
+    var pathname = (_location$pathname = location === null || location === void 0 ? void 0 : location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '';
     try {
       for (var i = 0; i < list.length; i++) {
         var _list$i = list[i],

package/es/PageContainer/index.js

@@ -6,6 +6,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { useUniqueInlineId } from '@inline-svg-unique-id/react';
@@ -13,7 +19,7 @@ import { ArrowLeftOutlined, SyncOutlined } from '@oceanbase/icons';
 import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { isObject } from 'lodash';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Button, ConfigProvider, Divider, Space, Tooltip, theme } from '@oceanbase/design';
 import { useSize } from 'ahooks';
 import LocaleWrapper from "../locale/LocaleWrapper";
@@ -54,7 +60,7 @@ var DocumentIcon = function DocumentIcon(_ref) {
   });
 };
 var PageContainer = function PageContainer(_ref2) {
-  var _window, _restProps$style;
+  var _restProps$style;
   var customizePrefixCls = _ref2.prefixCls,
     className = _ref2.className,
     titleProp = _ref2.title,
@@ -81,8 +87,19 @@ var PageContainer = function PageContainer(_ref2) {
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
 
+  // Avoid SSR issue: only get container element on client (e.g. Next.js)
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerEl = _useState2[0],
+    setContainerEl = _useState2[1];
+  useEffect(function () {
+    if (typeof window !== 'undefined' && window.document) {
+      setContainerEl(window.document.querySelector(".".concat(prefixCls)));
+    }
+  }, [prefixCls]);
+
   // TODO: PageContainer should support ref to get the width of the container
-  var size = useSize((_window = window) === null || _window === void 0 || (_window = _window.document) === null || _window === void 0 ? void 0 : _window.querySelector(".".concat(prefixCls)));
+  var size = useSize(containerEl);
   var width = size === null || size === void 0 ? void 0 : size.width;
   var maxWidthValue = (_restProps$style = restProps.style) === null || _restProps$style === void 0 ? void 0 : _restProps$style.maxWidth;
   var maxWidth = typeof maxWidthValue === 'number' ? maxWidthValue : maxWidthValue !== null && maxWidthValue !== void 0 && maxWidthValue.includes('px') ? parseInt(maxWidthValue) : undefined;

package/es/PageContainer/style/index.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 import { genFooterToolbarStyle } from "../../FooterToolbar/style";
 export var genPageContainerStyle = function genPageContainerStyle(token) {
-  var _$concat$concat;
+  var _$concat$concat$conca;
   var antCls = token.antCls,
     proComponentsCls = token.proComponentsCls,
     componentCls = token.componentCls,
@@ -20,13 +20,13 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     backgroundColor: colorBgLayout
   }, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
+  }), "".concat(antCls, "-page-header").concat(componentCls, "-warp-page-header, ").concat(antCls, "-page-header").concat(componentCls, "-wrap-page-header"), (_$concat$concat$conca = {
     // 减小内容区左右两侧间距
-    paddingInlineStart: "".concat(token.paddingXL, "px !important"),
-    paddingInlineEnd: "".concat(token.paddingXL, "px !important"),
-    paddingBlockStart: "".concat(paddingLG, "px !important"),
-    paddingBlockEnd: "".concat(padding, "px !important")
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat$concat, "".concat(antCls, "-page-header-breadcrumb"), {
+    paddingInlineStart: "".concat(token.paddingXL, "px"),
+    paddingInlineEnd: "".concat(token.paddingXL, "px"),
+    paddingBlockStart: "".concat(paddingLG, "px"),
+    paddingBlockEnd: "".concat(padding, "px")
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat$concat$conca, "".concat(antCls, "-page-header-breadcrumb"), {
     // overwritten pro-components style
     paddingBlockStart: 0
   }), "".concat(antCls, "-page-header-heading"), {
@@ -61,7 +61,7 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     marginBlock: 0
   }), "".concat(antCls, "-page-header-heading-extra"), {
     marginBlock: 0
-  }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), _defineProperty({
+  }), _defineProperty(_$concat$concat$conca, "".concat(antCls, "-page-header-footer"), _defineProperty({
     marginBlockStart: 0
   }, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
     borderBottom: "1px solid ".concat(token.colorBorderSecondary)

package/es/SideTip/index.js

@@ -60,7 +60,9 @@ var SideTip = function SideTip(props) {
   var getLocalStorageKey = useCallback(function (localId) {
     return ["".concat(prefixCls, "-hide"), localId].join('-');
   }, [prefixCls]);
-  var _useState = useState(hideable ? defaultHide === undefined ? window.localStorage.getItem(getLocalStorageKey(id)) === 'true' : !!defaultHide : false),
+
+  // Avoid SSR issue: same initial value on server and client, then sync from localStorage in useEffect
+  var _useState = useState(hideable ? !!defaultHide : false),
     _useState2 = _slicedToArray(_useState, 2),
     hide = _useState2[0],
     setHide = _useState2[1];
@@ -69,6 +71,13 @@ var SideTip = function SideTip(props) {
     hovered = _useState4[0],
     setHovered = _useState4[1];
   useEffect(function () {
+    if (typeof window === 'undefined' || !hideable) return;
+    if (defaultHide === undefined) {
+      setHide(window.localStorage.getItem(getLocalStorageKey(id)) === 'true');
+    }
+  }, [hideable, defaultHide, id, getLocalStorageKey]);
+  useEffect(function () {
+    if (typeof window === 'undefined') return;
     if (hide) {
       window.localStorage.setItem(getLocalStorageKey(id), 'true');
     } else {