// ===== showcase/src/examples/components/image_preview.ts ===== import {  RenderButton,  RenderImagePreview,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' function createPreviewSource(primary: string, secondary: string, label: string): HTMLCanvasElement {  const canvas = document.createElement('canvas')  canvas.width = 320  canvas.height = 190  const context = canvas.getContext('2d')!  const gradient = context.createLinearGradient(0, 0, 320, 190)  gradient.addColorStop(0, primary)  gradient.addColorStop(1, secondary)  context.fillStyle = gradient  context.fillRect(0, 0, 320, 190)  context.fillStyle = 'rgba(255,255,255,0.92)'  context.font = 'bold 28px sans-serif'  context.fillText(label, 24, 48)  context.fillStyle = 'rgba(255,255,255,0.72)'  context.fillRect(24, 78, 220, 12)  context.fillRect(24, 106, 168, 12)  context.fillRect(24, 134, 250, 12)  return canvas} export function createImagePreviewExample(): RenderStackPanel {  const report = createPreviewSource('#1677ff', '#00a6a6', '检验报告')  const imaging = createPreviewSource('#7c3aed', '#db2777', '影像摘要')  const dynamic = new RenderImagePreview({ source: report, width: 300, height: 178, fit: 'cover', shape: 'rounded', borderWidth: 1 })  const state = new RenderText('当前：检验报告 · cover · rounded', { role: 'secondary' })   const samples = new RenderWrapPanel({ spacing: 16, runSpacing: 16, crossAxisAlignment: 'center' })  samples.addChild(dynamic)  samples.addChild(new RenderImagePreview({ source: imaging, width: 150, height: 178, fit: 'contain', shape: 'rectangle', borderWidth: 1 }))  samples.addChild(new RenderImagePreview({ size: 88, shape: 'circle', placeholderText: 'LA', borderWidth: 1 }))  samples.addChild(new RenderImagePreview({ size: 88, shape: 'rounded', placeholderIcon: 'image', borderWidth: 1 }))   const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({ label: '检验报告', variant: 'primary', onClick: () => { dynamic.setSource(report); state.text = '当前：检验报告 · cover · rounded' } }))  actions.addChild(new RenderButton({ label: '影像摘要', onClick: () => { dynamic.setSource(imaging); state.text = '当前：影像摘要 · cover · rounded' } }))  actions.addChild(new RenderButton({ label: '清空图片', onClick: () => { dynamic.setSource(null); state.text = '当前：空状态占位' } }))  actions.addChild(new RenderButton({ label: '模拟加载失败', onClick: () => { dynamic.setSource('/missing-clinical-preview.png'); state.text = '当前：URL 加载失败占位' } }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'ImagePreview 临床图片缩略图', description: '对比 cover、contain、矩形、圆角、圆形以及空状态和加载错误占位。' }))  panel.addChild(actions)  panel.addChild(samples, 1)  panel.addChild(state)  panel.padding = 18  return panel}