@pisell/materials 6.0.18 → 6.0.20

package/es/components/login-and-register/index.js

@@ -16,6 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useEffect } from 'react';
 import { Input, Button, Space, Form, Checkbox } from 'antd';
 import { GoogleOutlined, AppleOutlined, FacebookOutlined } from '@ant-design/icons';
+import { getText } from "../../locales/index";
 import "./index.less";
 /**
  * loginAndRegister组件的属性接口
@@ -38,13 +39,13 @@ var loginAndRegister = function loginAndRegister(_ref) {
       height: 48
     } : _ref$logoSize,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Log in to your account' : _ref$title,
+    title = _ref$title === void 0 ? getText('Log in to your account') : _ref$title,
     _ref$showTitle = _ref.showTitle,
     showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
     _ref$titleAlign = _ref.titleAlign,
     titleAlign = _ref$titleAlign === void 0 ? 'center' : _ref$titleAlign,
     _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? 'Welcome back! Please enter your details.' : _ref$subtitle,
+    subtitle = _ref$subtitle === void 0 ? getText('pisell-login-and-register-subtit') : _ref$subtitle,
     _ref$showSubtitle = _ref.showSubtitle,
     showSubtitle = _ref$showSubtitle === void 0 ? false : _ref$showSubtitle,
     _ref$subtitleAlign = _ref.subtitleAlign,
@@ -54,35 +55,35 @@ var loginAndRegister = function loginAndRegister(_ref) {
     _ref$defaultLoginMeth = _ref.defaultLoginMethod,
     defaultLoginMethod = _ref$defaultLoginMeth === void 0 ? 'email' : _ref$defaultLoginMeth,
     _ref$emailLabel = _ref.emailLabel,
-    emailLabel = _ref$emailLabel === void 0 ? 'Email' : _ref$emailLabel,
+    emailLabel = _ref$emailLabel === void 0 ? getText('pisell-login-and-register-email-label') : _ref$emailLabel,
     _ref$passwordLabel = _ref.passwordLabel,
-    passwordLabel = _ref$passwordLabel === void 0 ? 'Password' : _ref$passwordLabel,
+    passwordLabel = _ref$passwordLabel === void 0 ? getText('pisell-login-and-register-password-label') : _ref$passwordLabel,
     _ref$emailPlaceholder = _ref.emailPlaceholder,
-    emailPlaceholder = _ref$emailPlaceholder === void 0 ? 'Enter your email' : _ref$emailPlaceholder,
+    emailPlaceholder = _ref$emailPlaceholder === void 0 ? getText('pisell-login-and-register-email-placeholder') : _ref$emailPlaceholder,
     _ref$passwordPlacehol = _ref.passwordPlaceholder,
-    passwordPlaceholder = _ref$passwordPlacehol === void 0 ? 'Enter your password' : _ref$passwordPlacehol,
+    passwordPlaceholder = _ref$passwordPlacehol === void 0 ? getText('pisell-login-and-register-password-placeholder') : _ref$passwordPlacehol,
     _ref$emailRules = _ref.emailRules,
     emailRules = _ref$emailRules === void 0 ? [{
       required: true,
-      message: 'Please input your email!'
+      message: getText('pisell-login-and-register-email-error')
     }, {
       type: 'email',
-      message: 'Please enter a valid email!'
+      message: getText('pisell-login-and-register-email-error-valid')
     }] : _ref$emailRules,
     _ref$buttonText = _ref.buttonText,
-    buttonText = _ref$buttonText === void 0 ? 'Log in' : _ref$buttonText,
+    buttonText = _ref$buttonText === void 0 ? getText('Log in') : _ref$buttonText,
     _ref$socialLoginTexts = _ref.socialLoginTexts,
     socialLoginTexts = _ref$socialLoginTexts === void 0 ? {
-      google: 'Continue with Google',
-      facebook: 'Continue with Facebook',
-      apple: 'Continue with Apple'
+      google: getText('pisell-login-and-register-google'),
+      facebook: getText('pisell-login-and-register-facebook'),
+      apple: getText('pisell-login-and-register-apple')
     } : _ref$socialLoginTexts,
     _ref$showFooter = _ref.showFooter,
     showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
     _ref$showSignUp = _ref.showSignUp,
     showSignUp = _ref$showSignUp === void 0 ? true : _ref$showSignUp,
     _ref$signUpText = _ref.signUpText,
-    signUpText = _ref$signUpText === void 0 ? "Don't have an account? Sign up" : _ref$signUpText,
+    signUpText = _ref$signUpText === void 0 ? getText('pisell-login-and-register-sign-up') : _ref$signUpText,
     _ref$signUpLink = _ref.signUpLink,
     signUpLink = _ref$signUpLink === void 0 ? '' : _ref$signUpLink,
     _ref$signUpPosition = _ref.signUpPosition,
@@ -94,19 +95,19 @@ var loginAndRegister = function loginAndRegister(_ref) {
     _ref$showTabs = _ref.showTabs,
     showTabs = _ref$showTabs === void 0 ? true : _ref$showTabs,
     _ref$loginTabText = _ref.loginTabText,
-    loginTabText = _ref$loginTabText === void 0 ? 'Login' : _ref$loginTabText,
+    loginTabText = _ref$loginTabText === void 0 ? getText('pisell-login-and-register-login-tab') : _ref$loginTabText,
     _ref$registerTabText = _ref.registerTabText,
-    registerTabText = _ref$registerTabText === void 0 ? 'Register' : _ref$registerTabText,
+    registerTabText = _ref$registerTabText === void 0 ? getText('pisell-login-and-register-register-tab') : _ref$registerTabText,
     _ref$registerEmailPla = _ref.registerEmailPlaceholder,
-    registerEmailPlaceholder = _ref$registerEmailPla === void 0 ? 'Enter your email' : _ref$registerEmailPla,
+    registerEmailPlaceholder = _ref$registerEmailPla === void 0 ? getText('pisell-login-and-register-register-email-placeholder') : _ref$registerEmailPla,
     _ref$registerPassword = _ref.registerPasswordPlaceholder,
-    registerPasswordPlaceholder = _ref$registerPassword === void 0 ? 'Create a password' : _ref$registerPassword,
+    registerPasswordPlaceholder = _ref$registerPassword === void 0 ? getText('pisell-login-and-register-register-password-placeholder') : _ref$registerPassword,
     _ref$registerButtonTe = _ref.registerButtonText,
-    registerButtonText = _ref$registerButtonTe === void 0 ? 'Create account' : _ref$registerButtonTe,
+    registerButtonText = _ref$registerButtonTe === void 0 ? getText('pisell-login-and-register-register-button-text') : _ref$registerButtonTe,
     _ref$rememberMeText = _ref.rememberMeText,
-    rememberMeText = _ref$rememberMeText === void 0 ? 'Remember me' : _ref$rememberMeText,
+    rememberMeText = _ref$rememberMeText === void 0 ? getText('pisell-login-and-register-remember-me') : _ref$rememberMeText,
     _ref$forgotPasswordTe = _ref.forgotPasswordText,
-    forgotPasswordText = _ref$forgotPasswordTe === void 0 ? 'Forgot password?' : _ref$forgotPasswordTe,
+    forgotPasswordText = _ref$forgotPasswordTe === void 0 ? getText('pisell-login-and-register-forgot-password') : _ref$forgotPasswordTe,
     _ref$showRememberMe = _ref.showRememberMe,
     showRememberMe = _ref$showRememberMe === void 0 ? false : _ref$showRememberMe,
     _ref$showForgotPasswo = _ref.showForgotPassword,
@@ -218,6 +219,7 @@ var loginAndRegister = function loginAndRegister(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  console.log(registerButtonText, 'registerButtonText');
   return /*#__PURE__*/React.createElement("div", {
     className: "saas-login-main"
   }, /*#__PURE__*/React.createElement("div", {
@@ -285,7 +287,7 @@ var loginAndRegister = function loginAndRegister(_ref) {
     loading: loading,
     onClick: handleEmailLogin,
     className: "saas-login-button"
-  }, "Log in")) : /*#__PURE__*/React.createElement(Form, {
+  }, getText('pisell-login-and-register-login'))) : /*#__PURE__*/React.createElement(Form, {
     form: form
   }, /*#__PURE__*/React.createElement(Form.Item, {
     name: "email",

package/es/components/login-and-register/index.less

@@ -67,7 +67,7 @@
       position: relative;
       
       &.active {
-        color: #7F56D9;
+        color: var(--theme-color);
         
         &:after {
           content: '';
@@ -76,7 +76,7 @@
           left: 0;
           right: 0;
           height: 2px;
-          background: #7F56D9;
+          background: var(--theme-color);
         }
       }
       
@@ -105,11 +105,11 @@
       background: #FFF;
       
       &:hover {
-        border-color: #7F56D9;
+        border-color: var(--theme-color);
       }
       
       &:focus {
-        border-color: #7F56D9;
+        border-color: var(--theme-color);
         box-shadow: 0 0 0 4px rgba(127, 86, 217, 0.1);
       }
 
@@ -126,7 +126,7 @@
     .saas-login-button {
       height: 44px;
       border-radius: 8px;
-      background: #7F56D9;
+      background: var(--theme-color);
       border: none;
       font-weight: 500;
       
@@ -135,7 +135,7 @@
       }
       
       &:focus {
-        background: #7F56D9;
+        background: var(--theme-color);
         box-shadow: 0 0 0 4px rgba(127, 86, 217, 0.1);
       }
     }
@@ -185,7 +185,7 @@
       margin-bottom: 16px;
       
       a {
-        color: #7F56D9;
+        //color: #7F56D9;
         margin-left: 4px;
         cursor: pointer;
         

package/es/components/page/index.js

@@ -63,7 +63,7 @@ var Page = function Page(props) {
         // cssVar: { key: 'app' },
         token: _objectSpread(_objectSpread({}, props.theme.token), {}, {
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
-          colorPrimary: (props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.token) === null || _props$theme === void 0 ? void 0 : _props$theme.colorPrimary) || themeColor || '#7F56D9'
+          colorPrimary: (props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.token) === null || _props$theme === void 0 ? void 0 : _props$theme.colorPrimary) || themeColor || '#5D3F9F'
         })
       });
     }
