# @duyluonganduin/acl-web-components 中文文档

规范地址：https://npmcn.com/package/%40duyluonganduin/acl-web-components/

版本：0\.0\.80
npm 元数据更新时间：2026-11-05T05:32:43.238Z
中文译文更新时间：2026-11-13T00:55:21.428Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：3.6 MB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-03-24T15:37:53.134Z
- 最新版本发布：2026-11-05T05:32:43.060Z
- 近 30 天下载量：3445（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：78（近 12 个月 78 个）

## 中文简介

本地Web组件库 [升](https://lit.dev/) anduin 设计系统的TypeScript.

## 安装

```sh
npm install @duyluonganduin/acl-web-components
```

也可以使用：`pnpm add @duyluonganduin/acl-web-components`、`yarn add @duyluonganduin/acl-web-components`、`bun add @duyluonganduin/acl-web-components`

## README

# acl-web 组件

本地Web组件库 [升](https://lit.dev/) anduin 设计系统的TypeScript.

## 安装

```bash
npm i @duyluonganduin/acl-web-components
```

* * *

## 设置

### 1\. 进口部件

```js
import '@duyluonganduin/acl-web-components'
```

### 2\. 进口设计标志(所需)

令牌文件设置所有 CSS 自定义属性( S)`--color-*`, (中文(简体) ), `--text-*`等) 打开 `:root`。必须从您的应用根导入一次.

```css
@import '@duyluonganduin/acl-web-components/tokens.css';
```

或在联署材料中:

```js
import '@duyluonganduin/acl-web-components/tokens.css'
```

* * *

## 尾风集成

### 尾风 v3

添加预设以将您的 Tailwind 主题与所有设计符号相扩展 :

```js
// tailwind.config.js
import aclPreset from '@duyluonganduin/acl-web-components/tailwind-preset'

export default {
  presets: [aclPreset],
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
}
```

```css
/* main.css */
@import '@duyluonganduin/acl-web-components/tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 尾风 v4

导入 CSS 主题桥而不是配置预设 :

```css
/* main.css */
@import "tailwindcss";
@import "@duyluonganduin/acl-web-components/tokens.css";
@import "@duyluonganduin/acl-web-components/tailwind-theme.css";
```

没有 `tailwind.config.js` 需要改变.

### 使用基于符号的通用类

一旦设置, 您可以直接使用符号值作为 Tailwind 类 :

```html
<p class="text-13 font-medium text-primary-4 leading-20">Heading</p>
<div class="bg-gray-1 rounded-lg shadow-2 p-16 gap-8 flex">...</div>
<span class="text-danger-4 font-semibold">Error message</span>
```

* * *

## 构成部分

在 HTML 中直接使用组件——它们工作在任何框架中,因为它们是标准自定义元素.

```html
<anduin-button appearance="filled" variant="primary">Save</anduin-button>
<anduin-input placeholder="Search..."></anduin-input>
<anduin-spinner size="small"></anduin-spinner>
```

### 框架整合

**反应 :**

```jsx
import '@duyluonganduin/acl-web-components'
import '@duyluonganduin/acl-web-components/tokens.css'

export default function App() {
  return (
    <div>
      <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
      <anduin-input placeholder="Enter text..."></anduin-input>
    </div>
  )
}
```

**阴:**

```vue
<script setup>
import '@duyluonganduin/acl-web-components'
import '@duyluonganduin/acl-web-components/tokens.css'
</script>

<template>
  <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
  <anduin-input placeholder="Enter text..."></anduin-input>
</template>
```

### TypeScript + React — JSX 类型

货船 `dist/react.d.ts` 用于增加 `React.JSX.IntrinsicElements` 因此类型脚本接受全部 `anduin-*` 要素 `.tsx` 文件没有出错.

以两种方式之一启用它:

**备选案文A—— `tsconfig.json`** (建议,适用于整个项目):

```json
{
  "compilerOptions": {
    "types": ["@duyluonganduin/acl-web-components/react"]
  }
}
```

**备选案文B——参考指示** (每个文件或全局文件) `.d.ts`:

```ts
/// <reference types="@duyluonganduin/acl-web-components/react" />
```

一旦启用,所有组件道具都会被打入:

```tsx
<anduin-button appearance="filled" variant="primary" disabled>
  Save
</anduin-button>

<anduin-input value={query} placeholder="Search..." status="valid"></anduin-input>
```

* * *

## 参考文献

| 构成部分 | 标记 | 密钥属性 |
| --- | --- | --- |
| 徽标 | `<anduin-badge>` | `variant` |
| 徽章计数 | `<anduin-badge-count>` | `variant`, (中文(简体) ), `count` |
| 按钮 | `<anduin-button>` | `appearance`, (中文(简体) ), `variant` (默认 : `gray0`, (中文(简体) ), `size`, (中文(简体) ), `disabled`, (中文(简体) ), `loading`, (中文(简体) ), `href`, (中文(简体) ), `pill`, (中文(简体) ), `full-width`, (中文(简体) ), `start-icon`, (中文(简体) ), `end-icon` |
| 点名 | `<anduin-callout>` | `variant` |
| 复选框 | `<anduin-checkbox>` | `checked`, (中文(简体) ), `disabled`, (中文(简体) ), `indeterminate`, (中文(简体) ), `readonly`, (中文(简体) ), `inputid` |
| 分隔符 | `<anduin-divider>` | `direction` |
| 点 | `<anduin-dot>` | `variant` |
| 外地 | `<anduin-field>` | `orientation` |
| 外地标签 | `<anduin-field-label>` | `htmlfor`, (中文(简体) ), `required` |
| 字段说明 | `<anduin-field-description>` | —— 说 |
| 字段错误 | `<anduin-field-error>` | —— 说 |
| 外地小组 | `<anduin-field-group>` | —— 说 |
| 图标 | `<anduin-icon>` | `name`, (中文(简体) ), `size` (12个小) **16 个默认** - 20个大型24个 |
| 投入 | `<anduin-input>` | `value`, (中文(简体) ), `size`, (中文(简体) ), `disabled`, (中文(简体) ), `readonly`, (中文(简体) ), `placeholder`, (中文(简体) ), `inputid`, (中文(简体) ), `status` |
| 内置编辑 | `<anduin-inline-edit>` | `value`, (中文(简体) ), `placeholder`, (中文(简体) ), `size` (单位:千美元)`small`编号 :`medium`, (中文(简体) ), `mode`, (中文(简体) ), `disabled`, (中文(简体) ), `click-to-edit`, (中文(简体) ), `edit-label`· ; `.validate` 财产; `edit()` |
| 装入状态 | `<anduin-loading-state>` | `height` |
| 进展 | `<anduin-progress>` | `percent`, (中文(简体) ), `height` |
| 斯凯莱通 | `<anduin-skeleton>` | `effect`, (中文(简体) ), `shape`, (中文(简体) ), `height`, (中文(简体) ), `width`, (中文(简体) ), `duration`, (中文(简体) ), `font-size` |
| 旋转器 | `<anduin-spinner>` | `size`, (中文(简体) ), `percent` |
| AI 螺旋桨 | `<anduin-ai-spinner>` | `state` (单位:千美元)`loading`编号 :`still`, (中文(简体) ), `size` (px, 默认 20) |
| 菜单 | `<anduin-menu>` | `placement`, (中文(简体) ), `open` |
| 菜单项目 | `<anduin-menu-item>` | `icon`, (中文(简体) ), `variant`, (中文(简体) ), `disabled` |
| 过量 | `<anduin-popover>` | `placement`, (中文(简体) ), `open` |
| 标签 | `<anduin-tabs>` | `default-value`, (中文(简体) ), `value`, (中文(简体) ), `fill` |
| 标签列表 | `<anduin-tabs-list>` | `alignment` |
| 标签触发器 | `<anduin-tab-trigger>` | `value`, (中文(简体) ), `start-icon`, (中文(简体) ), `disabled`, (中文(简体) ), `show-badge`, (中文(简体) ), `badge-count` |
| 标签内容 | `<anduin-tab-content>` | `value` |
| 标记 | `<anduin-tag>` | `variant`, (中文(简体) ), `icon`, (中文(简体) ), `disabled` |
| 标记关闭 | `<anduin-tag-close>` | —— 说 |
| 文本区域 | `<anduin-textarea>` | `value`, (中文(简体) ), `disabled`, (中文(简体) ), `readonly`, (中文(简体) ), `placeholder`, (中文(简体) ), `inputid`, (中文(简体) ), `rows`, (中文(简体) ), `status` |
| 切换组 | `<anduin-toggle-group>` | `mode` (单位:千美元)`single`编号 :`multiple`, (中文(简体) ), `default-value`, (中文(简体) ), `value`, (中文(简体) ), `size`, (中文(简体) ), `variant`, (中文(简体) ), `gap` |
| 切换分组项目 | `<anduin-toggle-group-item>` | `value`, (中文(简体) ), `start-icon`, (中文(简体) ), `disabled` |
| 工具提示 | `<anduin-tooltip>` | `placement`, (中文(简体) ), `disabled` |
| 工具提示触发器 | `<anduin-tooltip-trigger>` | —— 说 |
| 工具提示内容 | `<anduin-tooltip-content>` | —— 说 |
| 这个嘛 | `<anduin-well>` | `variant` |
| 关闭 | `<anduin-well-close>` | —— 说 |

* * *

## 软件包导出

| 导入路径 | 目录 |
| --- | --- |
| `@duyluonganduin/acl-web-components` | 所有组件类(自动注册自定义元素) |
| `@duyluonganduin/acl-web-components/tokens.css` | 所有设计符的 CSS 自定义属性 |
| `@duyluonganduin/acl-web-components/tailwind-preset` | 尾风 **页:1** 预设 |
| `@duyluonganduin/acl-web-components/tailwind-theme.css` | 尾风 **页:1** `@theme inline` 桥 |
| `@duyluonganduin/acl-web-components/react` | 反应JSX类型(`IntrinsicElements` 向所有人开放 `anduin-*` (单位:千美元) |

* * *

## 发展

```bash
npm install
npm run storybook        # Component dev server → http://localhost:6006
npm run build            # Type-check + Vite build → dist/
npm run build-storybook  # Static Storybook export
```

## 堆栈

-   [升](https://lit.dev/) ——Web组件基础库
-   [维特](https://vitejs.dev/) ——构建工具(图书馆模式)
-   [故事书](https://storybook.js.org/) - 构成部分发展和文件编制
-   类型脚本

## 常见问题

### @duyluonganduin/acl-web-components 是什么？

本地Web组件库 升 anduin 设计系统的TypeScript\.

### 如何安装 @duyluonganduin/acl-web-components？

在项目目录运行 npm install @duyluonganduin/acl-web-components，或使用 pnpm add / yarn add / bun add。

### @duyluonganduin/acl-web-components 支持 TypeScript 吗？

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

### @duyluonganduin/acl-web-components 支持 ESM 还是 CommonJS？

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

### @duyluonganduin/acl-web-components 可以商用吗？

@duyluonganduin/acl-web-components 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @duyluonganduin/acl-web-components 的下载量有多少？

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

### @duyluonganduin/acl-web-components 还在维护吗？

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