@wetspace/pro-components/README.md

A professional component library for Vue 3 + Element Plus, inspired by ant-design/pro-components

# @wetspace/pro-components

面向中后台场景的 Vue 3 + Element Plus 高级组件库，API 设计参考 [Ant Design ProComponents](https://pro-components.antdigital.dev/components)。

## 特性

- 基于 Element Plus 二次封装，开箱即用的重型业务组件
- 拥抱 Vue 3 组合式 API，核心逻辑提供可复用 hooks
- 与 ProTable / ProForm 共用 `columns`、`valueType` 配置
- 支持全量注册与 `unplugin-vue-components` 按需引入

## 安装

```bash
pnpm add @wetspace/pro-components element-plus lodash-es
# 或
npm install @wetspace/pro-components element-plus lodash-es
# 或
yarn add @wetspace/pro-components element-plus lodash-es
```

**Peer Dependencies：** `vue` ^3.5.0、`element-plus` ^2.5.0、`lodash-es` ^4.17.21

## 快速开始

### 全量注册

```ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { WetProComponents } from '@wetspace/pro-components'

const app = createApp(App)
app.use(ElementPlus)
app.use(WetProComponents)
app.mount('#app')
```

可选 `prefix` 为全局组件名添加前缀：

```ts
app.use(WetProComponents, { prefix: 'Wet' })
// ProTable → WetProTable
```

### 按需引入

```vue
<script setup lang="ts">
import { ProTable, ProForm, ProLayout } from '@wetspace/pro-components'
</script>
```

也可从子包单独引入，例如 `@wetspace/pro-table`、`@wetspace/pro-form`。

### 自动按需（unplugin-vue-components）

```ts
import Components from 'unplugin-vue-components/vite'
import { WetProComponentsResolver } from '@wetspace/pro-components/resolver'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [WetProComponentsResolver()],
    }),
  ],
})
```

## 组件一览

| 分类 | 组件 |
| --- | --- |
| 布局 | `ProLayout`、`PageContainer`、`ProCard`、`StatisticCard`、`CheckCard` |
| 数据录入 | `ProForm`、`StepsForm`、`ModalForm`、`DrawerForm`、`LoginForm`、`LoginFormPage` |
| 数据展示 | `ProTable`、`EditableProTable`、`DragSortTable`、`ProList`、`ProDescriptions` |
| 通用 | `ProConfigProvider`、`ProField`、`ProSkeleton`、`ProEditor`、`ProCharts` |

## 文档

完整 API、示例与最佳实践请访问官方文档：

**https://www.wetspace.top/docs/wet-pro-element/**

## 子包

本包为统一入口（umbrella package），内部聚合以下子包：

| 包名 | 说明 |
| --- | --- |
| `@wetspace/pro-layout` | 高级布局 |
| `@wetspace/pro-form` | 高级表单 |
| `@wetspace/pro-table` | 高级表格 |
| `@wetspace/pro-descriptions` | 描述列表 |
| `@wetspace/pro-list` | 高级列表 |
| `@wetspace/pro-card` | 高级卡片 |
| `@wetspace/pro-field` | 字段原子组件 |
| `@wetspace/pro-skeleton` | 骨架屏 |
| `@wetspace/pro-provider` | 全局配置 |
| `@wetspace/pro-editor` | 富文本编辑器 |
| `@wetspace/pro-charts` | 图表 |
| `@wetspace/pro-utils` | 工具函数 |

## 许可证

[MIT](LICENSE)