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

packages/skin/ui/ui.css

@@ -4995,7 +4995,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-timepicker-col,
 .ua-layout-content,
 .ua-json,
-.ua-diff {
+.ua-diff,
+.ua-code-body {
   scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */
   scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */
 }
@@ -5629,3 +5630,58 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-diff-row.is-del .ua-diff-sign {
   color: var(--ua-color-danger);
 }
+
+/* ---- 代码块：等宽 + 行号靠右，头部只放标题与复制，不叠边框（容器已有一道） ---- */
+.ua-code {
+  overflow: hidden;
+  border: 1px solid var(--ua-border-subtle);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-surface-inset);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 等宽：代码缩进与对齐是语义的一部分 */
+  font-size: var(--ua-font-size-sm);
+  line-height: var(--ua-leading-normal);
+}
+
+.ua-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-2);
+  padding: var(--ua-space-1) var(--ua-space-2) var(--ua-space-1) var(--ua-space-3);
+  border-bottom: 1px solid var(--ua-border-subtle);
+  background: var(--ua-color-surface);
+}
+
+.ua-code-title {
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-xs);
+}
+
+.ua-code-body {
+  overflow: auto;
+  padding: var(--ua-space-2) 0;
+}
+
+.ua-code-line {
+  display: flex;
+  gap: var(--ua-space-3);
+  padding: 0 var(--ua-space-3);
+  white-space: pre; /* 长行横向滚动而不是折行：折行会让行号对不上内容 */
+}
+
+.ua-code-no {
+  flex: 0 0 auto;
+  min-width: var(--ua-space-4);
+  color: var(--ua-color-text-faint);
+  text-align: right;
+  user-select: none; /* 行号不进复制内容：复制按钮走原文，手动选择也不该带走行号 */
+}
+
+.ua-code-text {
+  flex: 1 1 auto;
+}
+
+/* 悬停整行提亮一档：读长代码时能追住当前行 */
+.ua-code-line:hover {
+  background: var(--ua-color-tint-accent-weak);
+}