# @dfsj/components

> 基于 Element Plus 的通用业务组件库，包含 Table/Form/BasicModal/Windows/Boards 等高级封装组件

[![version](https://img.shields.io/npm/v/@dfsj/components.svg)](https://www.npmjs.com/package/@dfsj/components)
[![license](https://img.shields.io/npm/l/@dfsj/components.svg)](https://github.com/by1773/ec/blob/main/packages/components/LICENSE)

## 简介

@dfsj/components 是基于 Element Plus 的通用业务组件库，提供 Table、Form、Modal、Windows、Boards 等高级封装组件，通过 Schema 驱动和 Hooks 配合大幅提升中后台表单表格场景的开发效率。

## 主要功能

- **Table 表格** - 自动分页、列配置、行选择、操作列、图片预览
- **Form 表单** - Schema 驱动表单，支持联动校验、20+ 表单组件类型
- **BasicModal 弹窗** - 拖拽/全屏/自定义按钮/可收起
- **Windows 窗口** - 多窗口管理器，可拖拽缩放
- **Boards 抽屉** - 侧边抽屉管理器，支持宽度调整
- **Editor 富文本** - 基于 WangEditor 封装
- **UnifyChart 图表** - 通用图表容器
- **Highlight 高亮** - 高亮选择组件
- **InputPassword 密码** - 密码强度检测组件
- **Descriptions 描述** - 描述列表组件
- **ClickOutSide 点击外部** - 点击区域外检测组件
- **NodeAxis 时间轴** - 时间轴节点组件
- **Visual 播放器** - 可视化播放器组件

## 安装

```bash
pnpm add @dfsj/components
```

## 快速开始

```vue
<template>
  <Table :columns="columns" :data="data" :pagination="true" />
</template>

<script setup lang="ts">
import { Table, useTable } from '@dfsj/components'

const columns = [
  { field: 'name', label: '名称' },
  { field: 'age', label: '年龄' }
]

const [register, { getList }] = useTable({
  fetchDataApi: () => api.getList()
})
</script>
```

## 主要导出

| 导出名 | 类型 | 说明 |
|:------|:-----|:-----|
| `Table` | `Component` | 高级表格组件 (useTable 配合) |
| `Form` | `Component` | Schema 驱动表单组件 |
| `BasicModal` | `Component` | 弹窗组件（导出名为 BasicModal） |
| `Windows` | `Component` | 窗口管理器组件 |
| `Boards` | `Component` | 抽屉管理器组件 |
| `Editor` | `Component` | 富文本编辑器组件 |
| `UnifyChart` | `Component` | 统一图表容器组件 |
| `Highlight` | `Component` | 高亮选择组件 |
| `InputPassword` | `Component` | 密码强度输入框 |
| `Descriptions` | `Component` | 描述列表组件 |
| `ClickOutSide` | `Component` | 点击外部检测组件 |
| `NodeAxis` | `Component` | 时间轴节点组件 |
| `Visual` | `Component` | 可视化播放器组件 |
| `useTable` | `Function` | 表格逻辑 Hook (泛型支持) |
| `useForm` | `Function` | 表单逻辑 Hook |

> 完整 API 文档请查看 [在线文档站](../docs/zh/components/table.md)

## 使用要求

| 环境 | 要求 |
|:-----|:-----|
| Node.js | >=18.12.0 |
| Vue | >=3.5 |
| Element Plus | >=2.11 |

## 开发指南

```bash
git clone http://10.10.12.18/dfsj/dfsj
pnpm install
cd packages/components
pnpm watch
```

## 文档

- [快速开始](../docs/zh/guide/get-start.md)
- [完整API文档](../docs/zh/components/global.md)
- [更新日志](./CHANGELOG.md)

## 许可证

[MIT](../../LICENSE)

Copyright (c) 2022 - present yangbo