// ===== showcase/src/examples/components/navigation_menu.ts ===== import {  RenderBorder,  RenderButton,  RenderNavigationMenu,  RenderPageHeader,  RenderStackPanel,  RenderText,  type NavigationMenuGroup,} from 'ds-ui' const clinicalNavigationGroups: NavigationMenuGroup[] = [  {    key: 'clinical',    title: '临床业务',    icon: 'window',    collapsible: true,    children: [      { key: 'overview', title: '患者总览', icon: 'window', opened: true },      { key: 'records', title: '电子病历', icon: 'copy', status: 'success' },      { key: 'orders', title: '医嘱管理', icon: 'plus', badge: 6, status: 'warning' },      { key: 'critical', title: '危急值处理', icon: 'bell', badge: 2, status: 'danger' },    ],  },  {    key: 'operations',    title: '运营管理',    icon: 'settings',    collapsible: true,    children: [      { key: 'schedule', title: '排班管理', icon: 'calendar' },      { key: 'quality', title: '质控中心', icon: 'check', loading: true },      { key: 'analytics', title: '科室分析', icon: 'search', disabled: true, tooltip: '当前角色无访问权限' },    ],  },] export function createNavigationMenuExample(): RenderStackPanel {  const activeTitle = new RenderText('患者总览', { role: 'title', weight: 'semibold' })  const activeDescription = new RenderText('从侧边导航中选择业务模块；搜索会过滤分组和子项。', { role: 'secondary' })  let navigation!: RenderNavigationMenu  navigation = new RenderNavigationMenu({    title: 'Canvas HIS',    subtitle: '临床工作台',    groups: clinicalNavigationGroups,    selectedKey: 'overview',    searchPlaceholder: '搜索业务模块…',    onItemActivate: item => {      activeTitle.text = item.title      activeDescription.text = `已激活 ${item.key}；选中状态、已打开标记和 badge 由导航数据独立维护。`    },    onCollapsedChange: collapsed => {      navigation.width = navigation.currentWidth      activeDescription.text = collapsed ? '导航已折叠为分组 rail，可从分组弹层选择子项。' : '导航已展开，搜索和完整标签重新可见。'    },  })  navigation.width = RenderNavigationMenu.expandedWidth   const detail = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  detail.addChild(activeTitle)  detail.addChild(activeDescription)  detail.addChild(new RenderBorder({    background: 'selected',    padding: 16,    accentSide: 'left',    child: new RenderText('当前模块内容区域：这里可装配患者列表、病历编辑器或科室运营视图。'),  }))  detail.addChild(new RenderButton({    label: '切换折叠状态',    onClick: () => {      navigation.collapsed = !navigation.collapsed      navigation.width = navigation.currentWidth    },  }))   const workspace = new RenderStackPanel({ orientation: 'horizontal', spacing: 16, crossAxisAlignment: 'stretch' })  workspace.addChild(navigation)  workspace.addChild(detail, 1)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'NavigationMenu 临床模块导航',    description: '分组导航集成搜索、折叠 rail、选中项、打开标记、badge、加载和权限状态。',  }))  panel.addChild(workspace, 1)  panel.padding = 18  return panel}