YwxAppThink/app/backend/view/template/setting.html

<div class="layui-card" style="margin:15px;">
  <div class="layui-card-header">界面设置</div>
  <div class="layui-card-body">
    <form class="layui-form" id="settingForm">
      <div class="layui-form-item">
        <label class="layui-form-label">全站默认模板</label>
        <div class="layui-input-inline" style="width:320px;">
          <select name="default_template" id="defaultTemplate">
            <option value="default">默认（自带视图）</option>
          </select>
        </div>
        <div class="layui-form-mid layui-word-aux">未单独绑定模板的插件，统一使用此默认模板</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">会员自选风格</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="allow_member_select" id="allowSelect" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <div class="layui-form-mid layui-word-aux">允许前台会员切换风格（开启后，已安装模板提供覆盖视图的插件页面右下角自动出现切换器，按访客 cookie 生效，无需登录）</div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="saveSetting">保存设置</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="layui-card" style="margin:15px;">
  <div class="layui-card-header">
    站点 layui 配色
    <span class="layui-word-aux" style="margin-left:8px;">全站生效：后台 / 会员中心 / 前台 / 所有插件前台</span>
  </div>
  <div class="layui-card-body">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md7">
        <form class="layui-form" id="themeForm">
          <div class="layui-form-item">
            <label class="layui-form-label">启用主题</label>
            <div class="layui-input-inline">
              <input type="checkbox" id="themeEnable" lay-skin="switch" lay-text="开|关">
            </div>
            <div class="layui-form-mid layui-word-aux">关闭后停止注入主题样式，用于排查样式冲突</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">主色</label>
            <div class="layui-input-inline" style="width:90px;">
              <input type="color" id="primaryColor" class="layui-input" style="padding:2px;height:36px;">
            </div>
            <div class="layui-input-inline" style="width:150px;">
              <input type="text" id="primaryText" class="layui-input" placeholder="#16b777">
            </div>
            <div class="layui-form-mid layui-word-aux">表单聚焦、复选框、开关、进度条、时间轴</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">强调色</label>
            <div class="layui-input-inline" style="width:90px;">
              <input type="color" id="accentColor" class="layui-input" style="padding:2px;height:36px;">
            </div>
            <div class="layui-input-inline" style="width:150px;">
              <input type="text" id="accentText" class="layui-input" placeholder="#16baaa">
            </div>
            <div class="layui-form-mid layui-word-aux">按钮、导航、分页当前页、上传、Logo</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">圆角</label>
            <div class="layui-input-inline" style="width:150px;">
              <select id="radiusInput">
                <option value="0">直角 0</option>
                <option value="2px">默认 2px</option>
                <option value="4px">4px</option>
                <option value="6px">6px</option>
                <option value="10px">10px</option>
              </select>
            </div>
            <div class="layui-form-mid layui-word-aux">按钮 / 输入框 / 卡片的统一圆角</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">字体</label>
            <div class="layui-input-block" style="margin-right:15px;">
              <input type="text" id="fontInput" class="layui-input" placeholder="-apple-system, 'Microsoft YaHei', sans-serif">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="saveTheme">保存配色</button>
              <button type="button" class="layui-btn layui-btn-primary" id="resetTheme">恢复默认</button>
              <span class="layui-word-aux">保存后立即全站生效，无需清缓存</span>
            </div>
          </div>
        </form>
      </div>

      <div class="layui-col-md5">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top:0;">
          <legend style="font-size:14px;">实时预览</legend>
        </fieldset>
        <div id="themePreview" style="padding:12px;border:1px dashed #e2e2e2;border-radius:4px;">
          <button type="button" class="layui-btn">主按钮</button>
          <button type="button" class="layui-btn layui-btn-primary">次按钮</button>
          <div style="margin-top:10px;">
            <span class="layui-form-checkbox layui-form-checked"><i class="layui-icon layui-icon-ok"></i>已选中</span>
            <span class="layui-form-onswitch" style="margin-left:10px;"><em></em><i></i></span>
          </div>
          <div class="layui-progress" style="margin-top:12px;">
            <div class="layui-progress-bar" style="width:60%;"></div>
          </div>
          <div style="margin-top:12px;">
            <ul class="layui-nav" style="background:none;padding:0;">
              <li class="layui-nav-item layui-this"><a href="javascript:;" style="color:#333;">选中项</a></li>
              <li class="layui-nav-item"><a href="javascript:;" style="color:#666;">普通项</a></li>
            </ul>
          </div>
          <div class="layui-box layui-laypage layui-laypage-default" style="margin-top:12px;">
            <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
            <a href="javascript:;">2</a><a href="javascript:;">3</a>
          </div>
          <blockquote class="layui-elem-quote" style="margin-top:12px;">引用区块：主色左边框</blockquote>
        </div>
      </div>
    </div>

    <div class="layui-alert layui-alert-warn" id="menuTip" style="display:none;margin-top:10px;">
      后台菜单中缺少「界面」入口，
      <a href="javascript:;" id="syncMenu" style="color:#01AAED;">点此补建</a>
      （幂等，可重复执行）
    </div>
  </div>
