← 返回多端学习对照表

通用Web端常用组件

Web 端通用组件库，按分类组织，共 0 个组件档案。

说明：表格列较多，窄屏可横向滚动；「结构解剖」红线拆解图待后续以配图补充，此处先给出核心构成与间距标注。

一、 通用与布局类 (General & Layout)

Web 端组件库的骨架层，定义页面的基础空间、排版与区域划分，几乎所有中后台系统、官网与表单都依赖这些原子组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
按钮
Button
/ˈbʌtn/
 触发操作的控件，按层级分为主要(primary)、次要(default)、虚线(dashed)、危险(danger)与文字链接(link)。
  • 页面出现 5+ 同级主按钮互相抢视觉。
  • 把“取消/关闭”做成主按钮（主按钮应留给正向主操作）。
  • 文案用名词而非动宾（“提交”好、“表单”差）。
  • 禁用态无解释（应 tooltip 说明为何不可点）。
  • 表单提交、对话框确认、工具栏操作。
  • 卡片内快捷动作、分页/批量操作入口。
  • 核心构成：容器(圆角/描边) + 标签文字(可选图标左/右) + 加载圈。
间距：内边距高度 32/36/40 三档；图标与文字间距 8px。红线拆解图待补。
 Default、Hover、Active、Disabled、Loading。
  • 主/次/虚线/文字/危险/链接
  • 尺寸大/中/小
  • 图标按钮(纯图标)
  • 高度：32/36/40px。
  • 圆角：6–8px。
  • 主按钮：填充品牌色；次按钮描边；危险红。
  • Hover：微调底色/描边。
  • Active：下沉 1px 或加深。
  • Loading：spinner 并禁点；点击反馈 100–150ms。
  • role="button"；Enter/Space 触发。
  • disabled 用 aria-disabled + tabindex=-1。
  • 对比度 AA；:focus-visible 焦点环。
2
图标
Icon
/ˈaɪkɒn/
 用图形符号表达含义的视觉元素，替代或辅助文字，提升扫读效率与跨语言可读性。
  • 同产品混用两套图标库(线性+面性)风格不一。
  • 图标隐喻与文字不符(用错符号)。
  • 可点击图标 ≤12px 看不清、热区不足。
  • 彩色滥用破坏层级与可读性。
  • 导航项、按钮前缀、状态指示。
  • 列表项前缀、空状态插画、徽标(badge)。
  • 核心构成：视图框(24×24) + 路径(path) + 描边/填充；尺寸级 12/16/20/24px。
间距：安全边距 2px；与文字基线对齐。红线拆解图待补。
 Default、Hover(换色)、Active、Disabled、Selected。
  • 线性(描边)/面性(填充)/双色/彩色
  • 带徽标图标
  • 网格：24×24 或 16×16。
  • 线宽：1.5–2px。
  • 热区：可点击 ≥24×24px。
  • Hover：变色/微旋转(刷新图标)。
  • 统一旋转/弹跳 200ms；可点击 cursor:pointer。
  • 装饰性图标 aria-hidden="true"。
  • 功能图标配 title/aria-label。
  • 用 SVG sprite/iconfont，避免纯图无法随主题变色。
