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

feat(CodeBlock): add tooltips for collapse and copy buttons

Browse Source
This commit is contained in:
ousugo 2025-04-10 20:54:01 +08:00 committed by 亢奋猫
parent 78a4696327
commit e0a47de8f7
1 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,10 +184,23 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
} }
const CollapseIcon: React.FC<{ expanded: boolean; onClick: () => void }> = ({ expanded, onClick }) => { const CollapseIcon: React.FC<{ expanded: boolean; onClick: () => void }> = ({ expanded, onClick }) => {
const { t } = useTranslation()
const [tooltipVisible, setTooltipVisible] = useState(false)
const handleClick = () => {
setTooltipVisible(false)
onClick()
}
return ( return (
<CollapseIconWrapper onClick={onClick}> <Tooltip
{expanded ? <DownOutlined style={{ fontSize: 12 }} /> : <RightOutlined style={{ fontSize: 12 }} />} title={expanded ? t('code_block.collapse') : t('code_block.expand')}
</CollapseIconWrapper> open={tooltipVisible}
onOpenChange={setTooltipVisible}>
<CollapseIconWrapper onClick={handleClick}>
{expanded ? <DownOutlined style={{ fontSize: 12 }} /> : <RightOutlined style={{ fontSize: 12 }} />}
</CollapseIconWrapper>
</Tooltip>
) )
} }
@ -225,6 +238,7 @@ const UnwrapButton: React.FC<{ unwrapped: boolean; onClick: () => void }> = ({ u
const CopyButton: React.FC<{ text: string; style?: React.CSSProperties }> = ({ text, style }) => { const CopyButton: React.FC<{ text: string; style?: React.CSSProperties }> = ({ text, style }) => {
const [copied, setCopied] = useState(false) const [copied, setCopied] = useState(false)
const { t } = useTranslation() const { t } = useTranslation()
const copy = t('common.copy')
const onCopy = () => { const onCopy = () => {
if (!text) return if (!text) return
@ -234,10 +248,12 @@ const CopyButton: React.FC<{ text: string; style?: React.CSSProperties }> = ({ t
setTimeout(() => setCopied(false), 2000) setTimeout(() => setCopied(false), 2000)
} }
return copied ? ( return (
<CheckOutlined style={{ color: 'var(--color-primary)', ...style }} /> <Tooltip title={copy}>
) : ( <CopyButtonWrapper onClick={onCopy} style={style}>
<CopyIcon className="copy" style={style} onClick={onCopy} /> {copied ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <CopyIcon className="copy" />}
</CopyButtonWrapper>
</Tooltip>
) )
} }
@ -338,7 +354,19 @@ const CodeFooter = styled.div`
color: var(--color-text-1); color: var(--color-text-1);
} }
` `
const CopyButtonWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-3);
transition: color 0.3s;
font-size: 16px;
&:hover {
color: var(--color-text-1);
}
`
const ExpandButtonWrapper = styled.div` const ExpandButtonWrapper = styled.div`
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -374,8 +402,12 @@ const CollapseIconWrapper = styled.div`
height: 20px; height: 20px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: var(--color-text-1); color: var(--color-text-3);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover {
color: var(--color-text-1);
}
` `
const UnwrapButtonWrapper = styled.div` const UnwrapButtonWrapper = styled.div`