Code Diff Card
介绍
审阅风格的改动卡片：文件名、增删统计、逐行淡入的 diff，悬停行高亮，一键复制新代码。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Code Diff Card 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add code-diff-card
mcp › 使用 8pt MCP 调用 get_component("code-diff-card")
代码
Code Diff Card 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<figure class="x-diff">
<figcaption><span class="x-diff__file">button.css</span><span class="x-diff__stat"><b>+4</b> <s>−2</s></span><button type="button" aria-label="复制新代码">复制</button></figcaption>
<pre><code><span class="ctx"><i>12</i> .btn {</span><span class="del"><i>13</i>- padding: 10px 15px;</span><span class="del"><i>14</i>- border-radius: 5px;</span><span class="add"><i>13</i>+ padding: 12px 16px;</span><span class="add"><i>14</i>+ border-radius: 8px;</span><span class="add"><i>15</i>+ transition: transform .2s;</span><span class="add"><i>16</i>+ will-change: transform;</span><span class="ctx"><i>17</i> }</span></code></pre>
</figure>.x-diff{width:min(330px,100%);margin:0;border-radius:14px;overflow:hidden;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.12));color:var(--d-fg,#fff);box-shadow:0 20px 40px -28px rgba(0,0,0,.7)}
.x-diff figcaption{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;border-bottom:1px solid var(--d-line,rgba(255,255,255,.1));font:600 12px/1 ui-monospace,monospace}
.x-diff__stat{margin-right:auto}
.x-diff__stat b{color:#3dd68c}.x-diff__stat s{color:#ff6b6b;text-decoration:none}
.x-diff figcaption button{height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--d-line,rgba(255,255,255,.14));background:transparent;color:var(--d-muted,#9b9ba8);font:600 11px/1 var(--d-font,system-ui,sans-serif);cursor:pointer}
.x-diff pre{margin:0;padding:6px 0;font:11.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}
.x-diff code{display:grid}
.x-diff code span{display:block;padding:0 12px;white-space:pre;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.x-diff.in code span{opacity:1;transform:none}
.x-diff code span:hover{background:color-mix(in srgb,var(--d-fg,#fff) 6%,transparent)}
.x-diff code i{display:inline-block;width:22px;margin-right:6px;font-style:normal;color:var(--d-muted,#9b9ba8);opacity:.6;text-align:right}
.x-diff .add{background:rgba(61,214,140,.1);color:#86efb4}
…const init = (root) => {
const fig = root.querySelector('.x-diff'), lines = [...fig.querySelectorAll('code span')], btn = fig.querySelector('button');
lines.forEach((l, i) => l.style.transitionDelay = (i * 70) + 'ms');
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { fig.classList.add('in'); io.disconnect(); } });
io.observe(fig);
let t;
btn.addEventListener('click', async () => {
const code = lines.filter(l => !l.classList.contains('del')).map(l => l.textContent.replace(/^\s*\d+[+ ]?/, '')).join('\n');
try { await navigator.clipboard.writeText(code); } catch (e) {}
btn.textContent = '已复制'; clearTimeout(t); t = setTimeout(() => btn.textContent = '复制', 1400);
});
return () => { io.disconnect(); clearTimeout(t); };
…订阅 Builder 查看完整源码。查看价格