</div>
<script>
  layui.use(['form', 'layer', 'jquery', 'http'], function () {
    var form = layui.form, layer = layui.layer, $ = layui.jquery, http = layui.http;

    // 拉取已安装模板填充下拉 + 当前设置
    http.post('index', {}).then(function (res) {
      if (!res || res.code !== 0) { return; }
      var inst = res.data.installed || [];
      var gd   = res.data.global_default || 'default';
      var sel  = $('#defaultTemplate');
      inst.forEach(function (t) {
        sel.append('<option value="' + t.name + '">' + t.title + ' (' + t.version + ')</option>');
      });
      sel.val(gd);
      $('#allowSelect').prop('checked', !!res.data.allow_member_select);
      form.render('select');
      form.render('checkbox');
    }).catch(function () {
      layer.msg('加载失败', { icon: 2 });
    });

    form.on('submit(saveSetting)', function (data) {
      http.post('setting', data.field).then(function (res) {
        if (res && res.code === 0) { layer.msg('已保存', { icon: 1 }); }
        else { layer.msg((res && res.message) || '保存失败', { icon: 2 }); }
      }).catch(function () { layer.msg('请求失败', { icon: 2 }); });
      return false;
    });

    /* ===== 站点 layui 配色：实时预览 + 保存 ===== */
    var THEME_DEFAULT = {
      primary: '#16b777',
      accent: '#16baaa',
      radius: '2px',
      font: "-apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif"
    };

    // 预览只写预览容器自身的 CSS 变量，不动全局即可看到效果
    function applyPreview() {
      var el = document.getElementById('themePreview');
      var pick = function (id, key) {
        var v = (document.getElementById(id).value || '').replace(/^\s+|\s+$/g, '');
        return v === '' ? THEME_DEFAULT[key] : v;
      };
      el.style.setProperty('--ywx-primary', pick('primaryText', 'primary'));
      el.style.setProperty('--ywx-accent', pick('accentText', 'accent'));
      el.style.setProperty('--ywx-radius', pick('radiusInput', 'radius'));
      el.style.setProperty('--ywx-font', pick('fontInput', 'font'));
    }

    // 色板 <-> 文本框 双向绑定
    function bindColor(colorId, textId) {
      $('#' + colorId).on('input change', function () {
        $('#' + textId).val(this.value);
        applyPreview();
      });
      $('#' + textId).on('input', function () {
        var v = (this.value || '').replace(/^\s+|\s+$/g, '');
        if (/^#[0-9a-fA-F]{6}$/.test(v)) { $('#' + colorId).val(v); }
        applyPreview();
      });
    }
    bindColor('primaryColor', 'primaryText');
    bindColor('accentColor', 'accentText');
    $('#radiusInput,#fontInput').on('input change', applyPreview);

    // 载入当前配置
    http.get('siteTheme').then(function (res) {
      if (!res || res.code !== 0) { return; }
      var v = res.data.vars || {};
      $('#primaryText').val(v.primary || '');
      $('#primaryColor').val(v.primary || THEME_DEFAULT.primary);
      $('#accentText').val(v.accent || '');
      $('#accentColor').val(v.accent || THEME_DEFAULT.accent);
      $('#radiusInput').val(v.radius || THEME_DEFAULT.radius);
      $('#fontInput').val(v.font || '');
      $('#themeEnable').prop('checked', !!res.data.enable);
      if (!res.data.menu_ok) { $('#menuTip').show(); }
      form.render('select');
      form.render('checkbox');
      applyPreview();
    }).catch(function () {
      layer.msg('主题配置加载失败', { icon: 2 });
    });

    // 保存
    form.on('submit(saveTheme)', function () {
      var data = {
        primary: $('#primaryText').val(),
        accent: $('#accentText').val(),
        radius: $('#radiusInput').val(),
        font: $('#fontInput').val(),
        enable: $('#themeEnable').prop('checked') ? 1 : 0
      };
      http.post('siteTheme', { vars: data }).then(function (res) {
        if (res && res.code === 0) { layer.msg('已保存，全站生效', { icon: 1 }); }
        else { layer.msg((res && res.message) || '保存失败', { icon: 2 }); }
      }).catch(function () { layer.msg('请求失败', { icon: 2 }); });
      return false;
    });

    // 恢复默认（清空提交，服务端自动回落默认值）
    $('#resetTheme').on('click', function () {
      $('#primaryText,#accentText,#fontInput').val('');
      $('#radiusInput').val(THEME_DEFAULT.radius);
      $('#primaryColor').val(THEME_DEFAULT.primary);
      $('#accentColor').val(THEME_DEFAULT.accent);
      $('#themeEnable').prop('checked', true);
      form.render('select');
      form.render('checkbox');
      applyPreview();
      layer.msg('已恢复默认配色，点「保存配色」生效', { icon: 3 });
    });

    // 补建菜单入口（幂等）
    $('#syncMenu').on('click', function () {
      http.post('syncMenu', {}).then(function (res) {
        layer.msg((res && res.message) || '已同步', { icon: (res && res.code === 0) ? 1 : 2 });
        if (res && res.code === 0) { $('#menuTip').hide(); }
      }).catch(function () { layer.msg('请求失败', { icon: 2 }); });
    });
  });
</script>