diff --git a/admin/src/components/PageBuilderEditor.vue b/admin/src/components/PageBuilderEditor.vue index 6edf251..82972c3 100644 --- a/admin/src/components/PageBuilderEditor.vue +++ b/admin/src/components/PageBuilderEditor.vue @@ -1,17 +1,31 @@ @@ -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; } diff --git a/admin/src/main.js b/admin/src/main.js index da5b638..571164a 100644 --- a/admin/src/main.js +++ b/admin/src/main.js @@ -3,7 +3,6 @@ import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router' -import './utils/disable-debug' const app = createApp(App) app.use(ElementPlus) diff --git a/admin/src/utils/disable-debug.js b/admin/src/utils/disable-debug.js deleted file mode 100644 index e599d0c..0000000 --- a/admin/src/utils/disable-debug.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * 禁止调试模式及右键 - 全局安全模块 - * 在页面加载时立即执行 - */ - -// 禁止右键 -document.addEventListener('contextmenu', (e) => e.preventDefault()) - -// 禁止 F12、Ctrl+Shift+I/J/C 等开发者工具快捷键 -document.addEventListener('keydown', (e) => { - if ( - e.key === 'F12' || - (e.ctrlKey && e.shiftKey && ['I', 'J', 'C'].includes(e.key.toUpperCase())) || - (e.ctrlKey && e.key === 'U') - ) { - e.preventDefault() - } -}) diff --git a/admin/src/views/sites/PageList.vue b/admin/src/views/sites/PageList.vue index 30d9f40..176d2b0 100644 --- a/admin/src/views/sites/PageList.vue +++ b/admin/src/views/sites/PageList.vue @@ -53,7 +53,7 @@ @@ -63,7 +63,15 @@ :closable="false" show-icon style="margin-bottom: 16px" - title="积木模式:从模块左侧 ⋮⋮ 手柄拖拽排序;链接可点「选择链接」选站内页或文件。" + title="积木模式:左侧编辑、右侧实时预览;⋮⋮ 可拖拽排序;链接可「选择链接」。" + /> + @@ -91,8 +99,21 @@ - - + +
+
+ +
+
+
实时预览
+