iter(g279): diffView 增加忽略行内空白模式

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T15:03:08.889Z",
+  "generatedAt": "2026-10-26T15:05:05.398Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -4236,6 +4236,11 @@
                 "n": "ariaLabel",
                 "t": "string",
                 "d": "可访问名；缺省自动播报「新增 N 行，删除 M 行」"
+              },
+              {
+                "n": "ignoreWhitespace",
+                "t": "boolean",
+                "d": "比较时忽略行内空白差异（格式化提交不再淹没真实改动）；缺省 false"
               }
             ],
             "example": "diffView({ before: oldText, after: newText })",
@@ -4244,7 +4249,8 @@
               "行级对齐先剪公共前后缀、再对中间段做 LCS：改两行不会把整篇标成差异",
               "增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制",
               "顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听",
-              "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对"
+              "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对",
+              "格式化提交制造的大量「只差缩进 / 行尾空格」噪音，打开 ignoreWhitespace 后再看：显示仍是原文缩进，只是比对时把行内空白归一"
             ]
           },
           {

apps/demo/main.ts

@@ -1770,6 +1770,11 @@ const content = h(
         "sum(1, '2');",
       ].join('\n'),
     }),
+    diffView({
+      before: 'if (a) {\n    return 1;\n}',
+      after: 'if (a) {\n  return 1;\n}',
+      ignoreWhitespace: true, // 只差缩进：开启后不再报差异，但显示仍保留原文缩进
+    }),
   ),
   section(
     'sec-code',

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T15:03:08.889Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T15:05:05.398Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -2241,6 +2241,7 @@ jsonViewer({ value: payload, depth: 2, rootLabel: 'response', maxHeight: 320 })
 - after：string —— 新文本
 - showStats：boolean —— 是否在顶部显示 +N / −N 统计条；缺省 true
 - ariaLabel：string —— 可访问名；缺省自动播报「新增 N 行，删除 M 行」
+- ignoreWhitespace：boolean —— 比较时忽略行内空白差异（格式化提交不再淹没真实改动）；缺省 false
 
 示例：
 
@@ -2255,6 +2256,7 @@ diffView({ before: oldText, after: newText })
 3. 增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制
 4. 顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听
 5. 超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对
+6. 格式化提交制造的大量「只差缩进 / 行尾空格」噪音，打开 ignoreWhitespace 后再看：显示仍是原文缩进，只是比对时把行内空白归一
 
 现场演示：apps/docs/demo.html#sec-diff
 

packages/skin/ui/src/diffView.ts

@@ -3,59 +3,67 @@ import type { DiffViewProps } from './types.js';
 
 // 一条差异：same 原样、add 只在右边、del 只在左边
 type DiffOp = { type: 'same' | 'add' | 'del'; text: string };
+// 比较用的一行：text 是显示原文，key 是比对键（忽略空白模式下把行内空白压成一个空格再 trim）
+type Row = { text: string; key: string };
 // LCS 计算上限：中间段行数乘积超过这个值就退化为「整段替换」，避免大文件把主线程卡住
 const DP_LIMIT = 400_000;
 
+/*** 比对键归一：行内连续空白压成一个空格并去掉首尾空白；显示仍用原文，缩进不丢 ***/
+function normalize(line: string): string {
+  return line.replace(/\s+/g, ' ').trim();
+}
+
 /*** 切行：末尾换行不产生一行空内容（否则每个文件都会多出一条假的空行差异） ***/
-function toLines(text: string): string[] {
+function toRows(text: string, ignore: boolean): Row[] {
   const lines = text.split(/\r?\n/);
   if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop(); // 尾部换行忽略
-  return lines;
+  return lines.map((line) => ({ text: line, key: ignore ? normalize(line) : line }));
 }
 
 /*** 中间段做 LCS 对齐：先剪掉公共前后缀，剩下的才真算，日常改动只占几行 ***/
-function alignMiddle(a: string[], b: string[]): DiffOp[] {
+function alignMiddle(a: Row[], b: Row[]): DiffOp[] {
-  if (!a.length || !b.length) return [...a.map((text) => ({ type: 'del' as const, text })), ...b.map((text) => ({ type: 'add' as const, text }))];
+  if (!a.length || !b.length) return [...a.map((r) => ({ type: 'del' as const, text: r.text })), ...b.map((r) => ({ type: 'add' as const, text: r.text }))];
-  if (a.length * b.length > DP_LIMIT) return [...a.map((text) => ({ type: 'del' as const, text })), ...b.map((text) => ({ type: 'add' as const, text }))]; // 超限：整段替换，语义仍正确
+  if (a.length * b.length > DP_LIMIT) return [...a.map((r) => ({ type: 'del' as const, text: r.text })), ...b.map((r) => ({ type: 'add' as const, text: r.text }))]; // 超限：整段替换，语义仍正确
   const dp: number[][] = Array.from({ length: a.length + 1 }, () => new Array<number>(b.length + 1).fill(0)); // dp[i][j]：a 前 i 行与 b 前 j 行的 LCS 长度
   for (let i = a.length - 1; i >= 0; i -= 1) {
     for (let j = b.length - 1; j >= 0; j -= 1) {
-      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      dp[i][j] = a[i].key === b[j].key ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
     }
   }
   const ops: DiffOp[] = [];
   let i = 0;
   let j = 0;
   while (i < a.length && j < b.length) {
-    if (a[i] === b[j]) { ops.push({ type: 'same', text: a[i] }); i += 1; j += 1; continue; }
+    if (a[i].key === b[j].key) { ops.push({ type: 'same', text: a[i].text }); i += 1; j += 1; continue; }
-    if (dp[i + 1][j] >= dp[i][j + 1]) { ops.push({ type: 'del', text: a[i] }); i += 1; continue; }
+    if (dp[i + 1][j] >= dp[i][j + 1]) { ops.push({ type: 'del', text: a[i].text }); i += 1; continue; }
-    ops.push({ type: 'add', text: b[j] }); j += 1;
+    ops.push({ type: 'add', text: b[j].text }); j += 1;
   }
-  for (; i < a.length; i += 1) ops.push({ type: 'del', text: a[i] });
+  for (; i < a.length; i += 1) ops.push({ type: 'del', text: a[i].text });
-  for (; j < b.length; j += 1) ops.push({ type: 'add', text: b[j] });
+  for (; j < b.length; j += 1) ops.push({ type: 'add', text: b[j].text });
   return ops;
 }
 
 /*** 逐行差异：剪公共前后缀后对齐中间段，输出完整 same / add / del 序列 ***/
-function diffLines(before: string, after: string): DiffOp[] {
+function diffLines(before: string, after: string, ignore: boolean): DiffOp[] {
-  const a = toLines(before);
+  const a = toRows(before, ignore);
-  const b = toLines(after);
+  const b = toRows(after, ignore);
   let head = 0;
-  while (head < a.length && head < b.length && a[head] === b[head]) head += 1; // 公共前缀
+  while (head < a.length && head < b.length && a[head].key === b[head].key) head += 1; // 公共前缀
   let tail = 0;
-  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail += 1; // 公共后缀
+  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail].key === b[b.length - 1 - tail].key) tail += 1; // 公共后缀
   const midA = a.slice(head, a.length - tail);
   const midB = b.slice(head, b.length - tail);
   return [
-    ...a.slice(0, head).map((text) => ({ type: 'same' as const, text })),
+    ...a.slice(0, head).map((r) => ({ type: 'same' as const, text: r.text })),
     ...alignMiddle(midA, midB),
-    ...a.slice(a.length - tail).map((text) => ({ type: 'same' as const, text })),
+    ...a.slice(a.length - tail).map((r) => ({ type: 'same' as const, text: r.text })),
   ];
 }
 
 /*** 文本差异对比：行级对齐 + 增删着色 + 双行号列，超限时退化为整段替换（只影响精度不影响语义） ***/
 export function diffView(props: DiffViewProps): HTMLElement {
-  const ops = diffLines(props.before, props.after);
+  const ignore = props.ignoreWhitespace === true; // 只在显式开启时归一行内空白
+  const ops = diffLines(props.before, props.after, ignore);
   const added = ops.filter((o) => o.type === 'add').length; // 新增行数：统计条与读屏共用
   const removed = ops.filter((o) => o.type === 'del').length; // 删除行数
   let oldNo = 0;
@@ -75,7 +83,13 @@ export function diffView(props: DiffViewProps): HTMLElement {
   });
   const stats = props.showStats === false
     ? null
-    : h('div', { class: 'ua-diff-stats' }, h('span', { class: 'ua-diff-add' }, `+${added}`), h('span', { class: 'ua-diff-del' }, `−${removed}`));
+    : h(
+      'div',
+      { class: 'ua-diff-stats' },
+      h('span', { class: 'ua-diff-add' }, `+${added}`),
+      h('span', { class: 'ua-diff-del' }, `−${removed}`),
+      ignore ? h('span', { class: 'ua-diff-note' }, '已忽略行内空白差异') : null, // 归一口径必须写在脸上，否则「为什么不报这几行」说不清
+    );
   return h(
     'div',
     { class: 'ua-diff', role: 'group', 'aria-label': props.ariaLabel ?? `文本差异：新增 ${added} 行，删除 ${removed} 行` },

packages/skin/ui/src/types.ts

@@ -1036,6 +1036,7 @@ export interface DiffViewProps {
   before: string;                  // 旧文本（按行比对，CRLF 与 LF 等价）
   after: string;                   // 新文本
   showStats?: boolean;             // 是否在顶部显示 +N / −N 统计条；缺省 true
+  ignoreWhitespace?: boolean;      // 比较时忽略行内空白差异（格式化提交不再淹没真实改动）；缺省 false
   ariaLabel?: string;              // 可访问名；缺省自动播报「新增 N 行，删除 M 行」
 }
 

packages/skin/ui/ua.manifest.json

@@ -4107,6 +4107,11 @@
             "n": "ariaLabel",
             "t": "string",
             "d": "可访问名；缺省自动播报「新增 N 行，删除 M 行」"
+          },
+          {
+            "n": "ignoreWhitespace",
+            "t": "boolean",
+            "d": "比较时忽略行内空白差异（格式化提交不再淹没真实改动）；缺省 false"
           }
         ],
         "example": "diffView({ before: oldText, after: newText })",
@@ -4115,7 +4120,8 @@
           "行级对齐先剪公共前后缀、再对中间段做 LCS：改两行不会把整篇标成差异",
           "增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制",
           "顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听",
-          "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对"
+          "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对",
+          "格式化提交制造的大量「只差缩进 / 行尾空格」噪音，打开 ignoreWhitespace 后再看：显示仍是原文缩进，只是比对时把行内空白归一"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -5859,3 +5859,9 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   color: var(--ua-color-text-faint);
   font-size: var(--ua-font-size-xs);
 }
+
+/* 归一口径提示：忽略空白时必须在统计条里写明，否则「为什么不报这几行」说不清 */
+.ua-diff-note {
+  margin-left: auto;
+  color: var(--ua-color-text-faint);
+}