KnowledgeCard

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

特性

$3

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

$3

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

$3

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

安装

``bash
npm install @oscloudlab/knowledge-card

或


yarn add @oscloudlab/knowledge-card
`

使用方法

$3

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

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

$3

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

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

$3

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

function App() {
return (
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

$3

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| 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 | - | 插入下方回调 |

$3

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

开发

`bash


安装依赖

npm install

启动开发服务器

npm run dev

构建组件库

npm run build:lib

发布到npm

npm run publish
``

浏览器兼容性

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

许可证

MIT License