# afn-basic-components

一个基于 Vue 2 和 Element UI 的基础组件库，包含常用的公共组件和样式。

## 📦 安装

```bash
npm install afn-basic-components
```

## 🚀 使用

### 完整引入

在 main.js 中引入：

```javascript
import Vue from "vue";
import AfnBasicComponents from "afn-basic-components";
import "afn-basic-components/styles/index.scss";

Vue.use(AfnBasicComponents);
```

### 按需引入

```javascript
import { GlobalDrawer, MessagePopUp, ProTable } from "afn-basic-components";
import "afn-basic-components/styles/index.scss";

export default {
  components: {
    GlobalDrawer,
    MessagePopUp,
    ProTable,
  },
};
```

## 📚 组件列表

### GlobalDrawer - 全局抽屉

一个功能强大的抽屉组件，支持标题、内容、宽度、方向等配置。

**Props:**

- `visible` (Boolean) - 是否显示抽屉，默认 false
- `title` (String) - 抽屉标题
- `width` (String) - 抽屉宽度，默认 '50%'
- `direction` (String) - 抽屉方向，可选 'rtl' | 'ltr' | 'ttb' | 'btt'，默认 'rtl'
- `beforeClose` (Function) - 关闭前的回调函数

**Events:**

- `close` - 抽屉关闭时触发
- `open` - 抽屉打开时触发

**示例:**

```vue
<global-drawer
  :visible.sync="drawerVisible"
  title="标题"
  width="60%"
  @close="handleClose"
>
  <div>抽屉内容</div>
</global-drawer>
```

### MessagePopUp - 消息弹窗

一个美观的消息提示组件，支持多种类型和配置。

**Props:**

- `visible` (Boolean) - 是否显示弹窗，默认 false
- `type` (String) - 消息类型，可选 'success' | 'warning' | 'info' | 'error'，默认 'info'
- `title` (String) - 弹窗标题
- `message` (String) - 弹窗消息内容
- `duration` (Number) - 显示时长（毫秒），0 表示不自动关闭，默认 3000
- `showClose` (Boolean) - 是否显示关闭按钮，默认 true

**Events:**

- `close` - 弹窗关闭时触发

**示例:**

```vue
<message-pop-up
  :visible.sync="messageVisible"
  type="success"
  title="成功"
  message="操作成功！"
  @close="handleClose"
/>
```

### ProTable - 专业表格

一个功能强大的表格组件，支持搜索、分页、排序等功能。

**Props:**

- `tableData` (Array) - 表格数据
- `columns` (Array) - 表格列配置
- `loading` (Boolean) - 是否加载中，默认 false
- `pagination` (Object) - 分页配置
- `showSearch` (Boolean) - 是否显示搜索区域，默认 true
- `showPagination` (Boolean) - 是否显示分页，默认 true

**Events:**

- `search` - 搜索时触发
- `reset` - 重置时触发
- `page-change` - 页码变化时触发
- `size-change` - 每页条数变化时触发

**示例:**

```vue
<pro-table
  :table-data="tableData"
  :columns="columns"
  :pagination="pagination"
  :loading="loading"
  @search="handleSearch"
  @reset="handleReset"
  @page-change="handlePageChange"
  @size-change="handleSizeChange"
/>
```

## 🎨 样式

组件库包含完整的样式文件，支持：

- **variables.scss** - 样式变量定义
- **btn.scss** - 按钮样式
- **mixin.scss** - SCSS 混合宏
- **transition.scss** - 过渡动画
- **element-ui.scss** - Element UI 样式覆盖
- **sidebar.scss** - 侧边栏样式
- **ruoyi.scss** - 通用样式

## 🔧 开发

```bash
# 安装依赖
npm install

# 本地开发
npm run serve

# 构建
npm run build
```

## 📝 依赖

- Vue ^2.6.0
- Element UI ^2.15.0

## 📄 License

MIT

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 💬 联系方式

如有问题，请提交 Issue。