# @dashboardpack/core 中文文档

规范地址：https://npmcn.com/package/%40dashboardpack/core/

版本：1\.7\.0
npm 元数据更新时间：2026-07-30T19:27:37.539Z
中文译文更新时间：2026-11-11T12:29:15.704Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：546 kB，121 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：@hookform/resolvers ^5\.4\.0，@tanstack/react-table ^8\.21\.3，class-variance-authority ^0\.7\.1，clsx ^2\.1\.1，cmdk ^1\.1\.1，date-fns ^4\.4\.0，input-otp ^1\.4\.2，libphonenumber-js ^1\.13\.7，lucide-react ^1\.0\.0，next ^16\.0\.0，radix-ui ^1\.6\.0，react ^19\.0\.0，react-colorful ^5\.7\.0，react-day-picker ^10\.0\.0，react-dom ^19\.0\.0，react-dropzone \>=15\.0\.0，react-hook-form ^7\.80\.0，recharts ^3\.9\.0，sonner ^2\.0\.7，tailwind-merge ^3\.6\.0，zod ^4\.4\.3
- 首次发布：2026-03-09T16:48:58.245Z
- 最新版本发布：2026-07-30T19:27:37.346Z
- 近 30 天下载量：7905（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

共享的用户界面组件、提供者、数据模块和DashboardPack模板的公用事业

## 安装

```sh
npm install @dashboardpack/core
```

也可以使用：`pnpm add @dashboardpack/core`、`yarn add @dashboardpack/core`、`bun add @dashboardpack/core`

## README

# @ dashboardpack/ core (中文(简体) )

