# @archilogic/honeycomb 中文文档

规范地址：https://npmcn.com/package/%40archilogic/honeycomb/

版本：3\.14\.1
npm 元数据更新时间：2026-11-04T15:35:57.017Z
中文译文更新时间：2026-11-06T14:31:52.310Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40archilogic/honeycomb
原文对照：https://npmcn.com/package/%40archilogic/honeycomb/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.7 MB，29 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12
- 运行依赖：3 个
- peer 依赖：vue ^3\.5\.18，tailwindcss ^4\.0\.0，@headlessui/vue ^1\.7\.23
- 首次发布：2023-01-19T14:02:01.022Z
- 最新版本发布：2026-11-04T15:35:56.757Z
- 近 30 天下载量：4110（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：144（近 12 个月 64 个）

## 中文简介

这个UI库是Archilogic设计系统的实施,原名"活地" `ui-components`。 。 。 .

## 安装

```sh
npm install @archilogic/honeycomb
```

也可以使用：`pnpm add @archilogic/honeycomb`、`yarn add @archilogic/honeycomb`、`bun add @archilogic/honeycomb`

## README

# Honeycomb - Archilogic 的设计系统库

这个UI库是Archilogic设计系统的实施,原名"活地" `ui-components`。 。 。 .

安装 v2 发布( npm 公开), 运行 `npm i @archilogic/honeycomb`

Honeycomb组件需要Vue (v3),Tailwind CSS,和无头UI库正确工作.

[图像设计文件](https://www.figma.com/file/rsElRZClpRdcKlakIrlwOP/Honeycomb-2.0?node-id=0%3A1)

[故事书文档](https://honeycomb.archilogic.com/)

## 使用量

请参看我们 [故事书文件](https://honeycomb.archilogic.com/) 对于最新和完整的文档.

## 发展

要从本地开发开始, 复制回波并运行 `nvm use && npm install`。 。 。 .

### 故事书

要运行本地 Storybook dev 服务器:

```

npm run storybook

```

### 测试和CI/CD

进行单位测试([维特](https://vitest.dev/):

```

npm run test

```

进行真正的浏览器测试(铬和WebKit通过 [剧作家](https://playwright.dev/),对于焦点,布局和指针行为jsdom不能建模:

```

npx playwright install --only-shell chromium webkit # once
npm run test:browser

```

设置自动视觉测试 [故事书](https://storybook.js.org/) 财务报告和审定财务报表 [色谱](https://www.chromatic.com/)。 。 。 . _(Archilogic Github组织中的每个人都可以登录) [染色体中的考古组织](https://www.chromatic.com/settings?accountId=61323c349738e8003aa86aa5)(中文(简体) )_

每个分支部署在Chromatic上 `push` 通过 [GitHub 动作](https://docs.github.com/en/actions/quickstart)。 。 。 .

### 释放

该图书馆的版本管理和出版是通过下列方式完成的: [语义释放](https://github.com/semantic-release/semantic-release)。 。 。 .

在每次合并到 `main` 分支 `release` 工作流程将启动。 它将决定新版本,将新软件包发布到npm,创建一个 GitHub 发布,以及更新更改日志和 `package.json`此软件包版本将在 `@latest` 发行渠道.

每一个推到 `beta` 财务报告和审定财务报表 `next` 树枝会触发预放 `@beta` 财务报告和审定财务报表 `@next` 相应的发行渠道.

推动到任何分支开始 `test-` 将发布预释.

这一进程如所期望的那样运作,确保遵守 [常规承诺](https://www.conventionalcommits.org/en/v1.0.0/) 组合式 PR 格式.

### 构建

```

npm run build

```

使用 `npm run watch` 发展成为当地联系的依赖.

### 依赖性更新

依赖性更新为 [由目录管理](https://npmcn.com/package/%40archilogic/honeycomb/.github/dependabot.yml)依附的拉动请求可以由 [合并公关](https://github.com/archilogic-com/actions/actions/workflows/combine-prs.yml) 动作(单击“运行工作流程”)。 它应该与所有默认设置一起工作, 但您必须输入“ ui- 组件” , 用于寄存器名称 。 为了保持一个干净的变革历史,请确保压倒运行中产生的公关 [合并公关](https://github.com/archilogic-com/actions/actions/workflows/combine-prs.yml)。 。 。 .

### 添加图标

1.  检查 Figma 中的图标
2.  右键单击"Copy/Paste as" > "Copy as SVG",或在左侧边栏面板中使用"Deign"标签中的"Export"部分.
3.  (可选)粘贴 SVG 片段 [SVG OMG (英语)](https://jakearchibald.github.io/svgomg/)
4.  (可选)复制最优化的 SVG 片段
5.  创建一个新的.svg文件。 图标的大小决定其目标文件夹 : `sm/` 16x16 (英语), `md/` 32x32, (英语), `lg/` 40x40, (英语), `fp/` 地平平面标签象形图(20x20,glyph正态为19px=接近零平面), `other/` 其他的都一样
6.  以 `currentColor` 因此,图标的颜色可以通过 CSS 设置

### IDE 推荐插件

请检查一下 [VS 代码推荐插件](https://www.notion.so/archilogic/VS-Code-recommended-plugins-2715cd2f189c4e9386b4a15de0a404e2) 项目建议延期清单的页码.

## 常见问题

### @archilogic/honeycomb 是什么？

这个UI库是Archilogic设计系统的实施,原名"活地" ui-components。 。 。 \.

### 如何安装 @archilogic/honeycomb？

在项目目录运行 npm install @archilogic/honeycomb，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.18）、tailwindcss（^4\.0\.0）、@headlessui/vue（^1\.7\.23）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @archilogic/honeycomb 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @archilogic/honeycomb 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @archilogic/honeycomb 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @archilogic/honeycomb 可以商用吗？

@archilogic/honeycomb 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @archilogic/honeycomb 的下载量有多少？

根据 npm 官方下载统计，@archilogic/honeycomb 在 2026/10/07 – 2026/11/05 这 30 天内被下载 4,110 次，日均约 137 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @archilogic/honeycomb 还在维护吗？

最新版本 3\.14\.1 发布于 2026/11/04（3 天前）；至今共发布 144 个版本，其中过去 12 个月发布了 64 个；首次发布于 2023/01/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。