左侧操作栏拖动与布局调整

dlink-web/src/app.tsx

@@ -161,7 +161,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     /*waterMarkProps: {
       content: initialState?.currentUser?.name,
     },*/
-    footerRender: () => <Footer />,
+    // footerRender: () => <Footer />,
     onPageChange: () => {
       const { location } = history;
       // 如果没有登录，重定向到 login

dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx

 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
-import {Button, Tag, Space, Typography, Divider, Badge, Drawer, Modal,} from 'antd';
+import {Button, Tag, Space, Typography, Divider, Badge, Drawer, Modal} from 'antd';
 import {MessageOutlined,ClusterOutlined,FireOutlined,ReloadOutlined,RocketOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
 import {handleRemove, queryData} from "@/components/Common/crud";

dlink-web/src/components/Studio/StudioConsole/index.tsx

@@ -10,7 +10,6 @@ import StudioHistory from "./StudioHistory";
 import StudioFX from "./StudioFX";
 import StudioCA from "./StudioCA";
 import StudioProcess from "./StudioProcess";
-
 const { TabPane } = Tabs;
 
 
@@ -18,7 +17,8 @@ const { TabPane } = Tabs;
 const StudioConsole = (props:any) => {
 
   return (
-    <Tabs defaultActiveKey="StudioMsg" size="small"  tabPosition="top" style={{ border: "1px solid #f0f0f0",margin: "0 32px"}}>
+    <Tabs defaultActiveKey="StudioMsg" size="small"  tabPosition="top" style={{
+      border: "1px solid #f0f0f0",height:"50%",overflow:"auto",width: "100%"}}>
       <TabPane
         tab={
           <span>

dlink-web/src/components/Studio/StudioLeftTool/index.tsx

@@ -15,20 +15,20 @@ const { TabPane } = Tabs;
 const StudioLeftTool = (props:any) => {
 
   return (
-    <Tabs defaultActiveKey="1" size="small" tabPosition="left" style={{ height: "100%",border: "1px solid #f0f0f0"}}>
-      <TabPane tab={<span><BarsOutlined/> 目录</span>} key="StudioTree" >
+    <Tabs defaultActiveKey="1" size="small" tabPosition="left" style={{ height: "100%"}}>
+      <TabPane tab={<span><BarsOutlined/> 目录</span>} key="StudioTree">
         <StudioTree/>
       </TabPane>
-      <TabPane tab={<span><MessageOutlined /> 会话</span>} key="Connectors" >
+      <TabPane tab={<span><MessageOutlined /> 会话</span>} key="Connectors">
         <StudioConnector />
       </TabPane>
-      <TabPane tab={<span><ClusterOutlined /> 集群</span>} key="Cluster" >
+      <TabPane tab={<span><ClusterOutlined /> 集群</span>} key="Cluster">
         <StudioCluster />
       </TabPane>
-      <TabPane tab={<span><DatabaseOutlined /> 数据源</span>} key="DataSource" >
+      <TabPane tab={<span><DatabaseOutlined /> 数据源</span>} key="DataSource">
         <StudioDataBase />
       </TabPane>
-      <TabPane tab={<span><AppstoreOutlined /> 元数据</span>} key="MetaData" >
+      <TabPane tab={<span><AppstoreOutlined /> 元数据</span>} key="MetaData">
         <StudioMetaData />
       </TabPane>
       <TabPane tab={<span><FunctionOutlined /> 函数</span>} key="Function" >

dlink-web/src/components/Studio/StudioRightTool/index.tsx

@@ -16,7 +16,7 @@ const StudioRightTool = (props:any) => {
   // const [form] = Form.useForm();
   const {form} = props;
   return (
-    <Tabs defaultActiveKey="1" size="small" tabPosition="right"  style={{ height: "100%",border: "1px solid #f0f0f0"}}>
+    <Tabs defaultActiveKey="1" size="small" tabPosition="right"  style={{ height: "100%",overflow:"auto",border: "1px solid #f0f0f0"}}>
       <TabPane tab={<span><SettingOutlined /> 作业配置</span>} key="StudioSetting" >
         <StudioSetting form={form} />
       </TabPane>

dlink-web/src/components/Studio/StudioTabs/index.tsx

@@ -59,7 +59,6 @@ const EditorTabs = (props: any) => {
   };
 
   return (
-    <>
       <Tabs
         hideAdd
         type="editable-card"
@@ -68,7 +67,7 @@ const EditorTabs = (props: any) => {
         activeKey={tabs.activeKey+''}
         onEdit={onEdit}
         className={styles["edit-tabs"]}
-        style={{height:"100%"}}
+        style={{height:"50%"}}
       >
         {tabs.panes.map(pane => (
           <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
@@ -76,7 +75,7 @@ const EditorTabs = (props: any) => {
           </TabPane>
         ))}
       </Tabs>
-      </>
+
     )
 };
 

dlink-web/src/components/Studio/index.tsx

-import React from "react";
+import React, {useEffect, useRef, useState,useCallback} from "react";
 import {connect} from "umi";
 import styles from './index.less';
 import {} from "@ant-design/icons";
@@ -25,6 +25,41 @@ const Studio: React.FC<StudioProps> = (props) => {
 
   const {rightClickMenu,dispatch} = props;
   const [form] = Form.useForm();
+  const VIEW = {
+    rightToolWidth:300,
+    leftToolWidth:300,
+    marginTop:114,
+  };
+  const [height, setHeight] = useState<number>();
+  const [size, setSize] = useState({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+  });
+  const onResize = useCallback(() => {
+    setSize({
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight,
+    })
+  }, []);
+  // const width = document.querySelector('body').offsetWidth;
+  // const height = document.querySelector('body').offsetHeight*(1/2);
+  /*const minWidth = document.querySelector('body').offsetWidth*(1/6);
+  const maxWidth = document.querySelector('body').offsetWidth*(1/2);*/
+ /* const resize=()=>{
+    debugger;
+    setWidth(document.querySelector('body').offsetWidth);
+    setHeight(document.querySelector('body').offsetHeight);
+    console.log(width);
+    console.log(height);
+  };*/
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    onResize();
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [onResize]);
+
   loadSettings(dispatch);
   getFillAllByVersion('',dispatch);
   showCluster(dispatch);
@@ -34,6 +69,8 @@ const Studio: React.FC<StudioProps> = (props) => {
   listSession(dispatch);
   showJars(dispatch);
 
+
+
   const onClick=()=>{
     if(rightClickMenu){
       dispatch&&dispatch({
@@ -44,78 +81,54 @@ const Studio: React.FC<StudioProps> = (props) => {
   };
 
   return (
-    // <div onClick={onClick} style={{'margin':'-24px'}}>
-    //   <StudioMenu form={form}/>
-    //   <Card bordered={false} className={styles.card} size="small" id="studio_card">
-    //     <Row>
-    //       <Col span={4} className={styles["vertical-tabs"]}>
-    //         <StudioLeftTool/>
-    //       </Col>
-    //       <Col span={16}>
-    //         <StudioTabs/>
-    //       </Col>
-    //       <Col span={4} className={styles["vertical-tabs"]}>
-    //         <StudioRightTool form={form}/>
-    //       </Col>
-    //     </Row>
-    //     <Row>
-    //       <Col span={24}>
-    //         <StudioConsole/>
-    //       </Col>
-    //     </Row>
-    //   </Card>
-    //   <BackTop />
-    // </div>
     <div onClick={onClick} style={{'margin':'-24px'}}>
       <StudioMenu form={form}/>
       <Card bordered={false} className={styles.card} size="small" id="studio_card">
         <Row>
-          <Col>
             <DraggleLayout
-              containerWidth={1100}
-              containerHeight={1220}
-              min={50}
-              max={600}
-              initLeftWidth={200}
+              containerWidth={size.width-VIEW.rightToolWidth}
+              containerHeight={(size.height-VIEW.marginTop)/2}
+              min={VIEW.leftToolWidth}
+              max={size.width*(1/2)}
+              initLeftWidth={VIEW.leftToolWidth}
               handler={
                 <div
                   style={{
                     width: 4,
                     height: '100%',
-                    background: 'rgb(77, 81, 100)',
+                    background: 'rgb(240, 240, 240)',
                   }}
                 />
               }
             >
-              <StudioLeftTool span={4} className={styles["vertical-tabs"]} style={{
-                backgroundColor: `rgb(36, 205, 208)`,
-                color: `#fff`,
-                height: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}/>
-              <StudioTabs
-                style={{
-                  backgroundColor: `rgb(116, 140, 253)`,
-                  color: `#fff`,
-                  height: '100%',
+              <Col className={styles["vertical-tabs"]}>
+                <StudioLeftTool className={styles["vertical-tabs"]} style={{
+                  height: (size.height-VIEW.marginTop),
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
+                }}/>
+              </Col>
+              <Col
+                style={{
+                  height: ((size.height-VIEW.marginTop)),
+                }}>
+              <StudioTabs
+                style={{
+                  height: ((size.height-VIEW.marginTop)/2),
+                }}
+              />
+              <StudioConsole
+                style={{
+                  height: ((size.height-VIEW.marginTop)/2),
                 }}
               />
+              </Col>
             </DraggleLayout>
-          </Col>
-          <Col span={4} className={styles["vertical-tabs"]}>
+          <Col id='StudioRightTool' style={{width:VIEW.rightToolWidth,height:(size.height-VIEW.marginTop)}} className={styles["vertical-tabs"]}>
             <StudioRightTool form={form}/>
           </Col>
         </Row>
-        <Row>
-          <Col span={24}>
-            <StudioConsole/>
-          </Col>
-        </Row>
       </Card>
       <BackTop />
     </div>

dlink-web/src/global.less

@@ -55,3 +55,9 @@ ol {
     min-height: 100vh;
   }
 }
+
+.ant-pro-basicLayout-content {
+  position: relative;
+  margin: 24px;
+  margin-bottom: 0!important;
+}