优选小栈

BadouCMS 后台功能增强:定制标签快捷复制【已PR】

晨瑞 发布于

为 BadouCMS 后台 CMS 标签管理页面新增快捷操作功能:鼠标移动到标签名字上时显示对应模板标签,点击标签即可快速复制该模板标签,提升模板开发时的字段调用效率。

一、功能说明

为 BadouCMS 后台 CMS 标签管理页面新增快捷操作功能:鼠标移动到标签名字上时显示对应模板标签,点击标签即可快速复制该模板标签,提升模板开发时的字段调用效率。

二、修改说明

1. 仅修改文件

路径:app\admin\view\cms\common\builder\fields.html

2. 修改方式

在上述文件的最底部添加以下代码:

三、新增代码

<!--{literal}-->
<script>
layui.use(['layer'], function(){
    var layer = layui.layer;

    // 为所有字段标签添加点击复制功能
    $(document).on('click', '.layui-form-label', function(e) {
        // 查找最近的字段容器,获取字段名
        var $formItem = $(this).closest('.layui-form-item');
        var fieldName = '';

        // 尝试从输入元素中提取字段名
        var $input = $formItem.find('input[name]:first, select[name]:first, textarea[name]:first');
        if ($input.length > 0) {
            var name = $input.attr('name');
            // 处理可能包含数组格式的字段名
            fieldName = name.replace(/^.*\[([^\]]+)\].*$/, '$1');
        }

        if (fieldName) {
            // 格式化为 {$bd.字段名}
            var copyText = '{$bd.' + fieldName + '}';
            // 复制到剪贴板
            var $temp = $('<textarea>');
            $('body').append($temp);
            $temp.val(copyText).select();
            try {
                document.execCommand('copy');
                $temp.remove();
                layer.msg('已复制: {$bd.' + fieldName + '}', {icon: 1});
            } catch (err) {
                $temp.remove();
                layer.msg('复制失败,请手动复制: {$bd.' + fieldName + '}', {icon: 2});
            }
        }
    });

    // 添加鼠标悬停样式提示
    $(document).on('mouseenter', '.layui-form-label', function() {
        $(this).css('cursor', 'pointer');
        var $formItem = $(this).closest('.layui-form-item');
        var $input = $formItem.find('input[name]:first, select[name]:first, textarea[name]:first');
        var fieldName = '';
        if ($input.length > 0) {
            var name = $input.attr('name');
            fieldName = name.replace(/^.*\[([^\]]+)\].*$/, '$1');
        }
        if (fieldName) {
            layer.tips('点击复制 {$bd.' + fieldName + '}', this, {
                tips: 1,
                time: 0,
                area: 'auto'
            });
        }
    }).on('mouseleave', '.layui-form-label', function() {
        layer.closeAll('tips');
    });
});
</script>
<!--{/literal}-->

四、功能亮点

  • 操作直观:鼠标悬停显示提示信息,明确告知可点击复制,提升用户体验;

  • 适配广泛:支持输入框、下拉框、文本域等多种表单元素的字段名提取,兼容数组格式字段名;

  • 反馈清晰:复制成功或失败均有对应弹窗提示,便于用户知晓操作结果;

  • 低侵入性:仅新增代码片段,不修改原有业务逻辑,保障系统稳定性。

五、使用说明

  1. 保存修改后的 content.html 文件;

  2. 刷新 BadouCMS 后台的 CMS 标签管理页面;

  3. 将鼠标移动到任意字段标签上,即可看到“点击复制 {$bd.字段名}”的提示;

  4. 点击该标签,即可完成模板标签的复制,可直接粘贴到模板文件中使用。

  5. 我使用了 <!--{literal}--> 标签将整个<script>块包裹起来,这样 ThinkPHP 模板引擎会完全跳过解析这段内容,直接原样输出。