PVQ-UI 组件库
所有 PVQ 插件共享的界面样式唯一真源。本页所有组件直接引用 COS CDN 上的真实库样式，所见即所得——库版本更新后刷新即同步。
设计令牌
Design Tokens库的视觉语言全部由 CSS 自定义属性驱动。插件应优先引用令牌而非硬编码颜色，以保证全站风格统一。
色彩
圆角
阴影
缓动与过渡
按钮 Button
Base · stable类 .pvq-btn，修饰符 --primary / --secondary / --danger / --warning / --ghost / --sm / --icon；组合 .pvq-btn-group 右对齐。
变体 #
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><button class="pvq-btn pvq-btn--primary"><i class="fas fa-save"></i> 保存</button><button class="pvq-btn pvq-btn--secondary">取消</button><button class="pvq-btn pvq-btn--danger"><i class="fas fa-trash"></i> 删除</button><button class="pvq-btn pvq-btn--warning"><i class="fas fa-exclamation-triangle"></i> 警告</button><button class="pvq-btn pvq-btn--ghost">幽灵</button></div>尺寸与图标按钮 #
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><button class="pvq-btn pvq-btn--primary pvq-btn--sm">小号</button><button class="pvq-btn pvq-btn--primary pvq-btn--icon"><i class="fas fa-plus"></i></button><button class="pvq-btn pvq-btn--secondary pvq-btn--icon"><i class="fas fa-cog"></i></button><button class="pvq-btn pvq-btn--ghost pvq-btn--icon"><i class="fas fa-ellipsis-v"></i></button></div>按钮组 #
<div class="pvq-btn-group"><button class="pvq-btn pvq-btn--secondary">重置</button><button class="pvq-btn pvq-btn--primary">保存更改</button></div>删除按钮与二次确认 #
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><button class="pvq-btn pvq-btn--danger"><i class="fas fa-trash"></i> 删除</button><button class="pvq-btn pvq-btn--danger pvq-btn--icon"><i class="fas fa-trash"></i></button><button class="pvq-btn pvq-btn--danger pvq-btn--sm"><i class="fas fa-trash"></i> 删除</button><button class="pvq-btn pvq-btn--danger" data-pvq-confirm="确定删除该项？"><i class="fas fa-trash"></i> 删除（二次确认）</button></div>卡片 Card
Base · stable类 .pvq-card，子元素 __header / __icon / __title / __desc / __action，图标修饰符 --primary / --success / --warning / --info / --danger。
示例 #
连接设置
配置你的账号信息与同步范围
<div class="pvq-card" style="max-width:460px"><div class="pvq-card__header"><span class="pvq-card__icon pvq-card__icon--primary"><i class="fas fa-plug"></i></span><div><h3 class="pvq-card__title">连接设置</h3><p class="pvq-card__desc">配置你的账号信息与同步范围</p></div></div><div class="pvq-card__action"><button class="pvq-btn pvq-btn--primary">保存</button></div></div>表单 Field / Input
Base · stable类 .pvq-field / .pvq-input，包裹层 .pvq-input__wrap 配 --has-icon 与 .pvq-input__icon、.pvq-input__toggle（由 pvq-ui.js 自动初始化，切换 type=password/text）。校验状态：.pvq-field--error 红框 + 红字 + 红 focus 辉光、.pvq-field--success 绿框、.pvq-field__label--required 必填 * 标记、.pvq-field__error 错误文案槽（纯 CSS、零 JS）。附加变体（纯 CSS）：前后缀 .pvq-affix-group / .pvq-affix / .pvq-affix--suffix（joined segment，内部 input 去边框）、输入组 .pvq-input-group + .pvq-input-group__btn（--ghost 幽灵）、清除 .pvq-input__clear 配 .pvq-input__wrap--has-clear（绝对定位 ✕，一键清空）。
示例 #
在设置页获取你的 Token，切勿泄露。
<div style="max-width:420px"><div class="pvq-field"><label class="pvq-field__label">API Token</label><div class="pvq-input__wrap pvq-input__wrap--has-icon"><i class="pvq-input__icon fas fa-key"></i><input class="pvq-input" type="text" placeholder="请输入 Token"></div><p class="pvq-field__help">在设置页获取你的 Token，<code>切勿泄露</code>。</p></div><div class="pvq-field"><label class="pvq-field__label">密码</label><div class="pvq-input__wrap pvq-input__wrap--has-icon pvq-input__wrap--has-toggle"><i class="pvq-input__icon fas fa-lock"></i><input class="pvq-input" type="password" value="secret123"><button class="pvq-input__toggle" type="button"><i class="fas fa-eye"></i></button></div></div></div>Size: sm 对比 #
<div style="max-width:420px;display:flex;gap:12px;align-items:center"><input class="pvq-input pvq-input--sm" type="text" value="小号" style="width:120px"><input class="pvq-input" type="text" value="默认" style="width:120px"></div>校验状态 error / success #
请输入有效的邮箱地址
连接测试通过
<div style="max-width:420px"><div class="pvq-field pvq-field--error"><label class="pvq-field__label pvq-field__label--required">邮箱地址</label><input class="pvq-input" type="text" value="not-an-email"><p class="pvq-field__error"><i class="fas fa-circle-exclamation"></i> 请输入有效的邮箱地址</p></div><div class="pvq-field pvq-field--success"><label class="pvq-field__label">数据库连接</label><input class="pvq-input" type="text" value="mysql://127.0.0.1:3306"><p class="pvq-field__success"><i class="fas fa-circle-check"></i> 连接测试通过</p></div></div>前后缀单位（prefix / suffix） #
https://
px
<div style="max-width:420px"><div class="pvq-field"><label class="pvq-field__label">站点地址</label><div class="pvq-affix-group"><span class="pvq-affix">https://</span><input class="pvq-input" type="text" value="example.com"></div></div><div class="pvq-field"><label class="pvq-field__label">缩略图宽度</label><div class="pvq-affix-group"><input class="pvq-input" type="text" value="320" style="text-align:right"><span class="pvq-affix pvq-affix--suffix">px</span></div></div></div>输入组（input + 按钮）& 清除 #
<div style="max-width:420px"><div class="pvq-field"><label class="pvq-field__label">Webhook 地址</label><div class="pvq-input-group"><input class="pvq-input" type="text" value="https://hooks.pvq.ink/abc123"><button type="button" class="pvq-input-group__btn pvq-input-group__btn--ghost"><i class="fas fa-copy"></i> 复制</button></div></div><div class="pvq-field"><label class="pvq-field__label">搜索</label><div class="pvq-input-group"><div class="pvq-input__wrap pvq-input__wrap--has-icon pvq-input__wrap--has-clear"><i class="pvq-input__icon fas fa-magnifying-glass"></i><input class="pvq-input" type="text" value="同步"><button type="button" class="pvq-input__clear"><i class="fas fa-xmark"></i></button></div><button type="button" class="pvq-input-group__btn"><i class="fas fa-magnifying-glass"></i> 搜索</button></div></div></div>长文本输入框 Textarea
Base · stable类 .pvq-textarea，配合 .pvq-field 容器使用；变体 --sm（小号）。与 .pvq-input 同源视觉：边框 + 圆角 + focus 辉光；resize: vertical 仅允许纵向拖拽。选择器 textarea.pvq-textarea.pvq-textarea（0,2,1）压过 WP 核心。
默认 #
支持多行，可纵向拖拽调整高度。
<div style="max-width:480px"><div class="pvq-field"><label class="pvq-field__label">备注</label><textarea class="pvq-textarea" placeholder="请输入详细描述…"></textarea><p class="pvq-field__help">支持多行，可纵向拖拽调整高度。</p></div></div>小号 / 禁用 #
<div style="max-width:480px;display:flex;gap:12px;align-items:flex-start"><textarea class="pvq-textarea pvq-textarea--sm" placeholder="短备注" style="width:200px"></textarea><textarea class="pvq-textarea" disabled style="width:200px">已归档，不可编辑</textarea></div>选择器 Select
Base · experimental渐进增强原生 <select> 的自定义下拉。类 .pvq-select 内放原生 <select>（保留 name / value / disabled，表单照常提交）；库 JS 自动渲染触发器与 body 级下拉。支持 flip 向上弹、边界贴合、滚动重定位、键盘与点击外部关闭。可选玻璃磨砂下拉变体 pvq-select--glass（半透明 + blur）。
基础 #
<div class="pvq-select"><select name="pvq_demo_mode"><option value="auto">自动同步</option><option value="manual" selected>手动同步</option><option value="off">关闭</option></select></div>禁用项与表单包裹 #
<div style="max-width:420px"><div class="pvq-field"><label class="pvq-field__label">同步区域</label><div class="pvq-select"><select name="pvq_demo_region"><option value="cn" selected>中国大陆</option><option value="hk">中国香港</option><option value="tw" disabled>中国台湾（暂未开放）</option><option value="sg">新加坡</option></select></div></div></div>玻璃下拉 · --glass #
<div style="border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#4f7a63 0%,#7ec3a5 28%,#6086c9 55%,#8a6bc9 78%,#c96a6a 100%);padding:16px 16px 130px"><div class="pvq-select pvq-select--glass"><select name="pvq_demo_glass"><option value="a" selected>磨砂面板选项</option><option value="b">选项二</option><option value="c">选项三</option></select></div></div>开关 Switch
Base · stable（纯 CSS）语义化结构：.pvq-switch 包真实 <input type="checkbox"> + .pvq-switch__slider，由 :checked 控制，零 JS。整行用 .pvq-switch-row。
示例 #
启用同步
开启后自动同步新内容
调试模式
输出详细日志到控制台
<div style="max-width:420px"><div class="pvq-switch-row"><div><div class="pvq-switch-row__label">启用同步</div><div class="pvq-switch-row__desc">开启后自动同步新内容</div></div><label class="pvq-switch"><input type="checkbox" class="pvq-switch__input" checked><span class="pvq-switch__slider"></span></label></div><div class="pvq-switch-row"><div><div class="pvq-switch-row__label">调试模式</div><div class="pvq-switch-row__desc">输出详细日志到控制台</div></div><label class="pvq-switch"><input type="checkbox" class="pvq-switch__input"><span class="pvq-switch__slider"></span></label></div></div>勾选框 Checkbox
Base · stable（1.2.9 并入 · 末次修订提升至 base 层）结构 label.pvq-cb-item 包隐藏原生 <input type="checkbox"> + span.pvq-custom-check（.pvq-cb-box + span.pvq-cb-mark ✓）+ span.pvq-cb-text，容器 .pvq-cb-list。三变体 pvq-cb-variant-strike（勾选删除线）/ pvq-cb-variant-ghost（透明底圆角）/ pvq-cb-variant-ripple（圆形 + 波纹）。尺寸 --sm（24px）/ 默认（32px）/ --lg（40px）。纯 CSS，颜色全走 --pvq-primary。归属 base 层（pvq-ui.css），故仅 enqueue(['admin']) 的后台也可用（1.2.9 并入；末次修订由 frontend 层提升至 base）。
变体：删除线 / 幽灵 / 涟漪 #
<div style="display:flex;flex-direction:column;gap:24px"><div class="pvq-cb-variant-strike"><div class="pvq-cb-list"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">默认选中<small>strikethrough</small></span></label><label class="pvq-cb-item"><input type="checkbox"><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">未选中</span></label></div></div><div class="pvq-cb-variant-ghost"><div class="pvq-cb-list"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">幽灵变体</span></label></div></div><div class="pvq-cb-variant-ripple"><div class="pvq-cb-list"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">涟漪变体</span></label></div></div></div>尺寸：sm / 默认 / lg #
<div class="pvq-cb-variant-strike" style="display:flex;gap:24px;flex-wrap:wrap"><div class="pvq-cb-list pvq-cb-list--sm"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">sm</span></label></div><div class="pvq-cb-list"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">默认</span></label></div><div class="pvq-cb-list pvq-cb-list--lg"><label class="pvq-cb-item"><input type="checkbox" checked><span class="pvq-custom-check"><span class="pvq-cb-box"></span><span class="pvq-cb-mark">✓</span></span><span class="pvq-cb-text">lg</span></label></div></div>单选按钮 Radio
Base · stable（1.2.9 并入 · 末次修订提升至 base 层）结构 label.pvq-rb-item 包隐藏原生 <input type="radio"> + span.pvq-custom-radio（.pvq-rb-outer + span.pvq-rb-dot）+ span.pvq-rb-label，容器 .pvq-rb-group。四变体 pvq-rb-variant-card（选中高亮整行）/ pvq-rb-variant-ghost / pvq-rb-variant-ripple / pvq-rb-variant-solid（纯色填充）。尺寸 --sm / 默认 / --lg。纯 CSS，颜色全走 --pvq-primary。归属 base 层（pvq-ui.css），故仅 enqueue(['admin']) 的后台也可用（1.2.9 并入；末次修订由 frontend 层提升至 base）。
变体：卡片 / 幽灵 / 涟漪 / 纯色 #
<div style="display:flex;flex-direction:column;gap:24px"><div class="pvq-rb-variant-card"><div class="pvq-rb-group"><label class="pvq-rb-item"><input type="radio" name="rb-card" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">标准套餐<small>card</small></span></label><label class="pvq-rb-item"><input type="radio" name="rb-card"><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">专业套餐</span></label></div></div><div class="pvq-rb-variant-ghost"><div class="pvq-rb-group"><label class="pvq-rb-item"><input type="radio" name="rb-ghost" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">幽灵 ghost</span></label></div></div><div class="pvq-rb-variant-ripple"><div class="pvq-rb-group"><label class="pvq-rb-item"><input type="radio" name="rb-ripple" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">涟漪 ripple</span></label></div></div><div class="pvq-rb-variant-solid"><div class="pvq-rb-group"><label class="pvq-rb-item"><input type="radio" name="rb-solid" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">纯色 solid</span></label></div></div></div>尺寸：sm / 默认 / lg #
<div class="pvq-rb-variant-solid" style="display:flex;gap:24px;flex-wrap:wrap"><div class="pvq-rb-group pvq-rb-group--sm"><label class="pvq-rb-item"><input type="radio" name="rb-sm" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">sm</span></label></div><div class="pvq-rb-group"><label class="pvq-rb-item"><input type="radio" name="rb-md" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">默认</span></label></div><div class="pvq-rb-group pvq-rb-group--lg"><label class="pvq-rb-item"><input type="radio" name="rb-lg" checked><span class="pvq-custom-radio"><span class="pvq-rb-outer"></span><span class="pvq-rb-dot"></span></span><span class="pvq-rb-label">lg</span></label></div></div>状态指示 Status
Base · stable类 .pvq-status 配 --success / --warning / --error，圆点 .pvq-status__dot 带脉冲动画。
示例 #
已连接 待配置 已断开
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><span class="pvq-status pvq-status--success"><span class="pvq-status__dot"></span> 已连接</span><span class="pvq-status pvq-status--warning"><span class="pvq-status__dot"></span> 待配置</span><span class="pvq-status pvq-status--error"><span class="pvq-status__dot"></span> 已断开</span></div>徽标 Badge
Base · stable类 .pvq-badge，主色浅底，用于版本号 / 标签。
示例 #
v1.3.18stable
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><span class="pvq-badge">v1.3.18</span><span class="pvq-badge">stable</span></div>横幅 Banner
Base · stable类 .pvq-banner 配 --success / --danger / --warning / --info，含 __dot / __title / __text，可选 __close（关闭按钮）。待办/提醒类横幅加 <button class="pvq-banner__close" data-pvq-banner-close> 后，库 JS initBanners()（initAll 自动调用、幂等）接管点击：播离场后移除节点并派发 pvq-banner:close（detail: {banner}）供插件写入关闭记忆（user_meta / localStorage）；库不碰 storage，记忆策略归插件。不含 __close 的横幅行为完全不变（向后兼容）。
示例 #
<div style="max-width:480px"><div class="pvq-banner pvq-banner--success"><span class="pvq-banner__dot"></span><div><div class="pvq-banner__title">已连接</div><div class="pvq-banner__text">账号验证通过，可开始同步</div></div></div><div class="pvq-banner pvq-banner--warning"><span class="pvq-banner__dot"></span><div><div class="pvq-banner__title">未配置</div><div class="pvq-banner__text">请先填写 Token 再同步</div></div></div><div class="pvq-banner pvq-banner--danger"><span class="pvq-banner__dot"></span><div><div class="pvq-banner__title">已断开</div><div class="pvq-banner__text">连接失败，请检查网络</div></div></div></div>可关闭横幅（__close + data-pvq-banner-close） #
<div style="max-width:480px"><div class="pvq-banner pvq-banner--warning"><span class="pvq-banner__dot"></span><div><div class="pvq-banner__title">尚未配置 Token</div><div class="pvq-banner__text">前往「设置 → 连接」完成授权后可立即同步。</div></div><button type="button" class="pvq-banner__close" data-pvq-banner-close aria-label="关闭">✕</button></div><div class="pvq-banner pvq-banner--info" style="margin-top:12px"><span class="pvq-banner__dot"></span><div><div class="pvq-banner__title">新版本可用</div><div class="pvq-banner__text">升级后可解锁批量同步。</div></div><button type="button" class="pvq-banner__close" data-pvq-banner-close aria-label="关闭">✕</button></div></div>提示 Alert
Base · stable类 .pvq-alert 配 --success / --error / --loading，显隐由 .pvq-alert--show 控制（下方为显示态示例）。
示例 #
测试通过，连接正常
连接失败，请重试
<div style="max-width:480px"><div class="pvq-alert pvq-alert--show pvq-alert--success"><i class="fas fa-check-circle"></i> 测试通过，连接正常</div><div class="pvq-alert pvq-alert--show pvq-alert--error" style="margin-top:12px"><i class="fas fa-times-circle"></i> 连接失败，请重试</div></div>浮层通知 Toast
Base · experimental一次操作的即时结论：出现在右上角、短暂停留后自动消失，弥补 .pvq-alert（页面内内联）无法承担短时反馈的缺口。类 .pvq-toast-layer（容器，由库 JS 惰性创建并挂到 body，JS 未加载则无 DOM 残留）与 .pvq-toast（单条，含 __icon/__body>__title+可选 __desc/__close），变体 --success / --error / --warning / --info（--danger 为 --error 别名）。形状归库、颜色归令牌：组件只定义 --pvq-toast-accent（左侧色条与图标），布局令牌 --pvq-toast-offset-y/-x 默认 20px 为中性值（前台无 admin bar 也不留空白；WP 后台可在 body 覆写 44px 让开 admin bar）。层级 z-index:100002 刻意高于 .pvq-modal 遮罩（100001），保证「弹窗确认 → 操作结果」链路中结果可见。JS 双入口：命令式 PVQUI.toast({type,title,desc,duration}) 与声明式 [data-pvq-toast]（配 data-pvq-toast-{type,title,desc,duration}，无 inline handler）；默认时长 success/info 3s、warning 5s、error 8s，duration:0 则需手动关闭。悬停暂停倒计时、移开继续；同屏最多 4 条（超出挤走最旧）；单条 success/info 为 role="status"、error/warning 为 role="alert"，而容器不挂 aria-live（避免插入容器时被整段朗读）；事件 pvq-toast:open / pvq-toast:close（detail: {toast, el, type, reason}）。initToasts() 随 initAll 调用且只确保容器存在——因 initAll 也绑在 resize 上，若在初始化里清理 toast 会导致窗口一缩放通知就消失。明确不做：点击跳转 / 承载操作按钮 / 进度条 / 声音通知。
四种状态外观（预览框内为相对定位，实际由 JS 创建右上角浮层） #
设置已保存
共更新 3 项配置
连接失败
Token 无效或已过期，请重新授权
配额即将用尽
今日剩余 12 次调用
正在同步
预计 30 秒后完成
<div class="pvq-toast-layer" style="position:relative;top:auto;right:auto;width:100%;max-width:420px" role="region" aria-label="通知"><div class="pvq-toast pvq-toast--success"><i class="pvq-toast__icon fas fa-circle-check"></i><div class="pvq-toast__body"><div class="pvq-toast__title">设置已保存</div><div class="pvq-toast__desc">共更新 3 项配置</div></div><button type="button" class="pvq-toast__close" aria-label="关闭">✕</button></div><div class="pvq-toast pvq-toast--error"><i class="pvq-toast__icon fas fa-circle-exclamation"></i><div class="pvq-toast__body"><div class="pvq-toast__title">连接失败</div><div class="pvq-toast__desc">Token 无效或已过期，请重新授权</div></div><button type="button" class="pvq-toast__close" aria-label="关闭">✕</button></div><div class="pvq-toast pvq-toast--warning"><i class="pvq-toast__icon fas fa-triangle-exclamation"></i><div class="pvq-toast__body"><div class="pvq-toast__title">配额即将用尽</div><div class="pvq-toast__desc">今日剩余 12 次调用</div></div><button type="button" class="pvq-toast__close" aria-label="关闭">✕</button></div><div class="pvq-toast pvq-toast--info"><i class="pvq-toast__icon fas fa-circle-info"></i><div class="pvq-toast__body"><div class="pvq-toast__title">正在同步</div><div class="pvq-toast__desc">预计 30 秒后完成</div></div><button type="button" class="pvq-toast__close" aria-label="关闭">✕</button></div></div>真实用法：点击按钮触发（右上角浮层，悬停暂停倒计时） #
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"><button type="button" class="pvq-btn pvq-btn--primary" data-pvq-toast data-pvq-toast-type="success" data-pvq-toast-title="设置已保存" data-pvq-toast-desc="共更新 3 项配置">成功（3 秒自动消失）</button><button type="button" class="pvq-btn pvq-btn--ghost" data-pvq-toast data-pvq-toast-type="warning" data-pvq-toast-title="配额即将用尽" data-pvq-toast-desc="今日剩余 12 次调用">警告（5 秒）</button><button type="button" class="pvq-btn pvq-btn--danger" data-pvq-toast data-pvq-toast-type="error" data-pvq-toast-title="连接失败" data-pvq-toast-desc="Token 无效，需手动关闭" data-pvq-toast-duration="0">错误（常驻，需关闭）</button></div>锚点浮层 Popover
Base · experimental以某元素为锚、脱离文档流、按需显隐的浮层（术语解释 / 作者卡 / 预览 / 迷你详情），回流自 pvq-weixinyuedu。与既有组件的分工：.pvq-card 是常驻容器（无定位 / 无开合）、.pvq-collapse 是原地展开会撑高文档流造成布局位移、.pvq-modal 是模态阻断交互、.pvq-toast 固定角落不锚定触发元素——四者都不能替代。类 .pvq-popover（含 __body / __foot / __arrow），修饰符 --open（打开态，JS 加）、--above（JS 判定的上方位置）。开关契约只有两态：hidden 属性 = 彻底不显示（display:none）；--open = 淡入显示——库只认这两个，不碰业务。定位：position:fixed + getBoundingClientRect() 实时算后写内联 top/left，刻意不用 absolute（那必须假定业务容器是定位上下文，而那是业务的自由）→ 不依赖任何祖先 position；默认贴锚点下方，下方放不下且上方够高则自动翻转；水平 / 垂直双向夹取不越界。形状归库、颜色归令牌：仅暴露布局令牌 --pvq-popover-width（默认 min(24rem, calc(100vw - 2rem))）与 --pvq-popover-z（默认 90），色值全走 --pvq-*；浮层显式声明 font-size / line-height（防 .entry-content 等主题放大正文），内容区用 .pvq-popover .pvq-popover__body（0,2,0）压过主题 .entry-content p（0,1,1）且不引用主题类。JS 双入口：命令式 PVQUI.popover(anchor, {content, target, placement, gap, closeDelay, role, onOpen, onClose}) → 实例 {el, anchor, open, close, toggle, destroy}；声明式 [data-pvq-popover="<浮层 id>"]（值空时回退 aria-describedby）由 initPopovers() 随 initAll 自动接管，幂等（同一浮层只初始化一次，实例挂 el.__pvqPopover；document / window 级监听只绑一次）。交互：桌面 mouseenter / mouseleave（移开延时 closeDelay 160ms 关闭，给鼠标移入浮层留时间）、触屏（matchMedia('(hover: hover)') 判定，不信伪悬停）改点按开合、focusin / focusout 键盘可达、Escape 关闭并把焦点交还锚点、点浮层与锚点之外关闭；关闭有退出过渡（180ms 与 CSS 对齐）不掐断动画；锚点滚动（捕获阶段监听，含任意滚动容器）与窗口缩放时打开态重新定位；prefers-reduced-motion 降级。无障碍：浮层 role="note"（不用 tooltip——tooltip 语义要求纯说明文本，而本组件允许浮层内含链接等富内容），锚点 tabindex="0" + aria-describedby（库仅在缺失时补写、不覆盖既有值）；非模态，无焦点陷阱。事件 pvq-popover:open / pvq-popover:close（detail: {popover, el, anchor, reason}，reason 为 pointer / focus / click / escape / outside / api）。安全：content 为字符串时按 HTML 插入（点评可能含格式），调用方不得拼未转义的用户输入，仅处理可信内容时建议改传 DOM 节点。已知边界：祖先带 transform / filter / backdrop-filter / will-change 会成为 fixed 包含块致坐标偏移——库不移动浮层 DOM（最小侵入），这类容器里须把浮层放到容器之外。无 JS 边界：库默认即浮层态（不设 .pvq-js 渐进分支），JS 缺席时浮层保持不可见，信息兜底由调用方提供（如 <noscript> 静态呈现）。明确不做：业务内容槽 / 异步加载 / 自动消失计时 / 拖拽吸附 / 多层嵌套 / absolute 定位模式。
外观预览：浮层本体（圆角 + 边框 + 阴影 + 脚注分隔 + 小箭头） #
以元素为锚、脱离文档流、按需显隐的浮层；此处为预览框内改相对定位的外观展示。
出处 · 微信读书
<div style="position:relative;padding:34px 8px 18px"><div class="pvq-popover pvq-popover--open" style="position:relative;top:auto;left:auto;margin:0 auto;opacity:1;visibility:visible;transform:none"><div class="pvq-popover__body">以元素为锚、脱离文档流、按需显隐的浮层；此处为预览框内改相对定位的外观展示。</div><div class="pvq-popover__foot">出处 · 微信读书</div><span class="pvq-popover__arrow" style="left:50%"></span></div></div>真实用法：桌面悬停 / 触屏点按 / 键盘 Tab 聚焦唤起（空间不足自动翻到上方） #
悬停 / 点按 / Tab 聚焦唤起，点外部或按 Esc 关闭
锚点浮层：默认贴锚点下方，下方空间不足且上方够高时自动翻到上方；滚动与缩放时跟随锚点，不依赖任何祖先 position。
pvq-popover · 库 JS 实时定位
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;min-height:150px"><button type="button" tabindex="0" class="pvq-btn pvq-btn--primary" data-pvq-popover="pvq-gallery-pop" aria-describedby="pvq-gallery-pop">悬停我（触屏点按）</button><span style="color:var(--pvq-text-muted);font-size:13px">悬停 / 点按 / Tab 聚焦唤起，点外部或按 Esc 关闭</span></div><div class="pvq-popover" id="pvq-gallery-pop" role="note" hidden><div class="pvq-popover__body">锚点浮层：默认贴锚点下方，下方空间不足且上方够高时自动翻到上方；滚动与缩放时跟随锚点，不依赖任何祖先 position。</div><div class="pvq-popover__foot">pvq-popover · 库 JS 实时定位</div><span class="pvq-popover__arrow"></span></div>统计 Stat
Base · stable类 .pvq-stat-grid / .pvq-stat 含 __value / __label。
示例 #
128
已同步
12
待处理
<div class="pvq-stat-grid" style="max-width:360px"><div class="pvq-stat"><div class="pvq-stat__value">128</div><div class="pvq-stat__label">已同步</div></div><div class="pvq-stat"><div class="pvq-stat__value">12</div><div class="pvq-stat__label">待处理</div></div></div>帮助 Help
Base · stable类 .pvq-help 含 __icon / __title / __text。
示例 #
小贴士
首次使用请先配置 Token，再点击「测试连接」验证账号有效性。
<div class="pvq-help" style="max-width:480px"><i class="pvq-help__icon fas fa-lightbulb"></i><div><div class="pvq-help__title">小贴士</div><div class="pvq-help__text">首次使用请先配置 Token，再点击「测试连接」验证账号有效性。</div></div></div>二次确认弹窗 Confirm Modal
Base · stable（v1.2.10 新增）破坏性操作的弹窗式二次确认，与既有 data-pvq-confirm（按钮就地二次确认）互为补充。类 .pvq-modal[data-pvq-modal] 含遮罩 __backdrop 与面板 __panel（__close/__icon/__title/__desc/可选 __list/__actions>__cancel+__confirm）。颜色由 --pvq-modal-accent 驱动（默认 --pvq-danger 红，与 --armed 语义一致），确认按钮为实色 accent + 白字以一眼识别动作性质；变体 --warning（黄）/ --primary（森林绿）只换令牌、形状不变。库 JS initConfirms()（initAll 自动调用、幂等）接管：触发器 [data-pvq-modal-open="<id>"]、关闭 [data-pvq-modal-close]（X/取消/点遮罩）、确认 [data-pvq-modal-confirm] 派发 pvq-modal:confirm（detail: {id, modal, trigger}）供插件执行业务；异步加 [data-pvq-modal-async] 转 spinner 并禁用，完成后调 modal.closeModal()。含焦点陷阱、默认聚焦取消（防回车误触删除）、Esc、焦点归还、body 滚动锁，尊重 prefers-reduced-motion。
危险确认（默认红） #
确认删除？
此操作将永久删除 “项目报告 Q3”，且无法恢复。
<div style="display:flex;justify-content:center"><button type="button" class="pvq-btn pvq-btn--danger" data-pvq-modal-open="demo-modal-del">删除项目</button></div><div class="pvq-modal" id="demo-modal-del" data-pvq-modal role="dialog" aria-modal="true" aria-labelledby="demo-del-t"><div class="pvq-modal__backdrop" data-pvq-modal-close></div><div class="pvq-modal__panel"><button type="button" class="pvq-modal__close" data-pvq-modal-close aria-label="关闭">✕</button><div class="pvq-modal__icon"><i class="fas fa-triangle-exclamation"></i></div><h3 class="pvq-modal__title" id="demo-del-t">确认删除？</h3><p class="pvq-modal__desc">此操作将永久删除 <strong>“项目报告 Q3”</strong>，且<strong>无法恢复</strong>。</p><div class="pvq-modal__actions"><button type="button" class="pvq-btn pvq-modal__cancel" data-pvq-modal-close>取消</button><button type="button" class="pvq-btn pvq-modal__confirm" data-pvq-modal-confirm>确认删除</button></div></div></div>主色确认（森林绿，非破坏性） #
立即发布到站点？
发布后前台将立刻可见，可随时撤回。
<div style="display:flex;justify-content:center"><button type="button" class="pvq-btn pvq-btn--primary" data-pvq-modal-open="demo-modal-pub">发布</button></div><div class="pvq-modal pvq-modal--primary" id="demo-modal-pub" data-pvq-modal role="dialog" aria-modal="true" aria-labelledby="demo-pub-t"><div class="pvq-modal__backdrop" data-pvq-modal-close></div><div class="pvq-modal__panel"><button type="button" class="pvq-modal__close" data-pvq-modal-close aria-label="关闭">✕</button><div class="pvq-modal__icon"><i class="fas fa-paper-plane"></i></div><h3 class="pvq-modal__title" id="demo-pub-t">立即发布到站点？</h3><p class="pvq-modal__desc">发布后前台将<strong>立刻可见</strong>，可随时撤回。</p><div class="pvq-modal__actions"><button type="button" class="pvq-btn pvq-modal__cancel" data-pvq-modal-close>再改改</button><button type="button" class="pvq-btn pvq-modal__confirm" data-pvq-modal-confirm>确认发布</button></div></div></div>带影响对象清单 #
删除选中的 3 项？
以下对象将被永久删除：
- 设计令牌与组件清单.md
- PVQ-UI 组件库开发方案.md
- 库演进治理方案.md
<div style="display:flex;justify-content:center"><button type="button" class="pvq-btn pvq-btn--danger" data-pvq-modal-open="demo-modal-batch">批量删除</button></div><div class="pvq-modal" id="demo-modal-batch" data-pvq-modal role="dialog" aria-modal="true" aria-labelledby="demo-batch-t"><div class="pvq-modal__backdrop" data-pvq-modal-close></div><div class="pvq-modal__panel"><button type="button" class="pvq-modal__close" data-pvq-modal-close aria-label="关闭">✕</button><div class="pvq-modal__icon"><i class="fas fa-trash-can"></i></div><h3 class="pvq-modal__title" id="demo-batch-t">删除选中的 3 项？</h3><p class="pvq-modal__desc">以下对象将被<strong>永久删除</strong>：</p><ul class="pvq-modal__list"><li>设计令牌与组件清单.md</li><li>PVQ-UI 组件库开发方案.md</li><li>库演进治理方案.md</li></ul><div class="pvq-modal__actions"><button type="button" class="pvq-btn pvq-modal__cancel" data-pvq-modal-close>取消</button><button type="button" class="pvq-btn pvq-modal__confirm" data-pvq-modal-confirm>删除 3 项</button></div></div></div>范围 Range
Base · stable类 .pvq-range / .pvq-range__group / __value / __labels。拖动滑块时数值由库 JS 自动同步。v1.2.10 增强：.pvq-range__value 用 <input type="number"> 即可直接在框内改数字，回写滑块（clamp min/max + step 对齐），隐藏 number spinner、focus 加辉光；用 <span> 则保持只读（向后兼容）。
示例（只读 span） #
50
慢快
<div style="max-width:420px"><div class="pvq-range__group"><input type="range" class="pvq-range" min="1" max="100" value="50"><span class="pvq-range__value">50</span></div><div class="pvq-range__labels"><span>慢</span><span>快</span></div></div>可编辑数值框（v1.2.10：直接输数字改范围） #
慢快
<div style="max-width:420px"><div class="pvq-range__group"><input type="range" class="pvq-range" min="1" max="100" step="1" value="50"><input type="number" class="pvq-range__value" min="1" max="100" step="1" value="50" aria-label="数值"></div><div class="pvq-range__labels"><span>慢</span><span>快</span></div></div>分隔 Divider
Base · stable类 .pvq-divider。
示例 #
上方内容
下方内容
<div style="max-width:420px"><p style="margin:0;color:var(--pvq-text-secondary)">上方内容</p><div class="pvq-divider"></div><p style="margin:0;color:var(--pvq-text-secondary)">下方内容</p></div>转圈 Spinner
Base · stable类 .pvq-spinner，配合 @keyframes pvq-spin。
示例 #
<div style="display:flex;gap:16px;align-items:center"><span class="pvq-spinner"></span><span class="pvq-spinner" style="width:28px;height:28px;border-width:3px"></span><span class="pvq-spinner" style="width:40px;height:40px;border-width:4px"></span></div>元信息列表 Meta-list
Base · stable类 .pvq-meta-list / __row / __key / __value，值可加 --ok / --bad。
示例 #
<div class="pvq-meta-list" style="max-width:420px"><div class="pvq-meta-list__row"><span class="pvq-meta-list__key">PHP</span><span class="pvq-meta-list__value pvq-meta-list__value--ok">8.1</span></div><div class="pvq-meta-list__row"><span class="pvq-meta-list__key">WordPress</span><span class="pvq-meta-list__value pvq-meta-list__value--ok">6.4</span></div><div class="pvq-meta-list__row"><span class="pvq-meta-list__key">cURL</span><span class="pvq-meta-list__value pvq-meta-list__value--bad">未启用</span></div></div>动画 Animations
Base · stable库内置 pvq-spin / pvq-pulse / pvq-shimmer / pvq-slideDown/Up / pvq-cardEnter / pvq-tabEnter / pvq-iconBounce / pvq-badgePulse / pvq-resultSlide / pvq-logoAppear / pvq-lightbulb / pvq-detectBarEnter。已统一尊重 prefers-reduced-motion。
示例 #
pulse
<div style="display:flex;gap:28px;align-items:center;flex-wrap:wrap"><span class="pvq-spinner"></span><span class="pvq-status pvq-status--success"><span class="pvq-status__dot"></span> pulse</span><span style="display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--pvq-primary-light);color:var(--pvq-primary);border-radius:9px;animation:pvq-iconBounce 1.4s var(--pvq-ease-bounce) infinite"><i class="fas fa-star"></i></span><span style="display:inline-block;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#608062,#7a9e7c);animation:pvq-badgePulse 1.8s ease infinite"></span><span style="display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--pvq-primary);color:#fff;border-radius:50%;animation:pvq-logoAppear 1.6s var(--pvq-ease-bounce) infinite"><i class="fas fa-leaf"></i></span></div>可折叠卡片 Collapse
Base · experimental类 .pvq-collapse 含 __header / __body / __inner / __arrow。FontAwesome fa-chevron-down 箭头展开旋转 180° 变主色；标题浅灰底 + 展开时底边阴影分隔；JS scrollHeight + CSS max-height 过渡实现高度动画。多卡片可同时展开。
示例 #
这是可折叠的内容。点击标题栏展开或收起。
这个卡片默认展开。加上
pvq-collapse--open 类名即可。<div style="max-width:480px"><div class="pvq-collapse" data-pvq-collapse><button class="pvq-collapse__header" aria-expanded="false"><span>基础用法 · 默认收起</span><i class="fa-solid fa-chevron-down pvq-collapse__arrow"></i></button><div class="pvq-collapse__body"><div class="pvq-collapse__inner">这是可折叠的内容。点击标题栏展开或收起。</div></div></div><div class="pvq-collapse pvq-collapse--open" data-pvq-collapse style="margin-top:10px"><button class="pvq-collapse__header" aria-expanded="true"><span>默认展开</span><i class="fa-solid fa-chevron-down pvq-collapse__arrow"></i></button><div class="pvq-collapse__body"><div class="pvq-collapse__inner">这个卡片默认展开。加上 <code>pvq-collapse--open</code> 类名即可。</div></div></div></div>颜色输入框 ColorField
Base · experimental类 .pvq-color-field 含 __swatch / __input。点击色块弹出全局自绘取色面板（饱和度/亮度 + 色相条 + hex 输入）；手动输入 hex 双向同步。变体 --sm（小号）。
示例 #
<div class="pvq-color-field" data-pvq-color-field><div class="pvq-color-field__swatch" data-hex="#608062" style="background:#608062"></div><input type="text" class="pvq-color-field__input" value="#608062" maxlength="7"></div>Size: sm 对比 #
<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap"><div class="pvq-color-field pvq-color-field--sm" data-pvq-color-field><div class="pvq-color-field__swatch" data-hex="#7a9e7c" style="background:#7a9e7c"></div><input type="text" class="pvq-color-field__input" value="#7a9e7c" maxlength="7"></div><div class="pvq-color-field" data-pvq-color-field><div class="pvq-color-field__swatch" data-hex="#608062" style="background:#608062"></div><input type="text" class="pvq-color-field__input" value="#608062" maxlength="7"></div></div>点击上传 Upload
Base · experimental类 .pvq-upload 含 __input / __trigger / __info / __name / __clear。隐藏原生 <input type="file">，点击按钮触发选择；选中后显示文件名 + ✕ 清除。变体 --solid（实色按钮）--drop（拖放区）--inline（横排，适配设置行）。
示例 #
demo-config.json
<div class="pvq-upload pvq-upload--has-file" data-pvq-upload><input type="file" class="pvq-upload__input"><button type="button" class="pvq-upload__trigger"><i class="fa-solid fa-cloud-arrow-up"></i> 选择文件</button><div class="pvq-upload__info"><span class="pvq-upload__name"><i class="fa-solid fa-file"></i> <span class="pvq-upload__name-text">demo-config.json</span></span><button type="button" class="pvq-upload__clear"><i class="fa-solid fa-times"></i></button></div></div>Solid 实色 #
<div class="pvq-upload pvq-upload--solid" data-pvq-upload><input type="file" class="pvq-upload__input"><button type="button" class="pvq-upload__trigger"><i class="fa-solid fa-cloud-arrow-up"></i> 上传文件</button></div>Drop 拖放区风格 #
<div style="max-width:260px"><div class="pvq-upload pvq-upload--drop" data-pvq-upload><input type="file" class="pvq-upload__input"><button type="button" class="pvq-upload__trigger"><i class="fa-solid fa-cloud-arrow-up"></i><span>拖放文件到此处<br><small>或点击选择</small></span></button></div></div>Inline 横排 #
pvq-logo.png
<div class="pvq-upload pvq-upload--inline pvq-upload--has-file" data-pvq-upload><input type="file" class="pvq-upload__input"><button type="button" class="pvq-upload__trigger"><i class="fa-solid fa-cloud-arrow-up"></i> 更换 Logo</button><div class="pvq-upload__info"><span class="pvq-upload__name"><i class="fa-solid fa-file"></i> <span class="pvq-upload__name-text">pvq-logo.png</span></span><button type="button" class="pvq-upload__clear"><i class="fa-solid fa-times"></i></button></div></div>搜索 Search
Base · stable（1.2.8 新增）独立搜索组件，类 .pvq-search。形状归库、颜色归令牌 --pvq-search-accent（默认 --pvq-primary 绿，hover 用 color-mix(accent 82%, #000) 压暗，任意色可上、零硬编码）。功能变体：--with-btn（右侧实心提交按钮，joined）、--with-filter（复用库 .pvq-select 作左段，库 JS 自动增强，改选即带范围重搜）、--loading（图标位转 spinner，插件异步期间自加/去）、--sm（高 34px）。形状变体：--pill / --underline（无框仅底线）/ --ghost（填底无边框，聚焦加环）/ --glass（半透明 + blur，前端装饰）。库 JS initSearches()（initAll 自动调用）管理清除/提交，并提交（点击或回车）与筛选 change 派发 pvq-search 事件（detail: {query, filter, element}），插件监听执行真实检索。筛选前置变体 --with-filter 的筛选段固定 110px（流内 flex 子项），输入框内边距按「容器目标位 150px − 段宽 110px」取 40px（v1.4.1 修正，勿写 150px，否则文字多右移一个段宽）。
默认填框 + 清除 #
<div class="pvq-search" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="搜索文章、用户、标签…"><button class="pvq-search__clear" type="button" aria-label="清除"><i class="fas fa-xmark"></i></button></div>带提交按钮 --with-btn #
<div class="pvq-search pvq-search--with-btn" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="输入关键词后点搜索"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div>形状变体 pill / underline / ghost #
<div style="display:flex;flex-direction:column;gap:12px;max-width:420px"><div class="pvq-search pvq-search--pill pvq-search--with-btn" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="胶囊 pill"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div><div class="pvq-search pvq-search--underline" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="下划线 underline"></div><div class="pvq-search pvq-search--ghost" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="极轻 ghost"></div></div>毛玻璃 --glass（需彩色背板） #
<div style="background:linear-gradient(135deg,#cfe3d8,#bcd2f0);border-radius:12px;padding:20px;max-width:440px"><div class="pvq-search pvq-search--glass pvq-search--with-btn" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="毛玻璃 glass"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div></div>筛选前置 --with-filter（复用 .pvq-select） #
<div class="pvq-search pvq-search--with-filter" data-pvq-search><div class="pvq-select pvq-search__filter"><select><option>全部</option><option>标题</option><option>正文</option><option>作者</option></select></div><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="在所选范围内搜索…"><button class="pvq-search__clear" type="button" aria-label="清除"><i class="fas fa-xmark"></i></button></div>小号 --sm + 加载态 --loading #
<div style="display:flex;flex-direction:column;gap:12px;max-width:360px"><div class="pvq-search pvq-search--sm" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="小号 sm"></div><div class="pvq-search pvq-search--with-btn pvq-search--loading" data-pvq-search><i class="pvq-search__icon fas fa-magnifying-glass"></i><i class="pvq-search__spinner fas fa-spinner fa-spin"></i><input class="pvq-search__input" type="text" value="检索中" placeholder="搜索中…"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div></div>上色令牌 --pvq-search-accent（蓝 / 橙，插件自覆盖） #
<div style="display:flex;flex-direction:column;gap:12px;max-width:420px"><div class="pvq-search pvq-search--with-btn" data-pvq-search style="--pvq-search-accent:#2563eb"><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="蓝色强调（插件自覆盖令牌）"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div><div class="pvq-search pvq-search--with-btn" data-pvq-search style="--pvq-search-accent:#f97316"><i class="pvq-search__icon fas fa-magnifying-glass"></i><input class="pvq-search__input" type="text" placeholder="橙色强调（插件自覆盖令牌）"><button class="pvq-search__submit" type="button"><i class="fas fa-magnifying-glass"></i> 搜索</button></div></div>设置页骨架 Settings
Admin · stable类 .pvq-settings 及 __header / __logo / __title / __subtitle / __version-badge / __footer 等。下方为简化骨架预览。
示例 #
Wolai 同步
把 Wolai 文档同步到 WordPress
<div class="pvq-settings" style="max-width:640px"><div class="pvq-settings__header"><div class="pvq-settings__logo" style="background:linear-gradient(135deg,#608062,#7a9e7c)"><i class="fas fa-leaf" style="color:#fff;font-size:22px"></i></div><div class="pvq-settings__title-group"><h1 class="pvq-settings__title">Wolai 同步</h1><div class="pvq-settings__subtitle">把 Wolai 文档同步到 WordPress</div></div><span class="pvq-settings__version-badge">v1.3.18</span></div><div class="pvq-settings__footer"><div class="pvq-settings__footer-info">PVQ · 2026</div><div class="pvq-settings__footer-links"><a class="pvq-settings__footer-link" href="#">文档</a><a class="pvq-settings__footer-link pvq-settings__footer-link--disabled" href="#">支持</a></div></div></div>选项卡 Tabs
Admin · stable类 .pvq-tabs 含 __slider（磁吸滑块）与 .pvq-tab；面板 .pvq-tab-content。点击切换由库 JS 委托处理。
示例 #
常规设置内容区
高级设置内容区
关于内容区
<div style="max-width:480px"><div class="pvq-tabs"><span class="pvq-tabs__slider"></span><button class="pvq-tab pvq-tab--active" data-pvq-tab="general"><i class="pvq-tab__icon fas fa-cog"></i> 常规</button><button class="pvq-tab" data-pvq-tab="advanced"><i class="pvq-tab__icon fas fa-sliders-h"></i> 高级</button><button class="pvq-tab" data-pvq-tab="about"><i class="pvq-tab__icon fas fa-info-circle"></i> 关于</button></div><div class="pvq-tab-content pvq-tab-content--active" data-pvq-tab-panel="general"><div class="pvq-card" style="margin:0"><div class="pvq-card__desc">常规设置内容区</div></div></div><div class="pvq-tab-content" data-pvq-tab-panel="advanced"><div class="pvq-card" style="margin:0"><div class="pvq-card__desc">高级设置内容区</div></div></div><div class="pvq-tab-content" data-pvq-tab-panel="about"><div class="pvq-card" style="margin:0"><div class="pvq-card__desc">关于内容区</div></div></div></div>块骨架 Block
Editor · stable类 .pvq-block-placeholder / __loading / __empty / __preview / __frame，供块编辑器复用占位 / 加载 / 空态 / 预览。
示例 #
选择内容以开始
加载中…
暂无内容
预览内容区域
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px"><div class="pvq-block-frame"><div class="pvq-block-placeholder"><i class="pvq-block-placeholder__icon fas fa-image"></i><div>选择内容以开始</div></div></div><div class="pvq-block-frame"><div class="pvq-block-loading"><span class="pvq-spinner"></span> 加载中…</div></div><div class="pvq-block-frame"><div class="pvq-block-empty">暂无内容</div></div><div class="pvq-block-frame"><div class="pvq-block-preview">预览内容区域</div></div></div>前端内容组件
Frontend · stable类 .pvq-callout / .pvq-quote / .pvq-prose，用于文章正文里的提示框 / 引用 / 排版。
示例 #
这是一条内嵌提示，用于强调关键说明。
设计不是为了好看，而是为了更好用。
正文排版组件控制段落、标题、链接与代码的统一风格，让前端文章阅读体验一致。
<div style="max-width:520px"><div class="pvq-callout"><i class="pvq-callout__icon fas fa-info-circle"></i><div class="pvq-callout__content">这是一条内嵌提示，用于强调关键说明。</div></div><div class="pvq-quote">设计不是为了好看，而是为了更好用。</div><div class="pvq-prose"><p>正文排版组件控制段落、标题、链接与代码的统一风格，让前端文章阅读体验一致。</p></div></div>进度条 Progress
Frontend · stable（1.2.9 并入）类 .pvq-progress 含 __fill / __text；变体 --lg（大号）--danger（危险红，走 --pvq-danger）。进度由设置 .pvq-progress__fill 的 width 控制。颜色令牌 --pvq-progress-accent（默认 --pvq-primary 绿）。
默认 / 大号 / 危险 #
35%
72%
88% 风险
<div style="max-width:420px"><div class="pvq-progress"><div class="pvq-progress__fill" style="width:35%"></div><span class="pvq-progress__text">35%</span></div><div class="pvq-progress pvq-progress--lg"><div class="pvq-progress__fill" style="width:72%"></div><span class="pvq-progress__text">72%</span></div><div class="pvq-progress pvq-progress--danger"><div class="pvq-progress__fill" style="width:88%"></div><span class="pvq-progress__text">88% 风险</span></div></div>书签 Bookmark
Frontend · stable（1.2.9 并入）类 .pvq-bookmark 含 __image（左图）/ __content / __url / __favicon / __title / __description（右文）；去掉 __image 即纯文字链接卡。hover 浅绿底 + 稍深边框（令牌 --pvq-border-strong）。纯 CSS。
带图 / 纯文字 #
<div style="max-width:520px"><a class="pvq-bookmark" href="https://pvq.ink"><div class="pvq-bookmark__image" style="background-image:linear-gradient(135deg,var(--pvq-primary),var(--pvq-primary-alt))"></div><div class="pvq-bookmark__content"><div class="pvq-bookmark__url"><img class="pvq-bookmark__favicon" src="https://pvq.ink/favicon.ico">pvq.ink</div><div class="pvq-bookmark__title">PVQ 组件库官网</div><div class="pvq-bookmark__description">统一全站界面样式的跨插件组件库。</div></div></a><a class="pvq-bookmark" href="https://pvq-ui.pvq.ink" style="margin-top:12px"><div class="pvq-bookmark__content"><div class="pvq-bookmark__url"><i class="fas fa-link"></i> pvq-ui.pvq.ink</div><div class="pvq-bookmark__title">组件库文档与画廊</div><div class="pvq-bookmark__description">实时预览所有 .pvq-* 组件。</div></div></a></div>卡片化表格 Table
Frontend · stable（1.2.9 并入）类 .pvq-table（配 .pvq-table-wrap 加 [data-pvq-table] 触发入场动画）即原生 table/thead/tbody；单元格独立圆角卡片、表头绿底（令牌 --pvq-table-head-bg）、悬停微放大。修饰符 --striped（斑马纹）、__col--right/center（列对齐）、caption。普通 .pvq-table 不加 data 则完全可见、无动画。
示例（含斑马纹） #
| 语言 | 诞生年 |
|---|---|
| PHP | 1995 |
| Python | 1991 |
| Ruby | 1995 |
<div class="pvq-table-wrap" data-pvq-table><table class="pvq-table pvq-table--striped"><caption>语言速览</caption><thead><tr><th>语言</th><th class="pvq-table__col--right">诞生年</th></tr></thead><tbody><tr><td>PHP</td><td class="pvq-table__col--right">1995</td></tr><tr><td>Python</td><td class="pvq-table__col--right">1991</td></tr><tr><td>Ruby</td><td class="pvq-table__col--right">1995</td></tr></tbody></table></div>数据表格 DataGrid
Frontend · stable（1.2.9 并入）类 .pvq-datagrid[data-pvq-datagrid] 含工具栏（搜索 / 排序 / 筛选 / 重置）+ 卡片化表体。搜索 / 筛选为自包含可展开胶囊（点击图标原地展开、点栏外空白收起）；排序点头列或按钮三态循环（无 / 升 / 降）；重置清空全部。筛选下拉按 th[data-col] 与单元格值自动生成。库 JS initDataGrids() 自动接管（initAll 调用、幂等）。
可交互（搜索 / 排序 / 筛选 / 重置） #
| 项目 | 数量 |
|---|---|
| 示例 A | 12 |
| 示例 B | 3 |
| 示例 C | 88 |
无匹配结果
<div class="pvq-datagrid" data-pvq-datagrid><div class="pvq-datagrid__toolbar"><div class="pvq-datagrid__search"><button class="pvq-datagrid__toggle pvq-datagrid__toggle--search" type="button"><i class="fas fa-magnifying-glass"></i></button><input class="pvq-datagrid__search-input" type="text" placeholder="搜索…"><button class="pvq-datagrid__search-clear" type="button" aria-label="清除"><i class="fas fa-xmark"></i></button></div><button class="pvq-datagrid__btn pvq-datagrid__btn--sort" type="button"><i class="fas fa-up-down"></i></button><div class="pvq-datagrid__filter"><button class="pvq-datagrid__toggle pvq-datagrid__toggle--filter" type="button"><i class="fas fa-filter"></i></button><div class="pvq-dd" data-pvq-dd="col"><button class="pvq-dd__trigger" type="button"><span class="pvq-dd__text">选择列</span><i class="pvq-dd__arrow fas fa-chevron-down"></i></button><div class="pvq-dd__menu"></div></div><div class="pvq-dd" data-pvq-dd="val"><button class="pvq-dd__trigger" type="button"><span class="pvq-dd__text">选择值</span><i class="pvq-dd__arrow fas fa-chevron-down"></i></button><div class="pvq-dd__menu"></div></div></div><button class="pvq-datagrid__btn pvq-datagrid__btn--reset" type="button"><i class="fas fa-rotate-left"></i></button></div><div class="pvq-datagrid__content"><table class="pvq-datagrid__table"><thead><tr><th data-col="项目">项目<i class="pvq-sort-icon"></i></th><th data-col="数量" class="pvq-table__col--right">数量<i class="pvq-sort-icon"></i></th></tr></thead><tbody><tr><td>示例 A</td><td class="pvq-table__col--right">12</td></tr><tr><td>示例 B</td><td class="pvq-table__col--right">3</td></tr><tr><td>示例 C</td><td class="pvq-table__col--right">88</td></tr></tbody></table><div class="pvq-datagrid__empty">无匹配结果</div></div></div>权重输入框 Weight
Frontend · stable（v1.2.10 新增，随 1.2.11 固化发布）多维权重配置：数字输入框 input.pvq-weight__input（CSS 特地压过 WP 核心）与滑块 input.pvq-weight__slider 双向联动微调，底部「重置 / 归一化」按钮使总和归 100，实时显示总和。形状归库、颜色归令牌：组件定义 --pvq-weight-accent（默认 --pvq-primary 绿），聚焦 / 滑块 / 徽章全走它，零硬编码。变体 --sm（紧凑）/ --glass（玻璃拟态）。按钮复用库 .pvq-btn--primary / .pvq-btn--ghost + .pvq-weight__btn-pill。库 JS initWeights() 自动接管（initAll 调用、幂等），归一化派发 pvq-weight:normalized（detail.weights）供插件持久化。
可交互（输入 ⇄ 滑块联动 / 归一化 / 重置） #
功能 w1
%
性能 w2
%
美观 w3
%
∑ 总和 85.0
<div style="max-width:560px" class="pvq-weight" data-pvq-weight><div class="pvq-weight__list"><div class="pvq-weight__item"><span class="pvq-weight__label">功能 <span class="pvq-weight__badge">w1</span></span><div class="pvq-weight__input-wrap"><input class="pvq-weight__input" type="number" min="0" max="999" step="0.1" value="35" aria-label="功能 权重"><span class="pvq-weight__unit">%</span></div><div class="pvq-weight__slider-wrap"><input class="pvq-weight__slider" type="range" min="0" max="100" step="0.5" value="35" aria-label="功能 滑块"></div></div><div class="pvq-weight__item"><span class="pvq-weight__label">性能 <span class="pvq-weight__badge">w2</span></span><div class="pvq-weight__input-wrap"><input class="pvq-weight__input" type="number" min="0" max="999" step="0.1" value="30" aria-label="性能 权重"><span class="pvq-weight__unit">%</span></div><div class="pvq-weight__slider-wrap"><input class="pvq-weight__slider" type="range" min="0" max="100" step="0.5" value="30" aria-label="性能 滑块"></div></div><div class="pvq-weight__item"><span class="pvq-weight__label">美观 <span class="pvq-weight__badge">w3</span></span><div class="pvq-weight__input-wrap"><input class="pvq-weight__input" type="number" min="0" max="999" step="0.1" value="20" aria-label="美观 权重"><span class="pvq-weight__unit">%</span></div><div class="pvq-weight__slider-wrap"><input class="pvq-weight__slider" type="range" min="0" max="100" step="0.5" value="20" aria-label="美观 滑块"></div></div></div><div class="pvq-weight__action"><span class="pvq-weight__total">∑ 总和 <span class="pvq-weight__total-val">85.0</span></span><div class="pvq-btn-group"><button type="button" class="pvq-btn pvq-btn--ghost pvq-weight__btn-pill" data-pvq-weight-reset>↺ 重置</button><button type="button" class="pvq-btn pvq-btn--primary pvq-weight__btn-pill" data-pvq-weight-normalize>⟳ 归一化</button></div></div></div>没有匹配的组件。