Merge pull request #1082 from chat2db/refactor-electron

feat:custom clone app
chat2db · Jan 8, 2024 · 76cea50 · 76cea50
2 parents 6678e40 + 5142779
commit 76cea50
Show file tree

Hide file tree

Showing 14 changed files with 2,409 additions and 187 deletions.
diff --git a/chat2db-client/package.json b/chat2db-client/package.json
@@ -63,7 +63,6 @@
     "electron": "^22.3.0",
     "electron-builder": "^23.6.0",
     "electron-debug": "^3.2.0",
-    "electron-reload": "^2.0.0-alpha.1",
     "eslint": "^8.49.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",

diff --git a/chat2db-client/src/blocks/AppTitleBar/index.less b/chat2db-client/src/blocks/AppTitleBar/index.less
@@ -5,11 +5,38 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 30px;
-  padding: 0px 10px;
-  .appName {
+  height: 34px;
+  .appTitleBarGlobal{
     flex: 1;
-    text-align: center;
-    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 10px;
+    .appName {
+      flex: 1;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+  .spacer {
+    width: 126px;
+    flex-shrink: 0;
+  }
+  .windowsCloseBar {
+    display: flex;
+    height: 100%;
+    flex-shrink: 0;
+    width: 126px;
+    .windowsCloseBarItem {
+      width: 42px;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--color-hover-bg);
+      }
+    }
   }
 }
diff --git a/chat2db-client/src/blocks/AppTitleBar/index.tsx b/chat2db-client/src/blocks/AppTitleBar/index.tsx
@@ -1,9 +1,8 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import styles from './index.less';
 import classnames from 'classnames';
 import { useCommonStore } from '@/store/common';
-
-// import Iconfont from '@/components/Iconfont';
+import Iconfont from '@/components/Iconfont';
 
 interface IProps {
   className?: string;
@@ -18,26 +17,40 @@ export default memo<IProps>((props) => {
     };
   });
 
+  const isWin = useMemo(() => {
+    return window.electronApi?.getPlatform().isWin;
+  }, []);
+
+  // const isWin = true;
+
   const handleDoubleClick = () => {
     window.electronApi?.setMaximize();
   };
 
+  const handelMaximize = () => {
+    window.electronApi?.setMaximize();
+  }
+
   return (
     <div className={classnames(styles.appTitleBar, className)} onDoubleClick={handleDoubleClick}>
-      <div />
-      <div className={styles.appName}>Chat2DB Community</div>
-      <div>{appTitleBarRightComponent}</div>
-      {/* <div className={styles.windowsCloseBar}>
-        <div>
-          <Iconfont code="icon-minimize" />
-        </div>
-        <div>
-          <Iconfont code="icon-minimize" />
-        </div>
-        <div>
-          <Iconfont code="icon-minimize" />
+      <div className={styles.appTitleBarGlobal}>
+        <div className={classnames({ [styles.windowsSpacer]: isWin })} />
+        <div className={styles.appName}>Chat2DB Community</div>
+        <div>{appTitleBarRightComponent}</div>
+      </div>
+      {isWin && (
+        <div className={styles.windowsCloseBar}>
+          <div className={styles.windowsCloseBarItem}>
+            <Iconfont code="&#xeb78;" />
+          </div>
+          <div className={styles.windowsCloseBarItem} onClick={handelMaximize}>
+            <Iconfont code="&#xeb78;" />
+          </div>
+          <div className={styles.windowsCloseBarItem}>
+            <Iconfont code="&#xeb78;" />
+          </div>
         </div>
-      </div> */}
+      )}
     </div>
   );
 });
diff --git a/chat2db-client/src/main/index.js b/chat2db-client/src/main/index.js
@@ -26,7 +26,7 @@ function createWindow() {
     minHeight: 720,
     show: false,
     frame: false, // 无边框
-    titleBarStyle: 'hiddenInset',
+    titleBarStyle: 'hidden',
     webPreferences: {
       webSecurity: false,
       spellcheck: false, // 禁用拼写检查器
@@ -82,16 +82,7 @@ app.on('activate', () => {
   }
 });
 
-// app.on('window-all-closed', (event) => {
-//   event.preventDefault();
-//   console.log('window-all-closed', process);
-//   if (process.platform !== 'darwin') {
-//     app.quit();
-//   }
-// });
-
 app.on('window-all-closed', (e) => {
-  // 禁止默认行为
   if (isMac) return;
   app.quit();
 });

diff --git a/chat2db-client/src/main/main.js b/chat2db-client/src/main/main.js
diff --git a/chat2db-client/src/main/main.js.LICENSE.txt b/chat2db-client/src/main/main.js.LICENSE.txt
@@ -0,0 +1 @@
+/** @license URI.js v4.4.1 (c) 2011 Gary Court. License: http://github.com/garycourt/uri-js */
diff --git a/chat2db-client/src/main/package.json b/chat2db-client/src/main/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build:dev": "cross-env NODE_ENV=development webpack",
     "build": "webpack"
   },
   "author": "",

diff --git a/chat2db-client/src/main/preload.js b/chat2db-client/src/main/preload.js
@@ -2,7 +2,7 @@ const { contextBridge, ipcRenderer } = require('electron');
 const { spawn } = require('child_process');
 const { JAVA_APP_NAME, JAVA_PATH } = require('./constants');
 const path = require('path');
