# @axzydev/axzy\_ui\_system 中文文档

规范地址：https://npmcn.com/package/%40axzydev/axzy_ui_system/

版本：1\.8\.15
npm 元数据更新时间：2026-10-31T19:50:31.625Z
中文译文更新时间：2026-11-07T16:34:15.761Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：7.2 MB，289 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-02-22T01:37:45.191Z
- 最新版本发布：2026-10-31T19:50:31.495Z
- 近 30 天下载量：4767（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：73（近 12 个月 73 个）

## 中文简介

企业准备就绪 **尾风 CSS v4**. Diseñada para aplicaciones de datosos, 仪表板 y sistemas de gestión. 中国植物物种信息数据库.

## 安装

```sh
npm install @axzydev/axzy_ui_system
```

也可以使用：`pnpm add @axzydev/axzy_ui_system`、`yarn add @axzydev/axzy_ui_system`、`bun add @axzydev/axzy_ui_system`

## README

# AXZY UI 系统

企业准备就绪 **尾风 CSS v4**. Diseñada para aplicaciones de datosos, 仪表板 y sistemas de gestión. 中国植物物种信息数据库.

* * *

## 第一A段

Si vas a generar código con esta librería (驾驶员,克洛德,Cursor, un agente propio), páale:

| 群岛 | 贵宾 |
| --- | --- |
| [`docs/llm/GUIA.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/docs/llm/GUIA.md) | Guía de uso: reglas, composicion de pantallas, theming, i18n, ccesibilidad, 蹦床协和重唱 |
| [`docs/llm/catalogo.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/docs/llm/catalogo.md) | **格内拉多·德克迪戈**: 61 个组件 con道具, tips, 默认 y ejemplo |
| [`docs/llm/catalogo.json`](https://npmcn.com/package/%40axzydev/axzy_ui_system/docs/llm/catalogo.json) | El mismo cataálogo en JSON, para indexar 互联网档案馆的存檔,存档日期2013-12-02 |
| [`docs/llm/ejemplos-reales.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/docs/llm/ejemplos-reales.md) | **普罗杜西翁会议** (CYC ERP):CSS的卡帕斯,供应商真实,底盘,Listados,公式,taplas con API和土司 |
| [`LLM_DOCS.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/LLM_DOCS.md) | 其内容为:变量 CSS `--it-*`,以埃斯卡拉斯和底盘布局 |

### 地毯 [`ai/`](https://npmcn.com/package/%40axzydev/axzy_ui_system/ai/) - 联合和美洲豹

永远不要毛骨悚然 [`ai/`](https://npmcn.com/package/%40axzydev/axzy_ui_system/ai/) 彩绘 **自动连续** 清单第1段 人民日报:

| 群岛 | 塔马尼奥 | 康特尼多语Name |
| --- | --- | --- |
| [`ai/AXZY-UI-SYSTEM.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/ai/AXZY-UI-SYSTEM.md) | ~150 KB(~38k个令牌) | Todo en uno: guía + ejemplos reales + cataálogo completo (中文(简体) ) |
| [`ai/AXZY-UI-SYSTEM-compacto.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/ai/AXZY-UI-SYSTEM-compacto.md) | ~65 KB (~17k个令牌) | 伊瓜尔, " 道具罪 " |
| `ai/catalogo.md` • 妇女 `ai/catalogo.json` | —— 说 | 索罗·克塔洛戈 |
| `ai/plantillas/` | —— 说 | 雷格拉斯光标( R)`.mdc`),副驾驶,克洛德代码和即时官方 |

```bash
pnpm docs:llm        # regenera el catálogo (compilador de TS sobre src/index.ts), docs/llm/ y ai/
pnpm docs:ai         # solo el paquete ai/ (usa docs/llm/ ya generado)
pnpm audit:sandbox   # audita el sandbox: axe (set completo) + contenido recortado, 45 páginas
```

## 诺埃沃教区

### 1\. 晶体活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性活性

```bash
npm create vite@latest mi-app -- --template react-ts
cd mi-app
```

### 2\. 依附地

```bash
npm install @axzydev/axzy_ui_system
npm install -D tailwindcss @tailwindcss/vite @vitejs/plugin-react-swc
```

### 3\. 相接相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相通相相通相通相通相通相通相相通相通相通相通相通相通相相通相相相相通相相通相相相通相相相通相通相通相相相相相相相通相相相相通相相通相相相通相相相相相通相相相相相相相

`vite.config.ts`数字 :

```ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [tailwindcss(), react()],
})
```

### 4\. Tailwind + el CSS de la librería (以正确方式)

`dist/index.css` (原始内容存档于2018-10-21) (英语). es un built de Tailwind **依赖性 y compilado** (地平线) 卡帕斯语name `@layer theme, base, components, utilities`) (中文(简体) ). Si Si `@import "tailwindcss";` (原始内容存档于2018-09-26) (英语). por su cueunta, el navegador acaba con) **行为** 胡戈斯·德·梅斯马斯 capas compartiendo nombre, y gana la que se registró en último lugar en el documento—— 正常状态 飞行前/重置相接相接相接相接, (原始内容存档于2018-09-21) (英语). Eso es lo que rompe cosas como el Sidebar: se ve bien solo mientras tu app 没有领带 su propio Tailwind crriendo.

