@df8080/vue2-ui/README.md

🎨 一个基于 Vue 2 的 UI 组件库，目前主要面向微信小程序开发场景，也适用于其他移动端项目。

# @df8080/vue2-ui

🎨 一个基于 Vue 2 的 UI 组件库，目前主要面向微信小程序开发场景，也适用于其他移动端项目。

[![npm version](https://img.shields.io/npm/v/@df8080/vue2-ui.svg)](https://www.npmjs.com/package/@df8080/vue2-ui)
[![npm downloads](https://img.shields.io/npm/dm/@df8080/vue2-ui.svg)](https://www.npmjs.com/package/@df8080/vue2-ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## ✨ 特性

- ✅ 支持 Vue 2.x
- ✅ 支持微信小程序（通过 `uni-app` 或原生绑定）
- ✅ 内置多个基础组件（Button、Modal、Form 等）
- ✅ 完整的 TypeScript 类型支持
- ✅ 内置加密解密功能
- ✅ 丰富的工具函数和混入

## 📦 安装

```bash
# 使用 yarn
yarn add @df8080/vue2-ui

# 使用 npm
npm install @df8080/vue2-ui --save

# 使用 pnpm
pnpm add @df8080/vue2-ui
```

## 🚀 快速开始

### 基础使用

```javascript
import Vue from 'vue'
import DfUI from '@df8080/vue2-ui'

// 使用组件库
Vue.use(DfUI)

// 或者带配置使用
Vue.use(DfUI, {
  empty: '暂无数据',
  emptyWidth: '400rpx',
  filterUrl: '/package-search/filter/index',
  imgMode: 'aspectFill'
})
```

### 按需引入

```javascript
import { Button, Modal } from '@df8080/vue2-ui'

// 注册组件
Vue.component('DfButton', Button)
Vue.component('DfModal', Modal)
```

## 🔐 加密解密功能

### 配置

在项目初始化时配置加密解密参数：

```javascript
import DfUI from '@df8080/vue2-ui'

Vue.use(DfUI, {
  // 加密解密配置
  cryptoConfig: {
    encryptType: 'aes', // 加密类型：'aes' | 'rsa' | 'hybrid'
    aesKey: 'your-aes-key', // AES密钥
    randomChars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' // 随机字符集
  },
  rsaConfig: {
    publicKey: 'your-rsa-public-key', // RSA公钥
    privateKey: 'your-rsa-private-key' // RSA私钥
  }
})
```

### 使用方法

#### 1. 在请求中使用加密

```javascript
import { post } from '@df8080/vue2-ui'

// 启用加密
post('/api/login', userData, {
  encrypt: true, // 启用加密
  encryptType: 'aes', // 可选：指定加密类型
  decrypt: true // 启用解密
})
```

#### 2. 手动加密解密

```javascript
import { 
  encryptWithAes, 
  decryptWithAes, 
  rsaEncrypt, 
  rsaDecrypt, 
  generateAesKey 
} from '@df8080/vue2-ui'

// AES加密
const aesKey = generateAesKey()
const encrypted = encryptWithAes('hello world', aesKey)
const decrypted = decryptWithAes(encrypted, aesKey)

// RSA加密
const rsaEncrypted = rsaEncrypt('hello world')
const rsaDecrypted = rsaDecrypt(rsaEncrypted)
```

## 📚 组件文档

### 基础组件

- **Button** - 按钮组件
- **Modal** - 模态框组件
- **Input** - 输入框组件
- **Form** - 表单组件
- **Table** - 表格组件
- **Tabs** - 标签页组件

### 业务组件

- **FilterPanel** - 筛选面板
- **Search** - 搜索组件
- **Upload** - 上传组件
- **Calendar** - 日历组件

## 🛠️ 开发

```bash
# 克隆项目
git clone https://github.com/df0808/vue2-ui.git

# 安装依赖
yarn install

# 开发模式
yarn dev

# 构建
yarn build

# 测试
yarn test
```

## 📄 许可证

[MIT](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系方式

- 作者：df0808
- 邮箱：df0808@gmail.com
- GitHub：[@df8080](https://github.com/df0808)

---

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