Top

🚀 SmartUI：让涂鸦小程序开发更简单、更高效

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
xiaoqi
Posts: 86

一个轻量、可靠、功能丰富的智能小程序 UI 组件库，助力开发者快速构建精美的涂鸦小程序应用

📦 关于 Smart UI

官网链接

@ray-js/smart-ui 是专为涂鸦智能小程序 Ray开发打造的 UI 组件库，基于成熟的 vant-weapp 架构实现，提供了一整套符合涂鸦小程序移动端设计规范的 UI 组件。无论你是开发智能家居控制面板、设备管理界面，还是构建复杂的业务场景，Smart UI 都能为你提供开箱即用的解决方案。

Image Image Image

✨ 核心特性

🎯 60+ 高质量组件

涵盖表单、导航、反馈、展示、业务等各个场景，满足小程序开发的方方面面：

  • 表单组件：Button、Field、Switch、Checkbox、Radio、Stepper、Rate、Slider 等
  • 导航组件：NavBar、Tabbar、Tabs、IndexBar、Sidebar 等
  • 反馈组件：Toast、Dialog、Notify、Loading、ActionSheet 等
  • 展示组件：Cell、Image、Tag、Empty、Skeleton、Progress、Circle 等
  • 业务组件：Calendar、Picker、DateTimePicker、Cascader、TreeSelect 等

🎨 设计规范统一

所有组件严格遵循涂鸦小程序移动端设计规范，确保应用界面的一致性和专业性。

⚡ 轻量高效

  • 按需引入，减少包体积
  • 性能优化，流畅体验
  • 支持 SJS 计算，提升渲染性能

🔧 开发体验友好

  • TypeScript 支持：完整的类型定义，智能提示
  • Less 样式：灵活的样式定制能力
  • 完整文档：中英文文档齐全，示例丰富
  • 测试覆盖：Jest 测试框架，保证代码质量

✅ 测试覆盖率

经过持续完善的测试用例补充，Smart UI 现已达到98.21% 的测试覆盖率，确保组件库的稳定性和可靠性：

  • 语句覆盖率：98.21%
  • 分支覆盖率：91.88%
  • 函数覆盖率：96.24%
  • 行覆盖率：98.37%

所有组件都经过严格的单元测试，覆盖各种使用场景和边界情况。

🌈 主题定制

  • 支持 CSS 变量定制主题
  • ConfigProvider 组件一键切换主题
  • 支持深/浅色模式

🚀 快速开始

安装

Code: Select all

# 通过 yarn 安装（推荐）
yarn add @ray-js/smart-ui

# 通过 npm 安装
npm i @ray-js/smart-ui

使用组件

Code: Select all

import { Button } from '@ray-js/smart-ui';

export default function Demo() {
  return <Button type="info">信息按钮</Button>;
}

就是这么简单！🎉

📖 完整示例

内置主题

内置 深/浅色主题跟随 APP 主题自动切换，也可以根据需求设置
resized-image-250x544 (1).jpg
resized-image-250x544.jpg

导航组件
06e5eb5c658fd5973c6ed0e06f98c7ca.gif
resized-image-250x307.png
3f5a09c2b91ed3e331e914696683e147.gif
e22f1ad9505ada778a621c82ecc33548.gif
719355dcb199052095feb185b0dfeef2.gif

3D 滚动选择器

真实3D滚动效果，类似 IOS 原生，且支持无限滚动的Picker，DateTimePicker
0faf0547c2cc12e271f31f3499578ef6.gif
c84f4dad51b926b49ceee4b06e660f56.gif

表单组件

Calender日历、Cascader 级联、CheckBox复选框、Field输入框、Radio单选框、Rate评分、Search搜索、Slider滑块、Stepper记步器、Switch开关...
53dd3eba5da0f9625e7281b733ca3093.gif
8ac3a67652b0488e9b20dd61dc83babe.gif
db9b9b7bba77219a772388a85dc019f0.gif
075763875cfbf77c5db021cee6706531.gif
bff7cee9b3c035ed68c88670d3a56199.gif
13cf578e10c5f153211ec2c9709281aa.gif

多种弹框

内部包含基础弹框选择器弹框ActionSheet、交互弹框Dialog、Popover 气泡、轻提示弹框Toast、Popup（可任意方向出现）、底部可拖拽弹框BottomSheet，涵盖所有交互形式，方便开发。
5fcd8df16c74836745f6bcf356f1ade9.gif
d603395c555fabd69e0411c9a194e8b2.gif
5b54766b904d21316ddc4db92a9a9e04.gif
37e3d88e0aea661c9ed4498465c21db4.gif
fcf062608ebe3bd9fa2e54ba3429f474.gif
b68979ca99147d6cfb365e3d7cf86931.gif

🎯 适用场景

智能家居控制

  • 电工（插座、排插、开关）
  • 照明（光源、灯带、氛围灯、吸顶灯、灯串、感应灯...）
  • 大家电
  • 门锁
  • 节能
  • 户外
  • ...

超100+个涂鸦公版接入SmartUI
宠物猫砂、食物秤、充电桩...
resized-image-250x542 (1).png
resized-image-250x545.png
resized-image-250x542.png

设备管理

  • 设备列表展示（Cell、CellGroup）
  • 设备搜索（Search）
  • 设备分组（IndexBar、Sidebar）

数据可视化

  • 进度展示（Progress、Circle）
  • 图表展示（支持自定义）
  • 状态指示（Tag、Badge）

用户交互

  • 表单填写（Field、Checkbox、Radio）
  • 日期选择（Calendar、DateTimePicker）
  • 操作确认（Dialog、ActionSheet）

💡 为什么选择 Smart UI？

✅ 成熟稳定

  • 基于 vant-weapp 成熟架构
  • 经过大量项目验证
  • 持续更新维护（一月两次）

✅ 开发效率

  • 开箱即用，减少重复开发
  • 统一的设计规范
  • 丰富的组件和示例

✅ 代码质量

  • TypeScript 类型安全
  • 98.21% 测试覆盖率：经过完善的测试用例补充，确保组件稳定可靠
  • 规范的代码风格

✅ 社区支持

  • 开源 MIT 协议
  • 活跃的社区论坛
  • 完善的文档和示例

✅ 性能优化

  • 按需加载
  • SJS 性能优化
  • 体积控制

📚 学习资源

🔍 预览体验

扫描下方二维码，在涂鸦小程序中体验完整的组件库示例：

Image

🛠️ 本地开发

想要深入了解或参与贡献？可以本地运行示例：

Code: Select all

# 克隆仓库
git clone https://github.com/Tuya-Community/ray-smart-ui

# 安装依赖
yarn install

# 启动开发
yarn dev

# 运行测试
yarn test

# 查看测试覆盖率
yarn test:cover

然后在 Tuya MiniApp Tools 中打开 example 目录即可预览。

🤝 参与贡献

我们欢迎所有形式的贡献！无论是：

  • 🐛 报告 Bug
  • 💡 提出新功能建议
  • 📝 改进文档
  • 🔧 提交代码

请查看 贡献指南 了解详情。

📄 开源协议

本项目基于 MIT 协议开源，请自由地享受和参与开源。

✅ 开发计划

PLANS 内部会标注下个版本迭代的开发计划以及相应的测试包版本

🌟 开始使用

还在等什么？立即开始使用 @ray-js/smart-ui，让小程序开发变得更简单！

Code: Select all

yarn add @ray-js/smart-ui

让开发更简单，让体验更美好 ✨

如有任何问题或建议，欢迎在 小程序开发论坛 中提出。

Github Wiki 版本 链接地址

Post Reply