// ===== showcase/src/examples/components/breadcrumb.ts ===== import {  RenderBreadcrumb,  RenderButton,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createBreadcrumbExample(): RenderStackPanel {  const status = new RenderText('当前位于“检验结果”；末级表示当前位置，不会触发导航。', { role: 'secondary' })  const breadcrumb = new RenderBreadcrumb({    items: [      { key: 'home', label: '临床工作台' },      { key: 'outpatient', label: '门诊中心' },      { key: 'patient', label: '李安然' },      { key: 'record', label: '电子病历' },      { key: 'lab', label: '检验结果' },    ],    onNavigate: (item, index) => {      status.text = `准备返回第 ${index + 1} 级：${item.label}。路由切换由外层业务执行。`    },  })   const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({    label: '禁用“门诊中心”',    onClick: () => {      breadcrumb.items[1] = { ...breadcrumb.items[1]!, disabled: true }      breadcrumb.markNeedsPaint()      status.text = '“门诊中心”已禁用，鼠标和键盘都会跳过该层级。'    },  }))  actions.addChild(new RenderButton({    label: '恢复全部层级',    variant: 'primary',    onClick: () => {      breadcrumb.items[1] = { ...breadcrumb.items[1]!, disabled: false }      breadcrumb.markNeedsPaint()      status.text = '全部上级路径均可导航。'    },  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Breadcrumb 患者档案路径',    description: '在 PageHeader 下方表达当前位置层级，并支持鼠标、方向键、Home、End 和 Enter。',  }))  panel.addChild(breadcrumb)  panel.addChild(new RenderText('检验结果', { role: 'title', size: 'large', weight: 'semibold' }))  panel.addChild(new RenderText('患者：李安然 · 门诊号：MZ20260717018 · 最近更新：10:42', { role: 'secondary' }))  panel.addChild(actions)  panel.addChild(status)  panel.padding = 24  return panel}