Sunlight UI

主题

Sunlight-creator2026-01-27
1778
6.7m

介绍 ​

关于 Sunlight-ui ​

本项目是个人爱好者基于 Vue3、TypeScript、Vite、ElementPlus 构建的 UI 组件库，专为中后台管理系统开发打造。它提供了丰富的高质量组件、实用的指令和工具函数，帮助开发者快速构建美观、高效、可维护的前端应用。

Sunlight-ui 采用 Vue3 Composition API 设计模式，结合 TypeScript 强类型系统，确保代码质量和开发效率。通过 Vite 构建工具，项目拥有极快的冷启动和热更新速度，显著提升开发体验。

此外，Sunlight-ui 基于 ElementPlus UI 组件库进行二次封装和扩展，继承了其成熟的设计理念和丰富的组件体系，并提供了更多实用的高级功能。

核心特性 ​

现代化技术栈 ​

采用 Vue3、TypeScript、Vite、ElementPlus 等最新技术栈开发，保证项目的技术先进性和稳定性。

丰富的组件系统 ​

提供丰富的实用组件，包括表格、输入框、表单、选择器等核心组件，满足各种业务场景需求。

组件增强功能 ​

在 ElementPlus 基础上进行增强，如表格支持列配置、隐藏列、分页、排序等高级功能，输入框支持丰富的事件监听和表单验证。

类型安全 ​

完整的 TypeScript 类型定义，提供良好的开发体验和代码提示。

响应式设计 ​

组件适配各种屏幕尺寸，提供良好的移动端体验。

易于使用 ​

组件 API 设计简洁明了，文档完善，上手成本低。

高度可定制 ​

支持组件属性自定义，样式主题定制，满足不同业务场景需求。

性能优化 ​

组件经过性能优化，确保在大型应用中高效运行。

完善的文档 ​

提供详细的组件文档、示例代码和使用指南。

组件介绍 ​

Sunlight-ui 提供了一系列精心封装的高质量组件，以下是部分核心组件：

基础组件 ​

SunlightTable ​

功能强大的表格组件，支持列配置、隐藏列、分页、排序、筛选等功能。通过简单的配置即可实现复杂的表格需求，提高开发效率。

SunlightInput ​

增强型输入框组件，支持事件监听（input、change、focus、blur、clear、keydown 等）、表单验证、字数统计等功能。

SunlightForm ​

灵活的表单组件，支持表单验证、动态表单、表单布局等功能，简化表单开发流程。

SunlightSelect ​

下拉选择器组件，支持远程搜索、多选、标签等功能，满足各种选择需求。

SunlightDatePicker ​

日期选择器组件，支持多种日期格式、范围选择、快捷选择等功能。

SunlightCheckbox ​

复选框组件，支持单选、多选、全选等功能，提供灵活的选择体验。

SunlightRadio ​

单选框组件，支持自定义样式和布局，满足不同的选择场景。

SunlightTextarea ​

文本域组件，支持字数统计、输入限制、自动高度等功能。

SunlightImages ​

图片展示组件，支持图片预览、放大、旋转等功能。

SunlightCascader ​

级联选择器组件，支持多级联动选择，适用于地区选择、分类选择等场景。

SunlightImage ​

单张图片上传组件，支持图片上传、预览、删除等功能。

SunlightThree ​

三级联动组件，支持省市区三级联动选择。

SunlightDialog ​

对话框组件，支持自定义内容、大小、位置等功能。

SunlightDrawer ​

抽屉组件，支持从不同方向滑出，展示详细信息。

卡片组件 ​

SunlightBasicCard ​

基础卡片组件，提供简单的卡片布局。

SunlightProgressCard ​

进度卡片组件，展示带进度条的数据统计信息。

SunlightListCard ​

列表卡片组件，展示带列表的数据统计信息。

SunlightBarChartCard ​

柱状图卡片组件，展示带柱状图的数据统计信息。

SunlightDonutChartCard ​

环形图卡片组件，展示带环形图的数据统计信息。

SunlightLineChartCard ​

折线图卡片组件，展示带折线图的数据统计信息。

SunlightLargeBarChartCard ​

大型柱状图卡片组件，展示更详细的柱状图数据。

SunlightLargeDonutChartCard ​

大型环形图卡片组件，展示更详细的环形图数据。

SunlightLargeLineChartCard ​

大型折线图卡片组件，展示更详细的折线图数据。

统计图表组件 ​

SunlightBarChart ​

柱状图组件，支持单系列和多系列数据展示。

SunlightStackedChart ​

双向堆叠柱状图组件，支持正向和负向数据对比。

SunlightLevelChart ​

水平柱状图组件，支持横向数据展示。

SunlightPolylineChart ​

折线图组件，支持单系列和多系列数据展示。

SunlightRadarChart ​

雷达图组件，支持多维度数据对比。

SunlightScatterChart ​

散点图组件，支持二维数据分布展示。

SunlightKLineChart ​

K线图组件，支持股票等金融数据展示。

指令介绍 ​

Sunlight-ui 提供了一些实用的自定义指令，用于增强 DOM 元素的功能：

v-sun-click-outside ​

点击外部区域触发事件的指令，适用于下拉菜单、弹窗等组件的关闭功能。

v-sun-copy ​

一键复制文本的指令，简化复制功能的实现。

v-sun-long-press ​

长按事件指令，支持自定义长按时间，适用于需要长按触发的功能。

v-sun-draggable ​

元素拖拽指令，支持拖拽排序、拖拽移动等功能。

工具函数 ​

Sunlight-ui 提供了一系列实用的工具函数，用于简化开发工作：

表单验证工具 ​

提供常用的表单验证规则和验证函数，如手机号、邮箱、身份证号等验证。

日期处理工具 ​

提供日期格式化、日期计算、日期比较等功能，简化日期处理逻辑。

字符串处理工具 ​

提供字符串格式化、截取、转换等功能，满足各种字符串处理需求。

数组处理工具 ​

提供数组去重、排序、筛选、合并等功能，简化数组操作。

数字处理工具 ​

提供数字格式化、千分位显示、精度控制等功能。

适用场景 ​

Sunlight-ui 适用于各类中后台管理系统开发，包括但不限于：

  • 管理系统
  • 运营后台
  • ...

浏览器支持 ​

本地开发推荐使用 Chrome 最新版浏览器，不支持 Chrome 80 以下版本。

生产环境支持现代浏览器，不支持 IE。

IEIE EdgeEdgeFirefoxFirefoxChromeChromeSafariSafari
不支持last 2 versionslast 2 versionslast 2 versionslast 2 versions