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

<div class="layui-container">
    <div class="admin-title">系统设置</div>

    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="settingTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本设置</li>
                    <li>SEO设置</li>
                    <li>邮件设置</li>
                </ul>
                <div class="layui-tab-content" style="padding-top:20px;">

                    <!-- 基本设置 -->
                    <div class="layui-tab-item layui-show">
                        <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|default=''}" 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|default=''}</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|default=''}" 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|default=''}" 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|default=''}" placeholder="请输入备案号" autocomplete="off" class="layui-input">
                                </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>

                    <!-- SEO设置 -->
                    <div class="layui-tab-item">
                        <form class="layui-form" action="{:url('blog/backend.setting/seo')}" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">网站标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="seo_title" value="{$settings.seo.seo_title|default=''}" 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="seo_keywords" value="{$settings.seo.seo_keywords|default=''}" 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="seo_description" placeholder="请输入网站描述" class="layui-textarea">{$settings.seo.seo_description|default=''}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">百度推送Token</label>
                                <div class="layui-input-block">
                                    <input type="text" name="baidu_token" value="{$settings.seo.baidu_token|default=''}" placeholder="请输入百度推送Token" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="seoSubmit">保存设置</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 邮件设置 -->
                    <div class="layui-tab-item">
                        <form class="layui-form" action="{:url('blog/backend.setting/email')}" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">SMTP服务器</label>
                                <div class="layui-input-block">
                                    <input type="text" name="smtp_host" value="{$settings.email.smtp_host|default=''}" placeholder="请输入SMTP服务器地址" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">SMTP端口</label>
                                <div class="layui-input-block">
                                    <input type="number" name="smtp_port" value="{$settings.email.smtp_port|default=''}" placeholder="请输入SMTP端口" 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="smtp_user" value="{$settings.email.smtp_user|default=''}" 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="password" name="smtp_pass" value="{$settings.email.smtp_pass|default=''}" 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="from_name" value="{$settings.email.from_name|default=''}" placeholder="请输入发件人名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="emailSubmit">保存设置</button>
                                    <button type="button" class="layui-btn layui-btn-primary" id="testEmailBtn">测试发送</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

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

    // 通用表单提交
    function bindSubmit(filter){
        form.on('submit(' + filter + ')', function(data){
            $.post(data.form.action, data.field, function(res){
                if(res.code === 1){
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
            return false;
        });
    }
    bindSubmit('siteSubmit');
    bindSubmit('seoSubmit');
    bindSubmit('emailSubmit');

    // 测试发送邮件
    $('#testEmailBtn').click(function(){
        var formData = {
            smtp_host: $('input[name="smtp_host"]').val(),
            smtp_port: $('input[name="smtp_port"]').val(),
            smtp_user: $('input[name="smtp_user"]').val(),
            smtp_pass: $('input[name="smtp_pass"]').val(),
            from_name: $('input[name="from_name"]').val()
        };
        if (!formData.smtp_host || !formData.smtp_port || !formData.smtp_user || !formData.smtp_pass) {
            layer.msg('请填写完整的SMTP配置', {icon: 2});
            return;
        }
        layer.load(2);
        $.post('{:url("blog/backend.setting/testEmail")}', formData, function(res){
            layer.closeAll('loading');
            if(res.code === 1){
                layer.msg(res.msg, {icon: 1});
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });
    });
});
</script>