列表
List
UI 组件也叫：List View、列表视图、条目列表、清单
一句话：把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。
详细解释
列表把多条内容竖着排成一列，每条占一行或几行。常见结构是左边一个图标或头像，中间标题和一行说明，右边时间、箭头或操作按钮。消息、通知、评论、文件列表、设置项都属于这一类。
列表和表格的区别在于字段数量和用途：列表每条只露出少量关键信息，重在从上到下逐条浏览、点进去看详情；表格按列对齐多个字段，重在横向比较和批量处理。列表和卡片的区别在于密度：列表紧凑，一屏能看很多条；卡片更占空间，适合以图片为主的内容。
条目较多时，列表常配合分页、无限滚动或「加载更多」按钮使用。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
做一个消息通知列表，每条高 64px：左侧 40px 圆形头像，中间上行是加粗标题，下行是灰色单行摘要，超出部分省略；右侧显示相对时间，未读消息标题前有一个小圆点。条目间用浅灰细线分隔，悬停背景变浅灰，点击进入详情，底部有「加载更多」按钮。
结构与适用场景
结构描述
由纵向排列的列表项组成，每项通常包含前置图标或头像、标题、说明文字，以及右侧的附加信息或操作。
适用场景
- 每条内容只有标题加一两行说明、用户主要从上到下逐条浏览时，例如消息、通知、评论
- 条目数量较多，需要在一屏里紧凑地看到尽量多条时
- 每条点进去能查看详情，列表本身只需露出关键信息时
- 在手机等窄屏页面上展示多条记录时
不适用场景
- 条目同质、字段多、需要逐列比较或排序时，应该用表格
- 每条内容以封面图、商品图为主、需要视觉浏览时，应该用卡片
- 只有一条记录、需要展示它的全部字段时，应该用描述列表
常见坏用法
- 每条有七八个字段却挤在一行里用空格隔开，其实应该做成表格
- 列表项之间没有分隔线也没有间距，文字连成一片，分不清哪条是哪条
- 把每个列表项都做成带大阴影的卡片，浪费空间，一屏只能看两三条
识别特征
- 从上到下排列的多行条目，宽度一致
- 每行左侧常有图标或头像，右侧有时间或箭头
- 条目之间有细分隔线或统一的间距
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
ul:not(nav ul, header ul, footer ul, article ul, li ul, [role]):has(> li + li + li)[role="list"].list-group.ant-list[class*="MuiList-root"]:not([role="menu"]).arco-list.t-list.n-list