fix: Console style

huaxiabuluo · Dec 5, 2023 · 478e157 · 478e157
1 parent 039e5f0
commit 478e157
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 53 deletions.
diff --git a/app/pages/Console/Drawer/index.module.less b/app/pages/Console/Drawer/index.module.less
@@ -1,6 +1,7 @@
 @import '@app/common.less';
 .toggleDrawer {
-  width: 53px;
+  width: 54px;
+  flex: 0 0 54px;
   padding: 10px;
   background-color: #fff;
   display: flex;

diff --git a/app/pages/Console/OutputBox/index.tsx b/app/pages/Console/OutputBox/index.tsx
@@ -1,8 +1,7 @@
 import { Button, Table, Tabs, Tooltip, Popover } from 'antd';
 import { BigNumber } from 'bignumber.js';
-import { useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
-import { ExpandAltOutlined } from '@ant-design/icons';
 import { useStore } from '@app/stores';
 import { trackEvent } from '@app/utils/stat';
 import { v4 as uuidv4 } from 'uuid';
@@ -39,11 +38,7 @@ const OutputBox = (props: IProps) => {
   const [isFavorited, setIsFavorited] = useState(false);
   const [showGraph, setShowGraph] = useState(false);
   const [graph, setGraph] = useState<GraphStore | null>(null);
-  const [height, setHeight] = useState(null);
   const [tab, setTab] = useState('');
-  const outputBoxRef = useRef<HTMLDivElement>();
-  const headerRef = useRef<HTMLDivElement>();
-  const position: React.MutableRefObject<Record<string, number>> = useRef({});
 
   const initData = useCallback(() => {
     let _columns = [] as any;
@@ -106,10 +101,6 @@ const OutputBox = (props: IProps) => {
 
   useEffect(() => {
     initData();
-    return () => {
-      document.removeEventListener('mousemove', onDrag);
-      document.removeEventListener('mouseup', onDragEnd);
-    };
   }, []);
 
   const handleTabChange = useCallback((key) => {
@@ -224,32 +215,6 @@ const OutputBox = (props: IProps) => {
     });
   };
 
-  const onDragStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const bbox = outputBoxRef.current.getBoundingClientRect();
-    position.current = {
-      startY: e.pageY,
-      height: bbox.height,
-    };
-    document.addEventListener('mousemove', onDrag);
-    document.addEventListener('mouseup', onDragEnd);
-  };
-
-  const onDrag = (e: MouseEvent) => {
-    e.preventDefault();
-    const dy = e.pageY - position.current.startY;
-    const height = dy + position.current.height;
-    const header = headerRef.current.getBoundingClientRect();
-    if (height <= header.height + 70) return;
-    setHeight(height);
-    graph?.resize();
-  };
-
-  const onDragEnd = () => {
-    document.removeEventListener('mousemove', onDrag);
-    document.removeEventListener('mouseup', onDragEnd);
-  };
-
   const resultSuccess = code === 0;
   const items = useMemo(() => {
     const isDot = data.headers[0] === 'format';
@@ -334,15 +299,8 @@ const OutputBox = (props: IProps) => {
     ].filter(Boolean);
   }, [gql, data, dataSource, columns]);
   return (
-    <div
-      className={styles.outputBox}
-      ref={outputBoxRef}
-      style={{
-        height: height ? `${height}px` : undefined,
-        position: 'relative',
-      }}
-    >
-      <div className={styles.outputHeader} ref={headerRef}>
+    <div className={styles.outputBox}>
+      <div className={styles.outputHeader}>
         <p
           className={cls(styles.gql, { [styles.errorInfo]: !resultSuccess })}
           onClick={() => onHistoryItem(gql, space)}
@@ -409,9 +367,6 @@ const OutputBox = (props: IProps) => {
                   </Button>
                 )}
               </div>
-              <div className={styles.resizeBtn} draggable onMouseDown={onDragStart}>
-                <ExpandAltOutlined rotate={90} />
-              </div>
             </div>
           )}
         </>

diff --git a/app/pages/Console/index.module.less b/app/pages/Console/index.module.less
@@ -94,6 +94,8 @@
       border: 1px solid @gray;
       border-radius: 3px;
       min-height: 120px;
+      resize: vertical;
+      overflow-y: hidden;
       .btnOpenParam {
         display: flex;
         align-items: center;
@@ -218,7 +220,8 @@
 }
 
 .toggleDrawer {
-  width: 53px;
+  width: 54px;
+  flex: 0 0 54px;
   padding: 10px;
   background-color: #fff;
   display: flex;
@@ -366,7 +369,5 @@
 
 .monacoEditor {
   min-height: 120px;
-  height: 120px;
-  overflow-y: auto;
-  resize: vertical;
+  height: 100%;
 }