概述

Raaghu 组件

先进、功能丰富的 UI 组件，用于复杂功能实现。基于元素构建，创建完整的解决方案。

使用组件的两种方式

方式一：从源代码/Storybook

克隆仓库：

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

使用方法：

// 从本地源代码导入
import RdsCompChart from '../raaghu-react/src/rds-comp-chart';
import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';
import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';

function Dashboard() {
  return (
    <div>
      <RdsCompChart type="bar" data={chartData} />
      <RdsCompGrid data={userData} columns={columns} />
    </div>
  );
}

方式二：NPM 包（推荐）

安装：

## 安装主包
npm install @waiin/raaghu-react

## 安装主题包
npm install @waiin/raaghu-react-themes

设置主题：

import '@waiin/raaghu-react-themes/build/styles/default.css';

使用方法：

import { RdsCompChart, RdsCompGrid, RdsCompDatepicker } from '@waiin/raaghu-react';

function Dashboard() {
  return (
    <div>
      <RdsCompChart type="bar" data={chartData} />
      <RdsCompGrid data={userData} columns={columns} />
    </div>
  );
}

最受欢迎的组件

图表组件

让数据可视化变得简单：

使用 NPM 包：

import { RdsCompChart } from '@waiin/raaghu-react';

<RdsCompChart
  type="bar"
  data={{
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{ data: [100, 150, 200, 180] }]
  }}
  height={300}
/>

使用源代码：

import RdsCompChart from '../raaghu-react/src/rds-comp-chart';

<RdsCompChart
  type="bar"
  data={{
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{ data: [100, 150, 200, 180] }]
  }}
  height={300}
/>

可用类型：bar、line、pie、doughnut、area、gauge

数据表格

功能强大的表格，支持排序、筛选、分页：

使用 NPM 包：

import { RdsCompGrid } from '@waiin/raaghu-react';

<RdsCompGrid
  data={userData}
  columns={[
    { field: 'name', header: '姓名', sortable: true },
    { field: 'email', header: '邮箱', filterable: true },
    { field: 'role', header: '角色' }
  ]}
  pagination={true}
  pageSize={10}
/>

使用源代码：

import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';

<RdsCompGrid
  data={userData}
  columns={[
    { field: 'name', header: '姓名', sortable: true },
    { field: 'email', header: '邮箱', filterable: true },
    { field: 'role', header: '角色' }
  ]}
  pagination={true}
  pageSize={10}
/>

日期时间选择器

增强的日期/时间选择：

使用 NPM 包：

import { RdsCompDatepicker, RdsCompTimePicker } from '@waiin/raaghu-react';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

使用源代码：

import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';
import RdsCompTimePicker from '../raaghu-react/src/rds-comp-time-picker';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

AI 聊天界面

现代聊天组件：

使用 NPM 包：

import { RdsCompAiChatBot } from '@waiin/raaghu-react';

<RdsCompAiChatBot
  title="客户支持"
  placeholder="输入您的消息..."
  onSend={handleMessage}
  showTyping={true}
/>

使用源代码：

import RdsCompAiChatBot from '../raaghu-react/src/rds-comp-ai-chat-bot';

<RdsCompAiChatBot
  title="客户支持"
  placeholder="输入您的消息..."
  onSend={handleMessage}
  showTyping={true}
/>

快速对比

特性	NPM 包	源代码
设置	npm install	克隆仓库
更新	npm update	手动 git pull
包大小	优化后	完整源代码
自定义	有限制	完全访问
最适合	生产应用	开发/自定义

可用分类

我们有 52 个组件，分为 6 个主要类别：

• 📊 图表与数据 (13) - 所有图表类型、数据表格、可视化
• 🤖 AI 与聊天 (9) - 聊天机器人、消息传递、AI 界面
• 📝 表单与输入 (5) - 日期选择器、颜色选择器、电子签名
• 🎨 媒体与内容 (8) - 视频/音频播放器、文本编辑器、代码显示
• 🧭 导航与布局 (7) - 网格、看板、树形结构
• 🔧 实用与交互 (10) - 通知、加载器、地图、引导

快速示例

仪表板图表：

import { RdsCompChartLine } from '@waiin/raaghu-react';
<RdsCompChartLine data={salesData} responsive />

用户管理表格：

import { RdsCompGrid } from '@waiin/raaghu-react';
<RdsCompGrid data={users} columns={userColumns} pagination />

活动日期选择器：

import { RdsCompDatepicker } from '@waiin/raaghu-react';
<RdsCompDatepicker value={eventDate} onChange={setEventDate} />

支持聊天：

import { RdsCompAiChatBot } from '@waiin/raaghu-react';
<RdsCompAiChatBot title="帮助台" onSend={handleSupport} />

快速开始

1. 选择您的方式（NPM 包或源代码）
2. 选择分类 符合您的需求
3. 浏览 Storybook 查看交互示例和完整组件列表
4. 复制代码示例 并为您的项目进行自定义

包信息

• 单一包：@waiin/raaghu-react 包含所有组件
• 主题包：@waiin/raaghu-react-themes 用于样式设置
• 浏览全部：访问我们的 Storybook 查看完整的组件目录
• TypeScript：包含完整类型定义
• 响应式：移动优先设计
• 无障碍：符合 WCAG 2.1 AA 标准