iter(g159): 多选下拉支持标签折叠

packages/skin/ui/src/multiSelect.ts

@@ -60,11 +60,17 @@ export function multiSelect(props: MultiSelectProps): HTMLElement {
   const render = (): void => {
     const cur = value();
     const full = props.max != null && cur.length >= props.max; // 是否已达上限
-    const tags = cur.map((v) => {
-      const label = props.options.find((o) => o.value === v)?.label ?? v;
+    const cut = props.maxTagCount != null && cur.length > props.maxTagCount ? cur.slice(0, props.maxTagCount) : cur; // 折叠后仍显示的标签
+    const labelOf = (v: string): string => props.options.find((o) => o.value === v)?.label ?? v;
+    const tags = cut.map((v) => {
+      const label = labelOf(v);
       const del = h('button', { type: 'button', class: 'ua-multiselect-x', 'aria-label': `移除 ${label}`, onClick: () => toggle(v) }, '×');
       return h('span', { class: 'ua-multiselect-tag' }, h('span', {}, label), del);
     });
+    if (cut.length < cur.length) { // 溢出项折成一枚 +N，悬停给全量、点击展开弹层
+      const rest = cur.slice(cut.length).map(labelOf).join('、');
+      tags.push(h('span', { class: 'ua-multiselect-tag is-more', title: rest, 'aria-label': `另有 ${cur.length - cut.length} 项：${rest}`, onClick: () => open(true) }, `+${cur.length - cut.length}`));
+    }
     tagWrap.replaceChildren(...tags); // 只换标签，输入框保持挂载（重建会丢焦点与输入内容）
     input.placeholder = cur.length ? '' : props.placeholder ?? '请选择'; // 有标签时不挤占占位文案
     const rows = visible().map((o, i) => {

packages/skin/ui/src/types.ts

@@ -700,6 +700,7 @@ export interface MultiSelectProps {
   value?: Signal<string[]>;               // 选中值数组信号；不传则内部维护
   placeholder?: string;                   // 未选时占位文案；缺省「请选择」
   max?: number;                           // 最多选几项：到上限后未选项禁用
+  maxTagCount?: number;                   // 标签区最多显示几个，超出折成「+N」；缺省全显示
   searchable?: boolean;                   // 是否可输入过滤；缺省 true
   disabled?: boolean | Signal<boolean>;   // 禁用整个下拉
   onChange?: (values: string[]) => void;  // 变更回调（传副本）