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,9 +538,19 @@ 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>
+        </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'} 
@@ -577,7 +587,8 @@ const ImportAction = React.forwardRef((props, ref) => {
             editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
             terms={terms}
           />
-        </React.Fragment>
+        </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>