iter(g270): 新增代码块组件

This commit is contained in:
HIsheR
2026-10-26 22:54:55 +08:00
parent 02d7eb3c4d
commit b8f90b8e0d
12 changed files with 272 additions and 11 deletions
+57 -1
View File
@@ -93,7 +93,8 @@
"inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输",
"layout(props, ...children):布局骨架,页头 / 侧栏 / 内容 / 页脚四区一次成型,侧栏可折叠(collapsed 信号双向绑定)",
"jsonViewer(props):JSON 树查看,按层折叠、分支带计数摘要、叶子按类型着色,只读不编辑",
"diffView(props):文本差异对比,行级 LCS 对齐 + 增删着色 + 双行号列,顶部带 +N / −N 统计"
"diffView(props):文本差异对比,行级 LCS 对齐 + 增删着色 + 双行号列,顶部带 +N / −N 统计",
"codeBlock(props):代码块,等宽多行 + 行号列 + 标题行 + 一键复制原文,只展示不高亮"
],
"keyTypes": [
"ButtonProps",
@@ -4111,6 +4112,61 @@
"顶部统计条给 +N / −N,读屏在容器上直接播报同一组数字,不必逐行听",
"超大文本(中间段行数乘积超过 40 万)会退化成「整段替换」——语义仍对,只是不再逐行对齐;要逐行对齐就先分段比对"
]
},
{
"id": "codeBlock",
"title": "代码块 CodeBlock",
"demo": "sec-code",
"props": [
{
"n": "code",
"t": "string",
"d": "代码原文:显示与复制都用它(不读 DOM,避免行号混进剪贴板)"
},
{
"n": "lang",
"t": "string",
"d": "语言名(如 ts / css);无 title 时作头部标题"
},
{
"n": "title",
"t": "string",
"d": "头部标题(如文件名);优先于 lang"
},
{
"n": "lineNumbers",
"t": "boolean",
"d": "是否显示行号列;缺省 true(单行代码自动省略)"
},
{
"n": "maxHeight",
"t": "number",
"d": "代码区最高高度(px),超出在框内滚动;缺省不限高"
},
{
"n": "copyable",
"t": "boolean",
"d": "右上角是否出现复制按钮;缺省 true"
},
{
"n": "onCopy",
"t": "(text: string) => void",
"d": "复制成功回调(参数为实际写入剪贴板的内容)"
},
{
"n": "ariaLabel",
"t": "string",
"d": "可访问名;缺省「代码块」"
}
],
"example": "codeBlock({ code: source, title: 'main.ts', lang: 'ts', maxHeight: 320 })",
"steps": [
"把代码原文交给 code:显示与复制都读这一份,不要从 DOM 里取文本(行号会污染剪贴板)",
"头部标题用 title(文件名)或 lang(语言名),两者都给时 title 优先",
"长代码给 maxHeight,超出在框内滚动;滚动条已是统一细条,暗色下不会露原生亮条",
"单行代码自动省掉行号列;想彻底不要行号传 lineNumbers: false",
"不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉"
]
}
]
}