@debug-mate/client-ui

简约调试控制面板 —— 零框架、纯原生 TS，样式隔离在 shadow DOM 内，不污染宿主页面。被业务项目引用时体积极小（~5.6 kB gzip）。

一句 DevSettings.need(...) 声明一个调试变量，它就出现在页面的悬浮控制面板里，可实时修改并联动页面逻辑。

安装

npm i @debug-mate/client-ui
# 或 pnpm add / yarn add

快速开始

import { DevSettings } from '@debug-mate/client-ui'

// 声明一个调试变量，返回响应式句柄
const interval = DevSettings.need('lock-interval', {
  label: '锁屏时间(秒)',
  component: 'slider',
  min: 0,
  max: 3600,
  initialValue: 900,
})

console.log(interval.value)          // 读取当前值
interval.subscribe(v => render(v))   // 值变化时实时响应

DevSettings.mount({ iconPosition: 'bottom-right' })  // 挂载悬浮面板
DevSettings.toggle()                 // 可绑定到快捷键，开合面板

控件类型

component 支持：text、number、switch、select、slider、color、button。 可用 group 归类、order 排序、onChange 监听变化、persist 控制是否持久化到 localStorage。

按需挂载

工具默认不挂载，满足任一触发条件时才出现图标：

DevSettings.enableWhen({
  // 控制台输入 __enableDebugMate() 即挂载（默认开启）
  urlParam: 'debug',            // 或 URL 带 ?debug=1 时挂载
  storageKey: '__debug_mate_on',// 或 localStorage 开关
})

请求头注入

内置公开 API，为页面所有 fetch / XHR 统一注入请求头（不出现在面板 UI 中）：

import { interceptRequest } from '@debug-mate/client-ui'

const off = interceptRequest(() => ({ Authorization: `Bearer ${getToken()}` }))
// off() 取消注入并在无其它注入时恢复原生实现

API 概览

| 方法 | 说明 | | --- | --- | | need(key, config) | 声明/复用调试变量，返回 { value, get, set, subscribe } 句柄 | | get(key) / set(key, v) | 读写变量值 | | subscribe(key, cb) | 订阅变化，返回取消函数 | | mount(options) | 挂载面板（iconPosition / title / persist / target 等） | | enableWhen(options) | 按条件挂载（控制台 / URL / localStorage / 自定义触发器） | | open / close / toggle / isOpen | 面板开合控制 | | interceptRequest(provider) | 全局注入 fetch / XHR 请求头 | | config(options) | 挂载前预设默认选项 | | unmount / reset | 卸载 / 卸载并清空所有变量 |

License

MIT