# @flytedan/flytebot-design-system 中文文档

规范地址：https://npmcn.com/package/%40flytedan/flytebot-design-system/

版本：0\.96\.0
npm 元数据更新时间：2026-11-15T12:56:32.281Z
中文译文更新时间：2026-11-15T03:05:26.620Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：10.6 MB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react ^18\.3\.1，react-dom ^18\.3\.1
- 首次发布：2026-08-27T04:29:50.167Z
- 最新版本发布：2026-11-15T12:56:32.102Z
- 近 30 天下载量：8437（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：168（近 12 个月 168 个）

## 中文简介

flytedesk Design System——用于flytedesk apps的共享组件库,信使和商务日志包.

## 安装

```sh
npm install @flytedan/flytebot-design-system
```

也可以使用：`pnpm add @flytedan/flytebot-design-system`、`yarn add @flytedan/flytebot-design-system`、`bun add @flytedan/flytebot-design-system`

## README

# @ flytedan/ flytebot-design- system

Flytedesk设计系统的媒体计划员UI工具包, 移植到一个独立的, 框架-不可知 - 消费者 npm 包:反应 18 + TypeScript 组件, 以及flytedesk应用程序的商务记录包.

## 安装

```bash
pnpm add @flytedan/flytebot-design-system
```

`react` 财务报告和审定财务报表 `react-dom` (^18.3.1)是同伴的依赖关系.

## 使用量

一次在您的应用程序入口附近导入销售商的 CSS, 然后使用组件 直接 :

```tsx
import "@flytedan/flytebot-design-system/styles/tokens.css";
import "@flytedan/flytebot-design-system/styles/foundations.css";
import "@flytedan/flytebot-design-system/styles/components.css";
// foundations.css also imports icons.css (the Phosphor icon font every
// component's `<i className="ph ph-*">` needs) — no separate link required.

import { Button, Card, DataTable } from "@flytedan/flytebot-design-system";

function Example() {
  return (
    <Card>
      <Button variant="primary">Save</Button>
    </Card>
  );
}
```

## 设计原则

`DESIGN-PRINCIPLES.md` 持有用户界面设计和交互规则 Flytedesk的应用软件如下. 包裹里装着,所以一个应用程序读到它 `node_modules/@flytedan/flytebot-design-system/DESIGN-PRINCIPLES.md`,则 文件网站在《指南》下显示。 在设计或建造屏幕前读取.

## 包裹里有什么

