@reglow/reui

reui

介绍

@reglow/reui 是基于 Vue 3 + TypeScript + Tailwind CSS + reka-ui 构建的全新 Vue 3 组件库，采用 shadcn-vue 的组件组织方式，覆盖后台管理系统常见的 ui 基础组件与 reui 高级业务组件。

• ui 基础组件：Button、Input、Select、Dialog、Toast 等通用原子组件
• reui 高级组件：PageTable、DatePicker、Splitter、MasonryGrid、TreeSelect、Editor、Upload 等 60+ 业务组件
• 国际化：内置 zh-CN / zh-TW / en-US，支持运行时切换与自定义语言包
• 主题引擎：applyTheme 动态注入 CSS 变量，可配置主色、基础中性色、圆角与字体
• Nuxt 模块：自动注册组件并注入样式，开箱即用

软件架构

• components/ui：基础原子组件（基于 reka-ui / shadcn-vue 风格）
• components/reui：高级业务组件（依赖 ui 基础组件）
• i18n：多语言文案与运行时切换
• theme：主题配置与 CSS 变量引擎
• nuxt：Nuxt 模块（组件自动注册 + 样式注入）

环境要求

• Vue >= 3.5
• TypeScript（可选，类型定义完整）

安装教程

npm install @reglow/reui

使用说明

1. 引入样式

// 完整样式（主题 reset + 组件样式）
import "@reglow/reui/style.css";

// 或仅组件样式（宿主项目已有 Tailwind / 主题变量时使用，避免 reset 冲突）
// import "@reglow/reui/components.css";

2. Vue 项目中使用

// main.ts
import { createApp } from "vue";
import Reui, { createReui } from "@reglow/reui";
import "@reglow/reui/style.css";

createApp(App)
  .use(
    createReui({
      locale: "zh-CN", // zh-CN / zh-TW / en-US
      theme: {
        mode: "light",
        baseColor: "zinc",
        primaryColor: "blue",
        radius: "0.5",
      },
      config: { buttonPermissionMode: "hide" }, // 全局配置（可选）
    }),
  )
  .mount("#app");

不传配置时使用默认值：app.use(Reui)。

3. 按需导入组件

<script setup>
import { Button, PageTable } from "@reglow/reui";
</script>

<template>
  <Button>确定</Button>
  <PageTable :columns="columns" :data="data" searchable />
</template>

4. Nuxt 项目中使用

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@reglow/reui/nuxt"],
  reui: {
    locale: "zh-CN", // zh-CN / zh-TW / en-US
    theme: { primaryColor: "blue" }, // 可选，部分 ThemeConfig
    prefix: "", // 可选，组件名前缀（如 "R" -> <RButton>）
    injectStyles: true, // 可选，false 时仅注入 components.css
  },
});

Nuxt 模块会自动注册全部组件（支持 Tree-shaking）并注入样式，模板中直接使用即可。

5. 国际化

import { setLocale, t, useI18n } from "@reglow/reui";

setLocale("en-US");
t("common.search"); // 翻译文本，支持 {param} 插值

6. 主题定制

import { applyTheme, saveTheme } from "@reglow/reui";

applyTheme({
  mode: "dark",
  baseColor: "zinc", // neutral / stone / zinc / mauve / olive / mist / taupe
  primaryColor: "blue", // amber / blue / cyan / emerald / ... 20+ 色
  radius: "0.5", // "0" / "0.3" / "0.5" / "0.75" / "1.0"
  headingFont: "system",
  bodyFont: "system",
});

saveTheme(theme); // 持久化到 localStorage 并立即应用

组件列表

ui 基础组件：AlertDialog、Button、Combobox、Command、Input、Label、NativeSelect、Separator、Skeleton、Spinner、Switch、Table、TagsInput、Textarea、Toggle

reui 高级组件：Affix、Alert、AudioPlayer、AutoComplete、Avatar（AvatarGroup）、BackTop、Badge、BorderBeam、Breadcrumb、Calendar、Card、Carousel、Cascader、Chat、Chart、Checkbox、CodeEditor、Collapse、Collapsible、ConfigProvider、Cropper、DatePicker、Dialog、Divider、Drawer、DropdownMenu、Editor、Empty、Feedback、FloatButton、HoverCard、Icon、ImageViewer、Input、InputPassword、InputSelect、List、MasonryGrid、Modal、Notification、Overlay、PopConfirm、Popover、PricingTable、QRCode、Radio、Rate、Segmented、Select、SlideCaptcha、Spin、Splitter、Steps、Table / PageTable、Tabs、Tag、Textarea、TimePicker、Timeline、Toast、Tooltip、Tour、Transfer、Tree、TreeSelect、Upload、VideoPlayer、Watermark

单个组件的完整文档（用法、API、示例）见各组件目录下的 README.md， 或访问官方文档站点 reglow.huoli.tech/components-library/reui。

AI 能力（MCP / Skills）

ReUI 提供与 Semi Design MCP/Skills 同形态的 AI 能力， 让 AI 助手在编写 ReUI 代码时「有据可查」，不再臆造 props：

• @reglow/reui-mcp（MCP 服务器）：查询组件文档、代码示例、源码文件、函数实现、跨库检索与库级指南， 知识来源默认为项目本地已安装的 @reglow/reui（与项目版本一致），也可按 npm 版本查询或回退官方文档站点。
• Skills 知识包：把 ReUI 的引入方式、主题、国际化、Nuxt 接入、扩展规范与常见陷阱安装到 .trae/skills、.cursor/skills、.claude/skills 等目录，让 AI 按团队规范产出代码。

安装 MCP

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

npx -y -p @reglow/reui-mcp reui-setup --tools trae,codebuddy,qoder

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

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

• 开发组件库或未安装依赖时，可追加 --root <reui 仓库路径>；
• 需要固定知识版本时，可追加 --default-version 0.2.0；--no-site 可完全离线；
• 自检：npx -y @reglow/reui-mcp --check；列出各工具路径：npx -y @reglow/reui-mcp --list-tools。

仅安装 Skills

npx -y -p @reglow/reui-mcp reui-skills --target qoder    # 目标：trae / codebuddy / qoder / cursor / claude / qwen / codex / 自定义目录
npx -y -p @reglow/reui-mcp reui-skills --all             # 安装到全部已知工具目录

工具一览

详见 mcp/README.md。

贡献

欢迎提交 Issue 和 Pull Request。