mtb_dcatadmin_plus/resources/views/admin/pages-custom/ace.blade.php

<style>
    .content-header {
        display: none;
    }
    .left-panel {
        background-color: #fff; /* 左侧面板的背景色 */
        height: 100vh; /* 高度占满 */
    }
    .main-panel {
        background-color: #e9ecef; /* 右侧面板的背景色 */
        height: 97vh; /* 高度占满 */
    }
    .main-panel-header {
        background-color: #fff;
    }
    .main-card-body {
        max-height: 75vh; /* 设置最大高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
        overflow-x: hidden; /* 隐藏水平滚动条 */
        border-radius: 1px; /* 圆角 */
    }
    .main-card-body ul li {
        white-space: nowrap;
        padding: 0px;
    }
    #editor {

        background-color: #1e1e1e;
    }
    .modal-body {
        background-color: #e9ecef;
    }
    .submenu {
        list-style: none;
        padding-left: 3px;
    }
    .submenu .list-group-item {
        padding: 10px 0px 10px 20px;
    }
    .custom-blue-bold {
        color: #1e1e1e; /* Bootstrap 的 primary 颜色 */
        font-weight: bold;
    }
    .modal-xxl {
        max-width: 75%; /* 或其他所需的宽度 */
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-2 left-panel"> <!-- 左侧20% -->
            {!!$leftForm!!}
            <!-- 代码树 start-->
            <div class="main-card-body"></div>
            <!-- 代码树 end-->
        </div>
        <div class="col-10 main-panel"> <!-- 右侧80% -->
            <div class="main-panel-header">
                <button type="button" class="btn btn-primary btn-sm" id="save-btn" disabled>Save</button>
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" id="variable-btn" data-target="#iframeModal" disabled>Variable Management</button>
                <button type="button" class="btn btn-success btn-sm float-right" id="publish-btn" disabled>Publish</button>
            </div>
            <div class="main-panel-content" id="editor" style="width: 100%; height: 100%;"></div>
            <input type="hidden" name="template_id"  id="template_id" />
        </div>
    </div>
</div>

<!-- 变量管理弹窗 -->
<div class="modal fade" id="iframeModal" tabindex="-1" aria-labelledby="iframeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iframeModalLabel">Variable Management</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe src="/prime-control/dist-template-var" width="100%" height="750px" frameborder="0" style="max-width: 100%;overflow: hidden"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="/vendor/ace/ace.js" type="text/javascript"></script>
<script>
    //https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js
    // 创建 Ace 编辑器实例
    var editor = ace.edit("editor");
    // 设置语言
    editor.getSession().setMode("ace/mode/html");
    // 设置主题
    editor.setTheme("ace/theme/monokai");
    editor.setAutoScrollEditorIntoView(true);
    // 其他配置
    editor.setOptions({
        showPrintMargin: true // 不显示打印边距
    });

    $(document).ready(function() {
        var loadingIndex = '';
        var fileId = '';
        var changeButtonDisabled = function (status) {
            $('#save-btn').prop('disabled', status);
            $('#variable-btn').prop('disabled', status);
            $('#publish-btn').prop('disabled', status);
        }

        var changeIframeUrl = function() {
            appearance_id = $('select[name="appearance_id"]').val();
            dist_id = $('input[name="dist_id"]').val();
            var iframeUrl = '/prime-control/dist-template-var?templateCode=' + fileId + '&appearanceId=' + appearance_id+'&distId=' + dist_id;
            $('#iframeModal iframe').attr('src', iframeUrl);
        }
        //点击代码树后中间的Ace编辑器,内容展示
        var actionclick = function() {
            $('.file-action').click(function() {
                //去掉上一个文件的加粗
                $('.custom-blue-bold').removeClass('custom-blue-bold');
                //加粗
                $(this).addClass('custom-blue-bold');
                //去掉保存与变量管理按钮的disabled
                changeButtonDisabled(false);
                //加载编辑代码
                loadingIndex = layer.load(1, {
                    shade: [0.5, '#000'] // 设置遮罩层
                });
                var appearance_id = $('select[name="appearance_id"]').val();
                var dist_id = $('input[name="dist_id"]').val();
                fileId = $(this).attr('file_id');
                //得到文件名
                fileName = $(this).html();
                if (fileName.endsWith('.css')) {
                    editor.getSession().setMode("ace/mode/css");
                } else if (fileName.endsWith('.js')) {
                    editor.getSession().setMode("ace/mode/javascript");
                }else {
                    editor.getSession().setMode("ace/mode/html");
                }
                //改变iframe的url
                changeIframeUrl();
                //编辑代码
                $.ajax({
                    url: '/prime-control/dist-template/ace',
                    type: 'POST',
                    data: {
                        act:'content',
                        appearance_id: appearance_id,
                        dist_id: dist_id,
                        id: fileId
                    },
                    success: function(response) {
                        $("#template_id").val(fileId);
                        editor.setValue(response);
                        layer.close(loadingIndex);
                    }
                });

            });
        }
        // 加载代码树
        var postData = function () {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();
            //改变iframe的url
            changeIframeUrl();
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'tree',
                    appearance_id: appearance_id,
                    dist_id: dist_id
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    $('.main-card-body').html(response);
                    actionclick();
                }
            });
        }
        //左边外观选择与分销商选择联动
        $('select[name="appearance_id"]').change(function() {
            if ($(this).val() == '') {
                changeButtonDisabled(true);
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            //请空编辑器内容
            editor.setValue('');
            //显示代码树
            postData();
        });
        $('input[name="dist_id"]').change(function() {
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            //请空编辑器内容
            editor.setValue('');
            //显示代码树
            postData();
        });
        // 模版编辑保存
        $("#save-btn").click(function() {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();
            var template_id = $("#template_id").val();
            var content = editor.getValue();
            if (template_id == '') {
                Dcat.error('操作失败:请先选择模板');
                return false;
            }
            if (appearance_id == '') {
                Dcat.error('操作失败:请先选择主题');
                return false;
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'content_save',
                    template_code: template_id,
                    appearance_id: appearance_id,
                    dist_id: dist_id,
                    content: content
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    if (response == '1') {
                        Dcat.success('保存成功');
                    }else{
                        Dcat.error('保存失败');
                    }
                }
            });
        })

        // 模版发布
        $("#publish-btn").click(function() {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();

            if (appearance_id == '') {
                Dcat.error('操作失败:请先选择主题');
                return false;
            }
            loadingIndex = layer.load(1, {
                shade: [0.5, '#000'] // 设置遮罩层
            });
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'publish',
                    appearance_id: appearance_id,
                    dist_id: dist_id
                },
                success: function(response) {
                    layer.close(loadingIndex);
                    if (response == '1') {
                        Dcat.success('保存成功');
                    }else{
                        Dcat.error('保存失败');
                    }
                }
            });
        })
    });
</script>