# 插件侧边栏

紧凑密度：tab 在最上面（没有顶栏）、拖放区和取图方式、记录、设置、状态行、底部 dock。

```html
<div class="xxd-sheet-host" data-density-preview="compact" style="display:flex;flex-direction:column;height:100%;--control-h:32px;--control-h-sm:26px;--control-h-xs:20px;--icon-button:30px">
  <nav class="xxd-tabs" data-xxd-tabs style="flex:none;padding:0 14px" aria-label="主导航">
    <button role="tab" id="sp-t1" aria-controls="sp-p1" aria-selected="true">排序</button>
    <button role="tab" id="sp-t2" aria-controls="sp-p2">记录</button>
    <button role="tab" id="sp-t3" aria-controls="sp-p3">设置</button>
  </nav>
  <main style="flex:1;min-height:0;overflow:auto">
    <section id="sp-p1" style="padding:14px;display:grid;gap:12px">
      <div class="xxd-dropzone"><i data-xxd-icon="ImagePlus" data-size="24"></i><p class="xxd-dropzone__title">把图片拖到这里</p><p class="xxd-help">也可以 <button class="xxd-link" type="button">选择图片文件</button></p></div>
      <div class="xxd-group__body"><ul class="xxd-list" data-interactive>
        <li class="xxd-list__item"><i data-xxd-icon="Globe" data-size="16"></i><div class="xxd-list__main"><div class="xxd-list__title">取这个网页的图片</div><div class="xxd-list__meta">mp.weixin.qq.com 上有 31 张</div></div></li>
        <li class="xxd-list__item"><i data-xxd-icon="Columns3" data-size="16"></i><div class="xxd-list__main"><div class="xxd-list__title">取所有标签页的图片</div><div class="xxd-list__meta">这个窗口的 6 个网页</div></div></li>
        <li class="xxd-list__item"><i data-xxd-icon="Link" data-size="16"></i><div class="xxd-list__main"><div class="xxd-list__title">打开一个网址</div></div></li>
      </ul></div>
    </section>
    <section id="sp-p2" style="padding:14px" class="xxd-history">
      <section><h3 class="xxd-history__day">今天</h3><ul class="xxd-list xxd-group__body" data-interactive>
        <li class="xxd-list__item"><span class="xxd-thumbs"><span style="background:#d65f32"></span><span style="background:#3b74b8"></span><span style="background:#5a8a3c"></span></span><div class="xxd-list__main"><div class="xxd-list__title">24 张图片</div><div class="xxd-list__meta">渐变 · 14:02</div></div><button class="xxd-btn xxd-reveal" data-variant="ghost" data-size="xs" data-confirm-twice="确认删除">删除</button></li>
      </ul></section>
    </section>
    <section id="sp-p3" style="padding:14px" class="xxd-settings">
      <div class="xxd-group__body"><div class="xxd-account"><span class="xxd-avatar" data-member style="--avatar-size:32px">东</span><div class="xxd-account__main"><div class="xxd-account__name">小小东</div><div class="xxd-plan-line" data-tone="member">会员 · 到 2027年11月8日</div></div><button class="xxd-btn" data-size="sm">管理</button></div></div>
      <section class="xxd-group"><h2 class="xxd-group__title">排序</h2><div class="xxd-group__body">
        <div class="xxd-row"><div class="xxd-row__text"><div class="xxd-row__title">新的一组先用</div></div><div class="xxd-row__control"><label class="xxd-select" data-variant="bare"><select aria-label="新的一组先用"><option>渐变</option><option>原样</option></select></label></div></div>
        <div class="xxd-row"><div class="xxd-row__text"><div class="xxd-row__title">只留图片链接</div><div class="xxd-row__desc">去掉没有图片后缀的链接</div></div><div class="xxd-row__control"><input type="checkbox" role="switch" class="xxd-switch" checked aria-label="只留图片链接"></div></div>
      </div></section>
    </section>
  </main>
  <div class="xxd-statusline">正在读取颜色 12 / 40<button class="xxd-link" type="button">停止</button></div>
  <footer class="xxd-dock" style="position:static">
    <div class="xxd-dock__status">24 张 · 来自 mp.weixin.qq.com</div>
    <div class="xxd-dock__tools"><button class="xxd-btn" data-size="sm">加图片</button><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" aria-label="导出"><i data-xxd-icon="Ellipsis" data-size="16"></i></button></div>
    <div class="xxd-dock__primary"><button class="xxd-btn" data-variant="primary" data-size="sm">复制 24 个链接</button></div>
  </footer>
</div>
```