┌─ 外层容器 container (height: 500px, overflow-y: auto) ─┐
│ ┌─ 占位层 phantom (height: total = n × itemH) ───────┐ │ ← 撑出真实滚动条
│ │                                                    │ │
│ │   ┌─ 内容层 content ────────────────────┐          │ │
│ │   │ transform: translateY(offsetY)      │          │ │ ← 推到正确位置
│ │   │ ┌ item[start]   ┐                   │          │ │
│ │   │ │ item[start+1] │ 只有这几十个真实   │          │ │
│ │   │ │ ...           │ 存在于 DOM 中      │          │ │
│ │   │ └ item[end]     ┘                   │          │ │
│ │   └─────────────────────────────────────┘          │ │
│ └────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘

关键公式（定高）：
  total        = itemCount × itemHeight
  startIndex   = floor(scrollTop / itemHeight)
  visibleCount = ceil(containerHeight / itemHeight)
  endIndex     = startIndex + visibleCount
  offsetY      = startIndex × itemHeight
加上缓冲：
  realStart = max(0, startIndex - overscan)
  realEnd   = min(count, endIndex + overscan)
  offsetY   = realStart × itemHeight

<div id="container" style="height:500px;overflow-y:auto;position:relative;border:1px solid #ddd">
  <div id="phantom"></div>                                  <!-- 撑高，产生真实滚动条 -->
  <div id="content" style="position:absolute;top:0;left:0;right:0"></div>
</div>
<script>
class FixedVirtualList {
  /**
   * @param {HTMLElement} container 滚动容器
   * @param {Array}  data       全量数据
   * @param {number} itemHeight 每项固定高度(px)
   * @param {number} overscan   上下各多渲染几项（缓冲区）
   * @param {(item:any, index:number) => string} renderItem 返回一项的 HTML
   */
  constructor({ container, data, itemHeight, overscan = 3, renderItem }) {
    this.container = container;
    this.phantom = container.querySelector('#phantom');
    this.content = container.querySelector('#content');
    this.data = data;
    this.itemHeight = itemHeight;
    this.overscan = overscan;
    this.renderItem = renderItem;

    this.ticking = false;   // rAF 节流标志位
    this.lastStart = -1;    // 上次渲染的起点，用于跳过无意义的重渲染

    // 占位层撑出总高度 = 条数 × 行高
    this.phantom.style.height = `${data.length * itemHeight}px`;

    // 滚动监听：passive 表示不会调用 preventDefault，浏览器可以立即滚动，不必等回调
    this.onScroll = this.onScroll.bind(this);
    container.addEventListener('scroll', this.onScroll, { passive: true });

    // 容器尺寸变化时重新计算可视条数
    this.ro = new ResizeObserver(() => this.render());
    this.ro.observe(container);

    this.render();
  }

  onScroll() {
    // rAF 节流：一帧内多次 scroll 只渲染一次，且渲染时机对齐浏览器绘制
    if (this.ticking) return;
    this.ticking = true;
    requestAnimationFrame(() => {
      this.ticking = false;
      this.render();
    });
  }

  render() {
    const { scrollTop, clientHeight } = this.container;
    const { itemHeight, overscan, data } = this;

    // 1) 由 scrollTop 反推可视区的起止下标
    const startIndex = Math.floor(scrollTop / itemHeight);
    const visibleCount = Math.ceil(clientHeight / itemHeight);

    // 2) 加缓冲并夹到合法范围
    const start = Math.max(0, startIndex - overscan);
    const end = Math.min(data.length, startIndex + visibleCount + overscan);

    // 3) 起点没变就不重排 DOM（滚动一像素也重建 DOM 是常见性能坑）
    if (start === this.lastStart && this.lastEnd === end) return;
    this.lastStart = start;
    this.lastEnd = end;

    // 4) 生成可视区 DOM。用一次 innerHTML 赋值，避免逐个 append 触发多次布局
    let html = '';
    for (let i = start; i < end; i++) html += this.renderItem(data[i], i);
    this.content.innerHTML = html;

    // 5) 把内容层整体推到正确的偏移位置（transform 只触发合成，不触发布局）
    this.content.style.transform = `translateY(${start * itemHeight}px)`;
  }

  /** 滚动到指定下标 */
  scrollToIndex(index) {
    this.container.scrollTop = index * this.itemHeight;
  }

  destroy() {
    this.container.removeEventListener('scroll', this.onScroll);
    this.ro.disconnect();
  }
}

// ---------- 使用 ----------
const data = Array.from({ length: 100000 }, (_, i) => ({ id: i, text: `第 ${i} 行数据` }));
new FixedVirtualList({
  container: document.getElementById('container'),
  data,
  itemHeight: 40,
  overscan: 3,
  renderItem: (item) =>
    `<div style="height:40px;line-height:40px;padding:0 12px;border-bottom:1px solid #eee">
       ${item.text}
     </div>`,
});
</script>

import { useState, useRef, useMemo, useCallback } from 'react';

function VirtualList({ data, itemHeight, height, overscan = 3, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const ticking = useRef(false);

  const { start, end, offsetY, total } = useMemo(() => {
    const total = data.length * itemHeight;
    const startIndex = Math.floor(scrollTop / itemHeight);
    const visibleCount = Math.ceil(height / itemHeight);
    const start = Math.max(0, startIndex - overscan);
    const end = Math.min(data.length, startIndex + visibleCount + overscan);
    return { start, end, offsetY: start * itemHeight, total };
  }, [scrollTop, data.length, itemHeight, height, overscan]);

  const onScroll = useCallback((e) => {
    const top = e.currentTarget.scrollTop;
    if (ticking.current) return;
    ticking.current = true;
    requestAnimationFrame(() => {
      ticking.current = false;
      setScrollTop(top);
    });
  }, []);

  const visible = data.slice(start, end);

  return (
    <div style={{ height, overflowY: 'auto', position: 'relative' }} onScroll={onScroll}>
      <div style={{ height: total }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0,
                    transform: `translateY(${offsetY}px)` }}>
        {visible.map((item, i) => (
          // key 必须用数据的稳定 id，不能用数组下标 i —— 否则滚动时 React 会
          // 认为「同一个位置还是同一个组件」而复用错内容（有内部 state 时会串数据）
          <div key={item.id} style={{ height: itemHeight }}>
            {renderItem(item, start + i)}
          </div>
        ))}
      </div>
    </div>
  );
}

