335 lines
10 KiB
Markdown
335 lines
10 KiB
Markdown
# 表格渲染修复总结
|
||
|
||
## 📋 问题描述
|
||
|
||
用户的 Paper Burner 应用中，Markdown 表格无法正确渲染：
|
||
|
||
1. **压缩表格**：所有内容在一行（无换行符）
|
||
```
|
||
| A | B ||---|---|| 1 | 2 ||3 | 4 |
|
||
```
|
||
|
||
2. **Sub-block 分割破坏**：表格被 `<span class="sub-block">` 分割
|
||
3. **渲染器版本问题**：使用旧版 `MarkdownProcessor` 而不是新版 `MarkdownProcessorAST`
|
||
4. **最终结果**：表格显示为纯文本 `<p>`，而不是 `<table>`
|
||
|
||
---
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 1. 压缩表格自动修复
|
||
**文件**：`js/processing/markdown_processor_ast.js`
|
||
|
||
**功能**：检测并修复单行压缩表格
|
||
|
||
```javascript
|
||
// 第568-746行
|
||
function fixCompressedTables(text) {
|
||
// 检测分隔符：|---|---|
|
||
const separatorPattern = /\|(:?-+:?\|)+/;
|
||
|
||
// 统计管道符，判断是否为压缩表格
|
||
const pipeCount = (line.match(/\|/g) || []).length;
|
||
if (pipeCount < 10) return line;
|
||
|
||
// 分割成多行
|
||
return splitCompressedTable(line);
|
||
}
|
||
```
|
||
|
||
**关键修复**：
|
||
- ✅ 补回被分隔符匹配"吃掉"的表头结尾 `|`
|
||
- ✅ 按固定管道符数量精确提取每一行
|
||
- ✅ 处理表头缺失结尾 `|` 的情况
|
||
|
||
### 2. Sub-block 分割器保护表格
|
||
**文件**：`js/processing/sub_block_segmenter.js`
|
||
|
||
**功能**：在分割前检测 Markdown 表格语法，跳过分割
|
||
|
||
```javascript
|
||
// 第64-70行（主分割函数）
|
||
const hasMarkdownTableSeparator = /\|(:?-+:?\|)+/.test(rawText);
|
||
if (hasMarkdownTableSeparator) {
|
||
console.log(`[SubBlockSegmenter] 块 #${parentBlockIndex} 包含 Markdown 表格语法，跳过分块以保持表格完整性`);
|
||
return; // 直接返回，不分割
|
||
}
|
||
|
||
// 第288-296行（公式感知分割函数）
|
||
const hasMarkdownTableSeparator = /\|(:?-+:?\|)+/.test(rawText);
|
||
if (hasMarkdownTableSeparator) {
|
||
wrapAsSingleSubBlock(blockElement, parentBlockIndex);
|
||
return; // 包装为单一子块
|
||
}
|
||
```
|
||
|
||
### 3. 使用新版 AST 渲染器 + 三层修复机制
|
||
**文件**：`js/history/history_detail_show_tab.js`
|
||
|
||
**功能**：在 `renderBatch` 函数中实现三层防护，确保表格正确渲染
|
||
|
||
#### **第一层：Token 类型检测与强制转换（第1525-1530行）**
|
||
```javascript
|
||
// 检测：如果 token 类型是 paragraph 但包含表格语法，强制作为表格处理
|
||
const hasTableSyntax = /\|(:?-+:?\|)+/.test(tokenRaw);
|
||
if (tokens[i].type === 'paragraph' && hasTableSyntax) {
|
||
console.log('[renderBatch] 检测到 paragraph token 包含表格语法，强制作为表格处理');
|
||
tokens[i].type = 'table'; // 强制改为 table 类型
|
||
}
|
||
```
|
||
|
||
**问题**：`marked.lexer()` 会错误地将表格标记为 paragraph token
|
||
**解决**：在渲染前检测并强制修正 token 类型
|
||
|
||
#### **第二层：优先使用 AST 渲染器（第1533-1541行）**
|
||
```javascript
|
||
// 优先使用 AST 处理器（支持压缩表格修复）
|
||
let htmlStr;
|
||
if (typeof MarkdownIntegration !== 'undefined' && MarkdownIntegration.smartRender) {
|
||
htmlStr = MarkdownIntegration.smartRender(tokenRaw, data.images, customRenderer, contentIdentifier);
|
||
} else if (typeof MarkdownProcessorAST !== 'undefined' && MarkdownProcessorAST.render) {
|
||
htmlStr = MarkdownProcessorAST.render(tokenRaw, data.images);
|
||
} else {
|
||
// 降级到旧版
|
||
htmlStr = MarkdownProcessor.renderWithKatexFailback(MarkdownProcessor.safeMarkdown(tokenRaw, data.images), customRenderer);
|
||
}
|
||
```
|
||
|
||
**优势**：AST 渲染器支持压缩表格自动修复
|
||
|
||
#### **第三层：后验检查与重新渲染（第1543-1558行）**
|
||
```javascript
|
||
// 后验检查：如果渲染后仍然是 <p> 但包含表格 Markdown，尝试直接渲染表格
|
||
if (hasTableSyntax && htmlStr.trim().startsWith('<p')) {
|
||
console.warn('[renderBatch] 渲染后仍然是 <p>，尝试直接提取并渲染表格部分');
|
||
// 提取 <p> 中的文本内容
|
||
const tempDiv = document.createElement('div');
|
||
tempDiv.innerHTML = htmlStr;
|
||
const pElement = tempDiv.querySelector('p');
|
||
if (pElement && pElement.textContent.includes('|')) {
|
||
const tableMarkdown = pElement.textContent;
|
||
// 重新渲染表格
|
||
if (typeof MarkdownProcessorAST !== 'undefined' && MarkdownProcessorAST.render) {
|
||
htmlStr = MarkdownProcessorAST.render(tableMarkdown, data.images);
|
||
console.log('[renderBatch] 重新渲染表格成功');
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
**兜底保护**：即使前两层失败，仍能从 `<p>` 标签中提取表格文本并重新渲染
|
||
|
||
---
|
||
|
||
## 🔄 完整渲染流程
|
||
|
||
### 修复前（失败流程）
|
||
```
|
||
1. MinerU content_list.json 包含压缩表格 Markdown
|
||
↓
|
||
2. 生成 chunks（保持 Markdown 格式）
|
||
↓
|
||
3. ❌ Sub-block 分割器切割表格 → 破坏结构
|
||
↓
|
||
4. ❌ 旧版 MarkdownProcessor 渲染 → 不支持压缩表格
|
||
↓
|
||
5. ❌ 结果：<p>| A | B ||---|---|| 1 | 2 |</p>
|
||
```
|
||
|
||
### 修复后（成功流程）
|
||
```
|
||
1. MinerU content_list.json 包含压缩表格 Markdown
|
||
↓
|
||
2. 生成 chunks（保持 Markdown 格式）
|
||
↓
|
||
3. ✅ MarkdownProcessorAST 修复压缩表格
|
||
| A | B | | A | B |
|
||
|---|---| → |---|---|
|
||
| 1 | 2 | | 1 | 2 |
|
||
↓
|
||
4. ✅ Sub-block 分割器检测到表格语法，跳过分割
|
||
↓
|
||
5. ✅ markdown-it 正确渲染成 <table>
|
||
↓
|
||
6. ✅ 结果：<table><thead>...</thead><tbody>...</tbody></table>
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 测试页面
|
||
|
||
### 1. `test-all-formula-fixes.html`
|
||
测试所有公式渲染修复（包括表格中的公式）
|
||
|
||
### 2. `test-table-rendering.html`
|
||
测试压缩表格修复：
|
||
- ✅ 测试 1-3：正常表格
|
||
- ✅ 测试 4：压缩的单行表格（原始问题）
|
||
- ✅ 测试 5：简化的压缩表格
|
||
|
||
### 3. `test-compressed-table-fix.html`
|
||
压缩表格修复演示（带详细说明）
|
||
|
||
### 4. `test-fix-diagnostic.html`
|
||
诊断页面（显示完整修复日志）
|
||
|
||
---
|
||
|
||
## 📊 修复效果
|
||
|
||
### 修复前
|
||
```html
|
||
<p data-block-index="31">
|
||
<span class="sub-block" data-sub-block-id="31.0">| | | | 五分位数 (Quintiles) | | |</span>
|
||
<span class="sub-block" data-sub-block-id="31.1">|---|---|---|---|---|---|---|</span>
|
||
<span class="sub-block" data-sub-block-id="31.2">| | 1 | 2 | 3 | 4 | 5 | 5-1 |</span>
|
||
...
|
||
</p>
|
||
```
|
||
|
||
### 修复后
|
||
```html
|
||
<table data-block-index="31">
|
||
<thead>
|
||
<tr>
|
||
<th></th><th></th><th></th>
|
||
<th>五分位数 (Quintiles)</th>
|
||
<th></th><th></th><th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td></td><td>1</td><td>2</td><td>3</td>
|
||
<td>4</td><td>5</td><td>5-1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>市场 (Market)</td>
|
||
<td>0.145***</td><td>0.200**</td><td>0.061*</td>
|
||
<td>0.136*</td><td>0.106***</td><td>-0.039</td>
|
||
</tr>
|
||
...
|
||
</tbody>
|
||
</table>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 调试日志
|
||
|
||
启用后会显示详细的修复过程：
|
||
|
||
```
|
||
[MarkdownProcessorAST] 检测到可能的压缩表格，管道符: 55
|
||
[MarkdownProcessorAST] 表头管道符: 8 / 8
|
||
[MarkdownProcessorAST] ✓ 表头提取成功
|
||
[MarkdownProcessorAST] 提取到 5 行数据
|
||
[MarkdownProcessorAST] ✓ 压缩表格修复成功
|
||
|
||
[SubBlockSegmenter] 块 #31 包含 Markdown 表格语法，跳过分块以保持表格完整性
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 文件清单
|
||
|
||
### 修改的文件
|
||
1. `js/processing/markdown_processor_ast.js` - 压缩表格修复
|
||
2. `js/processing/sub_block_segmenter.js` - 表格保护
|
||
3. `js/history/history_detail_show_tab.js` - 使用 AST 渲染器
|
||
|
||
### 新增的文件
|
||
4. `js/processing/formula_post_processor.js` - 公式后处理器
|
||
5. `views/history/history_detail.html` - 添加脚本引用（第389行）
|
||
|
||
### 测试文件
|
||
6. `test-all-formula-fixes.html` - 综合测试
|
||
7. `test-table-rendering.html` - 表格渲染测试
|
||
8. `test-compressed-table-fix.html` - 压缩表格修复演示
|
||
9. `test-fix-diagnostic.html` - 诊断页面
|
||
10. `test-compressed-debug.html` - 调试页面
|
||
11. `test-table-debug.html` - 表格调试页面
|
||
12. **`test-renderbatch-table-fix.html`** - **renderBatch 三层修复机制测试（推荐）**
|
||
|
||
---
|
||
|
||
## ✨ 额外修复
|
||
|
||
在修复表格的过程中，还顺带修复了：
|
||
|
||
1. **公式渲染问题**
|
||
- 花括号开头公式：`${1.1}\mathrm{\;m}$`
|
||
- 多逗号公式
|
||
- 表格中的公式
|
||
- LaTeX 命令错误自动修正（60+种）
|
||
- 字体嵌套错误修正
|
||
|
||
2. **性能优化**
|
||
- 缓存机制
|
||
- 批量渲染
|
||
- 性能指标追踪
|
||
|
||
---
|
||
|
||
## 🎯 使用方法
|
||
|
||
1. **刷新页面**：按 `Ctrl + Shift + R` 清除缓存
|
||
2. **查看日志**：打开浏览器控制台
|
||
3. **验证效果**：
|
||
- 所有表格应显示为 `<table>` 而不是 `<p>`
|
||
- 压缩表格自动修复成多行格式
|
||
- 表格中的公式正确渲染
|
||
|
||
---
|
||
|
||
## 📌 注意事项
|
||
|
||
1. **加载顺序**：确保脚本按以下顺序加载
|
||
```html
|
||
<script src="js/processing/markdown_processor_ast.js"></script>
|
||
<script src="js/processing/formula_post_processor.js"></script>
|
||
<script src="js/processing/markdown_processor_integration.js"></script>
|
||
<script src="js/processing/sub_block_segmenter.js"></script>
|
||
```
|
||
|
||
2. **兼容性**：保留了旧版渲染器的降级支持
|
||
|
||
3. **调试模式**：在控制台执行 `localStorage.setItem('ENABLE_SUBBLOCK_DEBUG', 'true')` 启用详细日志
|
||
|
||
---
|
||
|
||
## 🏆 完成状态
|
||
|
||
- ✅ 压缩表格自动修复（`markdown_processor_ast.js`）
|
||
- ✅ Sub-block 分割器保护表格（`sub_block_segmenter.js`）
|
||
- ✅ 使用新版 AST 渲染器（`history_detail_show_tab.js`）
|
||
- ✅ **三层修复机制**（`renderBatch` 函数）
|
||
- ✅ 第一层：Token 类型检测与强制转换
|
||
- ✅ 第二层：优先使用 AST 渲染器
|
||
- ✅ 第三层：后验检查与重新渲染
|
||
- ✅ 公式渲染修复（60+ LaTeX 错误自动修正）
|
||
- ✅ 测试页面创建（12 个测试页面）
|
||
- ✅ 文档编写
|
||
|
||
**所有功能已完成并测试通过！** 🎉
|
||
|
||
---
|
||
|
||
## 🚀 快速测试
|
||
|
||
1. **打开推荐测试页面**：`tests/test-renderbatch-table-fix.html`
|
||
- 完整模拟实际应用的 renderBatch 流程
|
||
- 展示三层修复机制的工作过程
|
||
- 包含详细的处理日志
|
||
- 从项目根目录运行: `start tests/test-renderbatch-table-fix.html`
|
||
|
||
2. **刷新实际应用**：按 `Ctrl + Shift + R` 清除缓存
|
||
|
||
3. **查看控制台日志**：
|
||
```
|
||
[renderBatch] 检测到 paragraph token 包含表格语法，强制作为表格处理
|
||
[renderBatch] 渲染后仍然是 <p>，尝试直接提取并渲染表格部分
|
||
[renderBatch] 重新渲染表格成功
|
||
```
|
||
|
||
4. **验证效果**：所有表格应显示为 `<table>` 元素，带有边框和网格样式
|