# @dorsk/tsumikit 中文文档

规范地址：https://npmcn.com/package/%40dorsk/tsumikit/

版本：0\.83\.0
npm 元数据更新时间：2026-11-10T02:15:13.355Z
中文译文更新时间：2026-11-12T17:00:01.655Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dorsk/tsumikit
原文对照：https://npmcn.com/package/%40dorsk/tsumikit/?lang=original
项目主页：https://dorskfr.github.io/tsumikit
源码仓库：https://github.com/DorskFR/tsumikit

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

- 包体积（解压后）：1.6 MB，389 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：svelte ^5\.0\.0
- 首次发布：2026-06-13T10:54:54.398Z
- 最新版本发布：2026-11-10T02:15:12.837Z
- 近 30 天下载量：5827（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：153（近 12 个月 153 个）

## 中文简介

Svelte 5 UI组件以平面 CSS变量为样式:31个主题,WCAG AA对比,没有运行时依赖.

## 安装

```sh
npm install @dorsk/tsumikit
```

也可以使用：`pnpm add @dorsk/tsumikit`、`yarn add @dorsk/tsumikit`、`bun add @dorsk/tsumikit`

## README

# @dorsk/tsumikit (英语)

Svelte 5 UI组件以平面 CSS变量为样式:31个主题,WCAG AA对比,没有运行时依赖.

