# @edv4h/usketch-plugin-timter 中文文档

规范地址：https://npmcn.com/package/%40edv4h/usketch-plugin-timter/

版本：0\.3\.22
npm 元数据更新时间：2026-11-10T02:55:24.567Z
中文译文更新时间：2026-11-13T07:46:18.264Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40edv4h/usketch-plugin-timter
原文对照：https://npmcn.com/package/%40edv4h/usketch-plugin-timter/?lang=original
项目主页：https://github.com/EdV4H/usketch#readme
源码仓库：https://github.com/EdV4H/usketch

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

- 包体积（解压后）：79 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=19
- 首次发布：2026-07-17T08:40:21.389Z
- 最新版本发布：2026-11-10T02:55:24.203Z
- 近 30 天下载量：2380（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @edv4h/usketch-plugin-timter
```

也可以使用：`pnpm add @edv4h/usketch-plugin-timter`、`yarn add @edv4h/usketch-plugin-timter`、`bun add @edv4h/usketch-plugin-timter`

## README

# @edv4h/usketch-plugin-timter (英语)

共享计时器为 **画布形状** (独出真言之源. A 类 `timer` 形状是 可移位/可移动并同步通过普通形状映射; 时间运行与 共享 `ServerClock` 所以每个用户都同意"现在" 插件也显示 调试HUD控制码头的每个计时器(组"Timter").

域名模式( E)`timer-model`)是纯的,无框架的,以及时间源 不可知论——每个功能都具有明确的 `serverNow`。 。 。 .

## 安装

```ts
import { createTimterPlugin } from "@edv4h/usketch-plugin-timter";

const timter = createTimterPlugin({
  serverClock, // your shared ServerClock
  userId,      // optional, attribution (reserved)
});
```

## 定制形状的外观—— `renderShape`

默认是定时器用内置视觉制作的. 为了配合你自己的设计 (手绘主题、设计符号、自定义控制),通过a `renderShape` 变相道具。 它得到的形状,它的活 `TimerCore`新鲜的 `serverNow` (在运行时重复每一次自拍),计时器 `actions`编辑 插件拥有勾选和商店写入——您的渲染器只绘制和调用 行动.

```tsx
import {
  createTimterPlugin,
  displayMs,
  formatDuration,
  isDone,
} from "@edv4h/usketch-plugin-timter";

createTimterPlugin({
  serverClock,
  renderShape: ({ shape, core, serverNow, actions }) => (
    <div className="my-timer" data-done={isDone(core, serverNow)}>
      <span className="my-timer__time">
        {formatDuration(displayMs(core, serverNow))}
      </span>
      <button type="button" onClick={actions.toggle}>
        {shape.running ? "pause" : "start"}
      </button>
      <button type="button" onClick={actions.reset}>reset</button>
    </div>
  ),
});
```

`actions`数字 :

| 动作 | 效果 |
| --- | --- |
| `toggle()` | 暂停时启动, 运行时暂停 |
| `reset()` | 返回已配置的状态, 停止状态 |
| `switchType()` | 预付至下一个已登记类型(仅暂停) |
| `adjust(deltaMs)` | 更改所配置的时间长度 `deltaMs` (基于期限的种类,仅暂停) |

> 按钮应该叫 `e.stopPropagation()` 打开 `onPointerDown` 所以点击 不开始画布拖动——看 `defaultRenderTimerShape` 为图案.

### 延伸,不要替换

`defaultRenderTimerShape` 导出后,您可以将内置的图像包起来 而不是改写:

```tsx
import { defaultRenderTimerShape } from "@edv4h/usketch-plugin-timter";

createTimterPlugin({
  serverClock,
  renderShape: (ctx) => (
    <div className="my-frame">{defaultRenderTimerShape(ctx)}</div>
  ),
});
```

## 添加计时器类型 - `registerTimerKind`

`countdown` 财务报告和审定财务报表 `stopwatch` 被构建在。 登记自己的类型(例如:. `pomodoro`)在启动时一次;模型过渡、形状渲染器和 控制台都像内置的一样. `switchType()` 周期周期 注册类型.

```ts
import { registerTimerKind, TIMER_KINDS } from "@edv4h/usketch-plugin-timter";

registerTimerKind("pomodoro", {
  ...TIMER_KINDS.countdown, // reuse countdown transitions
  icon: "🍅",
  // always a 25-minute work block
  initial: () => ({ anchorAt: null, accumMs: 25 * 60_000, durationMs: 25 * 60_000 }),
});
```

A 类 `TimerKind` 定义纯切换 `TimerCore`数字 :

```ts
interface TimerKind {
  icon?: string; // glyph used by the built-in renderer / Controls dock
  displayMs(c, serverNow): number;
  isDone(c, serverNow): boolean;
  onStart(c, serverNow): Pick<TimerCore, "anchorAt" | "accumMs">;
  onPause(c, serverNow): Pick<TimerCore, "anchorAt" | "accumMs">;
  initial(durationMs): Pick<TimerCore, "anchorAt" | "accumMs" | "durationMs">;
}
```

## 出口模式

`start` • 妇女 `pause` • 妇女 `reset` • 妇女 `initialCore` • 妇女 `displayMs` • 妇女 `isDone` • 妇女 `formatDuration` • 妇女 `getTimerKind` • 妇女 `timerTypes` • 妇女 `registerTimerKind` • 妇女 `TIMER_KINDS` + 类型 `TimerCore` • 妇女 `TimerType` • 妇女 `TimerKind`。 。 。 .

形状导出 : `TIMER_SHAPE_TYPE` • 妇女 `TimerShapeData` • 妇女 `defaultRenderTimerShape` • 妇女 `makeTimerShape` • 妇女 `dispatchTimerShapeAction` + 类型 `TimerShapeRenderer` • 妇女 `TimerRenderContext` • 妇女 `TimerShapeActions`。 。 。 .

## 常见问题

### 如何安装 @edv4h/usketch-plugin-timter？

在项目目录运行 npm install @edv4h/usketch-plugin-timter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edv4h/usketch-plugin-timter 支持 TypeScript 吗？

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

### @edv4h/usketch-plugin-timter 支持 ESM 还是 CommonJS？

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

### @edv4h/usketch-plugin-timter 可以商用吗？

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

### @edv4h/usketch-plugin-timter 的下载量有多少？

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

### @edv4h/usketch-plugin-timter 还在维护吗？

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