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:
@@ -256,6 +256,19 @@
|
|||||||
<input type="number" id="table-font-scale-custom" min="0.5" max="2.0" step="0.1" value="1.0"
|
<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;">
|
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 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>
|
</div>
|
||||||
<div id="render-preview"></div>
|
<div id="render-preview"></div>
|
||||||
@@ -298,7 +311,8 @@
|
|||||||
size: 'xiaohongshu',
|
size: 'xiaohongshu',
|
||||||
watermark: '',
|
watermark: '',
|
||||||
fontScale: 1,
|
fontScale: 1,
|
||||||
tableFontScale: 1
|
tableFontScale: 1,
|
||||||
|
codeFontScale: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
var postData = {
|
var postData = {
|
||||||
@@ -322,7 +336,8 @@
|
|||||||
watermark: savedConfig.watermark || '',
|
watermark: savedConfig.watermark || '',
|
||||||
pageAlignments: savedConfig.pageAlignments || {},
|
pageAlignments: savedConfig.pageAlignments || {},
|
||||||
fontScale: savedConfig.fontScale || 1,
|
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.watermark = initConfig.watermark;
|
||||||
currentConfig.fontScale = initConfig.fontScale;
|
currentConfig.fontScale = initConfig.fontScale;
|
||||||
currentConfig.tableFontScale = initConfig.tableFontScale;
|
currentConfig.tableFontScale = initConfig.tableFontScale;
|
||||||
|
currentConfig.codeFontScale = initConfig.codeFontScale;
|
||||||
currentConfig.pageAlignments = initConfig.pageAlignments || {};
|
currentConfig.pageAlignments = initConfig.pageAlignments || {};
|
||||||
|
|
||||||
// ========== wangeditor 初始化 ==========
|
// ========== wangeditor 初始化 ==========
|
||||||
@@ -486,6 +502,7 @@
|
|||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
fontScale: currentConfig.fontScale || 1,
|
fontScale: currentConfig.fontScale || 1,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1,
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1,
|
||||||
content_html: PhoneImageEngine.getContentHtml()
|
content_html: PhoneImageEngine.getContentHtml()
|
||||||
}, saveConfigUrl).then(function(data) {
|
}, saveConfigUrl).then(function(data) {
|
||||||
if (data.output_id) lastOutputId = data.output_id;
|
if (data.output_id) lastOutputId = data.output_id;
|
||||||
@@ -567,6 +584,7 @@
|
|||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
fontScale: currentConfig.fontScale || 1,
|
fontScale: currentConfig.fontScale || 1,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1,
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1,
|
||||||
content_html: PhoneImageEngine.getContentHtml()
|
content_html: PhoneImageEngine.getContentHtml()
|
||||||
}, saveConfigUrl).then(function(data) {
|
}, saveConfigUrl).then(function(data) {
|
||||||
if (data.output_id) lastOutputId = data.output_id;
|
if (data.output_id) lastOutputId = data.output_id;
|
||||||
@@ -610,6 +628,67 @@
|
|||||||
setTableFontScaleUI(initConfig.tableFontScale);
|
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 () {
|
$('#btn-settings').click(function () {
|
||||||
var settingsHtml = '<div class="settings-form" style="padding:20px 20px 0;">';
|
var settingsHtml = '<div class="settings-form" style="padding:20px 20px 0;">';
|
||||||
@@ -659,7 +738,8 @@
|
|||||||
var newConfig = {
|
var newConfig = {
|
||||||
size: currentConfig.size,
|
size: currentConfig.size,
|
||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1
|
||||||
};
|
};
|
||||||
if (extraConfig) {
|
if (extraConfig) {
|
||||||
$.extend(newConfig, extraConfig);
|
$.extend(newConfig, extraConfig);
|
||||||
@@ -754,6 +834,7 @@
|
|||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
fontScale: currentConfig.fontScale || 1,
|
fontScale: currentConfig.fontScale || 1,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1,
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1,
|
||||||
content_html: PhoneImageEngine.getContentHtml()
|
content_html: PhoneImageEngine.getContentHtml()
|
||||||
}, saveConfigUrl).then(function(data) {
|
}, saveConfigUrl).then(function(data) {
|
||||||
if (data.output_id) lastOutputId = data.output_id;
|
if (data.output_id) lastOutputId = data.output_id;
|
||||||
@@ -782,6 +863,7 @@
|
|||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
fontScale: currentConfig.fontScale || 1,
|
fontScale: currentConfig.fontScale || 1,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1,
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1,
|
||||||
content_html: PhoneImageEngine.getContentHtml()
|
content_html: PhoneImageEngine.getContentHtml()
|
||||||
}, saveConfigUrl).then(function (data) {
|
}, saveConfigUrl).then(function (data) {
|
||||||
if (data.output_id) lastOutputId = data.output_id;
|
if (data.output_id) lastOutputId = data.output_id;
|
||||||
@@ -809,6 +891,7 @@
|
|||||||
watermark: currentConfig.watermark,
|
watermark: currentConfig.watermark,
|
||||||
fontScale: currentConfig.fontScale || 1,
|
fontScale: currentConfig.fontScale || 1,
|
||||||
tableFontScale: currentConfig.tableFontScale || 1,
|
tableFontScale: currentConfig.tableFontScale || 1,
|
||||||
|
codeFontScale: currentConfig.codeFontScale || 1,
|
||||||
content_html: PhoneImageEngine.getContentHtml()
|
content_html: PhoneImageEngine.getContentHtml()
|
||||||
}, function(current, total, canvas) {
|
}, function(current, total, canvas) {
|
||||||
if (total > 0) {
|
if (total > 0) {
|
||||||
|
|||||||
Reference in New Issue
Block a user