@yimoka/e-learning-sdk

E-Learning 资源嵌入 SDK —— 让其他业务系统快速接入知识图谱等 E-Learning 可视化能力。

零框架依赖，纯原生 DOM + ECharts 按需引入，可在 Vanilla JS / Vue / React / Angular 等任何技术栈中使用。

安装

# npm
npm install @yimoka/e-learning-sdk

# pnpm
pnpm add @yimoka/e-learning-sdk

快速开始

1. ESM / TypeScript

import { ELearningSDK } from '@yimoka/e-learning-sdk';

// 初始化（单例模式，重复调用会销毁旧实例）
const sdk = ELearningSDK.init({
  appId: 'your-app-id',
  tenantId: 'your-tenant-id',
  baseUrl: 'https://api.example.com',
});

// 加载知识图谱（浮动图标模式，默认）
sdk.load({
  type: 'knowledge-graph',
  resourceId: 'course-123',
});

// 不再使用时销毁
sdk.destroy();

2. UMD / Script 标签

<script src="https://cdn.example.com/@yimoka/e-learning-sdk/dist/index.umd.js"></script>
<script>
  var sdk = ELearningSDK.ELearningSDK.init({
    appId: 'your-app-id',
    tenantId: 'your-tenant-id',
    baseUrl: 'https://api.example.com',
  });

  sdk.load({
    type: 'knowledge-graph',
    resourceId: 'course-123',
  });
</script>

API

ELearningSDK.init(config)

初始化 SDK，返回 SDK 实例。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | appId | string | 是 | 应用 ID，用于接口鉴权 | | tenantId | string | 是 | 租户 ID，用于多租户隔离 | | baseUrl | string | 是 | API 基础地址 | | language | string | 否 | 界面语言，默认 'zh-CN' |

返回值： ISDKInstance

interface ISDKInstance {
  load: (options: ILoadOptions) => void;
  destroy: () => void;
}

sdk.load(options)

加载资源模块，支持两种显示模式。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | type | ModuleType | 是 | 模块类型，当前支持 'knowledge-graph' | | resourceId | string | 是 | 资源 ID（如课程 ID） | | mode | 'floating' \| 'embed' | 否 | 显示模式，默认 'floating' | | container | HTMLElement | embed 模式必填 | 嵌入模式下的挂载 DOM 容器 | | drawerWidth | number | 否 | Drawer 宽度（仅 floating 模式），默认 520 |

sdk.destroy()

销毁 SDK 实例，清理所有 DOM 节点、事件监听和定时器。

显示模式

浮动图标模式（默认）

页面右侧中间出现浮动按钮，点击后从右侧滑入 Drawer 面板展示内容。

sdk.load({
  type: 'knowledge-graph',
  resourceId: 'course-123',
  // mode: 'floating',  // 默认值，可省略
  // drawerWidth: 600,   // 可选，自定义 Drawer 宽度
});

嵌入模式

直接在指定 DOM 容器内渲染模块内容，适合需要将图谱嵌入到页面布局中的场景。

sdk.load({
  type: 'knowledge-graph',
  resourceId: 'course-123',
  mode: 'embed',
  container: document.getElementById('graph-container'),
});

嵌入模式下容器需要有明确的宽高，建议至少 400px 高度。

功能特性

• 知识图谱：基于 ECharts 力导向图渲染课程知识点关联关系
  • 节点点击展开/收起子节点
  • 缩放控制（+/- 按钮）
  • 全屏查看（支持浏览器原生全屏 + CSS 兜底）
  • 加载中 / 空状态 / 错误重试等完整状态处理

主题定制

SDK 使用 CSS 变量控制视觉风格，宿主页面可通过覆盖变量自定义主题：

/* 在宿主页面的 CSS 中覆盖 */
.els-root {
  --els-primary: #1677ff;
  --els-primary-hover: #0958d9;
  --els-bg: #ffffff;
  --els-bg-secondary: #f5f5f5;
  --els-border: rgba(0, 0, 0, 0.06);
  --els-text: rgba(0, 0, 0, 0.88);
  --els-text-secondary: rgba(0, 0, 0, 0.65);
  --els-text-tertiary: rgba(0, 0, 0, 0.45);
  --els-radius: 8px;
  --els-drawer-width: 600px;
}

技术细节

| 项目 | 说明 | |------|------| | 框架依赖 | 无（纯原生 DOM） | | 运行时依赖 | ECharts（按需 tree-shaking，仅打包 Graph 图表） | | 构建产物 | ESM / CJS / UMD + TypeScript 声明文件 | | 入口体积 | ~5 KB gzip（不含 ECharts 图表模块） | | 图表模块 | ~187 KB gzip（含 ECharts 最小集，动态 import 按需加载） | | 浏览器支持 | Chrome / Firefox / Safari / Edge 最近 2 个版本 |

本地开发

# 启动 Demo 调试页面
pnpm dev

# 构建
pnpm build

# 类型检查
npx tsc -b --noEmit