@glodon-aiot/evaluateyolo

v1.0.4

Published

7 days ago

AIOT 产品标准前端组件库，提供 YOLO / OCR 评估任务、用户管理等页面级组件。

0High
0Medium
0Low

feigy

gaiot-arn

youyi.sun

@glodon-aiot/evaluateyolo

AIOT 产品标准前端组件库，提供 YOLO / OCR 评估任务、用户管理等页面级组件。

支持两种使用方式：

独立应用：直接 yarn dev 启动，包含登录鉴权、路由、Redux 等完整运行环境
SDK 嵌入：以 npm 包形式引入宿主项目，宿主只需提供 token，组件库负责全部 API 通信

技术栈

| 类别 | 版本 | | ------------- | ------ | | React | 17 | | Ant Design | 4.x | | TypeScript | latest | | Vite | 4.x | | React Router | 6.x | | Redux Toolkit | 1.x |

独立应用开发

启动

yarn install
yarn dev        # 默认端口 1314

本地开发默认通过 Vite 代理将所有 /server/* 请求转发到 https://aiot-dev.glodon.com，无需手动处理跨域。代理配置见 config/vite/proxy.ts，目标地址见 config/constant.ts。

构建

yarn build          # 生产包，输出 dist/
yarn build:pre      # 测试环境包
yarn build:lib      # 库模式，输出 dist/lib/（用于 npm 发布）

路由说明

独立应用包含以下路由（见 src/App.tsx）：

| 路径 | 页面 | | --------------- | ----------------- | | /yoloEval | YOLO 评估任务列表 | | /yoloEval/:id | YOLO 评估任务详情 | | /ocrEval | OCR 评估任务列表 | | /ocrEval/:id | OCR 评估任务详情 | | /users | 用户管理 |

作为 SDK 使用

安装

# npm
npm install @glodon-aiot/evaluateyolo

# yarn
yarn add @glodon-aiot/evaluateyolo

快速接入

// 1. 引入样式（全局引入一次即可）
import '@glodon-aiot/evaluateyolo/style.css';

// 2. 引入组件和 Provider
import { ApiProvider, YoloEval, OcrEval } from '@glodon-aiot/evaluateyolo';

// 3. 用 ApiProvider 包裹，传入 token
function App() {
  const token = useYourAuthToken();

  return (
    <ApiProvider
      token={token}
      apiBase="/aiot-sdk"
      onUnauthorized={() => navigate('/login')}
    >
      <YoloEval />
    </ApiProvider>
  );
}

注意：ApiProvider 不包含 Router、ConfigProvider、Redux 等，这些由宿主项目负责提供。

解决跨域（CORS）

本地开发时，浏览器会阻止直接请求 https://aiot-dev.glodon.com。正确做法是通过构建工具的 Dev Server 做服务端反向代理，绕过浏览器的跨域限制。

不能直接代理 /api —— 宿主项目自己的接口可能也以 /api 开头，会产生路由冲突。应使用专属命名空间前缀 /aiot-sdk 进行隔离。

根据宿主项目使用的构建工具选择对应方法：

Vite 项目

Step 1 — vite.config.ts：

import { defineConfig } from 'vite';
import { createAiotProxy } from '@glodon-aiot/evaluateyolo/proxy';

export default defineConfig({
  server: {
    proxy: {
      ...createAiotProxy(), // /aiot-sdk/* → https://aiot-dev.glodon.com/*
      '/api': { target: '...' }, // 宿主自己的接口，不受影响
    },
  },
});

Rsbuild 项目

Step 1 — rsbuild.config.ts：

import { defineConfig } from '@rsbuild/core';
import { createAiotProxyRsbuild } from '@glodon-aiot/evaluateyolo/proxy';

export default defineConfig({
  server: {
    proxy: [
      ...createAiotProxyRsbuild(), // { context:['/aiot-sdk'], pathRewrite, ... }
      {
        context: ['/server'], // 宿主自己的接口，不受影响
        target: yourApiBase,
        changeOrigin: true,
        pathRewrite: { '^/server': '' },
        secure: false,
      },
    ],
  },
});

Rsbuild 代理通常使用数组格式（context + pathRewrite），createAiotProxyRsbuild 返回一个数组元素，用 ... 展开即可。Vite 使用对象格式（rewrite 函数），两者不可混用。

Step 2（两者相同）— 挂载 `ApiProvider`，`apiBase` 必须跟随环境切换：

// ⚠️ 不能写死 "/aiot-sdk"：
//   开发环境 → 经代理转发，前缀在服务端被剥除，后端不感知
//   生产环境 → 没有代理，"/aiot-sdk" 会原样发给后端，导致 404
const apiBase = process.env.NODE_ENV === 'development' ? '/aiot-sdk' : '';

<ApiProvider token={token} apiBase={apiBase}>
  <YoloEval />
</ApiProvider>;

请求链路：

SDK 构造 URL:  /aiot-sdk/api/aiot/data/v1/...
浏览器发出:    GET /aiot-sdk/api/...        ← 同源请求，无 CORS
                   ↓ 构建工具代理去掉 /aiot-sdk 前缀（服务端）
后端收到:      https://aiot-dev.glodon.com/api/aiot/data/v1/...  ✓

前缀冲突时，两个函数都支持传自定义前缀（与 apiBase 保持一致）：

// Vite
...createAiotProxy('/glodon-aiot')
// Rsbuild
...createAiotProxyRsbuild('/glodon-aiot')

// App.tsx
<ApiProvider apiBase="/glodon-aiot" ...>

生产环境：宿主与 API 同域时传 apiBase="" 即可；不同域时需后端添加 CORS 响应头，或由宿主的 nginx/网关做反向代理。

ApiProvider 参数说明

| 参数 | 类型 | 必填 | 说明 | | ---------------- | ----------------------- | ---- | ---------------------------------------------------------------------------------------------------- | | token | string \| undefined | 是 | Bearer Token。token 变化时自动生效，无需重建 Provider | | apiBase | string | 否 | API 根路径前缀。开发环境传代理前缀如 "/aiot-sdk"；生产同域传 ""；默认为 window.location.origin | | authBaseURL | string | 否 | 自定义 auth 接口 baseURL，优先级高于 apiBase | | dataBaseURL | string | 否 | 自定义 data 接口 baseURL，优先级高于 apiBase | | evalBaseURL | string | 否 | 自定义评估任务接口 baseURL，优先级高于 apiBase | | datahubBaseURL | string | 否 | 自定义 Datahub 数据集接口 baseURL，优先级高于 apiBase | | onUnauthorized | () => void | 否 | 收到 401 时的回调，通常用于跳转登录页 | | onError | (msg: string) => void | 否 | 业务错误回调，默认使用 antd notification.error |

各接口默认 baseURL（apiBase 为 /aiot-sdk 时）：

| 接口分组 | baseURL | | ---------------- | ----------------------------------------- | | Auth | /aiot-sdk/api/auth | | Data | /aiot-sdk/api/aiot/data/v1 | | 评估任务（Eval） | /aiot-sdk/api/cvforcepd/evaluateyolo/v1 | | Datahub 数据集 | /aiot-sdk/api/cvforcepd/datahub/v1 |

组件一览

`<YoloEval>`

YOLO 评估任务列表页，包含创建/编辑/删除/终止/重试/搜索等完整交互。

| Prop | 类型 | 说明 | | ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------ | | onDetail | (record: EvalTask) => void | 点击「详情」时的回调。不传时默认通过 react-router-dom 跳转到 /yoloEval/:id，传入则由宿主自行控制路由 |

// 方式一：宿主自己控制路由（推荐嵌入场景）
<YoloEval onDetail={(task) => navigate(`/my-path/${task.id}`)} />

// 方式二：依赖内置路由（需宿主提供 <Routes> 包裹）
<YoloEval />

`<EvalDetail>` / `<YoloEvalDetail>`

YOLO 评估任务详情页，展示评估报告、mAP 指标、分类结果等。

| Prop | 类型 | 说明 | | -------- | ------------ | ----------------------------------- | | taskId | string | 任务 ID（不传时从 URL params 读取） | | onBack | () => void | 点击「返回」的回调 |

`<OcrEval>`

OCR 评估任务列表页，交互与 YoloEval 一致。

| Prop | 类型 | 说明 | | ---------- | ---------------------------- | ---------------------- | | onDetail | (record: EvalTask) => void | 同 YoloEval.onDetail |

`<OcrEvalDetail>`

OCR 评估任务详情页。

`<Users>`

用户管理页，包含用户列表、角色、组织等功能。

`useApi()`

在 ApiProvider 内部调用，获取所有 API 实例及当前用户信息：

import { useApi } from '@glodon-aiot/evaluateyolo';

function MyComponent() {
  const { evalApi, dataApi, tenantCode, userId } = useApi();

  useEffect(() => {
    evalApi.listTasks({ pageNo: 1, pageSize: 10 }).then(console.log);
  }, [evalApi]);
}

| 返回值 | 类型 | 说明 | | ------------ | --------------------- | ----------------------- | | evalApi | EvalApi | 评估任务接口 | | dataApi | DataApi | 数据接口 | | authApi | AuthApi | 鉴权接口 | | datahubApi | DatahubApi | Datahub 数据集接口 | | tenantCode | string \| undefined | 从 token 解析的租户编码 | | userId | string \| undefined | 从 token 解析的用户 ID | | token | string \| undefined | 原始 token |

TypeScript 类型

所有类型均可从包中直接导入：

import type {
  // 评估任务
  EvalTask,
  EvalTaskCreateParam,
  EvalTaskUpdateParam,
  EvalTaskListParams,
  EvalTaskDataset,
  EvalTaskMetrics,
  EvalTaskCategoryResult,
  // 数据集
  Dataset,
  DatasetVersion,
  DatasetListParams,
  // 用户体系
  IUser,
  IOrg,
  IRole,
  // 枚举
  EvalType,
  EvalTaskStatus,
  // Provider
  ApiProviderProps,
  ApiContextValue,
} from '@glodon-aiot/evaluateyolo';

EvalTaskStatus 枚举值：

| 值 | 含义 | | ------------ | -------- | | Pending | 等待中 | | Running | 评估中 | | Completed | 已完成 | | Failed | 评估失败 | | Terminated | 已终止 |

构建与发布

# 构建库产物
yarn build:lib

# 本地联调（使用 yalc）
yarn push          # 构建并发布到 yalc 本地仓库

# 发布 patch 版本
yarn vpublish:patch

# 发布 minor 版本
yarn vpublish:minor

产物结构（dist/lib/）：

dist/lib/
├── index.mjs       # ESM 格式
├── index.cjs       # CJS 格式
├── style.css       # 全量样式
└── types/          # TypeScript 类型声明
    └── index.d.ts

npm 包额外包含根目录的 proxy.cjs，可通过 @glodon-aiot/evaluateyolo/proxy 在宿主的 Vite 配置中导入。

样式隔离说明

| 项目 | 状态 | 说明 | | ------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | 全局样式污染 | 安全 | body/html/#root 重置样式及全量 antd CSS 仅在独立应用模式加载，不进入库产物 | | antd 双实例 | 安全 | antd 完全外部化，库不打包 antd 样式，由宿主统一管理 | | 类名冲突 | 低风险 | 组件使用 BEM 加页面级前缀（.yolo-eval-page、.ocr-eval-detail-page 等）；通用类名（.metric-card、.label）均通过 LESS 嵌套编译为带父级作用域的选择器 | | 主色适配 | 可覆盖 | 库内使用 var(--aiot-primary-color, #508bee)，宿主可覆盖 CSS 变量以匹配自身主题 |

宿主主色覆盖示例：

/* 在宿主的全局 CSS 中 */
:root {
  --aiot-primary-color: #1890ff; /* 改为宿主的主色 */
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@glodon-aiot/evaluateyolo

目录

技术栈

独立应用开发

启动

构建

路由说明

作为 SDK 使用

安装

快速接入

解决跨域（CORS）

Vite 项目

Rsbuild 项目

Step 2（两者相同）— 挂载 ApiProvider，apiBase 必须跟随环境切换：

ApiProvider 参数说明

组件一览

<YoloEval>

<EvalDetail> / <YoloEvalDetail>

<OcrEval>

<OcrEvalDetail>

<Users>

useApi()

TypeScript 类型

构建与发布

样式隔离说明

Step 2（两者相同）— 挂载 `ApiProvider`，`apiBase` 必须跟随环境切换：

`<YoloEval>`

`<EvalDetail>` / `<YoloEvalDetail>`

`<OcrEval>`

`<OcrEvalDetail>`

`<Users>`

`useApi()`