@fe-free/core 4.1.37 → 4.1.38

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fe-free/core
 
+## 4.1.38
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/icons@4.1.38
+  - @fe-free/tool@4.1.38
+
 ## 4.1.37
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "4.1.37",
+  "version": "4.1.38",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -50,8 +50,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.37",
-    "@fe-free/tool": "4.1.37"
+    "@fe-free/icons": "4.1.38",
+    "@fe-free/tool": "4.1.38"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/index.ts

@@ -58,6 +58,7 @@ export type { PageLayoutProps, PageLayoutTabsProps } from './page_layout';
 export { Record, RecordArray } from './record';
 export type { RecordArrayProps, RecordProps } from './record';
 export { routeTool } from './route';
+export { ScrollFixed, getScrollbarWidth, useScrollFixed } from './scroll';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';
 export { Tabs } from './tabs';

package/src/scroll/helper.tsx

@@ -0,0 +1,23 @@
+function getScrollbarWidth() {
+  const target = document.body;
+
+  // 创建一个不可见的 div 元素
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // 强制显示滚动条
+  target.appendChild(outer);
+
+  // 创建一个内部 div，宽度为 100%
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // 滚动条宽度 = 外部容器的宽度 - 内部内容的宽度
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  // 清理 DOM
+  target.removeChild(outer);
+
+  return scrollbarWidth;
+}
+
+export { getScrollbarWidth };

package/src/scroll/index.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getScrollbarWidth } from './helper';
+
+function useScrollFixed({ ref }: { ref: React.RefObject<HTMLElement | null> }) {
+  const [marginRight, setMarginRight] = useState(0);
+
+  const scrollbarWidth = useMemo(() => {
+    return getScrollbarWidth();
+  }, []);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const updateMargin = () => {
+      const hasVerticalScrollbar = el.scrollHeight > el.clientHeight;
+      setMarginRight(hasVerticalScrollbar ? scrollbarWidth : 0);
+    };
+
+    updateMargin();
+
+    const resizeObserver = new ResizeObserver(updateMargin);
+    resizeObserver.observe(el);
+    el.addEventListener('scroll', updateMargin);
+
+    return () => {
+      resizeObserver.disconnect();
+      el.removeEventListener('scroll', updateMargin);
+    };
+  }, [ref, scrollbarWidth]);
+
+  return { marginRight };
+}
+
+function ScrollFixed({
+  refScroll,
+  className,
+  children,
+  ...rest
+}: {
+  refScroll?: React.RefObject<HTMLDivElement | null>;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = refScroll || innerRef;
+  const { marginRight } = useScrollFixed({ ref });
+
+  return (
+    <div ref={ref} {...rest} className={classNames('h-full w-full overflow-y-auto', className)}>
+      <div style={{ marginRight: `-${marginRight || 0}px` }}>{children}</div>
+    </div>
+  );
+}
+
+export { getScrollbarWidth, ScrollFixed, useScrollFixed };