// ===== showcase/src/examples/components/tree_grid.ts ===== import {  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderTreeGrid,  type GridColumnDef,  type TreeGridNode,} from 'ds-ui' interface CatalogRow {  name: string  code: string  kind: string  count: number  enabled: boolean} const columns: GridColumnDef<CatalogRow>[] = [  { type: 'text', key: 'name', title: '目录 / 项目', width: 260, editable: true, sortable: true },  { type: 'text', key: 'code', title: '编码', width: 130, editable: true, sortable: true },  { type: 'text', key: 'kind', title: '类型', width: 110, sortable: true },  { type: 'number', key: 'count', title: '数量', width: 90, align: 'right', sortable: true },  { type: 'boolean', key: 'enabled', title: '启用', width: 90, align: 'center', editable: true },] const roots: TreeGridNode<CatalogRow>[] = [  {    key: 'widgets', icon: '📁', row: { name: '组件', code: 'WIDGETS', kind: '目录', count: 42, enabled: true },    children: [      { key: 'data-grid', icon: '▦', row: { name: 'DataGrid', code: 'DATA-01', kind: '数据', count: 18, enabled: true } },      { key: 'tree-grid', icon: '⌘', row: { name: 'TreeGrid', code: 'DATA-02', kind: '数据', count: 9, enabled: true } },      { key: 'charts', icon: '◒', row: { name: 'Charts', code: 'VIS-01', kind: '可视化', count: 7, enabled: true } },    ],  },  {    key: 'runtime', icon: '📁', row: { name: 'Runtime', code: 'RUNTIME', kind: '目录', count: 12, enabled: true },    children: [      { key: 'scheduler', icon: '⚙', row: { name: 'Scheduler', code: 'RUN-01', kind: '调度', count: 4, enabled: true } },      { key: 'compositor', icon: '◫', row: { name: 'Compositor', code: 'RUN-02', kind: '渲染', count: 6, enabled: true } },    ],  },] export function createTreeGridExample(): RenderStackPanel {  const status = new RenderText('展开目录、选择行、点击表头排序，或双击可编辑单元格')  const grid = new RenderTreeGrid<CatalogRow>({    columns,    roots,    treeColumnKey: 'name',    defaultExpandAll: true,    sortable: true,    resizableColumns: true,    editable: true,    onSelect: node => { status.text = `已选择：${node.row.name} · ${node.row.code}` },    onExpand: (node, expanded) => { status.text = `${expanded ? '展开' : '折叠'}：${node.row.name}` },    onCellChange: (node, key, value) => { status.text = `已修改 ${node.row.name}.${String(key)} = ${String(value)}` },    getCellDisplayText: ({ column, defaultDisplayText }) => column.key === 'enabled'      ? (defaultDisplayText === 'true' ? '是' : '否')      : undefined,  })  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'TreeGrid 层级数据维护',    description: '树结构、表格列、排序、调整列宽和编辑共享一个可访问的 Canvas 控件。',  }))  panel.addChild(grid, 1)  panel.addChild(status)  panel.padding = 18  return panel}