diff --git a/.ua/index.json b/.ua/index.json index f4e6408..2167367 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T15:06:03.807Z", + "generatedAt": "2026-10-26T15:08:10.710Z", "repoRoot": ".", "packages": [ { @@ -4284,6 +4284,11 @@ "t": "boolean", "d": "是否显示行号列;缺省 true(单行代码自动省略)" }, + { + "n": "wrap", + "t": "boolean", + "d": "长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐)" + }, { "n": "maxHeight", "t": "number", @@ -4311,7 +4316,8 @@ "头部标题用 title(文件名)或 lang(语言名),两者都给时 title 优先", "长代码给 maxHeight,超出在框内滚动;滚动条已是统一细条,暗色下不会露原生亮条", "单行代码自动省掉行号列;想彻底不要行号传 lineNumbers: false", - "不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉" + "不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉", + "窄屏或长日志要折行就传 wrap: true:长行按容器宽度换行,行号仍只占首行左侧;对齐要求高的代码别开,折行会让缩进失去参照" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index c254a39..2208e2d 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -1784,6 +1784,7 @@ const content = h( title: 'sum.ts', lang: 'ts', maxHeight: 200, + wrap: true, // 窄屏下长行折行,不横向滚 code: [ 'export function sum(a: number, b: number): number {', ' if (typeof a !== \'number\') throw new TypeError(\'a 必须是数字\');', diff --git a/llms-full.txt b/llms-full.txt index 894cdf8..5c34ab8 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T15:06:03.807Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T15:08:10.710Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -2270,6 +2270,7 @@ diffView({ before: oldText, after: newText }) - lang:string —— 语言名(如 ts / css);无 title 时作头部标题 - title:string —— 头部标题(如文件名);优先于 lang - lineNumbers:boolean —— 是否显示行号列;缺省 true(单行代码自动省略) +- wrap:boolean —— 长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐) - maxHeight:number —— 代码区最高高度(px),超出在框内滚动;缺省不限高 - copyable:boolean —— 右上角是否出现复制按钮;缺省 true - onCopy:(text: string) => void —— 复制成功回调(参数为实际写入剪贴板的内容) @@ -2288,6 +2289,7 @@ codeBlock({ code: source, title: 'main.ts', lang: 'ts', maxHeight: 320 }) 3. 长代码给 maxHeight,超出在框内滚动;滚动条已是统一细条,暗色下不会露原生亮条 4. 单行代码自动省掉行号列;想彻底不要行号传 lineNumbers: false 5. 不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉 +6. 窄屏或长日志要折行就传 wrap: true:长行按容器宽度换行,行号仍只占首行左侧;对齐要求高的代码别开,折行会让缩进失去参照 现场演示:apps/docs/demo.html#sec-code diff --git a/packages/skin/ui/src/codeBlock.ts b/packages/skin/ui/src/codeBlock.ts index 291df39..3305d92 100644 --- a/packages/skin/ui/src/codeBlock.ts +++ b/packages/skin/ui/src/codeBlock.ts @@ -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 只改折行,行号与缩进不动 } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 9631852..859d7cc 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -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; // 复制成功回调(参数为实际写入剪贴板的内容) diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 0f743b7..65374a9 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -4155,6 +4155,11 @@ "t": "boolean", "d": "是否显示行号列;缺省 true(单行代码自动省略)" }, + { + "n": "wrap", + "t": "boolean", + "d": "长行是否折行(窄屏 / 长日志场景);缺省 false(横向滚动,行号保持对齐)" + }, { "n": "maxHeight", "t": "number", @@ -4182,7 +4187,8 @@ "头部标题用 title(文件名)或 lang(语言名),两者都给时 title 优先", "长代码给 maxHeight,超出在框内滚动;滚动条已是统一细条,暗色下不会露原生亮条", "单行代码自动省掉行号列;想彻底不要行号传 lineNumbers: false", - "不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉" + "不需要复制按钮(例如代码本身是操作步骤)传 copyable: false;连标题都没有时头部整条省掉", + "窄屏或长日志要折行就传 wrap: true:长行按容器宽度换行,行号仍只占首行左侧;对齐要求高的代码别开,折行会让缩进失去参照" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 80fda8c..aac3b63 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -5865,3 +5865,9 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } margin-left: auto; color: var(--ua-color-text-faint); } + +/* 折行模式:长行按容器宽度换行,行号仍只占首行左侧——适合窄屏读日志,不适合对齐要求高的代码 */ +.ua-code.is-wrap .ua-code-line { + white-space: pre-wrap; + word-break: break-word; +}