From 7c0086a4847f11ebfbb4ae34f79a5746879d38b3 Mon Sep 17 00:00:00 2001 From: fullex <106392080+0xfullex@users.noreply.github.com> Date: Thu, 1 May 2025 21:29:41 +0800 Subject: [PATCH] refactor: Seperate MiniWindow loading from MainWindow (#5581) --- src/main/services/WindowService.ts | 6 +- src/renderer/index.html | 73 ++++++++++--------- src/renderer/src/entryPoint.tsx | 9 +++ src/renderer/src/init.ts | 2 +- src/renderer/src/main.tsx | 16 ---- src/renderer/src/utils/index.ts | 4 - .../mini/{App.tsx => MiniWindowApp.tsx} | 24 +++--- .../windows/mini/chat/components/Message.tsx | 3 +- src/renderer/src/windows/mini/entryPoint.tsx | 22 ++++++ .../src/windows/mini/home/HomeWindow.tsx | 1 - src/renderer/src/windows/mini/index.html | 24 ++++++ 11 files changed, 108 insertions(+), 76 deletions(-) create mode 100644 src/renderer/src/entryPoint.tsx delete mode 100644 src/renderer/src/main.tsx rename src/renderer/src/windows/mini/{App.tsx => MiniWindowApp.tsx} (100%) create mode 100644 src/renderer/src/windows/mini/entryPoint.tsx create mode 100644 src/renderer/src/windows/mini/index.html diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts index 585f7c6eea..2e94cdf3b4 100644 --- a/src/main/services/WindowService.ts +++ b/src/main/services/WindowService.ts @@ -489,11 +489,9 @@ export class WindowService { }) if (is.dev && process.env['ELECTRON_RENDERER_URL']) { - this.miniWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#/mini') + this.miniWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '/src/windows/mini/index.html') } else { - this.miniWindow.loadFile(join(__dirname, '../renderer/index.html'), { - hash: '#/mini' - }) + this.miniWindow.loadFile(join(__dirname, '../renderer/src/windows/mini/index.html')) } return this.miniWindow diff --git a/src/renderer/index.html b/src/renderer/index.html index 19a44594df..eebceeac66 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -1,42 +1,43 @@ - - - - - Cherry Studio - - + #spinner { + position: fixed; + width: 100vw; + height: 100vh; + flex-direction: row; + justify-content: center; + align-items: center; + display: none; + } - -
-
- -
- - - - + #spinner img { + width: 100px; + border-radius: 50px; + } + + + + +
+
+ +
+ + + + + \ No newline at end of file diff --git a/src/renderer/src/entryPoint.tsx b/src/renderer/src/entryPoint.tsx new file mode 100644 index 0000000000..bf6a3cb6a5 --- /dev/null +++ b/src/renderer/src/entryPoint.tsx @@ -0,0 +1,9 @@ +import './assets/styles/index.scss' +import '@ant-design/v5-patch-for-react-19' + +import { createRoot } from 'react-dom/client' + +import App from './App' + +const root = createRoot(document.getElementById('root') as HTMLElement) +root.render() diff --git a/src/renderer/src/init.ts b/src/renderer/src/init.ts index 827a9e2546..71d7a219ff 100644 --- a/src/renderer/src/init.ts +++ b/src/renderer/src/init.ts @@ -6,7 +6,7 @@ import store from './store' function initSpinner() { const spinner = document.getElementById('spinner') - if (spinner && window.location.hash !== '#/mini') { + if (spinner) { spinner.style.display = 'flex' } } diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx deleted file mode 100644 index e9b9645141..0000000000 --- a/src/renderer/src/main.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import './assets/styles/index.scss' -import '@ant-design/v5-patch-for-react-19' - -import { createRoot } from 'react-dom/client' - -import App from './App' -import MiniApp from './windows/mini/App' - -if (location.hash === '#/mini') { - document.getElementById('spinner')?.remove() - const root = createRoot(document.getElementById('root') as HTMLElement) - root.render() -} else { - const root = createRoot(document.getElementById('root') as HTMLElement) - root.render() -} diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts index 4ab44f14ab..c8d5abe934 100644 --- a/src/renderer/src/utils/index.ts +++ b/src/renderer/src/utils/index.ts @@ -155,10 +155,6 @@ export const compareVersions = (v1: string, v2: string): number => { return 0 } -export function isMiniWindow() { - return window.location.hash === '#/mini' -} - /** * 显示确认模态框。 * @param params 模态框参数 diff --git a/src/renderer/src/windows/mini/App.tsx b/src/renderer/src/windows/mini/MiniWindowApp.tsx similarity index 100% rename from src/renderer/src/windows/mini/App.tsx rename to src/renderer/src/windows/mini/MiniWindowApp.tsx index 986c6f1660..a769394b0a 100644 --- a/src/renderer/src/windows/mini/App.tsx +++ b/src/renderer/src/windows/mini/MiniWindowApp.tsx @@ -57,6 +57,18 @@ function useMiniWindowCustomCss() { 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 <> + } + + return +} + function MiniWindow(): React.ReactElement { //miniWindow should register its own message component const [messageApi, messageContextHolder] = message.useMessage() @@ -78,16 +90,4 @@ function MiniWindow(): React.ReactElement { ) } -// 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 <> - } - - return -} - export default MiniWindow diff --git a/src/renderer/src/windows/mini/chat/components/Message.tsx b/src/renderer/src/windows/mini/chat/components/Message.tsx index 149b9de3d7..a22e66147a 100644 --- a/src/renderer/src/windows/mini/chat/components/Message.tsx +++ b/src/renderer/src/windows/mini/chat/components/Message.tsx @@ -5,7 +5,6 @@ import MessageContent from '@renderer/pages/home/Messages/MessageContent' import MessageErrorBoundary from '@renderer/pages/home/Messages/MessageErrorBoundary' // import { LegacyMessage } from '@renderer/types' import type { Message } from '@renderer/types/newMessage' -import { isMiniWindow } from '@renderer/utils' import { FC, memo, useMemo, useRef } from 'react' import styled from 'styled-components' @@ -35,7 +34,7 @@ const MessageItem: FC = ({ message, index, total, route }) => { const messageBackground = getMessageBackground(true, isAssistantMessage) - const maxWidth = isMiniWindow() ? '800px' : '100%' + const maxWidth = '800px' if (['summary', 'explanation'].includes(route) && index === total - 1) { return null diff --git a/src/renderer/src/windows/mini/entryPoint.tsx b/src/renderer/src/windows/mini/entryPoint.tsx new file mode 100644 index 0000000000..4f07f4fa6e --- /dev/null +++ b/src/renderer/src/windows/mini/entryPoint.tsx @@ -0,0 +1,22 @@ +import '@renderer/assets/styles/index.scss' +import '@ant-design/v5-patch-for-react-19' + +import KeyvStorage from '@kangfenmao/keyv-storage' +import { createRoot } from 'react-dom/client' + +import MiniWindowApp from './MiniWindowApp' + +/** + * This function is required for model API + * eg. BaseProviders.ts + * Although the coupling is too strong, we have no choice but to load it + * In multi-window handling, decoupling is needed + */ +function initKeyv() { + window.keyv = new KeyvStorage() + window.keyv.init() +} +initKeyv() + +const root = createRoot(document.getElementById('root') as HTMLElement) +root.render() diff --git a/src/renderer/src/windows/mini/home/HomeWindow.tsx b/src/renderer/src/windows/mini/home/HomeWindow.tsx index d87bff59c0..71d56be006 100644 --- a/src/renderer/src/windows/mini/home/HomeWindow.tsx +++ b/src/renderer/src/windows/mini/home/HomeWindow.tsx @@ -181,7 +181,6 @@ const HomeWindow: FC = () => { messages: [userMessage], assistant: { ...assistant, model: getDefaultModel() }, onChunkReceived: (chunk: Chunk) => { - console.log('chunk', chunk) if (chunk.type === ChunkType.TEXT_DELTA) { blockContent += chunk.text if (!blockId) { diff --git a/src/renderer/src/windows/mini/index.html b/src/renderer/src/windows/mini/index.html new file mode 100644 index 0000000000..224ae90278 --- /dev/null +++ b/src/renderer/src/windows/mini/index.html @@ -0,0 +1,24 @@ + + + + + + + + Cherry Studio + + + + + +
+ + + + \ No newline at end of file