// ===== showcase/src/examples/components/checked_combo_box.ts ===== import {  RenderCheckedComboBox,  RenderFormField,  RenderFormPanel,  RenderPageHeader,  RenderStackPanel,  RenderText,  type DropdownOption,} from 'ds-ui' const statusOptions: DropdownOption[] = [  { value: 'draft', label: '暂存' },  { value: 'submitted', label: '已提交' },  { value: 'executing', label: '执行中' },  { value: 'stopped', label: '已停止' },  { value: 'cancelled', label: '已取消' },] const scopeOptions: DropdownOption[] = [  { value: 'cardiology', label: '心血管内科', group: '临床科室' },  { value: 'respiratory', label: '呼吸与危重症医学科', group: '临床科室' },  { value: 'neurology', label: '神经内科', group: '临床科室' },  { value: 'laboratory', label: '医学检验科', group: '医技科室' },  { value: 'radiology', label: '医学影像科', group: '医技科室' },] export function createCheckedComboBoxExample(): RenderStackPanel {  const status = new RenderText(    '摘要会优先显示容得下的选中项，剩余内容折叠为 +N。',    { role: 'secondary' },  )  const form = new RenderFormPanel({    columns: 'auto',    maxColumns: 2,    minColumnWidth: 320,    labelWidth: 108,    columnGap: 18,    rowGap: 16,  })   form.addField(new RenderFormField({    label: '医嘱状态',    child: new RenderCheckedComboBox({      options: statusOptions,      values: ['submitted', 'executing', 'stopped'],      searchable: true,      clearable: true,      helperText: '可用空间充足时直接显示选中项',      onChange: (_values, options) => {        status.text = options.length          ? `医嘱状态：${options.map(option => option.label).join('、')}`          : '医嘱状态已清空'      },    }),  }))  form.addField(new RenderFormField({    label: '授权范围',    child: new RenderCheckedComboBox({      width: 260,      options: scopeOptions,      values: ['cardiology', 'respiratory', 'laboratory', 'radiology'],      searchable: true,      clearable: true,      helperText: '固定窄宽度用于观察响应式 +N 摘要',      onChange: (_values, options) => {        status.text = `授权范围：已选择 ${options.length} 项`      },    }),  }))  form.addField(new RenderFormField({    label: '只读结果',    child: new RenderCheckedComboBox({      options: scopeOptions,      values: ['neurology', 'radiology'],      readonly: true,      suffixText: '只读',    }),  }), { columnSpan: 2 })   const panel = new RenderStackPanel({    orientation: 'vertical',    spacing: 18,    crossAxisAlignment: 'stretch',  })  panel.addChild(new RenderPageHeader({    title: 'CheckedComboBox 紧凑多选',    description: '对比宽字段、窄字段和只读状态下的响应式摘要与完整勾选弹层。',  }))  panel.addChild(form)  panel.addChild(status)  panel.padding = 24  return panel}