从底部升起的面板 Sheet

<div class="xxd-sheet-host">
  …
  <div class="xxd-scrim"></div>
  <section class="xxd-sheet" id="s1" aria-labelledby="s1-title"><div class="xxd-sheet__head"><h3 class="xxd-sheet__title" id="s1-title">封面</h3><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" data-xxd-sheet-close aria-label="关闭"><i data-xxd-icon="X"></i></button></div><div class="xxd-sheet__body">…</div></section>
  <footer class="xxd-dock">… <button class="xxd-btn" data-xxd-sheet-open="s1">封面</button></footer>
</div>

export function SheetDemo() {
  const [open, setOpen] = useState(false);
  return (
    <SheetHost style={{ position: "relative", width: 380, height: 320, border: "1px solid var(--line)", overflow: "hidden" }}>
      <div style={{ padding: 14 }} className="xxd-text" data-variant="secondary">正文……</div>
      <Sheet open={open} onOpenChange={setOpen} title="封面">
        <p className="xxd-help">选一张图作为文章封面。</p>
      </Sheet>
      <Dock style={{ position: "absolute", left: 0, right: 0, bottom: 0 }} primary={<Button size="sm" onClick={() => setOpen(!open)}>封面</Button>} />
    </SheetHost>
  );
}