import { useState, useRef, useCallback, useLayoutEffect, useMemo } from 'react';

function DynamicVirtualList({ data, estimatedHeight = 50, height, overscan = 3, renderItem }) {
  // 位置表：每项 { index, height, top, bottom, measured }
  // 初始全部用预估高度填充，随渲染逐步校正
  const positions = useRef([]);
  if (positions.current.length !== data.length) {
    positions.current = data.map((_, i) => ({
      index: i,
      height: estimatedHeight,
      top: i * estimatedHeight,
      bottom: (i + 1) * estimatedHeight,
      measured: false,          // 是否已实测过
    }));
  }

  const [scrollTop, setScrollTop] = useState(0);
  const [, forceUpdate] = useState(0);
  const itemRefs = useRef(new Map());
  const containerRef = useRef(null);

  const total = positions.current[positions.current.length - 1]?.bottom ?? 0;

  /**
   * 二分查找：找到第一个 bottom > scrollTop 的项，即可视区第一项。
   * 因为 positions 的 bottom 是单调递增的（高度非负），所以可以二分，O(log n)。
   * 数据量大时线性查找会成为滚动瓶颈。
   */
  const findStartIndex = useCallback((top) => {
    const list = positions.current;
    let lo = 0, hi = list.length - 1, res = list.length - 1;
    while (lo <= hi) {
      const mid = (lo + hi) >> 1;
      if (list[mid].bottom > top) { res = mid; hi = mid - 1; }
      else { lo = mid + 1; }
    }
    return res;
  }, []);

  const { start, end, offsetY } = useMemo(() => {
    const list = positions.current;
    const startIndex = findStartIndex(scrollTop);
    // 终点靠「累加真实高度直到超出视口高度」求得，不能再用除法
    let endIndex = startIndex;
    let acc = 0;
    while (endIndex < list.length && acc < height) {
      acc += list[endIndex].height;
      endIndex++;
    }
    const s = Math.max(0, startIndex - overscan);
    const e = Math.min(list.length, endIndex + overscan);
    return { start: s, end: e, offsetY: list[s]?.top ?? 0 };
  }, [scrollTop, height, overscan, findStartIndex, data.length]);

  /**
   * 渲染后校正：用 useLayoutEffect 保证在浏览器绘制前完成位置修正，
   * 否则用户会看到「先跳一下再归位」的闪烁。
   */
  useLayoutEffect(() => {
    const list = positions.current;
    let dirty = false;

    for (let i = start; i < end; i++) {
      const el = itemRefs.current.get(i);
      if (!el) continue;
      const realHeight = el.getBoundingClientRect().height;
      const diff = realHeight - list[i].height;
      if (Math.abs(diff) > 0.5) {          // 有实质变化才修正，避免亚像素抖动
        list[i].height = realHeight;
        list[i].bottom = list[i].top + realHeight;
        // 关键：把差值传播到【后面所有项】，保持 top/bottom 连续
        // 这里是 O(n)，数据量极大时可换成「线段树 / 树状数组」把更新降到 O(log n)，
        // 或采用「只修正到已渲染过的最远处，其余惰性计算」的策略
        for (let j = i + 1; j < list.length; j++) {
          list[j].top = list[j - 1].bottom;
          list[j].bottom = list[j].top + list[j].height;
        }
        list[i].measured = true;
        dirty = true;
      }
    }
    if (dirty) forceUpdate((v) => v + 1);   // 位置变了，重算可视区
  });

  const onScroll = (e) => setScrollTop(e.currentTarget.scrollTop);

  return (
    <div ref={containerRef} style={{ height, overflowY: 'auto', position: 'relative' }}
         onScroll={onScroll}>
      <div style={{ height: total }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0,
                    transform: `translateY(${offsetY}px)` }}>
        {data.slice(start, end).map((item, i) => {
          const index = start + i;
          return (
            <div key={item.id}
                 ref={(el) => {
                   if (el) itemRefs.current.set(index, el);
                   else itemRefs.current.delete(index);
                 }}>
              {renderItem(item, index)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// 用 ResizeObserver 持续跟踪高度变化（图片加载完、内容展开）
const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const index = Number(entry.target.dataset.index);
    const h = entry.contentRect.height;
    updatePosition(index, h);   // 同上：写回高度并向后传播
  }
});
// 每个渲染出来的 item 在 mount 时 ro.observe(el)，unmount 时 ro.unobserve(el)

import { useEffect, useRef, useState, useCallback } from 'react';

function useInfiniteList(fetchPage) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState(null);
  const cursorRef = useRef(null);         // 游标，而非页码
  const loadingRef = useRef(false);       // 用 ref 做并发锁：state 更新是异步的，
                                          // 只靠 loading state 会漏掉同一帧内的重复触发
  const sentinelRef = useRef(null);
  const abortRef = useRef(null);

  const loadMore = useCallback(async () => {
    if (loadingRef.current || !hasMore) return;
    loadingRef.current = true;
    setLoading(true);
    setError(null);

    // 组件卸载或重新加载时取消在途请求，避免 setState on unmounted / 竞态覆盖
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;

    try {
      const { list, nextCursor } = await fetchPage(cursorRef.current, ctrl.signal);
      setItems((prev) => prev.concat(list));
      cursorRef.current = nextCursor;
      // hasMore 由后端返回的 nextCursor 决定，不要用 list.length < pageSize 猜
      // （最后一页恰好满页时会多发一次空请求，虽然无害但不优雅；
      //   更严重的是过滤场景下某页返回 0 条不代表没有下一页）
      setHasMore(Boolean(nextCursor));
    } catch (e) {
      if (e.name !== 'AbortError') setError(e);
    } finally {
      loadingRef.current = false;
      setLoading(false);
    }
  }, [fetchPage, hasMore]);

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => { if (entries[0].isIntersecting) loadMore(); },
      {
        // root 默认是视口；列表在内部滚动容器里时必须显式指定 root
        root: null,
        // 提前 300px 触发，让数据在用户滚到底之前就准备好（关键的体验优化）
        rootMargin: '0px 0px 300px 0px',
        threshold: 0,
      }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [loadMore]);

  useEffect(() => () => abortRef.current?.abort(), []);

  return { items, loading, hasMore, error, sentinelRef, retry: loadMore };
}

// ---------- 使用 ----------
function List() {
  const { items, loading, hasMore, error, sentinelRef, retry } = useInfiniteList(
    async (cursor, signal) => {
      const url = `/api/items?limit=50${cursor ? `&cursor=${cursor}` : ''}`;
      const res = await fetch(url, { signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();   // { list: [...], nextCursor: 'xxx' | null }
    }
  );

  return (
    <div>
      {items.map((it) => <Row key={it.id} data={it} />)}

      {/* 哨兵：高度 1px 也可以，但要保证它在文档流中真实存在且可被观察到。
          注意不能用 display:none —— 那样永远不会 intersect */}
      <div ref={sentinelRef} style={{ height: 1 }} />

      {loading && <Skeleton rows={5} />}
      {error && <button onClick={retry}>加载失败，点击重试</button>}
      {!hasMore && <div className="end">— 已经到底了 —</div>}
    </div>
  );
}

-- ❌ OFFSET 分页：深翻页时数据库必须扫描并丢弃前 N 行，越翻越慢
SELECT * FROM orders ORDER BY created_at DESC LIMIT 50 OFFSET 100000;

-- ✅ 游标（Seek/Keyset）分页：走复合索引，恒定耗时
--    必须带上唯一的 tie-breaker（id），否则 created_at 相同的行会重复或遗漏
SELECT * FROM orders
WHERE (created_at, id) < (:last_created_at, :last_id)
ORDER BY created_at DESC, id DESC
LIMIT 50;
-- 需要索引：INDEX (created_at DESC, id DESC)

// worker.js
self.onmessage = ({ data: { raw } }) => {
  // parse 和加工全在 worker 线程，主线程期间完全空闲、可响应交互
  const list = JSON.parse(raw);
  const processed = list.map((it) => ({
    id: it.id,
    name: it.name,
    // 预格式化：把每行渲染时的重复计算提前做掉一次
    amountText: (it.amount / 100).toFixed(2),
    dateText: new Date(it.ts).toLocaleDateString('zh-CN'),
  }));
  self.postMessage(processed);
};

// 主线程
const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
async function loadPage(cursor) {
  const res = await fetch(`/api/items?cursor=${cursor}`);
  const raw = await res.text();          // 注意用 text()，把 parse 也交给 worker
  return new Promise((resolve) => {
    worker.onmessage = ({ data }) => resolve(data);
    worker.postMessage({ raw });
  });
}

// 虚拟列表 + 无限滚动：用可视区终点判断，不额外用哨兵
useEffect(() => {
  if (end >= data.length - 10 && hasMore && !loadingRef.current) {
    loadMore();
  }
}, [end, data.length, hasMore, loadMore]);

// 把「一次插入 5000 个」拆成「每帧插入 100 个」，主线程每帧都能喘口气
function renderInChunks(items, renderOne, container, batchSize = 100) {
  let i = 0;
  function step() {
    const frag = document.createDocumentFragment();  // 批量插入只触发一次 reflow
    const end = Math.min(i + batchSize, items.length);
    for (; i < end; i++) frag.appendChild(renderOne(items[i]));
    container.appendChild(frag);
    if (i < items.length) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

row 0 | A | 北京 | 100 |
row 1 |   |      | 200 |   ← A 的 rowspan=3，覆盖 row0~row2
row 2 |   |      | 300 |
row 3 | B | 上海 | 400 |   ← 这里才是安全的分块边界

如果第一页只加载 row0~row1：
  <td rowspan="3">A</td> 会向下"伸出"到不存在的第 3 行
  → 表格布局崩坏、边框错位、后续插入行被挤掉

/** 单元格的合并元数据 */
interface CellMeta {
  row: number;        // 全局行号（不是当前块内的相对行号）
  col: number;        // 全局列号
  rowspan: number;    // 纵向合并数，1 表示不合并
  colspan: number;    // 横向合并数
  /** 是否被其他单元格的合并区域覆盖。true 表示渲染时【完全跳过】这个格子，
   *  不能渲染成空 <td>（会把后面的列挤歪） */
  hidden: boolean;
  value?: unknown;
}

/** 一个「块」：加载与渲染的最小单位，保证内部合并结构完整 */
interface Block {
  id: string;
  startRow: number;   // 全局起始行（含）
  endRow: number;     // 全局结束行（不含），保证是合并边界
  rows: CellMeta[][]; // 该块内的单元格矩阵
  height: number;     // 实测/预估高度，用于虚拟滚动定位
  measured: boolean;
}

/** 表格模型 */
interface TableModel {
  totalRows: number;              // 全表行数（后端给，用于撑滚动条）
  blocks: Map<string, Block>;     // 已加载的块
  blockIndex: Array<{             // 块的位置索引（前缀和），用于二分定位
    id: string; startRow: number; endRow: number;
    top: number; bottom: number;
  }>;
  /** 全局行号 → blockId，O(log n) 二分定位当前滚动位置属于哪个块 */
  rowToBlock(row: number): string | null;
}

后端分页逻辑（伪码）：
  1. 按请求的 limit 取到候选 endRow
  2. 检查是否有合并区间 [s, e) 满足 s < endRow < e
  3. 若有，把 endRow 向后扩展到 max(e)（或向前收缩到 min(s)），直到无跨越
  4. 返回 { startRow, endRow, cells, nextCursor: endRow }
=> 每页行数会略有浮动，这是可接受的代价；换来的是前端结构永远自洽

/**
 * 把「合并区间列表」展开成完整的单元格矩阵，标记出被覆盖的格子。
 * @param {number} rowCount 行数
 * @param {number} colCount 列数
 * @param {Array<{row,col,rowspan,colspan}>} merges 合并区间（左上角坐标 + 跨度）
 * @param {(r:number,c:number)=>any} getValue 取原始值
 * @returns {CellMeta[][]}
 */
function buildCellMatrix(rowCount, colCount, merges, getValue) {
  // 1) 初始化：所有格子默认 1x1、可见
  const matrix = Array.from({ length: rowCount }, (_, r) =>
    Array.from({ length: colCount }, (_, c) => ({
      row: r, col: c, rowspan: 1, colspan: 1, hidden: false, value: getValue(r, c),
    }))
  );

  // 2) 应用合并：左上角格子写入 span，覆盖范围内的其他格子标记 hidden
  for (const { row, col, rowspan = 1, colspan = 1 } of merges) {
    if (row >= rowCount || col >= colCount) continue;
    matrix[row][col].rowspan = rowspan;
    matrix[row][col].colspan = colspan;
    for (let r = row; r < Math.min(row + rowspan, rowCount); r++) {
      for (let c = col; c < Math.min(col + colspan, colCount); c++) {
        if (r === row && c === col) continue;   // 跳过锚点格自身
        matrix[r][c].hidden = true;             // 被覆盖 → 渲染时完全不输出 <td>
      }
    }
  }
  return matrix;
}

/**
 * 计算「合并安全边界」：所有不被任何合并区间跨越的行号。
 * 用差分数组统计每一行有多少个合并组「正跨越」它。
 */
function computeSafeBoundaries(rowCount, merges) {
  const crossing = new Array(rowCount + 1).fill(0);
  for (const { row, rowspan = 1 } of merges) {
    if (rowspan <= 1) continue;
    // 该合并组跨越了边界 row+1 ... row+rowspan-1
    crossing[row + 1]++;
    crossing[row + rowspan]--;
  }
  // 前缀和还原每个边界的跨越计数
  const boundaries = [];
  let cur = 0;
  for (let i = 0; i <= rowCount; i++) {
    cur += crossing[i];
    if (cur === 0) boundaries.push(i);   // 计数为 0 = 无合并跨越 = 安全边界
  }
  return boundaries;   // 一定包含 0 和 rowCount
}

/** 给定期望的每页行数，把行区间对齐到安全边界 */
function planBlocks(rowCount, merges, targetRowsPerBlock = 50) {
  const safe = computeSafeBoundaries(rowCount, merges);
  const blocks = [];
  let start = 0;
  while (start < rowCount) {
    const want = start + targetRowsPerBlock;
    // 找到 >= want 的第一个安全边界（宁可多加载几行，也不能切断合并组）
    let end = safe.find((b) => b >= want);
    if (end === undefined || end <= start) end = rowCount;
    blocks.push({ id: `blk_${start}_${end}`, startRow: start, endRow: end });
    start = end;
  }
  return blocks;
}

/** 渲染一个块：跳过 hidden 格，锚点格输出 rowSpan/colSpan */
function BlockRows({ block }) {
  return (
    <>
      {block.rows.map((cells, i) => (
        <tr key={block.startRow + i} data-row={block.startRow + i}>
          {cells.map((cell) =>
            // ⚠️ 被覆盖的格子必须【完全不渲染】，
            //    渲染成 <td style="display:none"> 也不行 —— 会影响列宽计算
            cell.hidden ? null : (
              <td key={cell.col}
                  rowSpan={cell.rowspan > 1 ? cell.rowspan : undefined}
                  colSpan={cell.colspan > 1 ? cell.colspan : undefined}>
                {String(cell.value ?? '')}
              </td>
            )
          )}
        </tr>
      ))}
    </>
  );
}

/**
 * 块级虚拟滚动表格：
 * - 未加载的块用「预估高度的占位 tr」撑开，保证滚动条长度正确
 * - 进入视口（含 rootMargin 提前量）的块才真正请求数据并渲染
 * - 划出视口足够远的块可以被回收（保留高度，丢弃 DOM）
 */
function MergedTable({ totalRows, blockPlan, loadBlock, colCount, estRowHeight = 36 }) {
  const [loaded, setLoaded] = useState(new Map());   // blockId -> Block
  const loadingSet = useRef(new Set());
  const containerRef = useRef(null);
  const ioRef = useRef(null);

  useEffect(() => {
    ioRef.current = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (!e.isIntersecting) continue;
          const id = e.target.dataset.blockId;
          if (loaded.has(id) || loadingSet.current.has(id)) continue;
          loadingSet.current.add(id);
          const plan = blockPlan.find((b) => b.id === id);
          loadBlock(plan.startRow, plan.endRow)
            .then((block) => setLoaded((m) => new Map(m).set(id, block)))
            .finally(() => loadingSet.current.delete(id));
        }
      },
      { root: containerRef.current, rootMargin: '400px 0px' }  // 提前两屏加载
    );
    return () => ioRef.current?.disconnect();
  }, [blockPlan, loadBlock, loaded]);

  return (
    <div ref={containerRef} style={{ height: 600, overflow: 'auto' }}>
      {/* table-layout: fixed —— 列宽由首行决定，不因内容变化重算，
          这对「块动态加载」至关重要：否则每加载一块列宽都会跳动 */}
      <table style={{ tableLayout: 'fixed', width: '100%', borderCollapse: 'collapse' }}>
        <colgroup>
          {Array.from({ length: colCount }, (_, i) => <col key={i} style={{ width: 120 }} />)}
        </colgroup>
        <tbody>
          {blockPlan.map((plan) => {
            const block = loaded.get(plan.id);
            const rows = plan.endRow - plan.startRow;
            if (block) return <BlockRows key={plan.id} block={block} />;
            // 未加载：整块用一个 tr 占位，高度 = 行数 × 预估行高
            return (
              <tr key={plan.id}
                  data-block-id={plan.id}
                  ref={(el) => el && ioRef.current?.observe(el)}
                  style={{ height: rows * estRowHeight }}>
                <td colSpan={colCount} style={{ padding: 0 }}>
                  <SkeletonRows count={Math.min(rows, 5)} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ❌ 典型的 scroll 实现：每次滚动都强制同步布局
window.addEventListener('scroll', () => {
  images.forEach((img) => {
    // getBoundingClientRect() 会强制浏览器【立即】执行布局计算，
    // 打断浏览器的批处理优化。N 张图 = N 次（虽然同一帧内浏览器会缓存，
    // 但只要中间有任何写 DOM 的操作就会反复失效 → layout thrashing）
    const rect = img.getBoundingClientRect();
    if (rect.top < innerHeight && rect.bottom > 0) {
      img.src = img.dataset.src;    // 写 DOM → 布局失效 → 下一次读又要重新布局
    }
  });
});

// ⚠️ 加了 rAF 节流会好一些，但强制布局的本质问题还在，
//    而且滚动惯性结束时可能漏掉最后一次判断
let ticking = false;
window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(() => { ticking = false; check(); });
}, { passive: true });

// ✅ IntersectionObserver：零手写位置计算，零强制布局
const io = new IntersectionObserver(
  (entries, observer) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);      // 加载过就取消观察，避免重复触发
    }
  },
  {
    root: null,              // null = 视口；内部滚动容器要传该容器元素
    rootMargin: '200px 0px', // 视口向外扩 200px，提前加载（可用负值收缩）
    threshold: 0,            // 交叉比例达到 0 就触发（哪怕 1px 进入）
  }
);
document.querySelectorAll('img[data-src]').forEach((img) => io.observe(img));

new IntersectionObserver(callback, {
  // 观察的「参照系」。默认 null = 浏览器视口。
  // 元素在自定义滚动容器内滚动时【必须】指定为该容器，否则不会触发。
  root: document.querySelector('.scroll-container'),

  // 给 root 的边界加内边距，CSS margin 语法。
  // 正值 = 扩大判定范围（提前触发），负值 = 收缩（延后触发）。
  // ⚠️ root 为 null（视口）时，rootMargin 的百分比相对视口尺寸；
  //     且在跨域 iframe 中有限制。
  rootMargin: '0px 0px 300px 0px',

  // 触发阈值：目标元素与 root 的交叉面积占目标面积的比例。
  // 单值或数组。[0, 0.25, 0.5, 0.75, 1] 可以做「曝光进度」类需求。
  threshold: [0, 0.5, 1],
});

entry.isIntersecting     // 是否正在交叉（布尔）
entry.intersectionRatio  // 交叉比例 0~1
entry.target             // 目标元素
entry.time               // 触发时的时间戳（DOMHighResTimeStamp）
entry.boundingClientRect // 目标元素的矩形（浏览器已算好，读它不会额外触发布局）
entry.intersectionRect   // 交叉区域的矩形
entry.rootBounds         // root 的矩形

// ① 图片懒加载（一次性）
const lazyImgIO = new IntersectionObserver((entries, ob) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) return;
    const img = e.target;
    img.src = img.dataset.src;
    img.srcset = img.dataset.srcset || '';
    ob.unobserve(img);   // 关键：加载后取消观察
  });
}, { rootMargin: '200px' });

