@vlian/villianjs

一个基于 Ant Design 和 Ant Design Pro 封装的 React 组件库，提供丰富的业务组件来加速企业级应用开发。

✨ 特性

• 🚀 开箱即用 - 基于 Ant Design 和 Ant Design Pro 封装，提供丰富的业务组件
• 🎨 高度可定制 - 支持主题定制和样式覆盖
• 📱 响应式设计 - 完美适配各种屏幕尺寸
• 🔧 TypeScript 支持 - 完整的类型定义
• 🌍 国际化支持 - 内置中英文语言包
• 📦 按需加载 - 支持 Tree Shaking，减少包体积
• 🎯 业务导向 - 专注企业级应用常见业务场景

📦 安装

# npm
npm install @vlian/villianjs

# yarn
yarn add @vlian/villianjs

# pnpm
pnpm add @vlian/villianjs

🔧 依赖要求

• React >= 16.9.0
• React DOM >= 16.9.0
• Ant Design >= 5.26.3
• Ant Design Pro Components >= 2.8.2

🚀 快速开始

基础使用

import React from 'react';
import { VaButton, VaTable, VaForm } from '@vlian/villianjs';
import '@vlian/villianjs/dist/style.css';

function App() {
  return (
    <div>
      <VaButton type="primary">点击我</VaButton>
    </div>
  );
}

export default App;

配置 Provider

import React from 'react';
import { VaProvider } from '@vlian/villianjs';

function App() {
  return (
    <VaProvider locale="zh-CN">
      {/* 你的应用 */}
    </VaProvider>
  );
}

📚 组件列表

核心组件

VaCurd - 增删改查表格

功能完整的 CRUD 表格组件，内置增删改查操作。

import { VaCurd } from '@vlian/villianjs';

const columns = [
  { title: '姓名', dataIndex: 'name', valueType: 'text' },
  { title: '年龄', dataIndex: 'age', valueType: 'digit' },
  { title: '邮箱', dataIndex: 'email', valueType: 'text' },
];

<VaCurd
  columns={columns}
  request={async (params) => {
    // 获取数据
    return { data: [], success: true, total: 0 };
  }}
  create={async (values) => {
    // 创建数据
    console.log('创建:', values);
  }}
  update={async (values) => {
    // 更新数据
    console.log('更新:', values);
  }}
  remove={async (record) => {
    // 删除数据
    console.log('删除:', record);
  }}
/>

VaTable - 高级表格

基于 ProTable 封装的表格组件，支持搜索、分页、操作列等。

import { VaTable } from '@vlian/villianjs';

<VaTable
  columns={columns}
  request={async (params) => {
    // 获取数据
    return { data: [], success: true, total: 0 };
  }}
  create={async (values) => {
    // 创建数据
  }}
  update={async (values) => {
    // 更新数据
  }}
  remove={async (record) => {
    // 删除数据
  }}
/>

VaForm - 表单组件

基于 ProForm 封装的表单组件，支持多种字段类型。

import { VaForm } from '@vlian/villianjs';

<VaForm
  columns={[
    { name: 'name', label: '姓名', valueType: 'text' },
    { name: 'age', label: '年龄', valueType: 'digit' },
    { name: 'email', label: '邮箱', valueType: 'text' },
  ]}
  onFinish={async (values) => {
    console.log('表单提交:', values);
  }}
/>

弹窗组件

VaModalTable - 弹窗表格选择

在弹窗中展示表格，支持单选和多选。

import { VaModalTable } from '@vlian/villianjs';

<VaModalTable
  placeholder="请选择用户"
  request={async () => {
    // 获取选项数据
    return [];
  }}
  onChange={(value, rows) => {
    console.log('选择的值:', value, rows);
  }}
/>

VaPopupForm - 弹窗表单

在弹窗中展示表单，支持创建和编辑模式。

import { VaPopupForm } from '@vlian/villianjs';

<VaPopupForm
  columns={formColumns}
  onFinish={async (values) => {
    console.log('表单提交:', values);
  }}
/>

其他组件

VaButton - 按钮组件

增强的按钮组件，支持加载状态和点击前处理。

import { VaButton } from '@vlian/villianjs';

<VaButton
  type="primary"
  onBeforeClick={async () => {
    // 点击前的处理
    return true; // 返回 false 阻止点击
  }}
  onClick={() => {
    console.log('按钮被点击');
  }}
>
  点击我
</VaButton>

VaUpload - 上传组件

支持拖拽排序的文件上传组件。

import { VaUpload } from '@vlian/villianjs';

<VaUpload
  maxCount={5}
  maxSize={10} // 10MB
  enableDrag={true}
  onChange={(fileList) => {
    console.log('文件列表:', fileList);
  }}
/>

VaSwitch - 开关组件

增强的开关组件，支持更多配置选项。

import { VaSwitch } from '@vlian/villianjs';

<VaSwitch
  checked={true}
  onChange={(checked) => {
    console.log('开关状态:', checked);
  }}
/>

🎨 主题定制

组件库支持通过 CSS 变量进行主题定制：

:root {
  --va-primary-color: #1890ff;
  --va-success-color: #52c41a;
  --va-warning-color: #faad14;
  --va-error-color: #ff4d4f;
}

🌍 国际化

组件库内置中英文语言包，支持自定义语言：

import { VaProvider } from '@vlian/villianjs';

<VaProvider locale="en-US">
  {/* 英文界面 */}
</VaProvider>

<VaProvider locale="zh-CN">
  {/* 中文界面 */}
</VaProvider>

🔧 工具函数

组件库还提供了一些实用的工具函数：

import { utils } from '@vlian/villianjs';

// 加密工具
const encrypted = utils.encrypt.aes.encrypt('hello', 'secret');
const decrypted = utils.encrypt.aes.decrypt(encrypted, 'secret');

// 存储工具
utils.storage.set('key', 'value');
const value = utils.storage.get('key');

// 类型判断
utils.typeof.isString('hello'); // true
utils.typeof.isArray([]); // true

📖 更多示例

查看 Storybook 获取更多组件示例和文档。

🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进组件库。

📄 许可证

MIT License

📞 联系方式

• 作者：Villian
• 邮箱：[email protected]
• GitHub：@vlian

⭐ 如果这个项目对你有帮助，请给它一个星标！