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

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T08:00:04.262Z",
+  "generatedAt": "2026-10-26T08:02:08.033Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -2987,6 +2987,11 @@
                 "t": "number",
                 "d": "最多选几项：到上限后未选项自动禁用"
               },
+              {
+                "n": "maxTagCount",
+                "t": "number",
+                "d": "标签区最多显示几个，超出的折成一枚「+N」（悬停看全量、点击展开弹层）；缺省全部显示"
+              },
               {
                 "n": "searchable",
                 "t": "boolean",
@@ -3009,7 +3014,8 @@
               "点输入区展开弹层并聚焦输入框，输入字符即时过滤（大小写不敏感）",
               "点选项只切换该项、弹层不收起，适合连续多选；到 max 后未选项置灰不可点",
               "↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起（与其它弹层共用一个 Esc 栈）",
-              "value 传数组信号即受控，外部写入会同步标签区"
+              "value 传数组信号即受控，外部写入会同步标签区",
+              "选中项多时传 maxTagCount: 2 折叠：前 2 枚标签照常逐个删除，其余折成虚线「+N」，悬停 title 给出被折叠的项名，点它直接展开弹层；受控数组一变折叠数就重算"
             ]
           },
           {

apps/demo/main.ts

@@ -228,6 +228,7 @@ const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
 const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径（外部受控演示）
 const splitSizes = signal<number[]>([35, 65]); // 分栏比例（外部受控演示）
 const tagPick = signal<string[]>(['ts']); // 多选下拉选中值（外部受控演示）
+const tagFold = signal<string[]>(['ts', 'dom', 'css']); // 多选下拉折叠演示：预置 3 项看溢出
 const permPick = signal<string[]>(['read']); // 多选组选中值（外部受控演示）
 const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值（外部受控演示）
 const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示）
@@ -882,7 +883,7 @@ const content = h(
   section(
     'sec-multiselect',
     '多选下拉',
-    'multiSelect：标签式回显 + 可搜索弹层，点选不收起弹层（连续多选），空输入退格删末个标签，max 到限后未选项禁用。',
+    'multiSelect：标签式回显 + 可搜索弹层，点选不收起弹层（连续多选），空输入退格删末个标签，max 到限后未选项禁用，maxTagCount 折叠溢出标签。',
     h(
       'div',
       { class: 'row' },
@@ -900,6 +901,18 @@ const content = h(
         ],
       }),
       h('span', { class: 'out' }, () => `已选：${tagPick().join(' / ') || '无'}`),
+      multiSelect({
+        value: tagFold,
+        maxTagCount: 2,
+        placeholder: '标签折叠演示',
+        options: [
+          { value: 'ts', label: 'TypeScript' },
+          { value: 'dom', label: '原生 DOM' },
+          { value: 'css', label: 'CSS 令牌' },
+          { value: 'test', label: '测试' },
+        ],
+      }),
+      h('span', { class: 'out' }, () => `折叠后仅露出 2 枚标签，其余折成 +N（共 ${tagFold().length} 项）`),
     ),
   ),
   section(

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T08:00:04.262Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T08:02:08.033Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1590,6 +1590,7 @@ affix({ offset: 8 }, card({ title: '滚动时我会贴顶' }, h('p', null, '正
 - value：Signal<string[]> —— 选中值数组信号；不传则内部维护
 - placeholder：string —— 未选时占位文案；已选时让位给标签
 - max：number —— 最多选几项：到上限后未选项自动禁用
+- maxTagCount：number —— 标签区最多显示几个，超出的折成一枚「+N」（悬停看全量、点击展开弹层）；缺省全部显示
 - searchable：boolean —— 是否可输入过滤；缺省 true
 - disabled：boolean | Signal<boolean> —— 禁用整个下拉
 - onChange：(values: string[]) => void —— 变更回调（传副本）
@@ -1607,6 +1608,7 @@ multiSelect({ value: tagPick, max: 3, placeholder: '选择技术栈', options: [
 3. 点选项只切换该项、弹层不收起，适合连续多选；到 max 后未选项置灰不可点
 4. ↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起（与其它弹层共用一个 Esc 栈）
 5. value 传数组信号即受控，外部写入会同步标签区
+6. 选中项多时传 maxTagCount: 2 折叠：前 2 枚标签照常逐个删除，其余折成虚线「+N」，悬停 title 给出被折叠的项名，点它直接展开弹层；受控数组一变折叠数就重算
 
 现场演示：apps/docs/demo.html#sec-multiselect
 

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 cut = props.maxTagCount != null && cur.length > props.maxTagCount ? cur.slice(0, props.maxTagCount) : cur; // 折叠后仍显示的标签
-      const label = props.options.find((o) => o.value === v)?.label ?? v;
+    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;  // 变更回调（传副本）

packages/skin/ui/ua.manifest.json

@@ -2858,6 +2858,11 @@
             "t": "number",
             "d": "最多选几项：到上限后未选项自动禁用"
           },
+          {
+            "n": "maxTagCount",
+            "t": "number",
+            "d": "标签区最多显示几个，超出的折成一枚「+N」（悬停看全量、点击展开弹层）；缺省全部显示"
+          },
           {
             "n": "searchable",
             "t": "boolean",
@@ -2880,7 +2885,8 @@
           "点输入区展开弹层并聚焦输入框，输入字符即时过滤（大小写不敏感）",
           "点选项只切换该项、弹层不收起，适合连续多选；到 max 后未选项置灰不可点",
           "↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起（与其它弹层共用一个 Esc 栈）",
-          "value 传数组信号即受控，外部写入会同步标签区"
+          "value 传数组信号即受控，外部写入会同步标签区",
+          "选中项多时传 maxTagCount: 2 折叠：前 2 枚标签照常逐个删除，其余折成虚线「+N」，悬停 title 给出被折叠的项名，点它直接展开弹层；受控数组一变折叠数就重算"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -3611,6 +3611,16 @@ button.ua-step-dot:hover {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.ua-multiselect-tag.is-more {
+  color: var(--ua-color-accent);
+  border: 1px dashed color-mix(in srgb, var(--ua-color-accent) 40%, transparent);
+  background: transparent;
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+}
+.ua-multiselect-tag.is-more:hover {
+  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+}
 .ua-multiselect-x {
   padding: 0;
   font-size: 12px;