iter(g166): 下拉选项支持分组标题

packages/skin/ui/src/multiSelect.ts

@@ -73,10 +73,14 @@ export function multiSelect(props: MultiSelectProps): HTMLElement {
     }
     tagWrap.replaceChildren(...tags); // 只换标签，输入框保持挂载（重建会丢焦点与输入内容）
     input.placeholder = cur.length ? '' : props.placeholder ?? '请选择'; // 有标签时不挤占占位文案
-    const rows = visible().map((o, i) => {
+    const rows: HTMLElement[] = []; // 候选行：分组小标题与选项混排（小标题不可聚焦，不占 active 下标）
+    let prevGroup = ''; // 上一个候选的分组名，只在组首插一次标题
+    visible().forEach((o, i) => {
+      if (o.group && o.group !== prevGroup) rows.push(h('li', { class: 'ua-multiselect-group', role: 'presentation' }, o.group));
+      prevGroup = o.group ?? ''; // 无分组的候选打断连续段，后续同名组会重新起标题
       const on = cur.includes(o.value);
       const dead = o.disabled === true || (full && !on); // 到上限：未选项不可再点
-      return h(
+      rows.push(h(
         'li',
         {
           class: () => `ua-multiselect-opt${on ? ' is-selected' : ''}${active() === i ? ' is-active' : ''}${dead ? ' is-disabled' : ''}`,
@@ -86,7 +90,7 @@ export function multiSelect(props: MultiSelectProps): HTMLElement {
         },
         h('span', { class: 'ua-multiselect-check', 'aria-hidden': 'true' }, on ? '✓' : ''),
         h('span', {}, o.label),
-      );
+      ));
     });
     if (!rows.length) rows.push(h('li', { class: 'ua-multiselect-empty' }, '无匹配项'));
     list.replaceChildren(...rows);