104 lines
6.1 KiB
PHP
104 lines
6.1 KiB
PHP
<?php
|
||
/** @var array $p */
|
||
/** @var string $mode */
|
||
$v = function ($k, $d = '') use ($p) { return $p ? ($p[$k] ?? $d) : $d; };
|
||
$isEdit = !empty($p);
|
||
$mode = $mode ?? 'fixed';
|
||
$switchUrl = $isEdit ? site_url('admin/pages/switchMode/' . (int)$p['id']) : '';
|
||
?>
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>编辑单页：<?php echo e($p['title']); ?><span class="mode-badge mode-fixed">固定版面</span></h1>
|
||
<div class="desc">固定版面：页面套用统一模板（标题区 + 正文 + 联系按钮），您只需编辑正文内容。</div>
|
||
</div>
|
||
<?php if ($isEdit): ?>
|
||
<div class="mode-switch-sel">
|
||
<label for="modeSel">切换模式</label>
|
||
<select id="modeSel" class="mode-sel" onchange="location.href='<?php echo $switchUrl; ?>?mode='+this.value">
|
||
<option value="fixed" <?php echo $mode === 'fixed' ? 'selected' : ''; ?>>固定版面</option>
|
||
<option value="builder" <?php echo $mode === 'builder' ? 'selected' : ''; ?>>可视化编辑</option>
|
||
</select>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<form method="post" action="<?php echo site_url('admin/pages/update/' . $p['id']); ?>" id="fxForm">
|
||
<?php echo csrf_field(); ?>
|
||
<input type="hidden" name="mode" value="fixed">
|
||
<div class="field"><label>标题</label><input name="title" value="<?php echo e($p['title']); ?>"></div>
|
||
|
||
<div class="field">
|
||
<label>正文内容</label>
|
||
<div class="fx-toolbar">
|
||
<button type="button" data-cmd="bold" title="加粗"><b>B</b></button>
|
||
<button type="button" data-cmd="italic" title="斜体"><i>I</i></button>
|
||
<button type="button" data-cmd="formatBlock" data-val="H2">H2</button>
|
||
<button type="button" data-cmd="formatBlock" data-val="H3">H3</button>
|
||
<button type="button" data-cmd="insertUnorderedList" title="无序列表">• 列表</button>
|
||
<button type="button" data-cmd="insertOrderedList" title="有序列表">1. 列表</button>
|
||
<button type="button" data-cmd="formatBlock" data-val="BLOCKQUOTE" title="引用">引用</button>
|
||
<button type="button" id="fxLink" title="插入链接">链接</button>
|
||
<button type="button" id="fxImg" title="插入图片">图片</button>
|
||
</div>
|
||
<div class="fx-editor" id="fxEditor" contenteditable="true"><?php echo $p['content']; ?></div>
|
||
<textarea name="content" id="fxContent" hidden><?php echo e($p['content']); ?></textarea>
|
||
<p class="fx-hint">直接排版正文即可；切换「可视化编辑」可自由拖拽布局。保存后页面以统一版式展示。</p>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn-primary" type="submit">保存</button>
|
||
<a class="btn-ghost" href="<?php echo site_url('admin/pages'); ?>">取消</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 图片选择弹层 -->
|
||
<div class="fx-modal" id="fxModal" hidden>
|
||
<div class="fx-modal-box">
|
||
<div class="fx-modal-head"><span>选择图片</span><button type="button" id="fxModalClose">×</button></div>
|
||
<div class="fx-modal-body">
|
||
<label class="fx-upload">＋ 上传图片<input type="file" id="fxUp" accept="image/*" hidden></label>
|
||
<div class="fx-lib" id="fxLib"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.mode-switch-sel{display:inline-flex;align-items:center;gap:8px}
|
||
.mode-switch-sel label{font-size:13px;color:#64748b}
|
||
.mode-sel{border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;font-size:14px;background:#fff;color:#334155;cursor:pointer;min-width:140px}
|
||
.mode-sel:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.12)}
|
||
.mode-badge{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;line-height:1.7}
|
||
.mode-badge.mode-fixed{background:#e0f2fe;color:#0369a1}
|
||
.mode-badge.mode-builder{background:#ede9fe;color:#6d28d9}
|
||
.fx-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
|
||
.fx-toolbar button{width:auto;min-width:38px;height:34px;padding:0 10px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;color:#334155}
|
||
.fx-toolbar button:hover{border-color:#0ea5e9;color:#0ea5e9}
|
||
.fx-editor{min-height:320px;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px;font-size:16px;line-height:1.9;outline:none;background:#fff;overflow:auto}
|
||
.fx-editor:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.12)}
|
||
.fx-editor h2{font-size:24px;margin:.6em 0 .4em}
|
||
.fx-editor h3{font-size:20px;margin:.6em 0 .4em}
|
||
.fx-editor blockquote{margin:.6em 0;padding:8px 14px;border-left:4px solid #0ea5e9;color:#475569;background:#f8fafc}
|
||
.fx-editor img{max-width:100%;border-radius:8px;display:block;margin:8px 0}
|
||
.fx-editor a{color:#0ea5e9}
|
||
.fx-hint{font-size:12px;color:#94a3b8;margin:8px 2px 0}
|
||
.fx-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:80}
|
||
.fx-modal[hidden]{display:none}
|
||
.fx-modal-box{background:#fff;border-radius:14px;width:420px;max-width:92vw;overflow:hidden}
|
||
.fx-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0;font-weight:700}
|
||
.fx-modal-head button{border:none;background:none;font-size:22px;cursor:pointer;color:#64748b;line-height:1}
|
||
.fx-modal-body{padding:16px;max-height:60vh;overflow:auto}
|
||
.fx-upload{display:block;text-align:center;background:#0ea5e9;color:#fff;border-radius:10px;padding:10px;cursor:pointer;font-weight:600;margin-bottom:12px}
|
||
.fx-lib{display:flex;flex-wrap:wrap;gap:8px}
|
||
.fx-lib img{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}
|
||
.fx-lib img:hover{border-color:#0ea5e9}
|
||
</style>
|
||
|
||
<script>
|
||
window.__PB_MEDIA__ = '<?php echo site_url('admin/media'); ?>';
|
||
window.__PB_UPLOAD__ = '<?php echo site_url('admin/media/upload'); ?>';
|
||
window.__PB_CSRF__ = '<?php echo csrf_token(); ?>';
|
||
</script>
|
||
<script src="<?php echo asset('js/fixed-editor.js'); ?>"></script>
|