# @commerce7/admin-ui 中文文档
规范地址：https://npmcn.com/package/%40commerce7/admin-ui/
版本：2\.0\.72
npm 元数据更新时间：2026-11-03T19:57:27.457Z
中文译文更新时间：2026-11-10T11:56:26.632Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40commerce7/admin-ui
原文对照：https://npmcn.com/package/%40commerce7/admin-ui/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：662 kB，430 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：19 个
- peer 依赖：react ^19\.1\.0，react-dom ^19\.1\.0，styled-normalize ^8\.1\.1，styled-components ^5\.3\.11
- 首次发布：2021-01-26T21:19:39.966Z
- 最新版本发布：2026-11-03T19:57:27.292Z
- 近 30 天下载量：12309（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：463（近 12 个月 43 个）
## 中文简介
Commercial7 行政UI组件库
## 安装
```sh
npm install @commerce7/admin-ui
```
也可以使用：`pnpm add @commerce7/admin-ui`、`yarn add @commerce7/admin-ui`、`bun add @commerce7/admin-ui`
## README
# 商业7
## 安装
要安装并保存您的软件包。 json 依赖性, 运行 :
```
npm install @commerce7/admin-ui
```
## 间字体
商业7 行政UI设计与Inter一起使用,免费提供 [谷歌字体](https://fonts.google.com/specimen/Inter)在 HTML 或国家预防机制的应用程序中可以包含Inter.
在 HTML 中:
```
```
与国家预防机制:
```
npm install @fontsource/inter
```
```
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
```
## 设置
用 `Commerce7AdminUI`数字 :
```
import React from 'react';
import { Commerce7AdminUI } from '@commerce7/admin-ui';
import App from './App'
function Index() {
return (
);
}
```
## 使用量
导入组件以在应用程序内使用 :
```
import React from 'react';
import { Button } from '@commerce7/admin-ui';
function SaveButton() {
return ;
}
```
## 本地软件包的链接和解链接
有时,为了发展测试的目的,可能要求将一个项目与当地行政主管联系起来。 要做到这一点,有两个终端打开。 一个终端应该位于您本地文件夹的 admin ui 软件包的根上, 另一个应该位于您想要使用本地软件包的项目的根上 。 VS代码也应该开放.
这里使用的例子有管理员和管理员.
### 链接
```
In admin-ui terminal
1. npm link
```
```
In admin terminal
2. npm link @commerce7/admin-ui@{version-number}
```
```
In VS code
3. Restart VS code
4.After rebooting VS code, the @commerce7/admin-ui folder in the admin/@node_modules should have an arrow icon beside it. This shows it is properly linked.
```
```
In admin
5. In order to test locally, add **path.resolve('./node_modules/@commerce7/admin-ui/node_modules')** to webpack.{project-name}.config.js. Ex: webpack.admin.dev.js
6. Run npm run frontend-admin
```
```
In admin-ui
5. When you change something in admin-ui and want to see the changes in admin, you need to run **npm run build** in admin-ui to sync with admin. After you run **npm run build**, when you have symbolic link, the admin page will automatically be refreshed and will get the latest changes.
```
### 取消链接
```
In admin terminal
1. npm unlink --no-save @commerce7/admin-ui@{version-number}
```
```
In admin-ui terminal
2. npm unlink @commerce7/admin-ui@{version-number}
```
```
In VS code
3. Restart VS code
```
```
In VS code in admin project
4. Run npm install
```
重新启动后, 箭头图标应该被删除 。 这意味着该项目已成功与本地版admin ui脱钩.
## 发布注释
更改软件包版本时, 在顶端添加一个匹配条目 `src/stories/Releases.mdx`。解释为什么软件包正在更新,并遵循现有格式.
## 更新软件包的指示
不更新以下内容:
- 样式组件
## 常见问题
### @commerce7/admin-ui 是什么？
Commercial7 行政UI组件库
### 如何安装 @commerce7/admin-ui？
在项目目录运行 npm install @commerce7/admin-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-dom（^19\.1\.0）、styled-normalize（^8\.1\.1）、styled-components（^5\.3\.11）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @commerce7/admin-ui 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @commerce7/admin-ui 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @commerce7/admin-ui 可以商用吗？
@commerce7/admin-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @commerce7/admin-ui 的下载量有多少？
根据 npm 官方下载统计，@commerce7/admin-ui 在 2026/10/11 – 2026/11/09 这 30 天内被下载 12,309 次，日均约 410 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @commerce7/admin-ui 还在维护吗？
最新版本 2\.0\.72 发布于 2026/11/04（6 天前）；至今共发布 463 个版本，其中过去 12 个月发布了 43 个；首次发布于 2021/01/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。