// ===== showcase/src/examples/components/data_views.ts ===== import {  RenderGridPanel,  RenderListView,  RenderPageHeader,  RenderPropertyGrid,  RenderStackPanel,  RenderTable,  RenderText,  RenderTreeView,  gridFr,  type ListViewItem,  type TableColumn,  type TreeNode,} from 'ds-ui' interface ProjectRow { name: string; owner: string; status: string; updated: string } export function createDataViewsExample(): RenderStackPanel {  const status = new RenderText('选择树节点、列表项或表格行，查看不同数据视图的交互模型。', { role: 'secondary' })  const roots: TreeNode[] = [{    key: 'workspace', label: '工作区', icon: '📁', children: [      { key: 'components', label: '组件', icon: '📁', children: [{ key: 'data-grid', label: 'DataGrid' }, { key: 'tree-view', label: 'TreeView' }] },      { key: 'guides', label: '指南', icon: '📁', children: [{ key: 'quick-start', label: '快速开始' }, { key: 'architecture', label: '架构' }] },    ],  }]  const tree = new RenderTreeView({ roots, defaultExpandedKeys: ['workspace', 'components'], onSelect: node => { status.text = `TreeView：${node.label}` } })   const items: ListViewItem[] = [    { key: 'inbox', label: '待处理', icon: 'bell', trailingText: '12' },    { key: 'today', label: '今日任务', icon: 'calendar', trailingText: '6' },    { key: 'done', label: '已完成', icon: 'check', trailingText: '28' },    { key: 'archive', label: '归档', disabled: true },  ]  const list = new RenderListView({ items, defaultSelectedItem: items[0], onSelect: item => { status.text = `ListView：${item.label}` } })   const rows: ProjectRow[] = [    { name: '门诊工作台', owner: '周医生', status: '进行中', updated: '10:42' },    { name: '病历编辑器', owner: '李医生', status: '待审核', updated: '09:18' },    { name: '检验查询', owner: '王医生', status: '已完成', updated: '昨天' },    { name: '护理记录', owner: '陈护士', status: '进行中', updated: '昨天' },  ]  const columns: TableColumn<ProjectRow>[] = [    { key: 'name', title: '项目', sortable: true },    { key: 'owner', title: '负责人', width: 110 },    { key: 'status', title: '状态', width: 100, sortable: true },    { key: 'updated', title: '更新时间', width: 90 },  ]  const table = new RenderTable({ columns, rows, height: 190, onRowClick: row => { status.text = `Table：${row.name} / ${row.status}` } })   const properties = new RenderPropertyGrid({    showDescriptionPanel: true,    selectedRowId: 'title',    rows: [      { id: 'title', group: '基础', name: '标题', value: '门诊工作台', editable: true, editor: 'text', description: '当前页面在标签、导航和窗口标题中显示的名称。' },      { id: 'visible', group: '基础', name: '可见', value: 'true', editable: true, editor: 'boolean', description: '控制当前对象是否参与布局和绘制。' },      { id: 'width', group: '布局', name: '宽度', value: '960', editable: true, editor: 'number', unit: 'px', description: '设计器画布中的目标宽度。' },      { id: 'theme', group: '外观', name: '主题', value: 'Light', editable: true, editor: 'enum', enumItems: [{ value: 'Light', label: 'Light' }, { value: 'Dark', label: 'Dark' }], description: '组件树使用的主题方案。' },    ],    onValueCommit: (row, value) => { status.text = `PropertyGrid：${row.name} = ${String(value)}`; return true },  })   const upper = new RenderGridPanel({ columns: [gridFr(), gridFr()], columnGap: 14, rowGap: 14 })  tree.height = 220  list.height = 220  upper.addChild(tree, { row: 0, column: 0 })  upper.addChild(list, { row: 0, column: 1 })  const lower = new RenderGridPanel({ columns: [gridFr(1.35), gridFr()], columnGap: 14, rowGap: 14 })  lower.addChild(table, { row: 0, column: 0 })  properties.height = 260  lower.addChild(properties, { row: 0, column: 1 })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: '数据视图选择', description: '树、列表、轻量表格和属性表分别服务不同的数据结构与编辑边界。' }))  panel.addChild(upper)  panel.addChild(lower)  panel.addChild(status)  panel.padding = 24  return panel}