n-section 分组标题
章节 / 分组标题栏：标题文字 + 右侧操作区 + 标题下方描述文字，可选左侧装饰竖条强调（宽度 / 颜色 / 端部形态 / 上下缩进可调，颜色支持渐变）。设置页、个人中心、详情页的分组标题，长表单的章节分隔，列表分组的段头都适用。
- 零配置即用：
<n-section title="账户与安全" />出纯文字标题；配description在标题下补一行说明- 强调形态：
line开启左侧品牌色竖条，宽度 / 颜色 / 圆头方头 / 上下缩进 / 与标题间距均可调，line-color支持渐变- 右侧操作：
#right插槽放「查看更多」链接或箭头，自动推到标题行尾；点击标题行触发click，回传{ title }
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-section title="账户与安全" />API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | "" | 标题文字；标题前要放图标等富内容时配合默认插槽（同盒并排），纯图标标题可留空 |
| description | string | "" | 标题下方的描述文字（次要色小字，如分组说明、补充信息） |
| line | boolean | false | 左侧装饰竖条（强调形态；默认纯文字标题） |
| line-width | number | string | 4 | 竖条宽度；数字按 px，字符串支持 px/rpx |
| line-color | string | "" | 竖条颜色；空 = 品牌色（跟随主题）。支持渐变，用方向关键词形式（如 linear-gradient(to bottom, #f59e0b, #ef4444)） |
| line-cap | string | "circle" | 竖条端部形态：circle 圆头 / square 方头 |
| line-gap | number | string | 0 | 竖条上下缩进；数字按 px，字符串支持 px/rpx，0 = 撑满标题行高；缩进不会撑高标题行，超过可用高度时竖条收至 0 |
| line-right | number | string | null | null | 竖条与标题文字的间距；数字按 px、字符串支持 px/rpx；null 时使用 --n-section-line-gap；负值使竖条左移，标题不留缩进 |
| size | number | string | 16 | 标题字号；数字按 px，字符串支持 px/rpx |
| color | string | "" | 标题颜色；空 = 主文字色（跟随主题，深浅自动适配） |
| bold | boolean | true | 标题加粗，fontWeight 非空时由 fontWeight 决定 |
| font-weight | number | string | "" | 标题字重，支持 normal、bold、100–900；空值跟随 bold |
| line-height | number | string | 0 | 标题行高，数字按 px、字符串支持 px/rpx；0 使用字体自动行高 |
| description-size | number | string | 13 | 描述字号；数字按 px，字符串支持 px/rpx |
| description-top | number | string | null | null | 标题行与描述区的间距；数字按 px、字符串支持 px/rpx；null 时使用 --n-section-description-gap |
| description-color | string | "" | 描述颜色；空 = 次要文字色（跟随主题） |
| custom-class | string | "" | 挂到根节点的额外 class（类需定义在组件样式表内） |
| custom-style | string | "" | 根节点行内样式：与相邻内容的排间距、背景与内边距走它（如 "margin:20px 0 8px;padding:0 16px"） |
长度类属性支持数字和 px/rpx 字符串，允许小数；数字须为有限值，仅 line-right 允许负值。line-right / description-top 的空值或非法值跟随主题令牌；其余非法长度回落组件默认值（标题字号 16px、描述字号 13px、竖条宽度 4px）；line-height=0 保留自动行高，显式行高需能容纳所用字体的墨迹。
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| click | detail: | 点击标题行时触发并回传标题文字（title 为空即纯插槽标题时回执为空串，需区分来源时给各实例挂独立处理函数）；描述区不响应点击 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 标题文字前的内容（图标等），与文字同盒并排 |
| right | 标题行尾的操作区（如「查看更多」链接），自动推到行尾 |
| description | 描述区的附加内容，位于 description 文字之后 |
主题令牌
| 令牌 | 默认值 | 说明 |
|---|---|---|
| --n-section-line-color | 品牌色 | 竖条颜色（line-color 传值时被属性覆盖） |
| --n-section-line-gap | 8px | 竖条与标题文字的间距 |
| --n-section-description-gap | 4px | 标题行与描述区的间距 |
标题色默认跟随主题令牌 --n-text-1、描述色默认跟随 --n-text-2（随深浅主题自动切换），不设组件独立文字色令牌。
实现说明
与参考实现对照的取舍（同类组件功能面取并集、冲突从使用者视角择优融合）
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 竖条默认开关 | 关（参考商业库默认）/ 开（旧版默认出线） | 默认关，line 主动开启 |
纯文字标题更百搭，竖条作为强调形态按需开启 |
| 竖条宽度默认 | 2px / 4px | 4px | 取旧版与同类分组标题的通用观感 |
| 竖条与文字间距 | lineRight 单项配置，负值可将竖条向左外移 | lineRight 单项覆盖 + --n-section-line-gap 全局默认，支持负值外移 | 保留参考项目的单项配置，同时支持主题令牌统一调整 |
| 竖条画法 | 标题行为定位基准，top/bottom 控制缩进，圆头半径随线宽 | 同左；标题区域为竖条宽度预留位置 | 缩进只改变竖条，不参与标题行高计算；长度和端部半径由同一线宽控制 |
| 竖条渐变色 | line-color 直接收渐变串 | 同能力；渐变走类内 background-image 变量、行内只写变量值并置底色层透明，方向用关键词形式，判定大小写不敏感 | 背景双属性收类是全端验证过的可靠链路；底色透明避免半透明渐变透出品牌色；角度形式部分端不识别 |
| 右侧操作区 | right 插槽（参考一左对齐 / 旧版行尾对齐） | right 插槽 + 行尾对齐（lead 拉伸占满） | 「章节标题 + 右侧操作」的行尾对齐是通用版式 |
| 点击回传 | click 回传 { title } |
click 回传 { title } |
与两个可读参考实现保持一致 |
| 描述区间距 | 单项配置（缺省 8rpx） | descriptionTop 单项覆盖 + --n-section-description-gap 全局默认 | 保留参考能力，公开 API 使用本库统一的 description 命名 |
| 标题字重 | 数值或字符串 fontWeight | 支持 fontWeight；空值时由 bold 控制，保留原有调用方式 | 显式字重优先，基础开关继续可用 |
| 标题行高 | lineHeight 单项配置 | 支持 lineHeight，默认 0 使用字体自动行高 | 保留可配置能力，默认适应各端字体指标 |
| background / padding / margin 属性 | 逐项属性 | 不收，走 custom-style | 等价能力已有通道，不另设平行属性 |
| 分组容器（外边框 / 圆角 / 背景包裹内容） | 单元格分组容器自带 | 不收 | 容器职责归卡片与列表行组合承担，本组件专注标题栏；分组容器思路体现在「标题 + 内容跟随其下」的用法 |
| 全局配置默认值 | 全局配置对象提供组件默认值 | 不收 | 主题令牌三层取值（运行时变量 / 编译覆盖 / 库默认）已覆盖同需求 |
| 结构更新 | 常规条件渲染 | 结构位收拢进根 :key（竖条种类、渐变值、标题与描述的有无），翻转整根重建；实色换色与端部形态走行内安全属性、不重建 | App 端动态插拔与背景图改值有不重绘的已知问题，重建一次装配到位；无谓重建会丢插槽内部状态 |