// ===== showcase/src/examples/components/anchor_canvas.ts ===== import { RenderAnchor, RenderBadge, RenderBorder, RenderButton, RenderPageHeader, RenderStackPanel, RenderText } from 'ds-ui' export function createAnchorCanvasExample(): RenderStackPanel {  const status = new RenderText('角标、中心状态和浮动操作分别绑定到容器的不同锚点。', { role: 'secondary' })  const canvas = new RenderAnchor({ padding: 16 })  canvas.height = 420  canvas.addChild(new RenderBorder({ background: 'panel', padding: 14, width: 230, child: new RenderText('患者：王晓明\n床位：A-1208\n主治：心内科') }), { top: 0, left: 0 })  canvas.addChild(new RenderBadge({ value: '实时连接', status: 'success' }), { top: 0, right: 0 })  canvas.addChild(new RenderBorder({ background: 'selected', padding: 18, width: 280, child: new RenderText('中心诊疗状态\n等待检验结果回传', { role: 'title', weight: 'semibold' }) }), { centerX: true, centerY: true })  canvas.addChild(new RenderButton({ label: '＋ 新建医嘱', variant: 'primary', onClick: () => { status.text = '右下角锚定操作已触发。' } }), { right: 0, bottom: 0 })  const frame = new RenderBorder({ background: 'muted', padding: 10, child: canvas })  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Anchor / Canvas 锚点定位', description: '使用边缘与中心约束在有限画布中放置浮动业务元素。' }))  panel.addChild(frame)  panel.addChild(status)  panel.padding = 24  return panel}