# @botharness/botui-core 中文文档

规范地址：https://npmcn.com/package/%40botharness/botui-core/

版本：0\.3\.0
npm 元数据更新时间：2026-10-01T20:52:20.004Z
中文译文更新时间：2026-11-08T12:12:16.663Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40botharness/botui-core
原文对照：https://npmcn.com/package/%40botharness/botui-core/?lang=original
项目主页：https://ui.botharness.ai/
源码仓库：https://github.com/BotHarness/BotUI

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

- 包体积（解压后）：197 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-09-30T05:02:17.827Z
- 最新版本发布：2026-10-01T20:52:19.781Z
- 近 30 天下载量：4100（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

BotUI 组件背后的框架不可知引擎

## 安装

```sh
npm install @botharness/botui-core
```

也可以使用：`pnpm add @botharness/botui-core`、`yarn add @botharness/botui-core`、`bun add @botharness/botui-core`

## README

# @ botharness/ botui- core (英语)

BotUI 组件背后的框架不可知引擎——没有DOM库,没有框架,一个依赖性:没有.

这层决定 **哪个单元格存在**, (中文(简体) ), **光线在哪个方向移动**, (中文(简体) ), **每个细胞在循环中有多亮**,以及 **如何绘制一个点**。这些是独立的问题,所以它们是独立的表格,可以不相碰地延伸.

## 安装

你可能不需要这个包裹 建议的路径是将源代码复制到您的 repo 中:

```bash
npx @botharness/botui add dot-matrix
```

从 npm 安装它, 当您想要将引擎作为依赖性, 或者当您正在在上面建工具时 :

```bash
npm install @botharness/botui-core
```

## 使用

```ts
import { createDotMatrix } from "@botharness/botui-core";
import "@botharness/botui-core/style.css"; // required for renderer: "css"

const field = createDotMatrix(document.querySelector("#loading")!, {
  size: 32,
  cols: 5,
  rows: 5,
  silhouette: "circle",
  dot: "circle",
  preset: "spiral",
});

field.start();
// …later
field.destroy();
```

### 两个出品人

| `renderer` | 费用 | 使用时间 |
| --- | --- | --- |
| `"svg"` (默认) | 每个框每个可见点写一个属性 | 大小、形状或点数 |
| `"css"` | **每帧0个联署材料** 一个 `@keyframes` 规则 | 几何是固定的,只有亮度移动 |

两者都是一样的驱动力 `field(options, t)`,选项的纯函数和一个相. 这就是CSS路径值得信赖的整个原因:它不是第二次执行,因此它不能从SVG路径中漂移出.

`cssRenderable(options)` 在前面告诉你一个运动是否可以被表达成键框. 有些人不能.. `columns` 每个列的条目交错, 每个点 `animation-delay` 不建模——函数返回 `false` 而不是默默地做出别的事情.

### 这五层

| 层 | 问它答案 |
| --- | --- |
| **长发** | 哪些单元格存在(`square`, (中文(简体) ), `circle`, (中文(简体) ), `diamond`, (中文(简体) ), `hex`, (中文(简体) ), `ring`, (中文(简体) ), `cross`(中文(简体) ) |
| **倾斜** | 光线的顺序`spiral`, (中文(简体) ), `columnSnake`, (中文(简体) ), `radial`, (中文(简体) ), `ring`(中文(简体) ) |
| **信封** | 细胞在循环中有多亮(`comet`, (中文(简体) ), `wave`, (中文(简体) ), `plateau`, (中文(简体) ), `chase`(中文(简体) ) |
| **格莱弗** | 如何绘制一个点——多边形加两个角弧度 |
| **渲染器** | SVG 或 CSS 软件 |

### 你自己的转弯

这个 **倾斜** 层是网纹位置返回的平面函数 `0…1`这样 任何你能计算每个细胞的动能 通过它作为 `order` 它取代了 预设 :

```ts
// a chevron that speeds up toward its tip: the traversal value is eased, so successive
// dots along each arm start closer together in phase than a linear ramp would
const chevron = (col: number, row: number, cols: number, rows: number) => {
  const mid = (rows - 1) / 2;
  const arm = Math.abs(row - mid) / (mid || 1); // 0 at the spine, 1 at the tips
  const along = col / (cols - 1 || 1);
  const v = arm * 0.6 + along * 0.4; // down one arm, then along the other
  return v * v; // ease-in: faster toward the tip
};

createDotMatrix(el, { cols: 9, rows: 9, preset: "morph", order: chevron });
```

有两件事值得了解:

-   **它在两个渲染器中都有作用.** CSS主机生成每个单元格的 `animation-delay` 从 同样的价值,所以一个定制的倒转成本 零每个框架的JS,那里也.
-   **这是一个函数,所以不能复制.** 带有自定义曲面的组件是 动作是代码的组件——保持源代码。 游戏场的复制按钮 省略它,而不是假装一个函数是一个值.

`direction` 以一个 **第五届** 因此,一个没有方向感的转弯 保持四分法 忽略它 一个能读 `dir?.includes("rightToLeft")` 没有重新发现任何东西.

完整的选项列表以及大小代数背后的推理在 [`src/types.ts`](https://github.com/BotHarness/BotUI/blob/main/packages/core/src/types.ts)。 。 。 .

## 文档

**[{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}哦..](https://ui.botharness.ai/)** –每个控制器的现场游乐场,在 [联合国](https://ui.botharness.ai/) 财务报告和审定财务报表 [页:1](https://ui.botharness.ai/zh/)。 。 。 .

## 许可证

麻省理工学院 [瓶调](https://github.com/BotHarness/BotUI)

## 常见问题

### @botharness/botui-core 是什么？

BotUI 组件背后的框架不可知引擎

### 如何安装 @botharness/botui-core？

在项目目录运行 npm install @botharness/botui-core，或使用 pnpm add / yarn add / bun add。

### @botharness/botui-core 支持 TypeScript 吗？

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

### @botharness/botui-core 支持 ESM 还是 CommonJS？

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

### @botharness/botui-core 可以商用吗？

@botharness/botui-core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @botharness/botui-core 的下载量有多少？

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

### @botharness/botui-core 还在维护吗？

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