# @fanvue/ui 中文文档 规范地址：https://npmcn.com/package/%40fanvue/ui/ 版本：3\.50\.0 npm 元数据更新时间：2026-11-11T19:19:09.557Z 中文译文更新时间：2026-11-14T10:04:00.751Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fanvue/ui 原文对照：https://npmcn.com/package/%40fanvue/ui/?lang=original 项目主页：https://github.com/fanvue/fanv-ui#readme 源码仓库：https://github.com/fanvue/fanv-ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：9.4 MB，1647 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=20\.0\.0 - 运行依赖：17 个 - peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，motion ^12\.0\.0 \|\| ^13\.0\.0，recharts ^3\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，tailwindcss ^4\.0\.0，react-day-picker ^9\.0\.0，@radix-ui/react-slot ^1\.2\.0 - 首次发布：2026-02-10T22:32:05.861Z - 最新版本发布：2026-11-11T19:19:09.156Z - 近 30 天下载量：4546（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：148（近 12 个月 148 个） ## 中文简介 使用 Tailwind CSS 为 Fanvue 生态系统所建的反应组件库 ## 安装 ```sh npm install @fanvue/ui ``` 也可以使用：`pnpm add @fanvue/ui`、`yarn add @fanvue/ui`、`bun add @fanvue/ui` ## README # 校对:soup React 组件库 与 Tailwind CSS 为 Fanvue 生态系统所建. [![CI](https://github.com/fanvue/fanv-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/fanvue/fanv-ui/actions/workflows/ci.yml) [![Chromatic](https://github.com/fanvue/fanv-ui/actions/workflows/chromatic.yml/badge.svg)](https://github.com/fanvue/fanv-ui/actions/workflows/chromatic.yml) [![npm version](https://img.shields.io/npm/v/@fanvue/ui.svg)](https://www.npmjs.com/package/@fanvue/ui) [![npm downloads](https://img.shields.io/npm/dm/@fanvue/ui.svg)](https://www.npmjs.com/package/@fanvue/ui) [![bundle size](https://img.shields.io/bundlephobia/minzip/@fanvue/ui)](https://bundlephobia.com/package/@fanvue/ui) [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/) [![Storybook](https://img.shields.io/badge/Storybook-ff4785.svg?logo=storybook&logoColor=white)](https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/) [![Showcase](https://img.shields.io/badge/Showcase-GitHub%20Pages-brightgreen.svg?logo=github)](https://fanvue.github.io/fanv-ui/) [![GitHub](https://img.shields.io/github/stars/fanvue/fanv-ui?style=social)](https://github.com/fanvue/fanv-ui) ## 特征 - 🎨 **尾风 CSS v4** - 具有设计标志的现代CSS第一主题 - ♿ **可访问** - WCAG 2.1 AA符合Radix UI原始人 - 📦 **可动摇的树** - 只导入您使用的东西 - 🌙 **黑暗模式** - 内置光/暗主题支持 - 📝 **类型脚本** - 包括全部类型定义 - 🧪 **已测试** - 单位测试与Vitest,E2E与Playwright ## 设置 ### 1\. 安装 ```bash npm i @fanvue/ui ``` ### 2\. 同伴依赖关系 ```bash # Required npm i react react-dom tailwindcss # Only if using DatePicker npm i react-day-picker # Only if using animated icons npm i motion ``` ### 3\. 配置中央支助系统 在您的 CSS 切入点中添加以下内容( 例如 ) . `app.css`: ```css @import "tailwindcss"; @source "../node_modules/@fanvue/ui"; @import "@fanvue/ui/styles/theme.css"; ``` ### 4\. 装入Inter字体 装入 [间](https://fonts.google.com/specimen/Inter) 通过 Google 字体或 `@fontsource-variable/inter`数字 : ```html ``` 或者说 ```bash npm i @fontsource-variable/inter ``` ## 使用量 ```tsx import { Button } from "@fanvue/ui"; function App() { return ( ); } ``` ### 动画图标 `@fanvue/ui/animated-icons` 船的动画双胞胎 图标有一个。 每个 导出于 **同名词** 作为静态图标 **没错 同一个框**,所以切换是一个单行变化,在您的布局中没有任何变化 移动 : ```tsx import { HeartIcon } from "@fanvue/ui"; // static import { HeartIcon } from "@fanvue/ui/animated-icons"; // animates on hover ; ``` 他们靠自己的子路生存 依靠选择 `motion` 端点,所以 `@fanvue/ui` 除非从这里进口,否则消费者从不支付动议费用. 并不是每个图标都有一个双胞胎——一个图标只有在其动画作品完成后才能被映射出来 与我们相比 上游没有相应的. `SpinnerIcon` 故意缺席:装入 指标不能等待徘徊。 继续使用静态的 ``,尊重已减少的动议,或 `Loader`。 。 。 . 当用户请求减少运动时, 没有动画 (单位:千美元)`prefers-reduced-motion: reduce`),包括动画,你开始自己 结束 `controlRef`。 。 。 . 默认在徘徊时会有一个图标动画 。 而不是从父母那里开车.. 按钮内的一个图标,说——通过 `controlRef`,它也转动了盘旋 启动 驱使它远离焦并徘徊: `` 无法聚焦, 所以键盘用户在按下按钮时, 独自徘徊一无所获. ```tsx const icon = useRef(null); ; ``` 动画作品只有中风,所以这些图标没有 `filled` 道具 —— 传出一个是类型错误,而不是沉默的无操作。 我们的静态双胞胎在哪里 动画也以同样的中风重量来绘制 静态双胞胎是被填平的 没有中风匹配,所以动画 大纲可以读取一点打火机。 浏览可用的 在故事书下 **基数 图标** 与 **动画** 打开:图标 编号 `anim` 带有双胞胎,然后单击一张卡复制正确的导入。 美术 动画来自 [清晰动画](https://lucide-animated.com/) (麻省理工学院), 以Lucide(ISC)和部分Feather(MIT)为基础建造的——许可证全文在 `THIRD-PARTY-NOTICES.md`装有包裹的船. ## 他们 通过压倒性的 CSS 变量自定义主题 : ```css :root { --color-primary-500: #00aeef; --color-neutral-500: #6b7280; --color-background-0: #ffffff; } ``` ## 发展 ### 先决条件 - 节点.js 20+ - 小时9+ ## 安装 ```bash pnpm install pnpm dev pnpm storybook ``` ### 脚本 | 命令 | 说明 | | --- | --- | | **发展** | | | `pnpm dev` | 启动 Vite Dev 服务器 | | `pnpm dev:watch` | 重建 `dist/` 更改时( 启用后重新装入应用程序) | | `pnpm build` | 建立用于制作的图书馆 | | `pnpm preview` | 预览制作建筑 | | **测试** | | | `pnpm test` | 运行单元测试 | | `pnpm test:watch` | 在监视模式下运行测试 | | `pnpm test:coverage` | 使用覆盖报告进行测试 | | `pnpm test:storybook` | 运行故事本交互测试 | | `pnpm test:e2e` | 运行 Playwright E2E 测试 | | `pnpm typecheck` | 运行类型脚本类型检查 | | **显示格式( F)** | | | `pnpm lint` | 检查 lint 出错( Biome) | | `pnpm lint:fix` | 自动修正插入错误 | | `pnpm format` | 格式代码 | | **故事书** | | | `pnpm storybook` | 在端口启动 Storybook dev 服务器 6006 | | `pnpm build-storybook` | 构建故事书静态网站 | | **图标** | | | `pnpm icons:sync` | 从Figma再导入图标并再生成组件,测试,故事 | | `pnpm icons:animated` | 从清晰动画登记册再导入动画图标并再生 | | **键盘构建( B)** | | | `pnpm build:dictionary` | 从设计符号生成样式 | | `pnpm build:showcase` | 构建演示网站 | | `pnpm size-limit` | 检查捆绑大小 | | **出版** | | | `pnpm publish:dry-run` | 构建和干燥 npm 发布 | ### 活体重装到 pandora/ eden 以物配主,以物配主`local.fanvue.com`)而不发表: - **最轻松的:** 从 pandora repo 根, 运行 `pnpm start:localui`。它运行此库的手表自动构建,并在此检出时点出 `dist/`。参见潘多拉的读取器("活再装入") `@fanvue/ui` ”)). 备选案文: `pnpm start:dev:localui` 财务报告和审定财务报表 `pnpm start:docker:localui` 拾取匹配的env文件并处理 AWS 认证 . - **手动 :** 运行 `pnpm dev:watch` 在这里,开始eden与 `USE_LOCAL_FANVUE_UI=1` (或 `pnpm --filter @pandora/eden start:localui`) (中文(简体) ). 需要重新检查到旁边 `pandora` (或 `FANVUE_UI_PATH` 设于潘多拉. 组件标记、尾风课和设计 **符号** 所有热量重载: 潘多拉的 `eden/postcss.config.mjs` 重定向 `@fanvue/ui/styles/theme.css` 导入到此检出 `src/styles/theme.css`,所以符号编辑显示时没有发布(前)发行. ## 图片 + 故事集 这个库通过Chromatic Connect与Figma集成. 在故事书中查看完整的文档 : ```bash pnpm storybook # Navigate to "Documentation > Figma Integration" ``` ### 提交公约 这个项目使用 [常规武器委员会](https://www.conventionalcommits.org/)。提交信件通过承诺验证. ```bash # Examples feat(button): add loading state fix: resolve focus ring issue docs: update installation guide ``` 对于被引导的承诺信息,安装 [提交](https://github.com/commitizen/cz-cli) 全球: ```bash npm i -g commitizen ``` 然后使用 `cz` 改为 `git commit`。 。 。 . ## 捐款 见 [捐款额](https://npmcn.com/package/%40fanvue/ui/CONTRIBUTING.md) 准则. ## 警卫 见 [警卫](https://npmcn.com/package/%40fanvue/ui/SECURITY.md) 报告脆弱性. ## 许可证 [Apache 2.0 (英语)](https://npmcn.com/package/%40fanvue/ui/LICENSE) Shift控股有限公司 ## 常见问题 ### @fanvue/ui 是什么？ 使用 Tailwind CSS 为 Fanvue 生态系统所建的反应组件库 ### 如何安装 @fanvue/ui？ 在项目目录运行 npm install @fanvue/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、tailwindcss（^4\.0\.0）、@radix-ui/react-slot（^1\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @fanvue/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fanvue/ui 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @fanvue/ui 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @fanvue/ui 可以商用吗？ @fanvue/ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @fanvue/ui 的下载量有多少？ 根据 npm 官方下载统计，@fanvue/ui 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,546 次，日均约 152 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fanvue/ui 还在维护吗？ 最新版本 3\.50\.0 发布于 2026/11/12（2 天前）；至今共发布 148 个版本，其中过去 12 个月发布了 148 个；首次发布于 2026/02/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。