anchor

src/util/index.js

@@ -508,4 +508,42 @@ export function getValidString(strs) {
       return str
     }
   }
-}
+}
\ No newline at end of file
+
+function getOffsetTop(element, container) {
+  if (!element.getClientRects().length) {
+    return 0;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  if (rect.width || rect.height) {
+    if (container === window) {
+      container = element.ownerDocument?.documentElement;
+      return rect.top - container?.clientTop;
+    }
+    return rect.top - container?.getBoundingClientRect().top;
+  }
+
+  return rect.top;
+}
+
+export function getInternalCurrentAnchor(_linkIds, _offsetTop = 0, _bounds = 5, container = window) {
+  const linkSections: Section[] = [];
+  _linkIds.forEach((id) => {
+    const target = document.getElementById(id);
+    if (target) {
+      const top = getOffsetTop(target, container);
+      if (top < _offsetTop + _bounds) {
+        linkSections.push({ id, top });
+      }
+    }
+  });
+
+  console.log('linkSections', linkSections);
+  if (linkSections.length) {
+    const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
+    return maxSection.id;
+  }
+  return '';
+};
\ No newline at end of file

src/view/Manage/Model/Component/ImportAction.jsx

@@ -6,7 +6,7 @@ import ImportActionHeader from './ImportActionHeader';
 import ImportActionInherited from './ImportActionInherited';
 import { ImportActionTable } from './ImportActionTable';
 import ImportActionIndex from './ImportActionIndex';
-import { getQueryParam } from '../../../../util';
+import { getInternalCurrentAnchor, getQueryParam } from '../../../../util';
 import { Action } from '../../../../util/constant';
 import { dispatch } from '../../../../model'; 
 
@@ -23,9 +23,12 @@ const ImportAction = React.forwardRef((props, ref) => {
   const [ supportedIndextypes, setSupportedIndextypes ] = useState([]);
   const [ validateReports, setValidateReports ] = useState([]);
   const [ loading, setLoading ] = useState(false);
+  const [container, setContainer] = useState();
+  const [activeValue, setActiveValue] = useState();
 
   const mountRef = useRef(true);
   const modelerDataRef = useRef(null);
+  const animating = useRef(false);
 
   useImperativeHandle(ref, () => ({
     isLoading: () => {
@@ -106,6 +109,36 @@ const ImportAction = React.forwardRef((props, ref) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [constraint])
 
+  React.useEffect(() => {
+    if (container) {
+      handleScroll();
+      container?.addEventListener('scroll', handleScroll);
+      return () => {
+        container?.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [container]);
+
+  const handleScroll = React.useCallback(() => {
+    if (animating.current) {
+      animating.current = false;
+      return;
+    }
+
+    const currentActiveLink = getInternalCurrentAnchor(
+      [
+        'model-import-action-header',
+        'model-import-action-table',
+        'model-import-action-index',
+      ],
+      0,
+      5,
+      container
+    );
+    
+    setActiveValue(currentActiveLink)
+  }, [container]);
+
   const getTemplates = () => {
     dispatch({
       type: 'datamodel.getAllTemplates',
@@ -542,17 +575,20 @@ const ImportAction = React.forwardRef((props, ref) => {
           {loading?'':'暂无权限'}
         </div> : <div>
         <div style={{ position: 'sticky', top: 0  }}>
-          <Tabs centered onChange={(val) => {
-            var targetElements = document.getElementsByClassName(val); // 找到目标元素
-            for (const element of targetElements) {
-              element?.scrollIntoView()
+          <Tabs activeKey={activeValue} centered onChange={(val) => {
+            setActiveValue(val);
+            var targetElement = document.getElementById(val); // 找到目标元素
+            if (targetElement) {
+              animating.current = true;
+              targetElement.scrollIntoView();
             }
           }} style={{ margin: 0 }}>
-            <Tabs.TabPane tab='基本信息' key="1" />
+            <Tabs.TabPane tab='基本信息' key="model-import-action-header" />
             <Tabs.TabPane tab='数据表结构' key="model-import-action-table" />
+            <Tabs.TabPane tab='数据表索引' key="model-import-action-index" />
           </Tabs>
         </div>
-        <div style={{ height: 'calc(100vh - 44px - 64px - 82px)', overflow: 'auto', padding: '0 20px' }}>
+        <div ref={setContainer} style={{ height: 'calc(100vh - 44px - 64px - 82px)', overflow: 'auto', padding: '0 20px' }}>
           <ImportActionHeader 
             form={form}
             editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 

src/view/Manage/Model/Component/ImportActionHeader.jsx

@@ -305,7 +305,7 @@ const ImportActionHeader = (props) => {
   }
 
   return (
-    <div className='model-import-action-header'>
+    <div className='model-import-action-header' id='model-import-action-header'>
     <div 
       className='mb-3'
       style={{ 

src/view/Manage/Model/Component/ImportActionIndex.jsx

@@ -840,7 +840,7 @@ const ImportActionIndex = (props) => {
   }
 
   return (
-    <div className='model-import-action-index'>
+    <div className='model-import-action-index' id='model-import-action-index'>
       <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
         <Space>
           <h2 style={{ marginBottom: 0 }}>数据表索引</h2>