// ② 无限滚动哨兵（持续）
const sentinelIO = new IntersectionObserver(
  ([entry]) => { if (entry.isIntersecting) loadMore(); },
  { rootMargin: '0px 0px 400px 0px' }
);
sentinelIO.observe(document.querySelector('#sentinel'));

// ③ 曝光埋点（需要「持续可见 1 秒」才算曝光）
const exposureTimers = new Map();
const exposureIO = new IntersectionObserver((entries) => {
  for (const e of entries) {
    const id = e.target.dataset.id;
    if (e.isIntersecting && e.intersectionRatio >= 0.5) {
      // 进入且可见面积过半 → 起一个 1s 定时器
      if (!exposureTimers.has(id)) {
        exposureTimers.set(id, setTimeout(() => {
          report('exposure', id);
          exposureIO.unobserve(e.target);   // 上报过就不再观察
          exposureTimers.delete(id);
        }, 1000));
      }
    } else {
      // 划走了 → 取消定时器，本次不算曝光
      clearTimeout(exposureTimers.get(id));
      exposureTimers.delete(id);
    }
  }
}, { threshold: [0, 0.5] });

import { useEffect, useRef, useState } from 'react';

/** 返回 [ref, isIntersecting]，once=true 时首次进入后停止观察 */
function useInView({ root = null, rootMargin = '0px', threshold = 0, once = false } = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      setInView(entry.isIntersecting);
      if (entry.isIntersecting && once) io.unobserve(el);
    }, { root, rootMargin, threshold });
    io.observe(el);
    return () => io.disconnect();   // 卸载时务必断开，否则泄漏
  }, [root, rootMargin, threshold, once]);

  return [ref, inView];
}

                  ┌──────────── LazyBoundary ────────────┐
                  │                                       │
   占位容器 ──IO──▶│  idle ──进入视口──▶ loading ──▶ success │
   (有尺寸)        │           (骨架屏)      │              │
                  │                        ▼              │
                  │                      error            │
                  │                   (兜底 + 重试)         │
                  └───────────────────────────────────────┘
   关键：占位容器【必须有确定的尺寸】(aspect-ratio / min-height)
        否则骨架 → 内容的切换会产生布局偏移 (CLS)