**32个核心组成部分** 跨七组动作(按钮、图标按钮、, 分块控制, Popover, 菜单, 菜单按钮), 窗体( 输入, 数字输入, ), 文本区域, 选择, 日期选择器, 时间选择器, 复选框, 收音机, 切换, 滑动器, RangeSlider, FileGrid, Dropzone, Markdown编辑器, 代码编辑器),表面(Card, CardRow, 可折叠, Modal, Drawer),数据(数据表, 事实列表, Pagination, SortMenu, StatTile,, Meter CsiBadge CsiMeter CsiHero Markdown 代码Block 迪夫Block 步行榜, 分块Meter, QuaintRow, Clamp, 相对时间),反馈(Badge, Tag, Avatar,, AvatarStack, Flag, Toast, Tooltip, 空状态, KeyHint),加载(斯克勒通, SkeletonText, ReservedSkeleton, 装入Region, Spinner, 进步列车)和导航(Tabs, (原始内容存档于2018-10-21). SidebarNav, Topbar.

**平台组件** 用于身份/会议UI-账户Menu, ApiSpec Browser,出道门/FeatureGate/PermissionDenied/PermissionHint, (英语), ProfilePage, ComingSoon, 路线图时间线, 模式Switch/ TestModeBar.

**规划组件** 用于媒体规划 分发, MixGap 频道贡献 周旋声 预算再分配器 ChannelMeta.

**聊天组件** - 查特小组特工,查特Composer,查特会议 巴尔, (原始内容存档于2017-10-21). ChatTranscript, ChatTurn, ChatEngine.

**商务记录包** (框架灯光,无UI)——会话Kit(作用, 权限、 特性标记), QueryKit( 页面/ 排序/ 过滤列表状态通过 `useServerTable`),runtimeKit(地貌-完成/活-vs-测试衍生), FileKit, MockJobKit (英语:`{ jobId } → poll` aync 任务模拟, 版本 Kit (仅附录版本历史商店).

每个导出都有自己的有文件的页面——道具从真实中转出 TypeScript 接口,一个活式交互示例,以及一个用法片段—— in 包含在本repo中的文件站点(尚未作为主机站点发布):

```bash
git clone git@github.com:Flytedesk/flytebot-design-system.git
cd flytebot-design-system
pnpm install
pnpm run docs
```

代码编辑器默认编辑 SQL ; `language="json"` 添加 JSON 突出显示,括号 匹配和 Enter 上的缩进,在其行并显示解析器的语法错误 栏,并按 `validate={(text) => diagnostics}` 来电者自己的支票 (例如,诸如: `spec.model`) (中文(简体) ).

## 发展

```bash
pnpm run build       # tsup — emits dist/{index.js,index.cjs,index.d.ts}
pnpm run typecheck   # tsc --noEmit
pnpm run lint        # eslint .
pnpm run test        # vitest run — needs no build
pnpm run test:dist   # tsup, then the checks of the built dist/ (scripts/vitest.dist.config.ts)
```

## 释放

没有出版CI。 发行是手工的,只从专用版本中运行 部署克隆人——从不通过工作离职单手头公布,这样可以运送 不管建筑师碰巧是 中版.

一次性设置,每台机器一次:

```bash
git clone git@github.com:Flytedesk/flytebot-design-system.git C:/Users/newms/deploy/flytebot-design-system
cd C:/Users/newms/deploy/flytebot-design-system
touch .deploy-clone-marker   # git-ignored; scripts/release.sh refuses to run without it
```

然后,每一次释放:

```bash
cd C:/Users/newms/deploy/flytebot-design-system
bash scripts/release.sh <new-version> "<summary>"
```

`scripts/release.sh`数字 :

-   拒绝在任何地方运行,但载有目录的除外 `.deploy-clone-marker`· ;
-   拒绝一棵肮脏的树 `.release.lock` 所以两跑不能重叠;
-   获取 `origin` 检查 `origin/main`准确的提示——永不消失 工作;
-   重新执行 `scripts/release.sh` 它刚刚检查出来,移交 锁定,所以以后的每一个步骤(出关,出关,出关)都是释放的承诺 自有脚本,在退票前从没有磁盘上的脚本(bash读出一个) 脚本来自它打开的文件). 第二道通行证上写着 `RELEASE_REEXEC_SHA`它声称 `HEAD` 是执行和跳过取出;
-   安装为 `pnpm install --frozen-lockfile`· ;
-   运行大门 : `tsup`,然后直接离开 检查该建筑 (单位:千美元)`vitest run --config scripts/vitest.dist.config.ts`,则 `vitest run`, (中文(简体) ), `tsc --noEmit`, (中文(简体) ), `tsc --noEmit -p tsconfig.docs.json`,文档 `vite build`, (中文(简体) ), 财务报告和审定财务报表 `lint` 如果雷波有那个脚本;
-   拒绝 `<new-version>` 除非它比两者都大 退职 `package.json` 版本和 npm 目前已发布 `latest`· ;
-   凸起 `package.json`,承诺 `chore(release): <new-version> — <summary>`, (中文(简体) ), 并推进;
-   `npm publish`es(账户) `flytedan`,通过现有的 `~/.npmrc`,则 推动标签 `v<new-version>`· ;
-   指纹 `RESULT: sha=<sha> version=<new-version> status=published` 打开 成功吗.

`scripts/release.test.ts` 盖其卫所, 锁定、 缺少/ 变形版本参数) 和重执行( 假 原产地 `release.sh` 换了新的车身 第二次通过 `HEAD` ——没有网络,没有真正的出版.

## 许可证

UNLICENSED——只使用内部飞行台.

## 常见问题

### @flytedan/flytebot-design-system 是什么？

flytedesk Design System——用于flytedesk apps的共享组件库,信使和商务日志包\.

### 如何安装 @flytedan/flytebot-design-system？

在项目目录运行 npm install @flytedan/flytebot-design-system，或使用 pnpm add / yarn add / bun add。

### @flytedan/flytebot-design-system 支持 TypeScript 吗？

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

### @flytedan/flytebot-design-system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flytedan/flytebot-design-system 可以商用吗？

@flytedan/flytebot-design-system 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @flytedan/flytebot-design-system 的下载量有多少？

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

### @flytedan/flytebot-design-system 还在维护吗？

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