feat(phone-image): DOM分页預覽CSS+HTML基礎結構和數據模型

2026-07-08 23:52:49 +08:00 · 2026-05-18 23:32:40 +08:00
parent 0782399709
commit bfeb1811be
3 changed files with 216 additions and 11 deletions
--- a/public/static/css/phone-image-templates.css
+++ b/public/static/css/phone-image-templates.css
@@ -1096,3 +1096,126 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
    color: #888;
    margin-right: 8px;
 }
+
+/* ============================================
+   DOM Page Container (DOM分页预览容器)
+   右侧分页预览区使用纯DOM渲染,不依赖截图
+   JS动态填充这些容器
+   ============================================ */
+
+/* --- DOM分页容器基础 --- */
+.dom-page-container {
+    background: #ffffff;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 尺寸 - 复用size class模式 */
+.size-xiaohongshu .dom-page-container {
+    width: 540px;
+    height: 720px;
+}
+
+.size-douyin .dom-page-container {
+    width: 540px;
+    height: 960px;
+}
+
+/* --- DOM分页品牌标识头 --- */
+.dom-page-brand-header {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 13px;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+}
+
+.dom-page-brand-header img {
+    height: 20px;
+    margin-right: 8px;
+}
+
+.dom-page-brand-header span {
+    color: #666;
+}
+
+/* --- DOM分页内容区域 --- */
+.dom-page-content {
+    padding: 20px;
+    overflow: hidden;
+    box-sizing: border-box;
+    height: calc(100% - 36px - 30px);
+    font-size: calc(14px * var(--pi-font-scale, 1));
+    line-height: 1.8;
+    word-break: break-word;
+}
+
+/* DOM分页内容区对齐支持 (复用valign模式) */
+.dom-page-content.valign-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.dom-page-content.valign-bottom {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+/* --- DOM分页页码 --- */
+.dom-page-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding: 6px 0;
+    font-size: 11px;
+    color: #999;
+    border-top: 1px solid #f5f5f5;
+    background: #fff;
+}
+
+/* --- 纯图片页 --- */
+.dom-page-pure-image .dom-page-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.dom-page-pure-image .dom-page-content img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* ============================================
+   DOM分页内容区代码块样式
+   参照 #render-preview pre (L926-935)
+   ============================================ */
+.dom-page-content pre {
+    background: #f6f8fa;
+    border-radius: 6px;
+    padding: 12px 16px;
+    overflow-x: auto;
+    font-size: calc(13px * var(--pi-code-font-scale, 1));
+    line-height: 1.6;
+    margin: 10px 0;
+}
+
+.dom-page-content code {
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: calc(13px * var(--pi-code-font-scale, 1));
+}
+
+.dom-page-content pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+}