# 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 推荐徽章组合**