自由的CSS un **层平面** 法语 capas explícitamente, para el restet/tema de AXZY dunica de de importing: 出口量:

`src/index.css`数字 :

```css
/* El orden aquí es el que manda, independientemente de en qué orden se
   importen los archivos: axzy-ui-system se ejecuta después del `base` de
   Tailwind (así su reset nunca lo pisa) pero antes de `utilities` (así tus
   clases de Tailwind siguen pudiendo sobrescribir estilos de AXZY cuando
   haga falta). */
@layer theme, base, axzy-ui-system, components, utilities;

@import "tailwindcss";
@import "@axzydev/axzy_ui_system/dist/index.css" layer(axzy-ui-system);
```

节奏 **没有** se 导入a `dist/index.css` 脱口而出 `main.tsx` ——待办事宜入门 `index.css`。 。 。 .

> **奥登·克特纳蒂沃(y su Consecuencia):** i 科洛卡语 `axzy-ui-system` _国家_ 页:1 `utilities`, (中文(简体) ), 自由之地 自由之地 自由之地 `!` 页:1 尾风v4(`m-0! px-4! max-w-screen!`) (中文(简体) ). 奥尔登·德·阿里巴·德·阿霍拉·埃斯索斯 `!`。 。 。 .

**Modo oscuro por fecto: 摩多·奥克罗(英语:Modo oscuro por fecto:** el 供应商 arranca en `system` 飞地上的守护者 `it-theme-dark-mode` (单位:千美元)`"light" | "dark" | "system"`) (中文(简体) ). Si quieres OTRO 默认值,埃斯克丽贝拉 **蚂蚁** 页:1 互联网档案馆的存檔,存档日期2011-10-02

```tsx
if (!localStorage.getItem("it-theme-dark-mode")) localStorage.setItem("it-theme-dark-mode", "light");
```

### 5\. 信息技术促进者

`src/main.tsx`数字 :

```tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { ITThemeProvider } from "@axzydev/axzy_ui_system"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ITThemeProvider>
      <App />
    </ITThemeProvider>
  </React.StrictMode>
)
```

### 6\. 使用组件

```tsx
import { ITButton } from "@axzydev/axzy_ui_system"

export default function App() {
  return (
    <div className="p-8">
      <ITButton>Hola Mundo</ITButton>
    </div>
  )
}
```

* * *

## 地方发展(续)

### 1\. 克隆和嵌入

```bash
git clone https://github.com/maag070208/AXZY_UI_SYSTEM.git
cd AXZY_UI_SYSTEM
pnpm install
```

### 2\. 沙盒活塞

```bash
pnpm dev
```

布尔 `http://localhost:5173` para ver el Interactive Sandbox con todos los 组件.

El sandbox usa 散列路线: `#ui-system` (着陆), `#ui-system/<grupo>/<item>` (构成部分e),第ej页. `http://localhost:5173/#ui-system/forms/input`。 。 `src/sandbox/navigation.ts`。 。 。 .

