修改草稿为引导页

dlink-web/config/routes.ts

@@ -25,6 +25,7 @@ export default [
     path: '/flinksqlstudio',
     name: 'flinksqlstudio',
     icon: 'consoleSql',
+    footerRender: false,
     component: './FlinkSqlStudio',
   },
   {

dlink-web/src/app.tsx

@@ -121,7 +121,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/StudioMsg/index.tsx

@@ -56,7 +56,7 @@ const StudioMsg = (props:any) => {
 
   return (
     <Typography>
-      {current.console.result.startTime?(isSql(current.task.dialect) ? renderCommonSqlContent():
+      {current&&current.console.result.startTime?(isSql(current.task.dialect) ? renderCommonSqlContent():
         renderFlinkSqlContent() ):<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       }
     </Typography>

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

@@ -6,13 +6,13 @@ import {showJobData} from "@/components/Studio/StudioEvent/DQL";
 import {isSql} from "@/components/Studio/conf";
 import DTable from "@/components/Common/DTable";
 
-const StudioTable = (props:any) => {
+const StudioTable = (props: any) => {
 
-  const {current,result,dispatch} = props;
+  const {current,dispatch} = props;
 
-  const getColumns=(columns:[])=>{
-    let datas:any=[];
-    columns.map((item)=> {
+  const getColumns=(columns: [])=>{
+    let datas: any=[];
+    columns.map((item) => {
       datas.push({
         field: item,
       });
@@ -22,6 +22,7 @@ const StudioTable = (props:any) => {
 
   const showDetail=()=>{
     showJobData(current.console.result.jobId,dispatch)
+    console.log(current.console.result.result);
   };
 
   const renderFlinkSQLContent = () => {
@@ -50,12 +51,11 @@ const StudioTable = (props:any) => {
 
   return (
     <div style={{width: '100%'}}>
-      {isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()}
+      {current?(isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()):undefined}
     </div>
   );
 };
 
 export default connect(({ Studio }: { Studio: StateType }) => ({
   current: Studio.current,
-  result: Studio.result,
 }))(StudioTable);

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

@@ -19,7 +19,7 @@ const {TabPane} = Tabs;
 
 const StudioConsole = (props: any) => {
 
-  const {height} = props;
+  const {height,current} = props;
   let consoleHeight = (height - 37.6);
   return (
     <Tabs defaultActiveKey="StudioMsg" size="small" tabPosition="top" style={{
@@ -35,7 +35,7 @@ const StudioConsole = (props: any) => {
         key="StudioMsg"
       >
         <Scrollbars style={{height: consoleHeight}}>
-          <StudioMsg/>
+          {current?<StudioMsg/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
         </Scrollbars>
       </TabPane>
       <TabPane
@@ -48,7 +48,7 @@ const StudioConsole = (props: any) => {
         key="StudioTable"
       >
         <Scrollbars style={{height: consoleHeight}}>
-          <StudioTable/>
+          {current?<StudioTable/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
         </Scrollbars>
       </TabPane>
       <TabPane
@@ -61,7 +61,7 @@ const StudioConsole = (props: any) => {
         key="StudioChart"
       >
         <Scrollbars style={{height: consoleHeight}}>
-          <Chart height={consoleHeight} />
+          {current? <Chart height={consoleHeight} />:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
         </Scrollbars>
       </TabPane>
       <TabPane
@@ -87,7 +87,7 @@ const StudioConsole = (props: any) => {
         key="StudioConsanguinity"
       >
         <Scrollbars style={{height: consoleHeight}}>
-          <StudioCA/>
+          {current?<StudioCA/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
         </Scrollbars>
       </TabPane>
       <TabPane
@@ -148,4 +148,5 @@ const StudioConsole = (props: any) => {
 
 export default connect(({Studio}: { Studio: StateType }) => ({
   sql: Studio.sql,
+  current: Studio.current,
 }))(StudioConsole);

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

+import {Typography,Divider} from 'antd';
+import React from 'react';
+import {connect} from 'umi';
+import {StateType} from '@/pages/FlinkSqlStudio/model';
+import {Scrollbars} from 'react-custom-scrollbars';
+
+const {Title, Paragraph, Text} = Typography;
+
+const StudioHome = (props: any) => {
+  const {toolHeight} = props;
+
+  return (
+    <Scrollbars style={{height: toolHeight}}>
+      <Typography style={{padding:'15px'}}>
+        <Title level={4}>欢迎使用 Dinky v0.5.0</Title>
+        <Paragraph>
+          <blockquote>实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。</blockquote>
+        </Paragraph>
+        <Title level={5}>快捷键</Title>
+        <Paragraph>
+          <Text keyboard>Ctrl + s</Text> 保存 <Divider type="vertical" />
+          <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>F1</Text> 更多快捷键
+        </Paragraph>
+        <Paragraph>
+          <Text keyboard>Ctrl + F</Text> 搜索 <Divider type="vertical" />
+          <Text keyboard>Ctrl + H</Text> 替换 <Divider type="vertical" />
+          <Text keyboard>Ctrl + Z</Text> 撤销 <Divider type="vertical" />
+          <Text keyboard>Ctrl + Y</Text> 重做 <Divider type="vertical" />
+          <Text keyboard>Ctrl + /</Text> 注释
+        </Paragraph>
+        <Paragraph>
+          <Text keyboard>选中 + Tab</Text> 缩进 <Divider type="vertical" />
+          <Text keyboard>选中 + Shift + Tab</Text> 取消缩进 <Divider type="vertical" />
+          <Text keyboard>Shift + Alt + Right</Text> 选中后续 <Divider type="vertical" />
+          <Text keyboard>Shift + Alt + F</Text> 格式化
+        </Paragraph>
+        <Paragraph>
+          <Text keyboard>Ctrl + Shift + Up/Down</Text> 编辑多行 <Divider type="vertical" />
+          <Text keyboard>Shift + Alt + Up/Down</Text> 复制一行 <Divider type="vertical" />
+          <Text keyboard>Ctrl + Shift + K</Text> 删除一行
+        </Paragraph>
+        <Paragraph>
+          <Text keyboard>Ctrl + F3</Text> 匹配下一个 <Divider type="vertical" />
+          <Text keyboard>Ctrl + Shift + F3</Text> 匹配上一个 <Divider type="vertical" />
+          <Text keyboard>F7</Text> 前往下一个高亮 <Divider type="vertical" />
+          <Text keyboard>Shift +F7</Text> 前往上一个高亮
+        </Paragraph>
+        <Paragraph>
+          <Text keyboard>Ctrl + Shift + End</Text> 前面追加换行 <Divider type="vertical" />
+          <Text keyboard>Ctrl + End</Text> 追加换行 <Divider type="vertical" />
+          <Text keyboard>Alt + Up/Down</Text> 上下换位 <Divider type="vertical" />
+          <Text keyboard>Ctrl + Shift + [/]</Text> 折叠/展开
+        </Paragraph>
+      </Typography>
+    </Scrollbars>
+  );
+};
+
+export default connect(({Studio}: { Studio: StateType }) => ({
+  current: Studio.current,
+  sql: Studio.sql,
+  tabs: Studio.tabs,
+  toolHeight: Studio.toolHeight,
+}))(StudioHome);

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

@@ -15,14 +15,15 @@ import { postDataArray} from "@/components/Common/crud";
 import {executeSql, getJobPlan} from "@/pages/FlinkSqlStudio/service";
 import StudioHelp from "./StudioHelp";
 import StudioGraph from "./StudioGraph";
-import {showCluster, showTables, saveTask} from "@/components/Studio/StudioEvent/DDL";
-import {useEffect, useState} from "react";
+import {showCluster, showTables} from "@/components/Studio/StudioEvent/DDL";
+import {useCallback, useEffect, useState} from "react";
 import StudioExplain from "../StudioConsole/StudioExplain";
 import {DIALECT, isOnline, isSql} from "@/components/Studio/conf";
 import {
   ModalForm,
 } from '@ant-design/pro-form';
 import SqlExport from "@/pages/FlinkSqlStudio/SqlExport";
+import {Dispatch} from "@@/plugin-dva/connect";
 
 const menu = (
   <Menu>
@@ -39,6 +40,22 @@ const StudioMenu = (props: any) => {
   const [graphModalVisible, handleGraphModalVisible] = useState<boolean>(false);
   const [graphData, setGraphData] = useState();
 
+  const onKeyDown = useCallback((e) => {
+    if(e.keyCode === 83 && e.ctrlKey === true){
+      e.preventDefault();
+      if(current) {
+        props.saveTask(current);
+      }
+    }
+  }, [current]);
+
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown)
+    return () => {
+      document.removeEventListener("keydown", onKeyDown)
+    };
+  }, [current]);
+
   const execute = () => {
     if(!isSql(current.task.dialect)&&!isOnline(current.task.type)){
       message.warn(`该任务执行模式为【${current.task.type}】，不支持 SQL 查询，请手动保存后使用右侧按钮——作业提交`);
@@ -224,7 +241,7 @@ const StudioMenu = (props: any) => {
   }
 
   const saveSqlAndSettingToTask = () => {
-    saveTask(current,dispatch);
+    props.saveTask(current);
   };
 
   const exportSql = () => {
@@ -311,6 +328,7 @@ const StudioMenu = (props: any) => {
               </Breadcrumb>
             )}
           </Col>
+          {current?
           <Col span={8}>
             <Button
               type="text"
@@ -401,7 +419,7 @@ const StudioMenu = (props: any) => {
                 onClick={showHelp}
               />
             </Tooltip>
-          </Col>
+          </Col>:undefined}
         </Row>
       </Col>
       <StudioExplain
@@ -418,6 +436,7 @@ const StudioMenu = (props: any) => {
       >
         <StudioGraph data={graphData} />
       </Modal>
+      {current?
       <ModalForm
         title={`${current.task.alias} 的 ${current.task.dialect} 导出`}
         visible={exportModalVisible}
@@ -438,15 +457,23 @@ const StudioMenu = (props: any) => {
         }}
       >
         <SqlExport id={current.task.id} />
-      </ModalForm>
+      </ModalForm>:undefined}
     </Row>
   );
 };
 
+
+const mapDispatchToProps = (dispatch: Dispatch)=>({
+  saveTask:(current: any)=>dispatch({
+    type: "Studio/saveTask",
+    payload: current.task,
+  }),
+});
+
 export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   currentPath: Studio.currentPath,
   tabs: Studio.tabs,
   refs: Studio.refs,
   currentSession: Studio.currentSession,
-}))(StudioMenu);
+}),mapDispatchToProps)(StudioMenu);

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

+import {Typography,Divider} from 'antd';
+import React from 'react';
+import {connect} from 'umi';
+import {StateType} from '@/pages/FlinkSqlStudio/model';
+import {Scrollbars} from 'react-custom-scrollbars';
+import { history } from 'umi';
+
+const {Title, Paragraph,Link, Text} = Typography;
+
+const StudioGuide = (props: any) => {
+  const {toolHeight} = props;
+
+  return (
+    <Scrollbars style={{height: toolHeight}}>
+      <Typography style={{padding:'15px'}}>
+        <Title level={5}>快捷引导</Title>
+        <Paragraph>
+          <ul>
+            <li>
+              <Link onClick={()=>{history.push('/registration/cluster')}}>注册集群实例</Link>
+            </li>
+            <li>
+              <Link onClick={()=>{history.push('/registration/clusterConfiguration')}}>注册集群配置</Link>
+            </li>
+            <li>
+              <Link onClick={()=>{history.push('/registration/jar')}}>注册 Jar</Link>
+            </li>
+            <li>
+              <Link onClick={()=>{history.push('/registration/database')}}>注册数据源</Link>
+            </li>
+            <li>
+              <Link onClick={()=>{history.push('/registration/document')}}>注册文档</Link>
+            </li>
+            <li>
+              <Link onClick={()=>{history.push('/settings')}}>修改系统配置</Link>
+            </li>
+            <li>
+              <Link href="http://www.dlink.top/" target="_blank" >官网文档</Link>
+            </li>
+            <li>
+              <Link href="https://github.com/DataLinkDC/dlink" target="_blank" >Github</Link>
+            </li>
+          </ul>
+        </Paragraph>
+      </Typography>
+    </Scrollbars>
+  );
+};
+
+export default connect(({Studio}: { Studio: StateType }) => ({
+  current: Studio.current,
+  sql: Studio.sql,
+  tabs: Studio.tabs,
+  toolHeight: Studio.toolHeight,
+}))(StudioGuide);

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

@@ -2,20 +2,18 @@ import {Tabs, Empty, Form} from "antd";
 import {SettingOutlined,ScheduleOutlined,AuditOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
-import styles from "./index.less";
 import StudioConfig from "./StudioConfig";
 import StudioSetting from "./StudioSetting";
 import StudioSavePoint from "./StudioSavePoint";
 import StudioEnvSetting from "./StudioEnvSetting";
 import StudioSqlConfig from "./StudioSqlConfig";
 import StudioUDFInfo from "./StudioUDFInfo";
+import StudioGuide from "./StudioGuide";
 import {DIALECT, isSql} from "@/components/Studio/conf";
 
 const { TabPane } = Tabs;
 
-
-
-const StudioRightTool = (props:any) => {
+const StudioRightTool = (props: any) => {
 
   const {current,form,toolHeight} = props;
 
@@ -72,9 +70,12 @@ const StudioRightTool = (props:any) => {
   };
 
   return (
+    <>
+      { current?
     <Tabs defaultActiveKey="1" size="small" tabPosition="right"  style={{ height: toolHeight}}>
       {renderContent()}
-    </Tabs>
+    </Tabs>:<StudioGuide toolHeight={toolHeight} />}
+      </>
   );
 };
 

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

@@ -4,7 +4,6 @@ import {connect} from 'umi';
 import {StateType} from '@/pages/FlinkSqlStudio/model';
 import styles from './index.less';
 import StudioEdit from '../StudioEdit';
-import {saveTask} from '@/components/Studio/StudioEvent/DDL';
 import {DIALECT} from '../conf';
 
 const {TabPane} = Tabs;
@@ -25,17 +24,17 @@ const EditorTabs = (props: any) => {
   };
 
   const onEdit = (targetKey: any, action: any) => {
-    if (action == 'add') {
+    if (action === 'add') {
       add();
-    } else if (action == 'remove') {
+    } else if (action === 'remove') {
       dispatch &&
       dispatch({
         type: 'Studio/saveToolHeight',
         payload: toolHeight - 0.0001,
       });
-      if (current.isModified) {
-        saveTask(current, dispatch);
-      }
+      // if (current.isModified) {
+      //   saveTask(current, dispatch);
+      // }
       remove(targetKey);
     }
   };

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

@@ -5,6 +5,7 @@ import {} from "@ant-design/icons";
 import StudioMenu from "./StudioMenu";
 import {Row, Col, Card, Form} from "antd";
 import StudioTabs from "./StudioTabs";
+import StudioHome from "./StudioHome";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import StudioConsole from "./StudioConsole";
 import StudioLeftTool from "./StudioLeftTool";
@@ -16,15 +17,11 @@ import {
 import {loadSettings} from "@/pages/Settings/function";
 import DraggleLayout from "@/components/DraggleLayout";
 import DraggleVerticalLayout from "@/components/DraggleLayout/DraggleVerticalLayout";
+import {Dispatch} from "@@/plugin-dva/connect";
 
-type StudioProps = {
-  rightClickMenu: StateType['rightClickMenu'];
-  dispatch: any;
-};
-
-const Studio: React.FC<StudioProps> = (props) => {
+const Studio = (props: any) => {
 
-  const {rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth, dispatch} = props;
+  const {rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth,tabs,current, dispatch} = props;
   const [form] = Form.useForm();
   const VIEW = {
     leftToolWidth: 300,
@@ -136,7 +133,7 @@ const Studio: React.FC<StudioProps> = (props) => {
                   }}/>
                 </Col>
                 <Col>
-                  <StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>
+                  {tabs.panes.length === 0 ?<StudioHome width={size.width - toolRightWidth - toolLeftWidth} />:<StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>}
                 </Col>
               </DraggleLayout>
               <Col id='StudioRightTool' className={styles["vertical-tabs"]}>
@@ -151,6 +148,7 @@ const Studio: React.FC<StudioProps> = (props) => {
           </Row>
         </DraggleVerticalLayout>
       </Card>
+
     </div>
   )
 };
@@ -160,4 +158,6 @@ export default connect(({Studio}: { Studio: StateType }) => ({
   toolHeight: Studio.toolHeight,
   toolLeftWidth: Studio.toolLeftWidth,
   toolRightWidth: Studio.toolRightWidth,
+  tabs: Studio.tabs,
+  current: Studio.current,
 }))(Studio);

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

@@ -204,95 +204,13 @@ const Model: ModelType = {
     currentSession: {
       connectors: [],
     },
-    current: {
-      title: '草稿',
-      key: 0,
-      value: '',
-      closable: false,
-      path: ['草稿'],
-      isModified: false,
-      task: {
-        jobName: '草稿',
-        type: 'local',
-        checkPoint: 0,
-        savePointStrategy: 0,
-        savePointPath: '',
-        parallelism: 1,
-        fragment: true,
-        statementSet: false,
-        clusterId: 0,
-        clusterName: "本地环境",
-        clusterConfigurationId:undefined,
-        clusterConfigurationName:undefined,
-        databaseId:undefined,
-        databaseName:undefined,
-        jarId:undefined,
-        envId:undefined,
-        maxRowNum: 100,
-        config: [],
-        session: '',
-        alias: '草稿',
-        dialect: 'FlinkSql',
-        useResult:true,
-        useChangeLog:false,
-        useAutoCancel:false,
-        useSession:false,
-        useRemote:false,
-      },
-      console: {
-        result: {},
-        chart: {},
-      },
-      monaco: {},
-      sqlMetaData: undefined,
-    },
+    current: undefined,
     sql: '',
     monaco: {},
-    currentPath: ['草稿'],
+    currentPath: ['引导页'],
     tabs: {
       activeKey: 0,
-      panes: [{
-        title: '草稿',
-        key: 0,
-        value: '',
-        closable: false,
-        isModified: false,
-        path: ['草稿'],
-        task: {
-          jobName: '草稿',
-          type: 'local',
-          checkPoint: 0,
-          savePointStrategy: 0,
-          savePointPath: '',
-          parallelism: 1,
-          fragment: true,
-          statementSet: false,
-          clusterId: 0,
-          clusterName: "本地环境",
-          clusterConfigurationId:undefined,
-          clusterConfigurationName:undefined,
-          databaseId:undefined,
-          databaseName:undefined,
-          jarId:undefined,
-          envId:undefined,
-          session: '',
-          config: [],
-          maxRowNum: 100,
-          alias: '草稿',
-          dialect: 'FlinkSql',
-          useResult:true,
-          useChangeLog:false,
-          useAutoCancel:false,
-          useSession:false,
-          useRemote:false,
-        },
-        console: {
-          result: {},
-          chart: {},
-        },
-        monaco: {},
-        sqlMetaData: undefined,
-      }],
+      panes: [],
     },
     session: [],
     result:{},
@@ -381,8 +299,8 @@ const Model: ModelType = {
       }
       return {
         ...state,
-        current: newCurrent,
-        tabs: newTabs,
+        current: {...newCurrent},
+        tabs: {...newTabs},
       };
     },
     saveTabs(state, {payload}) {
@@ -392,6 +310,15 @@ const Model: ModelType = {
           newCurrent = payload.panes[i];
         }
       }
+      if(payload.panes.length === 0){
+        return {
+          ...state,
+          current: undefined,
+          tabs: {
+            ...payload,
+          },
+        };
+      }
       return {
         ...state,
         current: {
@@ -472,16 +399,20 @@ const Model: ModelType = {
     },
     saveTaskData(state, {payload}) {
       const newTabs = state.tabs;
+      const newCurrent = state.current;
       for (let i = 0; i < newTabs.panes.length; i++) {
-        if (newTabs.panes[i].key == newTabs.activeKey) {
+        if (newTabs.panes[i].key === payload.key) {
           newTabs.panes[i].task = payload;
+          newTabs.panes[i].isModified = false;
+          if(newCurrent.key === payload.key){
+            newCurrent = newTabs.panes[i];
+          }
         }
       }
       return {
         ...state,
-        tabs: {
-          ...newTabs,
-        },
+        current: {...newCurrent},
+        tabs: {...newTabs},
       };
     },
     saveSession(state, {payload}) {
@@ -514,13 +445,7 @@ const Model: ModelType = {
       };
     },
     saveResult(state, {payload}) {
-      // return {
-      //   ...state,
-      //   result: {
-      //     ...payload
-      //   },
-      // };
-      let newTabs = state?.tabs;
+      const newTabs = state?.tabs;
       let newCurrent = state?.current;
       for (let i = 0; i < newTabs.panes.length; i++) {
         if (newTabs.panes[i].key === newTabs.activeKey) {
@@ -531,8 +456,8 @@ const Model: ModelType = {
       }
       return {
         ...state,
-        current: newCurrent,
-        tabs: newTabs,
+        current: {...newCurrent},
+        tabs: {...newTabs},
       };
     },
     saveCluster(state, {payload}) {
@@ -572,8 +497,8 @@ const Model: ModelType = {
       }
       return {
         ...state,
-        current: newCurrent,
-        tabs: newTabs,
+        current: {...newCurrent},
+        tabs: {...newTabs},
       };
     },
   },

dlink-web/src/pages/Welcome.tsx

@@ -556,6 +556,9 @@ export default (): React.ReactNode => {
                 <li>
                   <Link>新增 BI选项卡的折线图、条形图、饼图</Link>
                 </li>
+                <li>
+                  <Link>修改 草稿为引导页</Link>
+                </li>
               </ul>
             </Paragraph>
           </Timeline.Item>