REAL SHOWCASE SOURCEdock-workbench

1 个文件 · 114 行 · TypeScript

// ===== showcase/src/examples/components/dock_workbench.ts ===== import {  DockWorkbenchManager,  RenderBorder,  RenderButton,  RenderDockWorkbench,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' type Entry = readonly [label: string, detail: string] interface WorkspaceContent {  title: string  description: string  entries: readonly Entry[]} const documents: Record<string, WorkspaceContent> = {  plan: {    title: '交付计划',    description: '城市服务平台 · 本周推进',    entries: [      ['需求冻结', '已完成 · 09 月 18 日'],      ['接口联调', '进行中 · 负责人 林乔'],      ['预发布验收', '待开始 · 09 月 30 日'],    ],  },  tasks: {    title: '任务清单',    description: '当前迭代 · 3 项关键任务',    entries: [      ['核对数据映射', '进行中 · 周鸣 · 今日截止'],      ['完成权限回归', '待验证 · 顾宁 · 明日截止'],      ['整理上线说明', '待开始 · 陈溪 · 周五截止'],    ],  },} const tools: Record<string, WorkspaceContent> = {  projects: {    title: '项目导航',    description: '按项目切换工作内容',    entries: [      ['城市服务平台', '进行中 · 72%'],      ['区域结算系统', '进行中 · 54%'],      ['数据治理一期', '验收中 · 89%'],    ],  },  details: {    title: '任务详情',    description: '当前关注 · 接口联调',    entries: [      ['负责人', '林乔 · 交付中心'],      ['计划完成', '09 月 26 日'],      ['当前状态', '进行中 · 等待测试反馈'],    ],  },  activity: {    title: '活动记录',    description: '最近的项目进展',    entries: [      ['10:24  联调结果已更新', '接口组 · 12 项通过'],      ['09:41  验收清单已提交', '交付组 · 等待复核'],    ],  },} function content({ title, description, entries }: WorkspaceContent): RenderStackPanel {  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 9, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  panel.addChild(new RenderText(description, { role: 'secondary', size: 'small' }))  for (const [label, detail] of entries) {    const row = new RenderStackPanel({ orientation: 'vertical', spacing: 3, crossAxisAlignment: 'stretch' })    row.addChild(new RenderText(label, { weight: 'semibold', size: 'small' }))    row.addChild(new RenderText(detail, { role: 'secondary', size: 'small' }))    panel.addChild(new RenderBorder({ background: 'muted', padding: 9, child: row }))  }  panel.padding = 12  return panel} export function createDockWorkbenchExample(): RenderStackPanel {  const manager = new DockWorkbenchManager()  const workbench = new RenderDockWorkbench({ manager, disposeManagerOnDispose: true })  const openDocument = (id: string) => manager.hasItem(id)    ? manager.activateItem(id)    : manager.openDocument({ itemId: id, title: documents[id]!.title, icon: 'document', content: content(documents[id]!) })  const openTool = (id: string, region: 'left' | 'right' | 'bottom') => manager.hasItem(id)    ? manager.activateItem(id)    : manager.openTool({ itemId: id, title: tools[id]!.title, region, icon: 'toolbox', content: content(tools[id]!) })   const controls = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  controls.addChild(new RenderButton({ label: '打开交付计划', onClick: () => openDocument('plan') }))  controls.addChild(new RenderButton({ label: '打开任务清单', onClick: () => openDocument('tasks') }))  controls.addChild(new RenderButton({ label: '项目导航', onClick: () => openTool('projects', 'left') }))  controls.addChild(new RenderButton({ label: '任务详情', onClick: () => openTool('details', 'right') }))  controls.addChild(new RenderButton({ label: '活动记录', onClick: () => openTool('activity', 'bottom') }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: '项目协同工作台', description: '切换文档、停靠工具区,项目上下文始终留在当前工作区。' }))  panel.addChild(controls)  panel.addChild(workbench, 1)  openDocument('plan')  openDocument('tasks')  openTool('projects', 'left')  openTool('details', 'right')  openTool('activity', 'bottom')  panel.padding = 12  return panel}