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}