PVQ-UI 组件库
所有 PVQ 插件共享的界面样式唯一真源。本页所有组件直接引用 COS CDN 上的真实库样式，所见即所得——库版本更新后刷新即同步。
设计令牌
Design Tokens库的视觉语言全部由 CSS 自定义属性驱动。插件应优先引用令牌而非硬编码颜色，以保证全站风格统一。
色彩
圆角
阴影
缓动与过渡
按钮 Button
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
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
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
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 向上弹、边界贴合、滚动重定位、键盘与点击外部关闭。
基础 #
<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>开关 Switch
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>状态指示 Status
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
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
stable类 .pvq-banner 配 --success / --danger / --warning / --info，含 __dot / __title / __text。
示例 #
<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>提示 Alert
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>统计 Stat
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
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>范围 Range
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
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
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
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
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 · 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}），插件监听执行真实检索。
默认填框 + 清除 #
<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 · 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 · 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:url('https://cdn-buke.pvq.ink/pvq-ui/v1.2.9/pvq-ui.css')"></div><div class="pvq-bookmark__content"><div class="pvq-bookmark__url"><img class="pvq-bookmark__favicon" src="https://pvq.ink/favicon.ico" onerror="this.style.display='none'">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>勾选框 Checkbox
Frontend · 1.2.9 并入结构 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。
变体：删除线 / 幽灵 / 涟漪 #
<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
Frontend · 1.2.9 并入结构 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。
变体：卡片 / 幽灵 / 涟漪 / 纯色 #
<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>卡片化表格 Table
Frontend · 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 · 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 · v1.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>没有匹配的组件。