sdaduanbilei/cc-haha
1
0
Fork 0
mirror of https://github.com/NanmiCoder/cc-haha synced 2026-07-19 13:33:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: compact code block rendering — tighter line height, softer borders

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-04-06 21:30:34 +08:00
parent 993b96cd39
commit cc9fe832c2
1 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
desktop/src/components/chat/CodeViewer.tsx
View File

@ -38,11 +38,10 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
const lineCountLabel = `${lines.length} ${lines.length === 1 ? 'line' : 'lines'}` const lineCountLabel = `${lines.length} ${lines.length === 1 ? 'line' : 'lines'}`
const showExpandToggle = lines.length > maxLines const showExpandToggle = lines.length > maxLines
const displayLines = visibleLines.length
return ( return (
<div className="overflow-hidden rounded-2xl border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]"> <div className="overflow-hidden rounded-lg border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]">
<div className="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-2 text-[11px] text-[#57606a]"> <div className="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-1.5 text-[11px] text-[#57606a]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="font-semibold uppercase tracking-[0.14em] text-[#57606a]">{languageLabel}</span> <span className="font-semibold uppercase tracking-[0.14em] text-[#57606a]">{languageLabel}</span>
<span>{lineCountLabel}</span> <span>{lineCountLabel}</span>
@ -54,23 +53,21 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
</div> </div>
<div className="max-h-[420px] overflow-auto"> <div className="max-h-[420px] overflow-auto">
<div className="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.45]"> <div className="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.3]">
{visibleLines.map((line, index) => ( {visibleLines.map((line, index) => (
<div <div
key={`${startLine + index}-${line}`} key={`${startLine + index}-${line}`}
className={`grid grid-cols-[3rem,minmax(0,1fr)] gap-0 last:border-b-0 ${ className="grid grid-cols-[3rem,minmax(0,1fr)] gap-0 hover:bg-[#f6f8fa]/50"
index === displayLines - 1 ? '' : 'border-b border-[#d8dee4]'
}`}
> >
{showLineNumbers ? ( {showLineNumbers ? (
<span className="select-none border-r border-[#d8dee4] bg-[#f6f8fa] px-3 py-1 text-right text-[11px] text-[#57606a]"> <span className="select-none border-r border-[#eaeef2] bg-[#fafbfc] px-2 py-px text-right text-[11px] text-[#8b949e]">
{startLine + index} {startLine + index}
</span> </span>
) : ( ) : (
<span className="w-0" /> <span className="w-0" />
)} )}
<span <span
className="overflow-hidden bg-white px-4 py-1 whitespace-pre-wrap break-words text-[#24292f]" className="overflow-hidden bg-white px-4 py-px whitespace-pre-wrap break-words text-[#24292f]"
dangerouslySetInnerHTML={{ __html: highlightedLines[index] ?? escapeHtml(line) }} dangerouslySetInnerHTML={{ __html: highlightedLines[index] ?? escapeHtml(line) }}
/> />
</div> </div>
@ -81,7 +78,7 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
{showExpandToggle && ( {showExpandToggle && (
<button <button
onClick={() => setExpanded((value) => !value)} onClick={() => setExpanded((value) => !value)}
className="w-full border-t border-white/8 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#999] transition-colors hover:text-white" className="w-full border-t border-[#d0d7de] bg-[#f6f8fa] py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#57606a] transition-colors hover:bg-[#eaeef2] hover:text-[#24292f]"
> >
{expanded ? 'Collapse' : `Show ${lines.length - maxLines} more lines`} {expanded ? 'Collapse' : `Show ${lines.length - maxLines} more lines`}
</button> </button>