REAL SHOWCASE SOURCEdock-workspace-clinical

2 个文件 · 103 行 · TypeScript

// ===== showcase/src/examples/components/dock_workspace.ts ===== import {  DockWindowManager,  RenderButton,  RenderDockWorkspace,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui'import { createClinicalWorkspaceDocument } from './workspace_shared' export function createDockWorkspaceExample(): RenderStackPanel {  const manager = new DockWindowManager()  const status = new RenderText('', { role: 'secondary' })  const workspace = new RenderDockWorkspace({ manager, disposeManagerOnDispose: true })   const openDocument = (tabId: string, title: string, tone: 'primary' | 'success' | 'warning'): void => {    if (manager.hasDocument(tabId)) {      manager.activateDocument(tabId)      return    }    manager.openDocument({      tabId,      title,      icon: tabId === 'dock-orders' ? 'plus' : tabId === 'dock-timeline' ? 'copy' : 'window',      dirty: tabId === 'dock-orders',      content: createClinicalWorkspaceDocument(title, `${title} 可以作为标签停靠,也可以拖到边缘形成拆分区域。`, tone),    })  }   manager.subscribe(() => {    status.text = `共 ${manager.documents.length} 个窗口;当前:${manager.activeDocument?.title ?? '无'};布局根节点:${manager.root.type}。`  })  openDocument('dock-overview', '患者总览', 'primary')  openDocument('dock-orders', '医嘱录入', 'warning')  openDocument('dock-timeline', '诊疗时间轴', 'success')  const orders = manager.getDocument('dock-orders')  if (orders && manager.root.type === 'tabs') manager.dockWindow(orders.window, manager.root, 'right')   const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({ label: '患者总览', onClick: () => openDocument('dock-overview', '患者总览', 'primary') }))  actions.addChild(new RenderButton({ label: '医嘱录入', onClick: () => openDocument('dock-orders', '医嘱录入', 'warning') }))  actions.addChild(new RenderButton({ label: '诊疗时间轴', onClick: () => openDocument('dock-timeline', '诊疗时间轴', 'success') }))  actions.addChild(new RenderButton({    label: '激活下一窗口',    onClick: () => manager.activateRelativeDocument(1),  }))  actions.addChild(new RenderButton({    label: '关闭当前',    onClick: () => { void manager.closeActiveDocument() },  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'DockWorkspace 可停靠临床工作区',    description: '同一 RenderWindow 可在标签、左右/上下拆分和浮动状态之间迁移而不销毁内容。',  }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(workspace, 1)  panel.padding = 18  return panel} // ===== showcase/src/examples/components/workspace_shared.ts ===== import {  RenderBadge,  RenderBorder,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createClinicalWorkspaceDocument(  title: string,  description: string,  status: 'primary' | 'success' | 'warning' | 'danger' = 'primary',): RenderStackPanel {  const heading = new RenderStackPanel({ orientation: 'horizontal', spacing: 10, crossAxisAlignment: 'center' })  heading.addChild(new RenderBadge({ value: 'LIVE', status, compact: true }))  heading.addChild(new RenderText(title, { role: 'title', size: 'large', weight: 'semibold' }))   const metrics = new RenderStackPanel({ orientation: 'horizontal', spacing: 12, crossAxisAlignment: 'stretch' })  metrics.addChild(createMetric('患者', '李安然'), 1)  metrics.addChild(createMetric('就诊号', 'MZ20260717018'), 1)  metrics.addChild(createMetric('接诊医生', '林医生'), 1)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(heading)  panel.addChild(new RenderText(description, { role: 'secondary' }))  panel.addChild(metrics)  panel.padding = 18  return panel} function createMetric(label: string, value: string): RenderBorder {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 4 })  content.addChild(new RenderText(label, { role: 'secondary', size: 'small' }))  content.addChild(new RenderText(value, { role: 'title', weight: 'semibold' }))  return new RenderBorder({ background: 'panel', padding: 12, child: content })}