抽屉
Drawer
UI 组件也叫：侧滑面板、Sheet、侧边弹出层、Offcanvas
一句话：从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。
详细解释
抽屉从页面右侧（有时是左侧或底部）滑出，盖住一部分页面，背后通常有半透明遮罩。它比对话框更高、能容纳更多内容，中间内容区可以独立滚动，底部固定放操作按钮。shadcn/ui 里叫 Sheet，Bootstrap 里叫 Offcanvas，手机上从底部滑出的版本也常叫底部面板（Bottom Sheet）。
和 对话框 的区别：对话框居中、偏小，适合确认或短表单；抽屉贴边、偏高，适合查看一条记录的完整详情或编辑较长的表单，而且原来的列表仍露出一部分，用户不会丢失上下文。和 侧边菜单 的区别：侧边菜单是常驻的导航，抽屉是临时打开、用完就关的。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
点击列表中的某一行时，从右侧滑出一个宽 480px 的抽屉显示详情，顶部有标题和关闭按钮，底部固定放「取消」「保存」按钮，点击遮罩或按 Esc 可关闭，内容过长时只滚动中间区域。
结构与适用场景
结构描述
由遮罩层和贴边滑出的面板组成，面板内有标题栏、可滚动内容区和底部操作栏。
适用场景
- 在列表页查看或编辑单条记录，希望保留列表上下文时
- 表单字段较多，对话框放不下但又不值得跳新页面时
- 需要临时展示辅助信息或一组筛选条件，用完即关时
- 手机上从底部弹出一组选项或操作菜单时
不适用场景
- 只需要用户确认一句话时，用对话框或气泡卡片更合适
- 内容是一个完整的独立流程，需要能分享链接或刷新后保留时
- 需要同时对照查看多条记录时
常见坏用法
- 抽屉里再弹抽屉，层层叠加，用户不知道该关哪个
- 宽度占满整个屏幕，失去了保留上下文的意义
- 把常驻的主导航做成默认打开的抽屉，桌面端每次都要先关掉它
识别特征
- 贴着屏幕右侧或底部边缘的高面板
- 背后有半透明遮罩，另一侧仍能看到原页面的一部分
- 顶部有标题和关闭图标，底部固定一排按钮
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-drawer-content-wrapper.el-drawer[class*="MuiDrawer-paper"]:not([class*="MuiDrawer-paperAnchorDocked"]).arco-drawer.t-drawer__content-wrapper.n-drawer[data-slot="sheet-content"][data-slot="drawer-content"].offcanvas