Mac File Window
介绍
原生质感的 Mac 文件管理器窗口：侧边栏、分组切换（无 / 类型 / 日期）、彩色文件图标。点「整理」，零散文件飞进分类文件夹，底部弹出可撤销的提示。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Mac File Window 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add mac-file-window
mcp › 使用 8pt MCP 调用 get_component("mac-file-window")
代码
Mac File Window 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-nkw">
<div class="x-nkw__win" style="width:720px;height:440px">
<aside class="x-nkw__sb">
<div class="x-nkw__lt" aria-hidden="true"><i></i><i></i><i></i></div>
<div class="x-nkw__ap"><svg viewBox="0 0 64 64" aria-hidden="true"><rect x="2" y="2" width="60" height="60" rx="15" fill="#3D5BF0"/><path d="M14 23a4 4 0 0 1 4-4h9.5l4 4H46a4 4 0 0 1 4 4v14H14z" fill="#fff" fill-opacity=".42"/><rect x="12" y="28" width="40" height="21" rx="5.5" fill="#fff"/><rect x="19" y="35" width="15" height="3.2" rx="1.6" fill="#3D5BF0"/></svg>Nook</div>
<h6>工作区</h6><a><i style="--c:#7B61E8"></i>新品发布</a><a><i style="--c:#D9467A"></i>京都旅行</a>
<h6>个人收藏</h6><a><i style="--c:#3D5BF0"></i>桌面</a><a><i style="--c:#3D5BF0"></i>文稿</a><a class="on"><i style="--c:#3D5BF0"></i>下载</a>
<h6>工具</h6><a><i style="--c:#E08A1E"></i>清理空间</a><a><i style="--c:#2E9E5B"></i>已安装<em>49</em></a>
<div class="x-nkw__dsk">MacBook Air<span>剩余 147.8 GB</span><b></b></div>
</aside>
<div class="x-nkw__mn">
<div class="x-nkw__tb">
….x-nkw{position:relative;flex:none}
.x-nkw__win{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;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-nkw__sb{flex:none;width:158px;margin:8px 0 8px 8px;padding:12px 8px;border-radius:12px;background:rgba(243,243,247,.97);border:1px solid rgba(0,0,0,.07);display:flex;flex-direction:column;gap:1px}
.x-nkw__lt{display:flex;gap:7px;padding:0 6px 10px}.x-nkw__lt i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-nkw__lt i:nth-child(2){background:#FEBC2E}.x-nkw__lt i:nth-child(3){background:#28C840}
.x-nkw__ap{display:flex;align-items:center;gap:7px;padding:0 6px 2px;font-weight:700}.x-nkw__ap svg{width:18px;height:18px}
.x-nkw__sb h6{margin:9px 6px 3px;font-size:10.5px;font-weight:600;color:#8E8E93}
.x-nkw__sb a{display:flex;align-items:center;gap:8px;height:25px;padding:0 6px;border-radius:7px;font-size:12.5px;white-space:nowrap}
.x-nkw__sb a i{width:12px;height:10px;border-radius:2px 3px 3px 3px;background:var(--c);opacity:.85}
.x-nkw__sb a.on{background:rgba(0,0,0,.06);font-weight:600}
.x-nkw__sb a em{margin-left:auto;font-style:normal;font-size:11px;color:#8E8E93}
.x-nkw__dsk{margin-top:auto;padding:6px;font-size:11.5px}.x-nkw__dsk span{display:block;font-size:10.5px;color:#8E8E93}.x-nkw__dsk b{display:block;height:4px;margin-top:6px;border-radius:2px;background:linear-gradient(90deg,#3D5BF0 40%,#E1E2EA 40%)}
.x-nkw__mn{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
…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 查看完整源码。查看价格