@step-monitor/ui

React 组件库，用于可视化监控流程的执行状态和步骤。

特性

• 📊 监控列表：展示所有监控任务的执行状态和进度
• 🔍 详细信息：查看每个监控任务的详细执行信息
• 🌲 步骤树：以树形结构展示任务的执行步骤
• 📈 流程图：可视化展示步骤之间的依赖关系
• 🎨 主题定制：基于 Ant Design，支持主题定制

安装

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

快速开始

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  // 自动刷新间隔（毫秒）
      }}
    />
  );
};

开发

# 安装依赖
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 目录获取更多使用示例。

许可证

MIT