From bf136304d7f5d457f688fcf4942160ef01c6ff6f Mon Sep 17 00:00:00 2001
From: jerry <jerry@team.local>
Date: Tue, 1 Sep 2026 17:47:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E5=9B=BE=E7=89=87=2050%=20?=
 =?UTF-8?q?=E5=AE=BD=E5=B8=83=E5=B1=80=20+=20=E8=BF=9E=E7=BB=AD=E5=90=8C?=
 =?UTF-8?q?=E6=AF=94=E4=BE=8B=E5=8F=8C=E5=9B=BE=E5=B9=B6=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 figureLayout.js:sameAspect(容差2%)/pairFigures(贪心配对)/layoutTextRoot(幂等)
- AssistantMessage:图片 load 后读 naturalWidth/Height 重排,单图 half 类,双图包 figure-row
- 相邻判定兼容 HTML 解析器把 figure 提出 p 后留下的空 p
- CSS 修 :deep()(原 scoped 规则从未命中 v-html),单图 50%、row 内各 calc(50% - 7px) + 14px 间距
- 新测试 16 例,全量前端 174 例全绿

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 tests/frontend/unit/b2/figureLayout.test.js | 159 ++++++++++++++++++++
 ui/src/components/chat/AssistantMessage.vue |  60 +++++++-
 ui/src/components/chat/figureLayout.js      | 140 +++++++++++++++++
 3 files changed, 352 insertions(+), 7 deletions(-)
 create mode 100644 tests/frontend/unit/b2/figureLayout.test.js
 create mode 100644 ui/src/components/chat/figureLayout.js

