open-index/open-npm huggingface dataset:
npm package: @step-monitor/ui
Description: React component library for step monitoring visualization
Latest version: 1.0.1

# @step-monitor/ui

React 组件库，用于可视化监控流程的执行状态和步骤。

## 特性

- 📊 监控列表：展示所有监控任务的执行状态和进度
- 🔍 详细信息：查看每个监控任务的详细执行信息
- 🌲 步骤树：以树形结构展示任务的执行步骤
- 📈 流程图：可视化展示步骤之间的依赖关系
- 🎨 主题定制：基于 Ant Design，支持主题定制

## 安装

```bash
npm install @step-monitor/ui @step-monitor/core antd
# 或者
yarn add @step-monitor/ui @step-monitor/core antd
# 或者
pnpm add @step-monitor/ui @step-monitor/core antd
```

## 快速开始

```tsx
import { MonitorPanel } from '@step-monitor/ui';
import { StepMonitor } from '@step-monitor/core';

// 创建监控实例
const monitor = new StepMonitor({
  listMonitors: async ({ page, pageSize, status, startTime, endTime }) => {
    // 实现获取监控列表的逻辑
  },
  getMonitor: async (monitorId) => {
    // 实现获取单个监控详情的逻辑
  },
  getMonitorSteps: async (monitorId) => {
    // 实现获取监控步骤的逻辑
  }
});

// 使用组件
const App = () => {
  return (
    <MonitorPanel
      dataSource={monitor}
      config={{
        title: '监控面板',
        pageSize: 10,
        refreshInterval: 5000  // 自动刷新间隔（毫秒）
      }}
    />
  );
};
```

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

# 构建示例项目
pnpm build:demo

# 运行测试
pnpm test
```

## API 文档

### MonitorPanel

主要的展示组件，用于展示监控面板。

#### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| dataSource | 数据源实例 | `StepMonitor` | - |
| config | 配置项 | `MonitorPanelConfig` | - |

#### MonitorPanelConfig

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| title | 面板标题 | `string` | - |
| pageSize | 每页显示条数 | `number` | 10 |
| refreshInterval | 自动刷新间隔（毫秒） | `number` | - |

## 示例

查看 [examples](./examples) 目录获取更多使用示例。

## 许可证

MIT