Package Exports

@vlian/villianjs
@vlian/villianjs/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vlian/villianjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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
邮箱：1779479582@qq.com
GitHub：@vlian

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