mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 16:22:49 +08:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user