mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 16:22:49 +08:00
feat(phone-image): codeFontScale UI控件+集成
- HTML新增代碼字號下拉選擇控件(0.5x-2.0x+自定義輸入) - currentConfig初始化恢復codeFontScale - change事件更新config+applyFontScale+debouncedSaveConfig - 所有saveConfig/saveImages調用包含codeFontScale
This commit is contained in:
augushong
@@ -256,6 +256,19 @@
|
||||
<input type="number" id="table-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="table-font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
|
||||
<span style="font-size:12px;color:#666;margin-left:8px;">代码字号</span>
|
||||
<select id="code-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="code-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="code-font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="render-preview"></div>
|
||||
@@ -298,7 +311,8 @@
|
||||
size: 'xiaohongshu',
|
||||
watermark: '',
|
||||
fontScale: 1,
|
||||
tableFontScale: 1
|
||||
tableFontScale: 1,
|
||||
codeFontScale: 1
|
||||
};
|
||||
|
||||
var postData = {
|
||||
@@ -322,7 +336,8 @@
|
||||
watermark: savedConfig.watermark || '',
|
||||
pageAlignments: savedConfig.pageAlignments || {},
|
||||
fontScale: savedConfig.fontScale || 1,
|
||||
tableFontScale: savedConfig.tableFontScale || 1
|
||||
tableFontScale: savedConfig.tableFontScale || 1,
|
||||
codeFontScale: savedConfig.codeFontScale || 1
|
||||
};
|
||||
|
||||
// 同步当前配置
|
||||
@@ -330,6 +345,7 @@
|
||||
currentConfig.watermark = initConfig.watermark;
|
||||
currentConfig.fontScale = initConfig.fontScale;
|
||||
currentConfig.tableFontScale = initConfig.tableFontScale;
|
||||
currentConfig.codeFontScale = initConfig.codeFontScale;
|
||||
currentConfig.pageAlignments = initConfig.pageAlignments || {};
|
||||
|
||||
// ========== wangeditor 初始化 ==========
|
||||
@@ -486,6 +502,7 @@
|
||||
watermark: currentConfig.watermark,
|
||||
fontScale: currentConfig.fontScale || 1,
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1,
|
||||
content_html: PhoneImageEngine.getContentHtml()
|
||||
}, saveConfigUrl).then(function(data) {
|
||||
if (data.output_id) lastOutputId = data.output_id;
|
||||
@@ -567,6 +584,7 @@
|
||||
watermark: currentConfig.watermark,
|
||||
fontScale: currentConfig.fontScale || 1,
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1,
|
||||
content_html: PhoneImageEngine.getContentHtml()
|
||||
}, saveConfigUrl).then(function(data) {
|
||||
if (data.output_id) lastOutputId = data.output_id;
|
||||
@@ -610,6 +628,67 @@
|
||||
setTableFontScaleUI(initConfig.tableFontScale);
|
||||
}
|
||||
|
||||
// ========== 代码字号下拉 ==========
|
||||
var $codeScaleSelect = $('#code-font-scale-select');
|
||||
var $codeScaleCustom = $('#code-font-scale-custom');
|
||||
var $codeScaleValue = $('#code-font-scale-value');
|
||||
var codeScalePresets = [0.5, 0.8, 1.0, 1.2, 1.5, 2.0];
|
||||
|
||||
function setCodeFontScaleUI(val) {
|
||||
if (codeScalePresets.indexOf(val) >= 0) {
|
||||
$codeScaleSelect.val(String(val));
|
||||
$codeScaleCustom.hide();
|
||||
} else {
|
||||
$codeScaleSelect.val('custom');
|
||||
$codeScaleCustom.val(val).show();
|
||||
}
|
||||
$codeScaleValue.text(parseFloat(val).toFixed(1) + 'x');
|
||||
}
|
||||
|
||||
function applyCodeFontScaleValue(val) {
|
||||
val = Math.max(0.5, Math.min(2.0, parseFloat(val) || 1.0));
|
||||
$codeScaleValue.text(val.toFixed(1) + 'x');
|
||||
currentConfig.codeFontScale = val;
|
||||
PhoneImageEngine.updateConfig({ codeFontScale: val });
|
||||
PhoneImageEngine.applyFontScale();
|
||||
}
|
||||
|
||||
$codeScaleSelect.on('change', function() {
|
||||
var selected = $(this).val();
|
||||
if (selected === 'custom') {
|
||||
$codeScaleCustom.show().focus();
|
||||
} else {
|
||||
$codeScaleCustom.hide();
|
||||
var val = parseFloat(selected);
|
||||
applyCodeFontScaleValue(val);
|
||||
PhoneImageLogPanel.log('代码字号调整为 ' + val.toFixed(1) + 'x', 'info');
|
||||
updateSaveState('saving');
|
||||
PhoneImageEngine.debouncedSaveConfig();
|
||||
}
|
||||
});
|
||||
|
||||
$codeScaleCustom.on('input', function() {
|
||||
var val = parseFloat($(this).val());
|
||||
if (!isNaN(val) && val >= 0.5 && val <= 2.0) {
|
||||
applyCodeFontScaleValue(val);
|
||||
}
|
||||
});
|
||||
|
||||
$codeScaleCustom.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);
|
||||
applyCodeFontScaleValue(val);
|
||||
PhoneImageLogPanel.log('代码字号调整为 ' + val.toFixed(1) + 'x', 'info');
|
||||
updateSaveState('saving');
|
||||
PhoneImageEngine.debouncedSaveConfig();
|
||||
});
|
||||
|
||||
if (initConfig.codeFontScale && initConfig.codeFontScale !== 1) {
|
||||
setCodeFontScaleUI(initConfig.codeFontScale);
|
||||
}
|
||||
|
||||
// ========== 设置弹框 ==========
|
||||
$('#btn-settings').click(function () {
|
||||
var settingsHtml = '<div class="settings-form" style="padding:20px 20px 0;">';
|
||||
@@ -659,7 +738,8 @@
|
||||
var newConfig = {
|
||||
size: currentConfig.size,
|
||||
watermark: currentConfig.watermark,
|
||||
tableFontScale: currentConfig.tableFontScale || 1
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1
|
||||
};
|
||||
if (extraConfig) {
|
||||
$.extend(newConfig, extraConfig);
|
||||
@@ -754,6 +834,7 @@
|
||||
watermark: currentConfig.watermark,
|
||||
fontScale: currentConfig.fontScale || 1,
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1,
|
||||
content_html: PhoneImageEngine.getContentHtml()
|
||||
}, saveConfigUrl).then(function(data) {
|
||||
if (data.output_id) lastOutputId = data.output_id;
|
||||
@@ -782,6 +863,7 @@
|
||||
watermark: currentConfig.watermark,
|
||||
fontScale: currentConfig.fontScale || 1,
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1,
|
||||
content_html: PhoneImageEngine.getContentHtml()
|
||||
}, saveConfigUrl).then(function (data) {
|
||||
if (data.output_id) lastOutputId = data.output_id;
|
||||
@@ -809,6 +891,7 @@
|
||||
watermark: currentConfig.watermark,
|
||||
fontScale: currentConfig.fontScale || 1,
|
||||
tableFontScale: currentConfig.tableFontScale || 1,
|
||||
codeFontScale: currentConfig.codeFontScale || 1,
|
||||
content_html: PhoneImageEngine.getContentHtml()
|
||||
}, function(current, total, canvas) {
|
||||
if (total > 0) {
|
||||
|
||||
Reference in New Issue
Block a user