REAL SHOWCASE SOURCEnavigation-workspace

1 个文件 · 54 行 · TypeScript

// ===== showcase/src/examples/components/navigation_workspace.ts ===== import {  RenderBorder,  RenderPageHeader,  RenderPagination,  RenderStackPanel,  RenderTabControl,  RenderTabItem,  RenderTabs,  RenderText,} from 'ds-ui' const pageContent = (title: string, detail: string) => {  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 8 })  panel.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  panel.addChild(new RenderText(detail, { role: 'secondary' }))  return new RenderBorder({ background: 'muted', padding: 18, child: panel })} export function createNavigationWorkspaceExample(): RenderStackPanel {  const status = new RenderText('当前页面:摘要;查询结果:第 1 / 12 页。', { role: 'secondary' })  const tabs = new RenderTabs({    tabs: [      { key: 'summary', label: '摘要', icon: 'document' },      { key: 'orders', label: '医嘱', closable: true, dirty: true },      { key: 'results', label: '检验结果', closable: true },    ],    activeKey: 'summary',    onTabChange: key => { status.text = `Tabs 切换到:${key}` },    onTabClose: key => { status.text = `Tabs 请求关闭:${key};数据由业务层决定是否移除。` },  })   const tabView = new RenderTabControl({ activeKey: 'overview', onTabChange: key => { status.text = `TabView 已切换内容页:${key}` } })  tabView.addPage(new RenderTabItem({ key: 'overview', title: '概览', content: pageContent('就诊概览', 'TabView 同时管理标签头与当前内容页。') }))  tabView.addPage(new RenderTabItem({ key: 'timeline', title: '时间线', content: pageContent('诊疗时间线', '09:00 接诊 · 09:20 检验 · 10:10 影像检查') }))  tabView.addPage(new RenderTabItem({ key: 'audit', title: '审计记录', closable: true, content: pageContent('审计记录', '记录页面切换、保存、提交等关键操作。') }))   const pager = new RenderPagination({    currentPage: 1,    totalPages: 12,    maxVisiblePages: 5,    onChange: page => { status.text = `查询结果:第 ${page} / 12 页。` },  })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: '导航与内容工作区', description: 'Tabs 负责轻量标签交互,TabView 管理内容页,Pagination 连接业务分页状态。' }))  panel.addChild(tabs)  panel.addChild(tabView, 1)  panel.addChild(pager)  panel.addChild(status)  panel.padding = 24  return panel}