diff --git a/tests/frontend/unit/b2/figureLayout.test.js b/tests/frontend/unit/b2/figureLayout.test.js
new file mode 100644
index 0000000..16b6f09
--- /dev/null
+++ b/tests/frontend/unit/b2/figureLayout.test.js
@@ -0,0 +1,159 @@
+// @vitest-environment jsdom
+// figureLayout.test.js —— 聊天图片布局纯函数（2026-09-01）
+// 需求：单图 50% 宽；连续两张比例相同的图并排一行各 50%，留间距。
+import { describe, it, expect } from 'vitest';
+import { aspectOf, sameAspect, pairFigures, isInlineAdjacent, layoutTextRoot } from '../../../../ui/src/components/chat/figureLayout.js';
+
+const fig = () => document.createElement('figure');
+
+describe('aspectOf / sameAspect', () => {
+  it('未加载（0 值）返回 null', () => {
+    expect(aspectOf(0, 0)).toBe(null);
+    expect(aspectOf(0, 100)).toBe(null);
+    expect(aspectOf(100, 0)).toBe(null);
+  });
+  it('宽高比计算', () => {
+    expect(aspectOf(100, 50)).toBe(2);
+    expect(aspectOf(800, 400)).toBe(2);
+  });
+  it('容差 2% 内判同比例', () => {
+    expect(sameAspect(1, 1)).toBe(true);
+    expect(sameAspect(1.0, 1.01)).toBe(true);
+    expect(sameAspect(1.0, 1.03)).toBe(false);
+    expect(sameAspect(1, null)).toBe(false);
+    expect(sameAspect(null, null)).toBe(false);
+    expect(sameAspect(4 / 3, 800 / 600)).toBe(true);
+  });
+});
+
+describe('pairFigures 贪心配对', () => {
+  const figs = [fig(), fig(), fig(), fig()];
+  it('相邻同比例 → 配对；不同 → 落单', () => {
+    const g = pairFigures([figs[0], figs[1]], [1.5, 1.5]);
+    expect(g).toHaveLength(1);
+    expect(g[0].row).toBe(true);
+    expect(g[0].figures).toEqual([figs[0], figs[1]]);
+    const g2 = pairFigures([figs[0], figs[1]], [1.5, 1.0]);
+    expect(g2).toHaveLength(2);
+    expect(g2.every((x) => !x.row)).toBe(true);
+  });
+  it('3 张连续同比例 = 1 对 + 1 单', () => {
+    const g = pairFigures([figs[0], figs[1], figs[2]], [1, 1, 1]);
+    expect(g).toHaveLength(2);
+    expect(g[0].row).toBe(true);
+    expect(g[1].row).toBe(false);
+  });
+  it('空列表', () => {
+    expect(pairFigures([], [])).toEqual([]);
+  });
+  it('比例未知（null）不配对', () => {
+    const g = pairFigures([figs[0], figs[1]], [null, null]);
+    expect(g).toHaveLength(2);
+    expect(g.every((x) => !x.row)).toBe(true);
+  });
+});
+
+describe('isInlineAdjacent 连续性', () => {
+  it('同一 <p> 内仅空白相隔 → 相邻', () => {
+    const p = document.createElement('p');
+    const a = fig();
+    const b = fig();
+    p.append(a, document.createTextNode(' '), b);
+    expect(isInlineAdjacent(a, b)).toBe(true);
+  });
+  it('相邻兄弟 <p> → 相邻（markdown-it 逐图成段）', () => {
+    const wrap = document.createElement('div');
+    const pa = document.createElement('p');
+    const pb = document.createElement('p');
+    pa.append(fig());
+    pb.append(fig());
+    wrap.append(pa, pb);
+    expect(isInlineAdjacent(pa.firstChild, pb.firstChild)).toBe(true);
+  });
+  it('中间有文字段落 → 不相邻', () => {
+    const wrap = document.createElement('div');
+    const pa = document.createElement('p');
+    const pm = document.createElement('p');
+    const pb = document.createElement('p');
+    pa.append(fig());
+    pm.textContent = '说明文字';
+    pb.append(fig());
+    wrap.append(pa, pm, pb);
+    expect(isInlineAdjacent(pa.firstChild, pb.firstChild)).toBe(false);
+  });
+});
+
+describe('layoutTextRoot 幂等布局', () => {
+  function makeRoot(html) {
+    const root = document.createElement('div');
+    root.className = 'md-text';
+    root.innerHTML = html;
+    return root;
+  }
+  function readyImg(w, h) {
+    const img = document.createElement('img');
+    Object.defineProperty(img, 'naturalWidth', { value: w });
+    Object.defineProperty(img, 'naturalHeight', { value: h });
+    return img;
+  }
+  it('单图 → half 类，无 row', () => {
+    const root = makeRoot('<p><figure class="md-figure"><img></figure></p>');
+    root.querySelector('img').replaceWith(readyImg(800, 400));
+    const r = layoutTextRoot(root);
+    expect(r.done).toBe(true);
+    expect(root.querySelectorAll('.figure-row').length).toBe(0);
+    expect(root.querySelector('.md-figure').classList.contains('half')).toBe(true);
+  });
+  it('连续同比例双图 → 一个 figure-row，无 half', () => {
+    const root = makeRoot(
+      '<p><figure class="md-figure"><img></figure></p><p><figure class="md-figure"><img></figure></p>'
+    );
+    root.querySelectorAll('img').forEach((img) => img.replaceWith(readyImg(800, 400)));
+    const r = layoutTextRoot(root);
+    expect(r.done).toBe(true);
+    expect(root.querySelectorAll('.figure-row').length).toBe(1);
+    const row = root.querySelector('.figure-row');
+    expect(row.children.length).toBe(2);
+    expect(root.querySelectorAll('.md-figure.half').length).toBe(0);
+  });
+  it('比例不同的连续双图 → 各自 half，无 row', () => {
+    const root = makeRoot(
+      '<p><figure class="md-figure"><img></figure></p><p><figure class="md-figure"><img></figure></p>'
+    );
+    const imgs = root.querySelectorAll('img');
+    imgs[0].replaceWith(readyImg(800, 400));
+    imgs[1].replaceWith(readyImg(400, 800));
+    const r = layoutTextRoot(root);
+    expect(r.done).toBe(true);
+    expect(root.querySelectorAll('.figure-row').length).toBe(0);
+    expect(root.querySelectorAll('.md-figure.half').length).toBe(2);
+  });
+  it('图未加载 → 返回 pending，不布局', () => {
+    const root = makeRoot('<p><figure class="md-figure"><img></figure></p>');
+    const r = layoutTextRoot(root);
+    expect(r.done).toBe(false);
+    expect(r.pending.length).toBe(1);
+    expect(root.querySelector('.md-figure').classList.contains('half')).toBe(false);
+  });
+  it('重复调用幂等（重排前拆旧 row / 清 half）', () => {
+    const root = makeRoot(
+      '<p><figure class="md-figure"><img></figure></p><p><figure class="md-figure"><img></figure></p>'
+    );
+    root.querySelectorAll('img').forEach((img) => img.replaceWith(readyImg(800, 400)));
+    layoutTextRoot(root);
+    expect(root.querySelectorAll('.figure-row').length).toBe(1);
+    layoutTextRoot(root);
+    expect(root.querySelectorAll('.figure-row').length).toBe(1);
+    expect(root.querySelectorAll('.md-figure.half').length).toBe(0);
+  });
+  it('中间夹文字段落的双图 → 各自 half，无 row', () => {
+    const root = makeRoot(
+      '<p><figure class="md-figure"><img></figure></p><p>分隔文字</p><p><figure class="md-figure"><img></figure></p>'
+    );
+    root.querySelectorAll('img').forEach((img) => img.replaceWith(readyImg(800, 400)));
+    const r = layoutTextRoot(root);
+    expect(r.done).toBe(true);
+    expect(root.querySelectorAll('.figure-row').length).toBe(0);
+    expect(root.querySelectorAll('.md-figure.half').length).toBe(2);
+  });
+});
diff --git a/ui/src/components/chat/AssistantMessage.vue b/ui/src/components/chat/AssistantMessage.vue
index 227f2c1..24fb85b 100644
--- a/ui/src/components/chat/AssistantMessage.vue
+++ b/ui/src/components/chat/AssistantMessage.vue
@@ -3,9 +3,10 @@
 // 块类型：text（markdown-it + DOMPurify 消毒后 v-html）/ table（渐变表头 + 非「说明」列 mono）/
 // code / stream（光标 + shimmer-line，瞬态不落库）/ pipeline（五相位卡）/
 // tool（阶段卡）/ sources（内联引用 chip）/ graph（轻量摘要行，完整图在 bench kg tab）
