anchor

src/view/Manage/Model/Component/EditModel.less

@@ -6,24 +6,21 @@
     padding: 0 15px;
     background-color: #464d6e;
     align-items: center;
-    position: fixed; 
+    // position: fixed; 
     justify-content: space-between; 
     border-bottom: 1px solid #EFEFEF;
-    z-index: 100;
+    // z-index: 100;
   }
 
   .edit-container {
-    top: 44px;
-    width: 100%;
-    height: calc(100vh - 44px - 64px);
-    overflow: auto;
     background: #EDF0F5;
-    padding: 10px 20px;
-    position: absolute;
+    height: calc(100vh - 44px - 64px);
+    overflow: hidden;
   }
 
   .edit-container-card {
-    padding: 20px;
+    margin: 10px 20px;
+    height: calc(100vh - 44px - 64px - 20px);
     background: #fff;
   }
 

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

 import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
-import { Spin } from 'antd';
+import { Spin, Tabs, Anchor, Affix, Button } from 'antd';
 import LocalStorage from 'local-storage';
 
 import ImportActionHeader from './ImportActionHeader'; 
@@ -538,46 +538,57 @@ const ImportAction = React.forwardRef((props, ref) => {
   return (
     <Spin spinning={loading}>
       {
-        (action==='detail' && ((modelerData||{}).optionList||[]).findIndex(item => item.enabled && item.name==='查看') === -1) ? <span>
+        (action==='detail' && ((modelerData||{}).optionList||[]).findIndex(item => item.enabled && item.name==='查看') === -1) ? <div style={{ padding: '10px 20px' }}>
           {loading?'':'暂无权限'}
-        </span> : <React.Fragment>
-        <ImportActionHeader 
-          form={form}
-          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
-          modelerData={modelerData||{}} 
-          constraints={constraints}
-          templates={templates}
-          validateReports={validateReports}
-          onTemplateChange={onTemplateChange}
-          onConstraintChange={onConstraintChange}
-          onChange={onHeaderChange}
-          terms={terms}
-          supportedPartitionTypes={supportedPartitionTypes} 
-        />   
-        <ImportActionInherited modelerData={modelerData} action={action} />
-        <ImportActionTable 
-          modelerData={modelerData||{}}
-          constraint={constraint} 
-          template={template}
-          validateReports={validateReports}
-          supportedDatatypes={supportedDatatypes} 
-          onChange={onTableChange} 
-          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
-          action={action} 
-          originAction={getQueryParam(Action, props?.location?.search)}
-          terms={terms}
-        /> 
-        <ImportActionIndex 
-          modelerData={modelerData||{}} 
-          constraint={constraint} 
-          template={template}
-          types={supportedIndextypes}
-          validateReports={validateReports}
-          onChange={onIndexChange} 
-          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
-          terms={terms}
-        />
-        </React.Fragment>
+        </div> : <div>
+        <div style={{ position: 'sticky', top: 0  }}>
+          <Tabs centered onChange={(val) => {
+            var targetElement = document.getElementById(val); // 找到目标元素
+            targetElement?.scrollIntoView()
+          }} style={{ margin: 0 }}>
+            <Tabs.TabPane tab='基本信息' key="1" />
+            <Tabs.TabPane tab='数据表结构' key="model-import-action-table" />
+          </Tabs>
+        </div>
+        <div 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'} 
+            modelerData={modelerData||{}} 
+            constraints={constraints}
+            templates={templates}
+            validateReports={validateReports}
+            onTemplateChange={onTemplateChange}
+            onConstraintChange={onConstraintChange}
+            onChange={onHeaderChange}
+            terms={terms}
+            supportedPartitionTypes={supportedPartitionTypes} 
+          />   
+          <ImportActionInherited modelerData={modelerData} action={action} />
+          <ImportActionTable 
+            modelerData={modelerData||{}}
+            constraint={constraint} 
+            template={template}
+            validateReports={validateReports}
+            supportedDatatypes={supportedDatatypes} 
+            onChange={onTableChange} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
+            action={action} 
+            originAction={getQueryParam(Action, props?.location?.search)}
+            terms={terms}
+          /> 
+          <ImportActionIndex 
+            modelerData={modelerData||{}} 
+            constraint={constraint} 
+            template={template}
+            types={supportedIndextypes}
+            validateReports={validateReports}
+            onChange={onIndexChange} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
+            terms={terms}
+          />
+        </div>
+        </div>
       }
     </Spin>
   );

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

@@ -1177,7 +1177,7 @@ export const ImportActionTable = (props) => {
   }
 
   return (
-    <div className='model-import-action-table'>
+    <div className='model-import-action-table' id='model-import-action-table'>
       <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Space>
           <h2 style={{ marginBottom: 0 }}>数据表结构</h2>