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

cmd/toolbox/main.go

@@ -0,0 +1,110 @@
+package main
+
+import (
+	"bytes"
+	"embed"
+	"flag"
+	"html/template"
+	"io/fs"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+	"toolbox/pkg/base"
+	_ "toolbox/pkg/zitie" // 匿名导入以触发 init()
+
+	"github.com/gin-gonic/gin"
+)
+
+//go:embed web/*
+var webFS embed.FS
+
+func main() {
+	portFlag := flag.Int("port", 0, "端口号 (优先于环境变量 PORT)")
+	gaFlag := flag.String("ga", "", "Google Analytics ID")
+	flag.Parse()
+
+	gaID := *gaFlag
+	if gaID == "" {
+		gaID = os.Getenv("GA_ID")
+	}
+
+	if os.Getenv("GIN_MODE") == "release" {
+		gin.SetMode(gin.ReleaseMode)
+	}
+
+	r := gin.New()
+	r.Use(gin.Logger(), gin.Recovery())
+	r.RedirectTrailingSlash = false
+	r.RedirectFixedPath = false
+	_ = r.SetTrustedProxies(nil)
+
+	// 1. 自动发现并注册工具路由
+	api := r.Group("/api")
+	{
+		for id, tool := range base.Registry {
+			if err := tool.Init(); err != nil {
+				log.Fatalf("Failed to initialize tool %s: %v", id, err)
+			}
+			tool.RegisterRoutes(api.Group("/" + id))
+		}
+	}
+
+	// 2. 静态资源
+	subFS, _ := fs.Sub(webFS, "web")
+	r.StaticFS("/static", http.FS(subFS))
+
+	// 3. 模板引擎初始化
+	// 关键修复：先 Sub 再 Parse，确保路径匹配
+	tmpl, err := template.ParseFS(subFS, "layout.html", "index.html")
+	if err != nil {
+		log.Fatalf("Failed to parse templates: %v", err)
+	}
+
+	// 通用页面渲染函数
+	serveIndex := func(c *gin.Context) {
+		data := gin.H{
+			"Title": "Own-Tools",
+			"GA_ID": gaID,
+		}
+		
+		var buf bytes.Buffer
+		// 因为已经 Sub 了，模板名就是文件名
+		if err := tmpl.ExecuteTemplate(&buf, "layout.html", data); err != nil {
+			c.String(http.StatusInternalServerError, "Template error: %v", err)
+			return
+		}
+		c.Data(http.StatusOK, "text/html; charset=utf-8", buf.Bytes())
+	}
+
+	r.GET("/", serveIndex)
+	r.GET("/api/tools", func(c *gin.Context) {
+		var list []map[string]string
+		for _, t := range base.Registry {
+			list = append(list, map[string]string{
+				"id":   t.ID(),
+				"name": t.Name(),
+				"desc": t.Description(),
+			})
+		}
+		c.JSON(http.StatusOK, list)
+	})
+
+	// 4. 全路径回退 (SPA Routing)
+	r.NoRoute(serveIndex)
+
+	// 5. 启动
+	var finalPort string
+	if *portFlag > 0 {
+		finalPort = strconv.Itoa(*portFlag)
+	} else if envPort := os.Getenv("PORT"); envPort != "" {
+		finalPort = envPort
+	} else {
+		finalPort = "8080"
+	}
+
+	log.Printf("Toolbox server starting on :%s", finalPort)
+	if err := r.Run(":" + finalPort); err != nil {
+		log.Fatalf("Server failed: %v", err)
+	}
+}

cmd/toolbox/web/index.html

@@ -0,0 +1,107 @@
+{{define "content"}}
+<!-- 汉字字帖面板 -->
+<div id="panel-zitie" class="tool-panel">
+    <header class="page-header">
+        <h1>汉字字帖生成器</h1>
+        <p>生成高颜值的硬笔/毛笔书法练习帖，支持 A4/Letter 高清矢量打印。</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">输入汉字内容 (2x3 教学方格模式下标点将被自动过滤)</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 style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 8px;">纸张大小</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 style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 8px;">书法字体</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="generatePDF()">生成高清预览</button>
+            </div>
+        </div>
+    </div>
+    <div id="pdf-preview-container" style="display:none; width: 100%; height: 850px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); background: #fff; border: 1px solid #d2d2d7;">
+        <iframe id="pdf-frame" style="width: 100%; height: 100%; border: none;"></iframe>
+    </div>
+</div>
+
+<!-- 默认欢迎面板 -->
+<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>
+</div>
+
+<script>
+    let currentMode = 'teaching';
+
+    function switchZitieTab(mode) {
+        currentMode = mode;
+        document.querySelectorAll('.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';
+        
+        const labels = {
+            'teaching': '输入汉字内容 (2x3 教学方格模式下标点将被自动过滤)',
+            'step': '输入汉字内容 (步进式分解模式下标点将被自动过滤)',
+            'manuscript': '输入汉字内容 (古风竖排支持换行，标点将被过滤)'
+        };
+        document.getElementById('input-label').innerText = labels[mode];
+    }
+
+    async function generatePDF() {
+        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('button');
+        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 })
+            });
+            if (response.ok) {
+                const blob = await response.blob();
+                document.getElementById('pdf-preview-container').style.display = 'block';
+                document.getElementById('pdf-frame').src = URL.createObjectURL(blob);
+                if(window.innerWidth < 768) document.getElementById('pdf-preview-container').scrollIntoView({behavior: 'smooth'});
+            } else { alert('生成失败'); }
+        } catch (e) { alert('网络错误'); } finally { 
+            btn.innerText = originalText; 
+            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>