78 lines
4.0 KiB
HTML
78 lines
4.0 KiB
HTML
{{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="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: 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 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>
|
|
</select>
|
|
</div>
|
|
<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 id="btn-generate-zitie" onclick="generateZitiePDF()">生成 PDF 字帖</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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}}
|