# @foodpilot/foods 中文文档

规范地址：https://npmcn.com/package/%40foodpilot/foods/

版本：2\.34\.0
npm 元数据更新时间：2026-11-13T13:38:47.854Z
中文译文更新时间：2026-11-15T06:49:27.679Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40foodpilot/foods
原文对照：https://npmcn.com/package/%40foodpilot/foods/?lang=original

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

- 包体积（解压后）：2.3 MB，1563 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：31 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，lodash ^4\.18\.1，i18next ^23\.0\.0 \|\| ^25\.0\.0，@mui/lab ^6\.0\.0-beta\.0，recharts ^3\.5\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@mui/material ^6\.4\.0，react-i18next ^16\.5\.4，@emotion/react ^11\.14\.0，@emotion/styled ^11\.14\.0，@mui/x-data-grid ^7\.0\.0，@mui/x-tree-view ^7\.0\.0，@mui/icons-material ^6\.0\.0，@mui/x-date-pickers ^7\.0\.0，material-react-table ^3\.2\.1
- 首次发布：2024-01-10T02:09:13.856Z
- 最新版本发布：2026-11-13T13:38:47.650Z
- 近 30 天下载量：5660（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：495（近 12 个月 120 个）

## 中文简介

![foods\_logo\_banner\_clean-min](https://github.com/user-attachments/assets/4cfbd824-f8fe-473e-aa7a-7c789b8d2b9d)

## 安装

```sh
npm install @foodpilot/foods
```

也可以使用：`pnpm add @foodpilot/foods`、`yarn add @foodpilot/foods`、`bun add @foodpilot/foods`

## README

![foods\_logo\_banner\_clean-min](https://github.com/user-attachments/assets/4cfbd824-f8fe-473e-aa7a-7c789b8d2b9d)

# 食品

`@foodpilot/foods` 是FoodPilot的React设计系统:基于MUI的组件,租户主题和图表 平台应用程序.

-   **故事书:** [食品-故事书 食品驾驶员 科技](https://foods-storybook.foodpilot.tech/),组织起来像 IBM 碳的吗.
-   **图片设计系统:** [设计系统](https://www.figma.com/design/ucJSnn3mHlv4MCnwe1oZ2Z/Design-System),则 设计真相源.
-   **对于AI助手:** [`llms.txt`](https://npmcn.com/package/%40foodpilot/foods/llms.txt) (单位:千美元)[维基百科中的相关条目: 维基语录链接:名人名言](https://llmstxt.org/)页:1 [食品-故事手册. foodpilot.tech/llms.txt](https://foods-storybook.foodpilot.tech/llms.txt)。 。 。 .

## 使用食物

```bash
npm install @foodpilot/foods
```

同伴依赖性 :

-   总是: `react` 财务报告和审定财务报表 `react-dom` 18或19岁, `@mui/material` ^ 6.4, 缩写为:, `@emotion/react` 财务报告和审定财务报表 `@emotion/styled` ^11.14, (韩语), `i18next`, (中文(简体) ), `react-i18next` 财务报告和审定财务报表 `lodash`· ;
-   仅用于使用它们的组件: `@mui/icons-material`, (中文(简体) ), `@mui/lab`,则 `@mui/x-*` 软件包, `recharts` 财务报告和审定财务报表 `material-react-table`。 。 。 .

```tsx
import { FoodsThemeProvider } from "@foodpilot/foods/themes";
import { Button } from "@foodpilot/foods/Button";

<FoodsThemeProvider theme="foodpilot">
    {/* "foodpilot" | "winepilot" | "collective" */}
    <App />
</FoodsThemeProvider>;
```

每个导出项都从根项或组件项命名:见 [进口 实例. md](https://npmcn.com/package/%40foodpilot/foods/IMPORT_EXAMPLES.md)样式 带有主题符号(palette, 8 px 间隔, 打印变体, 阴影), 绝对没有原始值。 组件翻译 他们的文本与 `react-i18next`,英文字符串为密钥;应用程序提供翻译.

## 故事书

`npm run storybook` 在6006号港口服务, `npm run build-storybook` 把它建起来 `storybook-static/`编辑 `demo.yml` 工作流程在每次发布后都会部署.

| 节次 | 它所持有的 | 文件夹 |
| --- | --- | --- |
| 开始 | 欢迎,以及设计者、产品和开发者的指南 | `src/getting-started/` |
| 构成部分 | 由 Figma 设计系统页面使用的组件 : Action, Avatar and user, 内容, 数据显示, 反馈, 输入, Modals, 导航 | `src/components/<Category>/` |
| 要件 | 地基:颜色、打字、间距、阴影、断点、图标 | `src/elements/` |
| 版式 | 页面布局 | `src/layout/` |
| 预览 | 仍在建造或重新设计的部件 | `src/preview/` |
| 遗产 | 从Figma设计系统中取出用于屏幕的部件 | `src/legacy/<Category>/` |
| 折旧 | 故意贬值 | `src/deprecated/<Category>/` |

每个组成部分都有: **概览** 页 次`src/docs/DocsPage.tsx`使用:

-   其与 Figma 设计( 其 Figma 框架的 doc 状态) 的匹配, 及其使用指南被复制的当天 从相克;
-   其说明;
-   法格玛的用法指南:做和不做,解剖,行为,内容和状态,或 _无使用准则 现在_· ;
-   每个故事;
-   道具(组件 API);
-   参考文献.

在故事书中:

-   每个故事都有控件,记录它的回调在 **行动** 并发挥主要互动作用 **互动**· ;
-   工具栏切换租户主题(FoodPilot、WinePilot、正文)、背景和取景口;
-   文本为英文.

## 贡献

[一般事务人员(其他职等)](https://npmcn.com/package/%40foodpilot/foods/AGENTS.md) 持有任何更改的规则。 简而言之:

-   **故事:** 一个组件的故事进入 `src/components/<Category>/<Component>.stories.tsx`,没有 `title`, (中文(简体) ), 因为文件夹决定了侧边栏,它们的元从一个马厩开始 `id`,小写中的文件名,所以 URL在移动中幸存. 它们的文本是英文,有适当的控制, `fn()` 回调和 a `play` 函数. 用法指南来自Figma, in `parameters.guidelines`,与相克医生 `status` 编辑 `syncedAt` 日报.
    
-   **hllms.txt : (中文(简体) )** 当一个组件或其故事被添加、移动或删除、运行时 `npm run llms` 承诺 `llms.txt`. CI 失效时失效 .
    
-   **遗产 :** 一个组件的故事移动到 `src/legacy/` 与 `git mv` 一旦它从图片设计中移除 系统,那么 `llms.txt` 已经刷新。 前端的平台设计技巧报道了故事 平台-应用不再导入;仅此而已不会移动它们.
    
-   **检查 :**
    
    -   `npm run prettier`, (中文(简体) ), `npm run lint`, (中文(简体) ), `npm run tsc`· ;
    -   `npm test`,包括故事的戏剧和 `llms.txt` 检查;
    -   `npm run build`, (中文(简体) ), `npm run depcruise:check`。 。 。 .
    
    CI描述于 [文件/文件编号](https://npmcn.com/package/%40foodpilot/foods/docs/ci.md)预算规模 [Bundle analysis.md (英语)](https://npmcn.com/package/%40foodpilot/foods/BUNDLE_ANALYSIS.md)。 。 。 .
    
-   **释放:** `npm run publish:patch|minor|major` 发送发布工作流程从 `main`平台应用程序获得一个 发布之后的更改以及其自身的依赖性更新.

## 常见问题

### 如何安装 @foodpilot/foods？

在项目目录运行 npm install @foodpilot/foods，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、lodash（^4\.18\.1）、i18next（^23\.0\.0 \|\| ^25\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@mui/material（^6\.4\.0）、react-i18next（^16\.5\.4）、@emotion/react（^11\.14\.0）、@emotion/styled（^11\.14\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @foodpilot/foods 支持 TypeScript 吗？

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

### @foodpilot/foods 支持 ESM 还是 CommonJS？

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

### @foodpilot/foods 可以商用吗？

@foodpilot/foods 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @foodpilot/foods 的下载量有多少？

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

### @foodpilot/foods 还在维护吗？

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