# @fibrae/semi-foundation 中文文档

规范地址：https://npmcn.com/package/%40fibrae/semi-foundation/

版本：0\.7\.0
npm 元数据更新时间：2026-11-14T10:24:13.351Z
中文译文更新时间：2026-11-14T17:04:31.362Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fibrae/semi-foundation
原文对照：https://npmcn.com/package/%40fibrae/semi-foundation/?lang=original
项目主页：https://semi-design-next.pages.dev/
源码仓库：https://github.com/smile-alive/semi-design-next

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

- 包体积（解压后）：3.2 MB，919 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：17 个
- 首次发布：2026-10-28T08:32:24.928Z
- 最新版本发布：2026-11-14T10:24:13.040Z
- 近 30 天下载量：2345（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @fibrae/semi-foundation
```

也可以使用：`pnpm add @fibrae/semi-foundation`、`yarn add @fibrae/semi-foundation`、`bun add @fibrae/semi-foundation`

## README

# @fibrae/半创始人

[简体中文](https://npmcn.com/package/%40fibrae/semi-foundation/README.zh-CN.md)

Semi Design Next中的框架-不可知部分:组件逻辑(Foundation),SCSS风格,主题符号和地语包. 每个框架的组成部分库都共享。 应用程序通常通过一个UI包使用,而不是直接依赖.

## 基金会和适应者

每个组件的JavaScript有两个部分,因此可以跨框架再利用:

-   基金会:持有组件的业务逻辑和参考文献没有DOM. 需要DOM的逻辑授权给适配器.
-   适配器:一个基金会需要的方法的界面,由每个框架包与其原生机制(如回放钩或Vue可调配器)实施.

这就是为什么软件包依赖于没有框架或UI软件包.

## 安装

```sh
pnpm add @fibrae/semi-foundation
```

构建插件需要它来解决 `semi:` 地址,且用户界面软件包已经依赖它.

## 使用量

此软件包没有根项 。 这个 `base`, (中文(简体) ), `utils` 财务报告和审定财务报表 `locale` 目录各有一个条目来收集目录的出口. 其他模块由深文件路径导入, 将一对一映射到下面的目录中 `src/`。所有声明都包含类型:

```ts
import { BaseFoundation, FocusScope } from '@fibrae/semi-foundation/base';
import InputFoundation from '@fibrae/semi-foundation/components/input/foundation';
import type { Locale } from '@fibrae/semi-foundation/locale';
import { utcToZonedTime } from '@fibrae/semi-foundation/utils/date-fns-extra';
```

这个 `utils` 条目不包含日期模块`date-fns-extra`, (中文(简体) ), `date-fns-locale`, (中文(简体) ), `zoned-time`页:1 `base` 条目删除 `base/env`通过深道导入它们.

`exports` 还包括: `./*.css` 财务报告和审定财务报表 `./*.scss`。组件CSS由 `vp pack`。发布 `.scss` 包含 `semi:` 地址无法由 Sass 直接编译; 它会通过构建插件或 `@fibrae/semi-scss-compile`。 。 。 .

## 目录

| 目录 | 目录 |
| --- | --- |
| `components/` | 每个组件一个目录,包含 `foundation.ts`, (中文(简体) ), `constants.ts` 财务报告和审定财务报表 `*.scss` 视需要`variables.scss`, (中文(简体) ), `mixin.scss` 以及仅作为来源的类似船舶) |
| `base/` | `BaseFoundation`、普通常数和状态类构成一个基础(重点范围、弹出寿命周期、模式资源等) |
| `utils/` | 无国籍的公用设施: DOM、日期、焦点助手、层堆栈和类似 |
| `theme/` | 一个主题:全局符号、调色板和混音器,由组件SCSS通过加载 `semi:theme` |
| `locale/` | 语言包 `Locale` 财务报告和审定财务报表 `LocaleInput` 类型和每个框架共享的地方分辨率 |

## 语言包

`src/locale/source/` 拿着两个内置包, `zh_CN` 财务报告和审定财务报表 `en_US`。每个文件默认导出a `Locale`。 。 。 . `src/locale/index.ts` 出口包和 `Locale`, (中文(简体) ), `LocaleInput`, (中文(简体) ), `LocaleComponentName` 财务报告和审定财务报表 `LocaleResult` 类型,以及从 `@fibrae/semi-foundation/locale`数字 :

-   `code`:语言代码. 日期组件从中选择日期 - fns locale(`src/utils/date-fns-locale.ts` 仅建于zh-CN和en-US;其他来自ConfigProvider的 `dateFnsLocale`) (中文(简体) ).
-   `currency`: ISO 4217 货币编码,通过输入号传递到 `Intl.NumberFormat`。 。 。 .
-   其他密钥按组件分组,并持有内置文本和可访问名称. 值为 `${name}` 是占位符;不要翻译占位符本身.

每个 UI 软件包导出 `zh_CN` 财务报告和审定财务报表 `en_US` 从其 `locale` 输入。 递一个给UI包 `LocaleProvider` 或者说 `ConfigProvider`数字 :

```tsx
import { LocaleProvider } from '@fibrae/semi-ui-react';
import { en_US } from '@fibrae/semi-ui-react/locale';

<LocaleProvider locale={en_US}>
    <App />
</LocaleProvider>;
```

两家供应商都使用自定义的打包 `LocaleInput`: 仅 `code` 需要,每个文本或 `currency` 它离开来自 `en_US`。 。 。 . `src/locale/resolve-locale.ts` 填补每包对象一次的空隙并再利用结果,因此创建了一次包(在模块级别上或被回忆)并取而代之,而不是在原地进行变异.

Vue 软件包 `LocaleProvider` 名字和名称相同 `:locale`。关于将文本或无障碍名称添加到两个内置包中,参见 [语言文字](https://npmcn.com/.agents/skills/locale-text/SKILL.md)。 。 。 .

## 相关软件包

-   取决于 `@fibrae/semi-json-viewer-core`Markdown、MDX、Lottie和代码的 框架不可知渲染逻辑 也在这里生活.
-   每个框架的UI包使用, `@fibrae/semi-ai-foundation` 和AI组件包.

## 发展

`pnpm --filter @fibrae/semi-foundation build` 运行 `vp pack`数字 : `src/**/*.ts` 按文件发布无害环境管理和类型声明文件,组件SCSS编译到CSS,主题符号编译到 `base/tokens.css`。UI 包中的类型检查读取此处构建的类型.

一般命令见 [捐款额](https://npmcn.com/CONTRIBUTING.md#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4) 在寄存器根处。 对于如何写作风格 `semi:` 进口商和主题符号协议,见 QQ SCSS “, “ Sass QQ 半: 进口商” 和 QQ 符号 [样式](https://npmcn.com/.agents/references/styles.md)。 。 。 .

## 常见问题

### 如何安装 @fibrae/semi-foundation？

在项目目录运行 npm install @fibrae/semi-foundation，或使用 pnpm add / yarn add / bun add。

### @fibrae/semi-foundation 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fibrae\_\_semi-foundation 是否存在。

### @fibrae/semi-foundation 支持 ESM 还是 CommonJS？

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

### @fibrae/semi-foundation 可以商用吗？

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

### @fibrae/semi-foundation 的下载量有多少？

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

### @fibrae/semi-foundation 还在维护吗？

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