import { useState, useRef, useEffect, useCallback } from 'react';

/**
 * 懒加载图片：骨架占位 → 进入视口加载 → 失败兜底 + 重试
 * @param {string} src        真实图片地址
 * @param {string} fallback   加载失败时的兜底图
 * @param {number} ratio      宽高比（width/height），用于预留空间防 CLS
 * @param {number} maxRetry   失败重试次数
 */
function LazyImage({ src, alt = '', fallback = '/img/placeholder.svg',
                     ratio = 16 / 9, maxRetry = 2, rootMargin = '200px' }) {
  const [status, setStatus] = useState('idle');   // idle | loading | success | error
  const [retry, setRetry] = useState(0);
  const wrapRef = useRef(null);

  // ① 视口检测：进入视口才切到 loading（真正发起请求）
  useEffect(() => {
    if (status !== 'idle') return;
    const el = wrapRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setStatus('loading'); io.disconnect(); }
    }, { rootMargin });
    io.observe(el);
    return () => io.disconnect();
  }, [status, rootMargin]);

  // ② 失败重试：指数退避，避免瞬时网络抖动导致的永久失败
  const onError = useCallback(() => {
    if (retry < maxRetry) {
      const delay = 2 ** retry * 500;   // 500ms, 1000ms, ...
      setTimeout(() => { setRetry((r) => r + 1); setStatus('loading'); }, delay);
    } else {
      setStatus('error');
    }
  }, [retry, maxRetry]);

  return (
    <div ref={wrapRef}
         style={{
           position: 'relative',
           width: '100%',
           // ③ 关键：用 aspect-ratio 预留空间，图片到达前后高度不变 → 零 CLS
           aspectRatio: String(ratio),
           overflow: 'hidden',
           background: '#f2f3f5',
         }}>
      {/* 骨架：微光动画，覆盖在容器上 */}
      {status !== 'success' && status !== 'error' && <Shimmer />}

      {/* 真实图片：只有进入视口（status !== 'idle'）才写 src */}
      {status !== 'idle' && status !== 'error' && (
        <img
          // key 带上 retry：重试时强制重新创建 img 元素，
          // 否则同一个 src 赋回去浏览器可能直接用失败缓存不重发
          key={retry}
          src={retry ? `${src}${src.includes('?') ? '&' : '?'}_r=${retry}` : src}
          alt={alt}
          loading="lazy"          // 原生懒加载兜底（IO 失效时仍生效）
          decoding="async"        // 图片解码不阻塞主线程
          onLoad={() => setStatus('success')}
          onError={onError}
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            // 淡入过渡，避免图片"啪"地出现
            opacity: status === 'success' ? 1 : 0,
            transition: 'opacity .25s ease',
          }}
        />
      )}

      {/* 错误兜底：默认图 + 点击重试 */}
      {status === 'error' && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex',
                      flexDirection: 'column', alignItems: 'center',
                      justifyContent: 'center', gap: 8, background: '#f7f8fa' }}>
          <img src={fallback} alt="加载失败" style={{ width: 48, height: 48 }} />
          <button onClick={() => { setRetry(0); setStatus('loading'); }}>重新加载</button>
        </div>
      )}
    </div>
  );
}

