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}