feat: titlebar

electron/main.ts

@@ -28,9 +28,12 @@ let tray: Tray | null = null;
 
 function createWindow() {
   win = new BrowserWindow({
+    width: 1600,
+    height: 900,
     icon: path.join(process.env.VITE_PUBLIC, "tray-icon.svg"),
+    // frame: false,
     titleBarStyle: "hidden", // customButtonsOnHover || hidden || hiddenInset
-    titleBarOverlay: { height: 36 },
+    titleBarOverlay: { height: 36, color: '#f8f8f8' }, // 渲染进程发消息动态改变这个
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs"),
     },
@@ -38,7 +41,9 @@ function createWindow() {
 
   // Test active push message to Renderer-process.
   win.webContents.on("did-finish-load", () => {
-    win?.webContents.send("main-process-message", new Date().toLocaleString());
+    win?.webContents.send("main-process-message", {
+      platform: process.platform === 'darwin' ? 'macos' : 'windows'
+    });
   });
 
   if (VITE_DEV_SERVER_URL) {

src/main.tsx

@@ -2,9 +2,11 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "@/style/global.css";
 
+
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 
 // Use contextBridge
 window.ipcRenderer.on("main-process-message", (_event, message) => {
-  console.log(message);
+  const { platform } = message
+  document.querySelector('html')?.setAttribute('platform', platform)
 });

src/pages/Layout.tsx

@@ -4,11 +4,13 @@ import FlexLayoutComponent from "./FlexLayoutDemo";
 import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
 
 const LayoutMain = () => {
+  const platform = document.querySelector('html')?.getAttribute('platform')
+  const titlebarStyles = platform === 'macos' ? 'pl-[10rem] pr-[2rem]' : 'pr-[10rem] pl-[2rem]'
   return (
     <div className="h-screen">
       {/* 此处height和 new BrowserWindow的titleBar设置一致 */}
       <div
-        className="drag bg px-20 flex items-center justify-between"
+        className={`drag bg ${titlebarStyles} flex items-center justify-between`}
         style={{ height: 36 }}
       >
         <div className="left">1</div>