# @avgeek-oss/design-system 中文文档

规范地址：https://npmcn.com/package/%40avgeek-oss/design-system/

版本：1\.5\.0
npm 元数据更新时间：2026-11-01T08:53:06.382Z
中文译文更新时间：2026-11-07T08:04:04.552Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40avgeek-oss/design-system
原文对照：https://npmcn.com/package/%40avgeek-oss/design-system/?lang=original
项目主页：https://github.com/avgeek-oss/oss-ds-web#readme
源码仓库：https://github.com/avgeek-oss/oss-ds-web

弃用说明：Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

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

- 包体积（解压后）：1.4 MB，745 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=26
- 运行依赖：20 个
- peer 依赖：next ^16\.4\.1，react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-13T06:45:29.403Z
- 最新版本发布：2026-10-29T10:08:43.938Z
- 近 30 天下载量：3733（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

Avgeek OSS应用软件的共享反应组件,应用布局和UI模式.

## 安装

```sh
npm install @avgeek-oss/design-system
```

也可以使用：`pnpm add @avgeek-oss/design-system`、`yarn add @avgeek-oss/design-system`、`bun add @avgeek-oss/design-system`

## README

# Avgeek 开放源码软件设计系统

Avgeek OSS应用软件的共享反应组件,应用布局,以及UI模式. Towbar是共同表面和展示合同的基线. 适应于Apache-2.0下.

## 安装

该套件在npmjs.org上公开. 安装它不需要 GitHub 令牌 。 如果存在 `.npmrc` 地图 `@avgeek-oss` 改为 GitHub 软件包,将范围改为 `https://registry.npmjs.org` 并刷新依赖锁文件 .

```sh
pnpm add @avgeek-oss/design-system react react-dom
```

软件包目标为回放19和Tailwind CSS 4. 导入 `@avgeek-oss/design-system/styles.css` 通过你的尾风建筑。 继续启动您的应用程序源扫描 。 字体,英雄UI风格,符号,以及软件包组件的效用通过这个样式表包含.

```tsx
"use client";

import { Providers, SignIn } from "@avgeek-oss/design-system";
import "@avgeek-oss/design-system/styles.css";

// Mount Providers once around your app. API callbacks belong to the app.
<Providers>
  <SignIn
    brand="Avgeek"
    onSubmit={signIn}
    onForgotPassword={openPasswordReset}
  />
</Providers>;
```

