Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 14:29:15 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: CodePreview fade in on the first highlighting (#6228)

Browse Source 
* refactor(CodePreview): fade in on the first highlighting

* refactor: improve code placeholder style
This commit is contained in:
one 2025-05-22 00:05:30 +08:00 committed by GitHub
parent a947e6a743
commit 736d0d1060
1 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/renderer/src/components/CodeBlockView/CodePreview.tsx
View File

@ -162,6 +162,10 @@ const CodePreview = ({ children, language }: CodePreviewProps) => {
} }
}, [highlightCode]) }, [highlightCode])
const hasHighlightedCode = useMemo(() => {
return tokenLines.length > 0
}, [tokenLines.length])
return ( return (
<ContentContainer <ContentContainer
ref={codeContentRef} ref={codeContentRef}
@ -171,10 +175,12 @@ const CodePreview = ({ children, language }: CodePreviewProps) => {
fontSize: fontSize - 1, fontSize: fontSize - 1,
maxHeight: codeCollapsible && !isExpanded ? '350px' : 'none' maxHeight: codeCollapsible && !isExpanded ? '350px' : 'none'
}}> }}>
{tokenLines.length > 0 ? ( {hasHighlightedCode ? (
<ShikiTokensRenderer language={language} tokenLines={tokenLines} /> <div className="fade-in-effect">
<ShikiTokensRenderer language={language} tokenLines={tokenLines} />
</div>
) : ( ) : (
<div style={{ opacity: 0.1 }}>{children}</div> <CodePlaceholder>{children}</CodePlaceholder>
)} )}
</ContentContainer> </ContentContainer>
) )
@ -231,7 +237,6 @@ const ContentContainer = styled.div<{
border: 0.5px solid transparent; border: 0.5px solid transparent;
border-radius: 5px; border-radius: 5px;
margin-top: 0; margin-top: 0;
transition: opacity 0.3s ease;
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
@ -277,6 +282,29 @@ const ContentContainer = styled.div<{
opacity: 0.35; opacity: 0.35;
} }
`} `}
@keyframes contentFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-effect {
animation: contentFadeIn 0.3s ease-in-out forwards;
}
`
const CodePlaceholder = styled.div`
opacity: 0.1;
flex-direction: column;
white-space: pre-wrap;
word-break: break-all;
overflow-x: hidden;
display: block;
min-height: 1.3rem;
` `
CodePreview.displayName = 'CodePreview' CodePreview.displayName = 'CodePreview'