工具栏
Toolbar
UI 组件也叫：操作栏、按钮栏、编辑器工具栏、Action Bar
一句话：一横排紧凑的按钮和图标，放在某块内容上方，集中放针对这块内容的常用操作。
详细解释
工具栏是一排挨着的按钮，通常贴在某块内容的上方：富文本编辑器顶部的「加粗、斜体、列表、插入图片」，表格上方的「新建、导入、导出、刷新」，图片编辑器里的「裁剪、旋转、撤销」。相关按钮之间用竖线分组，常用的直接露出来，不常用的收进「更多」下拉菜单。按无障碍规范，工具栏容器应带 role="toolbar"，并能用方向键在按钮间移动焦点。
它和 顶部导航栏 的区别：导航栏负责在页面之间跳转，工具栏只对当前这块内容进行操作。和 筛选栏 的区别：筛选栏放的是搜索框、下拉选项这些查询条件，用来缩小数据范围；工具栏放的是动作按钮。表格页常把两者上下叠放：上面筛选栏，下面工具栏。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
表格上方加一个工具栏：左侧是主按钮「新建」和普通按钮「导入」「导出」，右侧是刷新、列设置、全屏三个图标按钮，悬停显示文字提示；勾选表格行后，左侧切换为「已选 3 项」和「批量删除」按钮。按钮高度统一 32px，组与组之间用间距分开。
结构与适用场景
结构描述
由一行按钮、图标按钮和分组竖线组成，常分为左侧主要操作和右侧辅助操作，放不下的操作收进「更多」菜单。
适用场景
- 表格、列表上方需要集中放新建、导入、导出等针对这组数据的操作
- 富文本、图片等编辑器需要一排格式化或编辑工具
- 勾选多条记录后需要显示批量操作按钮
不适用场景
- 在不同页面之间跳转，用顶部导航栏或侧边菜单
- 放的主要是搜索框和筛选条件，那是筛选栏
- 只有一个操作按钮，直接放一个按钮即可
常见坏用法
- 十几个按钮平铺一排，没有分组也没有主次，窄屏时挤成两行
- 全是图标按钮却没有文字提示，用户看不懂每个图标的意思
- 把筛选条件、导航链接、操作按钮混在同一条工具栏里
识别特征
- 内容区上方一横排紧凑的按钮和图标
- 按钮之间有竖线分隔成几组
- 左侧常是文字按钮，右侧是一排小图标
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
[role="toolbar"].btn-toolbar.ql-toolbar.tox-toolbar.ck-toolbar.w-e-toolbar.ant-pro-table-list-toolbar[class*="MuiToolbar-root"]:not([class*="MuiAppBar-root"] *)