PVQ-UI 组件提取对照表（wolai / pvq-wp / threads 三套合并）
状态：实施依据（随库增长持续更新） 用途：把三个插件现有的后台设置页组件合并为
pvq-ui的单一实现；迁移时对照本表。 关联：《PVQ-UI组件库开发方案.md》§4、§6、§9。 数据来源：实测三个插件 admin CSS（只读，未改）。
1. 三套体系现状总览
| 维度 | wolai-sync | pvq-wp（基座） | threads-sync |
|---|---|---|---|
| 类前缀 | .pvq-* |
.pvq-wp-* |
.pvq-ts-* |
| 修饰符风格 | BEM 双横线 --primary |
单横线 .pvq-wp-btn-primary |
BEM 双横线 --primary |
| @keyframes 前缀 | pvq- |
pvqWp* |
pvq-ts* |
| 设计令牌 | 完整（森林绿） | 完整 + 多 --pvq-radius-pill；激活主题时*整套映射到 `--pvq-theme-`** |
缺 6 项（见 §5） |
| 组件集完整度 | 最全 | 较少（仅 tabs/card/btn/status-banner） | 中（无磁吸滑块、无 help/range） |
结论：三套不是"数值不同"，而是命名前缀、修饰符风格、动画前缀、令牌完整度、实现哲学全部分裂。最该统一的即下方 8 类通用组件。
2. 逐组件三套对照 + 库定稿 BEM
2.1 按钮（Button）
| 语义 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 基础 | .pvq-btn |
.pvq-wp-btn |
.pvq-ts-btn |
.pvq-btn |
| 主/次/危险/警告 | --primary/--secondary/--danger/--warning |
.pvq-wp-btn-primary(单横线) 等 |
--primary/--secondary/--danger |
--primary/--secondary/--danger/--warning |
| 额外 | — | --ghost/--sm/--icon |
--del |
吸收 --ghost/--sm/--icon/--del |
2.2 卡片（Card）
| 部分 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 容器 | .pvq-card |
.pvq-wp-card |
.pvq-ts-card |
.pvq-card |
| 头部 | .pvq-card-header |
.pvq-wp-card-header(+-left) |
.pvq-ts-card__header |
.pvq-card__header |
| 图标 | .pvq-card-icon+.primary(双类) |
.pvq-wp-card-icon |
（无） | .pvq-card__icon+.pvq-card__icon--primary |
| 标题/描述 | .pvq-card-title/.pvq-card-desc |
.pvq-wp-card-title/desc |
.pvq-ts-card__title/__desc |
.pvq-card__title/.pvq-card__desc |
| 操作 | .pvq-card-action |
（无） | （无） | .pvq-card__action |
2.3 表单 / 输入（Field / Input）
| 部分 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 字段行 | .pvq-field + .pvq-label |
（无） | .pvq-ts-input-row |
.pvq-field + .pvq-field__label |
| 输入容器 | .pvq-input-wrap(+has-icon) |
（无） | .pvq-ts-input-row__content |
.pvq-input__wrap(+--has-icon) |
| 输入控件 | .pvq-input |
（无） | .pvq-ts-input-row input |
.pvq-input |
| 图标/切换 | .pvq-input__icon / .pvq-input__toggle |
（无） | （无） | 保留 .pvq-input__icon/.pvq-input__toggle |
| 帮助文本 | .pvq-field-help |
（无） | .pvq-ts-input-row__hint |
.pvq-field__help |
2.4 开关（Switch）—— 实现哲学差异最大
| 维度 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 结构 | .pvq-switch + JS 切 .active + 隐藏 <input>（非语义化） |
（无） | 真实 <input type=checkbox> + .slider（语义化、纯 CSS） |
吸收 threads 语义化方案 |
| 库类 | — | — | .pvq-ts-switch .slider |
.pvq-switch（包 .pvq-switch__input + .pvq-switch__slider），零 JS 切换 |
决策：淘汰 wolai 的 JS + 隐藏域方案，统一为 threads 的"真实 checkbox +
.slider"。纯 CSS 可切换、可访问性最好、迁移后不依赖库 JS 即可工作。
2.5 选项卡 + 磁吸滑块（Tabs）
| 部分 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 容器/滑块 | .pvq-tabs + .pvq-tab-slider |
.pvq-wp-tabs + .pvq-wp-tab-slider |
（无滑块） | .pvq-tabs + .pvq-tabs__slider |
| 页签 | .pvq-tab+.active(双类) |
.pvq-wp-tab+.active |
.pvq-ts-tab-panel--active(无导航条) |
.pvq-tab+.pvq-tab--active |
| 内容 | .pvq-tab-content+.active |
.pvq-wp-tab-pane+.active |
.pvq-ts-tab-panel--active |
.pvq-tab-content+.pvq-tab-content--active |
决策：磁吸滑块取 wolai/pvq-wp 成熟实现（wolai 更完整，含
__icon）；threads 纯 panel 版不进默认库（如需无滑块变体后续再加）。
2.6 状态横幅（Banner / Connection Status）
| 语义 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 容器 | .pvq-connection-status |
.pvq-wp-status-banner |
.pvq-ts-status__item |
.pvq-banner |
| 成功 | connected |
.pvq-wp-status-connected(带脉冲点) |
--ok |
.pvq-banner--success |
| 危险 | disconnected |
（无） | --err |
.pvq-banner--danger |
| 警告 | unconfigured |
（无） | --info |
.pvq-banner--warning |
| 信息 | （无） | — | --info |
.pvq-banner--info |
修饰符值需变更：
connected→success、disconnected→danger、unconfigured→warning、ok→success、err→danger、info→warning。吸收 pvq-wp 的脉冲点 →.pvq-banner__dot/.pvq-status__dot。
2.7 统计（Stat）
| 部分 | wolai | pvq-wp | threads | 库定稿 |
|---|---|---|---|---|
| 网格 | .pvq-cache-stats |
（无） | .pvq-ts-stats |
.pvq-stat-grid |
| 单元 | .pvq-cache-stat |
（无） | .pvq-ts-stat |
.pvq-stat |
| 数值/标签 | .pvq-cache-stat-value/-label |
（无） | .pvq-ts-stat__value/-label |
.pvq-stat__value/.pvq-stat__label |
决策：合并 wolai 中间层 + threads 的
__value/__label子元素命名。
2.8 帮助卡 / 范围滑块 / 分隔 / 转圈（仅 wolai 有完整实现）
| 组件 | wolai 原类 | 库定稿 |
|---|---|---|
| 帮助卡 | .pvq-help-card(+-inner/-icon/-title/-text) |
.pvq-help(+__icon/__title/__text) |
| 范围滑块 | .pvq-range(+-group/-value/-labels) |
同名 BEM 化 .pvq-range__group/-value/-labels |
| 分隔线 | .pvq-divider |
保留 |
| 转圈 | .pvq-spinner |
保留 .pvq-spinner + @keyframes pvq-spin |
| 状态指示 | .pvq-status-indicator(+success/warning/error) + .pvq-status-dot |
.pvq-status+.pvq-status--{success,warning,error} + .pvq-status__dot |
| 测试结果 | .pvq-test-result(+.show/.success/.error/.loading) |
.pvq-alert(+ 显隐类 + --success/error/loading) |
2.9 选择器（Select）—— threads 独占贡献（1.1.0 新增，experimental）
| 维度 | threads（原） | 库定稿 |
|---|---|---|
| 类前缀 | .pvq-ts-wrap .pvq-ts-trigger .pvq-ts-dropdown .pvq-ts-option .pvq-ts-arrow |
.pvq-select .pvq-select__trigger .pvq-select__dropdown .pvq-select__option .pvq-select__arrow |
| 实现 | jQuery 渐进增强原生 <select>（全局 _instances[name] 映射反查） |
原生 JS 重写：事件委托、闭包持有 {wrap,trigger,selectEl} 引用、去掉 name 映射 |
| 行为 | flip 向上弹 / 右边界贴合 / scroll·resize 重定位 / Enter·Space·Esc / 点外部关 / 同时只开一个 | 同左 1:1 保留（原生 API 等价实现） |
| 挂载 | dropdown 挂 <body> 绕过 WP metabox overflow:hidden 裁剪 |
同左（布局现实，非 jQuery 特性） |
决策：吸收 threads 的自定义下拉方案（库首版 13 个基础组件无选择器）。重写去 jQuery、去全局实例映射，与
pvq-ui.js事件委托铁律一致。首版experimental，ARIAlistbox/option留待 stable 补齐。threads 现有.pvq-ts-*选择器代码暂保留，迁移时再替换。
2.10 进度条（Progress）—— wolai 前端独占（1.2.9 并入 frontend 层）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 | .pvq-wolai-progress |
.pvq-progress |
| 填充 / 文字 | .pvq-wolai-progress-fill / .pvq-wolai-progress-text |
.pvq-progress__fill / .pvq-progress__text |
| 变体 | 大号 / 危险 | --lg / --danger（危险走 --pvq-danger） |
| 颜色 | 硬编码蓝 → 改 | 全走 --pvq-primary 绿（令牌 --pvq-progress-accent） |
决策：wolai 前端进度条原是蓝配色硬编码，并入库时改绿、令牌化；JS 仅设
.pvq-progress__fill的width。
2.11 书签（Bookmark）—— wolai 前端独占（1.2.9 并入 frontend 层）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 | .pvq-wolai-bookmark |
.pvq-bookmark |
| 图片 / 内容 | .pvq-wolai-bookmark-image / .pvq-wolai-bookmark-content |
.pvq-bookmark__image / .pvq-bookmark__content |
| url / 图标 / 标题 / 描述 | .pvq-wolai-bookmark-url / -favicon / -title / -description |
.pvq-bookmark__url / .pvq-bookmark__favicon / .pvq-bookmark__title / .pvq-bookmark__description |
决策：BEM 双横线化；hover 浅绿底 + 稍深边框（新增令牌
--pvq-border-strong）；纯 CSS。
2.12 勾选框（Checkbox）—— wolai 前端独占（1.2.9 并入；末次修订由 frontend 层提升至 base 层）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 / 项 | .pvq-wolai-cb-list / .pvq-wolai-cb-item |
.pvq-cb-list / .pvq-cb-item |
| 自定义勾选 | .pvq-wolai-custom-check(+-box/-mark) |
.pvq-custom-check(+.pvq-cb-box/.pvq-cb-mark) |
| 文本 | .pvq-wolai-cb-text |
.pvq-cb-text |
| 变体 | 删除线 / 幽灵 / 涟漪 | pvq-cb-variant-strike / pvq-cb-variant-ghost / pvq-cb-variant-ripple |
| 颜色 | 硬编码蓝 → 改 | 全走 --pvq-primary 绿（--pvq-cb-* 令牌派生） |
决策：隐藏原生
<input type=checkbox>+:checked +兄弟选择器纯 CSS 打钩；弹性弹入 + 整框脉冲；prefers-reduced-motion关闭动画。新增尺寸修饰符--sm/--lg（--pvq-cb-size/--pvq-cb-radius/--pvq-cb-mark-size令牌）。
2.13 单选按钮（Radio）—— wolai 前端独占（1.2.9 并入；末次修订由 frontend 层提升至 base 层）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 / 项 | .pvq-wolai-rb-group / .pvq-wolai-rb-item |
.pvq-rb-group / .pvq-rb-item |
| 自定义单选 | .pvq-wolai-custom-radio(+-outer/-dot) |
.pvq-custom-radio(+.pvq-rb-outer/.pvq-rb-dot) |
| 文本 | .pvq-wolai-rb-label |
.pvq-rb-label |
| 变体 | 卡片 / 幽灵 / 涟漪 / 纯色 | pvq-rb-variant-card / pvq-rb-variant-ghost / pvq-rb-variant-ripple / pvq-rb-variant-solid |
| 颜色 | 硬编码蓝 → 改 | 全走 --pvq-primary 绿（--pvq-rb-* 令牌派生） |
决策：隐藏原生
<input type=radio>+:checked +兄弟选择器纯 CSS；卡片变体用:has(input:checked)高亮整行；新增尺寸修饰符--sm/--lg（--pvq-rb-size/--pvq-rb-dot-size令牌）。
2.14 卡片化表格（Table）—— wolai 前端独占（1.2.9 并入 frontend 层）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 / 行 | .pvq-wolai-simple-table(+-wrap) |
.pvq-table(+.pvq-table-wrap) |
| 单元格 | 原生 th/td |
同左；单元格独立圆角卡片、彼此 0.3em 间隙（border-collapse:separate） |
| 表头 | 蓝底 → 改 | 绿底 --pvq-table-head-bg（令牌） |
| 斑马纹 / 列对齐 | .pvq-wolai-simple-table--striped / -col-right/center |
.pvq-table--striped / .pvq-table__col--right/center |
决策：对齐 buke.css
.pvq-wolai-simple-table观感（卡片单元 + 悬停微放大）。整表对齐/边框/紧凑等变体在卡片语境下不成立（已不提供）。表头 radius 用--pvq-radius-md（8px，圆角方形而非胶囊）。
2.15 数据表格（DataGrid）—— wolai 前端独占（1.2.9 并入 frontend 层，含 JS）
| 维度 | wolai（原） | 库定稿 |
|---|---|---|
| 容器 | .pvq-wolai-datagrid(+-toolbar/-content/-table/-empty) |
.pvq-datagrid(+.pvq-datagrid__toolbar/-content/-table/-empty) |
| 搜索 | 单独 .pvq-wolai-search-* + 弹出容器 |
自包含胶囊 .pvq-datagrid__search（折叠为圆图标，点图标原地展开成输入框，点栏外空白收起） |
| 排序 | 静态箭头 | .pvq-datagrid__btn--sort 三态循环（无/升/降），点头列或按钮触发 |
| 筛选 | 弹出面板 | 自包含胶囊 .pvq-datagrid__filter（展开「列 + 值」双自绘下拉多选，点栏外空白收起） |
| 重置 | — | .pvq-datagrid__btn--reset（旋转图标，清空搜索/筛选/排序） |
| 颜色 | 蓝 → 改 | 全走 --pvq-primary 绿 |
决策：照搬 wolai
frontend.js的openSearchBox()/closeSearchBox()就地展开语义 + buke.css 白底绿框意图；搜索/筛选做成自包含药丸（图标即按钮本体），避免旧版「图标与框脱节」的 bug。库 JSinitDataGrids()（随initAll自动调用、幂等）接管搜索/排序/筛选/重置 + 入场动画；筛选下拉菜单按th[data-col]与单元格值自动生成，无需手写<option>。
2.16 锚点浮层（Popover）—— 跨插件回流（v1.3.1，非三套原有组件）
来源不是 wolai / threads / pvq-wp 三套存量，而是 pvq-weixinyuedu 插件提出的新需求（《回流需求-pvq-ui-浮层组件.md》）：把微信读书点评以悬浮卡片呈现在引语旁。按《项目规则》§2「通用能力只存在于库；发现缺失 → 回流到库」收编，故本表不是「原类名 → 库类名」的迁移映射，而是「插件自造构件 → 库组件」的收敛对照。
| 维度 | 插件自造（pvq-weixinyuedu） | 库定稿 |
|---|---|---|
| 浮层外壳 | .pvq-wr-thought（fixed + --open + 全部定位样式） |
.pvq-popover |
| 内容 / 脚注 | .pvq-wr-thought__body / __time |
.pvq-popover__body / .pvq-popover__foot |
| 箭头 | 无 | .pvq-popover__arrow（JS 写 --pvq-arrow-x 对准锚点中心） |
| 打开态 | .pvq-wr-thought--open |
.pvq-popover--open（另新增 --above：JS 判定的上方位置） |
| 显隐分支 | .pvq-wr-js（head 同步脚本加类消 FOUC） |
删除——库默认即浮层态，thought-boot.js 可删 |
| 定位 / 交互 JS | thought.js（place() / 翻转 / CLOSE_DELAY / EXIT_MS） |
PVQUI.popover() / initPopovers()（并入 initAll，幂等） |
| 触发属性 | data-pvq-thought-trigger + aria-describedby |
data-pvq-popover="<浮层 id>"（aria-describedby 仍兼容） |
| 颜色 | 插件自定 | *全走 `--pvq-**；仅布局令牌--pvq-popover-width/--pvq-popover-z` |
决策：① 定位用
position:fixed+getBoundingClientRect()写内联top/left，不用 absolute——absolute 必须假定业务容器是定位上下文，而那是业务的自由，库不该假定，故组件不依赖任何祖先position；② 库默认即浮层态、不设.pvq-js渐进分支，既省掉调用方的 head 同步脚本，也明确「无 JS 时浮层不可见、信息兜底归调用方」；③ 显式声明font-size/line-height，并用.pvq-popover .pvq-popover__body（0,2,0）压过主题.entry-content p（0,1,1），使浮层内容不被正文主题放大。稳定性experimental，待 weixinyuedu 收敛验证后转stable。
3. 择优合并决策汇总
| 组件 | 取谁的方案 | 理由 |
|---|---|---|
| 按钮 | wolai（双横线 BEM） | 最规范、修饰符最全 |
| 卡片 | wolai 体系 + threads __header/__title/__desc 子元素结构 |
wolai 含 icon 配色，threads 子元素更标准 |
| 输入/字段 | wolai | 最完整（wrap/icon/toggle/help） |
| 开关 | threads 语义化方案 | 真实 checkbox + .slider，零 JS、可访问性最好 |
| 选项卡/磁吸滑块 | wolai | 最成熟（含 __icon） |
| 状态横幅 | 三处合并 | 统一语义修饰符 + 吸收 pvq-wp 脉冲点 |
| 统计 | wolai + threads 子元素命名 | 合并最优 |
| 帮助/范围/分隔/转圈 | wolai | 直接提取改名 |
| 选择器 | threads 自定义下拉 | 吸收 threads 方案，原生 JS 重写去 jQuery、去全局映射 |
统一规则：类名前缀全收敛为 .pvq-*；修饰符统一 BEM 双横线；@keyframes 统一 pvq- 前缀；令牌统一一套（§5）。
4. 设计令牌统一清单（合并后全集）
以 wolai admin-settings.css:11-62 的 :root 为基线，吸收 pvq-wp 的 --pvq-radius-pill，并补齐 threads 缺失项。库作为"纯令牌提供方"，不假设 --pvq-theme-* 存在（pvq-wp 主题激活时自行 override）。
- 主色：
--pvq-primary--pvq-primary-hover--pvq-primary-light--pvq-primary-soft--pvq-primary-glow--pvq-primary-gradient--pvq-primary-gradient-hover - 语义色：
--pvq-success--pvq-danger--pvq-warning--pvq-info+ 各自--*-light - 中性色：
--pvq-bg--pvq-surface--pvq-surface-hover--pvq-border--pvq-border-light--pvq-text--pvq-text-secondary--pvq-text-muted - 圆角：
--pvq-radius-sm--pvq-radius--pvq-radius-lg--pvq-radius-xl--pvq-radius-pill(来自 pvq-wp) - 阴影：
--pvq-shadow-sm--pvq-shadow--pvq-shadow-md--pvq-shadow-lg(来自 pvq-wp)--pvq-shadow-primary(来自 pvq-wp) - 缓动：
--pvq-ease--pvq-ease-bounce--pvq-ease-magnet(来自 pvq-wp)--pvq-ease-smooth(来自 pvq-wp) - 过渡：
--pvq-transition--pvq-transition-fast--pvq-transition-slow(来自 pvq-wp) - 尺寸补充：
--pvq-input-h(来自 threads)
threads 缺失的 6 项（radius-xl / shadow-lg / shadow-primary / ease-magnet / ease-smooth / transition-slow）正好等于 pvq-wp 多出的项 → 并集即完整集。
5. 迁移代价与顺序
| 插件 | 代价 | 主要工作 |
|---|---|---|
| wolai-sync | 最小 | 本就是提取源；删冗余 + 结构微调（switch 改语义化、help-card→help、cache-stat→stat、connection-status→banner、@keyframes 前缀已是 pvq-） |
| pvq-wp | 中等 | .pvq-wp-*→.pvq-*、单横线→双横线；补开关/输入/统计/帮助组件；令牌保留映射逻辑但由库提供默认 |
| threads-sync | 最大 | .pvq-ts-*→.pvq-*；stats/input 结构改名；令牌补齐；@keyframes pvq-ts*→pvq-；开关已是语义化，基本沿用 |
落地顺序：① 提升 wolai → pvq-ui 首版（base/admin/editor/frontend + loader + js）；② pvq-wp 改调库；③ threads-sync 改调库。