# @falkara/presentation 中文文档

规范地址：https://npmcn.com/package/%40falkara/presentation/

版本：0\.10\.0
npm 元数据更新时间：2026-11-10T17:23:51.604Z
中文译文更新时间：2026-11-14T09:40:11.256Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40falkara/presentation
原文对照：https://npmcn.com/package/%40falkara/presentation/?lang=original
项目主页：https://github.com/falkara/workspace/tree/main/libraries/presentation#readme
源码仓库：https://github.com/falkara/workspace

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

- 包体积（解压后）：200 kB，20 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：effect ^4\.1\.3
- 首次发布：2026-10-29T14:21:20.201Z
- 最新版本发布：2026-11-10T17:23:51.269Z
- 近 30 天下载量：2131（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

基于效果的 TypeScript 界面设计库,从既定标准中获取每个值,但保存一个已宣布的选择.

## 安装

```sh
npm install @falkara/presentation
```

也可以使用：`pnpm add @falkara/presentation`、`yarn add @falkara/presentation`、`bun add @falkara/presentation`

## README

# 法尔卡拉介绍

法尔卡拉介绍 [基于效果](https://effect.website/) 用于界面设计的TypeScript库. 它的每一种价值都取自既定标准,除了一个宣布的选择外,它的价值得到最广泛的取景,并拒绝任何破坏这些标准,以保持设计在尺度上的一致性.

它一直困扰着我们,大多数接口在断点时会改变跳跃的大小,而它们之间的每一个屏幕都会这样。 我们把每个值都与共同比率挂钩,这样,每个值都与其余值同步平稳地增长。 每一个屏幕直到桌面都得到自己的值,甚至无人设计的值.

决定从每个数字转移到说明意图的少数选择。 由这种意图而产生的一切,都是一劳永逸的,并带着它的道理,所以,它没有任何一个取决于任何人的口味。 任何会留下读者的值都无法到达屏幕。 剩下的部分值得争论:界面应如何感受.

## 焦点

没有什么比流体类型尺度更能说明这个想法. 有三个选择是进出,要么是整个尺度,要么是对任何超过标准的东西的精确否定.

```ts
import { Effect, Rational } from 'effect';
import * as Fluid from '@falkara/presentation/Fluid';
import * as Typography from '@falkara/presentation/Typography';

// Intent: how sharply headings rise on narrow and wide screens, and how large body text gets.
const intent = {
  minimumFactor: Rational.makeUnsafe(6n, 5n),
  maximumFactor: Rational.makeUnsafe(5n, 4n),
  maximumBodyFontSize: Rational.fromBigInt(20n), // CSS pixels
};

Effect.gen(function* () {
  const steps = yield* Typography.scale(intent);
  return yield* Effect.forEach(steps, Fluid.clamp);
});
// Success: [
//   'clamp(0.83333rem, 0.77778rem + 0.27778vw, 1rem)',       position −1
//   'clamp(1rem, 0.91667rem + 0.41667vw, 1.25rem)',          position 0, body text
//   …
//   'clamp(2.98598rem, 2.39185rem + 2.97065vw, 4.76837rem)', position 6
// ]

Typography.scale({ ...intent, maximumBodyFontSize: Rational.fromBigInt(30n) });
// Failure: SchemaError(Expected a body font size of at most 25.6 px, so that text can be enlarged
//   to 200 %, as WCAG 2.2 Resize Text requires, within the 300 % page zoom of Safari, the lowest
//   maximum among the Baseline core browsers
//   at ["maximumBodyFontSize"])
```

无效果 同一调用返回一个立即读取的纯值 .

```ts
import { Exit, Option } from 'effect';

const scale = Typography.scale(intent);

if (Exit.isSuccess(scale)) {
  scale.value; // the steps
} else {
  Option.getOrUndefined(Exit.findErrorOption(scale))?.message; // every reason, each followed by its path
}
```

按照JSON读取的意向保留在同一种图案的JSON编码上,每个数字以字符串写成分数或整数.

```ts
import { Schema } from 'effect';

Schema.decodeUnknownExit(Schema.toCodecJson(Typography.ScaleOptions))(
  JSON.parse('{ "minimumFactor": "6/5", "maximumFactor": "5/4", "maximumBodyFontSize": "20" }'),
);
// Success: the same intent, ready for Typography.scale
```

每个模块导出方案, 例如 `Typography.ScaleOptions`,在“效果”之外与验证者合作 `Schema.toStandardSchemaV1`。 。 。 .

## 模块

-   **类型** 将三个选择变成流体类型尺度,其中每个步骤都保持可重塑.
-   **空间** 与身体文本的每一个空白都来自同一意图.
-   **颜色** 对照所携带的文字大小测量每一对,并找到品牌颜色最能辨识的阴影.
-   **版式** 将行按到遵循字体的长度.

Viewport, Longers and Coloriometry 持有其余存在的事实,而Fluid将数值写成随着 Viewport 增长的 CSS 长度.

每个模块都精确工作,没有浮动点: `Rational` effect 的数,对于一个不合理的数,如根,对数或同位素,在每次决定确定之前,其范围会缩小. 精确性花费时间,毫秒,其中浮点取微秒,所以库是用于构建时间的,每次工作一次并将其写为CSS,而不是用于浏览器.

## 基础工作

我们只依靠业界已经同意的,让其中少数人解决所有不是品味问题的决定.

![Utopia stands on USWDS, which stands on WCAG, which stands on the Web Platform.](https://npmcn.com/package/.github/assets/groundwork.svg)

### 网络平台

事实和观点是建立在其中的。 只有每个 Basin 核心浏览器中每个读取器所持有的事实被保存下来,观点让位于衍生值,但一个宣布的选择除外:最大取景宽度为1280px,因为WCAG没有设置,而流体值需要保持可重现.

![Baseline Widely Available](https://npmcn.com/package/.github/assets/baseline-widely-available.svg)

### 西非咨询组

对读者的承诺已记录在案。 价值观使每一项承诺都能够兑现,这远远超出了欧盟《欧洲无障碍法》和美国《康复法》第508条的要求.

数值符合WCAG 2.2至AA级的成功标准,由它们决定:文本对比(增强),文本大小调整,回流,文本间距和视觉演示. 它们未经决定就提供的标准,例如接口组件和焦点指标的对比或目标大小,都与使用它们的接口相配合.

### 美国

公约通过活下来的实际使用赢得信任。 只有在准则沉默和只从USWDS 3 借用价值, [设计系统](https://designsystem.digital.gov/about/) 美国政府建立网站,支持数十个机构和近200个网站.

### 乌托邦

好模型让困难的事情变得简单。 值跟随Utopia 对于流体类型和空间,将其从下面的地层控制到每个极限.

## 许可证

Falkara 演示许可证 [麻省理工学院](https://npmcn.com/package/%40falkara/presentation/LICENSE)。 。 。 .

谷歌的基线标志,根据 [CC BY-ND 4.0 (英语)](https://creativecommons.org/licenses/by-nd/4.0/)。 。 。 .

## 常见问题

### @falkara/presentation 是什么？

基于效果的 TypeScript 界面设计库,从既定标准中获取每个值,但保存一个已宣布的选择\.

### 如何安装 @falkara/presentation？

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

### @falkara/presentation 支持 TypeScript 吗？

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

### @falkara/presentation 支持 ESM 还是 CommonJS？

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

### @falkara/presentation 可以商用吗？

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

### @falkara/presentation 的下载量有多少？

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

### @falkara/presentation 还在维护吗？

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