### 3\. 建设发展

```bash
pnpm build        # alias de pnpm bundle (tsup + CSS)
pnpm bundle       # tsup + CSS
```

* * *

## 脚本

| 科曼多语Name | 德克赖普西翁 |
| --- | --- |
| `pnpm dev` | 沙盒交互( Vite) |
| `pnpm build` | 别名 `pnpm bundle` (tsup + CSS) (中文(简体) ) |
| `pnpm build:app` | 建立应用沙盒 |
| `pnpm bundle` | Bundle del paquete (tsup + CSS) (英语) |
| `pnpm watch` | 守护模式 para desarrollo del paquete |
| `pnpm lint` | ESLint 语录 |
| `pnpm check:atomic` | 进口额最高者 |
| `pnpm check:css` | CSS( 选取器) `it-*`,符号 `--it-*`,罪杜普利卡多斯) |
| `pnpm preview` | 预览构建 |

* * *

## 阿基特克图拉 atómica y aislamiento CSS

失败组件 se organizan en **卡帕斯·阿多马卡** 依附关系 (una capa solo introductiona de capas guales o 低等:

| 卡帕岛 Capa | 瑞格莱 | 埃让普洛斯 |
| --- | --- | --- |
| `atoms/` | Primitivos, 组成部分的罪责依赖 | `ITButton`, (中文(简体) ), `ITInput`, (中文(简体) ), `ITText`, (中文(简体) ), `ITGrid`, (中文(简体) ), `ITFlex`, (中文(简体) ), `ITStack` |
| `molecules/` | 混血儿(Moléculas) | `ITCard`, (中文(简体) ), `ITDatePicker`, (中文(简体) ), `ITSelect`, (中文(简体) ), `ITTable`, (中文(简体) ), `ITStepper` |
| `organisms/` | 混编曲 | `ITDataTable`, (中文(简体) ), `ITFormBuilder`, (中文(简体) ), `ITDialog`, (中文(简体) ), `ITSidebar`, (中文(简体) ), `ITTopbar` |
| `templates/` | 帕吉纳斯/埃斯图克图拉斯公司 | `ITLayout`, (中文(简体) ), `ITPage` |
| `theme-provider/` | 提供者( 无可视卡帕) | `ITThemeProvider` |

### 加兰蒂亚·德阿伊斯拉米特奥

Anidar 组件(p.ej. **`ITDatePicker` 户口 `ITCard`**(中文(简体) ) **没有** 生产 (原始内容存档于2018-10-21). intermincia de estilos. Esto se garantiza por convención 和 se vicia en CI :

1.  **Clases propias siempre con prefijo 互联网档案馆的存檔,存档日期2013-12-02 `it-`** (比利时: `.it-card`, (中文(简体) ), `.it-date-picker__popover`) (中文(简体) ). 南卡-克雷斯-格尼西亚(南卡)`.card`, (中文(简体) ), `.toast-enter`, (中文(简体) ), `.animate-*`) (中文(简体) ).
2.  **选择者 con `:where(.it-*)`** − 具体内容0, para les public de {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}泰尔温德 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我就是这个意思.
3.  **CSS 计划 `@layer components`** − 公用事业 `utilities`ganan siempre. (法语).
4.  **Tokens públicos 命名空间 `--it-*`** (单位:千美元)`--it-card-bg`, (中文(简体) ), `--it-input-border`(中文(简体) ). 埃尔·雷斯托·德·克勒斯 `--color-*`编号 :`--radius-*` 泰尔温德之子.
5.  **检查自定义**数字 : `pnpm check:css` (选取物/选取物)y `pnpm check:atomic` (grafo de dedependencias) fallan si se viola la convención. 中国植物物种信息数据库.

El aislamiento se vicia en CI con (英语: `pnpm check:css` 尔 `pnpm check:atomic`你没有干草史诗 故事书的aislamiento.

* * *

## 他们

重犯时的个人特征:

```tsx
const myTheme = {
  colors: {
    primary: { 50: "#fef2f2", 500: "#ef4444", 900: "#7f1d1d" },
    success: { 50: "#f0fdf4", 500: "#22c55e" },
    // solo necesitas los colores que quieras sobreescribir
  },
}

<ITThemeProvider theme={myTheme}>
  <App />
</ITThemeProvider>
```

覆盖 fino por CSS: 取消 usan el namespace 组件符号 **`--it-*`** (单位:千美元)`--it-card-bg`, (中文(简体) ), `--it-topbar-bg`, (中文(简体) ), `--it-calendar-selected-bg`(中文(简体) ). 索布雷斯克里比尔 estas变量 en cualquier contenderor estila solo se subárbol. 中国植物物种信息数据库.

> **断开(v1.3)**: los sorders se renombraron de (英语: `--card-*`, (中文(简体) ), `--input-*`, (中文(简体) ), `--topbar-*`, (中文(简体) ), `--sidebar-*`, (中文(简体) ), `--modal-*`, (中文(简体) ), `--calendar-*`, (中文(简体) ), `--layout-*` (单位:千美元) `--it-*` (原始内容存档于2012-10-12). para evitar colisiones con CSS de la app consusidora.

* * *

## 单位责任

-   **IT按钮** – Botón con 变体(填充,概述,提升,四舍五入,文本,链接,仅图标)
-   **IT投入** - 输入相机, 密码, número, 文本区域, 图标
-   **选择** - 降入内地
-   **ITSearch 选择** - 选择共同行动
-   **ITDate 选择器** 编号 : **IT时间选择器** - 女权运动者
-   **国贸中心** - Calactio coneventos y modos月/周/日
-   **切换** - 切换切换
-   **ITROP文件** - Area de arrastrar y soltar群岛
-   **ITForm 构建器** - JSON公式化公司
-   **图表** 编号 : **互联网数据表** - Tablas con filtros, ordenamiento, paginación y 柱花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花`pinned`(中文(简体) )
-   **国贸中心** 编号 : **ITSTATCard (美国)** - 母婴保健方案
-   **离线** 编号 : **ITNavbar (印度尼西亚语)** - 西斯德马平面平面相接
-   **ITFlex (英语)** 编号 : **ITTack 软件包** 编号 : **信息技术** - 布局辅助器
-   **文本** - Tipografía变种
-   **塔瓦达** - 司法形象
-   **ITBadget (英语)** - 埃斯塔多徽章
-   **开发者** - 食人鱼
-   **进展** - 巴拉斯·德·普罗格雷索
-   **IPagination (英语)** - 帕吉纳西翁
-   **IPPage 页眉** - Encabezados de página(西班牙语)
-   **IPPage 软件** - Página 压缩布局
-   **主题: 提供** - 特马博士

* * *

## 自动完成/ IntelliSense

互联网档案馆的存檔。 También incluye sippets de VS Code para 插入 Cada 元件 con un par de teclas. 互联网档案馆的存檔,存档日期2013-12-21. 维尔 [`AUTOCOMPLETE_SETUP.md`](https://npmcn.com/package/%40axzydev/axzy_ui_system/AUTOCOMPLETE_SETUP.md) para el setup completo (片段, Tailwind IntelliSense).

* * *

## 请求

-   反应 18+
-   尾风 CSS 4.x + `@tailwindcss/vite`
-   节点.js 18+
-   pnpm( 本地开发段落)

## 常见问题

### @axzydev/axzy\_ui\_system 是什么？

企业准备就绪 尾风 CSS v4\. Diseñada para aplicaciones de datosos, 仪表板 y sistemas de gestión\. 中国植物物种信息数据库\.

### 如何安装 @axzydev/axzy\_ui\_system？

在项目目录运行 npm install @axzydev/axzy\_ui\_system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @axzydev/axzy\_ui\_system 支持 TypeScript 吗？

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

### @axzydev/axzy\_ui\_system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @axzydev/axzy\_ui\_system 可以商用吗？

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

### @axzydev/axzy\_ui\_system 的下载量有多少？

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

### @axzydev/axzy\_ui\_system 还在维护吗？

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