61 lines
2.8 KiB
PHP
61 lines
2.8 KiB
PHP
<?php
|
||
/** @var string $module */
|
||
/** @var array $layout */
|
||
$module = $module ?? 'page';
|
||
$initial = json_encode($layout ?: [], JSON_UNESCAPED_UNICODE);
|
||
$isProduct = $module === 'product';
|
||
?>
|
||
<div class="pb-workspace">
|
||
<!-- 最左：窄图标栏（仅图标） -->
|
||
<aside class="pb-rail" title="工具栏">
|
||
<button type="button" class="pb-rail-btn" data-act="material" title="素材库">🖼️</button>
|
||
<button type="button" class="pb-rail-btn" data-act="text" title="添加文字">T</button>
|
||
<button type="button" class="pb-rail-btn" data-act="image" title="添加图片">🏞️</button>
|
||
<button type="button" class="pb-rail-btn" data-act="button" title="添加按钮">🔗</button>
|
||
<?php if ($isProduct): ?>
|
||
<button type="button" class="pb-rail-btn" data-act="buy" title="购买按钮">🛒</button>
|
||
<button type="button" class="pb-rail-btn" data-act="price" title="价格">¥</button>
|
||
<button type="button" class="pb-rail-btn" data-act="specs" title="规格参数">▤</button>
|
||
<?php endif; ?>
|
||
</aside>
|
||
|
||
<!-- 中间：可编辑画布 -->
|
||
<main class="pb-canvas-wrap">
|
||
<div class="pb-stage" id="pbStage"></div>
|
||
</main>
|
||
|
||
<!-- 右栏：标签页 预览 / 属性 / 素材 -->
|
||
<aside class="pb-side">
|
||
<div class="pb-tabs">
|
||
<button type="button" class="pb-tab active" data-tab="preview">预览</button>
|
||
<button type="button" class="pb-tab" data-tab="props">属性</button>
|
||
<button type="button" class="pb-tab" data-tab="material">素材</button>
|
||
</div>
|
||
<div class="pb-panes">
|
||
<div class="pb-pane" id="panePreview">
|
||
<div class="pb-preview" id="pbPreviewWrap"><div class="pb-stage pb-front" id="pbPreview"></div></div>
|
||
<p class="pb-hint" style="padding:8px 12px;margin:0">实时模拟（只读）。在画布选中元素即跳到「属性」。</p>
|
||
</div>
|
||
<div class="pb-pane hidden" id="paneProps">
|
||
<div id="pbPropsBody" class="pb-empty">在画布中选择一个元素以编辑属性</div>
|
||
</div>
|
||
<div class="pb-pane hidden" id="paneMaterial">
|
||
<label class="pb-upload">＋ 上传图片
|
||
<input type="file" id="pbFile" accept="image/*" hidden>
|
||
</label>
|
||
<div class="pb-lib" id="pbLib"></div>
|
||
<p class="pb-hint">点击图片加入画布；悬停图片点 × 可删除素材。</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
<script>
|
||
window.__PB_INIT__ = <?php echo $initial; ?>;
|
||
window.__PB_MODULE__ = '<?php echo $module; ?>';
|
||
window.__PB_MEDIA__ = '<?php echo site_url('admin/media'); ?>';
|
||
window.__PB_UPLOAD__ = '<?php echo site_url('admin/media/upload'); ?>';
|
||
window.__PB_DELETE__ = '<?php echo site_url('admin/media/delete/'); ?>';
|
||
window.__PB_CSRF__ = '<?php echo csrf_token(); ?>';
|
||
</script>
|
||
<script src="<?php echo asset('js/page-builder.js'); ?>"></script>
|