/** 骨架微光效果 */
function Shimmer() {
  return (
    <div style={{ position: 'absolute', inset: 0, background:
      'linear-gradient(90deg,#f2f3f5 25%,#e8e9eb 37%,#f2f3f5 63%)',
      backgroundSize: '400% 100%', animation: 'shimmer 1.4s ease infinite' }} />
  );
}
// CSS: @keyframes shimmer { 0% { background-position: 100% 50% }
//                           100% { background-position: 0 50% } }

import { lazy, Suspense, Component } from 'react';

/**
 * 带重试的动态 import。
 * 网络抖动或发版后旧 chunk 被清理都会导致 "Loading chunk failed"，
 * 不做重试就是白屏 —— 这是线上最常见的懒加载事故。
 */
function retryImport(factory, retries = 3, interval = 800) {
  return new Promise((resolve, reject) => {
    factory()
      .then(resolve)
      .catch((err) => {
        if (retries <= 0) {
          // 多次失败大概率是「发版后旧 chunk 已被 CDN 清理」，
          // 提示用户刷新可以拿到新的 chunk 映射表。
          // 用 sessionStorage 做标记防止无限刷新死循环。
          if (!sessionStorage.getItem('chunk_reloaded')) {
            sessionStorage.setItem('chunk_reloaded', '1');
            location.reload();
            return;
          }
          reject(err);
          return;
        }
        setTimeout(
          () => retryImport(factory, retries - 1, interval * 2).then(resolve, reject),
          interval
        );
      });
  });
}

