// ===== showcase/src/examples/components/overlay_feedback.ts ===== import {  NotificationManager,  RenderBorder,  RenderButton,  RenderDrawer,  RenderLoadingHost,  RenderModal,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderTextBox,  RenderWrapPanel,} from 'ds-ui'import type { ShowcaseExample } from '../../showcase_example' export function createOverlayFeedbackExample(): ShowcaseExample {  const notifications = new NotificationManager()  const status = new RenderText('选择一种反馈方式，观察阻断范围与交互语义。', { role: 'secondary' })   const modal = new RenderModal({    title: '确认提交',    content: '提交后将进入审核流程，是否继续？',    buttons: [      { key: 'cancel', label: '取消' },      { key: 'submit', label: '提交', primary: true },    ],    onClose: key => {      status.text = key === 'submit' ? '已确认提交。' : '已取消提交。'    },  })   const drawerContent = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  drawerContent.addChild(new RenderText('患者详情', { role: 'title', weight: 'semibold' }))  drawerContent.addChild(new RenderTextBox({ value: '李安然', label: '姓名', readonly: true }))  drawerContent.addChild(new RenderTextBox({ value: '呼吸内科', label: '科室', readonly: true }))  drawerContent.addChild(new RenderText('Drawer 可以承载真实组件树，并保留底层页面上下文。', { role: 'secondary' }))  const drawer = new RenderDrawer({ title: '患者详情', side: 'right', width: 420, child: drawerContent })   const loadingPanel = new RenderStackPanel({ orientation: 'vertical', spacing: 8 })  loadingPanel.addChild(new RenderText('局部查询结果', { role: 'title', weight: 'semibold' }))  loadingPanel.addChild(new RenderText('生命体征、检验结果和处置建议仍保留原有布局。', { role: 'secondary' }))  const loadingContent = new RenderBorder({ background: 'muted', padding: 18, child: loadingPanel })  const loadingHost = new RenderLoadingHost({ child: loadingContent, text: '正在刷新患者数据…' })  let loading = false  let loadingButton!: RenderButton  loadingButton = new RenderButton({    label: '开启局部 Loading',    onClick: () => {      loading = !loading      loadingHost.setLoading(loading, loading ? '正在刷新患者数据…' : undefined)      loadingButton.label = loading ? '关闭局部 Loading' : '开启局部 Loading'      loadingButton.markNeedsLayout()      status.text = loading ? '当前只阻断查询结果区域。' : '局部查询已恢复交互。'    },  })   const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderButton({ label: '打开 Modal', variant: 'primary', onClick: () => modal.show() }))  actions.addChild(new RenderButton({ label: '打开 Drawer', onClick: () => drawer.show() }))  actions.addChild(new RenderButton({ label: '成功通知', onClick: () => notifications.show('success', '保存成功', '病历内容已经保存。') }))  actions.addChild(new RenderButton({ label: '警告通知', onClick: () => notifications.show('warning', '网络较慢', '后台正在自动重试。', 5000) }))  actions.addChild(loadingButton)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Overlay 与反馈语义', description: '同一页面中对比确认、侧栏、非阻断通知和局部加载。' }))  panel.addChild(actions)  loadingHost.height = 150  panel.addChild(loadingHost)  panel.addChild(status)  panel.padding = 24  return {    content: panel,    afterMount: () => drawer.show(),  }}