MindMap/frontend/debug-table-detection.html

124 lines
4.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格检测调试</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.test-case { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
.content { background: #f8f9fa; padding: 10px; font-family: monospace; white-space: pre-wrap; }
.result { margin-top: 10px; padding: 10px; border-radius: 3px; }
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<h1>表格检测调试</h1>
<div id="results"></div>
<script>
// 复制hasTable函数
function hasTable(content) {
if (!content || typeof content !== 'string') {
console.log('🔍 hasTable: 内容为空或不是字符串');
return false;
}
console.log('🔍 hasTable: 检查内容:', content);
// 检查是否包含表格语法
const lines = content.split('\n');
let hasTableRow = false;
let hasSeparator = false;
console.log('🔍 hasTable: 分割后的行数:', lines.length);
for (const line of lines) {
const trimmedLine = line.trim();
console.log('🔍 hasTable: 检查行:', trimmedLine);
// 检查表格行(包含|字符且至少有3个部分
if (trimmedLine.includes('|') && trimmedLine.split('|').length >= 3) {
hasTableRow = true;
console.log('✅ hasTable: 找到表格行');
}
// 检查分隔符行(包含-和|,且主要由这些字符组成)
if (trimmedLine.includes('|') && trimmedLine.includes('-') && /^[\s\|\-\:]+$/.test(trimmedLine)) {
hasSeparator = true;
console.log('✅ hasTable: 找到分隔符行');
}
}
// 如果只有表格行但没有分隔符,也可能是表格
// 或者如果内容包含多个|字符,也可能是表格
const pipeCount = (content.match(/\|/g) || []).length;
const hasMultiplePipes = pipeCount >= 6; // 至少3行每行2个|
console.log('🔍 hasTable: 结果 - hasTableRow:', hasTableRow, 'hasSeparator:', hasSeparator, 'pipeCount:', pipeCount, 'hasMultiplePipes:', hasMultiplePipes);
const result = (hasTableRow && hasSeparator) || (hasTableRow && hasMultiplePipes);
console.log('🔍 hasTable: 最终结果:', result);
return result;
}
// 测试用例
const testCases = [
{
name: "数据质量评估矩阵",
content: `| 评估维度 | 权重 | 评分标准 | 计算公式 |
|---------|------|---------|---------|
| 完整性 | 0.3 | 缺失值比例 < 5% | $\\text{完整性} = 1 - \\frac{\\text{缺失值数量}}{\\text{总数据量}}$ |
| 准确性 | 0.3 | 误差率 < 3% | $\\text{准确性} = 1 - \\frac{\\text{错误记录数}}{\\text{总记录数}}$ |`
},
{
name: "产品价格表",
content: `产品价格表
| 产品 | 价格 |
|------|------|
| 苹果 | 4元 |
| 香蕉 | 2元 |`
},
{
name: "简单表格",
content: `| 姓名 | 年龄 | 城市 |
|------|------|------|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |`
},
{
name: "只有表格行,没有分隔符",
content: `| 姓名 | 年龄 | 城市 |
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |`
},
{
name: "包含表格字符但不是表格",
content: `这是一个包含|字符的文本,但不是表格`
}
];
// 运行测试
const resultsDiv = document.getElementById('results');
testCases.forEach((testCase, index) => {
const testDiv = document.createElement('div');
testDiv.className = 'test-case';
const result = hasTable(testCase.content);
testDiv.innerHTML = `
<h3>测试用例 ${index + 1}: ${testCase.name}</h3>
<div class="content">${testCase.content}</div>
<div class="result ${result ? 'success' : 'error'}">
检测结果: ${result ? '✅ 检测到表格' : '❌ 未检测到表格'}
</div>
`;
resultsDiv.appendChild(testDiv);
});
</script>
</body>
</html>