feat: 主题色切换在主进程中配置

electron/ipcMainHandlers.ts

@@ -13,6 +13,10 @@ import { EVENT_PARSE_DICOM } from "./ipcEvent";
 const registerIpcMainHandlers = (mainWindow: Electron.BrowserWindow | null) => {
   if (!mainWindow) return;
 
+  ipcMain.handleOnce('ipc-loaded', () => {
+    mainWindow.show()
+  })
+
   ipcMain.on(EVENT_PARSE_DICOM, async (event, file: string) => {
     const dirDialog = await dialog.showOpenDialog(mainWindow, {
       properties: ["openDirectory"],

electron/main.ts

@@ -27,14 +27,22 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
 let win: BrowserWindow | null;
 let tray: Tray | null = null;
 
+const theme: 'dark' | 'light' = 'dark'
+
+const themeTitleBarStyles = {
+  dark: { color: "rgb(32,32,32)", symbolColor: '#fff' },
+  light: {}
+}
+
 function createWindow() {
   win = new BrowserWindow({
     width: 1280,
     height: 800,
+    show: false, // 先隐藏。等待渲染完成，防止闪烁
     icon: path.join(process.env.VITE_PUBLIC, "AI.png"),
     // frame: false,
     titleBarStyle: "hidden", // customButtonsOnHover || hidden || hiddenInset
-    titleBarOverlay: { height: 36, color: "rgb(32,32,32)",symbolColor:'#fff' }, // 渲染进程发消息动态改变这个
+    titleBarOverlay: { height: 36, ...themeTitleBarStyles[theme] }, // 渲染进程发消息动态改变这个
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs"),
     },
@@ -44,6 +52,7 @@ function createWindow() {
   win.webContents.on("did-finish-load", () => {
     win?.webContents.send("main-process-message", {
       platform: process.platform === "darwin" ? "macos" : "windows",
+      theme
     });
   });
 

src/App.tsx

@@ -2,17 +2,22 @@ import { ThemeProvider } from "@/components/theme-provider";
 import LayoutMain from "@/pages/Layout";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Aorta from "@/pages/Aorta";
-import Dockview from "@/pages/Dock";
 import { Setting } from "./pages/Setting";
+import { useEffect } from "react";
 
 function App() {
+  const theme = document.querySelector('html')!.getAttribute('theme') as 'dark' | 'light'
+
+  useEffect(() => {
+    window.ipcRenderer.invoke('ipc-loaded')
+  }, [])
+
   return (
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <ThemeProvider defaultTheme={theme} storageKey="vite-ui-theme">
       <Router>
         <Routes>
           <Route path="/" element={<LayoutMain />}>
             <Route index element={<Aorta />} />
-            <Route path="dockerview" element={<Dockview />} />
             <Route path="setting" element={<Setting />} />
           </Route>
         </Routes>

src/components/theme-provider.tsx

@@ -14,7 +14,7 @@ type ThemeProviderState = {
 };
 
 const initialState: ThemeProviderState = {
-  theme: "system",
+  theme: "dark",
   setTheme: () => null,
 };
 

src/main.tsx

@@ -3,8 +3,9 @@ import App from "./App.tsx";
 import "@/style/global.css";
 
 window.ipcRenderer.on("main-process-message", (_event, message) => {
-  const { platform } = message
+  const { platform, theme } = message
   document.querySelector('html')?.setAttribute('platform', platform)
+  document.querySelector('html')?.setAttribute('theme', theme)
 
   ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 });

src/style/global.css

@@ -12,7 +12,7 @@ body,
 
 @layer base {
   :root {
-    --background: 0 0% 97.25%;
+    --background: 0 0% 94.12%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;