Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-23 18:10:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: Seperate MiniWindow loading from MainWindow (#5581)

Browse Source
This commit is contained in:
fullex 2025-05-01 21:29:41 +08:00 committed by GitHub
parent 49c9e14790
commit 7c0086a484
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/services/WindowService.ts
View File

@ -489,11 +489,9 @@ export class WindowService {
}) })
if (is.dev && process.env['ELECTRON_RENDERER_URL']) { 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 { } else {
this.miniWindow.loadFile(join(__dirname, '../renderer/index.html'), { this.miniWindow.loadFile(join(__dirname, '../renderer/src/windows/mini/index.html'))
hash: '#/mini'
})
} }
return this.miniWindow return this.miniWindow

15
src/renderer/index.html
View File

@ -1,10 +1,10 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" /> <meta name="viewport" content="initial-scale=1, width=device-width" />
<meta <meta http-equiv="Content-Security-Policy"
http-equiv="Content-Security-Policy"
content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" /> content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
<title>Cherry Studio</title> <title>Cherry Studio</title>
@ -29,14 +29,15 @@
border-radius: 50px; border-radius: 50px;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="spinner"> <div id="spinner">
<img src="/src/assets/images/logo.png" /> <img src="/src/assets/images/logo.png" />
</div> </div>
<script type="module" src="/src/init.ts"></script> <script type="module" src="/src/init.ts"></script>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/entryPoint.tsx"></script>
</body> </body>
</html> </html>

9
src/renderer/src/entryPoint.tsx Normal file
View File

@ -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(<App />)

2
src/renderer/src/init.ts
View File

@ -6,7 +6,7 @@ import store from './store'
function initSpinner() { function initSpinner() {
const spinner = document.getElementById('spinner') const spinner = document.getElementById('spinner')
if (spinner && window.location.hash !== '#/mini') { if (spinner) {
spinner.style.display = 'flex' spinner.style.display = 'flex'
} }
} }

16
src/renderer/src/main.tsx
View File

@ -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(<MiniApp />)
} else {
const root = createRoot(document.getElementById('root') as HTMLElement)
root.render(<App />)
}

4
src/renderer/src/utils/index.ts
View File

@ -155,10 +155,6 @@ export const compareVersions = (v1: string, v2: string): number => {
return 0 return 0
} }
export function isMiniWindow() {
return window.location.hash === '#/mini'
}
/** /**
* 显示确认模态框。 * 显示确认模态框。
* @param params 模态框参数 * @param params 模态框参数

24
src/renderer/src/windows/mini/App.tsx → src/renderer/src/windows/mini/MiniWindowApp.tsx
View File

@ -57,6 +57,18 @@ function useMiniWindowCustomCss() {
return 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 <></>
}
return <HomeWindow />
}
function MiniWindow(): React.ReactElement { function MiniWindow(): React.ReactElement {
//miniWindow should register its own message component //miniWindow should register its own message component
const [messageApi, messageContextHolder] = message.useMessage() 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 <HomeWindow />
}
export default MiniWindow export default MiniWindow

3
src/renderer/src/windows/mini/chat/components/Message.tsx
View File

@ -5,7 +5,6 @@ import MessageContent from '@renderer/pages/home/Messages/MessageContent'
import MessageErrorBoundary from '@renderer/pages/home/Messages/MessageErrorBoundary' import MessageErrorBoundary from '@renderer/pages/home/Messages/MessageErrorBoundary'
// import { LegacyMessage } from '@renderer/types' // import { LegacyMessage } from '@renderer/types'
import type { Message } from '@renderer/types/newMessage' import type { Message } from '@renderer/types/newMessage'
import { isMiniWindow } from '@renderer/utils'
import { FC, memo, useMemo, useRef } from 'react' import { FC, memo, useMemo, useRef } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
@ -35,7 +34,7 @@ const MessageItem: FC<Props> = ({ message, index, total, route }) => {
const messageBackground = getMessageBackground(true, isAssistantMessage) const messageBackground = getMessageBackground(true, isAssistantMessage)
const maxWidth = isMiniWindow() ? '800px' : '100%' const maxWidth = '800px'
if (['summary', 'explanation'].includes(route) && index === total - 1) { if (['summary', 'explanation'].includes(route) && index === total - 1) {
return null return null

22
src/renderer/src/windows/mini/entryPoint.tsx Normal file
View File

@ -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(<MiniWindowApp />)

1
src/renderer/src/windows/mini/home/HomeWindow.tsx
View File

@ -181,7 +181,6 @@ const HomeWindow: FC = () => {
messages: [userMessage], messages: [userMessage],
assistant: { ...assistant, model: getDefaultModel() }, assistant: { ...assistant, model: getDefaultModel() },
onChunkReceived: (chunk: Chunk) => { onChunkReceived: (chunk: Chunk) => {
console.log('chunk', chunk)
if (chunk.type === ChunkType.TEXT_DELTA) { if (chunk.type === ChunkType.TEXT_DELTA) {
blockContent += chunk.text blockContent += chunk.text
if (!blockId) { if (!blockId) {

24
src/renderer/src/windows/mini/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; frame-src * file:" />
<title>Cherry Studio</title>
<style>
html,
body {
margin: 0;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="./entryPoint.tsx"></script>
</body>
</html>