const HeavyChart = lazy(() => retryImport(() => import('./HeavyChart')));

/** 错误边界：捕获渲染期错误，提供重试（改 key 强制重新挂载子树） */
class ErrorBoundary extends Component {
  state = { error: null, key: 0 };
  static getDerivedStateFromError(error) { return { error }; }
  componentDidCatch(error, info) {
    // 上报到监控平台，带上组件栈便于定位
    reportError({ message: error.message, stack: error.stack,
                  componentStack: info.componentStack });
  }
  reset = () => this.setState((s) => ({ error: null, key: s.key + 1 }));
  render() {
    if (this.state.error) {
      return this.props.fallback?.(this.state.error, this.reset) ?? (
        <div className="err">
          <p>组件加载失败</p>
          <button onClick={this.reset}>重试</button>
        </div>
      );
    }
    // key 变化会强制卸载并重新挂载整棵子树，从而重新触发 lazy 加载
    return <div key={this.state.key}>{this.props.children}</div>;
  }
}

/**
 * 统一入口：视口懒加载 + 骨架 + 错误边界，三合一
 * 业务方只需要 <LazyBoundary skeleton={<ChartSkeleton/>}><HeavyChart/></LazyBoundary>
 */
function LazyBoundary({ children, skeleton, minHeight = 200, rootMargin = '200px' }) {
  const [ref, inView] = useInView({ rootMargin, once: true });  // 见第 4 题的 hook
  return (
    // minHeight 保证未加载时也占位，避免内容到达时页面跳动
    <div ref={ref} style={{ minHeight }}>
      {inView ? (
        <ErrorBoundary>
          {/* Suspense 处理「chunk 正在下载」的等待态，
              ErrorBoundary 处理「chunk 下载失败」和「渲染报错」 */}
          <Suspense fallback={skeleton}>{children}</Suspense>
        </ErrorBoundary>
      ) : (
        skeleton
      )}
    </div>
  );
}

/** 防闪烁的加载态：快请求不显示骨架，慢请求显示后至少驻留一段时间 */
function useDelayedLoading(loading, { delay = 200, minDuration = 300 } = {}) {
  const [show, setShow] = useState(false);
  const shownAt = useRef(0);

  useEffect(() => {
    let t;
    if (loading) {
      // 延迟 delay 才显示：50ms 就返回的请求根本不会看到骨架
      t = setTimeout(() => { shownAt.current = Date.now(); setShow(true); }, delay);
    } else if (show) {
      // 已经显示了：保证至少驻留 minDuration，避免一闪而过
      const rest = Math.max(0, minDuration - (Date.now() - shownAt.current));
      t = setTimeout(() => setShow(false), rest);
    }
    return () => clearTimeout(t);
  }, [loading, show, delay, minDuration]);

  return show;
}

// ❌ 错误示范：用计数器递减，误差会累积
let remain = 3600;
setInterval(() => {
  remain -= 1;              // 假设每次间隔正好 1000ms —— 这个假设不成立
  render(remain);
}, 1000);

// 实际发生的事：
// t=0     设置定时器
// t=1000  主线程正忙（有个 200ms 的长任务） → 回调排队
// t=1200  回调才执行，remain 变成 3599，但真实已过去 1.2s
// t=2200  下一次触发（间隔从上次【执行完】开始算，误差继续累积）
// ...
// 跑 1 小时后可能少走十几秒到几十秒；后台标签页下差得更多

/**
 * 精确倒计时。
 * 核心思想：定时器只负责「什么时候重绘」，剩余时间永远由
 *          目标时间戳 - 当前时间戳 计算得出，因此定时器再不准也不会累积误差。
 */
