@pisell/materials 6.0.19 → 6.0.20

package/es/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputNumberProps } from 'antd/es/input-number';
 export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
     value?: number;
@@ -6,5 +5,5 @@ export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps
     defaultValue?: number;
     onChange?: (val: number) => void;
 }
-declare const PisellAdjustPriceInputNumber: (props: PisellAdjustPriceInputNumberProps) => React.JSX.Element;
+declare const PisellAdjustPriceInputNumber: (props: PisellAdjustPriceInputNumberProps) => JSX.Element;
 export default PisellAdjustPriceInputNumber;

package/es/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.js

@@ -4,7 +4,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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; }
@@ -25,7 +25,7 @@ var PisellAdjustPriceInputNumber = function PisellAdjustPriceInputNumber(props)
     setOpen = _useState2[1];
   var handleChange = function handleChange(val) {
     setOpen(false);
-    onChange === null || onChange === void 0 ? void 0 : onChange(Number(val.toFixed(2)));
+    onChange === null || onChange === void 0 || onChange(Number(val.toFixed(2)));
   };
   var content = useMemo(function () {
     return /*#__PURE__*/React.createElement(PisellAdjustPricePanel, {

package/es/components/pisellAdjustPrice/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import './index.less';
 export interface PisellAdjustPriceProps {
     value?: number;
@@ -6,5 +5,5 @@ export interface PisellAdjustPriceProps {
     defaultValue?: number;
     onChange?: (val: number) => void;
 }
-declare const PisellAdjustPrice: (props: PisellAdjustPriceProps) => React.JSX.Element;
+declare const PisellAdjustPrice: (props: PisellAdjustPriceProps) => JSX.Element;
 export default PisellAdjustPrice;

package/es/components/pisellAdjustPrice/index.js

@@ -1,14 +1,14 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 = ["value", "onChange", "defaultValue", "originValue"];
 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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; }
@@ -54,10 +54,10 @@ var PisellAdjustPrice = function PisellAdjustPrice(props) {
 
     // 一口价直接取newValue
     if (updateMode === 'priceOverride') {
-      onChange === null || onChange === void 0 ? void 0 : onChange(Number(newValue));
+      onChange === null || onChange === void 0 || onChange(Number(newValue));
     } else {
       // 折扣模式取折扣价格
-      onChange === null || onChange === void 0 ? void 0 : onChange(Number(totalAfterDiscount));
+      onChange === null || onChange === void 0 || onChange(Number(totalAfterDiscount));
     }
   };
   var handleChange = function handleChange(val) {

package/es/components/pisellAlert/index.d.ts

@@ -18,5 +18,5 @@ export interface PisellAlertProps extends AlertProps {
  * @param props
  * @constructor
  */
-declare const PisellAlert: (props: PisellAlertProps) => false | React.JSX.Element;
+declare const PisellAlert: (props: PisellAlertProps) => false | JSX.Element;
 export default PisellAlert;

package/es/components/pisellAlert/index.js

@@ -4,7 +4,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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; }
@@ -58,7 +58,7 @@ var PisellAlert = function PisellAlert(props) {
       onClick: function onClick(e) {
         var _props$onClose;
         setVisible(false);
-        props === null || props === void 0 ? void 0 : (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props, e);
+        props === null || props === void 0 || (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props, e);
       }
     }, dismiss), showView && /*#__PURE__*/React.createElement("span", {
       className: "pisell-action-item pisell-action-view",

package/es/components/pisellAnchor/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.less';
+export interface Option {
+    id: string | number;
+    name: React.ReactNode;
+}
+export interface PisellAnchorProps {
+    options?: Option[];
+    tab?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (key: string | number) => void;
+    onTabClick?: () => void;
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * 平台类型，仅用于样式调整，不再影响锚点滚动功能
+     * 无论pc还是h5模式，点击锚点都会自动滚动到对应内容
+     * @default 'pc'
+     */
+    platform?: 'pc' | 'h5';
+}
+declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
+export default PisellAnchor;

package/es/components/pisellAnchor/index.js

@@ -0,0 +1,303 @@
+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(_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 e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import React, { useState, forwardRef, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { useDebounceFn, useThrottleFn } from 'ahooks';
+import ChevronLeft from '@pisell/icon/es/ChevronLeft';
+import ChevronRight from '@pisell/icon/es/ChevronRight';
+import "./index.less";
+var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    tab = props.tab,
+    className = props.className,
+    style = props.style,
+    onChange = props.onChange,
+    onTabClick = props.onTabClick,
+    containerRef = props.containerRef,
+    _props$platform = props.platform,
+    platform = _props$platform === void 0 ? 'pc' : _props$platform;
+  var contentRef = useRef(null);
+  var scrollTimeoutRef = useRef(null);
+  var isClickScrolling = useRef(false);
+  var clickedTabRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    leftWidth = _useState2[0],
+    setLeftWidth = _useState2[1];
+  var _useState3 = useState(40),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rightWidth = _useState4[0],
+    setRightWidth = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showButtons = _useState6[0],
+    setShowButtons = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hoveredTab = _useState8[0],
+    setHoveredTab = _useState8[1];
+
+  // 检查是否需要显示按钮
+  useEffect(function () {
+    if (contentRef.current) {
+      var _contentRef$current = contentRef.current,
+        scrollWidth = _contentRef$current.scrollWidth,
+        clientWidth = _contentRef$current.clientWidth;
+      setShowButtons(scrollWidth > clientWidth);
+    }
+  }, [options]);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 处理水平滚动
+  var _useDebounceFn = useDebounceFn(function (e) {
+      var _e$target = e.target,
+        scrollLeft = _e$target.scrollLeft,
+        scrollWidth = _e$target.scrollWidth,
+        clientWidth = _e$target.clientWidth;
+      setLeftWidth(scrollLeft > 0 ? 40 : 0);
+      setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
+    }, {
+      wait: 200
+    }),
+    onScrollDebounced = _useDebounceFn.run;
+
+  // 处理垂直滚动
+  var _useThrottleFn = useThrottleFn(function () {
+      // 如果是点击触发的滚动，不处理滚动检测
+      if (isClickScrolling.current) return;
+      if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+      var container = containerRef.current;
+      var headerHeight = 65;
+      var containerRect = container.getBoundingClientRect();
+      var scrollTop = container.scrollTop;
+      var containerHeight = containerRect.height;
+      var scrollHeight = container.scrollHeight;
+
+      // 检查是否滚动到底部
+      var isAtBottom = scrollTop + containerHeight >= scrollHeight - 50;
+      if (isAtBottom) {
+        var lastOption = options[options.length - 1];
+        // 不要切回到之前点击的 tab
+        if (tab !== lastOption.id && lastOption.id !== clickedTabRef.current) {
+          onChange === null || onChange === void 0 || onChange(lastOption.id);
+        }
+        return;
+      }
+
+      // 找到当前可见的元素
+      var closestOption = null;
+      var minDistance = Infinity;
+      var _iterator = _createForOfIteratorHelper(options),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var option = _step.value;
+          // 尝试通过ID和data属性查找元素
+          var elementById = document.getElementById(option.id);
+          var elementByDataAttr = document.querySelector("[data-section=\"".concat(option.id, "\"]"));
+          var element = elementById || elementByDataAttr;
+          if (element) {
+            // 使用类型断言解决TS错误
+            var htmlElement = element;
+
+            // 使用offsetTop计算更准确
+            var elementOffsetTop = htmlElement.offsetTop;
+            var elementHeight = htmlElement.offsetHeight;
+
+            // 计算可见度
+            var elementTopRelativeToViewport = elementOffsetTop - scrollTop;
+            var isTopVisible = elementTopRelativeToViewport >= headerHeight && elementTopRelativeToViewport <= containerHeight;
+            var isBottomVisible = elementTopRelativeToViewport + elementHeight >= headerHeight && elementTopRelativeToViewport + elementHeight <= containerHeight;
+            var isElementPartiallyVisible = isTopVisible || isBottomVisible || elementTopRelativeToViewport < headerHeight && elementTopRelativeToViewport + elementHeight > containerHeight;
+            var distance = Math.abs(elementTopRelativeToViewport - headerHeight);
+            if (distance < minDistance) {
+              minDistance = distance;
+              closestOption = option;
+            }
+          }
+        }
+
+        // 不要切回到之前点击的 tab
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (closestOption && tab !== closestOption.id && closestOption.id !== clickedTabRef.current && minDistance < 50) {
+        onChange === null || onChange === void 0 || onChange(closestOption.id);
+      }
+    }, {
+      wait: 150
+    }),
+    handleScrollThrottled = _useThrottleFn.run;
+
+  // 监听容器滚动
+  useEffect(function () {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+    var handleScroll = function handleScroll() {
+      if (!isClickScrolling.current) {
+        handleScrollThrottled();
+      }
+    };
+    var container = containerRef.current;
+    container.addEventListener('scroll', handleScroll);
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScrollThrottled]);
+
+  // 点击选项时更新选中项并滚动
+  var handleOptionClick = function handleOptionClick(item) {
+    // 添加调试日志
+    console.log('PisellAnchor: Tab clicked', item.id);
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    // 更新选中项
+    onChange === null || onChange === void 0 || onChange(item.id);
+
+    // 触发点击事件回调
+    onTabClick === null || onTabClick === void 0 || onTabClick();
+
+    // 统一PC和H5的交互逻辑，无论什么平台都执行滚动
+    // 尝试多种方式查找目标元素
+    var elementById = document.getElementById(String(item.id));
+    var elementByDataAttr = document.querySelector("[data-section=\"".concat(String(item.id), "\"]"));
+    var element = elementById || elementByDataAttr;
+
+    // 添加调试日志
+    console.log('PisellAnchor: Target element found?', !!element);
+    console.log('PisellAnchor: Container ref exists?', !!(containerRef !== null && containerRef !== void 0 && containerRef.current));
+    if (element && containerRef !== null && containerRef !== void 0 && containerRef.current) {
+      isClickScrolling.current = true;
+      clickedTabRef.current = item.id;
+
+      // 使用requestAnimationFrame确保DOM更新后再滚动
+      requestAnimationFrame(function () {
+        if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+
+        // 使用类型断言解决TS错误
+        var htmlElement = element;
+
+        // 更准确的滚动位置计算
+        var headerHeight = 65; // 使用一致的头部高度
+        var elementOffsetTop = htmlElement.offsetTop; // 使用offsetTop而不是getBoundingClientRect()
+
+        // 添加调试日志
+        console.log('PisellAnchor: Scrolling using offsetTop', {
+          elementOffsetTop: elementOffsetTop,
+          targetScrollTop: elementOffsetTop - headerHeight
+        });
+
+        // 执行滚动 - 使用更直接的offsetTop定位
+        containerRef.current.scrollTo({
+          top: elementOffsetTop - headerHeight,
+          behavior: 'smooth'
+        });
+
+        // 添加备份滚动机制
+        setTimeout(function () {
+          if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+
+          // 强制再次滚动以确保滚动效果
+          containerRef.current.scrollTo({
+            top: elementOffsetTop - headerHeight,
+            behavior: 'auto' // 使用即时滚动确保位置准确
+          });
+        }, 300);
+      });
+
+      // 延迟重置状态
+      scrollTimeoutRef.current = setTimeout(function () {
+        isClickScrolling.current = false;
+        clickedTabRef.current = null;
+      }, 1000);
+    } else {
+      console.warn('PisellAnchor: Cannot scroll, element or container not found', {
+        elementId: item.id,
+        elementByIdExists: !!elementById,
+        elementByDataAttrExists: !!elementByDataAttr,
+        containerExists: !!(containerRef !== null && containerRef !== void 0 && containerRef.current)
+      });
+    }
+  };
+
+  // 左右按钮点击处理
+  var onPageChange = function onPageChange(type) {
+    if (contentRef.current) {
+      var _contentRef$current2 = contentRef.current,
+        scrollLeft = _contentRef$current2.scrollLeft,
+        clientWidth = _contentRef$current2.clientWidth;
+      var newScrollLeft = scrollLeft + (type === 'left' ? -clientWidth : clientWidth);
+      contentRef.current.scrollTo({
+        left: newScrollLeft,
+        behavior: 'smooth'
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-anchor-tabs', className),
+    style: style
+  }, showButtons && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-anchor-tabs-btn-left",
+    style: {
+      width: leftWidth
+    },
+    onClick: function onClick() {
+      return onPageChange('left');
+    }
+  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+    className: "pisell-anchor-tabs-btn-icon"
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "pisell-anchor-tabs-content",
+    id: "tab-".concat(tab, "-content"),
+    onScroll: onScrollDebounced
+  }, options.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      id: "tab-".concat(item.id),
+      className: classNames('pisell-anchor-tabs-tab', {
+        'pisell-anchor-tabs-tab-active': tab === item.id
+      }),
+      onClick: function onClick() {
+        console.log('PisellAnchor: Tab div clicked', item.id);
+        handleOptionClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-anchor-tabs-tab-content",
+      onClick: function onClick(e) {
+        // 防止事件冒泡问题
+        e.stopPropagation();
+        console.log('PisellAnchor: Tab span clicked', item.id);
+        handleOptionClick(item);
+      }
+    }, item.name));
+  })), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-anchor-tabs-btn-right",
+    style: {
+      width: rightWidth
+    },
+    onClick: function onClick() {
+      return onPageChange('right');
+    }
+  }, /*#__PURE__*/React.createElement(ChevronRight, {
+    className: "pisell-anchor-tabs-btn-icon"
+  })));
+});
+export default PisellAnchor;

