# helldots 中文文档 规范地址：https://npmcn.com/package/helldots/ 版本：0\.13\.0 npm 元数据更新时间：2026-11-03T17:08:11.415Z 中文译文更新时间：2026-11-03T20:31:25.962Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/helldots 原文对照：https://npmcn.com/package/helldots/?lang=original 项目主页：https://github.com/xKeCo/helldots#readme 源码仓库：https://github.com/xKeCo/helldots ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，7 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=18 - 运行依赖：0 个 - peer 依赖：modern-screenshot ^4\.7\.0 - 首次发布：2026-07-30T12:55:39.123Z - 最新版本发布：2026-11-03T17:08:10.986Z - 已发布版本数：13（近 12 个月 13 个） ## 中文简介 插入式评论覆盖网络应用程序-点击任何地方留下评论锚定的元素，与自动截图和环境捕获 ## 安装 ```sh npm install helldots ``` 也可以使用：`pnpm add helldots`、`yarn add helldots`、`bun add helldots` ## README ![](https://raw.githubusercontent.com/xKeCo/helldots/main/assets/brand/helldots-mark.png) # HellDots 插入式评论覆盖的web应用程序。你的团队在页面上任意点击， 在此元素上留下注释，而《HellDots》便能够抓住上下文 需要对它采取行动——屏幕截图，浏览器，视口，DOM路径。 [![npm](https://img.shields.io/npm/v/helldots)](https://www.npmjs.com/package/helldots) [![bundle size](https://img.shields.io/bundlejs/size/helldots)](https://bundlejs.com/?q=helldots) [![license](https://img.shields.io/npm/l/helldots)](https://github.com/xKeCo/helldots/blob/main/LICENSE) **[文档](https://helldots.kcollazos.me/docs)** · **[操场上](https://helldots.kcollazos.me/docs/playground)** · **[npm](https://www.npmjs.com/package/helldots)** ![Leaving a comment on a button, classifying it as a high-priority bug, opening its captured context, then the inbox and the metrics dashboard](https://raw.githubusercontent.com/xKeCo/helldots/main/assets/demo.gif) ## 特性 - **固定的评论** 存活下来的，在页面加载后重新锚定 变化——或被标记为孤儿，从未无声地落下 - **自动背景**：截图，区域裁剪，URL，视窗，浏览器， 操作系统和元素的DOM路径 - **分类**：状态、类型、优先级、标签、反应和审计跟踪 - **指标指示板** 与CSV和PDF导出 - **代理人副本**：为AI编码助手构建的纯文本上下文块 - **你拥有数据**：没有任何东西被发送到任何地方-将回调连接到您的 后端，或者让小部件持久化到 `localStorage` - **孤立的**：在Shadow DOM内渲染，框架无关，类型 - **英语和西班牙语** 建在 ## 安装 ```bash npm install helldots ``` > `modern-screenshot` （屏幕截图渲染器）是一个对等依赖。npm 7 +, PNPM 8+和bun自动安装；在Yarn上，显式地添加 `yarn add modern-screenshot`。 ## 快速启动 ```js import { createCommentOverlay } from "helldots"; createCommentOverlay({ user: { name: "Ana" }, persistence: "localStorage", }); ``` 就是这样。工具栏出现在页面底部。 `Alt`+`C` (或 `Option`+`C` 在macOS上)切换评论模式；单击任何地方留下一个 注释，或拖动以选择一个区域并附加该区域的屏幕截图。 ## 将其连接到您自己的后端 跳过 `persistence` 用回调来代替。 `onChange` 有每 突变是一条溪流； `onReady` 是安全的地方恢复： ```js import { createCommentOverlay } from "helldots"; createCommentOverlay({ user: { name: currentUser.name, id: currentUser.id }, onChange: (event) => api.post("/helldots-events", event), onReady: async (overlay) => { overlay.loadComments(await api.get("/comments")); }, }); ``` 每个注释都是纯JSON: pass `serializeComments()` 直接输出到 你的API并把它交还给 `loadComments()` 以后。希望每次回调一次 事件(`onCommentCreated`， `onReplyAdded`,……)?他们在同一时刻开火 看到 [事件](https://helldots.kcollazos.me/docs/api/events)。 `localStorage` 拥有大约一百条评论和截图和假设 每个页面一个活动标签；在此之后，坚持回调。保持 Base64图像从您的数据库，上传他们与 `transformScreenshot`。 → [持久性指南](https://helldots.kcollazos.me/docs/guides/persistence) ## 框架 **Server-rendered应用** （Next.js, Remix, Astro…）：导入是安全的-什么都没有 在导入时触及DOM。只在客户端上创建覆盖层： ```jsx useEffect(() => { const overlay = createCommentOverlay({ user, persistence: "localStorage" }); return () => overlay.cleanup(); }, [user]); ``` **单页面应用程序**：当导航发生时，告诉小部件，并让它运行 自己的跨页跳转使用你的路由器： ```js const overlay = createCommentOverlay({ user, navigate: (page) => router.push(page), }); router.afterEach(() => overlay.notifyNavigation()); ``` → [框架指南](https://helldots.kcollazos.me/docs/guides/frameworks) ## 将注释传递给编码代理 每个评论都有一个 **复制** 控件上的纯文本上下文块 剪贴板，用于粘贴到AI编码助手中； ``` Page: /pricing Viewport: 1440x900 Anchor state: anchored Status: open Selector: #plans > div.card:nth-child(2) > button Element: