F2全屏开发

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

@@ -22,7 +22,8 @@ const StudioHome = (props: any) => {
           <Text keyboard>Alt + 1</Text> 保存 <Divider type="vertical" />
           <Text keyboard>Alt + 2</Text> 校验 <Divider type="vertical" />
           <Text keyboard>Alt + 3</Text> 美化 <Divider type="vertical" />
-          <Text keyboard>Esc</Text> 关闭弹框 <Divider type="vertical" />
+          <Text keyboard>F2</Text> 全屏 <Divider type="vertical" />
+          <Text keyboard>Esc</Text> 关闭弹框及全屏 <Divider type="vertical" />
           <Text keyboard>F1</Text> 更多快捷键
         </Paragraph>
         <Paragraph>

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

@@ -16,7 +16,7 @@ import {executeSql, getJobPlan} from "@/pages/FlinkSqlStudio/service";
 import StudioHelp from "./StudioHelp";
 import StudioGraph from "./StudioGraph";
 import {showCluster, showTables} from "@/components/Studio/StudioEvent/DDL";
-import {useCallback, useEffect, useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import StudioExplain from "../StudioConsole/StudioExplain";
 import {DIALECT, isOnline, isSql} from "@/components/Studio/conf";
 import {
@@ -24,6 +24,7 @@ import {
 } from '@ant-design/pro-form';
 import SqlExport from "@/pages/FlinkSqlStudio/SqlExport";
 import {Dispatch} from "@@/plugin-dva/connect";
+import StudioTabs from "@/components/Studio/StudioTabs";
 
 const menu = (
   <Menu>
@@ -34,10 +35,11 @@ const menu = (
 
 const StudioMenu = (props: any) => {
 
-  const {tabs, current, currentPath, form, refs, dispatch, currentSession} = props;
+  const {tabs, current, currentPath, form,width,height, refs, dispatch, currentSession} = props;
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [exportModalVisible, handleExportModalVisible] = useState<boolean>(false);
   const [graphModalVisible, handleGraphModalVisible] = useState<boolean>(false);
+  const [editModalVisible, handleEditModalVisible] = useState<boolean>(false);
   const [graphData, setGraphData] = useState();
 
   const onKeyDown = useCallback((e) => {
@@ -47,6 +49,12 @@ const StudioMenu = (props: any) => {
         props.saveTask(current);
       }
     }
+    if(e.keyCode === 113){
+      e.preventDefault();
+      if(current) {
+        handleEditModalVisible(true);
+      }
+    }
   }, [current]);
 
   useEffect(() => {
@@ -455,6 +463,18 @@ const StudioMenu = (props: any) => {
       >
         <SqlExport id={current.task.id} />
       </ModalForm>:undefined}
+      {current?<Modal
+        width={width}
+        bodyStyle={{padding: 0}}
+        style={{top:0,padding:0,margin:0,maxWidth:'100vw'}}
+        destroyOnClose
+        maskClosable={false}
+        closable={false}
+        visible={editModalVisible}
+        footer={null}
+        onCancel={() => handleEditModalVisible(false)}>
+        <StudioTabs width={width} height={height}/>
+      </Modal>:undefined}
     </Row>
   );
 };

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

@@ -10,7 +10,7 @@ import StudioHome from "@/components/Studio/StudioHome";
 const {TabPane} = Tabs;
 
 const EditorTabs = (props: any) => {
-  const {tabs, dispatch, current, toolHeight, width} = props;
+  const {tabs, dispatch, current, toolHeight, width,height} = props;
 
   const onChange = (activeKey: any) => {
     dispatch &&
@@ -116,13 +116,13 @@ const EditorTabs = (props: any) => {
       activeKey={tabs.activeKey + ''}
       onEdit={onEdit}
       className={styles['edit-tabs']}
-      style={{height: toolHeight}}
+      style={{height: height?height:toolHeight}}
     >
       {tabs.panes.map((pane) => (
         <TabPane tab={Tab(pane)} key={pane.key} closable={pane.closable}>
           <StudioEdit
             tabsKey={pane.key}
-            height={toolHeight - 32}
+            height={height?height:(toolHeight - 32)}
             width={width}
             language={current.task.dialect === DIALECT.JAVA ? 'java' : 'sql'}
           />

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

@@ -32,12 +32,12 @@ const Studio = (props: any) => {
     midMargin: 46,
   };
   const [size, setSize] = useState({
-    width: document.documentElement.clientWidth - 1,
+    width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
   });
   const onResize = useCallback(() => {
     setSize({
-      width: document.documentElement.clientWidth - 1,
+      width: document.documentElement.clientWidth,
       height: document.documentElement.clientHeight,
     })
   }, []);
@@ -73,7 +73,7 @@ const Studio = (props: any) => {
 
   return (
     <div onClick={onClick} style={{'margin': '-24px'}}>
-      <StudioMenu form={form}/>
+      <StudioMenu form={form} width={size.width} height={size.height}/>
       <Card bordered={false} className={styles.card} size="small" id="studio_card" style={{marginBottom: 0}}>
         <DraggleVerticalLayout
           containerWidth={size.width}

dlink-web/src/pages/Welcome.tsx

@@ -586,6 +586,9 @@ export default (): React.ReactNode => {
                 <li>
                   <Link>修复 前端多处bug</Link>
                 </li>
+                <li>
+                  <Link>新增 F2 全屏开发</Link>
+                </li>
               </ul>
             </Paragraph>
           </Timeline.Item>