# KnowledgeCard

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

## 特性

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

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

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

## 安装

```bash
npm install @oscloudlab/knowledge-card

# 或
yarn add @oscloudlab/knowledge-card
```

## 使用方法

### 1. 基本用法

```tsx
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. 文本解释组件

```tsx
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. 代码示例组件

```tsx
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 | 内容是否可编辑 |

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 发布到npm
npm run publish
```

## 浏览器兼容性

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

## 许可证

MIT License
