chore: 全量提交（推广页、宣传册、社交资源、视频与后台同步）

Made-with: Cursor

admin/src/components/PageBuilderEditor.vue

@@ -1,17 +1,31 @@
 <template>
   <div class="page-builder-editor">
-    <PageBuilderBlocks v-model:blocks="blocks" :site-id="siteId" />
-    <el-collapse class="adv-collapse" accordion>
-      <el-collapse-item title="高级：直接编辑 JSON（慎用）" name="json">
-        <el-input
-          v-model="jsonDraft"
-          type="textarea"
-          :rows="10"
-          placeholder="修改后会覆盖上方可视化内容"
-        />
-        <el-button type="warning" style="margin-top: 8px" @click="applyJsonDraft">应用 JSON</el-button>
-      </el-collapse-item>
-    </el-collapse>
+    <div class="pbe-split">
+      <div class="pbe-editor-col">
+        <PageBuilderBlocks v-model:blocks="blocks" :site-id="siteId" />
+        <el-collapse class="adv-collapse" accordion>
+          <el-collapse-item title="高级：直接编辑 JSON（慎用）" name="json">
+            <el-input
+              v-model="jsonDraft"
+              type="textarea"
+              :rows="10"
+              placeholder="修改后会覆盖上方可视化内容"
+            />
+            <el-button type="warning" style="margin-top: 8px" @click="applyJsonDraft">应用 JSON</el-button>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <aside class="pbe-preview-col">
+        <div class="pbe-preview-head">
+          <span>实时预览</span>
+          <el-text size="small" type="info">与前台样式接近，保存后线上一致</el-text>
+        </div>
+        <div class="pbe-preview-body">
+          <BlockRenderer v-if="blocks.length" :blocks="blocks" />
+          <el-empty v-else description="添加模块后此处显示效果" :image-size="80" />
+        </div>
+      </aside>
+    </div>
   </div>
 </template>
 
@@ -19,6 +33,8 @@
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import PageBuilderBlocks from './PageBuilderBlocks.vue'
+import BlockRenderer from '@yh-web/components/blocks/BlockRenderer.vue'
+import '@yh-web/styles/page-animations.css'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -105,6 +121,57 @@ function applyJsonDraft() {
 .page-builder-editor {
   width: 100%;
 }
+.pbe-split {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.pbe-editor-col {
+  flex: 1 1 420px;
+  min-width: 320px;
+}
+.pbe-preview-col {
+  flex: 0 1 380px;
+  width: 100%;
+  max-width: 420px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  background: #0a0a12;
+  color: #e8e8ef;
+  overflow: hidden;
+  position: sticky;
+  top: 8px;
+}
+.pbe-preview-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-weight: 600;
+  font-size: 14px;
+}
+.pbe-preview-body {
+  padding: 16px;
+  max-height: min(62vh, 640px);
+  overflow: auto;
+}
+.pbe-preview-body :deep(.builder-heading),
+.pbe-preview-body :deep(.builder-text),
+.pbe-preview-body :deep(.builder-links a),
+.pbe-preview-body :deep(.builder-btn) {
+  color: inherit;
+}
+.pbe-preview-body :deep(.builder-text) {
+  color: rgba(255, 255, 255, 0.75);
+}
+.pbe-preview-body :deep(.builder-links a) {
+  color: #7eb8ff;
+}
+.pbe-preview-body :deep(hr) {
+  border-color: rgba(255, 255, 255, 0.15) !important;
+}
 .adv-collapse {
   margin-top: 12px;
 }