Ease UI即插即用的 Vue 3 业务组件库让中后台开发告别繁琐Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件不依赖任何外部样式或工具函数直接复制到项目即可使用。它仅依赖 Element Plus却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点让组件复用像复制代码一样简单。新增- **xly-super-form快速表单组件** src/components/xly-super-form/- 基于配置驱动的高效表单组件支持双绑定数据同步。- 支持多种组件类型input / select / datePicker / dateRangePicker / dateTimePicker / dateTimeRangePicker / timePicker / timeRangePicker / cascader / switch / rate / imageUpload / user。- 支持双绑定组件日期范围等自动绑定 startProp 和 endProp。- 内置表单校验required / email / phone / pattern / validator。- 支持栅格布局控制span 1 - 24。- 支持标签宽度、必填标记、尺寸控制。- 支持远程搜索方法remoteMethod。- 暴露方法validate / validateField / resetFields / clearValidate / submit / getFormData。- **useFormFields表单字段生成器** src/components/xly-super-form/useFormFields.ts使用示例- 链式调用风格的表单字段配置工具简化表单定义。- 自动推断中文标签如 name - 姓名、phone - 手机号。- 支持四种参数风格input(name) / input(name, 用户名) / input(name, { required: true }) / input(name, 用户名, { span: 12 })。- 日期范围支持四种调用方式自动生成 startProp / endProp。- 链式方法$required() / $span() / $label() / $noLabel() / $props() / $rule() / $options() / $dict() / $remote() / $range()。- 内置校验规则工厂rules.required() / rules.email() / rules.phone() / rules.pattern() / rules.custom()。- 工具函数pick() 数据提取 / divider() 分隔线 / title() 标题。从 FormFields 模块中导入了 useFormFields 钩子这个钩子可能是一个自定义的 React 钩子用于简化表单字段的创建和管理。通过解构赋值从 useFormFields 钩子中提取了四个函数input、textarea、password 和 rules。定义表单字段数组javascriptconst fields [input(name, 姓名, { required: true }),input(phone, 手机号, { rules: rules.phone() }),input(email, 邮箱, { rules: rules.email() }),textarea(remark, 备注, { props: { rows: 3 } }),password(password, 密码),];这段代码定义了一个名为 fields 的数组其中包含了五个表单字段。每个字段都是一个函数调用使用 input、textarea 或 password 函数创建- 第一个字段是 input 类型用于输入姓名标记为必填required: true。- 第二个字段是 input 类型用于输入手机号并应用了 rules.phone() 规则。- 第三个字段是 input 类型用于输入邮箱并应用了 rules.email() 规则。- 第四个字段是 textarea 类型用于输入备注并设置了 rows 属性为 3。- 第五个字段是 password 类型用于输入密码。总结这段代码通过使用 useFormFields 钩子创建了一个包含多个表单字段的数组。每个字段都有特定的类型和属性如必填、规则和样式等。这些字段将被用于构建一个表单用户可以在其中输入数据。修复- **search - form 搜索表单**修复重置事件触发顺序问题。- 调整 reset 事件在 modelValue 更新后的触发顺序。- 确保表单重置时数据同步的一致性。- **select 下拉框**修复下拉框单项模式添加选项失败的问题。项目初衷在中后台系统开发中我们频繁遇到这些问题痛点现状 组件库太重引入一套组件库需要学习整套 API、主题配置、构建配置成本太高 复制粘贴难想从项目 A 复用一个组件到项目 B发现依赖了各种公共样式、工具函数拆不出来 Element Plus 不够用基础组件有了但业务组件如带展开/收起的搜索表单、智能表格还得自己写 重复造轮子每个项目都要重新实现表格选择、日期范围绑定、表单布局...于是Ease UI 诞生了。打造一套 **极致轻量、即拷即用** 的业务组件让开发者可以像复制一段代码一样简单地复用组件。核心优势单文件组件即拷即用每个组件都是 **完全独立的** .vue **单文件** 包含- ✅ 完整的 模板- ✅ 独立的