Compare Table
介绍
“我们 vs 默认方案”的对比表：自家列整列淡色高亮，对勾在进入视口时逐行亮起；悬停一行时整行提亮，方便逐条读。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Compare Table 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add compare-table
mcp › 使用 8pt MCP 调用 get_component("compare-table")
代码
Compare Table 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-vs">
<div class="x-vs__in" style="width:700px;height:340px">
<table>
<thead><tr><th scope="col">要做的事</th><th scope="col"><span class="x-vs__me">Nook</span></th><th scope="col">访达</th></tr></thead>
<tbody>
<tr><th scope="row">两个文件夹并排</th><td>⌘D 开双栏；F5 复制，F6 移动</td><td>开两个窗口，手动摆好</td></tr>
<tr><th scope="row">项目文件散落各处</th><td>一个工作区页面，文件原地不动</td><td>靠标签，或每个文件夹开一个窗口</td></tr>
<tr><th scope="row">腾出磁盘空间</th><td>智能清理：分组建议，可撤销</td><td>去系统设置里找，离文件很远</td></tr>
<tr><th scope="row">下载文件夹太乱</th><td>「整理」先预览，再归进文件夹</td><td>能排序分组，搬文件靠自己</td></tr>
<tr><th scope="row">文件夹大小</th><td>每个文件夹都显示，后台计算</td><td>默认关闭，只有列表视图能开</td></tr>
<tr><th scope="row">Git 项目</th><td>路径栏显示分支和未提交改动</td><td>不显示</td></tr>
</tbody>
….x-vs{position:relative;flex:none}
.x-vs__in{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:20px;overflow:hidden;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.1));box-shadow:0 14px 34px rgba(0,0,0,.08);font-family:var(--d-font,system-ui,sans-serif);color:var(--d-fg,#fff);box-sizing:border-box}
.x-vs table{width:100%;height:100%;border-collapse:collapse;text-align:left;font-size:13.5px}
.x-vs th,.x-vs td{padding:11px 18px;border-top:1px solid var(--d-line,rgba(255,255,255,.08));vertical-align:middle}
.x-vs thead th{border-top:0;font-size:12.5px;font-weight:600;color:var(--d-muted,#9b9ba8)}
.x-vs tbody th{width:24%;font-weight:600;white-space:nowrap}
.x-vs td{color:var(--d-muted,#9b9ba8);transition:background .2s,color .2s}
.x-vs td:nth-child(2){background:color-mix(in srgb,var(--d-accent,#4D74FF) 7%,transparent);color:var(--d-fg,#fff)}
.x-vs td:nth-child(2)::before{content:"✓";display:inline-block;margin-right:8px;color:var(--d-accent,#4D74FF);font-weight:700;opacity:0;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 90ms)}
.x-vs.in td:nth-child(2)::before{opacity:1;transform:none}
.x-vs tbody tr:hover th,.x-vs tbody tr:hover td{background:color-mix(in srgb,var(--d-fg,#fff) 4%,transparent)}
.x-vs tbody tr:hover td:nth-child(2){background:color-mix(in srgb,var(--d-accent,#4D74FF) 14%,transparent)}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格