// ===== showcase/src/examples/components/scroll_viewer.ts ===== import { RenderBorder, RenderButton, RenderPageHeader, RenderScrollViewer, RenderStackPanel, RenderText, RenderWrapPanel } from 'ds-ui' export function createScrollViewerExample(): RenderStackPanel {  const status = new RenderText('可使用滚轮、拖动滚动条或按钮控制垂直偏移。', { role: 'secondary' })  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  for (let index = 1; index <= 24; index += 1) {    content.addChild(new RenderBorder({ background: index % 2 === 0 ? 'muted' : 'panel', padding: 12, child: new RenderText(`${String(index).padStart(2, '0')} · 审计记录：患者信息字段已完成一致性核验`) }))  }  const viewer = new RenderScrollViewer({ direction: 'vertical', child: content })  viewer.height = 420  const actions = new RenderWrapPanel({ spacing: 8 })  actions.addChild(new RenderButton({ label: '回到顶部', onClick: () => { viewer.scrollY = 0; status.text = 'scrollY = 0' } }))  actions.addChild(new RenderButton({ label: '滚动到底部', variant: 'primary', onClick: () => { viewer.scrollY = Number.MAX_SAFE_INTEGER; status.text = `当前 scrollY = ${Math.round(viewer.scrollY)}` } }))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'ScrollViewer 审计记录', description: '固定视口承载长内容，并统一处理滚轮、拖动和 API 滚动。' }))  panel.addChild(actions)  panel.addChild(viewer)  panel.addChild(status)  panel.padding = 24  return panel}