<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>学习共享调试页面</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
.debug-section { margin: 20px 0; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; }
.debug-section h3 { margin-top: 0; color: #333; }
pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; }
button { padding: 10px 20px; margin: 5px; background: #e85d4d; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #d44; }
.category-list { list-style: none; padding: 0; }
.category-item { padding: 10px; margin: 5px 0; background: #fff; border: 2px solid #fed7aa; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<h1>🔍 学习共享页面调试工具</h1>
<div class="debug-section">
<h3>1. 检查 localStorage 数据</h3>
<button onclick="checkLocalStorage()">检查数据</button>
<button onclick="clearAllData()">清除所有数据</button>
<button onclick="loadDefaultData()">加载默认数据</button>
<pre id="localStorage-result">点击按钮查看结果...</pre>
</div>
<div class="debug-section">
<h3>2. 测试分类列表渲染</h3>
<button onclick="renderTestCategories()">渲染测试分类</button>
<div id="test-categories"></div>
</div>
<div class="debug-section">
<h3>3. 控制台日志</h3>
<pre id="console-log">等待操作...</pre>
</div>
<div class="debug-section">
<h3>4. 快速操作</h3>
<button onclick="window.open('learning.html?reset=true', '_blank')">打开重置后的页面</button>
<button onclick="testDataStructure()">测试数据结构</button>
</div>
</div>
<script>
const defaultData = [
{
id: 1,
name: "版本演进时间图",
icon: "📅",
expanded: false,
children: [
{ id: 101, name: "v1.0 版本", icon: "1️⃣", items: [], children: [], expanded: false },
{ id: 102, name: "v2.0 版本", icon: "2️⃣", items: [], children: [], expanded: false },
{ id: 103, name: "v3.0 版本", icon: "3️⃣", items: [], children: [], expanded: false }
],
items: [
{title:"算子框架发展历程",desc:"从 v1.0 到 v3.0 的完整演进历程",wiki:"https://wiki.example.com/1"},
{title:"版本特性对比",desc:"各版本核心功能差异对比表",wiki:"https://wiki.example.com/2"},
{title:"里程碑事件",desc:"算子发展历程中的关键节点",wiki:"https://wiki.example.com/3"}
]
},
{
id: 2,
name: "算子开发",
icon: "🔨",
expanded: false,
children: [],
items: [
{title:"算子开发入门",desc:"算子的基本概念、开发流程和核心原理",wiki:"https://wiki.example.com/4"},
{title:"开发环境搭建",desc:"完整的开发环境配置指南",wiki:"https://wiki.example.com/5"},
{title:"Hello World 教程",desc:"从零开始编写第一个算子",wiki:"https://wiki.example.com/6"}
]
},
{
id: 3,
name: "构建工程",
icon: "🏗️",
expanded: false,
children: [],
items: [
{title:"工程结构说明",desc:"算子工程的标准目录结构和文件组织",wiki:"https://wiki.example.com/9"}
]
},
{
id: 4,
name: "算子实现原理",
icon: "⚙️",
expanded: false,
children: [],
items: [
{title:"算子内核原理",desc:"深入理解算子内核的执行机制",wiki:"https://wiki.example.com/11"}
]
},
{
id: 5,
name: "测试验证",
icon: "✅",
expanded: false,
children: [],
items: [
{title:"单元测试框架",desc:"算子单元测试的框架和工具",wiki:"https://wiki.example.com/17"}
]
}
];
function log(message) {
const logDiv = document.getElementById('console-log');
logDiv.textContent += '\n' + new Date().toLocaleTimeString() + ' - ' + message;
console.log(message);
}
function checkLocalStorage() {
const result = document.getElementById('localStorage-result');
let output = '';
const keys = ['learningCategories', 'operator_efficiency_learningCategories'];
output += '=== localStorage 内容检查 ===\n\n';
keys.forEach(key => {
const data = localStorage.getItem(key);
if (data) {
try {
const parsed = JSON.parse(data);
output += `✓ 找到键: ${key}\n`;
output += ` 数据类型: ${Array.isArray(parsed) ? '数组' : typeof parsed}\n`;
output += ` 数据长度: ${Array.isArray(parsed) ? parsed.length : 'N/A'}\n`;
if (Array.isArray(parsed) && parsed.length > 0) {
output += ` 第一项: ${JSON.stringify(parsed[0], null, 2)}\n`;
}
} catch (e) {
output += `✗ 键: ${key} (解析失败: ${e.message})\n`;
output += ` 原始内容: ${data.substring(0, 200)}...\n`;
}
} else {
output += `✗ 键: ${key} (不存在)\n`;
}
output += '\n';
});
result.textContent = output;
log('已检查 localStorage');
}
function clearAllData() {
localStorage.removeItem('learningCategories');
localStorage.removeItem('operator_efficiency_learningCategories');
log('已清除所有数据');
checkLocalStorage();
alert('数据已清除！');
}
function loadDefaultData() {
localStorage.setItem('learningCategories', JSON.stringify(defaultData));
log('已加载默认数据');
checkLocalStorage();
alert('默认数据已加载！');
}
function renderTestCategories() {
const container = document.getElementById('test-categories');
let html = '<h4>分类列表 (' + defaultData.length + ' 个)</h4><ul class="category-list">';
defaultData.forEach(cat => {
const itemCount = cat.items ? cat.items.length : 0;
const childCount = cat.children ? cat.children.length : 0;
html += '<li class="category-item">';
html += `<strong>${cat.icon} ${cat.name}</strong><br>`;
html += `ID: ${cat.id} | 文档: ${itemCount} | 子分类: ${childCount}`;
html += '</li>';
});
html += '</ul>';
container.innerHTML = html;
log('已渲染测试分类列表');
}
function testDataStructure() {
const result = document.getElementById('localStorage-result');
let output = '=== 数据结构测试 ===\n\n';
try {
const stored = localStorage.getItem('learningCategories');
if (!stored) {
output += '✗ localStorage 中没有 learningCategories 数据\n';
output += '\n建议：点击"加载默认数据"按钮\n';
} else {
const data = JSON.parse(stored);
output += `✓ 数据加载成功\n`;
output += `✓ 数据类型: ${Array.isArray(data) ? '数组 ✓' : '非数组 ✗'}\n`;
output += `✓ 数据长度: ${data.length}\n\n`;
if (Array.isArray(data)) {
data.forEach((cat, index) => {
output += `分类 ${index + 1}:\n`;
output += ` - 有 id: ${cat.hasOwnProperty('id') ? '✓' : '✗'}\n`;
output += ` - 有 name: ${cat.hasOwnProperty('name') ? '✓' : '✗'}\n`;
output += ` - 有 children: ${cat.hasOwnProperty('children') ? '✓' : '✗'}\n`;
output += ` - 有 items: ${cat.hasOwnProperty('items') ? '✓' : '✗'}\n`;
output += ` - 有 expanded: ${cat.hasOwnProperty('expanded') ? '✓' : '✗'}\n`;
});
}
}
} catch (e) {
output += `✗ 错误: ${e.message}\n`;
output += `堆栈: ${e.stack}\n`;
}
result.textContent = output;
log('已测试数据结构');
}
window.addEventListener('DOMContentLoaded', function() {
log('调试页面已加载');
checkLocalStorage();
});
</script>
</body>
</html>