REAL SHOWCASE SOURCEmenu-bar-clinical

1 个文件 · 94 行 · TypeScript

// ===== showcase/src/examples/components/menu_bar.ts ===== import {  RenderBorder,  RenderMenuBar,  RenderPageHeader,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createMenuBarExample(): RenderStackPanel {  const status = new RenderText('点击菜单或使用方向键浏览;快捷键文本只用于提示,命令执行仍由业务层负责。', { role: 'secondary' })  const menuBar = new RenderMenuBar({    items: [      {        key: 'patient',        label: '患者',        items: [          { key: 'new-record', label: '新建患者档案', shortcut: 'Ctrl+N', icon: 'plus' },          { key: 'open-record', label: '打开患者档案', shortcut: 'Ctrl+O', icon: 'search' },          {            key: 'recent-records',            label: '最近访问',            items: [              { key: 'recent-li', label: '李安然 · MZ20260717018' },              { key: 'recent-zhou', label: '周明远 · ZY20260712006' },            ],          },          { separator: true },          { key: 'close-record', label: '关闭当前档案', shortcut: 'Ctrl+W' },        ],      },      {        key: 'clinical',        label: '诊疗',        items: [          { key: 'new-order', label: '开立医嘱', icon: 'plus' },          { key: 'sign-record', label: '签署病历', shortcut: 'Ctrl+S', icon: 'check' },          { key: 'critical-value', label: '危急值处理', danger: true, icon: 'bell' },          { separator: true },          {            key: 'templates',            label: '临床模板',            items: [              { key: 'template-round', label: '日常查房记录' },              { key: 'template-discharge', label: '出院小结' },            ],          },        ],      },      {        key: 'view',        label: '视图',        items: [          { key: 'patient-summary', label: '患者总览', icon: 'window' },          { key: 'timeline', label: '诊疗时间轴', icon: 'copy' },          { key: 'analytics', label: '科室分析', disabled: true },        ],      },      {        key: 'help',        label: '帮助',        items: [          { key: 'shortcuts', label: '键盘快捷键' },          { key: 'about', label: '关于 DirectSurface UI' },        ],      },    ],    onSelect: (menuKey, itemKey) => {      status.text = `已选择 ${menuKey} → ${itemKey};菜单分支已自动关闭。`    },  })   const content = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText('当前患者:李安然', { role: 'title', weight: 'semibold' }))  content.addChild(new RenderText('门诊号 MZ20260717018 · 心内科 · 林医生', { role: 'secondary' }))  content.addChild(new RenderBorder({    background: 'selected',    padding: 14,    accentSide: 'left',    child: new RenderText('菜单项支持图标、快捷键提示、分隔符、危险语气、禁用状态和任意深度子菜单。'),  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'MenuBar 临床工作台菜单',    description: '顶层菜单驱动多级 Popup 分支,并支持鼠标、键盘、状态和业务回调。',  }))  panel.addChild(menuBar)  panel.addChild(content)  panel.addChild(status)  panel.padding = 24  return panel}