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

refactor(CodeBlock): simplify header layout and adjust CollapseIcon position

Browse Source
This commit is contained in:
ousugo 2025-04-10 10:57:11 +08:00 committed by 亢奋猫
parent c3b5cbee8f
commit afd1381d7f
1 changed files with 5 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/src/pages/home/Markdown/CodeBlock.tsx
View File

@ -129,12 +129,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
return match ? ( return match ? (
<CodeBlockWrapper className="code-block"> <CodeBlockWrapper className="code-block">
<CodeHeader> <CodeHeader>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> <CodeLanguage>{'<' + language.toUpperCase() + '>'}</CodeLanguage>
{codeCollapsible && shouldShowExpandButton && (
<CollapseIcon expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)} />
)}
<CodeLanguage>{'<' + language.toUpperCase() + '>'}</CodeLanguage>
</div>
</CodeHeader> </CodeHeader>
<StickyWrapper> <StickyWrapper>
<HStack <HStack
@ -144,6 +139,9 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
style={{ bottom: '0.2rem', right: '1rem', height: '27px' }}> style={{ bottom: '0.2rem', right: '1rem', height: '27px' }}>
{showDownloadButton && <DownloadButton language={language} data={children} />} {showDownloadButton && <DownloadButton language={language} data={children} />}
{codeWrappable && <UnwrapButton unwrapped={isUnwrapped} onClick={() => setIsUnwrapped(!isUnwrapped)} />} {codeWrappable && <UnwrapButton unwrapped={isUnwrapped} onClick={() => setIsUnwrapped(!isUnwrapped)} />}
{codeCollapsible && shouldShowExpandButton && (
<CollapseIcon expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)} />
)}
<CopyButton text={children} /> <CopyButton text={children} />
</HStack> </HStack>
</StickyWrapper> </StickyWrapper>
@ -319,14 +317,6 @@ const CodeHeader = styled.div`
padding: 0 10px; padding: 0 10px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
.copy {
cursor: pointer;
color: var(--color-text-3);
transition: color 0.3s;
}
.copy:hover {
color: var(--color-text-1);
}
` `
const CodeLanguage = styled.div` const CodeLanguage = styled.div`
@ -384,13 +374,8 @@ const CollapseIconWrapper = styled.div`
height: 20px; height: 20px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: var(--color-text-3); color: var(--color-text-1);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover {
background-color: var(--color-background-soft);
color: var(--color-text-1);
}
` `
const UnwrapButtonWrapper = styled.div` const UnwrapButtonWrapper = styled.div`