Drawer 抽屉侧栏

DrawerSidebar 现在保持了 Rue 基础的 daisyUI compound 结构，同时补上更贴近成熟业务抽屉组件的受控能力：四向打开、预设尺寸、标题栏扩展、底部操作区、Skeleton loading、mask 配置与当前容器内联渲染。

两种模式继续并存：compound 模式适合基础 daisyUI drawer 结构；语义模式适合详情、表单、预览和二级任务面板。

何时使用

需要在当前页面上下文内完成编辑、预览、审批或补录，不想跳转路由。
需要比 Popover 更重的承载能力，但又不适合用 Modal 打断整个页面流程。
已经使用 compound drawer 结构，希望平滑升级而不重写项目代码。

Compound 结构支持

# Drawer sidebar

展示最基础的 daisyUI drawer 结构，适合使用 Toggle / Content / Side / Overlay。

Open drawer

# Navbar menu for desktop plus sidebar drawer for mobile

展示响应式导航用法，桌面端显示横向菜单，移动端切换为侧栏。

Content

# Responsive sidebar always visible on large screen

大屏常驻、小屏抽屉，支持 lg:drawer-open 这类基础类名能力。

Open drawer

# Responsive collapsible icon only drawer sidebar

展示图标折叠侧栏的写法，适合后台信息架构导航。

Page Content

# Drawer sidebar that opens from right side

基础的 end 写法继续有效，适合快速保持项目代码支持。

Open drawer

语义模式

# Controlled drawer with title, extra and footer

直接传 open/title/footer 进入语义模式，默认会以页面级抽屉打开，更贴近常见业务抽屉的使用方式。

这里仍然只是预览舞台。点击按钮后会按默认行为从整个页面右侧打开；如果要限制在当前容器，再额外传入 inline。

# Placement switching

同一份内容根据 placement 从四个方向打开，默认以页面级抽屉展示；顶部和底部会自动使用高度尺寸。

当前方向：右侧。点击上方按钮后，抽屉会从整个页面对应边缘打开。

# Preset and custom size

default、large 和自定义 string / number 都可以直接使用，默认会从页面边缘打开。

当前尺寸：default。点击按钮后会以全局抽屉展示，适合根据信息密度在“任务面板”和“详情抽屉”之间切换。

# Loading and close placement

语义模式内置 Skeleton loading，并支持把关闭按钮放到标题栏起始位置；默认仍会以页面级抽屉打开。

适合异步拉取详情、表单 schema 或审批记录时先占位，再以全局抽屉填充真实内容。

# No mask drawer in current container

这个示例刻意使用当前容器内联渲染；辅助信息面板可以关闭遮罩，让背景内容继续保持可见。

这里代表页面主内容。无遮罩时，抽屉更像页内侧边工作台，而不是强打断的弹层。

API

基础的Toggle、Content、Side、Overlay 子组件全部保持。下面的表格重点列出语义模式下更值得直接使用的顶层 API。

属性	说明	类型	默认值
`children`	抽屉主体内容；语义模式下渲染在 body 区域，compound 模式下保持原结构	`any`	`-`
`closable`	是否显示关闭按钮，也可传入 placement 和 closeIcon 做细化控制	boolean \| { placement?: `start` \| `end`; closeIcon?: any; disabled?: boolean }	`true`
`defaultOpen`	语义模式下的非受控初始打开状态	`boolean`	`false`
`drawerRender`	对抽屉面板做二次包装，适合额外插入步骤条、边框或埋点容器	`(node) => any`	`-`
`end`	compound 模式的基础右侧抽屉写法，支持当前 drawer-end 习惯	`boolean`	`false`
`extra`	标题栏右上角扩展操作区，适合放状态、按钮或次要动作	`any`	`-`
`footer`	底部操作区，适合保存、取消、提交等动作	`any`	`-`
`getContainer / inline`	控制渲染位置；inline 用于当前容器演示，getContainer 可挂到指定节点	`string \| HTMLElement \| (() => HTMLElement) \| false \| boolean`	`inline: false`
`keyboard`	是否允许按 Esc 关闭语义模式抽屉	`boolean`	`true`
`loading`	在 body 区域显示 Skeleton，占位加载态使用骨架屏	`boolean`	`false`
`mask / maskClosable`	遮罩与点击关闭控制；mask 也支持 blur 和 closable 的对象写法	`boolean \| { enabled?: boolean; closable?: boolean; blur?: boolean }`	`true`
`onClose / onOpenChange`	关闭事件和显隐变化事件；受控模式推荐只监听 onOpenChange 回写状态	`(event) => void / (open) => void`	`-`
`open`	语义模式的受控显隐；compound 模式下仍支持 drawer-open 类名行为	`boolean`	`false`
`placement`	语义模式抽屉方向，支持四个边缘打开	`left` \| `right` \| `top` \| `bottom`	`right`
`size`	预设 default、large，或传入 number/string 自定义宽高	`default` \| `large` \| number \| string	`default`
`title`	语义模式标题栏标题	`any`	`-`