fix(phone-image): 修復5個UI問題

1. 中間預覽區工具欄折行: 縮小字號/間距(gap 8->4, font 12->11px)
2. 右側畫布缺少頁間距: 新增scaleWrapper裁切transform溢出
3. 右側對齊下拉框不可見: select改為正常文檔流,移除position:absolute
4. 正文水平居中: dom-page-content添加text-align:left
5. 列表不顯示序號/圓點: 顯式設置list-style-type + display:list-item
This commit is contained in:
augushong
2026-05-19 19:46:11 +08:00
parent a587a0c00a
commit 3867256519
3 changed files with 53 additions and 21 deletions

View File

@@ -229,9 +229,9 @@
<div class="render-preview-area">
<div class="preview-header">
<span>渲染预览</span>
<div style="display:inline-flex;align-items:center;gap:8px;float:right;">
<span style="font-size:12px;color:#666;">字号</span>
<select id="font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
<div style="display:inline-flex;align-items:center;gap:4px;float:right;">
<span style="font-size:11px;color:#666;">字号</span>
<select id="font-scale-select" style="height:24px;font-size:11px;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>
@@ -241,10 +241,10 @@
<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>
<span style="font-size:12px;color:#666;margin-left:8px;">表格字号</span>
<select id="table-font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
<span id="font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
<span style="font-size:11px;color:#666;margin-left:4px;">表格字号</span>
<select id="table-font-scale-select" style="height:24px;font-size:11px;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>
@@ -254,10 +254,10 @@
<option value="custom">自定义</option>
</select>
<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;">
style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
<span id="table-font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
<span style="font-size:11px;color:#666;margin-left:4px;">代码字号</span>
<select id="code-font-scale-select" style="height:24px;font-size:11px;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>
@@ -267,8 +267,8 @@
<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>
style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
<span id="code-font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
</div>
</div>
<div id="render-preview"></div>