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