// ===== showcase/src/examples/components/multi_select_dropdown.ts ===== import {  RenderFieldPresenter,  RenderFormPanel,  RenderMultiSelectDropdown,  RenderPageHeader,  RenderStackPanel,  RenderText,} from 'ds-ui' const scopeOptions = [  { value: 'cardiology', label: '心血管内科', group: '临床科室' },  { value: 'respiratory', label: '呼吸与危重症医学科', group: '临床科室' },  { value: 'neurology', label: '神经内科', group: '临床科室' },  { value: 'laboratory', label: '医学检验科', group: '医技科室' },  { value: 'radiology', label: '医学影像科', group: '医技科室' },  { value: 'pharmacy', label: '药学部', group: '医技科室' },] export function createMultiSelectDropdownExample(): RenderStackPanel {  const status = new RenderText('已选择 2 个会诊科室；可继续搜索、勾选或清空')  const form = new RenderFormPanel({ columns: 2, minColumnWidth: 280, labelWidth: 104, adaptive: true, columnGap: 18, rowGap: 14 })   form.addField(new RenderFieldPresenter({    label: '会诊科室',    required: true,    child: new RenderMultiSelectDropdown({      options: scopeOptions,      values: ['cardiology', 'radiology'],      placeholder: '搜索并选择科室',      searchable: true,      clearable: true,      onChange: (_values, options) => {        status.text = options.length          ? `会诊范围：${options.map(option => option.label).join('、')}`          : '会诊范围已清空'      },    }),  }))  form.addField(new RenderFieldPresenter({    label: '授权范围',    child: new RenderMultiSelectDropdown({      options: scopeOptions,      values: ['respiratory', 'laboratory', 'pharmacy'],      searchable: true,      clearable: true,      helperText: '已选项以紧凑标签展示',    }),  }))  form.addField(new RenderFieldPresenter({    label: '必填校验',    status: 'error',    message: '至少选择一个适用科室',    validationDisplay: 'inline',    child: new RenderMultiSelectDropdown({ options: scopeOptions, placeholder: '尚未选择', status: 'error' }),  }))  form.addField(new RenderFieldPresenter({    label: '只读结果',    child: new RenderMultiSelectDropdown({ options: scopeOptions, values: ['neurology'], readonly: true, suffixText: '只读' }),  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'MultiSelectDropdown 多选下拉',    description: '演示分组搜索、多项勾选、标签摘要、清空、校验与只读状态。',  }))  panel.addChild(form)  panel.addChild(status)  panel.padding = 24  return panel}