whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: refactored capturescrollablediv function and updated chat and messages components

Browse Source
This commit is contained in:
kangfenmao 2024-11-06 15:56:48 +08:00
parent f2def559d4
commit ceca3408ff
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/src/pages/home/Chat.tsx
View File

@ -52,8 +52,12 @@ const Container = styled.div`
height: 100%;
flex: 1;
justify-content: space-between;
background-color: var(--color-background);
&.bubble {
background-color: var(--chat-background);
#messages {
background-color: var(--chat-background);
}
.system-prompt {
background-color: var(--chat-background-assistant);
}

1
src/renderer/src/pages/home/Messages/Messages.tsx
View File

@ -219,6 +219,7 @@ const Container = styled(Scrollbar)`
padding: 10px 0;
padding-bottom: 20px;
overflow-x: hidden;
background-color: var(--color-background);
`
export default Messages

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

@ -264,7 +264,7 @@ export const captureScrollableDiv = async (divRef: React.RefObject<HTMLDivElemen
try {
const div = divRef.current
// 保存原始样式
// Save original styles
const originalStyle = {
height: div.style.height,
maxHeight: div.style.maxHeight,
@ -274,19 +274,38 @@ export const captureScrollableDiv = async (divRef: React.RefObject<HTMLDivElemen
const originalScrollTop = div.scrollTop
// 修改样式以显示全部内容
// Modify styles to show full content
div.style.height = 'auto'
div.style.maxHeight = 'none'
div.style.overflow = 'visible'
div.style.position = 'static'
// 捕获整个内容
// Configure html2canvas options
const canvas = await html2canvas(div, {
scrollY: -window.scrollY,
windowHeight: document.documentElement.scrollHeight
windowHeight: document.documentElement.scrollHeight,
useCORS: true, // Allow cross-origin images
allowTaint: true, // Allow cross-origin images
logging: false, // Disable logging
imageTimeout: 0, // Disable image timeout
onclone: (clonedDoc) => {
// Ensure all images in cloned document are loaded
const images = clonedDoc.getElementsByTagName('img')
return Promise.all(
Array.from(images).map((img) => {
if (img.complete) {
return Promise.resolve()
}
return new Promise((resolve) => {
img.onload = resolve
img.onerror = resolve
})
})
)
}
})
// 恢复原始样式
// Restore original styles
div.style.height = originalStyle.height
div.style.maxHeight = originalStyle.maxHeight
div.style.overflow = originalStyle.overflow
@ -294,7 +313,7 @@ export const captureScrollableDiv = async (divRef: React.RefObject<HTMLDivElemen
const imageData = canvas.toDataURL('image/png')
// 恢复原始滚动位置
// Restore original scroll position
setTimeout(() => {
div.scrollTop = originalScrollTop
}, 0)