List 列表
用于展示同类信息集合，可承载标题、描述与扩展操作。
基础用法
带边框列表
无边框
默认分隔线
尺寸
size 提供三档行密度：sm（紧凑）/ md（默认）/ lg（宽松），联动行内边距与标题字号。
尺寸 size
内容形态
多种内容形态
Meta 结构化（头像与描述）
oas-list-item 提供 Meta 结构化通道：
description属性：描述文本快捷通道（与slot="description"二选一，插槽优先，可放富内容）；avatar属性：头像 URL 快捷通道，渲染为首部圆形头像；slot="avatar"：头像富内容通道（可放oas-avatar或任意自定义内容），优先于avatar属性。
头像 + 描述（属性通道）
头像自定义（slot 通道放 oas-avatar）
前置媒体（icon / image）
除圆形头像外，条目另有两个前置媒体插槽，三者各自判空显隐、可按需组合：
slot="icon"：通用图标位（如oas-icon），尺寸跟随内容；slot="image"：方形缩略图位，尺寸与头像同档联动（sm 24 / md 32 / lg 40），小圆角裁剪填充；slot="avatar"：圆形头像位（见上节）。
图标位与方形缩略图位
整行链接（href / target）
href 使条目成为整行链接：行内渲染覆盖整行的 <a>（可访问名称取行标题），点击任意空白处即导航，键盘 Tab 聚焦、Enter 触发；target 配置打开方式（设置后自动补 rel="noopener noreferrer"，显式 rel 不覆盖）。
链接行
约定：链接行的点击语义 = 导航，不再派发 oas-click（与 clickable 行分离，避免双触发歧义）；行内操作控件请放 slot="extra"（操作区位于链接覆盖层之上，可正常交互）。
行交互（clickable / selected）
给 oas-list-item 设置 clickable 后整行可点：有 hover 反馈、可聚焦（Enter / Space 触发），点击派发 oas-click 事件；行内嵌按钮/开关等交互控件时，点这些控件不触发行点击（行与控件不双触发），行本身不挂交互角色以免把它们裹进交互元素。需要行级交互语义（如 role="button"）时由宿主显式挂 role（组件不覆盖宿主显式角色，与 card 口径一致）。selected 标记选中行高亮。选中态由宿主维护，常用于成员列表、设置项列表。
可点行与选中态
点击行切换选中态（单选示例）；点击右侧开关不影响行选中。
页头与页尾
slot="header" / slot="footer" 在列表首尾渲染自定义区域，常用于分组标题、统计信息、操作按钮位。
header / footer 插槽
加载与空态
加载态
空态
设置 empty 强制空态；列表没有任何 oas-list-item 子项时也会自动显示空态，可通过 empty-text 自定义文案。
slot="empty" 可以完全替换内置空态（图标 + 文案），对齐数据类组件的空态插槽惯例。
自定义空态插槽
空态文案与分隔线
empty-text 自定义空态文案（默认「暂无数据」）。
自定义空态文案
split 控制条目分隔线：默认（不设置 bordered）时自带分隔线；设置 bordered 后分隔线关闭，需要时用 split 重新开启。
分隔线 split
斑马纹
stripe 为视觉偶数行（第 2、4… 条）铺浅色底，适合审计日志、长表对照阅读。
斑马纹 stripe
图文混排
条目默认插槽可放缩略图，配合标题与描述形成富媒体列表。
图文列表（缩略图 + 标题 + 描述）
数据通道（data + 模板双通道）
除声明式 oas-list-item 子项外，oas-list 支持数据驱动：通过 data property（推荐）或 data 属性（JSON 字符串）传入数组。对象行开箱即用：未提供模板时，{ title, description, avatar } 同名字段自动渲染为 Meta 结构（原始值行则直接渲染文本），不会退化成 "[object Object]"。渲染自定义有两条通道（与 oas-tree 的惯例对齐）：
template[slot="item"]：每项克隆的静态骨架，配合oas-item-render事件（detail带{ index, item, element }）按数据绑定；- 只监听
oas-item-render，不写模板，完全命令式填充每行。
监听器请先挂后赋值：
data赋值同步触发渲染与oas-item-render，后挂的监听会错过首轮渲染。
有 data 走数据通道、无 data 回落声明式子项。数据行为 oas-list-item 承载（结构、头像、选中、点击与声明式一致），行上有 data-index 上下文。
数据通道 + oas-item-render
数据源为 5 条任务记录，点击行有 oas-click 反馈。
template[slot="item"] 骨架克隆
滚动加载（reach-bottom）
max-height 把列表体变成滚动容器；滚动至底部（距离阈值由 bottom-offset 调整，默认 0）派发 oas-reach-bottom，进入触底区只派发一次、滚离后重新武装。配合 slot="load-more" 尾区放「加载更多」按钮或加载中占位，拉取与停止逻辑由宿主掌控。
触底加载 + load-more 尾区
滚到底自动追加 5 条（模拟异步），加载 3 批后显示「没有更多了」；bottom-offset="40" 距底部 40px 即触发。
虚拟滚动
height 设置视口高度即启用虚拟滚动（内嵌复用 oas-virtual-list），row-height 指定行高（默认 64，要求数据行定高）。虚拟模式要求走 data 通道，海量数据只渲染可视窗口。
万级数据虚拟列表
10000 条日志记录，视口内仅渲染窗口项 + 缓冲。
组合：分页（oas-pagination）
列表不内建分页——数据受控于宿主，分页即「宿主切片 + 更新 data」。配合 oas-pagination 一行搞定：
分页组合
组合：卡片墙（oas-grid + oas-card）
网格卡片墙由 oas-grid + oas-card 组合承担（卡片样式本身是内容，列表只负责渲染数据，网格布局归栅格组件）：
卡片墙组合
组合：分组列表
data 通道的条目可带 group 字段（同组连续项归一段），列表自动为每组插入组头；group 值即组头文案，也支持用 groupLabel 字段自定义（缺省回落 group）。普通渲染模式下组头在列表滚动容器内吸顶（配 max-height 让列表体自身滚动）：滚动时当前组组头钉在容器顶部，下一组组头到达顶部时顶走上一个组头。虚拟滚动（height）下组头不吸顶——分组数据自动回退全量渲染，组头以普通块随内容滚动，超大分组数据不建议配 height 使用：
分组列表（data 通道 · 组头吸顶）
多组连续条目、容器限高滚动——向下滚动观察：组头吸顶、新组头到顶顶走上一组头。
分组标题也可以用 slot="header" 分段或多个 oas-list 组合（声明式场景，与数据通道分组正交）：
分组列表（header 分段）
行 hover 反馈（hoverable）
hoverable 让不可点行也有 hover 底色反馈（默认关闭——现状仅 clickable 行自带 hover）。适合大量只读行的浏览定位；选中行保持 primary 底色不被压盖。数据通道行、声明式行与虚拟滚动行三通道一致生效。
hoverable 不可点行 hover
鼠标移入任意行：整行出现浅色底（行本身不可点）。
拖拽排序（sortable）
sortable 开启行拖拽排序（HTML5 DnD）：把行拖到目标行上放置，列表派发 oas-reorder（detail: { from, to, item }——from / to 为行索引，item 为数据通道下的原数据项或声明式下的行元素），由宿主据事件重排数据（组件不自动移动行）。拖到自身不派发；虚拟滚动行不支持。支持数据通道与声明式两种行通道。
拖拽排序（sortable）
拖动任意行到另一行上松手试试。
API
oas-list
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
bordered | 是否显示整体边框 | boolean | — |
bottom-offset | 触底阈值（px）：距底部剩余距离 ≤ 该值即视为触底，默认 0 | string | 0 |
data | 数据通道（JSON 字符串；property data / dataItems 优先），有 data 走数据通道、无 data 回落声明式子项。条目对象可带 group（分组名，同组连续项归一段并自动插组头）与可选 groupLabel（组头文案自定义，缺省回落 group）；普通渲染模式组头吸顶（配 max-height 滚动容器），虚拟滚动下不吸顶 | unknown[] | — |
empty | 强制空态；无子项时自动空态 | boolean | — |
empty-text | 空态文案 | — | — |
height | 虚拟滚动视口高度（px，设置即启用虚拟模式，要求 data 通道；数据带 group 时自动回退全量渲染、组头不吸顶） | string | 320 |
hoverable | 不可点行的 hover 底色反馈（选中行排除） | boolean | — |
loading | 加载态，显示骨架占位 | boolean | — |
max-height | 列表体最大高度（px 或 CSS 长度），设置后列表体成为滚动容器（配合 oas-reach-bottom 滚动加载；分组组头在此容器内吸顶） | string | — |
row-height | 虚拟滚动行高（px，默认 64，要求数据行定高） | string | 64 |
size | 行密度：sm / md（默认）/ lg | string | — |
sortable | 行拖拽排序（数据通道 + 声明式） | boolean | — |
split | 是否显示条目分隔线 | boolean | — |
stripe | 斑马纹：视觉偶数行铺浅色底 | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-click | 条目点击（数据/虚拟行），detail 带 |
oas-item-render | 数据通道每行渲染后派发，detail 带 |
oas-reach-bottom | 滚动触底（进入触底区派发一次，滚离后重新武装），detail 带 |
oas-reorder | 行拖放重排时派发，detail: { from, to, item } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 默认（oas-list-item 声明式子项） |
empty | 自定义空态，完全替换内置图标+文案 |
footer | 列表尾区域（统计信息、操作位） |
header | 列表头区域（分组标题、操作位） |
load-more | 列表尾「加载更多」区（按钮/加载中占位） |
template[slot="item"] | 数据通道每项克隆的静态骨架，配合 oas-item-render 绑定数据 |
oas-list-item
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
avatar | 头像 URL 快捷通道（渲染首部圆形头像；slot="avatar" 优先） | string | — |
clickable | 整行可点：hover 反馈、可聚焦（Enter/Space 触发）、点击派发 oas-click | — | — |
description | 描述文本快捷通道（slot="description" 优先，可放富内容） | string | — |
href | 整行链接：行内渲染覆盖整行的 <a>（可访问名称取行标题），点击任意空白处即导航；链接行不再派发 oas-click（与 clickable 语义分离） | string | — |
rel | 链接 rel（配合 href）；显式设置时不自动补默认值 | string | — |
selected | 选中行高亮（视觉态，选中态由宿主维护） | — | — |
size | 行密度：sm / md（默认）/ lg（oas-list 下发的 data-size 优先于本属性之外的默认） | — | — |
target | 链接打开方式（配合 href）；设置后自动补 rel="noopener noreferrer"，显式 rel 不覆盖 | string | — |
title | 条目标题（渲染进可见标题区；读取后即从宿主移除，不残留原生悬浮提示；清空传空串）；富内容用 slot="title" | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-click | 行点击，detail 带 { index, item }（数据行由 oas-list 注入上下文） |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 默认内容：渲染在描述区（未提供 description 插槽时作为其兜底） |
avatar | 头像富内容（oas-avatar 或任意内容），优先于 avatar 属性 |
description | 描述区（不提供时回退默认插槽） |
extra | 条目右侧扩展区 |
icon | 前置图标位（如 oas-icon），尺寸跟随内容；无内容时隐藏 |
image | 方形缩略图位（尺寸与头像同档联动 sm 24 / md 32 / lg 40，小圆角裁剪填充）；无内容时隐藏 |
title | 标题富内容插槽，有内容时覆盖 title 属性文案 |