@kdesigner/amis-extensions

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

特性

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

安装

pnpm add @kdesigner/amis-extensions

使用

// 导入即自动注册所有扩展
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 等）。

{
  "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