Disk Cleanup Panel
介绍
分段存储条加分组勾选清单：「可放心清理」默认勾选，「由你决定」默认不勾。勾选时条纹段实时伸缩，移到废纸篓后可用空间增加，并能一键撤销。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Disk Cleanup Panel 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add disk-cleanup-panel
mcp › 使用 8pt MCP 调用 get_component("disk-cleanup-panel")
代码
Disk Cleanup Panel 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-nkc">
<div class="x-nkc__win" style="width:540px;height:470px">
<div class="x-nkc__tb"><span class="x-nkc__lt" aria-hidden="true"><i></i><i></i><i></i></span><b>智能清理</b><button class="x-nkc__ag" type="button">再看一遍</button></div>
<div class="x-nkc__bd"></div>
<div class="x-nkc__toast" role="status"><span></span><button type="button">撤销</button></div>
</div>
</div>.x-nkc{position:relative;flex:none}
.x-nkc__win{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 28px 70px rgba(10,20,80,.28);font:13px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Microsoft YaHei',sans-serif;color:#1D1D1F;text-align:left;-webkit-font-smoothing:antialiased}
.x-nkc__tb{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.07)}
.x-nkc__tb b{font-size:14.5px}
.x-nkc__lt{display:flex;gap:7px}.x-nkc__lt i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-nkc__lt i:nth-child(2){background:#FEBC2E}.x-nkc__lt i:nth-child(3){background:#28C840}
.x-nkc__ag{margin-left:auto;height:26px;padding:0 10px;border:0;border-radius:7px;background:#fff;color:#6E6E73;font:inherit;font-size:12px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.09)}
.x-nkc__bd{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.x-nkc__hd{display:flex;align-items:flex-end;gap:10px}.x-nkc__hd b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.x-nkc__hd span{padding-bottom:4px;font-size:12px;color:#6E6E73}
.x-nkc__gain{margin-left:auto;padding:3px 9px!important;border-radius:99px;background:#E3F6EA;color:#157A3A!important;font-weight:600;opacity:0;transition:opacity .3s}.x-nkc__gain.on{opacity:1}
.x-nkc__bar{display:flex;gap:2px;height:20px;border-radius:7px;overflow:hidden;background:#E9E9EE}
.x-nkc__bar i{height:100%;width:var(--w);background:var(--c);transition:width .7s cubic-bezier(.16,1,.3,1)}
.x-nkc__bar .cl{background:repeating-linear-gradient(-45deg,#F4A340 0 4px,#F7BD70 4px 8px)}
…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 查看完整源码。查看价格