Initial commit: Modular personal toolbox with high-fidelity Chinese stroke order tool and CI/CD

cmd/toolbox/web/index.html

@@ -0,0 +1,80 @@
+{{define "content"}}
+
+<!-- 注入各个工具面板 -->
+{{template "zitie" .}}
+{{template "learn_number" .}}
+
+<!-- 欢迎面板 -->
+<div id="panel-welcome" class="tool-panel">
+    <header class="page-header">
+        <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>
+</div>
+
+<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';
+    }
+
+    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; }
+    }
+</script>
+{{end}}

cmd/toolbox/web/layout.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Title}} | Own-Tools</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖋️</text></svg>">
+    
+    {{if .GA_ID}}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{.GA_ID}}"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '{{.GA_ID}}');
+    </script>
+    {{end}}
+
+    <style>
+        :root { --sidebar-width: 260px; --apple-bg: #f5f5f7; --apple-blue: #0071e3; --sidebar-bg: rgba(255, 255, 255, 0.9); }
+        * { box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: var(--apple-bg); color: #1d1d1f; display: flex; height: 100vh; width: 100vw; overflow: hidden; }
+        
+        /* Mobile Menu */
+        #menu-toggle { display: none; }
+        .menu-btn { display: none; position: fixed; top: 20px; left: 20px; z-index: 1000; padding: 10px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); cursor: pointer; }
+
+        .sidebar {
+            width: var(--sidebar-width); min-width: var(--sidebar-width);
+            background: var(--sidebar-bg); backdrop-filter: blur(20px);
+            border-right: 1px solid #d2d2d7; display: flex; flex-direction: column;
+            padding: 24px 0; z-index: 100; transition: transform 0.3s ease;
+        }
+        .sidebar-header { padding: 0 24px 24px; border-bottom: 1px solid #e5e5e7; margin-bottom: 16px; }
+        .sidebar-header h2 { font-size: 22px; font-weight: 700; margin: 0; color: #1d1d1f; letter-spacing: -0.5px; cursor: pointer; }
+        
+        .nav-list { flex: 1; overflow-y: auto; }
+        .nav-item { padding: 12px 24px; cursor: pointer; transition: all 0.2s; font-size: 15px; font-weight: 500; color: #424245; display: flex; align-items: center; gap: 12px; }
+        .nav-item:hover { background: rgba(0,0,0,0.04); color: #000; }
+        .nav-item.active { background: var(--apple-blue); color: #ffffff; }
+
+        .main-container { flex: 1; display: flex; flex-direction: column; overflow-y: auto; width: 100%; }
+        .main-content { padding: 40px 60px; width: 100%; }
+
+        /* Unified Page Header */
+        .page-header { margin-bottom: 32px; }
+        .page-header h1 { font-size: 34px; font-weight: 700; margin: 0 0 8px 0; }
+        .page-header p { font-size: 18px; color: #86868b; margin: 0; }
+
+        @media (max-width: 768px) {
+            .sidebar { position: fixed; left: -260px; height: 100%; }
+            #menu-toggle:checked ~ .sidebar { transform: translateX(260px); }
+            .menu-btn { display: block; }
+            .main-content { padding: 80px 20px 20px; }
+        }
+
+        .tool-panel { display: none; }
+        .tool-panel.active { display: block; animation: fadeIn 0.3s ease-out; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+        /* Shared Components */
+        .card { background: white; border-radius: 18px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.05); }
+        .tabs-container { display: flex; gap: 10px; border-bottom: 1px solid #d2d2d7; margin-bottom: 24px; overflow-x: auto; }
+        .tab-btn { padding: 10px 20px; cursor: pointer; font-size: 16px; font-weight: 600; color: #86868b; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
+        .tab-btn.active { color: var(--apple-blue); border-bottom-color: var(--apple-blue); }
+        
+        /* Buttons */
+        button { 
+            background-color: var(--apple-blue); color: white; border: none; padding: 0 30px; 
+            border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; height: 48px;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center;
+        }
+        button:hover { background-color: #0077ed; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,113,227,0.2); }
+        button:active { transform: translateY(0); }
+        button:disabled { background-color: #d2d2d7; cursor: not-allowed; transform: none; box-shadow: none; }
+
+        /* Form Controls */
+        textarea, select { 
+            padding: 14px 18px; border: 1px solid #d2d2d7; border-radius: 12px; font-size: 17px; 
+            background-color: #fbfbfd; width: 100%; box-sizing: border-box; transition: all 0.2s;
+            font-family: inherit;
+        }
+        textarea:focus, select:focus {
+            border-color: var(--apple-blue); background-color: #fff;
+            box-shadow: 0 0 0 4px rgba(0,113,227,0.1); outline: none;
+        }
+        select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 40px; }
+    </style>
+</head>
+<body>
+    <input type="checkbox" id="menu-toggle">
+    <label for="menu-toggle" class="menu-btn">☰</label>
+
+    <div class="sidebar">
+        <div class="sidebar-header" onclick="navigateTo('/')"><h2>Own-Tools</h2></div>
+        <div id="nav-list" class="nav-list">
+            <div id="nav-welcome" class="nav-item" onclick="navigateTo('/'); document.getElementById('menu-toggle').checked = false;"><span>🏠</span> 仪表盘</div>
+        </div>
+    </div>
+
+    <div class="main-container">
+        <div class="main-content">
+            {{template "content" .}}
+        </div>
+    </div>
+
+    <script>
+        async function loadTools() {
+            try {
+                const response = await fetch('/api/tools');
+                const tools = await response.json();
+                const navList = document.getElementById('nav-list');
+                tools.forEach(tool => {
+                    const item = document.createElement('div');
+                    item.className = 'nav-item'; item.id = `nav-${tool.id}`;
+                    item.innerHTML = `<span>🛠️</span> ${tool.name}`;
+                    item.onclick = () => { navigateTo(`/${tool.id}`); document.getElementById('menu-toggle').checked = false; };
+                    navList.appendChild(item);
+                });
+                renderCurrentPath();
+            } catch (e) { console.error(e); }
+        }
+
+        function navigateTo(path) {
+            window.history.pushState({}, '', path);
+            renderCurrentPath();
+        }
+
+        function renderCurrentPath() {
+            const path = window.location.pathname.replace('/', '') || 'welcome';
+            
+            // 隐藏所有面板
+            document.querySelectorAll('.tool-panel').forEach(p => p.classList.remove('active'));
+            
+            // 显示目标面板
+            const target = document.getElementById(`panel-${path}`);
+            if (target) {
+                target.classList.add('active');
+            } else {
+                // 如果找不到路由，默认回首页
+                document.getElementById('panel-welcome').classList.add('active');
+            }
+            
+            // 导航高亮
+            document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+            const activeNav = document.getElementById(`nav-${path}`) || document.getElementById('nav-welcome');
+            if (activeNav) activeNav.classList.add('active');
+        }
+
+        window.onpopstate = renderCurrentPath;
+        loadTools();
+    </script>
+</body>
+</html>

cmd/toolbox/web/tools/learn_number.html

@@ -0,0 +1,38 @@
+{{define "learn_number"}}
+<div id="panel-learn-number" class="tool-panel">
+    <header class="page-header">
+        <h1>幼儿数学助手</h1>
+        <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>
+                    </select>
+                </div>
+            </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;">
+        <iframe id="math-frame" style="width:100%; height:100%; border:none;"></iframe>
+    </div>
+</div>
+{{end}}

cmd/toolbox/web/tools/zitie.html

@@ -0,0 +1,43 @@
+{{define "zitie"}}
+<div id="panel-zitie" class="tool-panel">
+    <header class="page-header">
+        <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>
+    <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="flex: 1; min-width: 200px;">
+                    <label>纸张大小</label>
+                    <select id="paper_size">
+                        <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>
+                        <option value="songti">华光书宋</option>
+                    </select>
+                </div>
+                <button onclick="generateZitiePDF()">生成字帖预览</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>
+</div>
+{{end}}