# review（uniappx小程序组件库）

**Repository Path**: reglow-ai/review

## Basic Information

- **Project Name**: review（uniappx小程序组件库）
- **Description**: 在ai助力下，结合开源社区，实现一套uni-app x组件库，让开发不用再闹心
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-02
- **Last Updated**: 2026-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ReView UniappX Components

基于 uni-app x (uts/uvue) 的移动端组件库，参考 TDesign 设计风格。

## 特性

- **全平台支持**: uni-app x 全平台：H5、App-Android、App-iOS、Harmony、微信小程序
- **uts/uvue 原生**: 使用 uts 强类型语法和 uvue 组件方式开发
- **TDesign 设计**: 参考 TDesign 设计风格，完善的 CSS 变量主题系统
- **124+ 组件**: 涵盖基础、导航、输入、数据展示、反馈、列表与布局、营销、业务、基础模块 9 大分类
- **主题定制**: 基于 CSS 变量的主题系统，支持亮色/暗色模式
- **国际化**: 内置 zh-CN / zh-TW / en-US 语言包，通过 ConfigProvider 全局配置
- **Vapor 支持**: 1.1.0 起 Demo 默认启用 uni-app x Vapor，并提供 `npm run vapor:check` 静态兼容性门禁；原生平台需按报告完成设备回归

## 演示示例

Demo 运行效果（完整 Demo 请用 HBuilderX 运行查看）：

| 演示示例 1                               | 演示示例 2                               | 演示示例 3                               |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| ![演示示例 1](./readme-assets/demo1.jpg) | ![演示示例 2](./readme-assets/demo2.jpg) | ![演示示例 3](./readme-assets/demo3.jpg) |

## 安装

组件通过 **DCloud 插件市场** 或 **uni_modules** 方式安装，不支持 npm 安装。

### 方式一：DCloud 插件市场

在 HBuilderX 中搜索并导入 `reglow-review`，即可安装整个组件库发布包。

### 方式二：手动复制

将 `uni_modules/reglow-review/` 复制到项目中即可；在 `pages.json` 中开启 `easycom.autoscan` 后，组件会自动识别。

## 快速使用

在 `pages.json` 中开启 easycom 自动扫描：

```json
{
  "easycom": {
    "autoscan": true
  }
}
```

`reglow-review` 组件位于 `uni_modules/reglow-review/components/`，开启自动扫描后可直接在模板中使用，无需再单独配置 `easycom.custom`。

然后直接在模板中使用：

```vue
<template>
  <re-config-provider locale="zh-CN">
    <re-button theme="primary" @click="handleClick">按钮</re-button>
    <re-input v-model:value="text" placeholder="请输入" />
    <re-badge :count="5">
      <view>消息</view>
    </re-badge>
  </re-config-provider>
</template>
```

## 运行项目

> **重要**：uni-app x 项目不支持 npm CLI 方式开发，所有编译运行均通过 HBuilderX 内置编译器完成。

1. 用 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 3.99+ 打开本项目目录
2. 点击工具栏「运行」选择目标平台：
   - **运行到浏览器**：H5 平台
   - **运行到手机或模拟器**：Android / iOS App
   - **运行到小程序模拟器**：微信小程序
3. 点击「发行」进行打包

## 脚本命令

npm 仅用于文档站点和自动化测试，不用于项目编译运行。

### 文档站

| 命令                      | 说明                                       |
| ------------------------- | ------------------------------------------ |
| `npm run docs:dev`        | 启动 VitePress 文档开发服务器（端口 3001） |
| `npm run docs:build`      | 构建文档静态站点                           |
| `npm run docs:preview`    | 预览构建后的文档站点                       |
| `npm run build:docs`      | 生成组件文档页面                           |
| `npm run build:readme`    | 自动生成组件 README 文档                   |
| `npm run build:changelog` | 收集所有组件 changelog                     |

### 自动化测试

| 命令                       | 说明                                 |
| -------------------------- | ------------------------------------ |
| `npm run test`             | 运行 H5 自动化测试                   |
| `npm run test:h5`          | 运行 H5 自动化测试                   |
| `npm run test:mp-weixin`   | 运行微信小程序自动化测试             |
| `npm run test:app-android` | 运行 Android 自动化测试              |
| `npm run test:app-ios`     | 运行 iOS 自动化测试                  |
| `npm run coverage`         | 运行测试并生成覆盖率报告（阈值 90%） |

## 项目结构

