三级拖拽实现

dlink-web/src/components/DraggleLayout/DraggleLayout.tsx

-import React, { useRef, useState } from 'react';
+import React, {useRef, useState} from 'react';
 import useDraggable from '../../hooks/useDraggable';
 import styles from './DraggleLayout.less';
 import {connect} from "umi";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 
 function DraggleLayout({
-   children, // 两列布局
-   min = 400, // 左侧最小宽度
-   max = Infinity, // 左侧最大宽度
-   containerWidth = 0, // 容器宽度
-   containerHeight = 0, // 容器高度
-   initLeftWidth = 0, // 初始左侧容器宽度
-   handler = null, // 拖拽器
-   onWidthChange = width => width, // 左侧容器高度变化
-   toolWidth,
-   dispatch
- }) {
+                         children, // 两列布局
+                         min = 400, // 左侧最小宽度
+                         max = Infinity, // 左侧最大宽度
+                         containerWidth = 0, // 容器宽度
+                         containerHeight = 0, // 容器高度
+                         initLeftWidth = 0, // 初始左侧容器宽度
+                         handler = null, // 拖拽器
+                         isLeft = true, // 拖拽器
+                         onWidthChange = width => width, // 左侧容器高度变化
+                         dispatch,
+                       }) {
   const ref = useRef(null);
 
-  const [position, setPosition] = useState({ x: initLeftWidth, y: 0 });
+  const [position, setPosition] = useState({x: initLeftWidth, y: 0});
 
   const [props] = useDraggable(
     ref,
     {
-      onMouseMove: ({ x, y }) => {
+      onMouseMove: ({x, y}) => {
         let _x = x;
         if (_x < min) _x = min;
         if (_x > max) _x = max;
         if (onWidthChange) onWidthChange(_x);
-        setPosition({ x: _x, y });
-        dispatch&&dispatch({
-          type: "Studio/saveToolWidth",
-          payload: _x,
-        });
+        setPosition({x: _x, y});
+        if (isLeft) {
+          dispatch && dispatch({
+            type: "Studio/saveToolLeftWidth",
+            payload: _x,
+          });
+        } else {
+          dispatch && dispatch({
+            type: "Studio/saveToolRightWidth",
+            payload: (containerWidth - _x),
+          });
+        }
       },
     },
-    { overbound: false },
+    {overbound: false},
   );
   const _handler = handler ? (
     React.cloneElement(handler, {
@@ -46,16 +53,16 @@ function DraggleLayout({
       },
     })
   ) : (
-    <span style={{ fontSize: 18, pointerEvents: 'none' }}>》</span>
+    <span style={{fontSize: 18, pointerEvents: 'none'}}>》</span>
   );
 
   return (
     <div
       ref={ref}
       className={styles.root}
-      style={{ width: containerWidth, height: containerHeight }}
+      style={{width: containerWidth, height: containerHeight}}
     >
-      <div className={styles.left} style={{ width: position.x }}>
+      <div className={styles.left} style={{width: position.x}}>
         {children[0]}
 
         <div className={styles.handler} {...props}>
@@ -64,7 +71,7 @@ function DraggleLayout({
       </div>
       <div
         className={styles.right}
-        style={{ width: containerWidth - position.x }}
+        style={{width: containerWidth - position.x}}
       >
         {children[1]}
       </div>
@@ -73,5 +80,4 @@ function DraggleLayout({
 }
 
 export default connect(({Studio}: { Studio: StateType }) => ({
-  toolWidth: Studio.toolWidth,
 }))(DraggleLayout);

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

@@ -205,15 +205,13 @@ const StudioCluster = (props: any) => {
           onClick={onCreateCluster}
         />
       </Tooltip>
-      <div style={{float: "right"}}>
-        <Tooltip title="刷新 Flink 集群">
-          <Button
-            type="text"
-            icon={<ReloadOutlined/>}
-            onClick={onRefreshCluster}
-          />
-        </Tooltip>
-      </div>
+      <Tooltip title="刷新 Flink 集群">
+        <Button
+          type="text"
+          icon={<ReloadOutlined/>}
+          onClick={onRefreshCluster}
+        />
+      </Tooltip>
       <Scrollbars style={{height: (toolHeight - 32)}}>
         {cluster.length > 0 ? (
           <Table dataSource={cluster} columns={getColumns()} size="small"/>) : (

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

@@ -261,7 +261,6 @@ const StudioConnector = (props: any) => {
           onClick={createSessions}
         />
       </Tooltip>
-      <div style={{float: "right"}}>
         {session.length > 0 ? (
           <Tooltip title="切换会话">
             <Button
@@ -295,7 +294,6 @@ const StudioConnector = (props: any) => {
               />
             </Tooltip>
           </>)}
-      </div>
       <Scrollbars style={{height: (toolHeight - 32)}}>
       {currentSession.connectors && currentSession.connectors.length > 0 ? (
         <Table dataSource={currentSession.connectors} columns={getColumns()} size="small"/>) : (

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

@@ -68,15 +68,13 @@ const StudioDataBase = (props: any) => {
           onClick={onCreateDataBase}
         />
       </Tooltip>
-      <div style={{float: "right"}}>
-        <Tooltip title="刷新数据源">
-          <Button
-            type="text"
-            icon={<ReloadOutlined/>}
-            onClick={onRefreshDataBase}
-          />
-        </Tooltip>
-      </div>
+      <Tooltip title="刷新数据源">
+        <Button
+          type="text"
+          icon={<ReloadOutlined/>}
+          onClick={onRefreshDataBase}
+        />
+      </Tooltip>
       <Scrollbars style={{height: (toolHeight - 32)}}>
       {database.length > 0 ? (
         <Table dataSource={database} columns={getColumns()} size="small"/>) : (

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

@@ -68,15 +68,13 @@ const StudioMetaData = (props: any) => {
       >
         {getDataBaseOptions()}
       </Select>
-      <div style={{float: "right"}}>
-        <Tooltip title="刷新元数据表">
-          <Button
-            type="text"
-            icon={<ReloadOutlined/>}
-            onClick={onRefreshTreeData}
-          />
-        </Tooltip>
-      </div>
+      <Tooltip title="刷新元数据表">
+        <Button
+          type="text"
+          icon={<ReloadOutlined/>}
+          onClick={onRefreshTreeData}
+        />
+      </Tooltip>
       <Scrollbars style={{height: (toolHeight - 32)}}>
       <DirectoryTree
         multiple

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

@@ -345,7 +345,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     <div className={style.tree_div} >
       <Row>
         <Col span={24}>
-      <div style={{float: "right"}}>
         <Tooltip title="创建根目录">
           <Button
           type="text"
@@ -360,7 +359,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
           onClick={offExpandAll}
           />
         </Tooltip>
-      </div>
         </Col>
       </Row>
       <Scrollbars  style={{height:(toolHeight-32)}}>

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

@@ -24,14 +24,16 @@ type StudioProps = {
 
 const Studio: React.FC<StudioProps> = (props) => {
 
-  const {rightClickMenu, toolHeight, toolWidth, dispatch} = props;
+  const {rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth, dispatch} = props;
   const [form] = Form.useForm();
   const VIEW = {
-    rightToolWidth: 300,
     leftToolWidth: 300,
     marginTop: 116,
     topHeight: 35.6,
     bottomHeight: 153.6,
+    rightMargin: 32,
+    leftMargin: 36,
+    midMargin: 46,
   };
   const [size, setSize] = useState({
     width: document.documentElement.clientWidth - 1,
@@ -92,11 +94,12 @@ const Studio: React.FC<StudioProps> = (props) => {
         >
           <Row>
             <DraggleLayout
-              containerWidth={size.width - VIEW.rightToolWidth}
+              containerWidth={size.width}
               containerHeight={toolHeight}
-              min={VIEW.leftToolWidth}
-              max={size.width * (1 / 2)}
-              initLeftWidth={VIEW.leftToolWidth}
+              min={VIEW.leftMargin+VIEW.midMargin}
+              max={size.width - VIEW.rightMargin}
+              initLeftWidth={size.width - toolRightWidth}
+              isLeft={false}
               handler={
                 <div
                   style={{
@@ -107,20 +110,38 @@ const Studio: React.FC<StudioProps> = (props) => {
                 />
               }
             >
-              <Col className={styles["vertical-tabs"]}>
-                <StudioLeftTool style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}/>
-              </Col>
-              <Col>
-                <StudioTabs width={size.width - VIEW.rightToolWidth - toolWidth}/>
+              <DraggleLayout
+                containerWidth={size.width - toolRightWidth}
+                containerHeight={toolHeight}
+                min={VIEW.leftMargin}
+                max={size.width - VIEW.rightMargin - VIEW.midMargin}
+                initLeftWidth={toolLeftWidth}
+                isLeft={true}
+                handler={
+                  <div
+                    style={{
+                      width: 4,
+                      height: '100%',
+                      background: 'rgb(240, 240, 240)',
+                    }}
+                  />
+                }
+              >
+                <Col className={styles["vertical-tabs"]}>
+                  <StudioLeftTool style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}/>
+                </Col>
+                <Col>
+                  <StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>
+                </Col>
+              </DraggleLayout>
+              <Col id='StudioRightTool' className={styles["vertical-tabs"]}>
+                <StudioRightTool form={form}/>
               </Col>
             </DraggleLayout>
-            <Col id='StudioRightTool' style={{width: VIEW.rightToolWidth}} className={styles["vertical-tabs"]}>
-              <StudioRightTool form={form}/>
-            </Col>
           </Row>
           <Row>
             <Col span={24}>
@@ -137,5 +158,6 @@ const Studio: React.FC<StudioProps> = (props) => {
 export default connect(({Studio}: { Studio: StateType }) => ({
   rightClickMenu: Studio.rightClickMenu,
   toolHeight: Studio.toolHeight,
-  toolWidth: Studio.toolWidth,
+  toolLeftWidth: Studio.toolLeftWidth,
+  toolRightWidth: Studio.toolRightWidth,
 }))(Studio);

dlink-web/src/pages/FlinkSqlStudio/model.ts

@@ -123,7 +123,8 @@ export type SessionType = {
 
 export type StateType = {
   toolHeight?: number;
-  toolWidth?: number;
+  toolRightWidth?: number;
+  toolLeftWidth?: number;
   cluster?: ClusterType[];
   sessionCluster?: ClusterType[];
   clusterConfiguration?: ClusterConfigurationType[];
@@ -150,7 +151,8 @@ export type ModelType = {
   };
   reducers: {
     saveToolHeight: Reducer<StateType>;
-    saveToolWidth: Reducer<StateType>;
+    saveToolRightWidth: Reducer<StateType>;
+    saveToolLeftWidth: Reducer<StateType>;
     saveSql: Reducer<StateType>;
     saveCurrentPath: Reducer<StateType>;
     saveMonaco: Reducer<StateType>;
@@ -174,7 +176,8 @@ const Model: ModelType = {
   namespace: 'Studio',
   state: {
     toolHeight: 400,
-    toolWidth: 300,
+    toolRightWidth: 300,
+    toolLeftWidth: 300,
     cluster: [],
     sessionCluster: [],
     clusterConfiguration: [],
@@ -282,10 +285,15 @@ const Model: ModelType = {
         ...state,
         toolHeight: payload,
       };
-    },saveToolWidth(state, {payload}) {
+    },saveToolRightWidth(state, {payload}) {
       return {
         ...state,
-        toolWidth: payload,
+        toolRightWidth: payload,
+      };
+    },saveToolLeftWidth(state, {payload}) {
+      return {
+        ...state,
+        toolLeftWidth: payload,
       };
     },
     saveSql(state, {payload}) {