# @ah-automation\.nl/component-lib 中文文档 规范地址：https://npmcn.com/package/%40ah-automation.nl/component-lib/ 版本：0\.0\.179 npm 元数据更新时间：2026-10-30T13:21:27.169Z 中文译文更新时间：2026-11-06T22:50:11.902Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ah-automation.nl/component-lib 原文对照：https://npmcn.com/package/%40ah-automation.nl/component-lib/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.2 MB，658 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：15 个 - peer 依赖：react ^19\.2\.4，zustand ^5\.0\.12，radix-ui ^1\.4\.3，react-dom ^19\.2\.4，@tanstack/react-query ^5\.90\.21 - 首次发布：2026-03-15T11:15:08.230Z - 最新版本发布：2026-10-30T13:21:26.980Z - 近 30 天下载量：2205（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：173（近 12 个月 173 个） ## 中文简介 由TypeScript,Tailwind v4和shadcn/ui所建的可再用再激活组件库. ## 安装 ```sh npm install @ah-automation.nl/component-lib ``` 也可以使用：`pnpm add @ah-automation.nl/component-lib`、`yarn add @ah-automation.nl/component-lib`、`bun add @ah-automation.nl/component-lib` ## README # 组件-lib 由TypeScript,Tailwind v4和shadcn/ui所建的可再用再激活组件库. ## 发展 - `npm run dev`: 开始当地游乐场(`index.html` + 键 `src/main.tsx`)用于手动组件测试. - `npm run build`: 运行类型检查, 发布声明文件, 并构建库包 . - `npm run lint`:运行ESLint跨代码库. - `npm run format:check`:不重写文件而检查格式化. ## 出版 软件包发布从GitHub Actions开始,公开发布到npm. 在使用工作流程之前, 添加一个名为 propose 的秘密 `NPM_TOKEN` 在 GitHub 中: 1. 以发布权限创建 npm 访问令牌 `@ah-automation.nl/component-lib`。 。 。 . 2. 在 GitHub 中,打开寄存器设置. 3. 转到 **机密和变量** > 翻译: **行动**。 。 。 . 4. 添加此令牌为名为寄存器的秘密 `NPM_TOKEN`。 。 。 . 要发布新版本 : 1. 打开 GitHub 仓库 . 2. 转到 **行动**。 。 。 . 3. 选择 **发布软件包**。 。 。 . 4. 点击 **运行工作流程**。 。 。 . 5. 选择 `patch`, (中文(简体) ), `minor`,或 `major`。 。 。 . 6. 运行工作流程. 工作流程验证库, 凸起 `package.json` 财务报告和审定财务报表 `package-lock.json`创建 `vX.Y.Z` git 标签, 以 `npm publish --access public`,然后推动释放承诺并标记回到 `main`。 。 。 . ## 库输出 构建输出生成于 `dist/`数字 : - `dist/index.js`:无害环境管理图书馆条目。 它每个源文件再导出一个模块(`dist/components/…`, (中文(简体) ), `dist/hooks/…`, (中文(简体) ), `dist/lib/…`)),所以消费者捆绑商只包括组件一个应用程序的进口. - `dist/index.d.ts`: 导出类型脚本. - `dist/styles.css`:为消费者编译风格. 运行时间 `dependencies` (recharts, cmdk,.) 不捆绑到 `dist/`;它们作为进口,并安装在包件旁边. `package.json` 只标记 CSS 具有副作用,所以未使用的模块是树形的. ## 消费者使用量 ```tsx import { Button } from "component-lib"; import "component-lib/styles.css"; export function Example() { return ; } ``` ## SidebarNav 在另一个反应工程中 ```tsx import * as React from "react"; import { Home, FolderKanban, Settings, LogOut } from "lucide-react"; import { Button, SidebarNav, type SidebarNavGroup, type SidebarNavItem, } from "component-lib"; import "component-lib/styles.css"; const items: SidebarNavItem[] = [ { label: "Home", route: "/home", icon: Home, order: 0 }, { label: "Settings", route: "/settings", icon: Settings, order: 20 }, ]; const groups: SidebarNavGroup[] = [ { id: "projects", label: "Projects", icon: FolderKanban, order: 10, items: [ { label: "Overview", route: "/projects", badge: "3" }, { label: "Active", route: "/projects/active" }, ], }, ]; export function AppLayout() { const [activeRoute, setActiveRoute] = React.useState("/home"); return (
{ // remove this preventDefault if you want normal anchor navigation event.preventDefault(); setActiveRoute(item.route); }} logo={
My Product
} footer={ } />

Active route: {activeRoute}

); } ``` 注释: - 导入 `"component-lib/styles.css"` 一次在应用根. - `defaultCollapsed` 设置初始侧边栏状态. - `onItemClick` 是可选的。 保留 `href` 行为,或截取和途径手动. - `groups` 支持使用相撞的单层嵌入路由 `SidebarGroup` 节. - `order` 支持平面间混合排序 `items` 财务报告和审定财务报表 `groups` (平稳回落保留了链接的输入顺序). ## 在另一个 React 工程中降下标题 ```tsx import { Fish } from "lucide-react"; import { DropdownHeader, type DropdownHeaderGroup, type DropdownHeaderItem, } from "@ah-automation.nl/component-lib"; const items: DropdownHeaderItem[] = [ { label: "Orders", route: "/orders", order: 2 }, { label: "Refresh", order: 3, onClick: (event) => { event.preventDefault(); refreshData(); }, }, ]; const groups: DropdownHeaderGroup[] = [ { id: "purchase", label: "Purchase", order: 1, items: [ { label: "Inventory", route: "/inventory" }, { label: "Add item", route: "/inventory/new" }, ], }, ]; export function Navigation() { return ( } onItemClick={(item, event) => { if (item.route == null) { return; } event.preventDefault(); window.history.pushState(null, "", item.route); }} /> ); } ``` 该组件使大屏幕上的下放组和内含, 在较小的屏幕上可折叠导航菜单。 通过已翻译的标签和 当耗用应用程序使用客户端路由时会拦截链接点击. 项目 无路径需要 `onClick` 操作和渲染为按钮. ## 常见问题 ### @ah-automation\.nl/component-lib 是什么？ 由TypeScript,Tailwind v4和shadcn/ui所建的可再用再激活组件库\. ### 如何安装 @ah-automation\.nl/component-lib？ 在项目目录运行 npm install @ah-automation\.nl/component-lib，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.4）、zustand（^5\.0\.12）、radix-ui（^1\.4\.3）、react-dom（^19\.2\.4）、@tanstack/react-query（^5\.90\.21）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @ah-automation\.nl/component-lib 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @ah-automation\.nl/component-lib 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @ah-automation\.nl/component-lib 可以商用吗？ @ah-automation\.nl/component-lib 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @ah-automation\.nl/component-lib 的下载量有多少？ 根据 npm 官方下载统计，@ah-automation\.nl/component-lib 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,205 次，日均约 74 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ah-automation\.nl/component-lib 还在维护吗？ 最新版本 0\.0\.179 发布于 2026/10/30（8 天前）；至今共发布 173 个版本，其中过去 12 个月发布了 173 个；首次发布于 2026/03/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。