@pisell/materials 1.0.747 → 1.0.749

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AppVersionControlProps } from './types';
 import './index.less';
 declare const AppVersionControl: (props: AppVersionControlProps) => JSX.Element;

package/es/components/auto-complete-number/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AutoCompleteProps, InputNumberProps } from "antd";
 interface AutoCompleteNumberProps {
     autoCompleteProps: AutoCompleteProps;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BadgeProps as OriginalBadgeprops } from 'antd';
 import './index.less';
 export interface Badgeprops extends OriginalBadgeprops {

package/es/components/batch-editor/fields/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     price: import("react").FC<import("./Price").PriceProps>;
     image: (props: import("./Image").ImageProps) => JSX.Element | null;

package/es/components/batch-editor/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 interface BatchEditorProps {
     columns: any[];

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Calendar: (props: any) => JSX.Element;
 export default Calendar;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 declare const _default: (props: any) => JSX.Element;
 export default _default;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare const ClassicLayout: (props: any) => JSX.Element;
 export default ClassicLayout;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ColorPickerProps } from 'antd';
 declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
 export default ColorPicker;

package/es/components/dataSourceComponents/dataSourceForm/formItem.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const FormItem: (props: any) => JSX.Element;
 export default FormItem;

package/es/components/dataSourceComponents/dataSourceShow/dataSourceImage/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DataSourceImage: (props: import("../utils").ParsedProps) => JSX.Element;
 export default DataSourceImage;

package/es/components/dataSourceComponents/dataSourceShow/dataSourceQRCode/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DataSourceQRCode: (props: any) => JSX.Element;
 export default DataSourceQRCode;

package/es/components/dataSourceComponents/dataSourceTable/filter/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 interface BaseFilterItem {
     name?: string;

package/es/components/dataSourceComponents/dataSourceTable/filter/utils.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterItemProps } from '../../../filter/types';
 import { DataSourceType, Field } from '../../provider/dataSource/DataSourceContext';
 export declare const genGetField: (dataSource?: DataSourceType) => (key: string) => Field;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const useDataSourceKey: () => {
     dataSourceKey: string | undefined;
     dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Drawer } from 'antd';
 import { OperationItem } from '../type';
 declare const useDrawerState: (operationContent?: {

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataSourceTableProps } from '../type';
 declare type Params = {
     pagination?: {

package/es/components/dataSourceComponents/dataSourceWrapper/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataSourceContextProps } from '../provider/dataSource/DataSourceContext';
 declare const DataSourceWrapper: (props: DataSourceContextProps) => JSX.Element;
 export default DataSourceWrapper;

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -60,7 +60,13 @@ declare const formFieldMap: {
     FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => (import("react").FC<import("./Input/type").InputProps> & {
+declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
+    Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
+} & {
+    Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
+}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
+    onChange: (value: string) => void;
+} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
     JSON: import("react").FC<any>;
     Password: import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     TextArea: import("react").FC<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
@@ -80,11 +86,7 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
         name?: string | undefined;
         fieldKey?: string | undefined;
     } & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
-}) | import("react").FC<any> | (import("react").FC<{}> & {
-    Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-} & {
-    Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<{}> & {
+}) | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -96,7 +98,5 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
     extraParams?: Record<string, any> | undefined;
 } & {
     dataSource?: any;
-}) => JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
-    onChange: (value: string) => void;
-} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+}) => JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent, formFieldMap };

package/es/components/drag-sort-tree/TreeItem/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 import { ValueProps, SortType } from '../types';
 declare type IdType = string | number;

package/es/components/drag-sort-tree/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SortType } from './types';
 declare const DragSortTree: (props: SortType) => JSX.Element;
 export default DragSortTree;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Dropdown: (props: any) => JSX.Element;
 export default Dropdown;

