From 66abb416df16a953e694b996ae19c9f9757a56fb Mon Sep 17 00:00:00 2001 From: fullex <106392080+0xfullex@users.noreply.github.com> Date: Fri, 2 May 2025 15:19:47 +0800 Subject: [PATCH] refactor: simplify custom CSS functionality by store sync (#5596) * feat: implement store synchronization across windows - Added new IPC channels for store synchronization: StoreSync_Subscribe, StoreSync_Unsubscribe, StoreSync_OnUpdate, and StoreSync_BroadcastSync. - Integrated store sync service in various components, including the main IPC handler and renderer store. - Removed the MiniWindowReload IPC channel as it was no longer needed. - Updated the store configuration to support synchronization of specific state slices. * refactor: remove custom CSS functionality from IPC and related components - Removed the App_SetCustomCss channel and associated handlers from the IPC and ConfigManager. - Updated the renderer components to eliminate references to custom CSS settings. - Refactored the MiniWindow component to manage custom CSS directly without IPC communication. --- packages/shared/IpcChannel.ts | 1 - src/main/ipc.ts | 16 ----- src/main/services/ConfigManager.ts | 8 --- src/preload/index.ts | 1 - src/renderer/src/hooks/useAppInit.ts | 14 ++--- .../DisplaySettings/DisplaySettings.tsx | 1 - src/renderer/src/services/StoreSyncService.ts | 2 - .../src/windows/mini/MiniWindowApp.tsx | 60 ++++--------------- 8 files changed, 19 insertions(+), 84 deletions(-) diff --git a/packages/shared/IpcChannel.ts b/packages/shared/IpcChannel.ts index 79786b377c..0833992d96 100644 --- a/packages/shared/IpcChannel.ts +++ b/packages/shared/IpcChannel.ts @@ -12,7 +12,6 @@ export enum IpcChannel { App_SetTrayOnClose = 'app:set-tray-on-close', App_RestartTray = 'app:restart-tray', App_SetTheme = 'app:set-theme', - App_SetCustomCss = 'app:set-custom-css', App_SetAutoUpdate = 'app:set-auto-update', App_IsBinaryExist = 'app:is-binary-exist', diff --git a/src/main/ipc.ts b/src/main/ipc.ts index f5fd62b9fa..fda88fe275 100644 --- a/src/main/ipc.ts +++ b/src/main/ipc.ts @@ -141,22 +141,6 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) { notifyThemeChange() }) - // custom css - ipcMain.handle(IpcChannel.App_SetCustomCss, (event, css: string) => { - if (css === configManager.getCustomCss()) return - configManager.setCustomCss(css) - - // Broadcast to all windows including the mini window - const senderWindowId = event.sender.id - const windows = BrowserWindow.getAllWindows() - // 向其他窗口广播主题变化 - windows.forEach((win) => { - if (win.webContents.id !== senderWindowId) { - win.webContents.send('custom-css:update', css) - } - }) - }) - // clear cache ipcMain.handle(IpcChannel.App_ClearCache, async () => { const sessions = [session.defaultSession, session.fromPartition('persist:webview')] diff --git a/src/main/services/ConfigManager.ts b/src/main/services/ConfigManager.ts index 86f23f80d2..6242709385 100644 --- a/src/main/services/ConfigManager.ts +++ b/src/main/services/ConfigManager.ts @@ -44,14 +44,6 @@ export class ConfigManager { this.set(ConfigKeys.Theme, theme) } - getCustomCss(): string { - return this.store.get('customCss', '') as string - } - - setCustomCss(css: string) { - this.store.set('customCss', css) - } - getLaunchToTray(): boolean { return !!this.get(ConfigKeys.LaunchToTray, false) } diff --git a/src/preload/index.ts b/src/preload/index.ts index 674df1867a..fa88222eb2 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -19,7 +19,6 @@ const api = { setTrayOnClose: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetTrayOnClose, isActive), restartTray: () => ipcRenderer.invoke(IpcChannel.App_RestartTray), setTheme: (theme: 'light' | 'dark' | 'auto') => ipcRenderer.invoke(IpcChannel.App_SetTheme, theme), - setCustomCss: (css: string) => ipcRenderer.invoke(IpcChannel.App_SetCustomCss, css), setAutoUpdate: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetAutoUpdate, isActive), openWebsite: (url: string) => ipcRenderer.invoke(IpcChannel.Open_Website, url), clearCache: () => ipcRenderer.invoke(IpcChannel.App_ClearCache), diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts index 84b62271d0..b31c325400 100644 --- a/src/renderer/src/hooks/useAppInit.ts +++ b/src/renderer/src/hooks/useAppInit.ts @@ -91,16 +91,16 @@ export function useAppInit() { }, []) useEffect(() => { - const oldCustomCss = document.getElementById('user-defined-custom-css') - if (oldCustomCss) { - oldCustomCss.remove() + let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement + if (customCssElement) { + customCssElement.remove() } if (customCss) { - const style = document.createElement('style') - style.id = 'user-defined-custom-css' - style.textContent = customCss - document.head.appendChild(style) + customCssElement = document.createElement('style') + customCssElement.id = 'user-defined-custom-css' + customCssElement.textContent = customCss + document.head.appendChild(customCssElement) } }, [customCss]) diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx index c1811862ee..70734fca55 100644 --- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx +++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx @@ -190,7 +190,6 @@ const DisplaySettings: FC = () => { value={customCss} onChange={(e) => { dispatch(setCustomCss(e.target.value)) - window.api.setCustomCss(e.target.value) }} placeholder={t('settings.display.custom.css.placeholder')} style={{ diff --git a/src/renderer/src/services/StoreSyncService.ts b/src/renderer/src/services/StoreSyncService.ts index 31643d102a..37d87b2ea9 100644 --- a/src/renderer/src/services/StoreSyncService.ts +++ b/src/renderer/src/services/StoreSyncService.ts @@ -97,8 +97,6 @@ export class StoreSyncService { IpcChannel.StoreSync_BroadcastSync, (_, action: StoreSyncAction) => { try { - console.log('StoreSync_BroadcastSync action', action) - // Dispatch to the store if (window.store) { window.store.dispatch(action) diff --git a/src/renderer/src/windows/mini/MiniWindowApp.tsx b/src/renderer/src/windows/mini/MiniWindowApp.tsx index a769394b0a..605d7868f6 100644 --- a/src/renderer/src/windows/mini/MiniWindowApp.tsx +++ b/src/renderer/src/windows/mini/MiniWindowApp.tsx @@ -1,10 +1,9 @@ import '@renderer/databases' import { useSettings } from '@renderer/hooks/useSettings' -import store, { persistor, useAppDispatch } from '@renderer/store' -import { setCustomCss } from '@renderer/store/settings' +import store, { persistor } from '@renderer/store' import { message } from 'antd' -import { useEffect, useState } from 'react' +import { useEffect } from 'react' import { Provider } from 'react-redux' import { PersistGate } from 'redux-persist/integration/react' @@ -13,58 +12,23 @@ import { SyntaxHighlighterProvider } from '../../context/SyntaxHighlighterProvid import { ThemeProvider } from '../../context/ThemeProvider' import HomeWindow from './home/HomeWindow' -function useMiniWindowCustomCss() { +// Inner component that uses the hook after Redux is initialized +function MiniWindowContent(): React.ReactElement { const { customCss } = useSettings() - const dispatch = useAppDispatch() - const [isInitialized, setIsInitialized] = useState(false) useEffect(() => { - // 初始化时从主进程获取最新的CSS配置 - window.api.config.get('customCss').then((css) => { - if (css !== undefined) { - dispatch(setCustomCss(css)) - } - setIsInitialized(true) - }) - - // Listen for custom CSS updates from main window - const removeListener = window.electron.ipcRenderer.on('custom-css:update', (_event, css) => { - dispatch(setCustomCss(css)) - }) - - return () => { - removeListener() - } - }, [dispatch]) - - useEffect(() => { - if (!isInitialized) return - - // Apply custom CSS - const oldCustomCss = document.getElementById('user-defined-custom-css') - if (oldCustomCss) { - oldCustomCss.remove() + let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement + if (customCssElement) { + customCssElement.remove() } if (customCss) { - const style = document.createElement('style') - style.id = 'user-defined-custom-css' - style.textContent = customCss - document.head.appendChild(style) + customCssElement = document.createElement('style') + customCssElement.id = 'user-defined-custom-css' + customCssElement.textContent = customCss + document.head.appendChild(customCssElement) } - }, [customCss, isInitialized]) - - return isInitialized -} - -// Inner component that uses the hook after Redux is initialized -function MiniWindowContent(): React.ReactElement { - const cssInitialized = useMiniWindowCustomCss() - - // Show empty fragment until CSS is initialized - if (!cssInitialized) { - return <> - } + }, [customCss]) return }