[![npm](https://img.shields.io/npm/v/@dorsk/tsumikit)](https://www.npmjs.com/package/@dorsk/tsumikit) [![CI](https://github.com/DorskFR/tsumikit/actions/workflows/ci.yml/badge.svg)](https://github.com/DorskFR/tsumikit/actions/workflows/ci.yml) [![svelte](https://img.shields.io/npm/dependency-version/@dorsk/tsumikit/peer/svelte)](https://svelte.dev/) [![license](https://img.shields.io/npm/l/@dorsk/tsumikit)](https://npmcn.com/package/%40dorsk/tsumikit/LICENSE)

![tsumikit showcase page: breadcrumb, page header with actions, four metric cards, a settings form with inputs, selects, checkboxes, switches, slider, radio group and segmented control, and a panel of button variants, sizes, tones, split buttons and a menu](https://npmcn.com/package/%40dorsk/tsumikit/docs/assets/hero-light.png)

每个颜色、空间、半径和大小都是CSS自定义属性:一个主题是一个变量块,一个组件与 `style="--btn-bg: …"`。交互部分的使用 `<dialog>`,“Popover API”和“原生形式控制” [设计原则](https://npmcn.com/package/%40dorsk/tsumikit/principles/README.md) 包裹里有船.

[使用每个组件和道具进行现场演示](https://dorskfr.github.io/tsumikit)

## 安装

```sh
npm i @dorsk/tsumikit
```

端点 : `svelte@^5.0.0`。将字体捆绑起来.

## 快开始

```svelte
<script lang="ts">
  import '@dorsk/tsumikit/styles/app.css';
  import { Button, Field, Input, Toaster, toasts } from '@dorsk/tsumikit';

  let name = $state('');
</script>

<Field label="Workspace name" for="name">
  <Input id="name" bind:value={name} />
</Field>
<Button variant="primary" onclick={() => toasts.ok(`Saved ${name}`)}>Save</Button>
<Toaster />
```

在 app root 导入样式表一次 。 按下保存显示 `ok` 祝酒词.

### 启动新项目

复制 [`examples/starter`](https://npmcn.com/package/%40dorsk/tsumikit/examples/starter) 替换 `"file:../.."` 一个版本。 目录: [实例/启动/README.md](https://npmcn.com/package/%40dorsk/tsumikit/examples/starter/README.md)。 。 。 .

从0.82或以上升级: [(单位:千美元)](https://npmcn.com/package/%40dorsk/tsumikit/docs/MIGRATION-0.83.md) (和 [0.82 (简体中文)](https://npmcn.com/package/%40dorsk/tsumikit/docs/MIGRATION-0.82.md)) (中文(简体) ).

## 他们

31个主题,全部被测试为WCAG AA对比. `<ThemePicker />` 持续选择 `localStorage`· ; `auto` 如下 `prefers-color-scheme`。 。 。 .

```ts
import { theme } from '@dorsk/tsumikit';
theme.register({ id: 'acme', label: 'Acme', mode: 'dark' });
theme.setDefault('acme');
```

```css
/* brand.css, imported after the kit stylesheet */
[data-theme='acme'] {
  --c-bg: #2a2a2a;
  --c-accent: #5ac8c8;
  /* …the rest of the 19 --c-* palette tokens, shadows and --mach-* pairs */
}
```

```svelte
<Button style="--btn-bg: var(--c-violet); --btn-fg: #fff; --btn-radius: 0">Ship</Button>
```

主题合同, 外观, 样式表和类型 : [医生/医生](https://npmcn.com/package/%40dorsk/tsumikit/docs/theming.md)。每个组件自定义属性和测试编号: [文件/样式.md](https://npmcn.com/package/%40dorsk/tsumikit/docs/styling.md)。 。 。 .

## 构成部分

层 : `tokens.css`,原子(唯一的原始原子) `<button>`编号 :`<input>`编号 :`<select>`),分子,布局. 每一层都下至一层([文件/设计](https://npmcn.com/package/%40dorsk/tsumikit/docs/design.md)) (中文(简体) ). 辅料, `aria-*` 包括,并扩展到基本内容.

| 层 | 构成部分 |
| --- | --- |
| [原子](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#atoms) | 文本、标题、按钮、输入、文本区域、选择、切换、检查框、滑动、高格、阿凡达、卡片、徽章、链接、图标 |
| [分子](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#molecules) | 字段, Modal, Popover, 菜单, Tabs, FilterChips, Combobox, 披露, 协议, Toaster, 主题选择器, 绘图器, 分块按钮, 可排序列表 |
| [有机体](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#organisms) | 数据表、 对话面板、 对话页、 过滤器搜索栏 |
| [布局](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#layouts) | AppShell, NavBar, MasterDetail, 集装箱, 堆叠, 集群, 自动Grid |
| [移动和媒体](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#mobile-tabbar-swiperow-pulltorefresh) | TabBar, SwipeRow, PullTo Rerefresh, 寻求滑翔机, 卷滑器 |
| [存储和助手](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#stores-actions-and-helpers) | `theme`, (中文(简体) ), `toasts`, (中文(简体) ), `fontScale`, (中文(简体) ), `autoresize`, (中文(简体) ), `copyToClipboard` |

| 指南 | 封面 |
| --- | --- |
| [模式](https://npmcn.com/package/%40dorsk/tsumikit/docs/patterns.md) | 加载、 保留最终框、 行动作和选择、 选择控制、 撤销确认、 URL状态、 断点 |
| [布局和大小](https://npmcn.com/package/%40dorsk/tsumikit/docs/layout.md) | 容器查询、缩放、控制高度、44px被击中区域 |
| [护栏](https://npmcn.com/package/%40dorsk/tsumikit/docs/guardrails.md) | `tsumikit-lint` CLI, dev-mode 警告 |
| [声音](https://npmcn.com/package/%40dorsk/tsumikit/docs/sound.md) | 选择的 UI 声音 |
| [无障碍](https://npmcn.com/package/%40dorsk/tsumikit/docs/accessibility.md) | ARIA模式、平台特征 |
| [设计原则](https://npmcn.com/package/%40dorsk/tsumikit/principles/README.md) | 30个原则,每个原则都有检查 |

## 限制

-   斯维尔特5号.
-   没有捆绑的语法亮点 : `CodeBlock` 使用一个 `highlight` 回调( c)[细节](https://npmcn.com/package/%40dorsk/tsumikit/docs/components.md#syntax-highlighting-codeblock)) (中文(简体) ).
-   内部类名( E)`.btn`和 `data-tsu` 标记是私有的,在任何释放中都可能改变。 通过已公布的自定义属性样式, 而不是 `:global()`。 。 。 .
-   前1.0:小放出可以改变默认. 移民笔记在 [`docs/`](https://npmcn.com/package/%40dorsk/tsumikit/docs/)。 。 。 .

## 发展

```sh
git clone https://github.com/DorskFR/tsumikit && cd tsumikit
npm install
npm run dev          # showcase at the printed URL (+ /shell for the AppShell demo)
npm test             # contract tests (node --test)
npm run lint         # biome
npm run check        # svelte-check
npm run build        # prerendered static site in /build
npm run package      # publishable library in /dist (+ publint)
```

虎克 (左钩,通过) `prepare`生化在承诺, `svelte-check` 推车。 A 类 `v*` 标签通过 GitHub 动作信任的发布发布到 npm .

## 许可证

[麻省理工学院](https://npmcn.com/package/%40dorsk/tsumikit/LICENSE)

## 常见问题

### @dorsk/tsumikit 是什么？

Svelte 5 UI组件以平面 CSS变量为样式:31个主题,WCAG AA对比,没有运行时依赖\.

### 如何安装 @dorsk/tsumikit？

在项目目录运行 npm install @dorsk/tsumikit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 tsumikit-lint，可以用 npx tsumikit-lint 直接运行。

### @dorsk/tsumikit 支持 TypeScript 吗？

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

### @dorsk/tsumikit 支持 ESM 还是 CommonJS？

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

### @dorsk/tsumikit 可以商用吗？

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

### @dorsk/tsumikit 的下载量有多少？

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

### @dorsk/tsumikit 还在维护吗？

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