package/es/components/pisellAnchor/index.less

@@ -0,0 +1,197 @@
+.pisell-anchor-containers {
+  // display: flex;
+  // align-items: center;
+  // background-color: #fff;
+  // height: 40px;
+  .pisell-lowcode-anchor-wrapper {
+    &::before {
+      content: '';
+      display: none;
+    }
+    .pisell-lowcode-anchor {
+      height: 40px;
+      border-bottom: none !important;
+      background-color: #fff;
+
+      .pisell-lowcode-anchor-ink {
+        display: none;
+      }
+
+      .pisell-lowcode-anchor-link {
+        height: 100%;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+
+        &-title {
+          color: var(--Gray-900, #101828);
+          font-family: Inter;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+      }
+
+      .pisell-lowcode-anchor-link-active {
+        border-radius: 100px;
+        background: var(--theme-color, #7f56d9);
+        height: 40px;
+
+        .pisell-lowcode-anchor-link-title {
+          color: var(--White, #fff);
+          line-height: 40px;
+        }
+      }
+    }
+  }
+  .pisell-anchor-scroll {
+    height: 40px;
+    flex: 1;
+    overflow-x: auto;
+
+    // 隐藏滚动条 - Firefox
+    scrollbar-width: none;
+
+    // 隐藏滚动条 - IE and Edge
+    -ms-overflow-style: none;
+
+    // 隐藏滚动条 - Chrome, Safari, Opera
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .pisell-anchor-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: 16px;
+
+    .scroll-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover:not(.disabled) {
+        color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      &.disabled {
+        color: #d9d9d9;
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+.pisell-anchor-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+  position: relative;
+
+  .pisell-anchor-tabs-btn-left,
+  .pisell-anchor-tabs-btn-right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
+    cursor: pointer;
+    transition: width 300ms ease;
+    user-select: none;
+
+    .pisell-anchor-tabs-btn-icon {
+      width: 24px;
+      height: 24px;
+      background: #f1f1f1;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #262626;
+      font-size: 20px;
+    }
+  }
+
+  .pisell-anchor-tabs-btn-left {
+    left: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-tabs-btn-right {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-tabs-content {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding: 0;
+    gap: 16px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .pisell-anchor-tabs-tab {
+      flex: 0 0 auto;
+      padding: 0 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.3s;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      border-radius: 100px;
+
+      &:hover:not(.pisell-anchor-tabs-tab-active) {
+        color: var(--theme-color, #7f56d9);
+      }
+
+      &.pisell-anchor-tabs-tab-active {
+        color: #fff;
+        font-weight: 600;
+        background-color: var(--theme-color, #7f56d9);
+      }
+
+      .pisell-anchor-tabs-tab-content {
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.pisell-anchor {
+  border-bottom: 1px solid #EAECF0;
+
+  &.pisell-anchor-no-border {
+    border-bottom: none;
+  }
+}