```
reglow-review/
├── uni_modules/
│   ├── reglow-review/        # 插件市场实际发布目录
│   │   ├── components/       # 整套组件源码
│   │   ├── utssdk/           # 公共 UTS 能力与语言包
│   │   ├── package.json      # 插件配置
│   │   ├── readme.md
│   │   └── changelog.md
│   ├── re-common/            # 历史拆分目录，供本地维护参考
│   ├── re-theme/
│   ├── re-config-provider/
│   ├── re-button/
│   └── ...
├── pages/                    # Demo 演示页面
├── components/               # 自定义 uvue 组件目录
├── static/                   # 静态资源目录
├── docs/                     # VitePress 文档站点
├── mcp/                      # MCP 服务器与 Skills 知识包（@reglow/review-mcp）
├── scripts/                  # 文档生成工具脚本
│   ├── generate-readme.js    # README 生成
│   ├── generate-docs.js      # 文档页面生成
│   ├── generate-changelog.js # 变更日志生成
│   ├── generate-re-icon-svg-map.js # 图标 SVG 映射生成
│   └── fix-css-colors.js     # CSS 颜色变量修复
├── App.uvue                  # 应用入口组件
├── main.uts                  # 入口文件
├── manifest.json             # 项目配置文件
├── pages.json                # 页面管理配置
├── uni.scss                  # 全局 SCSS 变量
├── env.d.ts                  # 环境类型声明
├── index.html                # Web 平台入口 HTML
└── package.json              # npm 配置（仅文档和测试）
```

## 组件清单

### 基础模块（3个）

| 组件               | 说明                            |
| ------------------ | ------------------------------- |
| re-common          | 公共工具函数和类型定义          |
| re-theme           | CSS变量主题系统（亮色/暗色）    |
| re-config-provider | 全局配置（主题+国际化+z-index） |

### 基础（8个）

| 组件          | 说明     |
| ------------- | -------- |
| re-button     | 按钮     |
| re-divider    | 分割线   |
| re-fab        | 悬浮按钮 |
| re-icon       | 图标     |
| re-row        | 布局行   |
| re-col        | 布局列   |
| re-link       | 链接     |
| re-typography | 排版     |

### 导航（9个）

| 组件          | 说明                              |
| ------------- | --------------------------------- |
| re-back-top   | 返回顶部                          |
| re-indexes    | 索引                              |
| re-navbar     | 导航条                            |
| re-side-bar   | 侧边导航栏（含 re-side-bar-item） |
| re-steps      | 步骤条（含 re-step-item）         |
| re-tab-bar    | 标签栏（含 re-tab-bar-item）      |
| re-tabs       | 选项卡（含 re-tab-panel）         |
| re-fixed-nav  | 悬浮导航                          |
| re-pagination | 分页                              |

### 输入（26个）

| 组件                | 说明                                            |
| ------------------- | ----------------------------------------------- |
| re-calendar         | 日历                                            |
| re-cascader         | 级联选择器（含 re-cascader-item）               |
| re-checkbox         | 多选框（含 re-checkbox-group）                  |
| re-color-picker     | 颜色选择器                                      |
| re-date-time-picker | 日期时间选择器                                  |
| re-form             | 表单（含 re-form-item）                         |
| re-input            | 输入框                                          |
| re-picker           | 选择器                                          |
| re-radio            | 单选框（含 re-radio-group）                     |
| re-rate             | 评分                                            |
| re-search           | 搜索框                                          |
| re-slide-captcha    | 滑块验证码                                      |
| re-slider           | 滑动选择器                                      |
| re-stepper          | 步进器                                          |
| re-switch           | 开关                                            |
| re-textarea         | 多行文本框                                      |
| re-tree-select      | 树形选择                                        |
| re-upload           | 上传                                            |
| re-code-input       | 验证码输入                                      |
| re-number-keyboard  | 数字键盘                                        |
| re-short-password   | 短密码输入                                      |
| re-signature        | 签名                                            |
| re-address          | 地址选择                                        |
| re-time-picker      | 时间选择器                                      |
| re-time-select      | 时间段选择（含 re-time-pannel、re-time-detail） |
| re-invoice          | 发票                                            |

### 数据展示（29个）

| 组件               | 说明                             |
| ------------------ | -------------------------------- |
| re-avatar          | 头像（含 re-avatar-group）       |
| re-badge           | 徽章                             |
| re-cell            | 单元格（含 re-cell-group）       |
| re-collapse        | 折叠面板（含 re-collapse-panel） |
| re-count-down      | 倒计时                           |
| re-empty           | 空状态                           |
| re-footer          | 页脚                             |
| re-grid            | 宫格（含 re-grid-item）          |
| re-image           | 图片                             |
| re-image-viewer    | 图片预览                         |
| re-progress        | 进度条                           |
| re-qrcode          | 二维码                           |
| re-result          | 结果                             |
| re-segmented       | 分段控制器                       |
| re-skeleton        | 骨架屏                           |
| re-sticky          | 吸顶                             |
| re-swiper          | 轮播                             |
| re-table           | 表格                             |
| re-tag             | 标签（含 re-check-tag）          |
| re-watermark       | 水印                             |
| re-card            | 商品卡片                         |
| re-circle-progress | 环形进度条                       |
| re-comment         | 商品评论                         |
| re-count-up        | 数字滚动                         |
| re-price           | 价格展示                         |
| re-trend-arrow     | 趋势箭头                         |
| re-barrage         | 弹幕                             |
| re-video           | 视频播放器                       |
| re-avatar-cropper  | 头像裁剪                         |

