91 lines
6.1 KiB
PHP
91 lines
6.1 KiB
PHP
<div class="page-head">
|
||
<div><h1>🎨 风格设置</h1><div class="desc">一键设置任意网页风格：配色 / 字体 / 圆角 / 导航 / 明暗 / 自定义 CSS，保存后立即生效</div></div>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<form method="post" action="<?php echo site_url('admin/theme'); ?>">
|
||
<?php echo csrf_field(); ?>
|
||
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label>预设风格（选择后自动填充下方配色）</label>
|
||
<select id="preset" name="preset">
|
||
<?php foreach ($presets as $key => $p): ?>
|
||
<option value="<?php echo e($key); ?>" <?php echo $v['preset'] == $key ? 'selected' : ''; ?>><?php echo e($p['label']); ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label>导航栏样式</label>
|
||
<select name="header">
|
||
<option value="center" <?php echo $v['header'] == 'center' ? 'selected' : ''; ?>>居中Logo</option>
|
||
<option value="left" <?php echo $v['header'] == 'left' ? 'selected' : ''; ?>>左对齐</option>
|
||
<option value="transparent" <?php echo $v['header'] == 'transparent' ? 'selected' : ''; ?>>透明浮层</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin:8px 0 12px">品牌配色</h3>
|
||
<div class="form-grid">
|
||
<div class="field"><label>主色 Primary</label><input type="color" id="f_primary" name="primary" value="<?php echo e($v['primary']); ?>"></div>
|
||
<div class="field"><label>主色深 Primary-600</label><input type="color" id="f_primary_600" name="primary_600" value="<?php echo e($v['primary_600']); ?>"></div>
|
||
<div class="field"><label>辅色 Secondary</label><input type="color" id="f_secondary" name="secondary" value="<?php echo e($v['secondary']); ?>"></div>
|
||
<div class="field"><label>强调色 Accent</label><input type="color" id="f_accent" name="accent" value="<?php echo e($v['accent']); ?>"></div>
|
||
</div>
|
||
|
||
<h3 style="margin:8px 0 12px">界面底色（浅色模式）</h3>
|
||
<div class="form-grid">
|
||
<div class="field"><label>背景 Background</label><input type="color" id="f_bg" name="bg" value="<?php echo e($v['bg']); ?>"></div>
|
||
<div class="field"><label>卡片 Surface</label><input type="color" id="f_surface" name="surface" value="<?php echo e($v['surface']); ?>"></div>
|
||
<div class="field"><label>正文文字 Text</label><input type="color" id="f_text" name="text" value="<?php echo e($v['text']); ?>"></div>
|
||
<div class="field"><label>次要文字 Muted</label><input type="color" id="f_muted" name="muted" value="<?php echo e($v['muted']); ?>"></div>
|
||
<div class="field"><label>边框 Border</label><input type="color" id="f_border" name="border" value="<?php echo e($v['border']); ?>"></div>
|
||
<div class="field"><label>导航背景（RGBA）</label><input id="f_nav_bg" name="nav_bg" value="<?php echo e($v['nav_bg']); ?>"></div>
|
||
</div>
|
||
|
||
<h3 style="margin:8px 0 12px">排版与布局</h3>
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label>字体</label>
|
||
<select id="f_font" name="font">
|
||
<option value="'Noto Sans SC', system-ui, sans-serif" <?php echo strpos($v['font'], 'Noto Sans SC') !== false ? 'selected' : ''; ?>>思源黑体（默认）</option>
|
||
<option value="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" <?php echo strpos($v['font'], 'Segoe UI') !== false ? 'selected' : ''; ?>>系统无衬线</option>
|
||
<option value="'Microsoft YaHei', system-ui, sans-serif" <?php echo strpos($v['font'], 'YaHei') !== false ? 'selected' : ''; ?>>微软雅黑</option>
|
||
<option value="Georgia, 'Times New Roman', serif" <?php echo strpos($v['font'], 'Georgia') !== false ? 'selected' : ''; ?>>衬线 Serif</option>
|
||
</select>
|
||
</div>
|
||
<div class="field"><label>圆角（px）</label><input type="number" id="f_radius" name="radius" value="<?php echo e($v['radius']); ?>"></div>
|
||
<div class="field"><label>容器宽度（px）</label><input type="number" id="f_container" name="container" value="<?php echo e($v['container']); ?>"></div>
|
||
<div class="field">
|
||
<label>默认明暗</label>
|
||
<select id="f_default_mode" name="default_mode">
|
||
<option value="light" <?php echo $v['default_mode'] == 'light' ? 'selected' : ''; ?>>浅色</option>
|
||
<option value="dark" <?php echo $v['default_mode'] == 'dark' ? 'selected' : ''; ?>>深色</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin:8px 0 12px">自定义 CSS（高级）</h3>
|
||
<div class="field">
|
||
<label>将追加到主题样式末尾，可覆盖任意样式</label>
|
||
<textarea name="custom_css" style="font-family:monospace;min-height:120px" placeholder=".site-header{box-shadow:none;}"><?php echo e($v['custom_css']); ?></textarea>
|
||
</div>
|
||
|
||
<div class="preview-box" id="themePreview">
|
||
<div class="pv-title" style="font-size:20px;font-weight:800"></div>
|
||
<div class="pv-sub" style="opacity:.9;margin-top:6px"></div>
|
||
<div style="margin-top:16px;display:flex;gap:10px">
|
||
<span style="background:#fff;color:#0ea5e9;padding:8px 16px;border-radius:10px;font-weight:700">主按钮</span>
|
||
<span style="background:rgba(255,255,255,.25);padding:8px 16px;border-radius:10px;font-weight:700">次按钮</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions" style="margin-top:18px">
|
||
<button class="btn-primary" type="submit">保存并应用风格</button>
|
||
<a class="btn-ghost" href="<?php echo site_url(); ?>" target="_blank">查看前台效果</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script>window.__presets__ = <?php echo json_encode($presets, JSON_UNESCAPED_UNICODE); ?>;</script>
|