优化：文章列表支持分页加载

2025-07-11 20:12:03 +08:00
parent 6f3e634355
commit 86edcf21b3
35 changed files with 2247 additions and 101 deletions
--- a/src/components/markdown-usage.md
+++ b/src/components/markdown-usage.md
@@ -0,0 +1,214 @@
+# Markdown渲染器使用指南
+
+## 🎯 功能概述
+
+已成功将AI问答页面的RichText组件替换为自定义的MarkdownRenderer组件，现在支持完整的Markdown语法渲染，让AI回复内容更加丰富和易读。
+
+## 🔧 实现内容
+
+### 1. 核心组件
+- **MarkdownRenderer.tsx**: 主要的Markdown渲染组件
+- **MarkdownRenderer.scss**: 对应的样式文件
+- **MarkdownTest.tsx**: 测试组件（可选）
+
+### 2. 集成到AI聊天
+- 替换了原有的RichText组件
+- 支持用户消息和AI消息的不同主题
+- 保持了原有的实时显示功能
+
+## 📝 支持的Markdown语法
+
+### 标题
+```markdown
+# 一级标题
+## 二级标题
+### 三级标题
+```
+
+### 文本格式
+```markdown
+**粗体文本**
+*斜体文本*
+`行内代码`
+```
+
+### 代码块
+````markdown
+```javascript
+function hello() {
+  console.log("Hello, World!");
+}
+```
+````
+
+### 列表
+```markdown
+- 无序列表项
+- 另一个项目
+
+1. 有序列表项
+2. 第二个项目
+```
+
+### 引用
+```markdown
+> 这是一个引用
+> 可以多行
+```
+
+### 链接
+```markdown
+[链接文本](https://example.com)
+```
+
+## 🎨 样式主题
+
+### AI消息主题 (ai-markdown)
+- 白色背景的代码块
+- 蓝色的链接和引用边框
+- 清晰的层次结构
+- 适合白色背景
+
+### 用户消息主题 (user-markdown)
+- 半透明的代码块
+- 白色的文本和链接
+- 适配红色渐变背景
+- 保持良好的对比度
+
+## 💻 使用方式
+
+### 在AI聊天中的应用
+```tsx
+<MarkdownRenderer
+  content={message.query || '正在思考中...'}
+  className={`message-markdown ${message.type === 'user' ? 'user-markdown' : 'ai-markdown'}`}
+/>
+```
+
+### 独立使用
+```tsx
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+
+<MarkdownRenderer 
+  content="# 标题\n这是**粗体**文本"
+  className="custom-style"
+/>
+```
+
+## 🧪 测试示例
+
+在AI问答中可以测试以下内容：
+
+```
+请用Markdown格式回答：
+
+# JavaScript基础
+
+## 变量声明
+JavaScript中有三种变量声明方式：
+- `var`: 函数作用域
+- `let`: 块级作用域  
+- `const`: 常量
+
+## 示例代码
+```javascript
+const name = "World";
+let greeting = `Hello, ${name}!`;
+console.log(greeting);
+```
+
+## 注意事项
+> 推荐使用 `const` 和 `let`，避免使用 `var`
+
+更多信息请参考 [MDN文档](https://developer.mozilla.org)
+```
+
+## 🔍 技术特点
+
+### 1. 轻量级实现
+- 无外部依赖
+- 纯JavaScript解析
+- 高效的文本处理
+
+### 2. 响应式设计
+- 适配移动端
+- 自动调整字体大小
+- 优化的间距和布局
+
+### 3. 性能优化
+- 简单的字符串匹配
+- 最小化DOM操作
+- 避免复杂的正则表达式
+
+### 4. 可扩展性
+- 模块化设计
+- 易于添加新语法
+- 灵活的样式配置
+
+## 🚀 使用效果
+
+### 之前 (RichText)
+- 只能显示纯文本
+- 无格式化支持
+- 内容单调
+
+### 现在 (MarkdownRenderer)
+- ✅ 支持标题层次
+- ✅ 代码高亮显示
+- ✅ 列表和引用
+- ✅ 链接和格式化文本
+- ✅ 用户/AI消息不同主题
+
+## 📋 测试清单
+
+### 基本功能测试
+- [ ] 标题渲染 (H1-H6)
+- [ ] 粗体和斜体文本
+- [ ] 行内代码和代码块
+- [ ] 有序和无序列表
+- [ ] 引用块
+- [ ] 链接
+
+### 样式测试
+- [ ] AI消息主题正确应用
+- [ ] 用户消息主题正确应用
+- [ ] 响应式布局正常
+- [ ] 代码块样式正确
+
+### 集成测试
+- [ ] 实时消息显示正常
+- [ ] 打字效果保持
+- [ ] 滚动功能正常
+- [ ] 性能无明显影响
+
+## 🔧 故障排除
+
+### 常见问题
+
+1. **样式不生效**
+   - 检查className是否正确传递
+   - 确认SCSS文件已正确导入
+
+2. **解析错误**
+   - 检查Markdown语法是否正确
+   - 查看控制台错误信息
+
+3. **性能问题**
+   - 检查消息长度
+   - 考虑添加内容截断
+
+### 调试方法
+```javascript
+// 在控制台查看渲染内容
+console.log('Markdown content:', message.query);
+```
+
+## 🎯 未来扩展
+
+可以考虑添加的功能：
+- [ ] 表格支持
+- [ ] 图片渲染
+- [ ] 数学公式
+- [ ] 语法高亮
+- [ ] 自定义主题
+- [ ] 导出功能