ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-01 16:32:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(phoneimage): 修复字号缩放不生效于画布渲染和段落文字，缩小表格行间距

Browse Source 
- CSS: 在 #render-preview 和 #render-staging 上重新声明中间变量
  (--pi-font-size-base 等)，使其在本地用 --pi-font-scale 重新计算，
  解决 CSS 自定义属性在 :root 预计算后子元素继承固定值的问题
- CSS: #render-preview 的 font-size 从 var(--pi-font-size-base) 改为
  直接 calc(14px * var(--pi-font-scale, 1))，确保段落文字响应缩放
- JS: doCapturePages() 在 ensureStaging() 后调用 applyFontScale()，
  确保首次创建 staging 时 --pi-font-scale 被正确设置
- CSS: th/td padding 从 8px 10px 缩小为 4px 10px，减少表格行间距
- HTML: body 布局改为 flex-column 防止页面级滚动
This commit is contained in:
augushong
2026-05-15 23:38:39 +08:00
parent f18091b931
commit b8c05e0329
3 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/static/css/phone-image-templates.css
View File

@@ -18,6 +18,20 @@
--pi-font-size-title: calc(26px * var(--pi-font-scale, 1));
--pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1));
--pi-font-size-small: calc(12px * var(--pi-font-scale, 1));
}
/*
* 字号缩放中间变量局部覆盖
* 当 --pi-font-scale 通过 inline style 设置在 #render-preview 或 #render-staging 上时，
* 需要在该元素上重新声明中间变量，使其用本地的 --pi-font-scale 重新计算。
* 否则中间变量继承 :root 的预计算值（:root 的 --pi-font-scale 始终为 1），缩放不生效。
*/
#render-preview,
#render-staging {
--pi-font-size-base: calc(14px * var(--pi-font-scale, 1));
--pi-font-size-title: calc(26px * var(--pi-font-scale, 1));
--pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1));
--pi-font-size-small: calc(12px * var(--pi-font-scale, 1));
/* 行高 */
--pi-line-height: 1.8;
/* 间距 */
@@ -579,8 +593,8 @@
/* 表格美化样式（html2canvas兼容） */
.page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); }
.page-content th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; }
.page-content td { padding: 8px 10px; border: 1px solid #ddd; }
.page-content th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
.page-content td { padding: 4px 10px; border: 1px solid #ddd; }
.page-content tr:nth-child(even) td { background-color: #f9f9f9; }
.content-flow pre {
@@ -607,8 +621,8 @@
/* 中间栏表格样式 */
.content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); }
.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; }
.content-flow-block td { padding: 8px 10px; border: 1px solid #ddd; }
.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
.content-flow-block td { padding: 4px 10px; border: 1px solid #ddd; }
.content-flow-block tr:nth-child(even) td { background-color: #f9f9f9; }
/* ============================================
@@ -780,7 +794,7 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
#render-preview {
font-family: var(--pi-font-family);
font-size: var(--pi-font-size-base);
font-size: calc(14px * var(--pi-font-scale, 1));
line-height: var(--pi-line-height);
color: var(--pi-color-text);
}
@@ -858,13 +872,13 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
#render-preview th {
background-color: #f0f0f0;
font-weight: bold;
padding: 8px 10px;
padding: 4px 10px;
border: 1px solid #ddd;
text-align: left;
}
#render-preview td {
padding: 8px 10px;
padding: 4px 10px;
border: 1px solid #ddd;
}

1
public/static/js/phone-image.js
View File

@@ -1048,6 +1048,7 @@ var PhoneImageEngine = (function () {
function doCapturePages(opts, pageProgressCallback) {
var deferred = $.Deferred();
ensureStaging();
applyFontScale();
var $staging = $('#render-staging');
$staging.empty();

13
view/admin/post/phone_image.html
View File

@@ -11,10 +11,19 @@
<link rel="stylesheet" href="/static/css/phone-image-templates.css">
<link rel="stylesheet" href="/static/css/phone-image-fonts.css">
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #f2f2f2;
display: flex;
flex-direction: column;
}
.page-header {
@@ -24,6 +33,7 @@
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.page-header-left {
@@ -49,7 +59,8 @@
.main-layout {
display: flex;
height: calc(100vh - 52px);
flex: 1;
min-height: 0;
}
.content-flow-area {