根会输出共同的布局和模式. 原始物也具有明显的子路径,例如: `forms/input`, (中文(简体) ), `pickers/date-picker`,以及 `data-display/table`见 [组件目录](https://npmcn.com/package/%40avgeek-oss/design-system/docs/components.md) ;不导入未公布的内部路径.

## 层

-   **初级:** 按钮、窗体控件、表格、部件、图表、上下文、打字、图标和主题控件.
-   **布局 :** 应用程序外壳、主导航和二次导航、页面标题、面包屑和内容部分.
-   **图案 :** 单独的认证屏幕,双步团队设置,MCP授权,账户设置,团队成员,资源表,通知,以及账户菜单.

Apps提供品牌,路线,导航组,权限,日期,和行动. API调用,认证政策,认证仪式,并坚持在应用程序中. 验证构建者接受现有的应用限制;软件包不会取代服务器的授权.

构成部分使用和设计规则 [设计](https://npmcn.com/package/%40avgeek-oss/design-system/DESIGN.md)编辑 [共享模式指南](https://npmcn.com/package/%40avgeek-oss/design-system/docs/patterns.md) 涵盖账户和团队管理、历史/过滤、通知设置、集成、操作进度及其应用边界.

## 路线

将壳包入 `RouteProvider` 使用当前路径名和导航回调。 没有路由器回调,链接使用正常浏览器导航. Next.js 应用程序可以使用 `NextNavigationProvider` 从 `@avgeek-oss/design-system/adapters/next`。下一个.js是可选的对等关系依赖,不是由共享运行时间导入的.

## 发展

这些是维护者的开发笔记. 我们不接受来自公共来源的捐款,以遏制自动拉动请求,并且因为没有专门的资源来审查和签署这些请求。 这一储存库欢迎反馈和问题;我们对这些反馈和问题进行分类并努力尽早予以纠正。 如本报告所述,私下报告安全方面的弱点 [警卫](https://npmcn.com/package/%40avgeek-oss/design-system/SECURITY.md)。 。 。 .

```sh
pnpm install --frozen-lockfile
pnpm exec playwright install chromium
pnpm storybook
pnpm verify
pnpm pack
```

故事书以React/Vite框架运行于端口5012. Fixtures覆盖了原始人, shell 导航,认证布局,设置表,空态,以及图表. 使用主题工具栏进行轻/暗预览和响应的取景口进行移动布局. 每个组件都有一个Master故事,被命名的例子,可复制源和API参考. `Show code` 包括组成和本地调用样本,进口重写到公共软件包子路径;预览帮助器仍然未发布。 原生原始与"英雄"的API文档相链接.

发展规则在 [一般事务人员(其他职等)](https://npmcn.com/package/%40avgeek-oss/design-system/AGENTS.md)。 。 。 . `pnpm verify` 包括严格的源/源类型检查、代码和CSS lint、测试、清洁构建、故事书导出、导航、通知、吐司、加载和剪贴板交互测试,以及这次检查以外的柏油球安装/类型/建设检查。 它保存了已核实的候选人,并在被忽略的地方报告 `artifacts/` 文件夹。 已建声明包括地图到匹配的被包源.

浏览器大小写 `test/browser/*.spec.mjs` 一起跑过 `pnpm test:browser` 之后 `pnpm build:storybook`。共享固定用于导出并拥有主题设置和清理。 使用 Playwright 过滤器的现有命令来调查一个案件; 不为每个回归添加一个包脚本 。 报告和故障截图保留在 `artifacts/browser/`。 。 。 .

发布笔记在 [变动情况](https://npmcn.com/package/%40avgeek-oss/design-system/CHANGELOG.md)来源和第三方归属 `NOTICE` 财务报告和审定财务报表 `LICENSE`。 。 。 .

## 出版

调取请求并推向 `main` 运行每个部分 `pnpm verify` 平行工作,一起报告为 `verify` 检查。 稳定版本标签( S)`v1.2.18`例如,从该文物上向npmjs.org公开发表 `main` 运行标记下的承诺,在检查其完整性之后,而不是再次运行检查。 标签必须匹配 `package.json` 并指明一项承诺 `main`。更新版本并添加其 `## X.Y.Z (YYYY-MM-DD)` 区域到更改日志,通过正常的审查进程,然后标记预定的承诺并按下标记以释放它.

出版工作使用 npm 信任的出版与 GitHub Actions OIDC 。 配置 `avgeek-oss/oss-ds-web` 和工作流程 `ci.yml` 在软件包的 npm 信任-publisher 设置中。 这份工作是 `id-token: write`; GitHub 机密中不存储任何出版令牌 .

CI下载了经过验证的柏油球,检查了它的SHA-512完整性,并在没有运行包生命周期脚本的情况下公布了这些精确的字节. 新的注册下载必须匹配该完整字节的字节,注册者必须声明相同的完整;被隔离的Vite和Next.js消费者已经在核查运行中的这些字节上运行了. 重试只有在其完整性与已核实的候选文本相匹配的情况下才接受现有版本;修改后的内容需要一个新的版本. 成功发布后,一个单独的工作创建或更新了该版本的标签的GitHub发布 `CHANGELOG.md` 节.

对于初始 npm 迁移,一个维护者会以交互方式发布已经核实的释放文物来创建软件包,然后配置其信任的出版商. 现有的 GitHub 套件仍然可供旧的锁文件使用. 公共npm设施不需要登记证书或 `packages: read` 允许.

## 常见问题

### @avgeek-oss/design-system 是什么？

Avgeek OSS应用软件的共享反应组件,应用布局和UI模式\.注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

### 如何安装 @avgeek-oss/design-system？

在项目目录运行 npm install @avgeek-oss/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @avgeek-oss/design-system 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @avgeek-oss/design-system 支持 ESM 还是 CommonJS？

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

### @avgeek-oss/design-system 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=26。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @avgeek-oss/design-system 可以商用吗？

@avgeek-oss/design-system 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @avgeek-oss/design-system 的下载量有多少？

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

### @avgeek-oss/design-system 还在维护吗？

最新版本 1\.5\.0 发布于 2026/10/29（9 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/10/13。作者已将其标记为弃用，新项目建议寻找替代方案。