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 })}