组件提取对照表
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-*选择器代码暂保留，迁移时再替换。
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 改调库。