villianjs-pro

React + TypeScript 业务组件库，基于 Ant Design / Pro Components，提供高频后台场景组件（表格、选择器、导入导出、列表、表单增强等）。

React + TypeScript component library built on Ant Design / Pro Components for admin dashboards and enterprise apps.

Features | 核心能力

• ProTable：增强表格（搜索、分页、列表/网格视图、操作栏）
• TabSelector：多 Tab 弹窗选择器（单选/多选）
• Imports：文件导入流程（上传、进度、结果、历史）
• Exports：文件导出流程（同步/异步、轮询状态）
• List.Container：分页卡片列表容器
• TreeSelect：树形选择器
• Image：支持缓存与过期控制的图片组件
• Button / ConfirmButton / ButtonGroup：按钮增强组件
• Card / Modal / CheckCard / Typography / Beyond：常用业务 UI 组件
• 内置工具：library、locale、hooks

Install | 安装

npm i villianjs-pro

Quick Start | 快速开始

import React from "react";
import { ProTable, Button, Imports, Exports, TabSelector } from "villianjs-pro";

export default function DemoPage() {
  return (
    <div>
      <Button type="primary">Action</Button>
      {/* more business components */}
    </div>
  );
}

Components | 组件总览

Data Display & Interaction | 数据展示与交互

• ProTable
• List, ListContainer
• Card
• CheckCard
• TreeSelect
• TabSelector
• Beyond
• Typography

Workflow Components | 业务流程组件

• Imports, ImportContextProvider
• Exports
• ProForm

Basic UI | 基础 UI

• Button
• ConfirmButton
• ButtonGroup
• VaSwitch
• Modal
• Image

Utilities | 工具能力

• library（db / file / string / form / is / table 等）
• locale（zh-cn / en-us）
• hooks

Minimal Runnable Examples | 按组件最小可运行示例目录

建议在项目中维护一套最小示例目录，便于用户按组件快速检索、复制、运行。

Recommended minimal example structure for faster component discovery and copy-run usage.

examples/
  protable-basic/                # ProTable 基础分页与搜索 | Basic table with search & pagination
  tab-selector-basic/            # TabSelector 单选/多选 | Modal tab selector (radio/checkbox)
  imports-basic/                 # Imports 上传+进度+结果 | Import workflow demo
  exports-basic/                 # Exports 同步/异步导出 | Sync/async export demo
  list-container-basic/          # List.Container 分页卡片列表 | Paginated card list
  tree-select-basic/             # TreeSelect 树形选择 | Tree selection
  image-cache-basic/             # Image 缓存与过期 | Cached image with expire time
  button-confirm-basic/          # Button + ConfirmButton 异步确认 | Async action + confirm
  button-group-basic/            # ButtonGroup 操作组 | Action button group
  form-proform-basic/            # ProForm 表单增强 | Form enhancement demo
  card-modal-basic/              # Card + Modal 组合示例 | Card and modal composition
  checkcard-basic/               # CheckCard 选择卡片 | Selectable card
  typography-basic/              # Typography 文本排版 | Text/Title/Link/Paragraph
  beyond-overflow-basic/         # Beyond 超出折叠展示 | Overflow collapse list

每个示例目录建议包含：

• App.tsx：单组件最小可运行代码
• mock.ts：最小 mock 数据与请求
• README.md：中英双语说明（场景、依赖、运行方式）

npm Search Title Suggestions | npm 搜索标题建议（可同步到 GitHub Description）

下面标题可用于 npm 包描述、GitHub 仓库描述、文档首页副标题，提高中英文检索命中。

The following lines are optimized for npm and GitHub search visibility.

1. React + TypeScript Ant Design Pro Components Library for Admin Dashboard (ProTable, Imports, Exports, TreeSelect)
2. Enterprise React UI Components: ProTable, Modal Selector, Import/Export Workflow, List & Form Enhancements
3. 中后台 React 组件库（Ant Design）：ProTable、导入导出、树选择、列表与表单增强
4. React 中后台业务组件库 | ProTable / TabSelector / Imports / Exports / TreeSelect
5. Ant Design 业务组件库（TypeScript）- 表格、选择器、导入导出、表单流程

推荐同步策略：

• npm description：中英混合 1 行，覆盖核心组件名
• GitHub Description：优先使用第 1 或第 3 条
• 文档首页副标题：保留中英两行，覆盖 admin dashboard、中后台、ProTable、import/export

Usage Notes | 使用说明

• 依赖 react、react-dom、antd 与 @ant-design/pro-* 生态。
• 建议在中后台项目中与 Ant Design 主题体系一起使用。
• 组件 API 与示例可查看 components/*/README.md 和 src/stories/*。

Peer Dependencies | 对等依赖

请确保项目中已安装以下核心依赖（版本以 package.json 为准）：

• react, react-dom
• antd
• @ant-design/pro-components
• @ant-design/pro-form
• @ant-design/pro-table
• @ant-design/pro-utils

License

MIT