面板 UI 组件库（wad.ui.*）

面板固定亮色主题，开发者只需要写一套样式。宿主会在插件 <head> 最前面注入 /ui/plugin-base.css，即使一行 CSS 都不写，控件外观也一致。

只在面板可用

wad.ui 的组件库只存在于面板。逻辑层与渲染层只有 wad.ui.toast()（渲染层是页面内 DOM toast）。

构建器

方法	签名	说明
wad.ui.el	el(tag, attrs?, children?) → Element	通用元素，onClick/onInput/onChange 特判
wad.ui.button	button(label, onClick, opts?) → Element	opts.ghost / small / danger / block
wad.ui.card	card({title?, desc?, children?, actions?}) → Element	卡片容器
wad.ui.input	input({type?, placeholder?, value?, onInput?, onChange?}) → Element	输入框
wad.ui.select	select({options, value?, onChange?}) → Element	options 支持字符串或 {value,label}
wad.ui.field	field(label, control) → Element	带标签的字段行
wad.ui.badge	badge(text, gray?) → Element	徽标
wad.ui.row	row(children?, cls?) → Element	横排
wad.ui.col	col(children?) → Element	竖排
wad.ui.mount	mount(element) → Element	挂到面板 body

壳交互

方法	说明
wad.ui.toast(text)	宿主 Toast（面板 / 逻辑层都可用）
wad.ui.setTitle(text)	改面板标题
wad.ui.close()	关闭浮窗
wad.ui.setSize(w, h)	调整面板尺寸，0 表示不限

完整示例

<body>
<script src="/ui/plugin-sdk.js"></script>
<script>
  wad.ready.then(function () {
    const U = wad.ui;

    const kw = U.input({ placeholder: 'URL 关键字', onInput: save });
    const method = U.select({ options: ['GET', 'POST'], value: 'GET', onChange: save });
    const status = U.badge('待捕获', true);

    function save() {
      wad.storage.set('watch', { kw: kw.value, method: method.value });
    }

    const startBtn = U.button('开始监听', function () {
      wad.storage.set('watch', { kw: kw.value, method: method.value });
      status.textContent = '监听中';
      watch();
    }, { block: true });

    U.mount(U.card({
      title: '请求监听',
      desc: '匹配的请求会实时 Toast',
      children: [
        U.field('URL 包含', kw),
        U.field('方法', method),
        U.row([status])
      ],
      actions: [startBtn]
    }));

    // storage 是异步的，必须 .then
    wad.storage.get('watch').then(function (cfg) {
      if (cfg && cfg.kw) kw.value = cfg.kw;
    });

    wad.on('network', function (e) {
      wad.storage.get('watch').then(function (cfg) {
        if (cfg && cfg.kw && e.url.indexOf(cfg.kw) >= 0) {
          U.toast(e.method + ' ' + e.status + ' ' + e.url.slice(0, 48));
        }
      });
    });
  });
</script>
</body>

storage 是异步的

UI 回调里直接同步读 wad.storage.get 会拿到 Promise。务必 .then 或 await。

表格展示

wad.ui.mount(wad.ui.card({
  title: '最近请求',
  children: [pre(list.map(function (r) {
    return r.status + '  ' + r.method + '  ' + r.url;
  }).join('\n'))]
}));

function pre(text) {
  const p = wad.ui.el('pre', { style: 'max-height:200px;overflow:auto' });
  p.textContent = text;
  return p;
}

自定义样式

想完全自己控制外观，可以不使用组件库，直接写 HTML + CSS。宿主注入的 plugin-base.css 只提供基础 reset 与控件默认样式，不会覆盖你的类名。

<style>
  .my-row { display: flex; gap: 8px; align-items: center; }
  .my-row b { color: #0a7d4c; }
</style>

尺寸建议

场景	建议尺寸
小型开关 / 提示	280 × 200
列表 + 详情	340 × 420
复杂工具台	使用 setSize(0, 0) 自适应

面板是手机上的浮窗，宽度不建议超过 360。

下一步

• 网络抓包与改包
• 存储