-import { computed, ref } from 'vue';
+import { computed, onMounted, onUpdated, onUnmounted, ref } from 'vue';
 import { T, BENCH_TABS } from '../../i18n/labels.js';
 import { sanitizeHtml, NON_MONO_HEADER } from './markdown.js';
+import { layoutTextRoot } from './figureLayout.js';
 import PipelineCard from './PipelineCard.vue';
 import ToolCard from './ToolCard.vue';
 
@@ -43,6 +44,36 @@ const onLightboxKeydown = (e) => {
   if (e.key === 'Escape') closeLightbox();
 };
 
+// ---------- 图文布局（2026-09-01）：单图 50% 宽；连续同比例双图并排 ----------
+const bodyEl = ref(null);
+let layoutTimer = null;
+
+/** 对消息体所有 text 块跑布局；返回仍在等加载的 img 列表（比例未知） */
+const runFigureLayout = () => {
+  if (!bodyEl.value) return;
+  for (const root of bodyEl.value.querySelectorAll('.md-text')) {
+    layoutTextRoot(root);
+  }
+};
+
+const scheduleLayout = () => {
+  if (layoutTimer) clearTimeout(layoutTimer);
+  layoutTimer = setTimeout(runFigureLayout, 300);
+};
+
+// 图片加载完成后立即重排（capture 委托，与 onImageError 同机制）
+const onImageLoad = (e) => {
+  if (e.target instanceof HTMLImageElement && e.target.closest('.md-figure')) {
+    scheduleLayout();
+  }
+};
+
+onMounted(scheduleLayout);
+onUpdated(scheduleLayout);
+onUnmounted(() => {
+  if (layoutTimer) clearTimeout(layoutTimer);
+});
+
 // text 块 html 在创建/落库时已渲染为消毒 HTML（markdown.js renderMarkdown）；
 // 渲染前再消毒一次（纵深防御，FR-CHAT-004：LLM 输出必须消毒）
 const renderedText = (html) => sanitizeHtml(html);
