feat(typesetting): Wave 1 - 对齐修复+底部对齐、封面页字号豁免、字号UI改造

- 修复对齐按钮缺少click handler的缺陷,新增事件委托
- 三态对齐切换: 居顶(↑) -> 居中(↕) -> 居底(↓)
- 封面页和尾页通过CSS变量重置不受全局fontScale影响
- 字号控制从slider改为dropdown+自定义输入,预设0.5/0.8/1.0/1.2/1.5/2.0
This commit is contained in:
augushong
2026-05-16 00:23:36 +08:00
committed by Atlas
parent b8c05e0329
commit 2b9bfb179f
3 changed files with 106 additions and 20 deletions

View File

@@ -238,8 +238,17 @@
<span>渲染预览</span>
<div style="display:inline-flex;align-items:center;gap:8px;float:right;">
<span style="font-size:12px;color:#666;">字号</span>
<input type="range" id="font-scale-slider" min="0.5" max="2.0" step="0.1" value="1.0"
style="width:100px;vertical-align:middle;">
<select id="font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
<option value="0.5">0.5x</option>
<option value="0.8">0.8x</option>
<option value="1.0" selected>1.0x</option>
<option value="1.2">1.2x</option>
<option value="1.5">1.5x</option>
<option value="2.0">2.0x</option>
<option value="custom">自定义</option>
</select>
<input type="number" id="font-scale-custom" min="0.5" max="2.0" step="0.1" value="1.0"
style="width:60px;height:24px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
<span id="font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
</div>
</div>
@@ -420,27 +429,39 @@
// 初始同步预览区
PhoneImageEngine.syncPreview();
// 字号倍数 Slider
var $slider = $('#font-scale-slider');
// 字号倍数 Dropdown + 自定义输入
var $scaleSelect = $('#font-scale-select');
var $scaleCustom = $('#font-scale-custom');
var $scaleValue = $('#font-scale-value');
var fontScalePresets = [0.5, 0.8, 1.0, 1.2, 1.5, 2.0];
// 拖动中: 仅更新CSS变量和显示值,不触发html2canvas
$slider.on('input', function() {
var val = parseFloat($(this).val());
function setFontScaleUI(val) {
var $select = $('#font-scale-select');
var $custom = $('#font-scale-custom');
if (fontScalePresets.indexOf(val) >= 0) {
$select.val(String(val));
$custom.hide();
} else {
$select.val('custom');
$custom.val(val).show();
}
$('#font-scale-value').text(parseFloat(val).toFixed(1) + 'x');
}
function applyFontScaleValue(val) {
val = Math.max(0.5, Math.min(2.0, parseFloat(val) || 1.0));
$scaleValue.text(val.toFixed(1) + 'x');
currentConfig.fontScale = val;
document.getElementById('render-preview').style.setProperty('--pi-font-scale', val);
var staging = document.getElementById('render-staging');
if (staging) staging.style.setProperty('--pi-font-scale', val);
PhoneImageEngine.updateConfig({ fontScale: val });
});
}
// 松手后: 触发完整渲染(重新分页 + html2canvas截图)
$slider.on('change', function() {
var val = parseFloat($(this).val());
function triggerFontScaleSave(val) {
val = parseFloat(val);
PhoneImageLogPanel.log('字号调整为 ' + val.toFixed(1) + 'x', 'info');
doRender({ fontScale: val });
// 触发保存,确保字号倍数持久化
updateSaveState('saving');
PhoneImageEngine.saveConfig(postData.postId, {
size: currentConfig.size,
@@ -455,12 +476,42 @@
PhoneImageLogPanel.log('字号保存失败: ' + err, 'error');
updateSaveState('error');
});
}
// 下拉选择: 预设值直接应用,自定义则显示输入框
$scaleSelect.on('change', function() {
var selected = $(this).val();
if (selected === 'custom') {
$scaleCustom.show().focus();
} else {
$scaleCustom.hide();
var val = parseFloat(selected);
applyFontScaleValue(val);
triggerFontScaleSave(val);
}
});
// 初始化时更新 Slider 显示值
// 自定义输入: 实时预览
$scaleCustom.on('input', function() {
var val = parseFloat($(this).val());
if (!isNaN(val) && val >= 0.5 && val <= 2.0) {
applyFontScaleValue(val);
}
});
// 自定义输入: 失焦时触发保存
$scaleCustom.on('change', function() {
var val = parseFloat($(this).val());
if (isNaN(val) || val < 0.5) val = 0.5;
if (val > 2.0) val = 2.0;
$(this).val(val);
applyFontScaleValue(val);
triggerFontScaleSave(val);
});
// 初始化时更新字号显示值
if (initConfig.fontScale && initConfig.fontScale !== 1) {
$slider.val(initConfig.fontScale);
$scaleValue.text(parseFloat(initConfig.fontScale).toFixed(1) + 'x');
setFontScaleUI(initConfig.fontScale);
}
// ========== 设置弹框 ==========
@@ -734,8 +785,7 @@
if (cfg.watermark !== undefined) currentConfig.watermark = cfg.watermark;
if (cfg.fontScale !== undefined) {
currentConfig.fontScale = cfg.fontScale;
$slider.val(cfg.fontScale);
$scaleValue.text(parseFloat(cfg.fontScale).toFixed(1) + 'x');
setFontScaleUI(cfg.fontScale);
}
lastOutputId = outputId;