# Ease UI
Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。
每个组件都是独立的 `.vue` 单文件,不依赖任何外部样式或工具函数,直接复制到你的项目即可使用。
它仅依赖 Element Plus,却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点。
> 你的 ⭐️ Star ⭐️ 是我持续更新的动力
---
## 💡 项目初衷
在中后台系统开发中,我们频繁遇到这些问题:
| 痛点 | 现状 |
|----|----|
| 🔧 组件库太重 | 引入一套组件库,需要学习整套 API、主题配置、构建配置,成本太高 |
| 📋 复制粘贴难 | 想从项目 A 复用一个组件到项目 B,发现依赖了各种公共样式、工具函数,拆不出来 |
| 🧩 Element Plus 不够用 | 基础组件有了,但业务组件(如带展开/收起的搜索表单、智能表格)还得自己写 |
| 🔄 重复造轮子 | 每个项目都要重新实现表格选择、日期范围绑定、表单布局 |
**于是,Ease UI 诞生了。**
> 打造一套 **极致轻量、即拷即用** 的业务组件,让开发者可以像复制一段代码一样简单地复用组件。
---
## ✨ 核心优势
### 🎯 单文件组件,即拷即用
每个组件都是 **完全独立的 `.vue` 单文件**:
- ✅ 完整的 template 模板
- ✅ 独立的 script setup 逻辑
- ✅ 自包含的 style scoped 样式
无需任何配置,直接复制 `.vue` 文件到你的项目即可使用。
```bash
# 只需要这一个文件
src/components/xly-button/index.vue
# 不需要:
❌ 额外的 CSS 文件
❌ 公共样式依赖
❌ 复杂的构建配置
❌ 主题变量文件
```
---
### 🔌 仅依赖 Element Plus
本组件库 **仅依赖 Element Plus**(及其图标库):
```json
{
"dependencies": {
"element-plus": "^2.13.6",
"@element-plus/icons-vue": "^2.3.2"
}
}
```
**依赖说明:**
- 🎨 Element Plus:仅使用其图标组件
- 🚫 无其他 UI 库(Ant Design Vue / Naive UI / Vuetify 等)
- 🚫 无样式库(Tailwind CSS / UnoCSS 等)
- 📝 纯 Vue 3 + SCSS
---
### 🎯 解决真实业务痛点
| 分类 | 组件 | 解决的痛点 |
|----|----|----|
| 反馈组件 | xly-drawer | 侧边滑出面板,替代 Dialog |
| 反馈组件 | xly-modal | 简化 Dialog 使用 |
| 反馈组件 | xly-loading | 命令式加载状态 |
| 反馈组件 | xly-message | 轻量消息提示 |
| 基础组件 | xly-button | 7 种类型 + 链接/幽灵按钮 |
| 基础组件 | xly-empty | 空状态组件 |
| 数据展示 | xly-table | 表格选择混乱、分页重复 |
| 表单组件 | xly-form | 表单布局繁琐、校验分散 |
| 表单组件 | xly-search-form | 搜索区代码高度重复 |
| 表单组件 | xly-date-range-picker | 日期范围绑定繁琐 |
---
## 💡 在线预览
https://ease-ui.com
---
## 📦 组件亮点
### 🕐 时间范围选择器(xly-date-range-picker)
**痛点:** Element Plus 使用数组绑定,提交时需拆分。
**方案:** 分离式绑定 start / end
```vue
```
✅ 直接对应后端字段
✅ 无需转换
---
### 📊 超级表格(xly-table)
```vue
```
**特性:**
- 单选 / 多选
- 列固定、拖拽排序
- 列显示控制
- 服务端 / 前端分页
- 单元格编辑
---
### 📝 智能表单(xly-form)
```vue
```
✅ 内置 24 栅格
✅ 字段级校验
✅ 自动必填标记
---
### 🔍 搜索表单(xly-search-form)
```vue
```
支持 input / select / daterange / cascader / custom 等字段类型。
---
### 🎛️ 增强按钮(xly-button)
```vue
主按钮
幽灵按钮
链接按钮
```
---
### 🔄 加载状态(xly-loading)
```ts
import { xly } from '@/utils/xly'
xly.$loading.open('加载中...')
xly.$loading.close()
```
---
## 👥 适合谁用?
- ✅ 需要快速搭建中后台
- ✅ 维护多个项目
- ✅ 对现有组件库不满意
- ✅ 学习 Vue 3 组件设计
---
## 🚀 快速开始
### 方式一:整项目使用
```bash
git clone https://gitee.com/yun_hua_admin/ease-ui.git
cd ease-ui
pnpm install
pnpm dev
```
### 方式二:单组件复制
```bash
src/components/xly-button/index.vue
```
> ⚠️ 部分组件存在内部依赖,复制时请一并复制依赖组件。
---
## 📂 组件依赖关系(节选)
| 组件 | 依赖 |
|----|----|
| xly-table | xly-button, xly-icon |
| xly-search-form | xly-form |
| xly-progress | xly-icon |
| xly-image-upload | xly-icon |
---
## 🛠 全局服务
```ts
xly.$msg.success('保存成功')
xly.$loading.open('加载中...')
```
---
## 🏗 项目结构
```
ease-ui/
├── src/
│ ├── components/ # 组件库
│ ├── views/ # 示例页面
│ ├── utils/ # 工具函数
│ └── main.ts
```
---
## 🎨 定制主题
```scss
$primary: #your-brand-color;
$success: #your-success-color;
```
---
## 🤝 贡献指南
1. Fork 本仓库
2. 创建特性分支
3. 提交修改
4. 推送并创建 PR
---
## ☕ 请作者喝杯咖啡
微信支付
支付宝支付
(图片见原仓库)
---
## 📋 更新记录
详见 ./CHANGELOG.md
---
## 📄 许可证
MIT © 2026 Ease UI
---
🌟 如果这个项目对你有帮助,请给它一个 Star!
---
如果你愿意,我可以再帮你做:
- ✅ **精简版 README(突出“复制即用”)**
- ✅ **英文版 README**
- ✅ **组件文档目录结构建议**
- ✅ **GitHub / Gitee 推荐徽章组合**