一、功能说明
为 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}-->
四、功能亮点
-
操作直观:鼠标悬停显示提示信息,明确告知可点击复制,提升用户体验;
-
适配广泛:支持输入框、下拉框、文本域等多种表单元素的字段名提取,兼容数组格式字段名;
-
反馈清晰:复制成功或失败均有对应弹窗提示,便于用户知晓操作结果;
-
低侵入性:仅新增代码片段,不修改原有业务逻辑,保障系统稳定性。
五、使用说明
-
保存修改后的
content.html文件; -
刷新 BadouCMS 后台的 CMS 标签管理页面;
-
将鼠标移动到任意字段标签上,即可看到“点击复制 {$bd.字段名}”的提示;
-
点击该标签,即可完成模板标签的复制,可直接粘贴到模板文件中使用。
-
我使用了
<!--{literal}-->标签将整个<script>块包裹起来,这样ThinkPHP模板引擎会完全跳过解析这段内容,直接原样输出。












这一切,似未曾拥有