// ===== showcase/src/examples/components/popover.ts ===== import {  RenderBadge,  RenderButton,  RenderPageHeader,  RenderPopover,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui'import type { ShowcaseExample } from '../../showcase_example' function createVisitContent(status: RenderText): RenderStackPanel {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText('本次就诊', { role: 'title', weight: 'semibold' }))  content.addChild(new RenderBadge({ value: '复诊', status: 'primary' }))  content.addChild(new RenderText('心内科 · 2026-07-17 09:30'))  content.addChild(new RenderText('主诉：活动后胸闷 3 天', { role: 'secondary' }))  content.addChild(new RenderButton({    label: '刷新摘要',    onClick: () => { status.text = '就诊摘要已刷新，Popover 保持打开。' },  }))  return content} function createRiskContent(status: RenderText): RenderStackPanel {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText('风险提示', { role: 'title', weight: 'semibold' }))  content.addChild(new RenderBadge({ value: '需复核', status: 'warning' }))  content.addChild(new RenderText('患者既往有青霉素过敏记录。'))  content.addChild(new RenderButton({    label: '标记已阅读',    variant: 'primary',    onClick: () => { status.text = '风险提示已标记为阅读。' },  }))  return content} export function createPopoverExample(): ShowcaseExample {  const status = new RenderText('选择一个触发器，浮层会贴近按钮显示。', { role: 'secondary' })  const visitPopover = new RenderPopover({    label: '就诊摘要',    content: createVisitContent(status),    placement: 'bottom-start',    popoverWidth: 300,    onOpenChange: open => { status.text = open ? '就诊摘要已打开。' : '就诊摘要已关闭。' },  })  const riskPopover = new RenderPopover({    label: '用药风险',    content: createRiskContent(status),    placement: 'top-end',    popoverWidth: 280,    onOpenChange: open => { status.text = open ? '风险提示已打开，并优先显示在触发器上方。' : '风险提示已关闭。' },  })   const actions = new RenderWrapPanel({ spacing: 12, runSpacing: 12 })  actions.addChild(visitPopover)  actions.addChild(riskPopover)  actions.addChild(new RenderPopover({    label: '权限说明',    content: new RenderText('当前账号没有处方审核权限。'),    disabled: true,  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Popover 锚点浮窗',    description: '在触发器附近承载轻量说明和快捷操作，支持上下定位、外部点击与 Escape 关闭。',  }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(new RenderText('试一试：打开浮层后点击页面空白处，或使用键盘 Enter、Space、ArrowDown 和 Escape。', { role: 'secondary' }))  panel.padding = 24  return {    content: panel,    afterMount: () => visitPopover.openPopover(),  }}