共享的UI组件、提供者、数据模块和公用事业 [盘片包](https://dashboardpack.com/) 模板 (Apex, Zenith, Flux, Ember).

这是一个 **仅限来源** 软件包。 它不译出类型Script和TSX——没有建造步骤,没有 `dist/`自己编译.

## 安装

```bash
npm install @dashboardpack/core
```

添加到 `transpilePackages` 内 `next.config.ts` 所以 Next.js 汇编源代码 :

```ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@dashboardpack/core"],
};

export default nextConfig;
```

因为套件输出出生道(`"./*": "./*"`),导入时要反映目录布局:

```ts
import { Button } from "@dashboardpack/core/components/ui/button";
import { PageHeader } from "@dashboardpack/core/components/shared/page-header";
import { orders } from "@dashboardpack/core/lib/data";
import { cn } from "@dashboardpack/core/lib/utils";
```

## 里面的东西

| 路径 | 目录 |
| --- | --- |
| `components/ui/` | 35 shadcn/ui风格原始人(按钮,卡,对话框,形式,活-区域, |
| `components/shared/` | `PageHeader`, (中文(简体) ), `EmptyState`, (中文(简体) ), `ConfirmDialog`, (中文(简体) ), `DataTable`, (中文(简体) ), `LazyChart`, (中文(简体) ), `DateRangePicker` |
| `providers/` | `ThemeProvider` (暗/淡/系统+) `resolvedTheme`, (中文(简体) ), `SidebarProvider` (拼接,布局模式,容器模式,方向) |
| `lib/data-provider/` | `DataProvider` 接口,模拟/REST/固定执行,以及 `useList` 编号 : `useOne` 编号 : `useMutation` |
| `lib/navigation/` | 节点类型加 `toTree` 编号 : `toFlat` 编号 : `toSitemap` 编号 : `activeLeaf` 编号 : `validateRegistry` |
| `lib/rbac/` | `can`, (中文(简体) ), `effectivePermissions`, (中文(简体) ), `permissionGroups`, (中文(简体) ), `Can`, (中文(简体) ), `RequirePermission`, (中文(简体) ), `usePermissions` |
| `lib/schemas/` | 用户和角色形式的共享 Zod 方案 |
| `lib/data/` | 每页的模拟数据(订单、产品、客户、发票、用户、角色、分析、聊天、邮件、坎班、日历、文件、通知) |
| `lib/data/paginate.ts` | `paginate()` 编辑 `perPage: "all"` 发送器 |
| `lib/data/types.ts` | 共享类型脚本接口, `PERMISSION_KEYS` 财务报告和审定财务报表 `PermissionKey` |
| `lib/i18n/` | `useTranslations()` 钩和信件文件( en, de, f) |
| `lib/utils.ts` | `cn()` 财务报告和审定财务报表 `generateInitials()` |

### 替换模拟数据

页面交谈a `DataProvider`,而不是模拟模块,所以切换到真实的 API 是模板中的一行更改 :

```ts
// src/lib/data/provider.ts
export const dataProvider = createMockProvider({ baseUrl: "/api" });
// export const dataProvider = createRestProvider({ baseUrl: process.env.NEXT_PUBLIC_API_URL! });
```

`createMockProvider` 通过 HTTP 获取静态 JSON, 因此加载、 错误和重试 州是真实的,即使没有后端. `createRestProvider` 写得很乐观 和回滚失败. `createFixtureProvider` 用于测试,与 `failNext()` 财务报告和审定财务报表 `setLatency()`。 。 。 .

摩克突变为内相并重置于重装上. 这是故意的: 他们会让访客的编辑 漂出运来的固定装置, 所以演示会 停止复制.

### 权限不是安全

`lib/rbac` 门UI支付。 作为静态 HTML 的船载模板 它在公开的JSON文档中的数据, 所以所有的东西已经在客户端上,没有 客户端检查可以改变这一点。 用于隐藏和禁用控件,并强制 服务器上相同的规则。 模块的源头说 同样的事情,在顶部, 这是故意的.

## 同伴依赖关系

所有组件导入都是对等依赖,所以消耗模板控制了版本. 反应19和Next.js 16是基线. 见 `peerDependencies` 内 `package.json` 用于完整列表和支持的区域.

唯一的运行时间 `dependencies` 为: `@radix-ui/react-slot` 财务报告和审定财务报表 `sugar-high`。 。 。 .

## 对照模板开发

执行 **没有** 使用情况 `npm link`。此软件包将端点依赖性安装到此 消费者从这里解决他们 这样 `react-hook-form` 从两个路径和类型脚本报告装入两次 `Control<T>` 从每份副本中取出一个不同的类型,产生数十个“不可转让”错误 在真正的安装中不存在。 还安排了消费者 `preserveSymlinks: true` 财务报告和审定财务报表 `resolve.symlinks = false`,所以无论怎样,链接都会通过同义路径解决.

复制已公布的文件, 复制 `npm install` 确切的说:

```bash
./tools/sync-to-consumer.sh ../apex-dashboard
```

然后运行模板自己的 `npm run verify`。 。 。 .

## 检查

```bash
npm run verify   # typecheck + check:rsc + check:package + tests
```

-   `check:rsc` - 如果模块没有,则失败 `"use client"` 进口 `radix-ui` 枪管 参见下面的服务器组件安全部分;这是对 1.1.3中运输的坠毁.
-   `check:package` - 失败, 如果柏油丸会运送测试文件, dev工具或一个 建立缓存,或者如果缺少文件记录的切入点. `exports: { "./*": "./*" }` 提供导入时的安全网,所以缺少的文件是运行时的失败 顾客.

## 贡献: 响应服务器组件安全

这里的大多数组件是客户端组件并带有 `"use client"` 指令。 有几个是故意的 **没有** 客户端组件 - `button.tsx`, (中文(简体) ), `breadcrumb.tsx`, (中文(简体) ), `card.tsx`, (中文(简体) ), `badge.tsx`, (中文(简体) ), `avatar.tsx`, (中文(简体) ), `input.tsx`, (中文(简体) ), `textarea.tsx`, (中文(简体) ), `progress.tsx`, (中文(简体) ), `skeleton.tsx` ——这样模板就可以从服务器组件中制取它们,例如 `not-found.tsx`, (中文(简体) ), `layout.tsx`,或错误的页面.

**永不导入 `radix-ui` 文件的枪管没有 `"use client"`。 。 。 .**

枪管热切地评估了每个原始的Radix 进口, 有几个人叫 `React.createContext()` 在模块范围。 在反应服务器组件图中 `createContext` 不存在,所以导入会崩溃页面 :

```text
TypeError: React.createContext is not a function
```

它是否真的崩溃取决于消耗的捆绑者是否摇动了管子,这使得它在一些机器而不是其他机器上发生故障. 导入单个原始软件包 :

```ts
// Wrong — pulls in every Radix primitive
import { Slot } from "radix-ui";

// Right — only what is needed, and free of module-scope createContext
import * as Slot from "@radix-ui/react-slot";
```

您可通过下列方式验证更改:

```bash
node --conditions=react-server -e "require('<package-name>')"
```

如果这样 `createContext is not a function`,该软件包无法从服务器组件导入.

这条规则在1.2.0中引起运回回归——见 [变动情况](https://npmcn.com/package/%40dashboardpack/core/CHANGELOG.md)。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @dashboardpack/core 是什么？

共享的用户界面组件、提供者、数据模块和DashboardPack模板的公用事业

### 如何安装 @dashboardpack/core？

在项目目录运行 npm install @dashboardpack/core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@hookform/resolvers（^5\.4\.0）、@tanstack/react-table（^8\.21\.3）、class-variance-authority（^0\.7\.1）、clsx（^2\.1\.1）、cmdk（^1\.1\.1）、date-fns（^4\.4\.0）、input-otp（^1\.4\.2）、libphonenumber-js（^1\.13\.7）、lucide-react（^1\.0\.0）、next（^16\.0\.0）、radix-ui（^1\.6\.0）、react（^19\.0\.0）、react-colorful（^5\.7\.0）、react-day-picker（^10\.0\.0）、react-dom（^19\.0\.0）、react-dropzone（\>=15\.0\.0）、react-hook-form（^7\.80\.0）、recharts（^3\.9\.0）、sonner（^2\.0\.7）、tailwind-merge（^3\.6\.0）、zod（^4\.4\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dashboardpack/core 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dashboardpack\_\_core 是否存在。

### @dashboardpack/core 支持 ESM 还是 CommonJS？

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

### @dashboardpack/core 可以商用吗？

@dashboardpack/core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dashboardpack/core 的下载量有多少？

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

### @dashboardpack/core 还在维护吗？

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