# @finstack-com-public/design 中文文档

规范地址：https://npmcn.com/package/%40finstack-com-public/design/

版本：0\.10\.1
npm 元数据更新时间：2026-11-12T14:05:03.618Z
中文译文更新时间：2026-11-14T20:16:28.173Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.2 MB，4262 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.18
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2026-11-02T14:55:06.973Z
- 最新版本发布：2026-11-12T14:05:03.223Z
- 近 30 天下载量：2131（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

设计工具包:指使,图标,组件和一个图表主题,由Grizzbi,BI App和计算引擎共享.

## 安装

```sh
npm install @finstack-com-public/design
```

也可以使用：`pnpm add @finstack-com-public/design`、`yarn add @finstack-com-public/design`、`bun add @finstack-com-public/design`

## README

# FinStack 设计包

`@finstack-com-public/design` 给FinStack的产品一个印象: 设计符号,Lucide图标集, a 组件库和图表主题。 它被Grizzbi,BI App和计算引擎所使用.

框架中立:

-   外观为CSS自定义属性外加基于类的CSS.
-   行为来源于小型平面DOM函数.
-   细回放包装器使相同的标记并调用相同的功能.

没有运行时的依赖性( React 是可选的对等点),并且每个文件的负载都是这样, 没有建设步骤.

## 安装

该工具包已公开出版 **npmjs.com (英语)**。它不需要符号和 `.npmrc` 条目 :

```sh
npm install @finstack-com-public/design
```

## 使用

```js
import '@finstack-com-public/design/kit.css'; // layers, tokens, every block and the utilities
import '@finstack-com-public/design/fonts.css'; // Inter and Plus Jakarta Sans, self-hosted
```

打印到 PDF 负载的页面 `fonts-print.css` 改为 `fonts.css`:静态Inter和+雅加达桑斯 铬嵌入为TrueType. 包括页脚的打印食谱是 [`css/print.md`](https://npmcn.com/package/%40finstack-com-public/design/src/css/print.md)。 。 。 .

```html
<body class="fs-theme fs-light fs-compact">
  <button class="fs-button fs-button--primary">Apply</button>
</body>
```

-   **方案:** `.fs-light`, (中文(简体) ), `.fs-dark` 或者说 `.fs-auto`。 。 。 . **密度 :** `.fs-dense`, (中文(简体) ), `.fs-compact` 或者说 `.fs-comfortable`。每根或任何 `.fs-theme` 岛.
-   **每块 CSS :** 导入 `css/layers.css` 先说 `css/tokens.css` 和块你 使用量(`css/button.css`(中文(简体) ).
-   **行为 :** `@finstack-com-public/design/dom` (单位:千美元)`createMenu`, (中文(简体) ), `createTabs`, (中文(简体) ), `createDialog`(中文(简体) ).
-   **反应 :** `@finstack-com-public/design/react`。 。 。 .
-   **图标 :** `@finstack-com-public/design/icons`。 。 。 .
-   **图表主题 :** `@finstack-com-public/design/charts` (与 `toEChartsTheme`) (中文(简体) ).
-   **作为数据的插件 :** `@finstack-com-public/design/tokens`, (中文(简体) ), `tokens.json` 财务报告和审定财务报表 `grid.json`。 。 。 .

每个区块的标记,变体和状态 都在CSS旁边的用法说明中 (单位:千美元)`dist/css/<block>.md`) (中文(简体) ). 全部合同是 [设计光谱](https://npmcn.com/package/%40finstack-com-public/design/docs/spec/README.md)数字 :

-   [导出路径](https://npmcn.com/package/%40finstack-com-public/design/docs/spec/03-api.md)· ;
-   [组件](https://npmcn.com/package/%40finstack-com-public/design/docs/spec/02-components.md)· ;
-   [符号](https://npmcn.com/package/%40finstack-com-public/design/docs/spec/01-tokens.md)。 。 。 .

**版本 :** 符号名称、类名、文件路径和导出是公共 API。 虽然 工具箱是0.x,一个小版本可能会打破它们,而且 [变动情况](https://npmcn.com/package/%40finstack-com-public/design/CHANGELOG.md) 这么说的.

## 开发

先决条件、命令和画廊(每个州的每一个街区,光和暗,3个) 密度)为 [文献/非环境设置](https://npmcn.com/package/%40finstack-com-public/design/docs/dev-environment-setup.md)开始代理 从 [一般事务人员(其他职等)](https://npmcn.com/package/%40finstack-com-public/design/AGENTS.md)。 。 。 .

## 许可证

麻省理工学院,看 [自由主义](https://npmcn.com/package/%40finstack-com-public/design/LICENSE)。许可证不包括产品名称、标志或吉祥物: [贸易](https://npmcn.com/package/%40finstack-com-public/design/TRADEMARKS.md)。Inter和Lucide图标数据保存自己的许可证: 见 [第三次议会 NoTICES.md](https://npmcn.com/package/%40finstack-com-public/design/THIRD_PARTY_NOTICES.md)。 。 。 .

## 常见问题

### @finstack-com-public/design 是什么？

设计工具包:指使,图标,组件和一个图表主题,由Grizzbi,BI App和计算引擎共享\.

### 如何安装 @finstack-com-public/design？

在项目目录运行 npm install @finstack-com-public/design，或使用 pnpm add / yarn add / bun add。

### @finstack-com-public/design 支持 TypeScript 吗？

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

### @finstack-com-public/design 支持 ESM 还是 CommonJS？

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

### @finstack-com-public/design 需要什么版本的 Node\.js？

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

### @finstack-com-public/design 可以商用吗？

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

### @finstack-com-public/design 的下载量有多少？

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

### @finstack-com-public/design 还在维护吗？

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