iter(g282): 代码块支持长行折行

This commit is contained in:
HIsheR
2026-10-26 23:08:29 +08:00
parent cdf68b457e
commit c98f98e3f4
7 changed files with 27 additions and 5 deletions
+1 -1
View File
@@ -26,5 +26,5 @@ export function codeBlock(props: CodeBlockProps): HTMLElement {
title ? h('span', { class: 'ua-code-title' }, title) : h('span', null, ''),
props.copyable === false ? null : copyButton({ text: props.code, label: '复制', size: 'sm', variant: 'ghost', onCopied: props.onCopy }),
);
return h('div', { class: 'ua-code', role: 'group', 'aria-label': props.ariaLabel ?? '代码块' }, head, body);
return h('div', { class: `ua-code${props.wrap ? ' is-wrap' : ''}`, role: 'group', 'aria-label': props.ariaLabel ?? '代码块' }, head, body); // is-wrap 只改折行,行号与缩进不动
}
+1
View File
@@ -1047,6 +1047,7 @@ export interface CodeBlockProps {
lang?: string; // 语言名(如 ts / css);无 title 时作头部标题
title?: string; // 头部标题(如文件名);优先于 lang
lineNumbers?: boolean; // 是否显示行号列;缺省 true(单行代码自动省略)
wrap?: boolean; // 长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐)
maxHeight?: number; // 代码区最高高度(px),超出在框内滚动;缺省不限高
copyable?: boolean; // 右上角是否出现复制按钮;缺省 true
onCopy?: (text: string) => void; // 复制成功回调(参数为实际写入剪贴板的内容)