class Countdown {
  /**
   * @param {number}   duration  倒计时总时长(ms)
   * @param {(remain:number)=>void} onTick 每次更新的回调，参数为剩余毫秒
   * @param {()=>void} onEnd     结束回调
   * @param {number}   interval  最小刷新间隔(ms)，默认 1000（只显示到秒时无需每帧重绘）
   * @param {number}   [serverTime] 服务端当前时间戳，用于校正客户端时钟
   */
  constructor({ duration, onTick, onEnd, interval = 1000, serverTime }) {
    this.onTick = onTick;
    this.onEnd = onEnd;
    this.interval = interval;

    // 客户端时钟可能被用户改过 → 用服务端时间校正出一个偏移量
    this.clockOffset = serverTime ? serverTime - Date.now() : 0;

    this.endAt = this.now() + duration;   // 目标时间戳，这是唯一的真相来源
    this.rafId = null;
    this.lastRenderAt = 0;
    this.running = false;

    this.tick = this.tick.bind(this);
    this.onVisibilityChange = this.onVisibilityChange.bind(this);
  }

  /** 校正过时钟偏移的"当前时间" */
  now() {
    return Date.now() + this.clockOffset;
  }

  start() {
    if (this.running) return;
    this.running = true;
    document.addEventListener('visibilitychange', this.onVisibilityChange);
    this.render(true);              // 立即渲染一次，避免首帧空白
    this.rafId = requestAnimationFrame(this.tick);
  }

  tick() {
    if (!this.running) return;
    this.render(false);
    if (this.running) this.rafId = requestAnimationFrame(this.tick);
  }

  /**
   * @param {boolean} force 是否忽略 interval 强制渲染
   */
  render(force) {
    const remain = Math.max(0, this.endAt - this.now());   // ★ 每次都重新算，零累积误差

    if (remain <= 0) {
      this.onTick(0);
      this.stop();
      this.onEnd?.();
      return;
    }

    // rAF 每秒回调 ~60 次，但只显示到「秒」的话没必要每帧都 setState/操作 DOM。
    // 用时间节流：距上次渲染超过 interval 才更新。
    const t = this.now();
    if (force || t - this.lastRenderAt >= this.interval) {
      this.lastRenderAt = t;
      this.onTick(remain);
    }
  }

  onVisibilityChange() {
    if (document.visibilityState === 'visible') {
      // 从后台回来：rAF 在后台是暂停的，此刻立即强制渲染一次，
      // 剩余时间会瞬间跳到正确值（因为它是从时间戳算的，中断不影响正确性）
      this.render(true);
      // 重新启动 rAF 循环（后台期间 rAF 不会被调度，回调链断了）
      if (this.running && this.rafId == null) {
        this.rafId = requestAnimationFrame(this.tick);
      }
    } else {
      // 切到后台：主动取消 rAF，省电（浏览器本来也不会调度，这里是显式表达意图）
      if (this.rafId != null) { cancelAnimationFrame(this.rafId); this.rafId = null; }
    }
  }

  stop() {
    this.running = false;
    if (this.rafId != null) { cancelAnimationFrame(this.rafId); this.rafId = null; }
    document.removeEventListener('visibilitychange', this.onVisibilityChange);
  }
}

// ---------- 格式化工具 ----------
function formatRemain(ms) {
  const total = Math.ceil(ms / 1000);         // 用 ceil：剩 0.3s 时显示 1s 而不是 0s
  const d = Math.floor(total / 86400);
  const h = Math.floor((total % 86400) / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  const pad = (n) => String(n).padStart(2, '0');
  return d > 0 ? `${d}天 ${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}:${pad(s)}`;
}

// ---------- 使用 ----------
const cd = new Countdown({
  duration: 2 * 60 * 60 * 1000,          // 2 小时
  serverTime: window.__SERVER_TIME__,    // 由后端注入，防止本地改时间作弊
  interval: 1000,
  onTick: (remain) => { document.getElementById('cd').textContent = formatRemain(remain); },
  onEnd: () => { alert('活动已结束'); },
});
cd.start();

import { useEffect, useRef, useState, useCallback } from 'react';

/**
 * @param {number} endAt 结束时间戳（ms，已用服务端时间校正过）
 * @param {number} interval 最小刷新间隔，毫秒级动画传 0
 */
function useCountdown(endAt, interval = 1000) {
  const [remain, setRemain] = useState(() => Math.max(0, endAt - Date.now()));
  const rafRef = useRef(null);
  const lastRef = useRef(0);

  const loop = useCallback(() => {
    const now = Date.now();
    const left = Math.max(0, endAt - now);    // ★ 永远从时间戳重算

    if (left <= 0) { setRemain(0); return; }  // 到点了，不再排下一帧
    if (now - lastRef.current >= interval) {
      lastRef.current = now;
      setRemain(left);                        // 节流：避免每帧 setState 引发 60 次重渲染
    }
    rafRef.current = requestAnimationFrame(loop);
  }, [endAt, interval]);

  useEffect(() => {
    lastRef.current = 0;                      // 保证首次立即渲染
    rafRef.current = requestAnimationFrame(loop);

    const onVisible = () => {
      if (document.visibilityState === 'visible') {
        // 回到前台立即校正一次，并重启已中断的 rAF 循环
        lastRef.current = 0;
        cancelAnimationFrame(rafRef.current);
        rafRef.current = requestAnimationFrame(loop);
      }
    };
    document.addEventListener('visibilitychange', onVisible);

    return () => {
      cancelAnimationFrame(rafRef.current);
      document.removeEventListener('visibilitychange', onVisible);
    };
  }, [loop]);

  return remain;
}

function Countdown({ endAt }) {
  const remain = useCountdown(endAt);
  return <span>{formatRemain(remain)}</span>;
}

// 后台也要走的兜底方案：把定时器放进 Worker（不受页面节流影响）
// timer.worker.js
let id = null;
self.onmessage = ({ data }) => {
  if (data.type === 'start') {
    id = setInterval(() => self.postMessage({ type: 'tick', t: Date.now() }), data.interval);
  } else if (data.type === 'stop') {
    clearInterval(id);
  }
};

  fetch(SSE)         缓冲队列(Queue)          rAF 消费者          React 状态
 ─────────────▶  ┌──────────────────┐  ─────────────▶  ┌────────────┐
  chunk 到达      │ "你" "好" "，" ...│   每帧取 N 个     │ setState   │
  (频率不可控)     └──────────────────┘   (16.7ms 一次)   │ 一次       │
                        ▲                                └────────────┘
                        │                                      │
                  网络抖动被吸收                          渲染频率恒定 ≤60/s

import { useRef, useState, useCallback, useEffect } from 'react';

/**
 * 打字机 Hook：把流式到达的文本，以恒定速度平滑输出。
 * @param {number} charsPerFrame 每帧输出的字符数（决定打字速度）
 * @param {number} maxQueue      队列长度阈值，超过则加速消费（避免落后太多）
 */
function useTypewriter({ charsPerFrame = 2, maxQueue = 200 } = {}) {
  const [text, setText] = useState('');
  const queueRef = useRef([]);      // 待输出的字符队列
  const bufferRef = useRef('');     // 已输出的完整文本（真相来源，避免闭包过期）
  const rafRef = useRef(null);
  const doneRef = useRef(false);    // 流是否已结束

  /** 生产者：SSE 收到内容时调用 */
  const push = useCallback((chunk) => {
    // 按「字符」入队。中文/emoji 要用 Array.from 按码点切，
    // 直接 split('') 会把 emoji 的代理对拆坏，渲染出乱码
    queueRef.current.push(...Array.from(chunk));
    start();
  }, []);

  /** 标记流结束：队列消费完后才算真正完成 */
  const finish = useCallback(() => { doneRef.current = true; }, []);

  const start = useCallback(() => {
    if (rafRef.current != null) return;   // 已在运行

    const loop = () => {
      const q = queueRef.current;
      if (q.length === 0) {
        rafRef.current = null;
        return;                           // 队列空了就停止循环，省资源
      }

      // 动态速度：队列积压太多说明模型输出比打字快，加速追上，
      // 否则用户会看到「说完很久了字还在慢慢蹦」
      const n = q.length > maxQueue
        ? Math.ceil(q.length / 10)        // 积压严重时按比例加速
        : charsPerFrame;

      // ★ 关键：一帧只 setState 一次，把 n 个字符一次性拼接
      //   而不是每个字符一次 setState（那样一秒会触发几百次渲染）
      const take = q.splice(0, n).join('');
      bufferRef.current += take;
      setText(bufferRef.current);

      rafRef.current = requestAnimationFrame(loop);
    };

    rafRef.current = requestAnimationFrame(loop);
  }, [charsPerFrame, maxQueue]);

  /** 跳过动画，立即输出全部（用户点「停止动画」时用） */
  const flushAll = useCallback(() => {
    bufferRef.current += queueRef.current.join('');
    queueRef.current = [];
    setText(bufferRef.current);
  }, []);

  const reset = useCallback(() => {
    queueRef.current = [];
    bufferRef.current = '';
    doneRef.current = false;
    if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
    rafRef.current = null;
    setText('');
  }, []);

  useEffect(() => () => {
    if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
  }, []);

  return { text, push, finish, flushAll, reset,
           isTyping: queueRef.current.length > 0 };
}

function ChatBox() {
  const { text, push, finish, flushAll, reset } = useTypewriter({ charsPerFrame: 2 });
  const abortRef = useRef(null);

  const send = async (prompt) => {
    reset();
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;

    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
      signal: ctrl.signal,
    });
    if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);

    // parseSSE 见第 8 题的完整实现
    for await (const evt of parseSSE(res.body, ctrl.signal)) {
      if (evt.data === '[DONE]') break;
      try {
        const delta = JSON.parse(evt.data)?.choices?.[0]?.delta?.content;
        if (delta) push(delta);           // 只入队，不直接 setState
      } catch { /* 忽略非 JSON 的心跳帧 */ }
    }
    finish();
  };

  return (
    <div>
      <MessageBody text={text} />
      <button onClick={() => abortRef.current?.abort()}>停止生成</button>
      <button onClick={flushAll}>跳过动画</button>
    </div>
  );
}