### 反馈（15个）

| 组件                 | 说明                            |
| -------------------- | ------------------------------- |
| re-action-sheet      | 动作面板                        |
| re-drawer            | 抽屉                            |
| re-dialog            | 对话框                          |
| re-dropdown-menu     | 下拉菜单（含 re-dropdown-item） |
| re-guide             | 引导                            |
| re-loading           | 加载                            |
| re-message           | 消息通知（含 re-message-item）  |
| re-notice-bar        | 公告栏                          |
| re-overlay           | 遮罩层                          |
| re-popover           | 气泡弹出框                      |
| re-popup             | 弹出层                          |
| re-pull-down-refresh | 下拉刷新                        |
| re-swipe-cell        | 滑动单元格                      |
| re-toast             | 轻提示                          |
| re-loading-page      | 全屏加载页                      |

### 列表与布局（8个）

| 组件                | 说明       |
| ------------------- | ---------- |
| re-infinite-loading | 无限加载   |
| re-list             | 虚拟列表   |
| re-indicator        | 轮播指示器 |
| re-animate          | 动画       |
| re-transition       | 过渡动画   |
| re-drag             | 拖拽       |
| re-safe-area        | 安全区域   |
| re-address-list     | 地址列表   |

### 营销（11个）

| 组件            | 说明       |
| --------------- | ---------- |
| re-square-nine  | 九宫格     |
| re-scratch-card | 刮刮卡     |
| re-gift-box     | 礼物盒     |
| re-lotto-roll   | 摇奖机     |
| re-guess-gift   | 猜礼物     |
| re-hit-eggs     | 砸金蛋     |
| re-gift-rain    | 红包雨     |
| re-luck-shake   | 摇一摇     |
| re-marquee      | 跑马灯抽奖 |
| re-shake-dice   | 摇骰子     |
| re-turntable    | 大转盘     |

### 业务（15个）

| 组件                  | 说明         |
| --------------------- | ------------ |
| re-ecard              | 电子卡券     |
| re-sku                | 商品规格选择 |
| re-submit-bar         | 提交订单栏   |
| re-coupon             | 优惠券选择器 |
| re-share-sheet        | 分享面板     |
| re-floating-panel     | 浮动面板     |
| re-cart-bar           | 购物车栏     |
| re-goods-filter       | 商品筛选     |
| re-quick-enter        | 快捷入口     |
| re-search-history     | 搜索历史     |
| re-product-feed       | 商品 Feed 流 |
| re-order-cancel-panel | 订单取消面板 |
| re-order-remark       | 订单备注     |
| re-login              | 登录         |
| re-chat               | 智能对话     |

## AI 能力（MCP / Skills）

ReView 提供与同仓库 [reui](../reui/README.md) 同形态的 AI 能力，让 AI 助手在编写 `re-*` 组件代码时「有据可查」，不再臆造 props：

- **`@reglow/review-mcp`（MCP 服务器）**：查询组件文档、代码示例、源码文件、函数实现与跨库检索，
  知识来源默认为本地仓库或项目内已安装的 `uni_modules/reglow-review`，本地缺文档时回退官方文档站点。
- **Skills 知识包**：把 uni_modules 安装、easycom、平台差异、主题、i18n 与常见陷阱安装到
  `.trae/skills`、`.cursor/skills`、`.claude/skills` 等目录，让 AI 按团队规范产出代码。

### 安装 MCP

推荐用一键命令同时写 MCP 配置并安装 Skills（默认针对 **Trae / CodeBuddy / Qoder**）：

```bash
npx -y -p @reglow/review-mcp review-setup --tools trae,codebuddy,qoder
```

其它客户端（Cursor / Claude Desktop 等）手动加入 `mcpServers` 即可：

```json
{
  "mcpServers": {
    "review-mcp": { "command": "npx", "args": ["-y", "@reglow/review-mcp"] }
  }
}
```

- 在组件库仓库内开发时可追加 `--root <review 仓库路径>`；
- 自检：`npx -y @reglow/review-mcp --check`；列出各工具路径：`npx -y @reglow/review-mcp --list-tools`。

详见 [mcp/README.md](./mcp/README.md)。

## 贡献

欢迎提交 Issue 和 Pull Request。