# @kdesigner/amis-extensions 中文文档

规范地址：https://npmcn.com/package/%40kdesigner/amis-extensions/

版本：0\.0\.1
npm 元数据更新时间：2026-11-01T13:16:39.795Z
中文译文更新时间：2026-11-01T15:18:09.816Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：113 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：amis 6\.11\.0，react ^18\.0\.0，react-dom ^18\.0\.0
- 首次发布：2025-08-20T03:48:44.397Z
- 最新版本发布：2026-11-01T13:16:39.626Z
- 已发布版本数：21（近 12 个月 3 个）

## 中文简介

AMIS过滤器的扩展。

## 安装

```sh
npm install @kdesigner/amis-extensions
```

也可以使用：`pnpm add @kdesigner/amis-extensions`、`yarn add @kdesigner/amis-extensions`、`bun add @kdesigner/amis-extensions`

## README

# @kdesigner/amis-extensions

![License](https://img.shields.io/badge/license-ISC-blue.svg) ![TypeScript](https://img.shields.io/badge/typescript-%5E5.9.2-blue.svg) ![React](https://img.shields.io/badge/React-18.x-61DAFB.svg)

AMIS 扩展增强包，提供实用的过滤器和渲染器扩展。

## 特性

-   🎯 **零配置** - 导入即用，自动注册到 AMIS
-   🔧 **28个实用过滤器** - 覆盖字符串、数字、数组、日期等处理
-   📁 **增强文件上传** - 基于 AMIS 原生样式的文件上传组件
-   🎨 **完美集成** - 复用 AMIS 原生样式类，确保视觉一致性
-   📦 **TypeScript** - 完整的类型定义支持
-   🔄 **渐进式设计** - 从简单功能开始，按需扩展

## 安装

```bash
pnpm add @kdesigner/amis-extensions
```

## 使用

```typescript
// 导入即自动注册所有扩展
import '@kdesigner/amis-extensions'

// 可选：导入样式（如果需要自定义样式）
import '@kdesigner/amis-extensions/style.css'
```

## 过滤器扩展

### 字符串处理

-   `capitalize` - 首字母大写
-   `camelCase` - 转驼峰命名
-   `kebabCase` - 转短横线命名
-   `snakeCase` - 转下划线命名
-   `truncate` - 截断文本
-   `slugify` - 生成 URL 友好字符串

### 数字处理

-   `abs` - 绝对值
-   `round` - 四舍五入
-   `clamp` - 数值限制

### 数组处理

-   `shuffle` - 随机打乱
-   `chunk` - 分块
-   `flatten` - 扁平化

### 日期处理

-   `timeAgo` - 相对时间
-   `formatDate` - 日期格式化

## 渲染器扩展

### 增强文件上传 (kdesigner-input-file)

基于 AMIS 原生样式的文件上传表单控件，支持所有 FormItem 属性（label、description、required 等）。

```json
{
  "type": "kdesigner-input-file",
  "name": "files",
  "label": "文件上传",
  "description": "支持图片、PDF、Word 文档，最大 5MB",
  "accept": "image/*,.pdf,.doc,.docx",
  "multiple": true,
  "maxSize": 5242880,
  "required": true
}
```

**专有属性**：

-   `accept` - 接受的文件类型
-   `multiple` - 是否支持多文件选择
-   `maxSize` - 文件大小限制（字节）

**继承的 FormItem 属性**：

-   `label` - 字段标签
-   `description` - 字段描述
-   `required` - 是否必填
-   `disabled` - 是否禁用
-   `placeholder` - 占位符文本
-   `name` - 字段名称

## 项目结构

```
src/
├── filters/           # 过滤器扩展
│   └── index.ts      # 28个实用过滤器
├── renderers/        # 渲染器扩展
│   └── InputFile/    # 增强文件上传
│       ├── index.tsx # 组件实现
│       ├── types.ts  # 类型定义
│       └── styles.scss # 样式文件
├── styles/           # 全局样式
├── types/            # 包级别类型
└── index.ts          # 主入口
```

## 设计原则

-   **AMIS 原生样式优先** - 复用 AMIS 的 CSS 类，确保视觉一致性
-   **类型各自管理** - 类型定义与实现就近放置
-   **功能模块化** - 每个功能独立，便于维护
-   **渐进式开发** - 从简单开始，按需扩展
-   **零配置使用** - 导入即用，无需额外配置

## 样式设计理念

我们的组件严格遵循 AMIS 的设计系统：

-   使用 `cxd-` 前缀的原生样式类
-   复用 AMIS 的按钮、表单、颜色等样式变量
-   确保在不同主题下的兼容性
-   最小化自定义样式，优先扩展原生样式

## License

ISC

## 常见问题

### @kdesigner/amis-extensions 是什么？

AMIS过滤器的扩展。

### 如何安装 @kdesigner/amis-extensions？

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

### @kdesigner/amis-extensions 支持 TypeScript 吗？

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

### @kdesigner/amis-extensions 支持 ESM 还是 CommonJS？

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

### @kdesigner/amis-extensions 可以商用吗？

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

### @kdesigner/amis-extensions 还在维护吗？

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