import { memo, useMemo, useRef } from 'react';
import { marked } from 'marked';

/**
 * 增量 Markdown 渲染：
 * 把文本按「块级边界」切分，已经稳定的块缓存解析结果，
 * 只有最后一个「未完成的块」每帧重新解析。
 * 这样把 O(n²) 降到 O(n) + O(尾块长度 × 帧数)。
 */
const MarkdownStream = memo(function MarkdownStream({ text }) {
  const cacheRef = useRef(new Map());   // blockText -> html

  const blocks = useMemo(() => {
    // Markdown 的块级分隔是「空行」。最后一块可能还没写完。
    const parts = text.split(/\n{2,}/);
    return parts.map((raw, i) => {
      const isLast = i === parts.length - 1;
      if (!isLast && cacheRef.current.has(raw)) {
        return { key: i, html: cacheRef.current.get(raw), stable: true };
      }
      const html = marked.parse(raw);
      // 只缓存「已完成」的块（不是最后一块 = 后面已有空行 = 该块写完了）
      if (!isLast) cacheRef.current.set(raw, html);
      return { key: i, html, stable: !isLast };
    });
  }, [text]);

  return (
    <>
      {blocks.map((b) => (
        // 稳定块用 memo 冻结，React 不会重新 diff 它的 DOM
        <StableBlock key={b.key} html={b.html} stable={b.stable} />
      ))}
    </>
  );
});

// stable 的块内容不再变化，memo 的比较函数直接跳过重渲染
const StableBlock = memo(
  ({ html }) => <div dangerouslySetInnerHTML={{ __html: html }} />,
  (prev, next) => prev.stable && next.stable && prev.html === next.html
);

// 会话列表：只有最后一条在流式更新，前面的必须冻结
const MessageList = ({ messages, streamingText }) => (
  <>
    {messages.map((m) => <HistoryMessage key={m.id} msg={m} />)}
    <StreamingMessage text={streamingText} />
  </>
);
// 历史消息用 memo + 稳定的 key，props 不变就完全不重渲染
const HistoryMessage = memo(({ msg }) => <MarkdownStream text={msg.content} />);

/**
 * 智能自动滚动：
 * - 用户主动向上滚动查看历史时，停止自动跟随（否则用户根本看不了历史）
 * - 用户滚回底部时，恢复跟随
 * - 用 rAF 节流滚动操作，不要每次文本更新都 scrollTo
 */
function useAutoScroll(deps) {
  const ref = useRef(null);
  const followRef = useRef(true);
  const rafRef = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      // 距底部 < 50px 视为「在底部」，恢复跟随
      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
      followRef.current = atBottom;
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!followRef.current) return;
    if (rafRef.current) return;              // 一帧最多滚一次
    rafRef.current = requestAnimationFrame(() => {
      rafRef.current = null;
      const el = ref.current;
      if (el) el.scrollTop = el.scrollHeight;
    });
  }, deps);

  return ref;
}