iter(g187): 新增虚拟列表组件

apps/demo/main.ts

@@ -77,6 +77,7 @@ import {
   tour,
   tooltip,
   typography,
+  virtualList,
 } from '@ui-arch/ui';
 import type { RowKey } from '@ui-arch/ui';
 
@@ -1496,6 +1497,28 @@ const content = h(
       ),
     ),
   ),
+  section(
+    'sec-vlist',
+    '虚拟列表',
+    'virtualList 固定行高虚拟化：DOM 里只保留可视窗口 + 上下缓冲条（本例 10,000 行常驻约 20 行），滚动 rAF 合帧整窗重建；句柄 scrollTo 按全量下标回跳，越界自动钳制。',
+    grid({ min: '320px' },
+      card({ title: '10,000 行订单流水' },
+        (() => {
+          const rows = Array.from({ length: 10000 }, (_, i) => ({ id: `SO-${10000 + i}`, amount: 88 + (i % 97) * 13 })); // 金额按下标推导，回看稳定
+          return virtualList({ items: rows, itemHeight: 44, height: 320, renderItem: (raw, i) => `#${i + 1} · ${(raw as { id: string }).id} · ¥${(raw as { amount: number }).amount}` }).el;
+        })(),
+        typography({ variant: 'paragraph', type: 'secondary', content: '滚动条是真实全长，但 DOM 只渲染可视窗口——开 DevTools 数一数 .ua-vlist-item 就知道。' }),
+      ),
+      card({ title: '滚回第 500 条' },
+        (() => {
+          const rows = Array.from({ length: 10000 }, (_, i) => ({ id: `SO-${10000 + i}`, amount: 88 + (i % 97) * 13 }));
+          const vlist = virtualList({ items: rows, itemHeight: 44, height: 320, renderItem: (raw, i) => `#${i + 1} · ${(raw as { id: string }).id} · ¥${(raw as { amount: number }).amount}` });
+          return h('div', null, vlist.el, space({ size: 'sm' }, button({ label: '跳到 #500', onClick: () => vlist.scrollTo(499) })));
+        })(),
+        typography({ variant: 'paragraph', type: 'secondary', content: 'scrollTo(index) 接全量下标（从 0 计），组件同步重渲，不等下一次滚动事件。' }),
+      ),
+    ),
+  ),
 );
 
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局