# @anyknown/ui 中文文档 规范地址：https://npmcn.com/package/%40anyknown/ui/ 版本：0\.17\.5 npm 元数据更新时间：2026-11-05T01:05:04.066Z 中文译文更新时间：2026-11-06T10:25:46.271Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40anyknown/ui 原文对照：https://npmcn.com/package/%40anyknown/ui/?lang=original 项目主页：https://ui.anyknown.com/ 源码仓库：https://github.com/anyknown-com/ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：671 kB，188 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：6 个 - peer 依赖：react ^19\.0\.0，@chenglou/pretext ^0\.0\.9 - 首次发布：2026-08-29T13:38:44.699Z - 最新版本发布：2026-11-05T01:05:03.728Z - 近 30 天下载量：3487（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：31（近 12 个月 31 个） ## 中文简介 任何已知的设计系统——用于AI代理产品的StyleX令牌,主题和反应组件 ## 安装 ```sh npm install @anyknown/ui ``` 也可以使用：`pnpm add @anyknown/ui`、`yarn add @anyknown/ui`、`bun add @anyknown/ui` ## README # @ any known/ ui (任何已知的/ ii) Anyknown 产品共同使用的设计系统 [样式X](https://stylexjs.com/)反应19和基地UI. 每一版中的变化都发生在 [变动情况](https://npmcn.com/package/%40anyknown/ui/CHANGELOG.md);从0.9升级后将逐步纳入 [移民.md](https://npmcn.com/package/%40anyknown/ui/MIGRATION.md)。 。 。 . ## 结构 - `src/tokens.stylex.ts`:语义符号(颜色,字体,类型,空间,角,运动,阴影等). 光是默认的;黑暗跟随OS. **单出真言之源.** - `src/tokens.css`: 与平方 CSS 变量相同的值(`--ak-*`),对于不使用StyleX的消费者(桌面引用来自Tailwind v4的它们) `@theme`) (中文(简体) ). 导入路径 : `@anyknown/ui/tokens.css`。有一个调色板(中性);光和暗跟踪操作系统,以及 `data-theme` 锁上一. **生成者 `pnpm gen:tokens-css`**; 不要用手来编辑 (`src/tokens-css.test.ts` 无法同步 . - `src/themes.stylex.ts`数字 : `light` 编号 : `dark` 主题,用于带有手动主题切换的应用程序: `
`。 。 。 . **生成者 `pnpm gen:themes`**; 不要用手来编辑 (`src/themes.test.ts` 无法同步 . - `src/brand.css`: 约二十个的有界限词汇 `ak-*` 没有捆绑的一页(报告、建议、基准)。 构建内置了符号并添加了Google字体(`scripts/brand-css.mjs`),生产 `dist/brand.css` 财务报告和审定财务报表 [https://ui.anynowledge.com/brand.css (中文(简体) )](https://ui.anyknown.com/brand.css)规则在 [设计](https://npmcn.com/package/%40anyknown/ui/DESIGN.md)· ; `pnpm check` 当文档和词汇不一致时失败. - `src/scrollbar.css`:自定义滚动条,在全球应用. StyleX 无法写入 `::-webkit-scrollbar` 伪元素,所以他们生活在一个CSS文件中. - `src/components/`: 每个组件一个文件夹 : `.tsx`页:1 `README.md` 在大多数文件夹中, `.test.tsx`。每个文件夹都有组件。 共同决定载于 [组件/README.md](https://npmcn.com/package/%40anyknown/ui/src/components/README.md)推理和死亡的结局在 [构成部分/业务](https://npmcn.com/package/%40anyknown/ui/src/components/COMPONENTS.md)。 。 。 . - `src/lib/`: 共享钩和帮助: `i18n.tsx` (单位:千美元)`LocaleProvider`, (中文(简体) ), `defineStrings`, (中文(简体) ), `useStrings`, (中文(简体) ), `store.ts` (单位:千美元)`createStore`, (中文(简体) ), `useStore`, (中文(简体) ), `textLayout.ts` (可选的Pretext引擎),外加被减小的运动,可控状态,剪贴板,diff, `styled` 财务报告和审定财务报表 `reset.control`。 。 。 . - `docs/guides/`: 指南: [开始中](https://npmcn.com/package/%40anyknown/ui/docs/guides/getting-started.md), (中文(简体) ), [主题](https://npmcn.com/package/%40anyknown/ui/docs/guides/theming.md), (中文(简体) ), [国家管理](https://npmcn.com/package/%40anyknown/ui/docs/guides/state.md), (中文(简体) ), [无障碍](https://npmcn.com/package/%40anyknown/ui/docs/guides/accessibility.md), (中文(简体) ), [国际化](https://npmcn.com/package/%40anyknown/ui/docs/guides/i18n.md) 财务报告和审定财务报表 [文本布局](https://npmcn.com/package/%40anyknown/ui/docs/guides/text-layout.md)。 。 。 . - `scripts/`:发电机和检查. `palette.mjs` 计算颜色, `themes.mjs` 财务报告和审定财务报表 `tokens-css.mjs` 生成 `themes.stylex.ts` 财务报告和审定财务报表 `tokens.css`,以及 `api-docs.mjs` 读取类型脚本源并写入 `site/generated/api.json` (每个部件的道具)和 `site/generated/tokens.json` (每个标志组) 为docs网站. - `playground/`:一个演示应用. **不属于已发布的包.** - `site/`:Docs站点,部署在Cloudflare工人站. **不属于已发布的包.** ## 文档网站 [https://ui.anynowledge.com 互联网档案馆的存檔,存档日期2013-12-02](https://ui.anyknown.com/) 拥有: - 每个组件的一页 `#/components/`及其README、演示和来源产生的道具表; - 指南在 `#/guide/`· ; - 符号页面 `#/tokens`以每一个标志及其光明和黑暗的价值; - 一页的每个演示 `#/demo`· ; `#/demo/` 跳到一个。 游乐场使用同一节的ID. `pnpm site:build` 构建软件包,然后是网站 `llms.txt`。 。 。 . ## 发展 ```bash pnpm test # vitest (jsdom + testing-library) pnpm check # turbo run typecheck lint fmt:check design:check (parallel + cached) pnpm typecheck # tsc over the library, the playground and the docs site pnpm build # dist: ESM + d.ts + tokens.css + scrollbar.css + brand.css pnpm verify:pack # build, pack, then resolve every exports-map entry from outside the package pnpm gen:themes # regenerate src/themes.stylex.ts from the tokens pnpm gen:tokens-css # regenerate src/tokens.css from the tokens pnpm playground # http://localhost:5199, every component rendered from the built dist pnpm site # http://localhost:5200, the docs site pnpm site:test # jsdom smoke tests for the docs site pnpm site:build # build the package and the docs site pnpm site:deploy # build, then deploy to https://ui.anyknown.com (run wrangler login first) ``` `check`, (中文(简体) ), `test`, (中文(简体) ), `build` 其余的则通过 [涡轮](https://turborepo.dev/) (单打包模式,配置于 `turbo.json`) (中文(简体) ). 缓存被推到自备远程缓存 `https://turbo.anyknown.com` (小组) `anyknown-ui`) (中文(简体) ). 要使用远程缓存, 导出符号 : ```bash export TURBO_TOKEN= # see turbo-cache-worker/GITHUB-SECRETS.md ``` 没有它,没有破碎;涡轮坠回当地缓存. 提供的投入 `build`, (中文(简体) ), `lint`, (中文(简体) ), `typecheck` 财务报告和审定财务报表 `test` 内 `turbo.json` 故意排除 `*.md`,因此编辑文件时不会重播. `site:build` 财务报告和审定财务报表 `site:test` 使用默认输入, 因为文件站点会读取那些 Markdown 文件 . ## 释放 该软件包作为无害环境管理+d.ts发布. **StyleX 调用在输出中** 和消费者的捆绑者编译它们(StyleX库的标准方法). 每一次发布都会有 `CHANGELOG.md` 条目(保留更改日志:中断 / 添加 / 更改 / 折旧 / 固定 / 可访问性),一个中断发布也会在 `MIGRATION.md` 带有代码前/后. 这个版本是 **由 git 标签设置**。推动a `v*` 标签和 `.github/workflows/release.yml` 运行整个大门,然后出版。 如果标签不匹配 `version` 内 `package.json`,则工作流程失败而无所发布. ```bash # 1. Bump version in package.json (semver) # 2. Commit, tag and push git commit -am "release: v0.2.0" git tag v0.2.0 git push origin main --tags ``` CI 运行 `typecheck / lint / fmt:check / test / site:test`,则 `verify:pack`,则 `npm publish`前5个通过涡轮遥控缓存, 所以大多数都击中了已经运行在公关上的东西. `verify:pack` 不被缓存 : 它的工作是每次打包一个新鲜的柏油球, 并解决包外的出口地图 . 出版用途 **npm 信任的出版 (OIDC)**; repo 存储没有 npm 证书 。 在 npmjs.com 链接上信任的出版商 `@anyknown/ui` 改为 `anyknown-com/ui` 编号 : `release.yml`. CI 用途 `npm publish`没有 `pnpm publish`,因为pnpm的OIDC支持还没有准备好(pnpm)[pnpm#9812 (英语)](https://github.com/pnpm/pnpm/issues/9812)) (中文(简体) ). v0.1.0 由本地机器手工发布: npm 只能将可信任的出版商附加到一个 **已经存在的软件包**,所以第一个版本没有办法绕过它. 之后的每个版本都会通过标签. CI唯一不能检查的是视觉 在发布前,打开 `pnpm playground` 并寻找视觉或运动后退,然后打开macOS"Reduce Movement"再再再看. ### 基础设施 | | | | --- | --- | | 还原 | [https://github.com/any known-com/ui (中文(简体) )](https://github.com/anyknown-com/ui) (公开,麻省理工学院) | | 无 | `@anyknown/ui`,信任的出版商绑定 `anyknown-com/ui` → `release.yml` | | 文件站点 | [https://ui.anynowledge.com 互联网档案馆的存檔,存档日期2013-12-02](https://ui.anyknown.com/) (云雾工人) | | 设计.md | [https://ui.anynowledge.com/design.md 互联网档案馆的存檔,存档日期2013-12-02](https://ui.anyknown.com/design.md)数字 : `DESIGN.md` 加生成的符号表和 `brand.css` 词汇; 第一个条目 `llms.txt` | | 品牌.css (中文(简体) ) | [https://ui.anynowledge.com/brand.css (中文(简体) )](https://ui.anyknown.com/brand.css): 外部代理制作一页 `` 此; 也作为 `@anyknown/ui/brand.css` | | 远程缓存 | `turbo.anyknown.com`,团队 `anyknown-ui`; 符号是 repo 秘密 `TURBO_TOKEN`,当地 `export TURBO_TOKEN=` (工人从密文中读出) `anyknown-com/turbo-cache`(中文(简体) ) | ## 用在应用程序上 ```bash pnpm add @anyknown/ui @stylexjs/stylex pnpm add -D @stylexjs/babel-plugin @stylexjs/postcss-plugin postcss @babel/core ``` StyleX需要两个通行证: Babel 转身 `stylex.create` 输入类名,然后 PostCSS 写入样式表。 两个人都要碾倒 `node_modules/@anyknown/ui/dist/**/*.js` 还有你的密码 都一样 `unstable_moduleResolution.rootDir`CSS条目需要裸体 `@stylex;` 指令 : ```css @import "@anyknown/ui/tokens.css"; @import "@anyknown/ui/scrollbar.css"; @stylex; ``` ```tsx import { Button, Text } from "@anyknown/ui" import { color, space } from "@anyknown/ui/tokens.stylex" ``` 挂载 `` 财务报告和审定财务报表 `` 一次靠近根部,然后将应用包入 `` 对于英语内置单词( 默认为 `zh-TW`) (中文(简体) ). 你自己的风格使用符号,从不生出颜色. Vite 和 PostCSS 的完整设置、字体、 Tailwind 映射和第一个屏幕都在 [开始](https://npmcn.com/package/%40anyknown/ui/docs/guides/getting-started.md)。 。 。 . ## 视觉方向:铅笔素描 一张纸,上面没有行,字后没有,颜色只用于状态(OKLCH chroma 0 grays,墨文本). 等级来自空间、重量、大小和一个灰色(`textMuted`) (中文(简体) ). 只有您按下的东西会携带洗涤器( 以 6% 表示, 11% 显示在悬浮上); 只有漂浮的东西( 文本字段、 作曲、 菜单、 工作表、 对话框、 土司、 工具提示) 得到一个被阴影提升的表面, 最多一个级别 。 蓝色 `signal` 意思是工作,红色失败,琥珀 等待你,绿色完成,并且只在文本或一个6px点上。 没有口音颜色:主要动作是坚固的"墨药丸"而链接为带有下划线的"墨". 转角是 `shape` (一线控制药), `box` (24px,用于生长的盒子)和 `check` (4px,复选框平方). 标题和体文字使用Geist,时间和数据使用Geist Mono,而中文则使用Noto Sans TC(落回平方TC或微软JhengHei未安装时). 光谱是 [设计](https://npmcn.com/package/%40anyknown/ui/DESIGN.md) 第1节. 颜色按下列方法计算: `scripts/palette.mjs` 从5个 12 步 OKLCH 缩放 : 更改颜色、 更改缩放、 重运行并粘贴输出返回; 永远不要手调一个值( 见 [他们](https://npmcn.com/package/%40anyknown/ui/docs/guides/theming.md#change-the-palette)) (中文(简体) ). 早先编织的设计语言及其分类账调色板存档于 `archive/fiber` 树枝. Apps 自己安装字体 : ```bash pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono @fontsource-variable/noto-sans-tc ``` ## 常见问题 ### @anyknown/ui 是什么？ 任何已知的设计系统——用于AI代理产品的StyleX令牌,主题和反应组件 ### 如何安装 @anyknown/ui？ 在项目目录运行 npm install @anyknown/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @anyknown/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @anyknown/ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @anyknown/ui 可以商用吗？ @anyknown/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @anyknown/ui 的下载量有多少？ 根据 npm 官方下载统计，@anyknown/ui 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,487 次，日均约 116 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @anyknown/ui 还在维护吗？ 最新版本 0\.17\.5 发布于 2026/11/05（1 天前）；至今共发布 31 个版本，其中过去 12 个月发布了 31 个；首次发布于 2026/08/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。