n-collapse-item 折叠面板成员
折叠面板的单个成员：标题行（图标插槽 / 标题 / 说明 / 值 / 收展箭头，单元格同构形态）+ 高度过渡动画的内容折叠区。搭配 n-collapse 使用（组内开合由组的 modelValue 数组决定）；也可独立使用（单面板折叠区，modelValue 布尔受控）。
- 组内使用：开合 = 组
model-value含本项name（name 留空自动分配注册序号名，v-for 动态增删面板时请显式给稳定 name）；点击标题只上报组，事件由组派发- 独立使用：开合 = 本组件
model-value（布尔），点击标题派发update:model-value+change（翻转后的值）——:model-value+@update:model-value手动双向- 内容折叠区高度过渡（
duration毫秒，箭头旋转同步）：内容常驻渲染，收起时被裁掉——插槽内部状态（表单值、滚动位置）在收起与展开之间保留；挂载即展开的面板直接定型不播动画disabled只锁收展（标题行降透明 + 拦截点击），已展开的内容保持原样
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 开合态（仅独立使用生效；组内开合由组 model-value 决定，本属性被忽略） | Boolean | false | - |
| name | 组内唯一标识（活动面板数组的成员）；留空自动分配注册序号名，v-for 动态增删面板时请显式给稳定 name | String | "" | - |
| title | 标题（一行主文字；内容复杂时改用 title 插槽） | String | "" | - |
| label | 标题下方的说明文字（次要色小字，如分组摘要） | String | "" | - |
| value | 右侧的值（次要色摘要文字；内容复杂时改用 value 插槽） | String | "" | - |
| arrow | 是否显示收展箭头（收起朝下、展开朝上，随开合旋转） | Boolean | true | - |
| disabled | 禁用（标题行保色相降透明、拦截收展点击；已展开的内容保持可见） | Boolean | false | - |
| border | 标题行底部分隔线（展开后成为标题与内容的分界线；组内最后一个面板建议关闭） | Boolean | true | - |
| duration | 内容收展过渡时长（毫秒；箭头旋转同步该时长，0 为关闭动画） | Number | 300 | - |
| title-style | 微调标题的行内样式，如 "font-weight:600"（页面 class 打不进组件内部） | String | "" | - |
| label-style | 微调说明文字的行内样式，如 "color:#ef4444" | String | "" | - |
| value-style | 微调值的行内样式，如 "color:#10b981;font-weight:bold" | String | "" | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "background-color:#ffffff" | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 开合态变化后触发（仅独立使用时），配合 :model-value 手动双向绑定 | 翻转后的开合态（Boolean） |
| change | 开合态变化后触发（仅独立使用时；语义化入口，与 update:model-value 同时发出）。组内使用由组容器统一派发 change / open / close，本组件不重复派发 | 翻转后的开合态（Boolean） |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 折叠内容（收起时被裁掉但常驻渲染，状态保留） |
| title | 自定义标题区（覆盖 title 文字；作用域参数 open：当前是否展开、disabled：是否禁用） |
| icon | 自定义标题左侧图标位（覆盖空缺省，配合 n-icon） |
| value | 自定义右侧值区（覆盖 value 文字） |
实现说明
- 折叠动画机制：内容绝对定位常驻渲染 + 外层 wrap 行内高度过渡（展开前 selectorQuery 测量内容实际高度，收起用已存值过渡到 0）——收起态内容仍在布局树，测量永远有效；展开态内容变化（异步数据、图片加载）后自动重测（50ms 合并高频更新）；挂载即展开的面板先定型高度再恢复过渡时长，不从 0 播放展开动画
- 根节点永不重建：内容插槽的内部状态（表单值、滚动位置）在收起与展开之间保留；标题行是组件自绘区，结构位（插槽增删 / 箭头与分隔线开关）翻转时 :key 重建标题行自身，开合翻转不在 key 内（箭头旋转与高度过渡走原地更新，不打断动画）
- 机制对照（参考实现 vs 本组件）：标题行取单元格同构形态（图标插槽 + 标题 + 说明 + 值 + 箭头）；独立使用 = 布尔受控单面板折叠区（update:modelValue + change 同参同发，与组内“数组受控”形成状态来源二选一，复选框成员同构）；箭头收起朝下、展开朝上随开合旋转（三家参考实现一致形态）；按压反馈 = 标题行背景蒙层（三家折叠实现均无按压反馈，两家明文可证、一家加密不可考；取行式可点区的平台惯例：原生 button-hover 与参考源列表单元格同为背景按压；自带底色的整块控件如按钮保持透明度按压，两分各有惯例依归）
- 裁剪参考并集记录：左侧图标名 prop 不收（图标一律插槽，配合 n-icon——库内图标位统一契约，单元格同构）；无标题行的纯折叠区不收（触发行是折叠面板的交互本体，外部触发收展的场景用 #title 插槽自定义触发器表达，或直接用显隐控制）；open 初始展开 prop 不收（受控值直接给初始态）；isLink / clickable 不收（收展箭头默认即折叠指示 isLink 的语义并入 arrow；按压反馈内置）；align 标题对齐不收（标题行是 icon/标题/说明/值/箭头五段形态，单切标题对齐破坏行节奏，需要非左对齐标题用 #title 插槽完全接管）；逐项颜色/尺寸样式 props 不收（主题令牌 + custom-style / title-style 等行内通道覆盖）；change 携带触发来源标记不收（开合方向由 open / close 与值本身表达）
- 主题令牌:
--n-collapse-title-height(标题行触控高)、--n-collapse-title-padding-x / -y、--n-collapse-title-size / label-size / value-size(三段文字字号)、--n-collapse-icon-gap / value-gap / arrow-gap(间距)、--n-collapse-arrow-size / arrow-box-size / arrow-width / arrow-color(箭头几何与颜色)、--n-collapse-border-color（分隔线，随深浅主题）、--n-collapse-content-padding-x / -y（内容区内边距）、--n-collapse-active-bg（按压背景蒙层，随深浅主题）/--n-collapse-disabled-opacity（禁用透明度）