eric-leo.github.io

个人博客：

• Blog: https://eric-leo.github.io/blog/

Helper UI 技术体系介绍（基于Vue 3）

Helper UI 是一套基于工作流的技术体系，它分为：

• Helper UI基础组件库
• Helper UI扩展组件库
• Helper Pro页面模板
• Helper UI样式库
• Helper SVG Icons
• Helper Hooks
• Helper Play
• UIKIT

Helper UI 的特色功能包含：

• 灵活可控的主题配置系统
• CSS样式生成系统
• 快速便捷的页面布局组件
• 前端页面模版库
• 为设计师提供的Sketch版原子级UI组件库

Helper UI基础组件库是基于Vue3的前端UI组件库，它当前拥有：

文档地址： https://eric-leo.github.io/helper-ui/

安装方式：
npm install helper-ui
或
yarn add helper-ui
或
pnpm add helper-ui

• 50+个常用基础组件
• 1套亮色模式主题
• 1套暗色模式主题

HelperUI Pro页面模板是基于helper 前端组件库生成的一套开箱即用的B端后台类页面模版库，它当前拥有：

文档地址：https://eric-leo.github.io/helper-pro/

• 40+个通用页面模版
• 可快速改变页面整体布局样式
• 可通过配置文件更换主题风格（通过helper UI主题库实现）
• 等特点，并且在日常工作和业务支撑的过程中不断地更新和完善。

Helper UI扩展组件库是基于helper 前端组件库进行二次封装的组件库，它当前拥有：

文档地址：https://eric-leo.github.io/helper-business-ui/

安装方式：
npm install helper-business-ui
或
yarn add helper-business-ui
或
pnpm add helper-business-ui

• 树形穿梭框
• 树形选择器
• 数据过滤器
• 表格工具栏
• 可拖动式对话框
• 窗口停靠容器
• ……等15+个常用扩展组件

Helper UI扩展组件库是基于helper 前端组件库helper-ui和helper-business-ui进行二次封装的组件库，它当前拥有：

文档地址：https://eric-leo.github.io/hl-front-framework/

安装方式：
npm install hl-front-framework
或
yarn add hl-front-framework
或
pnpm add hl-front-framework

• 操作按钮
• 常用图片、文件上传和查看
• 数据过滤器
• 带过滤、分页、tab、搜索条件的表格
• 适配不同大屏的chart图
• ……等10+个常用扩展组件

Helper UI主题库包含基于SCSS/CSS实现的各个产线UI规范，它当前拥有：

文档地址：https://www.npmjs.com/package/@helper-ui/styles

安装方式：
npm install @helper-ui/styles
或
yarn add @helper-ui/styles
或
pnpm add @helper-ui/styles

• uk2（规范，Pro模板样式）
• uk2a（规范，Pro模板样式）
• ioc（数字规范，Pro模板样式）
• cecloud（云规范，Pro模板样式）
• fx（fx规范，Pro模板样式）
• visualized（大屏规范，Pro模板样式）

Helper SVG Icons包含300+个SVG图标，提供twotone，fill，file三个系列：

文档地址：https://eric-leo.github.io/helper-icons/

安装方式：
npm install @helper-ui/icons
或
yarn add @helper-ui/icons
或
pnpm add @helper-ui/icons

Helper Play：直接线上运行代码，分享URL即分享代码

文档地址：https://eric-leo.github.io/helper-playground/

Helper 主题编辑器：在线生成自定义主题

文档地址：https://eric-leo.github.io/helper-theme-editor/

• 目前仅支持:root下变量可视化编辑
• 支持亮色，暗色，浅蓝色，云 四种主题

前端工具库：项目里常用的函数，TS类型等提炼至 此项目里

文档地址：https://eric-leo.github.io/hl-front-utils/

Helper Hooks包含通用业务的Hooks实现，目前还比较简单：

文档地址：https://eric-leo.github.io/helper-hooks

安装方式：
npm install helper-hooks
或
yarn add helper-hooks
或
pnpm add helper-hooks