Merge pull request #685 from chat2db/dev

Dev
CodePhiliaX · Oct 28, 2023 · ce0ad42 · ce0ad42
2 parents 6460041 + 40a31f0
commit ce0ad42
Show file tree

Hide file tree

Showing 19 changed files with 265 additions and 10,592 deletions.
diff --git a/chat2db-client/.vscode/settings.json b/chat2db-client/.vscode/settings.json
@@ -62,6 +62,7 @@
     "OPENAI",
     "packagejson",
     "Parens",
+    "partialize",
     "pgsql",
     "plusplus",
     "pnpm",
@@ -87,7 +88,8 @@
     "webp",
     "wireframe",
     "Wppk",
-    "yapi"
+    "yapi",
+    "zustand"
   ],
   "typescript.tsdk": "/Users/wangjiaqi/Desktop/Chat2DB/chat2db-client/node_modules/typescript/lib"
 }
diff --git a/chat2db-client/package.json b/chat2db-client/package.json
@@ -27,14 +27,15 @@
   },
   "dependencies": {
     "@dnd-kit/modifiers": "^6.0.1",
-    "ahooks": "^3.7.7",
+    "ahooks": "^3.7.8",
     "ali-react-table": "^2.6.1",
     "antd": "^5.6.0",
     "copy-to-clipboard": "^3.3.3",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",
     "electron-log": "^4.4.8",
     "event-source-polyfill": "^1.0.31",
+    "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
     "markdown-it-link-attributes": "^4.0.1",
     "monaco-editor": "^0.34.0",
@@ -48,7 +49,7 @@
     "umi": "^4.0.70",
     "umi-request": "^1.4.0",
     "uuid": "^9.0.0",
-    "highlight.js": "^11.9.0"
+    "zustand": "^4.4.4"
   },
   "devDependencies": {
     "@types/event-source-polyfill": "^1.0.1",

diff --git a/chat2db-client/src/assets/logo/logo-introverted.webp b/chat2db-client/src/assets/logo/logo-introverted.webp
diff --git a/chat2db-client/src/components/CustomLayout/index.less b/chat2db-client/src/components/CustomLayout/index.less
@@ -0,0 +1,52 @@
+@import '../../styles/var.less';
+
+.customLayout {
+  display: flex;
+  align-items: center;
+  .iconPanel {
+    margin: 0px 5px;
+    border: 1px solid var(--color-text-tertiary);
+    border-radius: 3px;
+    height: 14px;
+    width: 14px;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    &::after {
+      position: absolute;
+      content: '';
+      width: 6px;
+      background-color: var(--color-text-tertiary);
+    }
+  }
+
+  .iconPanelLeft {
+    &::after {
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .iconPanelLeftHidden {
+    &::after {
+      left: 5px;
+      width: 1px;
+    }
+  }
+
+  .iconPanelRight {
+    &::after {
+      top: 0;
+      bottom: 0;
+      right: 5px;
+      width: 1px;
+    }
+  }
+
+  .iconPanelRightHidden {
+    &::after {
+      width: 6px;
+    }
+  }
+}
diff --git a/chat2db-client/src/components/CustomLayout/index.tsx b/chat2db-client/src/components/CustomLayout/index.tsx
@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import styles from './index.less';
+import classnames from 'classnames';
+import { useWorkspaceStore } from '@/store/workspace';
+
+interface IProps {
+  className?: string;
+}
+
+export default memo<IProps>((props) => {
+  const { className } = props;
+  const { panelLeft, togglePanelLeft } = useWorkspaceStore((state) => {
+    return {
+      togglePanelLeft: state.togglePanelLeft,
+      panelLeft: state.layout.panelLeft,
+    };
+  });
+
+  return (
+    <div className={classnames(styles.customLayout, className)}>
+      <div
+        className={classnames(styles.iconPanelLeft, styles.iconPanel, { [styles.iconPanelLeftHidden]: !panelLeft })}
+        onClick={togglePanelLeft}
+      />
+      {/* <div className={classnames(styles.iconPanelRight, styles.iconPanel, { [styles.iconPanelRightHidden]: false })} /> */}
+    </div>
+  );
+});
diff --git a/chat2db-client/src/components/DraggableContainer/index.tsx b/chat2db-client/src/components/DraggableContainer/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useRef, useEffect, useState, useMemo } from 'react';
+import React, { memo, useRef, useEffect, useState } from 'react';
 import styles from './index.less';
 import classnames from 'classnames';
 
@@ -7,18 +7,12 @@ interface IProps {
   children: any; //TODO: TS，约定接受一个数组，第一项child需要携带ref
   min?: number;
   layout?: 'row' | 'column';
-  callback?: Function;
+  callback?: (data: any) => void;
   showLine?: boolean;
 }
 
-export default memo<IProps>(function DraggableContainer({
-  children,
-  showLine = true,
-  callback,
-  min,
-  className,
-  layout = 'row',
-}) {
+export default memo<IProps>((props: IProps) => {
+  const { children, showLine = true, callback, min, className, layout = 'row' } = props;
   const volatileRef = children[0]?.ref;
 
   const DividerRef = useRef<HTMLDivElement | null>(null);
@@ -31,45 +25,26 @@ export default memo<IProps>(function DraggableContainer({
     if (!DividerRef.current) {
       return;
     }
-    // DividerRef.current.onmouseover = (e) => {
-    //   setDragging(true);
-    // };
-    // DividerRef.current.onmouseout = (e) => {
-    //   setDragging(false);
-    // };
 
     DividerRef.current.onmousedown = (e) => {
       if (!volatileRef?.current) return;
-
       e.preventDefault();
       setDragging(true);
       const clientStart = isRow ? e.clientX : e.clientY;
-      const volatileBoxXY = isRow
-        ? volatileRef.current.offsetWidth
-        : volatileRef.current.offsetHeight;
-      document.onmousemove = (e) => {
-        moveHandle(
-          isRow ? e.clientX : e.clientY,
-          volatileRef.current,
-          clientStart,
-          volatileBoxXY,
-        );
+      const volatileBoxXY = isRow ? volatileRef.current.offsetWidth : volatileRef.current.offsetHeight;
+      document.onmousemove = (_e) => {
+        moveHandle(isRow ? _e.clientX : _e.clientY, volatileRef.current, clientStart, volatileBoxXY);
       };
-      document.onmouseup = (e) => {
+      document.onmouseup = () => {
         setDragging(false);
         document.onmouseup = null;
         document.onmousemove = null;
       };
     };
   }, []);
 
-  const moveHandle = (
-    nowClientXY: any,
-    leftDom: any,
-    clientStart: any,
-    volatileBoxXY: any,
-  ) => {
-    let computedXY = nowClientXY - clientStart;
+  const moveHandle = (nowClientXY: any, leftDom: any, clientStart: any, volatileBoxXY: any) => {
+    const computedXY = nowClientXY - clientStart;
     let finalXY = 0;
 
     finalXY = volatileBoxXY + computedXY;
@@ -92,18 +67,9 @@ export default memo<IProps>(function DraggableContainer({
         <div
           style={{ display: showLine ? 'block' : 'none' }}
           ref={DividerLine}
-          className={classnames(
-            styles.divider,
-            { [styles.displayDivider]: !children[1] },
-          )}
+          className={classnames(styles.divider, { [styles.displayDivider]: !children[1] })}
         >
-          <div
-            ref={DividerRef}
-            className={classnames(
-              styles.dividerCenter,
-              { [styles.dragging]: dragging },
-            )}
-          />
+          <div ref={DividerRef} className={classnames(styles.dividerCenter, { [styles.dragging]: dragging })} />
         </div>
       }
       {children[1]}

diff --git a/chat2db-client/src/layouts/index.tsx b/chat2db-client/src/layouts/index.tsx
@@ -16,8 +16,8 @@ import { clearOlderLocalStorage } from '@/utils';
 import registerMessage from './init/registerMessage';
 import registerNotification from './init/registerNotification';
 import MyNotification from '@/components/MyNotification';
-import Iconfont from '@/components/Iconfont';
-import Setting from '@/blocks/Setting';
+// import Iconfont from '@/components/Iconfont';
+// import Setting from '@/blocks/Setting';
 import indexedDB from '@/indexedDB';
 
 declare global {
@@ -33,8 +33,8 @@ declare global {
     electronApi?: {
       startServerForSpawn: () => void;
       quitApp: () => void;
-      setBaseURL: (baseUrl:string) => void;
-      registerAppMenu: (data:any) => void;
+      setBaseURL: (baseUrl: string) => void;
+      registerAppMenu: (data: any) => void;
     };
   }
   const __APP_VERSION__: string;
@@ -109,9 +109,9 @@ function AppContainer() {
   function registerElectronApi() {
     window.electronApi?.registerAppMenu({
       version: __APP_VERSION__,
-    })
+    });
     // 把关闭java服务的的方法传给electron
-    window.electronApi?.setBaseURL?.(window._BaseURL)
+    window.electronApi?.setBaseURL?.(window._BaseURL);
     // console.log(window.electronApi)
   }
 
@@ -186,7 +186,7 @@ function AppContainer() {
             <div className={styles.loadingBox}>
               <Spin spinning={!serviceFail} size="large" />
               {/* 状态等于1时，说明没服务起来需要轮训接口，这时可能服务配置又问题，需要设置来修改 */}
-              {startSchedule === 1 && (
+              {/* {startSchedule === 1 && (
                 <Setting
                   render={
                     <div className={styles.settingBox}>
@@ -195,7 +195,7 @@ function AppContainer() {
                   }
                   noLogin
                 />
-              )}
+              )} */}
               {serviceFail && (
                 <>
                   <div className={styles.github}>

diff --git a/chat2db-client/src/pages/main/workspace/components/TableList/index.tsx b/chat2db-client/src/pages/main/workspace/components/TableList/index.tsx
@@ -68,6 +68,7 @@ const TableList = dvaModel((props: any) => {
   const [searchKey, setSearchKey] = useState<string>('');
   const leftModuleTitleRef = useRef<any>(null);
   const treeBoxRef = useRef<any>(null);
+  const controllerRef = useRef<AbortController>();
 
   // 导出表结构
   const handleExport = (exportType: ExportTypeEnum) => {
@@ -219,7 +220,6 @@ const TableList = dvaModel((props: any) => {
   }, [curWorkspaceParams]);
 
   useUpdateEffect(() => {
-    setCurList([]);
     getList();
   }, [curType]);
 
@@ -299,8 +299,19 @@ const TableList = dvaModel((props: any) => {
   };
 
   function getList(params?: { refresh?: boolean }) {
+    // 在每一getList之前，都要把上一次的请求abort掉
+    controllerRef.current && controllerRef.current.abort('abortRequest');
+
+    // 为每一次请求创建一个新的AbortController
+    controllerRef.current = new AbortController();
+
+    // abort会触发上一次请求的setTableLoading(false); 所以这里要延迟触发
+    setTimeout(() => {
+      setTableLoading(true);
+    }, 0);
+
+    setCurList([]);
     const { refresh = false } = params || {};
-    setTableLoading(true);
     const p = {
       refresh,
       ...curWorkspaceParams,
@@ -311,7 +322,11 @@ const TableList = dvaModel((props: any) => {
       p.pageNo = pagingData.pageNo;
       p.pageSize = pagingData.pageSize;
     }
-    treeConfig[curType.value].getChildren!(p)
+
+    // 发送请求
+    treeConfig[curType.value].getChildren!(p, {
+      signal: controllerRef.current.signal,
+    })
       .then((res: any) => {
         // 表的处理
         if (curType.value === TreeNodeType.TABLES) {
@@ -346,8 +361,7 @@ const TableList = dvaModel((props: any) => {
   }
 
   function refreshTableList() {
-    if (isReady) {
-      setCurList([]);
+    if (isReady && !tableLoading) {
       getList({
         refresh: true,
       });
@@ -441,15 +455,14 @@ const TableList = dvaModel((props: any) => {
 
       <div ref={treeBoxRef} className={styles.treeBox}>
         <LoadingContent isLoading={tableLoading}>
-          {
-            (curType.value === TreeNodeType.TABLES && !curList.length) ? 
+          {curType.value === TreeNodeType.TABLES && !curList.length ? (
             <div className={styles.emptyBox}>
               <div>{i18n('common.text.noTableFoundUp')}</div>
               <div>{i18n('common.text.noTableFoundDown')}</div>
-             </div>
-            :
+            </div>
+          ) : (
             <Tree initialData={searchedTableList || curList} />
-          }
+          )}
         </LoadingContent>
       </div>
 

diff --git a/chat2db-client/src/pages/main/workspace/components/Tree/treeConfig.tsx b/chat2db-client/src/pages/main/workspace/components/Tree/treeConfig.tsx
@@ -68,7 +68,10 @@ export const switchIcon: Partial<{ [key in TreeNodeType]: { icon: string; unfold
 
 export interface ITreeConfigItem {
   icon?: string;
-  getChildren?: (params: any) => Promise<
+  getChildren?: (
+    params: any,
+    options?: any,
+  ) => Promise<
     | ITreeNode[]
     | ({
         data: ITreeNode[];
@@ -191,10 +194,10 @@ export const treeConfig: { [key in TreeNodeType]: ITreeConfigItem } = {
 
   [TreeNodeType.TABLES]: {
     icon: '\ueac5',
-    getChildren: (params) => {
+    getChildren: (params, options) => {
       return new Promise((r, j) => {
         mysqlServer
-          .getTableList(params)
+          .getTableList(params, options)
           .then((res) => {
             const tableList: ITreeNode[] = res.data?.map((t: any) => {
               return {

diff --git a/chat2db-client/src/pages/main/workspace/components/WorkspaceHeader/index.less b/chat2db-client/src/pages/main/workspace/components/WorkspaceHeader/index.less
@@ -19,6 +19,8 @@
   flex: 1;
   flex-shrink: 0;
   overflow: hidden;
+  display: flex;
+  justify-content: end;
 }
 
 .workspaceHeaderLeft {