<!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>
<link rel="stylesheet" href="css/style.css">
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(to bottom, #ffffff 0%, #fff7ed 100%);
min-height: 100vh;
margin: 0;
}
.header {
background: #fff;
border-bottom: 2px solid #fed7aa;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.category-item {
background: #fff;
border: 2px solid #fed7aa;
border-radius: 8px;
padding: 12px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.category-item:hover {
background: #fff7ed;
border-color: #e85d4d;
}
.category-item.active {
background: #e85d4d;
color: #fff;
}
.debug-panel {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
font-family: monospace;
font-size: 12px;
max-height: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1 style="margin: 0; color: #e85d4d;">📚 学习共享 - 简化测试版</h1>
<p style="margin: 8px 0 0; color: #6b7280;">用于测试分类列表是否正常显示</p>
</div>
</div>
<div class="container">
<div style="display: grid; grid-template-columns: 280px 1fr; gap: 24px;">
<div>
<h2 style="color: #92400e;">📁 分类列表</h2>
<div id="categories"></div>
</div>
<div>
<h2 style="color: #92400e;">📄 内容区域</h2>
<div id="content"></div>
</div>
</div>
<div class="debug-panel">
<strong>调试信息：</strong>
<div id="debug-log"></div>
</div>
</div>
<script>
console.log('=== 脚本开始执行 ===');
const defaultData = [
{ id: 1, name: "版本演进时间图", icon: "📅", items: [
{title:"算子框架发展历程",desc:"从 v1.0 到 v3.0 的完整演进历程"},
{title:"版本特性对比",desc:"各版本核心功能差异对比表"},
{title:"里程碑事件",desc:"算子发展历程中的关键节点"}
]},
{ id: 2, name: "算子开发", icon: "🔨", items: [
{title:"算子开发入门",desc:"算子的基本概念、开发流程和核心原理"},
{title:"开发环境搭建",desc:"完整的开发环境配置指南"}
]},
{ id: 3, name: "构建工程", icon: "🏗️", items: [
{title:"工程结构说明",desc:"算子工程的标准目录结构和文件组织"}
]},
{ id: 4, name: "算子实现原理", icon: "⚙️", items: [
{title:"算子内核原理",desc:"深入理解算子内核的执行机制"}
]},
{ id: 5, name: "测试验证", icon: "✅", items: [
{title:"单元测试框架",desc:"算子单元测试的框架和工具"}
]}
];
let data = [];
let activeId = null;
function debugLog(msg) {
const timestamp = new Date().toLocaleTimeString();
const logDiv = document.getElementById('debug-log');
if (logDiv) {
logDiv.innerHTML += '<div>' + timestamp + ' - ' + msg + '</div>';
}
console.log('[' + timestamp + ']', msg);
}
function loadData() {
debugLog('开始加载数据...');
let stored = localStorage.getItem('learningCategories');
if (stored && stored !== 'null' && stored !== 'undefined') {
try {
data = JSON.parse(stored);
debugLog('从 localStorage 加载数据成功，共 ' + data.length + ' 个分类');
} catch (e) {
debugLog('解析 localStorage 数据失败: ' + e.message);
data = JSON.parse(JSON.stringify(defaultData));
}
} else {
debugLog('localStorage 中没有数据，使用默认数据');
data = JSON.parse(JSON.stringify(defaultData));
localStorage.setItem('learningCategories', JSON.stringify(data));
}
debugLog('数据加载完成: ' + JSON.stringify(data.map(c => c.name)));
}
function renderCategories() {
debugLog('开始渲染分类列表...');
const container = document.getElementById('categories');
if (!container) {
debugLog('错误: 找不到 categories 容器!');
return;
}
debugLog('categories 容器找到，数据有 ' + data.length + ' 项');
let html = '';
data.forEach(function(category, index) {
debugLog('渲染分类 ' + index + ': ' + category.name);
const isActive = category.id === activeId ? ' active' : '';
const itemCount = category.items ? category.items.length : 0;
html += '<div class="category-item" data-id="' + category.id + '" onclick="selectCategory(' + category.id + ')">';
html += '<strong>' + category.icon + ' ' + category.name + '</strong>';
html += ' <span style="font-size:12px;color:#6b7280;">(' + itemCount + ' 篇)</span>';
html += '</div>';
});
container.innerHTML = html;
debugLog('分类列表渲染完成');
}
function selectCategory(id) {
debugLog('选择分类: ' + id);
activeId = id;
renderCategories();
renderContent();
}
function renderContent() {
debugLog('渲染内容...');
const container = document.getElementById('content');
const category = data.find(c => c.id === activeId);
if (!category) {
container.innerHTML = '<p style="color:#9ca3af;padding:40px;text-align:center;">请从左侧选择分类</p>';
return;
}
const items = category.items || [];
let html = '<h3>' + category.icon + ' ' + category.name + '</h3>';
html += '<p>' + items.length + ' 篇文档</p>';
if (items.length === 0) {
html += '<p style="color:#9ca3af;">该分类暂无文档</p>';
} else {
html += '<ul>';
items.forEach(function(item) {
html += '<li style="padding:8px;margin:8px 0;background:#f9f9f9;border-radius:4px;">';
html += '<strong>' + item.title + '</strong><br>';
html += '<span style="color:#6b7280;font-size:14px;">' + item.desc + '</span>';
html += '</li>';
});
html += '</ul>';
}
container.innerHTML = html;
debugLog('内容渲染完成');
}
window.addEventListener('DOMContentLoaded', function() {
debugLog('DOM 加载完成');
debugLog('开始初始化...');
loadData();
renderCategories();
renderContent();
debugLog('初始化完成!');
});
debugLog('脚本加载完成');
</script>
</body>
</html>