@oscloudlab/knowledge-card

KnowledgeCard

一个功能丰富的知识卡片组件库，专为教育和学习场景设计，支持多种内容类型的展示和交互。

特性

多类型知识内容支持

• 文本解释：支持Markdown渲染、文本选择高亮、AI辅助解释
• 代码示例：支持代码语法高亮、代码运行演示
• 视频教程：集成阿里云播放器，支持视频播放控制
• 问题练习：支持选择题、填空题、简答题、代码题等多种题型
• 动画演示：支持SVG动画展示

交互式学习体验

• 文本选择交互：划词高亮、划词问AI
• 代码运行：内置终端模拟器，支持代码执行
• 问题回答：实时验证答案正确性
• AI辅助：集成AI助手，提供智能解释和帮助

技术特性

• TypeScript：完整的类型定义
• React 18+：支持最新的React特性
• Tailwind CSS：现代化的样式解决方案
• Ant Design：集成企业级UI组件
• 模块化设计：支持按需导入

安装

npm install @oscloudlab/knowledge-card

# 或
yarn add @oscloudlab/knowledge-card

使用方法

1. 基本用法

import React from 'react'
import { KnowledgeCard } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <KnowledgeCard
      knowledgeId="1"
      content="# React Hooks 入门\n\nReact Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用状态和其他 React 特性..."
      contentType="text"
      isEdit={false}
      textSelectionEnable={true}
    />
  )
}

2. 文本解释组件

import React from 'react'
import { TextExplanation } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <TextExplanation
      content="# JavaScript 闭包\n\n闭包是指有权访问另一个函数作用域中变量的函数..."
      knowledgeId="2"
      textSelectionEnable={true}
      editCallBack={(data) => console.log('编辑回调:', data)}
    />
  )
}

3. 代码示例组件

import React from 'react'
import { CodePlayer } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <CodePlayer
      code="function fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconsole.log(fibonacci(10));"
      language="javascript"
      title="斐波那契数列"
    />
  )
}

API

KnowledgeCard 组件

属性	类型	默认值	说明
knowledgeId	string	-	知识卡片唯一标识
content	string	-	卡片内容（支持Markdown）
contentType	string	'text'	内容类型：text, code, video, question
isEdit	boolean	false	是否可编辑
textSelectionEnable	boolean	false	是否启用文本选择功能
editCallBack	(data: { id: string, content: string, showTip: boolean }) => void	-	编辑回调函数
aiCreateContentCallback	(content: string) => void	-	AI优化生成的知识内容回调
textAiConsultCallback	(text: string, question: string) => void	-	文本AI咨询回调
swapContentCallback	(content: string) => void	-	替换原文回调
insertContentCallback	(content: string) => void	-	插入下方回调

TextExplanation 组件

属性	类型	默认值	说明
content	string	-	文本内容（支持Markdown）
knowledgeId	string	-	知识ID
textSelectionEnable	boolean	false	是否启用文本选择
editCallBack	(data: { id: string, content: string, showTip: boolean }) => void	-	编辑回调
contentEditable	boolean	false	内容是否可编辑

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 发布到npm
npm run publish

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

许可证

MIT License