@@ -100,10 +100,10 @@ var Page = function Page(props) {
           colorErrorBg: '#FEF3F2',
           colorErrorBorderHover: '#FDA29B',
           colorErrorOutline: 'rgba(217, 45, 32, 0.06)',
-          colorLink: '#175CD3',
-          colorLinkActive: '#194185',
-          colorLinkHover: '#1849A9',
-          // colorPrimaryActive: '#7f56d9',
+          colorLink: '#7F56DA',
+          colorLinkActive: '#5F3DA8',
+          colorLinkHover: '#6D48C4',
+          // colorPrimaryActive: '#5D3F9F',
           // colorPrimaryBorder: '#E9D7FE',
           colorText: '#344054',
           colorTextDisabled: '#D0D5DD',
@@ -150,59 +150,25 @@ var Page = function Page(props) {
         Select: {
           fontSizeIcon: 16
           // "lineHeight": 1
+        },
+        Menu: {
+          subMenuItemSelectedColor: "#9976e3"
         }
       },
       token: {
-        colorPrimary: themeColor || '#7F56D9',
-        // colorPrimaryBg: '#F9F5FF',
-        // colorPrimaryBgHover: '#F4EBFF',
-        // colorPrimaryBorder: '#E9D7FE',
-        // colorPrimaryBorderHover: '#D6BBFB',
-        // colorPrimaryHover: '#6941C6',
-        // colorPrimaryActive: '#53389E',
-        // colorPrimaryTextHover: '#53389E',
-        // colorPrimaryText: '#6941C6',
-        // colorPrimaryTextActive: '#42307D',
-        colorSuccess: '#079455',
-        colorSuccessBg: '#ECFDF3',
-        colorSuccessBgHover: '#DCFAE6',
-        colorSuccessBorder: '#ABEFC6',
-        colorSuccessBorderHover: '#75E0A7',
-        colorSuccessHover: '#067647',
-        colorSuccessText: '#067647',
-        colorSuccessActive: '#085D3A',
-        colorSuccessTextHover: '#085D3A',
-        colorSuccessTextActive: '#074D31',
-        colorWarning: '#dc6803',
-        colorWarningBg: '#FFFAEB',
-        colorWarningBgHover: '#FEF0C7',
-        colorWarningBorder: '#FEDF89',
-        colorWarningBorderHover: '#FEC84B',
-        colorWarningHover: '#B54708',
-        colorWarningText: '#B54708',
-        colorWarningActive: '#93370D',
-        colorWarningTextHover: '#93370D',
-        colorWarningTextActive: '#7A2E0E',
-        colorError: '#d92d20',
-        colorErrorBg: '#FEF3F2',
-        colorErrorBgHover: '#FEE4E2',
-        colorErrorBorder: '#FECDCA',
-        colorErrorBorderHover: '#FDA29B',
-        colorErrorHover: '#B42318',
-        colorErrorText: '#B42318',
-        colorErrorActive: '#912018',
-        colorErrorTextHover: '#912018',
-        colorErrorTextActive: '#7A271A',
-        colorInfo: '#1570ef',
-        colorInfoBg: '#EFF8FF',
-        colorInfoBgHover: '#D1E9FF',
-        colorInfoBorder: '#B2DDFF',
-        colorInfoBorderHover: '#84CAFF',
-        colorInfoHover: '#175CD3',
-        colorInfoText: '#175CD3',
-        colorInfoActive: '#1849A9',
-        colorInfoTextHover: '#1849A9',
-        colorInfoTextActive: '#194185',
+        colorPrimary: themeColor || '#5D3F9F',
+        colorPrimaryBg: '#eee5ff',
+        colorPrimaryBgHover: '#e4d9fc',
+        colorPrimaryBorder: '#d4c3f7',
+        colorSuccess: '#5f9e3f',
+        colorInfo: '#5d3f9f',
+        colorError: '#f5222d',
+        colorSuccessBg: '#e5fcd9',
+        colorSuccessBgHover: '#d5f7c3',
+        // 链接色
+        colorLink: '#7F56DA',
+        colorLinkActive: '#5F3DA8',
+        colorLinkHover: '#6D48C4',
         colorText: '#101828',
         colorTextSecondary: '#475467',
         colorTextTertiary: '#667085',
@@ -226,7 +192,7 @@ var Page = function Page(props) {
     return createTheme({
       palette: {
         primary: {
-          main: ((_theme$token = theme.token) === null || _theme$token === void 0 ? void 0 : _theme$token.colorPrimary) || '#7F56D9'
+          main: ((_theme$token = theme.token) === null || _theme$token === void 0 ? void 0 : _theme$token.colorPrimary) || '#5D3F9F'
         }
       }
     });
@@ -255,7 +221,7 @@ var Page = function Page(props) {
     variables: ((_context$engine2 = context.engine) === null || _context$engine2 === void 0 || (_context$engine2 = _context$engine2.props) === null || _context$engine2 === void 0 ? void 0 : _context$engine2.variables) || {}
   }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread(_objectSpread({}, style), {}, {
-      '--theme-color': themeColor || '#7F56D9'
+      '--theme-color': themeColor || '#5D3F9F'
     }),
     className: className
   }, children))))))));

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;