开发预览更新于 2026-05-10

DetachedPanel 浮动面板

可拖拽的浮动面板，Teleport 到 body。配合 TearOffTab / DockLayout 的 detach 动作使用。

基础用法

按住头部即可拖动；resizable 启用浏览器原生 resize。Tauri / Electron 场景里把它转成独立 window 时只需在 tear-off 事件里 spawn 一个新 BrowserWindow / WebView。

<CfDetachedPanel v-model:open="open" title="Inspector" :width="320">
<div>面板内容…</div>
</CfDetachedPanel>

<CfDetachedPanel open={open} onOpenChange={setOpen} title="Inspector" width={320}>
<div>面板内容…</div>
</CfDetachedPanel>

可同时打开多个 DetachedPanel；通过 zIndex 显式分层。resizable=true 启用浏览器原生 resize 句柄。

<CfDetachedPanel v-model:open="a" :width="280" />
<CfDetachedPanel v-model:open="b" resizable />

<CfDetachedPanel open={a} onOpenChange={setA} width={280} />
<CfDetachedPanel open={b} onOpenChange={setB} resizable />

事件：update:open / move(x, y)。