-const { readVersion } = require('./utils');
+const { readVersion, isLinux, isWin } = require('./utils');
 
 contextBridge.exposeInMainWorld('electronApi', {
   startServerForSpawn: async () => {
@@ -58,4 +58,12 @@ contextBridge.exposeInMainWorld('electronApi', {
   setMaximize: () => {
     ipcRenderer.send('set-maximize');
   },
+  // 获取环境是mac还是windows还是linux
+  getPlatform: () => {
+    return {
+      isLinux,
+      isWin,
+      isLinux,
+    };
+  },
 });
diff --git a/chat2db-client/src/main/utils.js b/chat2db-client/src/main/utils.js
@@ -17,7 +17,7 @@ function loadMainResource(mainWindow) {
     mainWindow.loadURL(DEV_WEB_URL);
     mainWindow.webContents.openDevTools();
     // 监听应用程序根路径下的所有文件，当文件发生修改时，自动刷新应用程序
-    require('electron-reload')(path.join(__dirname, '..'));
+    // require('electron-reload')(path.join(__dirname, '..'));
   } else {
     mainWindow.loadURL(
       url.format({

diff --git a/chat2db-client/src/pages/main/index.tsx b/chat2db-client/src/pages/main/index.tsx
@@ -18,6 +18,10 @@ import getConnectionEnvList from './functions/getConnection';
 import { useMainStore, setMainPageActiveTab } from '@/pages/main/store/main';
 import { getConnectionList } from '@/pages/main/store/connection';
 import { useUserStore, setCurUser } from '@/store/user';
+import { setAppTitleBarRightComponent } from '@/store/common/appTitleBarConfig';
+
+// ----- component -----
+import CustomLayout from '@/components/CustomLayout';
 
 // ----- block -----
 import Workspace from './workspace';
@@ -77,6 +81,18 @@ function MainPage() {
     __ENV__ === 'desktop' ? mainPageActiveTab : window.location.pathname.split('/')[1] || mainPageActiveTab,
   );
 
+  // 当页面在workspace时，显示自定义布局
+  useEffect(() => {
+    if(mainPageActiveTab === 'workspace'){
+      setAppTitleBarRightComponent(<CustomLayout />);
+    }else{
+      setAppTitleBarRightComponent(false);
+    }
+    return () => {
+      setAppTitleBarRightComponent(false);
+    }
+  }, [mainPageActiveTab]);
+
   useEffect(() => {
     handleInitPage();
     getConnectionList();

diff --git a/chat2db-client/src/pages/main/workspace/index.tsx b/chat2db-client/src/pages/main/workspace/index.tsx
@@ -3,12 +3,10 @@ import classnames from 'classnames';
 
 import { useWorkspaceStore } from '@/pages/main/workspace/store';
 import { setPanelLeftWidth } from '@/pages/main/workspace/store/config';
-import { setAppTitleBarRightComponent } from '@/store/common/appTitleBarConfig';
 
 import DraggableContainer from '@/components/DraggableContainer';
 import WorkspaceLeft from './components/WorkspaceLeft';
 import WorkspaceRight from './components/WorkspaceRight';
-import CustomLayout from '@/components/CustomLayout';
 
 import useMonacoTheme from '@/components/MonacoEditor/useMonacoTheme';
 import shortcutKeyCreateConsole from './functions/shortcutKeyCreateConsole';
@@ -27,13 +25,6 @@ const workspacePage = memo(() => {
   // 编辑器的主题
   useMonacoTheme();
 
-  useEffect(() => {
-    setAppTitleBarRightComponent(<CustomLayout />);
-    return () => {
-      setAppTitleBarRightComponent(null);
-    };
-  }, []);
-
   // 快捷键
   useEffect(() => {
     shortcutKeyCreateConsole();

diff --git a/chat2db-client/src/store/config/index.ts b/chat2db-client/src/store/config/index.ts
@@ -0,0 +1,29 @@
+import { StoreApi } from 'zustand';
+import { UseBoundStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
+import { devtools } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+
+export interface IConfigStore {
+  curRoute: string;
+}
+
+const initConfigStore: IConfigStore = {
+  curRoute: '/',
+};
+
+/**
+ * 配置 store
+ */
+export const useConfigStore: UseBoundStoreWithEqualityFn<StoreApi<IConfigStore>> = createWithEqualityFn(
+  devtools(() => initConfigStore),
+  shallow,
+);
+
+/**
+ *
+ * @param curRoute 设置当前路由
+ */
+export const setCurRoute = (curRoute: string) => {
+  useConfigStore.setState({ curRoute });
+}
+
diff --git a/chat2db-client/typings.d.ts b/chat2db-client/typings.d.ts
@@ -29,6 +29,11 @@ declare global {
       registerAppMenu: (data: any) => void;
       setForceQuitCode: (code: boolean) => void;
       setMaximize: () => void;
+      getPlatform: () => {
+        isLinux: boolean,
+        isWin: boolean,
+        isLinux: boolean,
+      };
     };
   }
   const __APP_VERSION__: string;