YwxAppThink/addon/blog/view/backend/setting/site.html

<div class="layui-container">
    <div class="admin-title">基本设置</div>
    
    <!-- 设置表单 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="{:url('blog/backend.setting/site')}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">站点名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="site_name" value="{$settings.site.site_name}" required lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">站点描述</label>
                    <div class="layui-input-block">
                        <textarea name="site_description" placeholder="请输入站点描述" class="layui-textarea">{$settings.site.site_description}</textarea>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">站点关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="site_keywords" value="{$settings.site.site_keywords}" placeholder="请输入站点关键词，多个用逗号分隔" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">站长邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="site_email" value="{$settings.site.site_email}" placeholder="请输入站长邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">备案号</label>
                    <div class="layui-input-block">
                        <input type="text" name="site_icp" value="{$settings.site.site_icp}" placeholder="请输入备案号" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题色</label>
                    <div class="layui-input-block" style="display:flex;align-items:center;gap:12px;">
                        <input type="color" name="theme_color" value="{$settings.site.theme_color|default='#2d6cdf'}" style="width:46px;height:38px;border:1px solid #eee;border-radius:6px;padding:2px;cursor:pointer;">
                        <input type="text" name="theme_color_text" id="themeColorText" value="{$settings.site.theme_color|default='#2d6cdf'}" placeholder="#2d6cdf" class="layui-input" style="max-width:160px;">
                        <span class="layui-form-mid" style="color:#999;">前台主题色（顶部导航/按钮/底部Tab等）</span>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="siteSubmit">保存设置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
layui.use(['form', 'http', 'ywxapp'], function(){
    var http = layui.http;
    var form = layui.form, $ = layui.$;

    // 颜色选择器 <-> 文本框 双向同步
    $('input[name="theme_color"]').on('input', function(){
        $('#themeColorText').val(this.value);
    });
    $('#themeColorText').on('input', function(){
        var v = $.trim(this.value);
        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) {
            $('input[name="theme_color"]').val(v);
        }
    });

    // 表单提交（统一使用文本框的值为最终主题色）
    form.on('submit(siteSubmit)', function(data){
        data.field.theme_color = $('#themeColorText').val() || data.field.theme_color;
        http.post(data.form.action, data.field).then(function(res){
            if(res.code === 1){
                layer.msg(res.msg, {icon: 1});
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });
        return false;
    });
});
</script>