3
排版/文字
Typography
/taɪˈpɒɡrəfi/
 规定字号、行高、字重、字色的层级系统，组织信息的视觉秩序。
  • 全站只用 1–2 种字号(信息无层级)。
  • 正文字号过小(移动 <14、桌面 <12)拥挤。
  • 行高 <1.5 长篇难读；用纯黑(#000)正文刺眼。
  • 标题(h1–h4)、正文、辅助说明。
  • 数据数字、代码块等差异化展示。
  • 核心构成：字体族 + 字号阶梯(12/14/16/20/24/30/38) + 行高(标题 1.3、正文 1.6) + 字重(400/500/600)。
间距：段间距 ≥ 行高。红线拆解图待补。
 Normal、Emphasis(加粗/高亮)、Disabled、Link(可点)。
  • 标题/正文/说明/数据/代码
  • 中英文混排行高处理
  • 基础字号：14(桌面)/16(移动)px。
  • 行高：正文 1.5–1.7。
  • 字色：深灰(#1f2329)非纯黑。
  • 链接 Hover 下划线/变色；选中文字反色。
  • 极少动画，避免文字抖动。
  • 语义化 h1–h6。
  • 正文对比度 AA(4.5:1)。
  • 勿仅靠颜色传意(加文字/图标)。
4
栅格
Grid
/ɡrɪd/
 将页面横向等分为 24 列(Row/Col)，用列数组合实现响应式布局。
  • 内容硬写固定 px 宽度(不随屏自适应)。
  • 栅格嵌套 >2 层(复杂难维护)。
  • gutter(列间距)为 0 内容贴死。
  • 移动端仍用 24 列不外缩为单列。
  • 中后台表单、卡片列表。
  • 仪表盘区块划分、官网多栏排版。
  • 核心构成：容器(container，最大宽) + 行(Row，flex，负 margin gutter) + 列(Col，span 1–24，padding gutter) + 偏移(offset)；断点 xs/sm/md/lg/xl。
间距：gutter 16/24px。红线拆解图待补。
 默认、响应式折叠(屏窄合并列)。
  • 固定/流式栅格
  • 等分/偏移/排序/ flex 栅格
  • 总列：24。
  • gutter：16/24px。
  • 容器：1200/1440px。
  • 断点：sm≥576/md≥768/lg≥992/xl≥1200。
  • 窗口缩放平滑重排(col 变化可加 200ms)。
  • 无强动效。
  • 栅格仅布局，语义靠内部元素。
  • 勿用 display:none 隐藏重要内容(用视觉隐藏)。
5
布局
Layout
/ˈleɪaʊt/
 组合 Header(顶栏)、Sider(侧栏)、Content(内容)、Footer(底栏)的区域骨架。
  • Sider 与 Header 都固定且高度重叠(滚动冲突)。
  • Content 无最大宽(超宽屏每行 >80 字)。
  • 移动端仍显示固定宽 Sider(应抽屉化)。
  • Footer 内容过多挤占首屏。
  • 中后台系统框架、文档站。
  • 官网主页、管理后台。
  • 核心构成：Header(顶：logo/导航/用户) + Sider(左：菜单树，可折叠) + Content(中：主内容，可滚) + Footer(底：版权/链接)；Sider 与 Content 并排，Header 跨顶。
间距：Sider 收起 64–80px。红线拆解图待补。
 Sider 展开/收起；Header 固定/随滚；Content 加载中。
  • 顶部导航型/左侧导航型
  • 混合双 Sider/抽屉式(移动)
  • Header：48–64px。
  • Sider：200–256px。
  • Content：内边距 16–24。
  • Sider 折叠 200ms 缓动；Header 吸顶 shadow。
  • Content 路由切换淡入。
  • 语义标签 header/nav/main/aside/footer。
  • Sider 折叠保留可聚焦；提供 skip-link 到 main。
6
间距 Space / Flex
/speɪs/ /fleks/
 用 Space(等距排列)或 Flex(弹性盒)控制元素之间的间隙与对齐。
  • 用 margin 硬编码每个元素间距(易乱)。
  • 间距值不取自规范(出现 7/13px 怪值)。
  • Flex 滥用致子项意外拉伸变形。
  • 用 <br> 控制间距(语义错)。
  • 按钮组横向间隔、表单 label 与输入。
  • 卡片列表 gap、工具栏图标排列。
  • 核心构成：容器(Space/Flex) + 方向(row/column) + 间隔(size:8/16/24) + 对齐(center/start/end) + 换行(wrap)。
间距：阶梯 4/8/12/16/24/32。红线拆解图待补。
 默认、wrap(超宽换行)。
  • 水平/垂直；紧凑/宽松
  • 带分割线(split)；Flex justify/align 多值
  • 间距阶梯：4/8/12/16/24/32px。
  • 默认 gap：8/16px。
  • Flex gap 优先于 margin。
  • 几乎无(布局类)；响应式 gap 随断点调整。
  • 间距仅视觉，勿用于隐藏关联(读屏靠结构)。
  • Flex order 不改 DOM 顺序(键盘/读屏仍按 DOM)。
7
分割线
Divider
/dɪˈvaɪdər/
 水平或垂直分隔线，用于分隔内容区块或分组列表项。
  • 满屏都是分割线(视觉噪音)。
  • 用分割线代替留白(间距本可分隔)。
  • 分割线与边框线重复(双重线)。
  • 带文字分割线文字未居中。
  • 卡片内区块分隔、列表项分组。
  • 表单段落、登录框“其他登录方式”分隔。
  • 核心构成：线(1px，#e8eaee) + 可选中间文字/图标；方向 horizontal(横)/vertical(竖，行内分隔)。
间距：上下 16–24px。红线拆解图待补。
 Default、WithText(带文字)、Dashed(虚线)。
  • 水平/垂直；实线/虚线
  • 带文字(居中)
  • 线宽：1px；色 var(--line)。
  • 文字型：上下留白 16px。
  • 竖线：高与文字齐或 0.9em。
  • 无(纯静态)；随主题变色。
  • 装饰性用 <hr> 或 role="presentation"。
  • 带文字 divider 文字仍须可读。

二、 导航与层级类 (Navigation)

帮助用户在复杂的多层级网页中不迷失方向：从全局顶栏到局部定位、从流程引导到长页快速返回，构成一套完整的"我在哪 / 怎么去"导航体系。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
8
顶部导航 / 下拉菜单
Menu / Dropdown
/ˈmɛnjuː/ /ˈdrɒpdaʊn/
 网站或应用的顶层导航栏，承载全局入口（如"首页 / 产品 / 文档"）；下拉菜单是在悬停或点击时展开的二级列表（如"文件、编辑、视图"）。
  • 导航项 >8–10 个未分组(扫读困难)。
  • 悬停即展开且延迟消失(易误触)。
  • 当前页在导航中无高亮(用户不知在哪)。
  • 下拉面板超出视口被裁切。
  • 多栏目官网 / 中后台顶部全局导航。
  • 工具栏的"文件 / 编辑"等命令菜单。
  • 核心构成：导航条(背景 / logo / 菜单项 / 用户区) + 菜单项(文字 / 图标，激活态) + 下拉触发器(箭头) + 浮层面板(分组 / 分隔线 / 禁用项) + 遮罩(可选)。
间距：菜单项间距 16–24px；面板内项高 36–40px。红线拆解图待补。
 Default、Hover(项高亮)、Open(展开)、Disabled、Active(当前页)。
  • 横向 / 纵向菜单
  • 点击展开 / 悬停展开
  • 带图标 / 纯文字；级联子菜单(cascader)
  • 导航高：48–64px。
  • 面板：圆角 8px，项高 36–40。
  • 箭头：12px；z-index 高于内容。
  • Hover：项变色。
  • 展开：150ms 淡入 + 位移。
  • 点击外部关闭；键盘上下键导航。
  • role="menubar/menu/menuitem"。
  • 方向键移动、Esc 关闭、aria-expanded。
  • 焦点管理：展开时聚焦首项的焦点环。
9
面包屑
Breadcrumb
/ˈbredkrʌmb/
 展示用户当前页在层级路径中的位置（首页 > 列表 > 详情），提供上溯入口，降低迷路感。
  • 把面包屑当主全局导航(应只在层级深时用)。
  • 路径项文字过长截断无提示。
  • 末级(当前页)仍可点击(应不可点 / 纯文字)。
  • 分隔符全局不统一(混用 / 、>)。
  • 多级分类电商、文档站。
  • 中后台详情页（列表 → 详情）。
  • 核心构成：根(首页 / icon) + 中间层级(链接) + 分隔符(> / chevron) + 当前页(不可点文字)。
间距：项间距 8–12px；分隔符色浅(#9aa1ab)。红线拆解图待补。
 链接态、当前页(不可点)、省略(超长折叠为 …)。
  • 带图标根 / 纯文字
  • 下拉省略中间项
  • 移动端极简(仅"返回上一级")
  • 字号：12–14px。
  • 分隔符：色 #9aa1ab。
  • 项：hover 下划线。
  • 链接 Hover 下划线 / 变色。
  • 几乎无动效。
  • nav aria-label="breadcrumb"。
  • 语义 ol/li；当前页 aria-current="page"。
  • 分隔符 aria-hidden。
10
步骤条
Steps
/stɛps/
 横向或纵向展示任务流程的阶段（填信息 → 确认 → 完成），标明当前进度与已完成步骤。
  • 步骤 >5 个未合并(认知负担重)。
  • 已完成 / 当前 / 未来态视觉无区分。
  • 失败步骤无红色标记(只显示进行中)。
  • 步骤标题过长换行错位。
  • 注册引导、下单结算。
  • 表单多步提交、向导式流程。
  • 核心构成：节点(圆 / 序号 / 图标) + 连接线(完成段高亮) + 标题 + 描述(可选)。
间距：节点 24–32px；线宽 2px。红线拆解图待补。
 Wait(未达)、Process(当前)、Finish(完成)、Error(失败)。
  • 横向 / 纵向
  • 数字 / 图标节点；点状(dot) / 箭头形
  • 带描述 / 精简
  • 节点：24–32px，圆角。
  • 完成线：品牌色。
  • 标题：14px。
  • 切换步骤 200ms 高亮过渡。
  • 错误态抖动 / 红色提示。
  • 语义 ol/li；当前步 aria-current="step"。
  • 状态用"文字 + 颜色"(勿仅靠色)。
  • 已完成步可点击回跳。
11
标签页
Tabs
/tæbz/
 在同一页面区域内用顶部标签切换不同视图模块，避免页面跳转，内容互斥展示。
  • 用 Tab 隐藏重要信息却无提示(SEO / 可访问性损失)。
  • 标签 >5 个未滚动态(挤压)。
  • 切换后内容区高度突跳(无最小高)。
  • 激活指示缺失(标签与内容关系不清)。
  • 详情页多区块(基础 / 高级)。
  • 设置分组、仪表盘视图切换。
  • 核心构成：标签头(row，含标签项 + 激活下划线 / 填充) + 内容面板(当前显示，其余隐藏)。
间距：标签间距 24–32px；下划线 2px。红线拆解图待补。
 Default、Active(高亮 / 下划线)、Disabled、Hover。
  • 下划线型 / 卡片型
  • 可滚动；带图标 / 带徽标数
  • editable 可增删标签
  • 标签高：40–48px。
  • 激活色：brand；下划线 2–3px。
  • 内容区：最小高避免跳动。
  • 切换淡入 150–200ms。
  • 激活指示滑移；键盘左右键切换。
  • role="tablist/tab/tabpanel"。
  • aria-selected；箭头键切换。
  • 面板 aria-labelledby 关联。
12
分页器
Pagination
/ˌpædʒɪˈneɪʃən/
 将长列表或表格数据分块，提供页码跳转与上一页 / 下一页，控制单屏信息量。
  • 一次性展示全部数据(超长滚动 / 卡顿)。
  • 无总页数 / 总数提示(不知在哪)。
  • 页码过多无省略(…)折叠。
  • 跳页输入无校验(超界)。
  • 表格、搜索结果、评论列表。
  • 商品列表、日志流等长数据。
  • 核心构成：上一页 / 下一页(箭头) + 页码(当前高亮) + 省略号(…) + 总数("共 N 条") + 每页条数选择(可选)。
间距：页码间距 4–8px；项方 28–32px。红线拆解图待补。
 Default、Active(当前页)、Disabled(首 / 末页边界)、Hover。
  • 简约(仅上下页) / 完整页码
  • 带跳页输入；带每页条数
  • 移动端极简(load more)
  • 页码方：28–32px。
  • 当前页：填充 brand。
  • 省略：…；总数靠右。
  • 点击翻页 150ms 高亮。
  • loading 时禁用；键盘可聚焦页码。
  • nav aria-label="pagination"。
  • 按钮非链接；当前页 aria-current="page"。
  • 边界态 disabled。
13
锚点
Anchor
/ˈæŋkər/
 长页面右侧或左侧的悬浮导航，列出各区块标题，点击平滑滚动定位，并随滚动高亮当前区块。
  • 锚点列表与标题不同步(增删区块忘更新)。
  • 点击滚动被固定头遮挡(无 scroll-margin)。
  • 高亮当前项靠手动(未用滚动监听)。
  • 移动端仍显示固定锚点条(挤占)。
  • 文档站、产品介绍长页。
  • 帮助中心 FAQ、规格说明。
  • 核心构成：容器(侧栏，sticky) + 链接项(区块标题) + 激活指示(左竖条 / 高亮) + 滚动监听。
间距：项高 32–36px；竖条 2–3px。红线拆解图待补。
 Default、Active(当前区块高亮)、Hover。
  • 左侧 / 右侧；带缩进二级
  • 可折叠；与目录(TOC)结合
  • 字号：13–14px。
  • 激活竖条：brand 2–3px。
  • sticky：距顶 24–64px。
  • 点击平滑滚动(scroll-behavior:smooth)。
  • 滚动时 active 跟随(IntersectionObserver) 200ms。
  • 链接 href="#id"；目标有 id。
  • 用 scroll-margin-top 避开固定头。
  • aria-current 可选。
14
回到顶部
BackTop
/bæk tɒp/
 长页面右下角的悬浮按钮，点击平滑滚回页面顶部，省去手动滚动。
  • 短页面(一屏内)也常驻显示(干扰)。
  • 按钮遮挡关键操作(如悬浮客服 / 提交)。
  • 无显隐阈值(始终显示)。
  • 移动端按钮过大(易误触)。
  • 文档、列表、博客等长滚动页。
  • 含固定底栏的内容页可放左上 / 侧边。
  • 核心构成：悬浮按钮(圆 / 方，固定定位) + 上箭头图标 + 显隐逻辑(滚动阈值)。
间距：距底边 24–40px；距右 24–40px。红线拆解图待补。
 Hidden(未达阈值)、Show(显示)、Hover、Active(点击微缩)。
  • 圆形 / 方形；带文字"顶部"
  • 进度环(显示滚动比例)；仅图标
  • 尺寸：40–48px。
  • 底色：brand；带阴影。
  • 阈值：400–600px 显隐。
  • 滚动 > 阈值淡入；点击平滑滚回顶部。
  • Active 缩放 0.94；尊重 prefers-reduced-motion。
  • button aria-label="返回顶部"。
  • 固定定位不挡键盘焦点、可聚焦。
  • 平滑滚动尊重系统减弱动效设置。

三、 数据录入类 (Data Entry)

Web 端大量存在复杂表单，这是组件最密集的区域：从最基础的文本框到多选树、穿梭分配、自动补全，覆盖几乎所有"把数据写进系统"的场景。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
15
输入框
Input
/ˈɪnpʊt/
 最基础的单行文本录入控件，支持纯文本、前后缀(¥ / 搜索图标)、密码掩码等多种形态。
  • 用 placeholder 代替 label(读屏缺失)。
  • 无错误 / 成功态视觉反馈(只红字)。
  • 长文本不换行却限制宽度(截断无提示)。
  • 禁用态无说明为何不可填。
  • 登录、搜索、各类表单字段。
  • 带前后缀的金额 / 单位录入。
  • 核心构成：容器(边框 / 圆角 / 底色) + label(上 / 左) + 输入区(光标 / 文本) + 前后缀(图标 / 文字) + 清除按钮(可选) + 状态环。
间距：内边距 8–12px；高度 32–40。红线拆解图待补。
 Default、Focus、Disabled、Error、Success、Hover。
  • 基础 / 带前缀 / 带后缀
  • 带搜索 / 密码框 / 带清除
  • 高度：32/36/40；圆角 6–8。
  • 边框：1px；聚焦环 2px brand。
  • Focus 边框变色 + 环；输入实时。
  • 清除按钮 hover 显。
  • label 关联 input；aria-invalid。
  • 占位符非 label；聚焦可见环。
16
多行文本
Textarea
/ˈtɛkstɛərɪə/
 支持多行、可随内容自动缩放的长文本输入，用于备注、描述等。
  • 固定 2 行却塞长文(难用)。
  • 无最大高度(无限撑高页面)。
  • 禁 resize 又无自动高(长文看不到底)。
  • 未做字数统计(用户不知上限)。
  • 评论、反馈、地址、备注。
  • 自述、文章草稿。
  • 核心构成：容器(同上) + 多行文本区 + 字数计数(右下，可选) + resize 角标(可选)。
间距：同 Input；行高 1.5。红线拆解图待补。
 Default、Focus、Disabled、Error。
  • 固定高 / 自适应高(auto-size)
  • 带计数 / 禁用拉伸
  • 最小高：3 行。
  • 最大高：200–400 可滚。
  • 字数：上限提示。
  • 自动扩高平滑；聚焦环。
  • 接近上限文字变色。
  • aria-label；滚动键盘可达。
  • 计数 aria-live。
17
数字输入框
InputNumber
/ˈɪnpʊt ˈnʌmbər/
 带步进器(上 / 下按钮)的数字录入，限制整数 / 小数 / 取值范围。
  • 步进按钮过小难点(尤其移动)。
  • 允许超 min/max 不拦截。
  • 无千分位 / 精度(金额混乱)。
  • 键盘上下键未绑定步进。
  • 数量、金额、年龄、排序值。
  • 带单位的数值录入。
  • 核心构成：输入区 + 右侧步进器(上 / 下箭头) + 范围 / 精度约束。
间距：步进器宽 22–28；箭头 8px。红线拆解图待补。
 Default、Focus、Disabled、Error(超界)。
  • 带前缀单位 / 带精度
  • 禁用步进纯输入
  • 步进：step；min/max。
  • 精度：decimals。
  • 宽：90–160。
  • 点击 / 方向键步进；超界回弹 / 禁用。
  • 长按连增。
  • role="spinbutton"；aria-valuenow/min/max。
  • 键盘上下步进。
18
下拉选择器
Select
/sɪˈlɛkt/
 点击展开浮层从选项列表中单选或多选，支持搜索过滤。
  • 选项 >20 不提供搜索(翻找累)。
  • 单选却用多选样式(语义乱)。
  • 选中后浮层不关闭(多选除外)。
  • 选项文字超长无省略(撑破面板)。
  • 城市、分类、状态筛选。
  • 枚举值选择。
  • 核心构成：选择框(占位 / 选中值 + 箭头) + 浮层面板(搜索框 + 选项组 + 选中态) + 遮罩。
间距：项高 36；面板圆角 8。红线拆解图待补。
 Default、Open、Disabled、Error、Selected、Hover。
  • 单选 / 多选；带搜索
  • 分组；带全选(多选)
  • 面板：max-h 240–320 可滚。
  • 项高：36；多选标签化。
  • 展开 150ms 淡入；键盘上下选、Enter 确认。
  • 多选即时标签。
  • listbox/option；aria-expanded。
  • 方向键；多选 aria 提示数。
19
级联选择
Cascader
/kæˈskeɪdər/
 多层级联动选择(如省 → 市 → 区)，逐级展开子面板。
  • 三级一起平铺(层级关系不清)。
  • 选末级才高亮父级(反向)。
  • 无"任意一级可选"配置(强制到底)。
  • 面板溢出视口未定位。
  • 省市区、分类树。
  • 组织架构层级。
  • 核心构成：选择框 + 多级浮层面板(每级一列，右箭头进下一级) + 选中路径回显。
间距：每列宽 160–200；项高 36。红线拆解图待补。
 Default、Open、Hover(列)、Selected(路径)、Disabled。
  • 单列逐级 / 面板内 Tab
  • 任意级可选；多选
  • 列宽：160–200；级深不限。
  • 面板：圆角 8。
  • 悬停进下级 120ms；键盘左右层级。
  • 展开淡入。
  • 每级 listbox；aria 路径。
  • 键盘层级切换。
20
树选择
TreeSelect
/triː sɪˈlɛkt/
 把树形控件嵌入下拉，支持展开节点 + 勾选多选的层级选择。
  • 树过深默认全展开(信息爆炸)。
  • 父子勾选联动不清晰(选父是否含子)。
  • 搜索不定位到节点(只过滤)。
  • 下拉面板无最大高(撑爆)。
  • 部门 / 权限分配。
  • 类目多选。
  • 核心构成：选择框 + 浮层(树:展开箭头 + 节点 + 复选框 + 搜索) + 选中回显(标签)。
间距：节点高 32–36；缩进 16。红线拆解图待补。
 Default、Open、Expanded(节点)、Checked/Indeterminate、Disabled。
  • 单选树 / 多选树
  • 父子联动开关；带搜索
  • 节点高：32–36；缩进 16。
  • 面板：max-h 320。
  • 展开节点 150ms；勾选即时标签。
  • 键盘树导航。
  • tree/treeitem；aria-expanded/checked。
  • 键盘上下 + 左右。
21
复选框
Checkbox
/ˈtʃɛkbɒks/
 多选控件，一组中可独立勾选 0–N 项，值互不影响。
  • 用单选组实现"多选"语义(错)。
  • 整组无标题(不知选什么)。
  • 勾选框 <16px 热区不足。
  • 禁用项与正常项无区分。
  • 兴趣标签、协议同意。
  • 批量勾选。
  • 核心构成：方框(1px 描边 / 选中填充) + 对勾(白) + 标签文字(右)。
间距：框 16–18；标签间距 8。红线拆解图待补。
 Unchecked、Checked、Indeterminate(半选)、Disabled、Hover。
  • 基础 / 带描述文字
  • 按钮化(选中填充)
  • 框：16–18px；圆角 3–4。
  • 热区：≥24。
  • 选中填充 + 对勾 120ms。
  • Hover 边框变色。
  • input type=checkbox；label 关联。
  • indeterminate 用 JS；:focus-visible。
22
单选框
Radio
/ˈreɪdioʊ/
 互斥单选控件，一组中仅能选 1 项，适合少选项。
  • 选项 >5 仍用单选(应换 Select)。
  • 默认无选中且无"其他"(强迫选)。
  • 圈与标签点击区域分离(圈不可点)。
  • 用复选框做单选(语义错)。
  • 性别、支付方式、优先级。
  • 互斥设置项。
  • 核心构成：圆圈(1px 描边 / 内点) + 标签文字(右)。
间距：圈 16–20；标签间距 8。红线拆解图待补。
 Unchecked、Checked、Disabled、Hover。
  • 基础 / 按钮化(卡片单选)
  • 横向 / 纵向
  • 圈：16–20px；内点 6–8。
  • 热区：≥24。
  • 选中内点弹出 120ms。
  • Hover 边框变色。
  • input type=radio name 组；label。
  • 键盘上下 / 方向键切换。
23
开关
Switch
/swɪtʃ/
 表示二元开 / 关状态，立即生效，无需提交。
  • 用开关代替提交型操作(应按钮)。
  • 开 / 关无色彩 / 位置区分(只文字)。
  • 状态变更无即时反馈(延迟)。
  • 关态灰、开态品牌色对比不足。
  • 通知开关、深色模式。
  • 功能启用 / 停用。
  • 核心构成：轨道(圆角胶囊) + 旋钮(圆，滑动) + 可选两侧文字(开 / 关)。
间距：轨道 40–52×20–28；旋钮 16–22。红线拆解图待补。
 Off、On、Disabled。
  • 带文字 / 纯图标
  • 小 / 中尺寸
  • 轨道高：20–28；旋钮 16–22。
  • 滑程：16–24。
  • 切换 200ms 滑动 + 变色。
  • Active 微缩。
  • role="switch"；aria-checked。
  • 键盘 Space 切换；:focus-visible。
24
滑动条
Slider
/ˈslaɪdər/
 通过拖拽手柄在连续区间内选值，支持单点 / 范围。
  • 手柄 <16px 难拖(尤其触屏)。
  • 无刻度 / 数值回显(不知当前值)。
  • 范围模式两手柄重叠难分。
  • 步长太小(拖不准)。
  • 音量、价格区间、亮度。
  • 筛选阈值。
  • 核心构成：轨道(底 / 已选段高亮) + 手柄(圆) + 刻度(可选) + 数值气泡(拖拽时)。
间距：轨道高 4–6；手柄 16–20。红线拆解图待补。
 Default、Dragging、Disabled、Hover。
  • 单值 / 范围双柄
  • 带刻度 / 带输入框；垂直
  • 轨道高：4–6；手柄 16–20。
  • step：可配。
  • 拖拽实时跟手；气泡淡入。
  • 键盘方向键 ±step。
  • role="slider"；aria-valuenow/min/max。
  • 方向键；focus 环。
25
日期 / 时间选择器
DatePicker / TimePicker
/deɪt ˈpɪkər/ /taɪm ˈpɪkər/
 弹出日历或时钟面板选择日期 / 时间，支持单日与范围。
  • 仅文本框无日历(易格式错)。
  • 范围选择无"起 / 止"高亮联动。
  • 禁用过去日期却不提示原因。
  • 面板溢出视口被裁。
  • 生日、预约、报表时间区间。
  • 日程、截止时间。
  • 核心构成：输入触发框(日期文字 + 图标) + 浮层(日历:头部切换 + 星期 + 日期网格 / 时间:滚动列) + 范围高亮。
间距：单元格 32–36；面板圆角 8。红线拆解图待补。
 Default、Open、Selected、Range(起/止/区间)、Disabled(灰)。
  • 日期 / 日期范围 / 时间
  • 日期时间 / 月份 / 年份
  • 单元格：32–36；面板宽 280–320。
  • 周起始：可配。
  • 展开淡入；hover 日期高亮。
  • 范围滑动联动。
  • 按钮触发；grid 语义日历。
  • aria 当前 / 选中；键盘导航日。
26
评分
Rate
/reɪt/
 星级(或自定义图标)打分控件，支持半星。
  • 图标过小(<16)点不准。
  • 无半星却需精确(强迫整星)。
  • 只读评分仍可交互(应 disabled)。
  • 无 aria 值(读屏只读"图")。
  • 商品评价、满意度。
  • 内容打分。
  • 核心构成：图标序列(星 / 心) + 激活态(品牌色) + hover 预览 + 分数文字(可选)。
间距：图标间距 4–8；尺寸 20–28。红线拆解图待补。
 Default、Hover(预览)、Selected、Disabled(只读)。
  • 星 / 心 / 自定义
  • 半星；带文字分数
  • 图标：20–28；数量默认 5。
  • 精度：半星。
  • hover 实时预览；点击定分 150ms。
  • 键盘方向键。
  • role="slider" 或 radiogroup。
  • aria-valuenow；键盘可调。
27
上传
Upload
/ˈʌpləʊd/
 点击或拖拽文件上传，展示文件列表、进度与状态。
  • 无类型 / 大小限制提示(传了才报错)。
  • 拖拽区无视觉反馈(不知可拖)。
  • 列表无进度 / 失败重试(黑盒)。
  • 多文件无并发 / 顺序说明。
  • 头像、附件、图片批量。
  • 文档 / 资料提交。
  • 核心构成：触发区(虚线框 + 图标 + 文案) + 文件列表(图标 + 名 + 大小 + 进度条 / 状态) + 错误重试。
间距：触发区内边距 16–24；列表项高 48。红线拆解图待补。
 Idle、Uploading(进度)、Success、Error(重试)、Disabled。
  • 点击 / 拖拽 / 头像裁切
  • 图片墙
  • 限制：类型 / 大小。
  • 列表项高：48；进度条 4–6。
  • 拖拽区高亮；进度条平滑。
  • 成功勾 / 失败红。
  • input type=file；拖拽 keyboard 入口。
  • 进度 aria-valuenow；错误文本。
28
穿梭框
Transfer
/trænsˈfɜːr/
 左右两栏列表，将选项从数据源移到目标，适合大量数据分配。
  • 列表无搜索(上千项翻不动)。
  • 移动后未保留原位置(回退难)。
  • 无全选 / 清空(逐项移累)。
  • 两栏无标题(不知哪边是目标)。
  • 角色授权、标签归类。
  • 成员分配。
  • 核心构成：左源列表(搜索 + 多选) + 中间移动按钮(> / <) + 右目标列表 + 计数。
间距：列宽 200–240；项高 36。红线拆解图待补。
 Default、Selected(项)、Moved、Disabled(空)。
  • 带搜索 / 带分页
  • 树形穿梭
  • 列宽：200–240；项高 36。
  • 按钮：中。
  • 移动 150ms；键盘 shift 多选。
  • 计数实时。
  • 两 listbox；移动按钮。
  • aria 计数；键盘操作。
29
表单容器
Form
/fɔːrm/
 统一管理字段布局、校验时机、对齐方式与错误提示的容器。
  • label 与输入不在同一视觉列(对不齐)。
  • 错误只在提交后一次性(应先校验)。
  • 必填项无标记(用户不知)。
  • 长表单无分段 / 分组(压迫感)。
  • 注册、设置、任何多字段录入。
  • 分步向导的每一步。
  • 核心构成：Form 容器 + Field(标签 + 控件 + 帮助 / 错误) + 布局(上下 / 左右) + 提交 / 重置。
间距：行间距 16–24；label 宽 80–120。红线拆解图待补。
 Default、Validating、Error(红框 + 文案)、Success。
  • 垂直 / 水平 / 行内
  • 带分组卡片
  • label 宽：80–120(水平)。
  • 错误色：红；必填星。
  • 失焦 / 输入即时校验；错误淡入。
  • 提交 loading。
  • label 关联；aria-invalid + aria-describedby。
  • 错误 role="alert"；分组 fieldset/legend。
30
自动补全
AutoComplete
/ɔːtoʊ kəmˈpliːt/
 输入时实时联想匹配建议，下拉供快速选择，常包裹 Input。
  • 无最小字符触发(空输入全量)。
  • 建议项无高亮匹配(难定位)。
  • 选中后不清空 / 回显错(体验断)。
  • 无防抖(每键请求炸)。
  • 搜索联想、邮箱后缀。
  • 城市补全。
  • 核心构成：输入触发框 + 建议浮层(匹配项列表 + 高亮词) + 加载态。
间距：项高 36；面板圆角 8。红线拆解图待补。
 Default、Open(建议)、Loading、Selected、Empty(无结果)。
  • 本地 / 远程；带历史
  • 严格模式(仅选建议)
  • 触发字符：≥1；防抖 200–300ms。
  • 面板：max-h 240。
  • 输入下拉淡入；↑↓ 选、Enter 确认。
  • 高亮匹配词。
  • combobox 模式；aria-activedescendant。
  • aria-expanded；键盘导航。

四、 数据展示类 (Data Display)

Web 端的大屏优势，适合展现高密度的信息：从最核心的表格到图文列表、树、卡片、时间轴、轮播与各类状态/占位元素，构成"把数据看清楚"的展示层。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
31
表格
Table
/ˈteɪbəl/
 Web 端最复杂、最核心的组件，承载高密度结构化数据；含固定表头 / 列、排序、筛选、展开行、行选择等能力。
  • 列过多不横向滚动(撑破布局)。
  • 无斑马纹 / hover 行高亮(扫读错位)。
  • 排序 / 筛选状态不回显(用户不知)。
  • 长表无虚拟滚动(千行卡顿)。
  • 后台数据管理、报表。
  • 订单 / 用户列表。
  • 核心构成：表头(可排序列 + 筛选图标) + 表体(行 / 单元格，可选展开) + 固定列(左 / 右 sticky) + 选择列(复选) + 底部分页 / 汇总。
间距：行高 44–56；单元格 padding 12–16。红线拆解图待补。
 Default、Hover(行)、Sorted(升/降)、Filtered、Selected(行)、Expanded(展开行)。
  • 固定表头 / 列；可展开行
  • 树表；虚拟滚动；带汇总行
  • 行高：44–56；列最小宽 80。
  • 表头：sticky；文本左 / 数字右。
  • Hover 行变色；排序点击切换箭头。
  • 展开行 200ms；列宽拖拽可调。
  • 语义 table/th/td；aria-sort。
  • 固定列用 sticky；键盘可聚焦单元格。
32
列表
List
/lɪst/
 基础的图文垂直排列，比表格更轻量，适合非结构化条目。
  • 用列表承载需排序 / 对比的数据(应表格)。
  • 条目无分隔 / 间距(挤成一团)。
  • 图标与文字基线不对齐。
  • 超长文本无省略(撑高行)。
  • 消息流、文件列表。
  • 搜索结果。
  • 核心构成：列表容器 + 列表项(头像 / 图标 + 标题 + 描述 + 操作) + 分割线 / 间距。
间距：项高 48–64；左图 40。红线拆解图待补。
 Default、Hover、Selected、Disabled。
  • 基础 / 带头像 / 带操作
  • 可拖拽 / 网格列表
  • 项高：48–64；圆角 8。
  • 密度：可调。
  • Hover 项变色；点击进详情。
  • 可拖拽重排。
  • 语义 ul/li；项可聚焦。
  • 键盘上下导航。
33
树形控件
Tree
/triː/
 以层级缩进展示文件目录、组织架构等，支持展开 / 折叠与拖拽节点。
  • 默认全展开(深层信息爆炸)。
  • 父子选择联动不清晰。
  • 节点无图标区分类型(难辨识)。
  • 拖拽无占位指示(不知落点)。
  • 文件管理器、部门树。
  • 类目导航。
  • 核心构成：树容器 + 节点(展开箭头 + 图标 + 标题 + 选中态) + 缩进连线 + 拖拽占位。
间距：节点高 32–36；缩进 16。红线拆解图待补。
 Default、Expanded、Selected、Disabled、Dragging。
  • 可选中 / 可勾选
  • 可拖拽；搜索定位；虚拟滚动
  • 节点高：32–36；缩进 16。
  • 箭头：12。
  • 展开 150ms；拖拽占位高亮。
  • 键盘上下 / 左右。
  • role="tree/treeitem"；aria-expanded/selected。
  • 键盘层级导航。
34
卡片
Card
/kɑːrd/
 信息聚合容器，把标题、图片、操作聚成独立区块，便于扫描与组合。
  • 卡片内塞过多内容(变长文)。
  • 无 hover / 边框反馈(不知可点)。
  • 阴影过重(页面漂浮感)。
  • 卡片尺寸不统一(网格参差)。
  • 仪表盘模块、商品。
  • 文章列表。
  • 核心构成：容器(白底 / 圆角 / 边框或阴影) + 头部(标题 / 操作) + 媒体(图) + 内容(正文) + 底部(操作)。
间距：内边距 16–24；圆角 8–12。红线拆解图待补。
 Default、Hover、Active、Selected。
  • 基础 / 带图 / 可点击
  • 加载中 / 栅格卡
  • 圆角：8–12；阴影 0 2 8。
  • 内边距：16–24。
  • Hover 抬升 / 阴影加深；点击 100ms。
  • 进入视口淡入。
  • 容器语义；可点击卡整卡聚焦。
  • 操作按钮独立可点。
35
折叠面板
Collapse
/kəˈlæps/
 手风琴效果，收起 / 展开长内容，节省首屏空间。
  • 默认全展开(失去折叠意义)。
  • 展开后无平滑动画(突跳)。
  • 标题与箭头点击区域分离。
  • 同时只能开一个却未说明(困惑)。
  • FAQ、设置分组。
  • 详情分段。
  • 核心构成：面板项(标题栏 + 展开箭头 + 内容区) + 手风琴模式(单开 / 多开)。
间距：标题高 48；内容 padding 16。红线拆解图待补。
 Collapsed、Expanded、Disabled。
  • 手风琴(单开) / 多开
  • 带图标；嵌套
  • 标题高：48；箭头 12。
  • 圆角：8。
  • 展开 200ms 高度过渡；箭头旋转。
  • 键盘上下 / Enter。
  • 用 button 触发；aria-expanded。
  • 内容关联 aria-controls。
36
时间轴
Timeline
/ˈtaɪmlaɪn/
 按时间顺序排列事件，展示物流、操作日志等过程。
  • 节点与文字不在同一基准线(错位)。
  • 无"当前 / 已完成"状态区分(全灰)。
  • 时间格式不统一(混用)。
  • 反向排序未标注(新→旧 or 旧→新)。
  • 物流轨迹、审批流。
  • 操作记录。
  • 核心构成：轴线(竖 / 横) + 节点(圆 / 图标，状态色) + 内容(时间 + 标题 + 描述)。
间距：节点间距 24–40；线宽 2。红线拆解图待补。
 Done(完成)、Process(进行)、Wait(待)、Error(异常)。
  • 横向 / 纵向
  • 带图标；交替左右布局
  • 节点：12–16；线宽 2。
  • 间距：24–40。
  • 节点出现淡入；当前节点 pulse(可选)。
  • 语义有序列表；节点状态用文字 + 色。
  • 时间可读。
37
轮播图
Carousel
/ˈkærəsɛl/
 多图自动 / 手动切换，多用于 C 端官网首屏与 Banner。
  • 自动播放过快且无暂停(眩晕 / 读不完)。
  • 无指示点 / 页码(不知第几张)。
  • 切换无过渡(硬切)。
  • 移动端无手势滑动(只能点箭头)。
  • 官网首屏、活动 Banner。
  • 商品图集。
  • 核心构成：视口(裁剪) + slide 序列 + 左右箭头 + 指示点 / 页码 + 自动播放条。
间距：指示点间距 8；箭头 28。红线拆解图待补。
 Playing、Paused、Active(当前 slide)、Hover(显箭头)。
  • 自动 / 手动；淡入 / 滑动
  • 带缩略图；全屏
  • 自动间隔：3–5s；指示点 6–8。
  • 圆角：8。
  • 滑动 300–500ms；hover 暂停。
  • 指示点同步。
  • aria-roledescription="carousel"；slide aria-label。
  • 箭头 button；尊重 reduced-motion。
38
标签
Tag
/tæɡ/
 状态 / 分类的轻量标记，如"已通过""未审核"，常与色彩语义绑定。
  • 用 Tag 承载主操作(应按钮)。
  • 同页色彩语义冲突(红既表危险又表重点)。
  • 标签过长无省略(撑破)。
  • 可关闭标签无 x 热区。
  • 状态标记、分类。
  • 筛选条件。
  • 核心构成：容器(小圆角 / 浅底) + 文字(或图标) + 关闭按钮(可选)。
间距：高 20–24；圆角 4–6；内边距 4–8。红线拆解图待补。
 Default、Colored(语义色)、Closable、Disabled。
  • 实底 / 描边 / 浅底
  • 带图标；可关闭；可选中
  • 高：20–24；圆角 4–6。
  • 字号：12。
  • Hover 微变；关闭淡出 150ms。
  • 语义标记；关闭按钮 aria-label。
  • 勿仅靠色传意。
39
徽标
Badge
/bædʒ/
 在图标 / 头像右上角叠加红点或数字角标，提示未读 / 计数。
  • 数字过大超出角标(破形)。
  • 红点位置偏移(被遮挡)。
  • 已读仍显示角标(不更新)。
  • 用 Badge 传重要流程状态(应通知)。
  • 消息未读、购物车数。
  • 待办数。
  • 核心构成：基准元素(图标 / 头像) + 角标(红点 / 数字，绝对定位右上) + 偏移。
间距：角标 -2~4px 出界；数字高 16–20。红线拆解图待补。
 Dot(点)、Count(数)、None(隐藏)、Max(99+)。
  • 红点 / 数字 / 文字
  • 独立 Badge；状态色
  • 数字高：16–20；圆角满。
  • 偏移：右上 -2~4。
  • 出现弹入 150ms；数字变化滚动(可选)。
  • aria-label 计数；装饰点 aria-hidden。
  • 动态更新 announce。
40
日历
Calendar
/ˈkælɪndər/
 大尺寸日程展示，以月 / 周视图呈现事件分布。
  • 只做日期选择却叫"日历"(应 DatePicker)。
  • 事件无色彩 / 时段区分(堆一起)。
  • 周起始不随地区(中周一 vs 美周日)。
  • 今日无高亮(难定位)。
  • 日程管理、会议室预订。
  • 排期。
  • 核心构成：头部(月 / 周切换) + 星期行 + 日期网格(事件块 / 今日高亮) + 事件详情。
间距：单元格 ≥32；事件块圆角 4。红线拆解图待补。
 Default、Today(高亮)、HasEvent、Selected、Disabled(过去)。
  • 月 / 周 / 日视图
  • 事项型 / 选择型
  • 单元格：≥32；周起始可配。
  • 事件：色编码。
  • 切换月淡入；事件 hover 提示。
  • 点击进详情。
  • grid 语义；事件可读。
  • 键盘导航日；aria 当前。
41 8,2K
统计数值
Statistic
/stəˈtɪstɪk/
 高亮展示大数字(如销售额)，带千分位或小数点，突出关键指标。
  • 数字无单位(不知是元还是次)。
  • 千分位 / 精度混乱(1,000,000 vs 1000000)。
  • 主数字与标签层级不清(数字被淹没)。
  • 加载无占位(数字闪现)。
  • 仪表盘 KPI、概览页。
  • 报表头。
  • 核心构成：标签(上 / 下) + 主数字(品牌色 / 大号) + 单位 / 前缀 + 趋势(↑↓ 百分比，可选)。
间距：数字 30–40px；趋势小字。红线拆解图待补。
 Default、Loading(骨架)、Up(涨)/Down(跌)。
  • 带前缀 / 后缀；带趋势箭头
  • 带图标
  • 数字：30–40px；千分位。
  • 趋势色：涨红跌绿(按 A 股约定)。
  • 数字滚动计数(可选)；加载骨架。
  • 数字 aria-label 完整(含单位)。
  • 趋势文字化(勿仅靠色)。
42
描述列表
Descriptions
/dɪˈskrɪpʃənz/
 详情页以键值对形式展示多行信息(如订单信息)，结构清晰。
  • 键与值不在同一行基线(对不齐)。
  • 长值无换行 / 省略(撑破)。
  • 列数过多(移动端挤)。
  • 必填 / 空值未标注(显得残缺)。
  • 订单详情、用户资料。
  • 配置信息。
  • 核心构成：容器(卡片 / 分区) + 行(标签列 + 值列) + 列数(1/2/3 响应式) + 分隔线。
间距：行高 40–48；标签列宽 100–160。红线拆解图待补。
 Default、Empty(值缺省)、Colon(冒号风格)。
  • 单列 / 多列；带边框
  • 垂直(上下)布局
  • 标签列宽：100–160；行高 40–48。
  • 响应式：降列。
  • 几乎无；复制值按钮(可选)。
  • 语义 dl/dt/dd；标签与值关联。
  • 响应式不丢信息。
43
骨架屏
Skeleton
/ˈskɛlɪtn/
 加载前用灰色占位块模拟最终布局，提升等待体验与稳定感。
  • 占位与实际布局不一致(加载后跳动)。
  • 无微光动画(死板)。
  • 占位过久无超时(以为卡了)。
  • 整页骨架无结构(一块灰)。
  • 列表 / 详情首屏加载。
  • 下拉刷新。
  • 核心构成：占位块(头像 / 标题 / 正文 / 图，灰底圆角) + 微光(shimmer)动画 + 布局同真实。
间距：同真实组件尺寸。红线拆解图待补。
 Loading(闪烁)、Hidden(加载完消失)。
  • 文本 / 头像 / 图片 / 卡片骨架
  • 带 shimmer
  • 灰底：#eef0f2；圆角同组件。
  • shimmer：1–1.5s。
  • 微光从左到右 1–1.5s 循环。
  • 内容到位淡入替换。
  • aria-busy="true"；骨架区 aria-hidden。
  • 加载完移除。
44
空状态
Empty
/ˈɛmpti/
 无数据时的占位图 + 文案 + 操作引导，避免"空白恐慌"。
  • 只有"暂无数据"无引导(用户不知咋办)。
  • 插图与场景不符(通用图凑数)。
  • 无操作按钮(仅展示)。
  • 文案过于技术(报错误码)。
  • 搜索无结果、列表为空。
  • 无权限。
  • 核心构成：插图(轻量) + 主文案(为什么空) + 次文案(怎么做) + 操作按钮(可选)。
间距：插图 64–80；居中。红线拆解图待补。
 Default、WithAction(带按钮)、Filtered(筛选无果)。
  • 纯文字 / 带图 / 带操作
  • 不同场景插画
  • 插图：64–120；主文 14。
  • 次文：12 灰。
  • 进入淡入；按钮 hover。
  • 区域 role="status"；文案可读。
  • 操作可聚焦。
45
图片
Image
/ˈɪmɪdʒ/
 展示图片，支持缩略图、懒加载、点击预览放大。
  • 无懒加载(首屏全载卡)。
  • 加载失败无占位 / 兜底(裂图)。
  • 点击放大无遮罩 / 关闭(迷路)。
  • 缩略图与原图比例失衡(变形)。
  • 相册、商品图、头像。
  • 富文本图。
  • 核心构成：图片容器(裁剪 / 比例) + 懒加载占位 + 加载失败兜底 + 预览(遮罩 + 大图 + 关闭) + 缩略图组。
间距：圆角 4–8；预览遮罩满屏。红线拆解图待补。
 Loading、Loaded、Error(兜底)、Previewing(放大)。
  • 缩略图 / 原图；懒加载
  • 可预览；头像圆形
  • 比例：lock(避免变形)。
  • 懒加载：阈值；预览遮罩 0.8 黑。
  • 加载淡入；点击放大遮罩 200ms。
  • ESC 关闭。
  • alt 文本必填；失败 aria。
  • 预览可 ESC 关闭、focus 管理。

五、 反馈与浮层类 (Feedback)

Web 端非常依赖各种层级的提示和弹窗：从强阻断的 Modal、不打断流程的 Drawer，到轻量 Message、Notification、Popconfirm、Tooltip、Popover，以及 Progress、Spin、Result、Alert，构成"让用户始终知道发生了什么"的反馈层。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 状态 变体 规范参数 交互与动效 开发与无障碍
46
模态框
Modal / Dialog
/ˈmoʊdəl/ /ˈdaɪəlɒɡ/
 屏幕中央弹出的强阻断弹窗，用于必须用户响应的重要操作（确认删除、表单录入、详情查看）。遮罩层阻断背景交互。
  • 用 Modal 承载过长内容导致内部滚动失控（应改用 Drawer/独立页）。
  • Modal 里再开 Modal，层级混乱。
  • 点遮罩/ESC 直接销毁未保存数据，无二次确认。
  • 弱化"取消"导致用户困在弹窗。
  • 删除/危险操作的二次确认。
  • 中等复杂度表单录入（< 一屏）。
  • 查看大图、详情、预览。
  • 核心构成：遮罩(mask, 0.45 黑) + 容器(圆角/描边/阴影) + 标题栏(标题+关闭×) + 内容区 + 底部操作栏(取消/确认)。
间距：标题与内容 16px；操作栏可吸底。红线拆解图待补。
 Default、Mask、Loading、Success、Error。
  • 居中 / 顶部对齐
  • 纯信息 / 表单 / 确认
  • 带步骤条 / 全屏 Modal
  • 宽度：400/520/680px 三档；最大 90vw。
  • 圆角：8–12px；标题 16px/600。
  • 遮罩：rgba(0,0,0,0.45)。
  • 进入：遮罩淡入 + 容器缩放/上滑 200ms。
  • 关闭：ESC / 点遮罩 / 点×。
  • 标题栏可拖拽（桌面）。
  • role="dialog" aria-modal="true"；初始 focus 落首个可聚焦元素。
  • 焦点陷阱（Tab 不逃出）；关闭后焦点归还触发元素。
  • aria-labelledby 指向标题。
47
抽屉
Drawer
/ˈdrɔːr/
 从屏幕左/右侧滑出的面板，常承载详情编辑、筛选、表单，不阻断主流程（遮罩可轻可无）。
  • 抽屉内容过载变成"半屏页面"（应改用独立路由页）。
  • 同时开多个抽屉互相覆盖。
  • 关闭后主列表状态丢失无提示。
  • 列表行详情 / 编辑（看 + 改）。
  • 右侧筛选面板、左侧导航树。
  • 表单录入不离开当前上下文。
  • 核心构成：滑出面板(宽度固定) + 遮罩(可选) + 标题栏 + 内容区 + 底部操作(常驻吸底)。
遮罩 0.25 黑；内容区可内部滚。红线拆解图待补。
 Closed、Open、Loading。
  • 右侧 / 左侧 / 上 / 下
  • 宽度 320/376/480/680
  • 高度：100vh；宽度按内容三档。
  • 滑入：240–300ms ease。
  • 遮罩：rgba(0,0,0,0.25)。
  • 滑入/滑出 240–300ms；内容区可内部滚。
  • 底部操作栏吸底，滚动时阴影提示。
  • role="dialog" aria-modal；focus 落入面板。
  • ESC 关闭；移动端常全屏化。
48
全局提示
Message / Toast
/ˈmɛsɪdʒ/ /toʊst/
 顶部居中短暂浮现的小提示，反馈单次操作结果（成功/失败/警告），自动消失，不打断流程。
  • 把需用户决策的内容塞进 Message（应用 Modal/Notification）。
  • 连续多条堆叠刷屏。
  • 成功提示停留过久（应 2–3s）。
  • 保存成功、提交完成、复制成功。
  • 轻量操作反馈（无需点击）。
  • 核心构成：图标(成功✓/失败✕/警告!) + 文案(单行) + 容器(圆角/浅底)。
停留 2.5–3s；多条纵向堆叠。红线拆解图待补。
 Success、Error、Warning、Info、Loading。
  • 纯文字 / 带图标
  • 带关闭(可选)
  • 高度：36–40px；圆角 8px。
  • 停留：2.5–3s；纵向堆叠。
  • 顶部下滑淡入；自动上滑淡出。
  • 可手动关闭。
  • role="alert" aria-live="polite"；读取后自动移除。
  • 不抢焦点；色盲需图标+文字双重区分。
49
通知提醒
Notification
/ˌnoʊtɪfɪˈkeɪʃən/
 右上角滑出的卡片通知，带标题+描述+可选操作，用于需关注但非阻断的信息（系统公告、新消息）。
  • 高频推送淹没（应聚合/折叠）。
  • 通知里塞长文无截断。
  • 无"不再提醒/查看"入口。
  • 后台任务完成（导出/打包）。
  • 新消息、审批、系统升级公告。
  • 核心构成：图标/封面 + 标题 + 描述(2 行截断) + 关闭× + 可选操作链接。
宽 360px；右偏移 24px。红线拆解图待补。
 Unread、Read、Hover、Closing。
  • 成功/信息/警告/错误
  • 带图 / 纯文
  • 宽：360px；圆角 8px。
  • 停留：4.5s 或常驻手动关。
  • 右上滑入；hover 暂停消失计时。
  • 多条纵向堆叠，超出折叠。
  • role="alert" aria-live="polite"；标题可读。
  • 关闭按钮可达；不抢焦点。
50
气泡确认框
Popconfirm
/pɒp kənˈfɜːrm/
 锚定在触发元素旁的轻量二次确认气泡（"确定删除？"），比 Modal 轻，适合列表行内的危险操作确认。
  • 用 Popconfirm 做复杂确认（应 Modal）。
  • 无箭头指向触发源，用户不知在确认什么。
  • 确认/取消按钮无区分。
  • 列表行删除、停用等单行危险操作。
  • 轻量"是否继续"。
  • 核心构成：指向箭头 + 问号图标 + 文案 + 取消/确认按钮。
宽 200–240px；箭头 8px。红线拆解图待补。
 Closed、Open、Confirming。
  • 默认 / 危险(红确认)
  • 带标题(可选)
  • 宽：200–240px；圆角 6px。
  • 箭头 8px 指向触发源。
  • 点击触发元素展开；点外部/ESC 收起。
  • 确认后气泡收起并触发动作。
  • role="dialog"；触发元素 aria-expanded。
  • 按钮语义明确；ESC 关闭。
51
警告提示
Alert
/əˈlɜːrt/
 常驻于页面内的横幅提示，传达与上下文相关的状态/公告（成功、警告、错误、信息），非临时。
  • 用 Alert 提示瞬操作结果（应用 Message）。
  • 全页堆满 Alert 制造焦虑。
  • 无关闭且长期占屏。
  • 系统升级公告、维护通知。
  • 表单页顶部整体错误汇总。
  • 账户异常/风控提醒。
  • 核心构成：语义图标 + 文案(可含链接/操作) + 关闭×(可选) + 浅色底(语义色)。
左色条 3–4px 语义色；内边距 8–12px。红线拆解图待补。
 Success、Info、Warning、Error、Closable。
  • 单行 / 含描述多行
  • 含操作；横幅/内联
  • 圆角：6–8px；左色条语义色。
  • 内边距：8–12px。
  • 进入淡入/下滑；可关闭淡出。
  • 图标与底色语义一致。
  • role="alert"；颜色外需图标区分(色盲)。
  • 关闭按钮可达。
52
进度条
Progress
/ˈprɒɡrɛs/
 线形或环形展示任务完成度，给用户确定感，常用于上传、导出、安装。
  • 长时间卡在 99% 无说明（应显示等待/子步骤）。
  • 不确定进度却用确定条（应用 Spin/Indeterminate）。
  • 环形与线形混用无理由。
  • 文件上传/下载、批量处理。
  • 表单分步保存、安装向导。
  • 核心构成：轨道(track) + 已填充(fill, 语义色) + 百分比文案(可选)。
圆角两端；成功绿/异常红。红线拆解图待补。
 Normal、Active、Success、Exception。
  • 线形(内显%/外显%)
  • 环形(中心%)；步骤分段
  • 线高：4–8px；环形直径 2 档。
  • 成功：绿；异常：红。
  • 平滑增长；不确定态条纹流动。
  • 完成跳 Success 态。
  • role="progressbar" aria-valuenow/min/max。
  • 文案同步；动态更新 aria-valuenow。
53
加载中
Spin
/spɪn/
 局部或全屏的转圈加载指示，表达"正在处理"，用于无明确进度比的等待。
  • 全屏 Spin 长期无超时（应失败兜底/重试）。
  • 转圈同时仍可操作（应遮罩防误触）。
  • 与 Progress 混用（确定比用 Progress）。
  • 按钮提交等待、局部区块刷新。
  • 整页/路由切换 loading。
  • 核心构成：旋转弧(品牌色) + 可选文案("加载中…") + 遮罩(全屏时)。
转速 0.8–1s/圈；全屏遮罩白 0.6。红线拆解图待补。
 Loading、Error(失败重试)。
  • 小(按钮内)/中(区块)/大(全屏)
  • 带文案 / 纯图标
  • 尺寸：14/24/40px；转速 0.8–1s/圈。
  • 全屏遮罩：白 0.6。
  • 持续旋转；出现/消失淡入淡出。
  • 失败可切"重试"按钮。
  • aria-busy="true"；文案 aria-live。
  • 减少动效偏好下可静态替代。
54
结果页
Result
/rɪˈzʌlt/
 操作完成后的整页反馈（成功/失败/待处理），给明确结论 + 后续引导，常用于支付、提交、404。
  • 仅一个大图标无后续动作（应给"查看/返回"按钮）。
  • 把结果页当错误页滥用（普通错误用 Alert/Message）。
  • 成功页信息不足（缺订单号/时间）。
  • 支付成功、表单提交完成。
  • 404 / 无权限 / 维护页。
  • 核心构成：状态图标(大) + 标题 + 描述 + 操作按钮组 + 可选附加信息卡。
图标 64–72px；垂直居中留白。红线拆解图待补。
 Success、Error、Info、Warning。
  • 居中卡片 / 全屏
  • 带步骤 / 不带
  • 图标：64–72px；标题 20–24px/600。
  • 垂直居中留白。
  • 图标进入弹入；按钮高亮主操作。
  • 可分享/复制结果信息。
  • role="status"；标题 h1 级别。
  • 主操作焦点可达；404 提供返回导航。
55
文字提示
Tooltip
/ˈtuːltɪp/
 鼠标 Hover/聚焦时出现的纯文本气泡，解释图标、省略文字或操作含义，不承载交互。
  • 用 Tooltip 放关键操作（应常驻可见）。
  • 移动端仅靠 Hover（无触摸等价）。
  • 长篇大论塞进 Tooltip（应 Popover/帮助文档）。
  • 图标按钮释义、缩写展开。
  • 表格单元格省略内容 hover 全文。
  • 核心构成：气泡(深色底+浅字) + 指向箭头 + 纯文本。
最大宽 240px；延时 100–200ms 出现。红线拆解图待补。
 Hidden、Visible、Delay。
  • 上/下/左/右
  • 深底 / 浅底
  • 最大宽：240px；内边距 6–8px。
  • 圆角：4–6px；延时 100–200ms。
  • Hover/Focus 延时出现；移开淡出。
  • 箭头指向触发源。
  • aria-describedby 关联；focus 也可触发。
  • 触摸设备提供长按/点击等价。
56
气泡卡片
Popover
/ˈpɒpəʊvər/
 Hover 或点击弹出的富内容卡片，可放文字、列表、表单等组件，比 Tooltip 承载更多交互。
  • 复杂表单塞 Popover 导致溢出（应 Modal/Drawer）。
  • 与 Tooltip 混淆（Popover 可交互）。
  • 无箭头/无关闭，来源不明。
  • 图标旁的下拉说明卡、用户菜单。
  • 表格内"更多"操作浮层、筛选浮层。
  • 核心构成：卡片(箭头) + 标题(可选) + 富内容区 + 关闭×(可选)。
宽 240–320px；阴影层级高于 Tooltip。红线拆解图待补。
 Closed、Open、Hover、Click。
  • Hover 触发 / Click 触发
  • 上/下/左/右
  • 宽：240–320px；圆角 8px。
  • 箭头 8px；阴影层级高于 Tooltip。
  • 出现缩放/淡入；点外部/ESC 关闭。
  • 内容可滚动。
  • role="dialog"；触发元素 aria-expanded。
  • ESC 关闭；焦点管理。

六、 进阶与高阶交互类 (Advanced / 业务特有)

在特定复杂场景才会用到的重型组件：从富文本/代码编辑器，到看板画板、图表、地图，再到右键菜单与 Command Palette，构成"专家级 / 业务特有"的高阶交互层，通常是产品差异化的关键。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 状态 变体 规范参数 交互与动效 开发与无障碍
57
富文本编辑器
Rich Text Editor
/rɪtʃ tɛkst ˈɛdɪtər/
 类似 Word 的图文混排编辑工具，支持文字样式、图片、链接、列表等富格式，常见于评论、文章、邮件编辑器。
  • 把整个页面做成可编辑（contenteditable 全开）导致选区/粘贴混乱。
  • 粘贴富文本带入未知样式/脚本（应做 XSS 清洗 + 纯文本兜底）。
  • 工具栏塞满 50+ 按钮无分组，认知过载。
  • 移动端硬套 PC 工具栏导致溢出。
  • 评论区、文章/博客撰写、邮件正文。
  • 需求文档、Wiki、IM 富文本消息。
  • 核心构成：工具栏(分组: 文本/段落/插入) + 编辑区(contenteditable) + 悬浮气泡工具条(选中文字时出现)。
工具栏高 40–44px；编辑区最小高 120px。红线拆解图待补。
 Focus、Empty、Disabled、Fullscreen。
  • 行内(轻量) / 全功能
  • 协同(多人光标)
  • 工具栏：高 40–44px；图标 20px。
  • 编辑区：最小高 120px；placeholder 灰。
  • 选中文字浮现气泡工具条(贴近选区)。
  • 粘贴图片先占位后上传；@提及下拉。
  • 工具栏按钮 aria-label；编辑区 role="textbox" aria-multiline。
  • 键盘可达；粘贴做 XSS 清洗。
58
代码编辑器
Code Editor
/koʊd ˈɛdɪtər/
 带语法高亮、行号、括号匹配的编辑区，用于代码/SQL/JSON 录入，通常基于 Monaco / CodeMirror。
  • 用普通 textarea 承载长代码（无高亮/行号，体验差）。
  • 大文件(万行)直接全量渲染卡死（应虚拟滚动/分块）。
  • 移动端硬塞完整 IDE 功能。
  • 低代码平台的表达式/脚本编辑。
  • API 调试、SQL 查询、配置 JSON/YAML。
  • 核心构成：行号槽(gutter) + 代码区(高亮 token) + minimap(可选) + 状态栏(行列/语言)。
行高 20–22px；字号 13–14px 等宽。红线拆解图待补。
 Focus、Error(红波浪)、ReadOnly。
  • 行内(只读预览) / 全功能
  • Diff 对比
  • 行高：20–22px；字号 13–14px 等宽。
  • 主题：深色/浅色；行号槽宽 48px。
  • 括号匹配高亮；悬停变量提示(hover tooltip)。
  • Ctrl+F 查找、Ctrl+/ 注释。
  • 键盘优先；屏幕阅读器可读行号。
  • 支持键盘导航；不依赖鼠标拖选。
59
看板 / 画板
Kanban / Canvas
/ˈkænbæn/ /ˈkænvəs/
 支持无限拖拽、缩放的节点/画布视图：看板为列+卡片的流水线（Trello），画板为自由节点图（Figma/Miro）。
  • 看板列过多(>7)失去"流动"意义。
  • 画板节点无对齐/无缩放限制导致迷失。
  • 拖拽无视觉反馈(被拖物半透明/占位)。
  • 任务管理看板、敏捷冲刺。
  • 脑图、流程图、设计稿画板、白板。
  • 核心构成：画布(无限滚动/缩放) + 节点(卡片/图形) + 连线(可选) + 工具条(缩放/对齐) + 迷你地图。
卡片间距 8–12px；缩放 10%–400%。红线拆解图待补。
 Idle、Dragging、Zooming、Selecting。
  • 看板(列卡片) / 自由画板(节点+连线)
  • 时间线
  • 卡片：间距 8–12px；缩放 10%–400%。
  • 拖拽：源卡半透明 50%；占位虚框。
  • 拖拽跟手；松手磁吸对齐网格。
  • 缩放以光标为中心；滚轮平移。
  • 键盘可移动节点(方向键)；提供列表等价视图。
  • 画布操作提供按钮(非仅手势)。
60
数据可视化图表
Charts
/tʃɑːrts/
 基于 AntV/ECharts 等库的图表，将结构化数据转为折线/柱状/饼/K线等可视化，辅助决策。
  • 一图堆 6+ 维度导致读不懂。
  • 用 3D 饼图扭曲比例误导。
  • 无空数据/加载态占位。
  • 坐标轴无单位、图例缺失。
  • 仪表盘、运营报表、监控大屏。
  • 趋势分析、占比对比、K线行情。
  • 核心构成：坐标系(轴/网格) + 数据系列(点/线/柱) + 图例 + Tooltip + 标题。
主色 ≤3；语义色按 A股惯例(涨红跌绿)。红线拆解图待补。
 Loading、Empty、Error、Normal。
  • 折线/面积/柱状/饼
  • 散点/雷达/K线/地图
  • 主色：≤3；语义色(涨红跌绿)。
  • 坐标：单位标注；Tooltip 显示精确值。
  • Hover 高亮对应系列；点击图例切换显隐。
  • 数据更新过渡动画 300ms。
  • 提供数据表等价(<table>)供屏幕阅读器。
  • Canvas 图表加 aria-label 描述概要。
61
地图组件
Map
/mæp/
 集成高德/百度等地图 SDK，支持缩放、平移、Marker 标记、路线规划，常用于门店/物流/定位。
  • 默认加载全量地图+所有 Marker 卡顿（应聚合 Marker/按需加载）。
  • 无加载/定位失败态。
  • 移动端地图手势与页面滚动冲突(应隔离)。
  • 门店/网点查询、配送轨迹、打车。
  • 打卡定位、附近的人/服务。
  • 核心构成：底图瓦片 + 缩放控件 + Marker(图钉) + 信息窗(点击弹出) + 搜索框(可选)。
Marker 图标 24–32px；信息窗最大宽 280px。红线拆解图待补。
 Loading、Locating、Empty(无结果)、Error。
  • 标准 / 卫星 / 路况
  • 单点 / 聚合点
  • Marker：图标 24–32px；信息窗最大宽 280px。
  • 缩放：城市 11 / 街区 15。
  • 点击 Marker 弹信息窗；双击放大。
  • 拖拽平移、滚轮/双指缩放。
  • Marker 提供文本标签；地图操作提供按钮(缩放+/-)。
  • 加载失败给重试；不依赖纯手势。
62
右键菜单
Context Menu
/ˈkɒntɛkst ˈmɛnjuː/
 鼠标右键点击弹出的自定义菜单，提供与当前对象相关的快捷操作（复制/删除/重命名等），桌面端高频。
  • 右键菜单项与全局菜单重复且无差异（应只放上下文相关项）。
  • 菜单超出视口边缘被截断（应自动翻转/位移）。
  • 触屏无等价入口（长按替代）。
  • 危险项(删除)无二次确认。
  • 文件/列表项、画布节点、表格单元格的右键操作。
  • 文本选区右键（复制/搜索）。
  • 核心构成：浮层容器 + 菜单项(图标+文字+快捷键提示) + 分隔线 + 子菜单箭头(可选)。
项高 32–36px；圆角 6–8px；最小宽 160px。红线拆解图待补。
 Closed、Open、SubmenuOpen、Disabled。
  • 扁平 / 含图标
  • 含子菜单 / 含危险项(红)
  • 项高：32–36px；圆角 6–8px；最小宽 160px。
  • 快捷键提示右对齐灰字。
  • 右键即时弹出(定位光标)；点外部/ESC 关闭。
  • 悬停子菜单展开；危险项红色。
  • role="menu"/menuitem；方向键导航、Enter 触发、ESC 关。
  • 触屏长按等价；焦点管理。
63
快捷键面板
Command Palette
/kəˈmænd ˈpælət/
 按下 Ctrl/Cmd+K 弹出的全局搜索/指令面板，集中收纳命令与跳转，提升高级用户效率（VS Code / Linear 风）。
  • 面板内无搜索过滤（长列表找不到）。
  • 命令无分组/无最近使用，层级扁平混乱。
  • 触屏无入口（应提供全局搜索按钮）。
  • 快捷键与其他冲突未处理。
  • 快速跳转页面/设置、执行命令、全局搜索。
  • 高级用户的高效操作入口。
  • 核心构成：输入框(带搜索图标) + 结果列表(图标+名称+分组+快捷键) + 选中高亮。
宽 560–640px；居中偏上；项高 40px。红线拆解图待补。
 Closed、Open、Searching、Empty(无结果)。
  • 纯命令 / 命令+页面跳转
  • 含最近使用
  • 宽：560–640px；居中偏上；项高 40px。
  • 输入框：高 44px；占位"搜索命令…"。
  • Ctrl+K 唤起；输入即过滤(模糊匹配)。
  • 上下键选、Enter 执行、ESC 关。
  • role="dialog"；输入框 autofocus。
  • 列表 aria-activedescendant 管理选中；键盘全可达。

Web 端组件的 3 大独有特征

Web 端与移动端最本质的差异，来自「鼠标 + 大屏 + 键盘」的复合输入。这 3 条独有特征，是判断一个 Web 端组件是否“专业、够效率”的硬指标——移动端组件库根本不需要（也无法）考虑它们。

1 必须有 Hover 态

鼠标移上去就要有反馈：变色、出现边框、出现小抓手光标（cursor:grab）。这是移动端完全没有的交互维度——触屏没有“悬停”这一说，而鼠标需要靠 Hover 确认“这里可操作”。

自检：按钮 / 列表行 / 可拖拽项 hover 毫无变化？→ 补底色微变 + 边框 + 光标变化。

2 表格为王

在 B 端系统里，80% 的信息是通过 Table（表格）展示的。排序、筛选、列宽拖拽、固定列、展开行、行选择——这些不是“锦上添花”，而是表格设计的重头戏，也是 Web 端专属的高密度信息承载方式。

自检：数据散落在多页卡片？→ 优先用大表格聚合，配排序 / 筛选 / 固定关键列。

3 用 Drawer 替代跳页

点击表格某一项查看详情时，通常从右侧滑出一个 Drawer（抽屉），而不是重新加载整个网页。它保留原列表上下文、切换成本极低，是 Web 端“效率优先”哲学的缩影——跳页在 B 端几乎是被嫌弃的。

自检：看一条详情就跳转整页？→ 改为右滑 Drawer，保留左侧列表与筛选状态。