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

fix(CodeViewer): conditional contain content (#8898)

Browse Source 
* fix(CodeViewer): conditional contain content

* perf: add will-change

* refactor: padding right

* refactor: update will-change
This commit is contained in:
one 2025-08-07 11:50:17 +08:00 committed by GitHub
parent 8a0570f383
commit c8dbcf7b6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/renderer/src/components/CodeViewer.tsx
View File

@ -108,6 +108,7 @@ const CodeViewer = ({ children, language, expanded, unwrapped, onHeightChange, c
ref={scrollerRef} ref={scrollerRef}
className="shiki-scroller" className="shiki-scroller"
$wrap={!unwrapped} $wrap={!unwrapped}
$expanded={expanded}
$lineHeight={estimateSize()} $lineHeight={estimateSize()}
style={ style={
{ {
@ -132,7 +133,7 @@ const CodeViewer = ({ children, language, expanded, unwrapped, onHeightChange, c
width: '100%', width: '100%',
transform: `translateY(${virtualItems[0]?.start ?? 0}px)` transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
}}> }}>
{virtualizer.getVirtualItems().map((virtualItem) => ( {virtualItems.map((virtualItem) => (
<div key={virtualItem.key} data-index={virtualItem.index} ref={virtualizer.measureElement}> <div key={virtualItem.key} data-index={virtualItem.index} ref={virtualizer.measureElement}>
<VirtualizedRow <VirtualizedRow
rawLine={rawLines[virtualItem.index]} rawLine={rawLines[virtualItem.index]}
@ -221,20 +222,24 @@ VirtualizedRow.displayName = 'VirtualizedRow'
const ScrollContainer = styled.div<{ const ScrollContainer = styled.div<{
$wrap?: boolean $wrap?: boolean
$expanded?: boolean
$lineHeight?: number $lineHeight?: number
}>` }>`
display: block; display: block;
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
border-radius: inherit; border-radius: inherit;
padding: 0.5em 1em; /* padding right 下沉到 line-content 中 */
padding: 0.5em 0 0.5em 1em;
.line { .line {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
line-height: ${(props) => props.$lineHeight}px; line-height: ${(props) => props.$lineHeight}px;
contain: content; /* contain 优化 wrap 时滚动性能，will-change 优化 unwrap 时滚动性能 */
contain: ${(props) => (props.$wrap ? 'content' : 'none')};
will-change: ${(props) => (!props.$wrap && !props.$expanded ? 'transform' : 'auto')};
.line-number { .line-number {
width: var(--gutter-width, 1.2ch); width: var(--gutter-width, 1.2ch);
@ -250,6 +255,7 @@ const ScrollContainer = styled.div<{
.line-content { .line-content {
flex: 1; flex: 1;
padding-right: 1em;
* { * {
white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')}; white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')};
overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')}; overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')};