iter(g269): 新增文本差异对比组件

packages/skin/ui/ui.css

@@ -4994,7 +4994,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-cmdk-list,
 .ua-timepicker-col,
 .ua-layout-content,
-.ua-json {
+.ua-json,
+.ua-diff {
   scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */
   scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */
 }
@@ -5555,3 +5556,76 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
     color: GrayText;
   }
 }
+
+/* ---- 文本差异对比：增删只靠底色 + 符号双通道，色盲用户也能分辨（符号列 aria-hidden，读屏靠底色语义类） ---- */
+.ua-diff {
+  overflow: auto;
+  border: 1px solid var(--ua-border-subtle);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-surface);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 等宽：差异对齐才看得出来 */
+  font-size: var(--ua-font-size-sm);
+  line-height: var(--ua-leading-normal);
+}
+
+.ua-diff-stats {
+  display: flex;
+  gap: var(--ua-space-3);
+  padding: var(--ua-space-2) var(--ua-space-3);
+  border-bottom: 1px solid var(--ua-border-subtle);
+  background: var(--ua-color-surface-inset);
+  font-size: var(--ua-font-size-xs);
+}
+
+/* 统计条两个数字与行底色同源：+ 走成功色、− 走危险色，不另造一套色 */
+.ua-diff-add {
+  color: var(--ua-color-success);
+}
+
+.ua-diff-del {
+  color: var(--ua-color-danger);
+}
+
+.ua-diff-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ua-space-2);
+  padding: 0 var(--ua-space-3);
+  white-space: pre; /* 缩进与空格是差异的一部分，不能被折行压平 */
+}
+
+.ua-diff-no {
+  flex: 0 0 auto;
+  min-width: var(--ua-space-6);
+  color: var(--ua-color-text-faint);
+  font-size: var(--ua-font-size-xs);
+  text-align: right;
+  user-select: none; /* 行号不进复制内容：复制差异时只带走代码 */
+}
+
+.ua-diff-sign {
+  flex: 0 0 auto;
+  width: var(--ua-space-3);
+  color: var(--ua-color-text-faint);
+  text-align: center;
+}
+
+.ua-diff-text {
+  flex: 1 1 auto;
+}
+
+.ua-diff-row.is-add {
+  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-tint), transparent);
+}
+
+.ua-diff-row.is-add .ua-diff-sign {
+  color: var(--ua-color-success);
+}
+
+.ua-diff-row.is-del {
+  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-tint), transparent);
+}
+
+.ua-diff-row.is-del .ua-diff-sign {
+  color: var(--ua-color-danger);
+}