haopengzhan/own-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance learn-number with dynamic SVG icons, multi-page support, and modular UI
Build and Push Docker Image / build (push) Successful in 2m26s
Details

Browse Source
This commit is contained in:
haopengzhan
2026-02-25 23:29:35 -08:00
parent 0be94026c5
commit 7cd611140e
12 changed files with 4330 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/toolbox/web/index.html
+37 -69
View File
@@ -1,80 +1,48 @@
{{define "content"}}
<!-- 注入各个工具面板 -->
{{template "zitie" .}}
{{template "learn_number" .}}
<!-- 欢迎面板 -->
<div id="panel-welcome" class="tool-panel">
<!-- Dashboard / Welcome Panel -->
<div id="panel-welcome" class="tool-panel active">
<header class="page-header">
<h1>欢迎使用个人工具箱</h1>
<p>这是您的私人效率基地。请从侧边栏或下方列表选择一个功能开始。</p>
<h1>探索工具箱</h1>
<p>欢迎使用个人生产力助手，点击下方卡片开始工作。</p>
</header>
<div style="margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
<div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/zitie')">
<h3 style="margin-top:0;">🖋️ 汉字字帖生成</h3>
<p style="color: #86868b; line-height: 1.5;">支持多种书法字体的 2x3 教学方格、步进分解和古风竖排信纸。</p>
<div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
</div>
<div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/learn-number')">
<h3 style="margin-top:0;">🔢 幼儿数学助手</h3>
<p style="color: #86868b; line-height: 1.5;">数图形、基础算术等趣味练习。培养孩子的数感与逻辑。</p>
<div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
</div>
<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>
// --- Zitie Tool Logic ---
let currentZitieMode = 'teaching';
function switchZitieTab(mode) {
currentZitieMode = mode;
document.querySelectorAll('#panel-zitie .tab-btn').forEach(btn => btn.classList.remove('active'));
document.getElementById(`tab-${mode}`).classList.add('active');
document.getElementById('font-select-group').style.display = (mode === 'manuscript') ? 'block' : 'none';
// 首页 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); }
}
async function generateZitiePDF() {
const chars = document.getElementById('chars').value;
const paper_size = document.getElementById('paper_size').value;
const font_type = document.getElementById('font_type').value;
const btn = document.querySelector('#panel-zitie button');
btn.innerText = '绘图中...'; btn.disabled = true;
try {
const response = await fetch(`/api/zitie/${currentZitieMode}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ chars, paper_size, font_type })
});
if (response.ok) {
const blob = await response.blob();
document.getElementById('zitie-preview').style.display = 'block';
document.getElementById('zitie-frame').src = URL.createObjectURL(blob);
}
} catch (e) { alert('错误'); } finally { btn.innerText = '生成字帖预览'; btn.disabled = false; }
}
// --- Math Tool Logic ---
async function generateMathPDF() {
const total_count = parseInt(document.getElementById('total_count').value);
const icon_types = parseInt(document.getElementById('icon_types').value);
const paper_size = document.getElementById('math_paper_size').value;
const btn = document.querySelector('#panel-learn-number button');
btn.innerText = '生成中...'; btn.disabled = true;
try {
const response = await fetch('/api/learn-number/counting', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ total_count, icon_types, paper_size })
});
if (response.ok) {
const blob = await response.blob();
document.getElementById('math-preview').style.display = 'block';
document.getElementById('math-frame').src = URL.createObjectURL(blob);
if(window.innerWidth < 768) document.getElementById('math-preview').scrollIntoView({behavior: 'smooth'});
}
} catch (e) { alert('错误'); } finally { btn.innerText = '生成数学练习帖'; btn.disabled = false; }
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
renderDashboard();
});
</script>
{{end}}