taro-uno-ui

Taro Uno

Taro Uno 是一个基于 Taro 框架的跨平台组件库，提供丰富的 UI 组件和表单控件，支持微信小程序、H5、React Native 等多端开发。

✨ v1.0.2 新特性

🧩 通用组件

• ErrorBoundary - 错误边界组件，优雅处理组件错误
• LazyComponent - 懒加载组件，支持代码分割和加载状态
• VirtualList - 虚拟列表组件，高效渲染大量数据

📐 布局组件

• ResponsiveContainer - 响应式容器组件
• ResponsiveGrid - 响应式栅格组件

🎣 Hooks 扩展

• useDeepCompareEffect - 深度比较的 useEffect
• usePerformance - 性能监控 Hook
• useVirtualScroll - 虚拟滚动 Hook
• useMediaQuery - 媒体查询 Hook

📚 文档更新

• 全新的文档视觉系统，采用渐变蓝紫色配色方案
• 重新设计的侧边栏导航结构
• 新增 API 参考文档

详见 CHANGELOG.md

特性

• 跨平台兼容：支持微信小程序、H5、React Native 等多端环境
• 丰富组件：提供完整的 UI 组件和表单控件
• TypeScript 支持：完整的类型定义，提供良好的开发体验
• 主题定制：支持自定义主题和样式变量
• 易于扩展：组件设计遵循可组合、可扩展原则
• 完善文档：详细的使用文档和示例

安装

# 使用 npm
npm install taro-uno-ui

# 使用 yarn
yarn add taro-uno-ui

# 使用 pnpm
pnpm add taro-uno-ui

快速开始

引入样式

在项目入口文件中引入全局样式：

// app.tsx 或 app.jsx
import 'taro-uno-ui/dist/style.css';

引入组件

import React from 'react';
import { View } from '@tarojs/components';
import { Button, Input } from 'taro-uno-ui';

const App = () => {
  return (
    <View>
      <Input placeholder="请输入内容" />
      <Button type="primary">点击我</Button>
    </View>
  );
};

export default App;

组件分类

基础组件 (Basic)

• Button - 按钮
• Icon - 图标
• Text - 文本
• Divider - 分割线
• Typography - 排版

表单组件 (Form)

• Form - 表单
• Input - 输入框
• Textarea - 多行文本输入
• InputNumber - 数字输入
• Select - 选择器
• Cascader - 级联选择器
• AutoComplete - 自动完成
• DatePicker - 日期选择器
• TimePicker - 时间选择器
• Checkbox - 复选框
• Radio - 单选框
• Switch - 开关
• Slider - 滑块
• Upload - 上传
• Transfer - 穿梭框

展示组件 (Display)

• Avatar - 头像
• Badge - 徽标
• Tag - 标签
• Card - 卡片
• List - 列表
• Table - 表格
• Calendar - 日历
• Timeline - 时间轴
• Carousel - 轮播
• Rate - 评分
• RichText - 富文本

反馈组件 (Feedback)

• Loading - 加载
• Progress - 进度条
• Message - 消息提示
• Toast - 轻提示
• Notification - 通知提醒
• Modal - 对话框
• Drawer - 抽屉
• Popconfirm - 气泡确认
• Tooltip - 文字提示
• Result - 结果

布局组件 (Layout)

• Grid - 栅格
• Row - 行
• Col - 列
• Layout - 布局
• Container - 容器
• Space - 间距
• Affix - 固钉
• ResponsiveContainer - 响应容器
• ResponsiveGrid - 响应栅格

导航组件 (Navigation)

• Menu - 菜单
• NavBar - 导航栏
• PageHeader - 页头
• Tabs - 标签页
• Steps - 步骤条
• Pagination - 分页

通用组件 (Common)

• ErrorBoundary - 错误边界
• LazyComponent - 懒加载
• VirtualList - 虚拟列表

文档

组件文档

每个组件都配有详细的中文文档，包含：

• 功能介绍
• 基本用法
• API 参数说明
• 事件说明
• 使用示例

文档结构

组件文档位于 docs/components/ 目录下，按组件类型分类：

• docs/components/basic/ - 基础组件文档
• docs/components/form/ - 表单组件文档
• docs/components/layout/ - 布局组件文档
• docs/components/display/ - 显示组件文档
• docs/components/feedback/ - 反馈组件文档
• docs/components/navigation/ - 导航组件文档

示例代码

每个组件的文档目录中包含 examples 文件夹，提供可运行的示例代码，方便开发者快速了解组件的使用方法。

文档生成

我们提供了自动化的文档生成工具：

# 生成所有文档
node scripts/generate-docs.js all

# 生成组件文档
node scripts/generate-docs.js components

# 生成 API 文档
node scripts/generate-docs.js api

# 生成类型文档
node scripts/generate-docs.js types

文档验证

使用文档验证工具确保文档质量：

# 验证文档
node scripts/validate-docs.js

# 更新文档
node scripts/update-docs.js --commit

文档部署

文档自动化部署到 GitHub Pages：

• 每次代码提交自动构建和部署
• 支持多环境部署
• 自动生成文档统计和报告

API 文档

项目使用 TypeDoc 自动生成 API 文档：

# 生成 API 文档
npm run docs:generate

# 监听模式（文件变化自动重新生成）
npm run docs:watch

生成的文档位于 docs/api/ 目录，包含：

• 完整的类型定义
• 组件 Props 接口
• 工具函数文档
• 类型别名和枚举

本地开发

# 启动文档开发服务器
cd docs
pnpm install
pnpm dev

# 构建文档
pnpm build

开发指南

开发环境设置

• 克隆仓库

git clone https://github.com/agions/taro-uno.git
cd taro-uno

• 安装依赖

pnpm install

• 启动开发服务器

# H5
pnpm dev:h5

# 微信小程序
pnpm dev:weapp

构建

# 构建 H5
pnpm build:h5

# 构建微信小程序
pnpm build:weapp

# 构建所有平台
pnpm build:all

测试

# 运行单元测试
pnpm test

# 运行 ESLint 检查
pnpm lint

🤝 贡献指南

我们欢迎所有形式的贡献！请阅读 贡献指南 了解详情。

开发流程

• Fork 本仓库
• 创建特性分支 (git checkout -b feature/AmazingFeature)
• 提交更改 (git commit -m 'Add some AmazingFeature')
• 推送到分支 (git push origin feature/AmazingFeature)
• 创建 Pull Request

代码规范

• 使用 TypeScript 编写代码
• 遵循 ESLint 和 Prettier 规范
• 编写完整的单元测试
• 添加详细的 JSDoc 注释
• 遵循 Git 提交规范

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

更新日志

详细的更新日志请查看 CHANGELOG.md

联系我们

• GitHub: https://github.com/agions/taro-uno
• Issues: https://github.com/agions/taro-uno/issues