【Ease UI】2026-04-24 项目更新：增加多种风格登录页，增加菜单风格切换

🚀 即插即用的 Vue 3 业务组件库，让中后台开发回归简单

Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件，不依赖任何外部样式或工具函数，直接复制到你的项目即可使用。它仅依赖 Element Plus，却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点，让组件复用像复制代码一样简单。

✨ 新增

菜单工具类 src/utils/menu.ts
- 统一管理菜单数据，支持本地 JSON 和远程 API 两种获取方式
- 核心 API：getMenuData() 获取菜单、findMenuByPath() 查找菜单、filterMenuByPermissions() 权限过滤、resolveComponent() 组件解析
- 内置缓存机制，支持 forceRefresh 强制刷新
- 提供菜单持久化工具：saveMenuPermissions() / getMenuPermissions()
- 所有菜单组件（VerticalSidebar / HorizontalMenu / FixedSidebar）统一使用工具类
菜单使用指南 src/views/basic/menu-doc.vue
- 菜单数据结构说明（JSON 字段详解）
- 本地/远程菜单配置模式详解
- 菜单权限控制实现方案
- 菜单持久化方案（LocalStorage / 服务端 / 混合模式）
- 常见问题 FAQ
- 菜单路径：/basic/menu-doc
404 页面完善 src/views/exception/404.vue
- 城市建筑风格 SVG 插画
- 友好的错误提示信息
- 返回首页 / 返回上一页操作按钮
菜单配置更新
- 新增「系统管理」一级菜单（含三级菜单混合模式）
- 新增「菜单使用指南」菜单项（/basic/menu-doc，id: 2-13）
登录页多主题风格系统 src/views/login/
- 新增 ThemeSwitcher 组件，支持 8 种登录主题实时切换
- 经典蓝（classic）：蓝紫渐变，简洁大气
- 暗黑科技（dark）：深色背景 + 霓虹蓝科技感
- 极简白（minimal）：纯白背景，清爽留白
- 大气磅礴（grand）：深蓝渐变，磅礴沉稳
- 清新自然（nature）：绿色系，健康活力
- 商务金融（corporate）：深色背景 + 金色点缀，高端金融感
- 极光渐变（aurora）：紫蓝极光渐变，科幻氛围
- 主题切换带平滑过渡动画
- 每个主题均为完整独立设计（左侧品牌区 + 右侧登录表单）

🔧 优化

布局切换系统（垂直布局 / 左右分栏 / 水平布局）
- 新增 menuLayout Store 管理布局状态
- 新增 MenuLayoutDrawer 组件支持布局切换
- 三种布局统一背景色 #eef1f8
- 垂直布局样式优化：间距、滚动、换行处理
水平布局优化
- 水平菜单融合到顶部导航（HeaderLayout）
- Logo 左 / 菜单居中 / 操作按钮右的经典布局
- 高度自适应 Header，不影响其他布局
三级菜单支持
- 垂直布局：点击二级菜单展开三级子菜单，带箭头旋转动画
- 水平布局：hover 二级菜单时右侧弹出三级下拉菜单
- 三级菜单样式优化：字体 13px、适当间距、颜色区分
路由优化
- 404 路由调整到顶层，确保未匹配路由正确重定向
- router/utils.ts 增加组件缓存优化
顶部功能优化
- 增加消息弹窗示例
- 实现全屏功能
组件优化
- 优化workTab组件样式

🐛 修复

垂直布局三级菜单样式：字体太小、间距不足的问题

💡 项目初衷

在中后台系统开发中，我们频繁遇到这些问题：

痛点	现状
🔧 组件库太重	引入一套组件库，需要学习整套 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（及其图标库），不引入其他 UI 组件库：

json 复制代码

{
"dependencies": {
"element-plus": "^2.13.6",
"@element-plus/icons-vue": "^2.3.2"
}
}

依赖说明：

🎨 Element Plus - 仅使用其图标组件（@element-plus/icons-vue）
🚫 无其他 UI 库 - 不依赖 Ant Design Vue、Naive UI、Vuetify 等
🚫 无样式库 - 不依赖 Tailwind CSS、UnoCSS 等原子类框架
📝 纯 Vue 3 + SCSS - 所有组件样式独立编写

这意味着：

如果你的项目已经使用 Element Plus，可以无缝集成
如果你的项目没有 Element Plus，只需安装它即可
不会有多个 UI 库的样式冲突问题

如果你觉得这个项目还不错或对你有帮助，欢迎到 Gitee 或 GitHub 上点个 Star，这是对作者最好的支持～开源不易，且用且珍惜。

🔗 Gitee：https://gitee.com/yun_hua_admin/ease-ui

🔗 GitHub：https://github.com/Momingyun/ease-ui

🔗 预览地址：https://ease-ui.com