49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
{{define "content"}}
|
|
<!-- Dashboard / Welcome Panel -->
|
|
<div id="panel-welcome" class="tool-panel active">
|
|
<header class="page-header">
|
|
<h1>探索工具箱</h1>
|
|
<p>欢迎使用个人生产力助手，点击下方卡片开始工作。</p>
|
|
</header>
|
|
|
|
<div id="tools-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
|
|
<!-- JS 动态注入 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tools Panels Containers -->
|
|
{{template "zitie" .}}
|
|
{{template "learn_number" .}}
|
|
|
|
<script>
|
|
// 首页 Tile 渲染
|
|
async function renderDashboard() {
|
|
try {
|
|
const response = await fetch('/api/tools');
|
|
const tools = await response.json();
|
|
const grid = document.getElementById('tools-grid');
|
|
grid.innerHTML = '';
|
|
tools.forEach(tool => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.style.cssText = 'cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 12px; height: 100%;';
|
|
card.innerHTML = `
|
|
<div style="font-size: 40px;">${tool.emoji || '🛠️'}</div>
|
|
<h3 style="margin: 0; font-size: 20px; font-weight: 700;">${tool.name}</h3>
|
|
<p style="margin: 0; color: #86868b; font-size: 15px; line-height: 1.4;">${tool.desc}</p>
|
|
`;
|
|
card.onclick = () => navigateTo(`/${tool.id}`);
|
|
card.onmouseover = () => card.style.transform = 'translateY(-5px)';
|
|
card.onmouseout = () => card.style.transform = 'translateY(0)';
|
|
grid.appendChild(card);
|
|
});
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
// 页面加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
renderDashboard();
|
|
});
|
|
</script>
|
|
{{end}}
|