From 86070fed2d76a0dbfb555a429f71cda1852268d4 Mon Sep 17 00:00:00 2001 From: houcheng Date: Wed, 11 Oct 2023 11:35:38 +0800 Subject: [PATCH 1/6] =?UTF-8?q?:lipstick:=20=E5=B7=A6=E5=8F=B3=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E5=8F=AF=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 50 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f2bb258..b9004f0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, {useState} from "react"; +import React, {useEffect, useState} from "react"; import {Button, Container, Content, CustomProvider, Footer, Header, Sidebar} from "rsuite"; import "./index.scss" import Side from "@/components/side/side"; @@ -22,6 +22,8 @@ const App = () => { const [state, setState] = useState({theme: getTheme()}); + const [sideWidth, setSideWidth] = useState(260); + const changeTheme = (theme: 'light' | 'dark' | 'high-contrast') => { ipcRenderer.send("saveData", "theme", theme); setState({theme: theme}); @@ -32,6 +34,48 @@ const App = () => { changeTheme: changeTheme, } + const bindSideBarDrag = () => { + const dragPointer = document.getElementById('drag-resize-pointer'); + + if (dragPointer) { + console.log("add event listener") + dragPointer.addEventListener('mousedown', (e) => { + e.preventDefault(); + + document.documentElement.addEventListener('mousemove', mousemove); + document.documentElement.addEventListener('mouseup', mouseup); + }); + } + + const mousemove = (e: MouseEvent) => { + console.log("move", e) + const mouseX = e.x; + const dragSideWidth = mouseX - 17; + + if ((dragSideWidth > 280) && (dragSideWidth < 1500)) { + setSideWidth(dragSideWidth); + ipcRenderer.send("saveData", "sideWidth", dragSideWidth); + } + } + + const mouseup = () => { + console.log("up"); + document.documentElement.removeEventListener('mousemove', mousemove); + document.documentElement.removeEventListener('mouseup', mouseup); + // 存储当前宽度 涉及到 useState 异步更新不及时问题，待解决 + } + } + + const initSideWidth = () => { + const storeValue = ipcRenderer.sendSync("getData", "sideWidth"); + setSideWidth(storeValue); + } + + useEffect(() => { + initSideWidth(); + bindSideBarDrag(); + }, []); + return ( @@ -39,12 +83,12 @@ const App = () => {
- +
-
+
From 07c65080b0f1850025bf56780d9895726ab588ce Mon Sep 17 00:00:00 2001 From: houcheng Date: Wed, 11 Oct 2023 16:37:44 +0800 Subject: [PATCH 2/6] =?UTF-8?q?:zap:=20=E4=BC=98=E5=8C=96=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E8=B0=83=E6=95=B4=E6=97=B6=E7=9A=84=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 69 ++++++++++++++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b9004f0..c9c807e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from "react"; -import {Button, Container, Content, CustomProvider, Footer, Header, Sidebar} from "rsuite"; +import {Container, Content, CustomProvider, Sidebar} from "rsuite"; import "./index.scss" import Side from "@/components/side/side"; import PageContext from "@/PageContext"; @@ -10,35 +10,56 @@ interface State { theme: 'light' | 'dark' | 'high-contrast', } -const getTheme = () => { - const storeTheme = ipcRenderer.sendSync("getData", "theme"); - if (storeTheme) { - return storeTheme; - } - return "light"; -} - const App = () => { - const [state, setState] = useState({theme: getTheme()}); + const [state, setState] = useState(); - const [sideWidth, setSideWidth] = useState(260); + const [sideWidth, setSideWidth] = useState(280); + + let sideWidthBack = 280; const changeTheme = (theme: 'light' | 'dark' | 'high-contrast') => { ipcRenderer.send("saveData", "theme", theme); setState({theme: theme}); } + const getTheme = () => { + if (state) { + return state.theme; + } + const storeTheme = ipcRenderer.sendSync("getData", "theme"); + if (storeTheme) { + setState({theme: storeTheme}); + return storeTheme; + } + return "light"; + } + const contextVal = { - theme: state.theme, + theme: getTheme(), changeTheme: changeTheme, } + const mousemove = (e: MouseEvent) => { + const mouseX = e.x; + const dragSideWidth = mouseX - 17; + + if ((dragSideWidth > 280) && (dragSideWidth < 1200)) { + setSideWidth(dragSideWidth); + sideWidthBack = dragSideWidth; + } + } + + const mouseup = () => { + document.documentElement.removeEventListener('mousemove', mousemove); + document.documentElement.removeEventListener('mouseup', mouseup); + ipcRenderer.send("saveData", "sideWidth", sideWidthBack); + } + const bindSideBarDrag = () => { const dragPointer = document.getElementById('drag-resize-pointer'); if (dragPointer) { - console.log("add event listener") dragPointer.addEventListener('mousedown', (e) => { e.preventDefault(); @@ -46,29 +67,13 @@ const App = () => { document.documentElement.addEventListener('mouseup', mouseup); }); } - - const mousemove = (e: MouseEvent) => { - console.log("move", e) - const mouseX = e.x; - const dragSideWidth = mouseX - 17; - - if ((dragSideWidth > 280) && (dragSideWidth < 1500)) { - setSideWidth(dragSideWidth); - ipcRenderer.send("saveData", "sideWidth", dragSideWidth); - } - } - - const mouseup = () => { - console.log("up"); - document.documentElement.removeEventListener('mousemove', mousemove); - document.documentElement.removeEventListener('mouseup', mouseup); - // 存储当前宽度 涉及到 useState 异步更新不及时问题，待解决 - } } const initSideWidth = () => { const storeValue = ipcRenderer.sendSync("getData", "sideWidth"); - setSideWidth(storeValue); + if (storeValue) { + setSideWidth(storeValue); + } } useEffect(() => { From 90bf0121f329914080e951e838bba9532ec30e39 Mon Sep 17 00:00:00 2001 From: houcheng Date: Wed, 11 Oct 2023 17:26:37 +0800 Subject: [PATCH 3/6] =?UTF-8?q?:sparkles:=20=E7=AA=97=E5=8F=A3=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=E8=B0=83=E6=95=B4=E5=90=8E=E8=87=AA=E5=8A=A8=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=EF=BC=8C=E5=86=8D=E6=AC=A1=E6=89=93=E5=BC=80=E6=97=A0?= =?UTF-8?q?=E9=9C=80=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- electron/main/index.ts | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/electron/main/index.ts b/electron/main/index.ts index 9b7634b..6cb3f08 100644 --- a/electron/main/index.ts +++ b/electron/main/index.ts @@ -1,4 +1,4 @@ -import {app, BrowserWindow, shell, ipcMain} from 'electron' +import {app, BrowserWindow, shell, ipcMain, ipcRenderer, contextBridge} from 'electron' import Store from "electron-store"; import {release} from 'node:os' import {join} from 'node:path' @@ -45,12 +45,29 @@ const indexHtml = join(process.env.DIST, 'index.html') // electron-store 存储 let store = new Store(); + +let defaultSizeData = { + height: 800, + width: 1100, +} + +interface WindowSize { + height: number, + width: number +} + +let windowSizeData = store.get("windowSizeData") as WindowSize; +if (windowSizeData) { + defaultSizeData.height = windowSizeData.height; + defaultSizeData.width = windowSizeData.width; +} + async function createWindow() { win = new BrowserWindow({ title: 'KafkaDesktop', icon: join(process.env.VITE_PUBLIC, 'favicon.ico'), - height: 800, - width: 1100, + height: defaultSizeData.height, + width: defaultSizeData.width, webPreferences: { preload, // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production @@ -84,6 +101,14 @@ async function createWindow() { return {action: 'deny'} }) + win.on("resize", (e: any) => { + let sizeData = win?.getContentBounds(); + if (sizeData) { + defaultSizeData.width = sizeData.width; + defaultSizeData.height = sizeData.height; + } + }) + // Apply electron-updater update(win) } @@ -91,6 +116,8 @@ async function createWindow() { app.whenReady().then(createWindow) app.on('window-all-closed', () => { + // 程序关闭存储程序窗口大小 + store.set("windowSizeData", defaultSizeData); win = null if (process.platform !== 'darwin') app.quit() }) @@ -146,4 +173,4 @@ ipcMain.on("getData", (event,k ) => { ipcMain.on("delData", (event,k ) => { store.delete(k); console.log('delete k successfully: ', k); -}) \ No newline at end of file +}) From 6a65033cffed042d29a906c1d2ccc7e2bf2f4b61 Mon Sep 17 00:00:00 2001 From: sunny Date: Wed, 11 Oct 2023 22:59:19 +0800 Subject: [PATCH 4/6] =?UTF-8?q?:bug:=20=E4=BF=AE=E5=A4=8D=E8=BF=9E?= =?UTF-8?q?=E6=8E=A5=E5=A4=B1=E8=B4=A5=E5=90=8E=E6=A0=B7=E5=BC=8F=E4=BE=9D?= =?UTF-8?q?=E7=84=B6=E6=98=AF=E5=B7=B2=E8=BF=9E=E6=8E=A5=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/rightContent/RightContent.tsx | 10 ++++++++++ src/components/side/side.tsx | 9 ++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/rightContent/RightContent.tsx b/src/components/rightContent/RightContent.tsx index 6efad70..a1fa1fc 100644 --- a/src/components/rightContent/RightContent.tsx +++ b/src/components/rightContent/RightContent.tsx @@ -58,10 +58,20 @@ const RightContent = () => { }); // 初始化 kafka 连接对象 开始连接 setKafkaClient(tmpClient); + let resultObj = { + success: true, + data: data + } + PubSub.publish("connectResultTopic", resultObj); }).catch(() => { toaster.push(集群连接异常，请检查配置信息是否正确, { duration: 2000 }); + let resultObj = { + success: false, + data: data + } + PubSub.publish("connectResultTopic", resultObj); }).finally(() => { if (testAdmin) { testAdmin.disconnect(); diff --git a/src/components/side/side.tsx b/src/components/side/side.tsx index 09c53b7..22d45ef 100644 --- a/src/components/side/side.tsx +++ b/src/components/side/side.tsx @@ -70,8 +70,15 @@ const Side = () => { console.log("side mount"); const storeValue = ipcRenderer.sendSync("getData", "clusterInfo"); setClusterList(storeValue == undefined ? [] : storeValue); + // 订阅连接响应信息 + PubSub.subscribe("connectResultTopic", connectResultConsumer); }, []) + const connectResultConsumer = (msg: any, data: any) => { + if (data.success) { + setConnRowData(data.data); + } + } const changeTheme = () => { const targetTheme = context.theme == "light" ? "dark" : "light"; @@ -80,7 +87,7 @@ const Side = () => { const connect = (rowData: RowDataType) => { console.log('connect rowData:', rowData); - setConnRowData(rowData); + // setConnRowData(rowData); // publish a topic asynchronously PubSub.publish('clusterInfoTopic', rowData); } From 5e4d09eb7e44574da58c2e4d8729bcce9fc180ba Mon Sep 17 00:00:00 2001 From: sunny Date: Wed, 11 Oct 2023 23:33:07 +0800 Subject: [PATCH 5/6] =?UTF-8?q?:bug:=20=E4=BC=98=E5=8C=96=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E5=90=8E=E5=87=BA=E7=8E=B0=E7=9A=84=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.scss b/src/index.scss index e496a07..3f23859 100644 --- a/src/index.scss +++ b/src/index.scss @@ -5,6 +5,8 @@ body, html { font-family: 'LXGWWenKaiMono-Bold', sans-serif; font-size: 0.99em; + // 拖拽大小修改可能会出现滚动条，超出部分hidden处理 + overflow: hidden; } @font-face { From 22ace21d4fa0dd260635768879f57a6fe9f5bdce Mon Sep 17 00:00:00 2001 From: sunny Date: Wed, 11 Oct 2023 23:54:54 +0800 Subject: [PATCH 6/6] =?UTF-8?q?:lipstick:=20=E4=BC=98=E5=8C=96=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E8=BF=9E=E6=8E=A5=E6=8C=89=E9=92=AE=E5=92=8C=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE=E5=9C=A8=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E6=94=B9=E5=8F=98=E5=A4=A7=E5=B0=8F=E6=97=B6=E7=9A=84?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/side/side.scss | 10 ++++++++-- src/components/side/side.tsx | 37 ++++++++++++++++------------------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/side/side.scss b/src/components/side/side.scss index 423aa35..27040ed 100644 --- a/src/components/side/side.scss +++ b/src/components/side/side.scss @@ -11,12 +11,18 @@ width: 100%; } +.icon-btn { + float: right; + margin: 0 0 0 10px; +} + .conn-btn { width: 100%; } .row-container { - margin: 0 0 0 -10px + margin: 0 0 0 -10px; + display: flex; } .light-conn-row { @@ -27,4 +33,4 @@ .dark-conn-row { //background-color: #11ea40 !important; color: #34c3ff; -} \ No newline at end of file +} diff --git a/src/components/side/side.tsx b/src/components/side/side.tsx index 22d45ef..92ac190 100644 --- a/src/components/side/side.tsx +++ b/src/components/side/side.tsx @@ -154,25 +154,22 @@ const Side = () => {
- - - - - - - - } - onClick={changeTheme} - /> - - - - +
+
+ +
+
+ + } + onClick={changeTheme} + /> +
+
{ }} > - + clusterName