# @johnmorrisdotca/hako-devices 中文文档 规范地址：https://npmcn.com/package/%40johnmorrisdotca/hako-devices/ 版本：0\.6\.1 npm 元数据更新时间：2026-11-01T12:54:01.468Z 中文译文更新时间：2026-11-01T14:11:42.186Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40johnmorrisdotca/hako-devices 原文对照：https://npmcn.com/package/%40johnmorrisdotca/hako-devices/?lang=original 项目主页：https://johnmorrisdotca.github.io/hako-devices/ 源码仓库：https://github.com/johnmorrisdotca/hako-devices ## 关键信息（来自 npm 元数据） - 包体积（解压后）：26.8 MB，1098 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=22 - 运行依赖：0 个 - peer 依赖：react \>=18，three \>=0\.170\.0 - 首次发布：2026-10-31T06:50:35.089Z - 最新版本发布：2026-11-01T12:54:01.191Z - 已发布版本数：8（近 12 个月 8 个） ## 中文简介 Hako Devices：树莓派，mac，个人电脑，手机，平板电脑，游戏机，NAS盒子和经典机器的线条图和3D视图，作为web组件，带有标签，可按CPU，品牌等过滤2,200多个机器，并以输入方式组装机器 ## 安装 ```sh npm install @johnmorrisdotca/hako-devices ``` 也可以使用：`pnpm add @johnmorrisdotca/hako-devices`、`yarn add @johnmorrisdotca/hako-devices`、`bun add @johnmorrisdotca/hako-devices` ## README # Hako设备 箱 **计算机的线条图和3D视图，你把它们放到一个页面上，然后把零件组装起来。** 主板、帽子、机箱、NAS盒、台式机、笔记本电脑、平板电脑、游戏机、旧手机等 `.svg` 和一个 `.glb` 对于每台机器，都有一个web组件，首先显示图纸，然后交叉渐变为3D，还有一个类型模型，用于检查机器是否真的组装在一起。 [![CI](https://github.com/johnmorrisdotca/hako-devices/actions/workflows/ci.yml/badge.svg)](https://github.com/johnmorrisdotca/hako-devices/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@johnmorrisdotca/hako-devices?color=2f5d4a)](https://www.npmjs.com/package/@johnmorrisdotca/hako-devices) [![MIT licence](https://img.shields.io/badge/licence-MIT-2f5d4a)](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/LICENSE) ![TypeScript](https://img.shields.io/badge/types-TypeScript-3178c6) [**打开演示→**](https://johnmorrisdotca.github.io/hako-devices/) · [从部件构建](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/parts.md) · [的元素](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/element.md) · [规模](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/scale.md) · [风格](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/styles.md) ![A gallery on a night-blue page: groups of line drawings such as single-board computers, desktops, laptops and classic machines, each a bunch of its machines.](https://raw.githubusercontent.com/johnmorrisdotca/hako-devices/main/docs/images/gallery.jpg) ![The part builder: a small computer in a finned case with a touch screen hat, in 3D, beside its choices and the code to copy.](https://raw.githubusercontent.com/johnmorrisdotca/hako-devices/main/docs/images/builder.jpg) ## 一分钟 ```sh npm install @johnmorrisdotca/hako-devices three ``` ```html ``` 这就是页面需要捆绑器的全部内容。这幅画立刻就显示出来了；当元素出现在屏幕上并且浏览器可以绘制WebGL时，3D视图就会毫不犹豫地接管。拖动以翻转它，或使用方向键。如果没有WebGL，在Save-Data下，或者出现任何故障，绘图将保留。 在Node或浏览器中通过脚本构建一个： ```ts import { build } from "@johnmorrisdotca/hako-devices/build"; const machine = build({ board: "pi4", case: "armor", hat: "pitft-28" }); machine.report.ok; // true machine.glb().bytes; // a .glb file's bytes machine.svg("thin"); // the drawing ``` 问问它是否适合没有构建，没有三个。js： ```ts import { check } from "@johnmorrisdotca/hako-devices"; const report = check({ board: "pi4", case: "argon", hat: "pitft-28" }); report.ok; // false report.issues[0].message; // "Faceted metal case (Argon ONE style) closes over the header, so a hat cannot reach it." ``` ## 里面有什么？ | 条目 | 什么 | 需要 | | --- | --- | --- | | `@johnmorrisdotca/hako-devices` | 目录(`DEVICES`， `catalogue()`， `statusOf`)、零件(`PARTS`)、配合检查(`check`)、相机规则(`frameFor`)、映射助手(`piKey`， `macKey`， `nasKey`， `pcKey`， `deviceKeyOf`)，样式，缩放助手，屏幕图片 | 没有什么 | | `.../tags` | `FACETS`， `tagsOf(key)`， `matchesPicks(key, picks)`， `facetCounts(keys, picks)`：对机器进行分类。它有自己的表项，因为表很大 | 没有什么 | | `.../build` | `build(description)`， `buildDevice(key)`， `buildPart(id)`：一个网格和一个绘图。 `toGlb`， `Drawing`， `Box` | `three` | | `.../element` | `` 和 ``:加载 `three` 只有当需要3D视图时 | `three` 对3 d | | `.../react` | 一层薄薄的 `` 包装器 | `react` | | `.../machines.json` | 机器列表为静态JSON：密钥，名称，制造商，家族，状态，标签，对于绘制的设备，大小和端口 | 没有什么 | | `.../assets/*` | 准备文件: `pi4.glb`， `pi4.svg`， `pi4.thick.svg`， `parts/armor.glb`， `coming-soon.svg` | 没有什么 | ## 用零件制造计算机 一个描述会命名一个基地，以及在基地上做什么。通过安装方式连接的部件有：一顶帽子在一个40针的接头上，一个外壳围绕着电路板的插座，一个屏幕模块在帽子的显示接头上，一块电路板在显示器的背面，一个驱动器在托架上，一个平板电脑下面的支架。每一个都是通过真实的毫米和安装类型进行检查，一个描述使网格和图纸，所以他们从来没有不一致。 ```ts import { build } from "@johnmorrisdotca/hako-devices/build"; build({ board: "pi3b", hat: "oled-bonnet" }); build({ board: "pi-zero-2w", case: "unipi" }); build({ board: "pi-zero-2w", solderHeader: true, hat: "oled-bonnet" }); build({ board: "pi5", cooler: "active-cooler", hat: "poe-plus" }); build({ base: "nas-4bay", drives: ["hdd-35", "hdd-35", null, null] }); build({ base: "ipad", stand: null }); ``` [文档/ parts.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/parts.md) 有每个部分和每个规则。 ## 风格 绘画风格是一个小的设置表：线条粗细，颜色，填充。 `thin` 为默认值，并且 `thick` 另一个，每个设备和部件都是在每个里面制造的，所以另一种风格是一个入口。看到 [文档/ styles.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/styles.md). ```html ``` `style="thick"` 也可以，但是 `style` 是HTML的全局属性，并且严格的内容安全策略会报告它，所以呢 `drawing-style` 是要用的。 ## 规模 默认情况下，每张图都占满了自己的图片，所以一个小棋盘看起来像一座塔一样大。与 `scale="real"` 它有它的真实尺寸，而且 `` 把机器并排放在一条基线上。线条保持其样式设置的宽度为任意大小。看到 [文档/ scale.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/scale.md). ```html ``` ## 实时屏幕 用你自己的文字或画布绘制设备的屏幕。看到 [文档/ element.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/element.md). ```js const device = document.querySelector("hako-device"); device.paintScreen({ title: "Kitchen", lines: ["3 screens are on"], status: "good" }); device.paintScreen((ctx, width, height) => ctx.fillRect(0, 0, width, height)); ``` ## 反应 反应使 `key` 对于它自己，所以包装器的prop是 `device`： ```jsx import { HakoDevice } from "@johnmorrisdotca/hako-devices/react"; ; ; ``` ## 没有商标，商标上有字 **没有网格或图纸带有标志，标记或品牌印刷。** 有一个中性词 `print` 选项，这样你就可以在设备上绘制自己的文字，风险自负： ```html ``` 在目录和文档中，产品名称仅作为普通的描述性词语出现。所有商标归其所有者所有，本项目不隶属于任何一方，不受任何一方的赞助或认可。图纸和网格是从平面几何和出版尺寸绘制的原创作品。 ## 通过机器是什么来过滤 名单上的每台机器都有品牌和型号，大多数都是十年。在一个来源给出它们的地方，它也有它的CPU和CPU制造商，核心，内存，操作系统，屏幕，端口，无线，重量，生成和部件。没有来源的事实被遗漏了，从来没有猜测过，所以CPU的过滤器会遗漏没有人来源的机器。 ```ts import { catalogue } from "@johnmorrisdotca/hako-devices"; import { matchesPicks } from "@johnmorrisdotca/hako-devices/tags"; const intelLaptops = catalogue().filter(({ key }) => matchesPicks(key, { type: ["Laptop"], cpuMaker: ["Intel"] })); ``` ## 机器列表为JSON 每台机器也是一个静态文件，对于一个页面或脚本来说，需要列表而不需要代码： `@johnmorrisdotca/hako-devices/machines.json`, [https://johnmorrisdotca.github.io/hako-devices/machines.json](https://johnmorrisdotca.github.io/hako-devices/machines.json) 在演示站点上（它允许其他站点读取它）。每台机器都有它的 `key`， `name`， `maker`， `family`， `status`， `mesh`， `tags` 对于一个绘制的装置， `size` 单位为毫米及 `ports`. [文档/ machines.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/machines.md) 拥有每一个领域，以及遗漏了什么和为什么。 **当添加机器时，将重新生成列表并与它们一起发布。** 运行 `pnpm wishlist` 然后 `pnpm machines`，并承诺 `data/machines.json` 用机器。 `pnpm check` 当文件过期时失效，因此没有它机器无法运行；构建将文件放在包中，每次推送到 `main` 把它放在演示网站上。 ## 分组和颜色 `groupLayout` 和 `groupSample` 摆出一个集团的照片，把它的几台机器放在一起。 `FINISHES` 列出一台机器的其他颜色，每一种颜色都是它自己的设备。看到 [文档/ assets.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/assets.md). ## 即将到来的 该目录还列出了尚未安装网格的机器。`status: "planned"`）. 它们只有名字，没有形状：画廊和 `` 显示一个“即将到来”的图片为每个，和 `catalogue()`， `statusOf(key)` 和 `catalogueCounts()` 说哪个是哪个。 [文档/ wishlist.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/wishlist.md) 是列表。 ## 帮助填写 **这个列表有一些差距，你可以帮助弥补它们。** 列出了数千台机器，许多机器缺少尺寸、CPU、年份或日期。大多数仍在等待图纸，有些图纸缺少真正的主人会立即发现的细节。如果你知道一台机器，或者你的桌子上有一台机器，你可以做得更好： - **添加一个你可以引用的事实：** 尺寸，CPU，发布或终止支持日期，或者按钮或相机的真正位置。 - **纠正错误：** 一个错误的事实比一个缺失的事实更重要，所以这些是第一位的。 - **添加一台缺失的机器，** 或者整个产品线还没有人列出。 - **看看实物旁边的画** 告诉我们什么是关闭的。 空白总是好的。猜测从来都不是：每个事实都命名了它来自的页面，所以请链接你的。 [打开一个问题](https://github.com/johnmorrisdotca/hako-devices/issues) 与机器，事实和链接，或发送一个拉请求以下 [CONTRIBUTING.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/CONTRIBUTING.md#add-or-correct-a-fact). **想要画机器？** [建筑机械](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/docs/building-machines.md) 具有将编码代理引导到相同标准的步骤、要避免的错误和准备好的提示。 ## 其余的 [CONTRIBUTING.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/CONTRIBUTING.md) · [SECURITY.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/SECURITY.md) · [CHANGELOG.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/CHANGELOG.md) · [NOTICE.md](https://npmcn.com/package/%40johnmorrisdotca/hako-devices/NOTICE.md) ·MIT许可证 ## 常见问题 ### @johnmorrisdotca/hako-devices 是什么？ Hako Devices：树莓派，mac，个人电脑，手机，平板电脑，游戏机，NAS盒子和经典机器的线条图和3D视图，作为web组件，带有标签，可按CPU，品牌等过滤2,200多个机器，并以输入方式组装机器 ### 如何安装 @johnmorrisdotca/hako-devices？ 在项目目录运行 npm install @johnmorrisdotca/hako-devices，或使用 pnpm add / yarn add / bun add。 ### @johnmorrisdotca/hako-devices 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @johnmorrisdotca/hako-devices 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @johnmorrisdotca/hako-devices 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @johnmorrisdotca/hako-devices 可以商用吗？ @johnmorrisdotca/hako-devices 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @johnmorrisdotca/hako-devices 还在维护吗？ 最新版本 0\.6\.1 发布于 2026/11/01（1 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/10/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。