@@ -94,10 +125,10 @@ const showRetry = computed(() => !!(props.onRetry && props.message.status === 'e
       <span class="who">{{ T.assistantName }}</span>
       <span class="when">{{ message.timeLabel }}</span>
     </div>
-    <div class="msg-body">
+    <div ref="bodyEl" class="msg-body" @load.capture="onImageLoad">
       <template v-for="(b, bi) in message.blocks" :key="bi">
         <!-- text：markdown-it → DOMPurify → v-html（FR-CHAT-004）；
-             图片事件经 capture 委托绑定（点击放大 / 加载失败隐藏） -->
+             图片事件经 capture 委托绑定（点击放大 / 加载失败隐藏 / 加载完成重排） -->
         <div
           v-if="b.type === 'text'"
           class="md-text"
@@ -434,23 +465,38 @@ const showRetry = computed(() => !!(props.onRetry && props.message.status === 'e
   color: var(--pa-ink-muted);
 }
 
-/* ---------- 图文并茂（2026-08-28） ---------- */
-.md-figure {
+/* ---------- 图文并茂（2026-08-28 图注块；2026-09-01 布局：单图 50% 宽 / 连续同比例双图并排） ---------- */
+/* v-html 内容不带 scope 属性，必须 :deep() 才能命中 */
+:deep(.md-figure) {
   margin: 14px 0;
   cursor: zoom-in;
+  width: 50%; /* 默认半宽（单图）；figure-row 内由 flex-basis 接管 */
 }
-.md-figure img {
+:deep(.md-figure img) {
   display: block;
+  width: 100%;
   max-width: 100%;
   border-radius: var(--pa-r-md);
   border: 1px solid var(--pa-hairline);
 }
-.md-figure figcaption {
+:deep(.md-figure figcaption) {
   font-size: 11.5px;
   color: var(--pa-ink-subtle);
   margin-top: 6px;
   line-height: 1.5;
 }
+/* 连续同比例双图并排：gap 14px，两侧 figure 各占 calc(50% - 7px)；
+   一张 onerror 隐藏后另一张仍保持半宽，不会撑满 */
+:deep(.figure-row) {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  margin: 14px 0;
+}
+:deep(.figure-row .md-figure) {
+  flex: 0 0 calc(50% - 7px);
+  margin: 0;
+}
 .figure-lightbox {
   position: fixed;
   inset: 0;
diff --git a/ui/src/components/chat/figureLayout.js b/ui/src/components/chat/figureLayout.js
new file mode 100644
index 0000000..b1bf038
--- /dev/null
+++ b/ui/src/components/chat/figureLayout.js
@@ -0,0 +1,140 @@
+// chat/figureLayout.js —— 聊天图片布局（2026-09-01）
+// 需求：回答中的图片默认占页面宽度 50%；连续两张比例相同的图片并排一行各占 50%，留适当间距。
+// 图片比例需读 naturalWidth/naturalHeight（img load 后才可用），因此布局在组件运行时用 JS 完成。
+// 纯函数导出便于单测；DOM 操作仅在 layoutTextRoot 内。
+
+/** 宽高比；w/h 无效（未加载）返回 null */
+export function aspectOf(w, h) {
+  return w > 0 && h > 0 ? w / h : null;
+}
+
+/** 两个比例是否相同（相对误差 ≤ tol，默认 2%） */
+export function sameAspect(a, b, tol = 0.02) {
+  if (a == null || b == null) return false;
+  return Math.abs(a - b) / Math.max(a, b) <= tol;
+}
+
+/** 空块元素（无子元素且无文本，如 HTML 解析器把 figure 提出 <p> 后留下的空 <p>）视为空白 */
+const isEmptyBlock = (node) =>
+  node.nodeType === 1 && !node.querySelector('*') && node.textContent.trim() === '';
+
+/** x、y 之间的兄弟节点是否只有空白文本/空块元素（无实体内容） */
+export function betweenWhitespaceOnly(x, y) {
+  let node = x.nextSibling;
+  while (node && node !== y) {
+    if (node.nodeType === 3) {
+      if (node.textContent.trim() !== '') return false;
+    } else if (node.nodeType === 1) {
+      if (!isEmptyBlock(node)) return false;
+    } else {
+      return false;
+    }
+    node = node.nextSibling;
+  }
+  return node === y;
+}
+
+/**
+ * 两张 figure 是否「连续出现」：
+ * - 同一 <p> 内（行内图）仅空白相隔；或
+ * - 各自所在 <p> 是相邻兄弟且仅空白相隔（markdown-it 逐图成段的标准形态）。
+ */
+export function isInlineAdjacent(a, b) {
+  const ca = a.closest('p') || a;
+  const cb = b.closest('p') || b;
+  if (ca === cb) return betweenWhitespaceOnly(a, b);
+  if (!ca.parentElement || ca.parentElement !== cb.parentElement) return false;
+  return betweenWhitespaceOnly(ca, cb);
+}
+
+/**
+ * 从左到右贪心配对：相邻且同比例 → { figures:[a,b], row:true }；
+ * 落单 → { figures:[f], row:false }。3 张连续同比例 = 1 对 + 1 单。
+ * @param {HTMLElement[]} figures figure.md-figure 元素（DOM 顺序）
+ * @param {(number|null)[]} aspects 与 figures 等长的宽高比数组
+ */
+export function pairFigures(figures, aspects) {
+  const groups = [];
+  let i = 0;
+  while (i < figures.length) {
+    if (i + 1 < figures.length && sameAspect(aspects[i], aspects[i + 1])) {
+      groups.push({ figures: [figures[i], figures[i + 1]], row: true });
+      i += 2;
+    } else {
+      groups.push({ figures: [figures[i]], row: false });
+      i += 1;
+    }
+  }
+  return groups;
+}
+
+/**
+ * 对一个 .md-text 根做布局（幂等，可反复调用）：
+ * 1. 拆掉旧的 .figure-row 包裹、清 half 类；
+ * 2. 图片未加载完成（naturalWidth=0）→ 返回 pending img 列表，等 load 后重排；
+ * 3. 按「连续出现」切 run，run 内相邻同比例 → 包 .figure-row；落单 → figure 加 .half。
+ * @returns {{done: boolean, pending: HTMLImageElement[]}}
+ */
+export function layoutTextRoot(root) {
+  // 加载失败的图片由组件层隐藏（figure.style.display='none'），不参与布局
+  const figures = Array.from(root.querySelectorAll('.md-figure')).filter(
+    (f) => !(f instanceof HTMLElement && f.style.display === 'none')
+  );
+
+  // 幂等：拆旧包裹
+  for (const row of root.querySelectorAll('.figure-row')) {
+    const parent = row.parentElement;
+    while (row.firstChild) parent.insertBefore(row.firstChild, row);
+    parent.removeChild(row);
+  }
+  figures.forEach((f) => f.classList.remove('half'));
+
+  const aspects = figures.map((f) => {
+    const img = f.querySelector('img');
+    return img ? aspectOf(img.naturalWidth || 0, img.naturalHeight || 0) : null;
+  });
+
+  const pending = [];
+  figures.forEach((f, i) => {
+    if (aspects[i] == null) {
+      const img = f.querySelector('img');
+      if (img) pending.push(img);
+    }
+  });
+  if (pending.length) return { done: false, pending };
+
+  // 按连续性切 run
+  const runs = [];
+  let run = [];
+  for (const f of figures) {
+    if (run.length && !isInlineAdjacent(run[run.length - 1], f)) {
+      runs.push(run);
+      run = [];
+    }
+    run.push(f);
+  }
+  if (run.length) runs.push(run);
+
+  for (const r of runs) {
+    const groups = pairFigures(
+      r,
+      r.map((f) => {
+        const img = f.querySelector('img');
+        return aspectOf(img.naturalWidth, img.naturalHeight);
+      })
+    );
+    for (const g of groups) {
+      if (g.row) {
+        const row = document.createElement('div');
+        row.className = 'figure-row';
+        const parent = g.figures[0].parentElement;
+        parent.insertBefore(row, g.figures[0]);
+        row.appendChild(g.figures[0]);
+        row.appendChild(g.figures[1]);
+      } else {
+        g.figures[0].classList.add('half');
+      }
+    }
+  }
+  return { done: true, pending: [] };
+}