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/main.go
+11 -4
View File
@@ -9,6 +9,7 @@ import (
"log"
"net/http"
"os"
"sort"
"strconv"
"toolbox/pkg/base"
_ "toolbox/pkg/learnnumber"
@@ -81,11 +82,17 @@ func main() {
r.GET("/", serveIndex)
r.GET("/api/tools", func(c *gin.Context) {
var list []map[string]string
for _, t := range base.Registry {
ids := make([]string, 0, len(base.Registry))
for id := range base.Registry { ids = append(ids, id) }
sort.Strings(ids)
for _, id := range ids {
t := base.Registry[id]
list = append(list, map[string]string{
"id": t.ID(),
"name": t.Name(),
"desc": t.Description(),
"id": t.ID(),
"name": t.Name(),
"desc": t.Description(),
"emoji": t.Emoji(),
})
}
c.JSON(http.StatusOK, list)
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}}
cmd/toolbox/web/layout.html
+1 -1
View File
@@ -113,7 +113,7 @@
tools.forEach(tool => {
const item = document.createElement('div');
item.className = 'nav-item'; item.id = `nav-${tool.id}`;
item.innerHTML = `<span>🛠️</span> ${tool.name}`;
item.innerHTML = `<span>${tool.emoji || '🛠️'}</span> ${tool.name}`;
item.onclick = () => { navigateTo(`/${tool.id}`); document.getElementById('menu-toggle').checked = false; };
navList.appendChild(item);
});
cmd/toolbox/web/tools/learn_number.html
+144 -20
View File
@@ -2,37 +2,161 @@
<div id="panel-learn-number" class="tool-panel">
<header class="page-header">
<h1>幼儿数学助手</h1>
<p>通过趣味图形和基础练习，培养孩子的数感与逻辑。</p>
<p>通过高品质卡通图形，培养孩子的数感与逻辑思维。</p>
</header>
<div class="tabs-container">
<div id="tab-counting" class="tab-btn active">数图形练习</div>
</div>
<div class="card">
<div style="display: flex; flex-direction: column; gap: 24px;">
<div style="display: flex; gap: 30px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 250px;">
<label style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 12px;">图标种类数 (1 - 5)</label>
<input type="range" id="icon_types" min="1" max="5" value="3" style="width: 100%;" oninput="this.nextElementSibling.value = this.value">
<output style="font-size: 18px; font-weight: 700; color: var(--apple-blue); margin-top: 10px; display: block;">3</output>
</div>
<div style="flex: 1; min-width: 250px;">
<label style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 12px;">总图案数量 (种类数 - 30)</label>
<input type="range" id="total_count" min="5" max="30" value="15" style="width: 100%;" oninput="this.nextElementSibling.value = this.value">
<output style="font-size: 18px; font-weight: 700; color: var(--apple-blue); margin-top: 10px; display: block;">15</output>
</div>
<div style="width: 240px;">
<label>纸张大小</label>
<select id="math_paper_size">
<option value="A4">A4</option>
<option value="Letter">Letter</option>
<div style="display: flex; flex-direction: column; gap: 32px;">
<!-- 设置区 -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; align-items: flex-end;">
<div class="input-group">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">练习主题</label>
<select id="math_category" onchange="updateIconPreview()" class="apple-select">
<option value="fruits">素材库 (SVG)</option>
<option value="shapes">基础几何图形</option>
</select>
</div>
<div class="input-group">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">种类 (Max 6)</label>
<input type="number" id="icon_types" min="1" max="6" value="3" class="apple-input">
</div>
<div class="input-group">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">总量 (Max 30)</label>
<input type="number" id="total_count" min="1" max="30" value="15" class="apple-input">
</div>
<div class="input-group">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">页数 (1-10)</label>
<input type="number" id="page_count" min="1" max="10" value="1" class="apple-input">
</div>
<div class="input-group">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">纸张大小</label>
<select id="math_paper_size" class="apple-select">
<option value="Letter" selected>Letter (8.5x11in)</option>
<option value="A4">A4 (210x297mm)</option>
</select>
</div>
<button id="btn-generate-math" onclick="generateMathPDF()" style="height: 46px; padding: 0 20px;">生成练习帖</button>
</div>
<!-- 图标预览 -->
<div id="icon-preview-container" style="padding: 24px; background: #fbfbfd; border-radius: 16px; border: 1px solid #e5e5e7;">
<label style="font-size: 11px; font-weight: 700; color: #86868b; display: block; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px;">当前主题包含的图案：</label>
<div id="icon-list" style="display: flex; gap: 16px; flex-wrap: wrap;">
<!-- JS 动态注入 -->
</div>
</div>
<div id="math-error-msg" style="color: #ff3b30; font-size: 14px; display: none; font-weight: 500; text-align: center; padding: 10px; background: #fff2f2; border-radius: 8px;">
⚠️ 请确保：总数 >= 种类数，页数 1-10。
</div>
<button onclick="generateMathPDF()">生成数学练习帖</button>
</div>
</div>
<div id="math-preview" style="display:none; width: 100%; height: 800px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); background: #fff; border: 1px solid #d2d2d7;">
<div id="math-preview" style="display:none; width: 100%; height: 850px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); background: #fff; border: 1px solid #d2d2d7; margin-top: 40px;">
<iframe id="math-frame" style="width:100%; height:100%; border:none;"></iframe>
</div>
</div>
<style>
.apple-input, .apple-select {
width: 100%; height: 46px; padding: 0 12px; border: 1px solid #d2d2d7; border-radius: 10px;
font-size: 15px; font-weight: 500; background-color: #ffffff; transition: all 0.2s ease;
outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); line-height: 46px;
}
.apple-input:focus, .apple-select:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.icon-thumbnail {
width: 64px; height: 64px; background: white; border-radius: 12px; border: 1px solid #e5e5e7;
display: flex; align-items: center; justify-content: center; padding: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04); transition: all 0.2s ease;
}
.icon-thumbnail:hover { transform: translateY(-3px); border-color: #0071e3; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
</style>
<script>
let allCategories = {};
async function initMathTool() {
try {
const res = await fetch('/api/learn-number/categories');
allCategories = await res.json();
updateIconPreview();
} catch (e) { console.error(e); }
}
function calculateBBox(paths) {
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
// 增强正则：匹配所有数字，包括带逗号的
const numRegex = /-?\d+\.?\d*/g;
paths.forEach(path => {
const matches = path.match(numRegex);
if (matches) {
for (let i=0; i<matches.length; i+=2) {
const x = parseFloat(matches[i]);
const y = parseFloat(matches[i+1]);
if (!isNaN(x) && !isNaN(y)) {
if (x < minX) minX = x; if (x > maxX) maxX = x;
if (y < minY) minY = y; if (y > maxY) maxY = y;
}
}
}
});
if (minX === Infinity) return "0 0 1024 1024";
const w = maxX - minX, h = maxY - minY;
const padding = Math.max(w, h) * 0.15;
return `${minX - padding} ${minY - padding} ${w + padding*2} ${h + padding*2}`;
}
function updateIconPreview() {
const cat = document.getElementById('math_category').value;
const icons = allCategories[cat] || [];
const container = document.getElementById('icon-list');
container.innerHTML = '';
icons.forEach(icon => {
const div = document.createElement('div');
div.className = 'icon-thumbnail';
const viewBox = calculateBBox(icon.Paths);
const pathsHtml = icon.Paths.map(p => `<path d="${p}" fill="none" stroke="black" stroke-width="2%" stroke-linecap="round" stroke-linejoin="round" />`).join('');
div.innerHTML = `<svg viewBox="${viewBox}" style="width: 100%; height: 100%; overflow: visible;">${pathsHtml}</svg>`;
div.title = icon.Name;
container.appendChild(div);
});
}
async function generateMathPDF() {
const total_count = parseInt(document.getElementById('total_count').value);
const icon_types = parseInt(document.getElementById('icon_types').value);
const page_count = parseInt(document.getElementById('page_count').value || 1);
const category = document.getElementById('math_category').value;
const paper_size = document.getElementById('math_paper_size').value;
const errorMsg = document.getElementById('math-error-msg');
if (total_count < icon_types || icon_types > 6 || total_count > 30) {
errorMsg.style.display = 'block';
return;
}
errorMsg.style.display = 'none';
const btn = document.getElementById('btn-generate-math');
const originalText = btn.innerText;
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, page_count, category, paper_size })
});
const blob = await response.blob();
const url = URL.createObjectURL(blob);
document.getElementById('math-preview').style.display = 'block';
document.getElementById('math-frame').src = url;
} catch (e) {
alert('生成失败: ' + e);
} finally {
btn.innerText = originalText; btn.disabled = false;
}
}
setTimeout(initMathTool, 200);
</script>
{{end}}
cmd/toolbox/web/tools/zitie.html
+57 -23
View File
@@ -1,43 +1,77 @@
{{define "zitie"}}
<div id="panel-zitie" class="tool-panel">
<header class="page-header">
<h1>汉字字帖生成器</h1>
<p>生成高颜值的硬笔/毛笔书法练习帖。</p>
<h1>汉字字帖生成</h1>
<p>提供智能缺字处理和古风排版的专业字帖工具。</p>
</header>
<div class="tabs-container">
<div id="tab-teaching" class="tab-btn active" onclick="switchZitieTab('teaching')">2x3 教学方格</div>
<div id="tab-step" class="tab-btn" onclick="switchZitieTab('step')">步进式分解</div>
<div id="tab-manuscript" class="tab-btn" onclick="switchZitieTab('manuscript')">古风竖排</div>
<div id="tab-teaching" class="tab-btn active" onclick="switchZitieMode('teaching')">教学版 (2x3)</div>
<div id="tab-step" class="tab-btn" onclick="switchZitieMode('step')">临摹版 (9列)</div>
<div id="tab-manuscript" class="tab-btn" onclick="switchZitieMode('manuscript')">古风纵写</div>
</div>
<div class="card">
<div style="display: flex; flex-direction: column; gap: 24px;">
<div class="input-group">
<label id="input-label">输入汉字内容</label>
<textarea id="chars" placeholder="支持多行输入...">永和九年，岁在癸丑。</textarea>
</div>
<div style="display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;">
<div style="display: flex; flex-direction: column; gap: 20px;">
<textarea id="chars" rows="5" placeholder="请输入汉字" style="resize: vertical; min-height: 120px;">天道酬勤 厚德载物</textarea>
<div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;">
<div style="flex: 1; min-width: 200px;">
<label>纸张大小</label>
<select id="paper_size">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">纸张大小</label>
<select id="paper_size" class="apple-select">
<option value="Letter" selected>Letter (8.5x11in)</option>
<option value="A4">A4 (210x297mm)</option>
<option value="Letter">Letter (8.5x11in)</option>
</select>
</div>
<div id="font-select-group" style="flex: 1; min-width: 200px; display: none;">
<label>书法字体</label>
<select id="font_type">
<option value="kaiti">华光楷体</option>
<option value="xingshu">华光行草</option>
<option value="lishu">华光隶变</option>
<div id="font-type-container" style="flex: 1; min-width: 200px; display: none;">
<label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">书法字体</label>
<select id="font_type" class="apple-select">
<option value="kaiti">华光楷体 (推荐)</option>
<option value="songti">华光书宋</option>
<option value="lishu">华光隶变</option>
<option value="xingshu">华光行草</option>
</select>
</div>
<button onclick="generateZitiePDF()">生成字帖预览</button>
<button id="btn-generate-zitie" onclick="generateZitiePDF()">生成 PDF 字帖</button>
</div>
</div>
</div>
<div id="zitie-preview" style="display:none; width: 100%; height: 800px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); background: #fff; border: 1px solid #d2d2d7;">
<iframe id="zitie-frame" style="width:100%; height:100%; border:none;"></iframe>
<div id="zitie-preview" style="display:none; width: 100%; height: 850px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); background: #fff; border: 1px solid #d2d2d7;">
<iframe id="pdf-frame" style="width:100%; height:100%; border:none;"></iframe>
</div>
</div>
<script>
let currentMode = 'teaching';
function switchZitieMode(mode) {
currentMode = mode;
document.querySelectorAll('#panel-zitie .tab-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`tab-${mode}`).classList.add('active');
document.getElementById('font-type-container').style.display = (mode === 'manuscript') ? 'block' : 'none';
}
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;
if (!chars.trim()) { alert('请输入汉字'); return; }
const btn = document.getElementById('btn-generate-zitie');
const originalText = btn.innerText;
btn.innerText = '生成中...'; btn.disabled = true;
try {
const response = await fetch(`/api/zitie/${currentMode}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ chars, paper_size, font_type })
});
const blob = await response.blob();
const url = URL.createObjectURL(blob);
document.getElementById('zitie-preview').style.display = 'block';
document.getElementById('pdf-frame').src = url;
} catch (e) {
alert('生成失败: ' + e);
} finally {
btn.innerText = originalText; btn.disabled = false;
}
}
</script>
{{end}}