fix: shortcut key problem; editor theme switching problem; editor ful…

…l screen; database field length; (#2436) * feat: use-service hooks * fix: 快捷键问题;编辑器主题切换问题；编辑器全屏；数据库字段长度; * fix:提交 .mvn * fix:提交 .idea * fix:提交 .gitignore * fix:提交 maven-wrapper.jar * fix:提交 .gitignore
DataLinkDC · Oct 26, 2023 · 7092ea3 · 7092ea3
1 parent 4256a3b
commit 7092ea3
Show file tree

Hide file tree

Showing 19 changed files with 306 additions and 173 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,7 +26,7 @@ logs.zip
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
 hs_err_pid*
 .idea/*
-!.idea/icon.png
+!.idea/icon.svg
 !.idea/vcs.xml
 build
 target/*

diff --git a/dinky-admin/src/main/resources/db/db-h2.sql b/dinky-admin/src/main/resources/db/db-h2.sql
@@ -1642,7 +1642,7 @@ CREATE TABLE `dinky_metrics` (
                                  `position` int(11) DEFAULT null,
                                  `show_type` varchar(255) DEFAULT null,
                                  `show_size` varchar(255) DEFAULT null,
-                                 `title` varchar(255) DEFAULT null,
+                                 `title` CLOB DEFAULT null,
                                  `layout_name` varchar(255) DEFAULT null,
                                  `create_time` datetime DEFAULT null,
                                  `update_time` datetime DEFAULT null

diff --git a/dinky-web/package.json b/dinky-web/package.json
@@ -70,6 +70,7 @@
     "redux-persist": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "screenfull": "^6.0.2",
+    "sql-formatter": "^13.0.1",
     "styled-components": "^6.0.8",
     "use-sse": "^2.0.1"
   },

diff --git a/dinky-web/src/app.tsx b/dinky-web/src/app.tsx
@@ -31,6 +31,7 @@ import { persistReducer, persistStore } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import { Navigate } from 'umi';
 import { default as defaultSettings, default as Settings } from '../config/defaultSettings';
+import { FullScreenProvider } from './hooks/useEditor';
 import { errorConfig } from './requestErrorConfig';
 import { getDataByParamsReturnResult } from './services/BusinessCrud';
 import { API } from './services/data';
@@ -114,6 +115,39 @@ export async function getInitialState(): Promise<{
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState }) => {
+  console.log(initialState);
+  const fullscreen = initialState?.fullscreen;
+
+  const defaultSettings = {
+    onPageChange: () => {
+      const { location } = history;
+      // 如果没有登录，重定向到 login
+      if (!initialState?.currentUser && location.pathname !== loginPath) {
+        history.push(loginPath);
+      }
+    },
+    // 自定义 403 页面
+    unAccessible: <UnAccessible />,
+    // 增加一个 loading 的状态
+    childrenRender: (children) => {
+      return initialState?.loading ? (
+        <PageLoading />
+      ) : (
+        <AccessContextProvider currentUser={initialState?.currentUser}>
+          <FullScreenProvider>{children}</FullScreenProvider>
+        </AccessContextProvider>
+      );
+    }
+  };
+
+  if (fullscreen) {
+    return {
+      ...initialState?.settings,
+      siderWidth: 0,
+      ...defaultSettings,
+      layout: 'side'
+    };
+  }
   return {
     headerTitleRender: () => {
       // 重新对 title 的设置进行设置
@@ -135,25 +169,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
         theme === THEME.light || undefined ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.15)'
     },*/
     isChildrenLayout: true,
-    onPageChange: () => {
-      const { location } = history;
-      // 如果没有登录，重定向到 login
-      if (!initialState?.currentUser && location.pathname !== loginPath) {
-        history.push(loginPath);
-      }
-    },
-    // 自定义 403 页面
-    unAccessible: <UnAccessible />,
-    // 增加一个 loading 的状态
-    childrenRender: (children) => {
-      return initialState?.loading ? (
-        <PageLoading />
-      ) : (
-        <AccessContextProvider currentUser={initialState?.currentUser}>
-          {children}
-        </AccessContextProvider>
-      );
-    },
+    ...defaultSettings,
     ...initialState?.settings
   };
 };

diff --git a/dinky-web/src/components/CallBackButton/CircleBtn.tsx b/dinky-web/src/components/CallBackButton/CircleBtn.tsx
@@ -16,7 +16,7 @@
  *
  */
 
-import { TabsItemType } from '@/pages/DataStudio/model';
+import { TabsItemType } from '@/pages/DataStudio/types';
 import { Button } from 'antd';
 import React from 'react';
 

diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -141,7 +141,7 @@ const CodeEdit = (props: CodeEditFormProps) => {
           className={'editor-develop'}
           onMount={editorDidMount}
           onChange={onChange}
-          theme={theme ? theme : convertCodeEditTheme()}
+          theme={convertCodeEditTheme()}
         />
         {showFloatButton && <EditorFloatBtn {...restEditBtnProps} />}
       </div>

diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx
@@ -242,7 +242,7 @@ const CodeShow = (props: CodeShowFormProps) => {
           }
         }}
         onMount={editorDidMount}
-        theme={theme ? theme : convertCodeEditTheme()}
+        theme={convertCodeEditTheme()}
       />
 
       {/* float button */}

diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
@@ -399,6 +399,12 @@ h5 {
   scrollbar-width: thin;
 }
 
+.editor-full-screen{
+  .ant-tabs-tabpane{
+    height: 100vh;
+  }
+}
+
 .data-studio-tabs {
   .ant-tabs-nav {
     .ant-tabs-nav-wrap {

diff --git a/dinky-web/src/hooks/useEditor.tsx b/dinky-web/src/hooks/useEditor.tsx
@@ -0,0 +1,42 @@
+import {
+  createContext,
+  Dispatch,
+  FC,
+  memo,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
+import { flushSync } from 'react-dom';
+import { useModel } from 'umi';
+export interface FullScreenContextProps {
+  fullscreen: boolean;
+  setFullscreen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const FullScreenContext = createContext<FullScreenContextProps>(
+  {} as FullScreenContextProps
+);
+
+export const FullScreenProvider: FC = memo(({ children }) => {
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+
+  const { initialState, setInitialState } = useModel('@@initialState');
+
+  useEffect(() => {
+    flushSync(() => {
+      setInitialState((s) => ({
+        ...s,
+        fullscreen
+      }));
+    });
+  }, [fullscreen]);
+  return (
+    <FullScreenContext.Provider value={{ fullscreen, setFullscreen }}>
+      {children}
+    </FullScreenContext.Provider>
+  );
+});
+
+export const useEditor = () => useContext(FullScreenContext);
diff --git a/dinky-web/src/pages/DataStudio/FooterContainer/index.tsx b/dinky-web/src/pages/DataStudio/FooterContainer/index.tsx
@@ -20,7 +20,7 @@
 import useThemeValue from '@/hooks/useThemeValue';
 import JobRunningModal from '@/pages/DataStudio/FooterContainer/JobRunningModal';
 import { getCurrentTab } from '@/pages/DataStudio/function';
-import { StateType, TabsPageType, VIEW } from '@/pages/DataStudio/model';
+import { StateType,TabsPageType,VIEW} from '@/pages/DataStudio/model';
 import { getSseData } from '@/services/api';
 import { l } from '@/utils/intl';
 import { connect } from '@@/exports';

diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
@@ -196,8 +196,8 @@ const HeaderContainer = (props: any) => {
   const routes: ButtonRoute[] = [
     // 保存按钮 icon
     {
-      hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's',
-      hotKeyDesc: 'Ctrl+S',
+      hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's' || e.metaKey && e.key === 's',
+      hotKeyDesc: 'Ctrl/Command +S',
       isShow: projectCommonShow(currentTab?.type),
       icon: <SaveOutlined />,
       title: l('button.save'),
@@ -216,6 +216,8 @@ const HeaderContainer = (props: any) => {
     {
       // 检查 sql按钮
       icon: <ScheduleOutlined />,
+      hotKey: (e: KeyboardEvent) => e.altKey && e.code === 'Digit2' || e.altKey && e.key === '@',
+      hotKeyDesc: 'Alt+2/@',
       title: l('pages.datastudio.editor.check'),
       click: () => showExplain(),
       isShow: projectCommonShow(currentTab?.type)

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
@@ -28,12 +28,16 @@ import {
 } from '@/pages/DataStudio/model';
 import { JOB_LIFE_CYCLE } from '@/pages/DevOps/constants';
 import { API_CONSTANTS } from '@/services/endpoints';
+import { convertCodeEditTheme } from '@/utils/function';
 import { l } from '@/utils/intl';
 import { connect, useRequest } from '@@/exports';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { Editor } from '@monaco-editor/react';
-import { Spin } from 'antd';
-import { editor } from 'monaco-editor';
+import { Button, Spin } from 'antd';
+import { editor, KeyCode, KeyMod } from 'monaco-editor';
 import React, { useState } from 'react';
+import { format } from 'sql-formatter';
+import { useEditor } from '@/hooks/useEditor';
 
 export type EditorProps = {
   taskId: number;
@@ -48,6 +52,8 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [diff, setDiff] = useState<any>([]);
+  const { fullscreen, setFullscreen } = useEditor();
+  const [editorIns, setEditorIns] = useState<editor.IStandaloneCodeEditor>(null);
 
   const currentTab = getCurrentTab(panes, activeKey) as DataStudioTabsItemType;
   const currentData = currentTab.params.taskData;
@@ -89,62 +95,105 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
   };
 
   return (
-    <>
-      <Spin spinning={loading} delay={600}></Spin>
-      <DiffModal diffs={diff} open={isModalOpen} fileName={currentData?.name} onUse={upDateTask} />
-      <Editor
-        width={'100%'}
-        height={'100%'}
-        value={currentTab?.params?.taskData?.statement}
-        language={'sql'}
-        options={{
-          readOnlyMessage: { value: l('pages.datastudio.editor.onlyread') },
-          readOnly: currentData?.step == JOB_LIFE_CYCLE.ONLINE,
-          scrollBeyondLastLine: false,
-          wordWrap: 'on',
-          autoDetectHighContrast: true,
-          scrollbar: {
-            // Subtle shadows to the left & top. Defaults to true.
-            useShadows: false,
-            // Defaults to 'auto'
-            vertical: 'visible',
-            // Defaults to 'auto'
-            horizontal: 'visible',
-            verticalScrollbarSize: 8,
-            horizontalScrollbarSize: 8,
-            arrowSize: 30
-          }
-        }}
-        className={'editor-develop'}
-        onMount={(editor: editor.IStandaloneCodeEditor) => {
-          editor.layout();
-          editor.focus();
+    <Spin spinning={loading} delay={600}>
+      <div style={{ width: '100%', height: fullscreen ? 'calc(100vh - 50px)' : '33vh' }}>
+        <DiffModal
+          diffs={diff}
+          open={isModalOpen}
+          fileName={currentData?.name}
+          onUse={upDateTask}
+        />
+        <Editor
+          value={currentTab?.params?.taskData?.statement}
+          language={'sql'}
+          options={{
+            readOnlyMessage: { value: l('pages.datastudio.editor.onlyread') },
+            readOnly: currentData?.step == JOB_LIFE_CYCLE.ONLINE,
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            autoDetectHighContrast: true,
+            scrollbar: {
+              // Subtle shadows to the left & top. Defaults to true.
+              useShadows: false,
+              // Defaults to 'auto'
+              vertical: 'visible',
+              // Defaults to 'auto'
+              horizontal: 'visible',
+              verticalScrollbarSize: 8,
+              horizontalScrollbarSize: 8,
+              arrowSize: 30
+            },
+            automaticLayout: true
+          }}
+          className={'editor-develop'}
+          onMount={(editor: editor.IStandaloneCodeEditor) => {
+            editor.layout();
+            editor.focus();
 
-          editor.onDidChangeCursorPosition((e) => {
-            props.footContainer.codePosition = [e.position.lineNumber, e.position.column];
-            dispatch({
-              type: STUDIO_MODEL.saveFooterValue,
-              payload: { ...props.footContainer }
+            editor.onDidChangeCursorPosition((e) => {
+              props.footContainer.codePosition = [e.position.lineNumber, e.position.column];
+              dispatch({
+                type: STUDIO_MODEL.saveFooterValue,
+                payload: { ...props.footContainer }
+              });
             });
-          });
-        }}
-        onChange={(v) => {
-          if (!currentData || !currentTab) {
-            return;
-          }
 
-          if (typeof v === 'string') {
-            currentData.statement = v;
-          }
-          currentTab.isModified = true;
-          dispatch({
-            type: STUDIO_MODEL.saveTabs,
-            payload: { ...props.tabs }
-          });
-        }}
-        theme={'vs-dark'}
-      />
-    </>
+            editor.addCommand(KeyMod.Alt | KeyCode.Digit3, () => {
+              editor?.trigger('anyString', 'editor.action.formatDocument');
+              editor.setValue(format(editor.getValue()));
+            });
+            setEditorIns(editor);
+          }}
+          onChange={(v) => {
+            if (!currentData || !currentTab) {
+              return;
+            }
+            if (typeof v === 'string') {
+              currentData.statement = v;
+            }
+            currentTab.isModified = true;
+            dispatch({
+              type: STUDIO_MODEL.saveTabs,
+              payload: { ...props.tabs }
+            });
+          }}
+          theme={convertCodeEditTheme()}
+        ></Editor>
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 150
+          }}
+        >
+          {fullscreen ? (
+            <Button
+              type='text'
+              style={{
+                color: '#fff'
+              }}
+              icon={<FullscreenExitOutlined />}
+              onClick={() => {
+                editorIns.layout();
+                setFullscreen(false);
+              }}
+            />
+          ) : (
+            <Button
+              type='text'
+              style={{
+                color: '#fff'
+              }}
+              icon={<FullscreenOutlined />}
+              onClick={() => {
+                editorIns.layout();
+                setFullscreen(true);
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </Spin>
   );
 };