package/es/components/filter/components/items/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const fieldMaps: {
     text: {
         field: {

package/es/components/filter/components/items/text/Editor/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Text: () => JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/Preview/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Text: (props: any) => JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterProps } from "./types";
 declare const Filter: (props: FilterProps) => JSX.Element | null;
 export default Filter;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare const List: {
     (props: any): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type LowCodePageProps = {
     id: number;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputNumberProps } from 'antd/es/input-number';
 export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
     value?: number;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 export interface PisellAdjustPriceProps {
     value?: number;

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

@@ -19,5 +19,5 @@ export interface PisellAnchorProps {
      */
     platform?: 'pc' | 'h5';
 }
-declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
+declare const PisellAnchor: React.FC<PisellAnchorProps>;
 export default PisellAnchor;

package/es/components/pisellAnchor/index.js

@@ -5,27 +5,25 @@ 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; }
-import React, { useState, forwardRef, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import { useDebounceFn, useThrottleFn } from 'ahooks';
+import { useDebounceFn } 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 PisellAnchor = function PisellAnchor(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    tab = _ref.tab,
+    className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange,
+    onTabClick = _ref.onTabClick,
+    containerRef = _ref.containerRef,
+    _ref$platform = _ref.platform,
+    platform = _ref$platform === void 0 ? 'pc' : _ref$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],
@@ -38,12 +36,8 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
     _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,
@@ -53,199 +47,124 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [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 handleHorizontalScroll = useDebounceFn(function (e) {
+    var target = e.target;
+    var scrollLeft = target.scrollLeft,
+      scrollWidth = target.scrollWidth,
+      clientWidth = target.clientWidth;
+    setLeftWidth(scrollLeft > 0 ? 40 : 0);
+    setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
+  }, {
+    wait: 200
+  }).run;
+
+  // 处理内容区域滚动
+  var handleContentScroll = useDebounceFn(function () {
+    if (isClickScrolling.current || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+    var container = containerRef.current;
+    var scrollTop = container.scrollTop;
+    var containerHeight = container.clientHeight;
+    var scrollHeight = container.scrollHeight;
+    // 优先检查是否滚动到底部
+    var isAtBottom = Math.abs(scrollTop + containerHeight - scrollHeight) < 1;
+    if (isAtBottom) {
+      var lastOption = options[options.length - 1];
+      if (lastOption && tab !== lastOption.id) {
+        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;
-            }
+    // 如果不在底部，再计算可视占比
+    var maxVisibleRatio = 0;
+    var activeOption = null;
+    var _iterator = _createForOfIteratorHelper(options),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+        var element = document.querySelector("[data-section=\"".concat(option.id, "\"]"));
+        if (element instanceof HTMLElement) {
+          var elementTop = element.offsetTop;
+          var elementHeight = element.offsetHeight;
+          var elementBottom = elementTop + elementHeight;
+          var visibleTop = Math.max(elementTop, scrollTop);
+          var visibleBottom = Math.min(elementBottom, scrollTop + containerHeight);
+          var visibleHeight = Math.max(0, visibleBottom - visibleTop);
+          var visibleRatio = visibleHeight / elementHeight;
+          if (visibleRatio > maxVisibleRatio) {
+            maxVisibleRatio = visibleRatio;
+            activeOption = 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;
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (activeOption && tab !== activeOption.id) {
+      onChange === null || onChange === void 0 || onChange(activeOption.id);
+    }
+  }, {
+    wait: 100
+  }).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);
+    var container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    if (!container) return;
+    container.addEventListener('scroll', handleContentScroll);
     return function () {
-      container.removeEventListener('scroll', handleScroll);
+      return container.removeEventListener('scroll', handleContentScroll);
     };
-  }, [handleScrollThrottled]);
+  }, [handleContentScroll]);
 
-  // 点击选项时更新选中项并滚动
+  // 点击锚点，滚动到对应位置
   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) {
+    var targetElement = document.querySelector("[data-section=\"".concat(item.id, "\"]"));
+    if (targetElement instanceof HTMLElement && 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);
+      // 计算目标元素之前所有元素的高度总和
+      var scrollDistance = 0;
+      var _iterator2 = _createForOfIteratorHelper(options),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var option = _step2.value;
+          if (option.id === item.id) break;
+          var element = document.querySelector("[data-section=\"".concat(option.id, "\"]"));
+          if (element instanceof HTMLElement) {
+            scrollDistance += element.offsetHeight;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      containerRef.current.scrollTo({
+        top: scrollDistance,
+        behavior: 'smooth'
       });
-
-      // 延迟重置状态
-      scrollTimeoutRef.current = setTimeout(function () {
+      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) {
+  var handlePageChange = function handlePageChange(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,
+        left: scrollLeft + (type === 'left' ? -clientWidth : clientWidth),
         behavior: 'smooth'
       });
     }
@@ -259,34 +178,25 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
       width: leftWidth
     },
     onClick: function onClick() {
-      return onPageChange('left');
+      return handlePageChange('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
+    onScroll: handleHorizontalScroll
   }, 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);
+        return 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);
-      }
+      className: "pisell-anchor-tabs-tab-content"
     }, item.name));
   })), showButtons && /*#__PURE__*/React.createElement("div", {
     className: "pisell-anchor-tabs-btn-right",
@@ -294,10 +204,10 @@ var PisellAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
       width: rightWidth
     },
     onClick: function onClick() {
-      return onPageChange('right');
+      return handlePageChange('right');
     }
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: "pisell-anchor-tabs-btn-icon"
   })));
-});
+};
 export default PisellAnchor;