// ===== showcase/src/examples/components/command_system.ts ===== import {  CommandManager,  RenderCommandButton,  RenderCommandToolbar,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderToolbar,  RenderWrapPanel,} from 'ds-ui' export function createCommandSystemExample(): RenderStackPanel {  const manager = new CommandManager()  const status = new RenderText('命令状态：当前记录有未保存修改。', { role: 'secondary' })  let dirty = true  let submitted = false   manager.register({    id: 'record.save',    title: '保存',    description: '保存当前记录',    icon: 'document',    canExecute: () => dirty,    disabledReason: () => '没有未保存内容',    execute: () => {      dirty = false      status.text = '命令状态：记录已保存，现在可以提交。'      manager.invalidate()    },  })  manager.register({    id: 'record.submit',    title: '提交',    description: '提交当前记录进入审核',    icon: 'chevron-right',    canExecute: () => !dirty && !submitted,    disabledReason: () => dirty ? '提交前需要先保存' : '记录已经提交',    execute: () => {      submitted = true      status.text = '命令状态：记录已提交，命令入口同步变为不可用。'      manager.invalidate()    },  })  manager.register({    id: 'record.refresh',    title: '刷新',    description: '重新加载记录状态',    icon: 'refresh',    execute: () => {      dirty = true      submitted = false      status.text = '命令状态：刷新完成，重新产生了未保存修改。'      manager.invalidate()    },  })   const commandToolbar = new RenderCommandToolbar({    commandManager: manager,    groups: [{      id: 'record',      slot: 'leading',      items: [        { kind: 'command', commandId: 'record.save', showLabel: true },        { kind: 'command', commandId: 'record.submit', showLabel: true },        { kind: 'separator', id: 'record-separator' },        { kind: 'command', commandId: 'record.refresh', showLabel: true },      ],    }],  })   const manualToolbar = new RenderToolbar({    groups: [{      id: 'editing',      slot: 'leading',      items: [        { id: 'undo', kind: 'button', label: '撤销', icon: 'undo', onClick: () => { status.text = '手工 Toolbar：撤销。' } },        { id: 'redo', kind: 'button', label: '重做', icon: 'redo', onClick: () => { status.text = '手工 Toolbar：重做。' } },        { id: 'separator', kind: 'separator' },        {          id: 'insert', kind: 'dropdown', label: '插入', icon: 'plus',          items: [{ key: 'table', label: '表格' }, { key: 'image', label: '图片' }, { key: 'section', label: '分节' }],          onSelect: key => { status.text = `手工 Toolbar：插入 ${key}。` },        },      ],    }],  })   const buttons = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  buttons.addChild(new RenderCommandButton({ commandId: 'record.save', commandManager: manager, variant: 'primary' }))  buttons.addChild(new RenderCommandButton({ commandId: 'record.submit', commandManager: manager }))  buttons.addChild(new RenderCommandButton({ commandId: 'record.refresh', commandManager: manager }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Command 命令系统', description: '同一个 commandId 同步驱动按钮、工具栏、菜单和可用状态。' }))  panel.addChild(new RenderText('命令工具栏', { role: 'title', weight: 'semibold' }))  panel.addChild(commandToolbar)  panel.addChild(new RenderText('独立命令按钮', { role: 'title', weight: 'semibold' }))  panel.addChild(buttons)  panel.addChild(new RenderText('手工 Toolbar 与下拉菜单', { role: 'title', weight: 'semibold' }))  panel.addChild(manualToolbar)  panel.addChild(status)  panel.padding = 24  return panel}