183 lines
6.3 KiB
HTML
183 lines
6.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>当前问题调试</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
margin: 20px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.test-container {
|
|||
|
|
background: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.test-title {
|
|||
|
|
color: #333;
|
|||
|
|
border-bottom: 2px solid #007bff;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 模拟Mind Elixir的样式 */
|
|||
|
|
.topic {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 8px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic-text {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 我们的markdown样式 */
|
|||
|
|
.topic .topic-text.markdown-content {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table {
|
|||
|
|
border-collapse: collapse !important;
|
|||
|
|
width: 100% !important;
|
|||
|
|
margin: 4px 0 !important;
|
|||
|
|
font-size: 11px !important;
|
|||
|
|
border: 1px solid #ddd !important;
|
|||
|
|
display: table !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table th,
|
|||
|
|
.topic .topic-text.markdown-content table td {
|
|||
|
|
border: 1px solid #ddd !important;
|
|||
|
|
padding: 2px 4px !important;
|
|||
|
|
text-align: left !important;
|
|||
|
|
vertical-align: top !important;
|
|||
|
|
display: table-cell !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table th {
|
|||
|
|
background-color: #f5f5f5 !important;
|
|||
|
|
font-weight: 600 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table tr {
|
|||
|
|
display: table-row !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table tr:nth-child(even) {
|
|||
|
|
background-color: #f9f9f9 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topic .topic-text.markdown-content table tr:hover {
|
|||
|
|
background-color: #e9ecef !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.raw-content {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-family: monospace;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.debug-info {
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
border-left: 4px solid #2196f3;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="test-container">
|
|||
|
|
<h1 class="test-title">当前问题调试 - 用户提供的表格</h1>
|
|||
|
|
|
|||
|
|
<h3>原始表格内容：</h3>
|
|||
|
|
<div class="raw-content" id="raw-content"></div>
|
|||
|
|
|
|||
|
|
<h3>模拟Mind Elixir节点中的渲染：</h3>
|
|||
|
|
<div class="topic">
|
|||
|
|
<div class="topic-text markdown-content" id="mindelixir-render"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3>普通渲染（对比）：</h3>
|
|||
|
|
<div id="normal-render"></div>
|
|||
|
|
|
|||
|
|
<div class="debug-info" id="debug-info"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 配置marked
|
|||
|
|
marked.setOptions({
|
|||
|
|
breaks: true,
|
|||
|
|
gfm: true,
|
|||
|
|
tables: true,
|
|||
|
|
sanitize: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 用户提供的表格内容
|
|||
|
|
const tableContent = `| 数据类型 | 特点 | 适用场景 | 示例 |
|
|||
|
|
|---------|------|---------|------|
|
|||
|
|
| 数值型 | 可进行数学运算 | 统计分析、机器学习 | 年龄、收入、温度 |
|
|||
|
|
| 分类型 | 表示类别属性 | 分类问题、特征工程 | 性别、职业、地区 |
|
|||
|
|
| 时间序列 | 按时间顺序排列 | 趋势预测、周期性分析 | 股票价格、气温变化 |
|
|||
|
|
| 文本型 | 非结构化自然语言 | NLP分析、情感识别 | 评论、文章、社交媒体内容 |`;
|
|||
|
|
|
|||
|
|
// 显示原始内容
|
|||
|
|
document.getElementById('raw-content').textContent = tableContent;
|
|||
|
|
|
|||
|
|
// 渲染到Mind Elixir模拟节点
|
|||
|
|
try {
|
|||
|
|
const html = marked.parse(tableContent);
|
|||
|
|
document.getElementById('mindelixir-render').innerHTML = html;
|
|||
|
|
} catch (error) {
|
|||
|
|
document.getElementById('mindelixir-render').innerHTML = `<div style="color: red;">渲染失败: ${error.message}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 普通渲染
|
|||
|
|
try {
|
|||
|
|
const html = marked.parse(tableContent);
|
|||
|
|
document.getElementById('normal-render').innerHTML = html;
|
|||
|
|
} catch (error) {
|
|||
|
|
document.getElementById('normal-render').innerHTML = `<div style="color: red;">渲染失败: ${error.message}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调试信息
|
|||
|
|
const debugInfo = document.getElementById('debug-info');
|
|||
|
|
const mindelixirElement = document.getElementById('mindelixir-render');
|
|||
|
|
const table = mindelixirElement.querySelector('table');
|
|||
|
|
|
|||
|
|
if (table) {
|
|||
|
|
const computedStyle = window.getComputedStyle(table);
|
|||
|
|
debugInfo.innerHTML = `
|
|||
|
|
<h4>表格样式检查：</h4>
|
|||
|
|
<p><strong>display:</strong> ${computedStyle.display}</p>
|
|||
|
|
<p><strong>border-collapse:</strong> ${computedStyle.borderCollapse}</p>
|
|||
|
|
<p><strong>border:</strong> ${computedStyle.border}</p>
|
|||
|
|
<p><strong>width:</strong> ${computedStyle.width}</p>
|
|||
|
|
<p><strong>font-size:</strong> ${computedStyle.fontSize}</p>
|
|||
|
|
<p><strong>margin:</strong> ${computedStyle.margin}</p>
|
|||
|
|
<p><strong>表格行数:</strong> ${table.rows.length}</p>
|
|||
|
|
<p><strong>表格列数:</strong> ${table.rows[0] ? table.rows[0].cells.length : 0}</p>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
debugInfo.innerHTML = '<h4>错误：</h4><p>没有找到表格元素</p>';
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|