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}